/*
 * Seylac Public Visual Unity V1.4
 * Scope: visual tokens and consistency only. No layout/content/route changes.
 */
:root {
  --su-color-primary: #185aa4;
  --su-color-primary-hover: #124b8b;
  --su-color-primary-soft: #eaf2fb;
  --su-color-heading: #0b2948;
  --su-color-body: #42566c;
  --su-color-muted: #718096;
  --su-color-border: #dce6eb;
  --su-color-background: #f4f8f7;
  --su-color-surface: #ffffff;
  --su-color-surface-alt: #edf5f4;
  --su-color-success: #087b61;
  --su-color-warning: #9a6800;
  --su-color-danger: #b42318;
  --su-color-gold: #f5c33b;
  --su-color-black: #111518;

  --su-font-public: "Instrument Sans", "Mona Sans", "Helvetica Neue", Arial, sans-serif;
  --su-font-display: clamp(3rem, 5.15vw, 4.75rem);
  --su-font-h1: clamp(2.75rem, 4.8vw, 4.5rem);
  --su-font-h2: clamp(2.25rem, 3.7vw, 3.5rem);
  --su-font-h3: clamp(1.85rem, 2.8vw, 2.75rem);
  --su-font-h4: clamp(1.05rem, 1.35vw, 1.25rem);
  --su-font-body-lg: clamp(1.0625rem, 1.25vw, 1.25rem);
  --su-font-body: 1rem;
  --su-font-body-sm: .875rem;
  --su-font-label: .75rem;

  --su-space-1: .25rem;
  --su-space-2: .5rem;
  --su-space-3: .75rem;
  --su-space-4: 1rem;
  --su-space-6: 1.5rem;
  --su-space-8: 2rem;
  --su-space-12: 3rem;
  --su-space-16: 4rem;
  --su-space-20: 5rem;
  --su-space-24: 6rem;

  --su-container-max: 77.5rem;
  --su-container-pad: clamp(1rem, 3vw, 3rem);
  --su-section-space: clamp(3.75rem, 7vw, 6rem);

  --su-radius-control: .625rem;
  --su-radius-card: 1.125rem;
  --su-transition-fast: 180ms ease;
  --su-focus-ring: 0 0 0 3px rgba(24, 90, 164, .24);
}

html body {
  font-family: var(--su-font-public);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

html body .shv-home :is(h1, h2, h3, h4) {
  font-family: var(--su-font-public);
  text-wrap: balance;
}

html body .shv-home h1 { font-size: var(--su-font-h1); font-weight: 760; line-height: 1.04; letter-spacing: -.045em; }
html body .shv-home h2 { font-size: var(--su-font-h2); font-weight: 750; line-height: 1.08; letter-spacing: -.04em; }
html body .shv-home h3 { font-size: var(--su-font-h3); font-weight: 740; line-height: 1.12; letter-spacing: -.035em; }
html body .shv-home h4 { font-size: var(--su-font-h4); font-weight: 720; line-height: 1.28; letter-spacing: -.02em; }
html body .shv-home p { line-height: 1.62; }

html body :is(.shv-home .shv-shell, .seylac-footer-shell) {
  width: min(var(--su-container-max), calc(100% - (var(--su-container-pad) * 2)));
  margin-inline: auto;
}

html body .shv-home :is(.shv-label, .sx-feature-label, .s4-eyebrow, .sv35-eyebrow, .eyebrow, .mp-kicker) {
  font-family: var(--su-font-public);
  font-size: var(--su-font-label);
  font-weight: 760;
  line-height: 1.35;
  letter-spacing: .12em;
}

html body .shv-home :is(
  .shv-button,
  .mp-link,
  .s4-link
),
html body header.nav-wrap :is(.nav-cta, .mobile-cta) {
  font-family: var(--su-font-public);
  font-size: .875rem;
  font-weight: 700;
  letter-spacing: -.01em;
  transition: color var(--su-transition-fast), background-color var(--su-transition-fast),
              border-color var(--su-transition-fast), transform var(--su-transition-fast),
              box-shadow var(--su-transition-fast);
}

html body .shv-home .shv-button,
html body header.nav-wrap :is(.nav-cta, .mobile-cta) {
  min-height: 3.25rem;
  padding: .75rem 1.55rem;
  border-radius: var(--su-radius-control);
}

html body .shv-home .shv-button:focus-visible,
html body header.nav-wrap :is(.nav-cta, .mobile-cta):focus-visible {
  outline: 2px solid transparent;
  box-shadow: var(--su-focus-ring);
}

html body .shv-home .shv-button:active,
html body header.nav-wrap :is(.nav-cta, .mobile-cta):active {
  transform: translateY(1px);
}

html body .shv-home .shv-button[aria-disabled="true"],
html body .shv-home .shv-button:disabled,
html body header.nav-wrap :is(.nav-cta, .mobile-cta)[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: .55;
  transform: none;
}

/* Navigation remains structurally unchanged; only its rhythm and controls are unified. */
html body header.nav-wrap.seylac-production-nav {
  font-family: var(--su-font-public);
}

html body header.nav-wrap.seylac-production-nav > .nav {
  width: min(var(--su-container-max), calc(100% - (var(--su-container-pad) * 2)));
  min-height: 4.875rem;
}

html body header.nav-wrap.seylac-production-nav .nav-links {
  gap: clamp(1.125rem, 2vw, 2rem);
}

html body header.nav-wrap.seylac-production-nav :is(.nav-links a, .seylac-feature-trigger, .nav-login) {
  font-family: var(--su-font-public) !important;
  font-size: .875rem !important;
  font-weight: 690 !important;
  letter-spacing: -.012em !important;
}

html body header.nav-wrap.seylac-production-nav .nav-cta {
  box-sizing: border-box !important;
  display: inline-flex !important;
  flex: 0 0 auto !important;
  align-self: center !important;
  align-items: center !important;
  justify-content: center !important;
  gap: .65rem !important;
  width: auto !important;
  min-width: 0 !important;
  height: 2.75rem !important;
  min-height: 2.75rem !important;
  max-height: 2.75rem !important;
  margin-block: 0 !important;
  padding: 0 1.25rem !important;
  border: 1px solid var(--su-color-black) !important;
  border-radius: .3rem !important;
  color: #fff !important;
  background: var(--su-color-black) !important;
  box-shadow: none !important;
  font-size: .875rem !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

html body header.nav-wrap.seylac-production-nav .nav-cta:hover {
  border-color: #000 !important;
  background: #000 !important;
  transform: translateY(-1px);
}

/* Homepage: retain exact structure and assets; normalize only visual rhythm. */
html body .shv-home .shv-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(85% 125% at 96% 4%, rgba(39, 130, 239, .42) 0 35%, transparent 36%),
    radial-gradient(80% 125% at 87% 30%, rgba(18, 103, 208, .34) 0 45%, transparent 46%),
    linear-gradient(112deg, #062a5e 0%, #073f85 53%, #075fc2 100%) !important;
}

/* Website Studio may inject a late flat background declaration. This final,
   narrowly-scoped rule keeps only the approved hero treatment authoritative. */
html body main .shv-home section.shv-hero#home {
  background-color: #062f68 !important;
  background-image:
    radial-gradient(90% 135% at 101% -4%, rgba(39, 132, 239, .52) 0 34%, transparent 35%),
    radial-gradient(80% 120% at 88% 31%, rgba(16, 100, 207, .40) 0 45%, transparent 46%),
    linear-gradient(112deg, #041f48 0%, #06366f 48%, #0768cc 100%) !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
}

/* Approved deep-blue workflow proof; content and geometry stay unchanged. */
html body main .shv-home .s4-story-forward .s4-forward-proof {
  background-color: #073f85 !important;
  background-image: linear-gradient(135deg, #062f68 0%, #0755a5 100%) !important;
  border-color: rgba(255, 255, 255, .14) !important;
}

/* Seylac AI: replace the legacy teal family with the same blue system used by
   the public website while retaining white surfaces and the gold brand mark. */
html body .sey-ai-launcher,
html body .sey-ai-widget .sey-ai-widget-head,
html body .sey-ai-widget .ai-ui-avatar,
html body .sey-ai-widget .ai-ui-message.user .ai-ui-bubble,
html body .sey-ai-widget .ai-composer-2026 button {
  border-color: #124e96 !important;
  color: #fff !important;
  background-color: #124e96 !important;
  background-image: none !important;
}

html body .sey-ai-launcher {
  border-color: rgba(255, 255, 255, .24) !important;
  box-shadow: 0 14px 34px rgba(18, 78, 150, .28) !important;
}

html body .sey-ai-launcher:hover,
html body .sey-ai-widget .ai-composer-2026 button:hover {
  background-color: #0e427f !important;
}

html body .sey-ai-launcher:active,
html body .sey-ai-widget .ai-composer-2026 button:active {
  background-color: #0a3568 !important;
}

html body .sey-ai-launcher:focus-visible,
html body .sey-ai-widget :is(button, input):focus-visible {
  outline: 2px solid #fff !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 4px rgba(130, 173, 218, .52) !important;
}

html body .sey-ai-launcher-dot {
  border-color: #124e96 !important;
}

html body .sey-ai-widget .ai-ui-avatar {
  color: #f4bd35 !important;
}

html body .sey-ai-widget {
  border-color: #bfd4ea !important;
  box-shadow: 0 26px 70px rgba(18, 78, 150, .24) !important;
}

html body .sey-ai-widget :is(.ai-ui-messages, .ai-prompt-row) {
  background-color: #f3f7fc !important;
}

html body .sey-ai-widget .ai-ui-bubble {
  border-color: #d2e3f4 !important;
  color: #27415f !important;
}

html body .sey-ai-widget .ai-ui-message.user .ai-ui-bubble {
  color: #fff !important;
}

html body .sey-ai-widget .ai-prompt-row button {
  border-color: #bfd4ea !important;
  color: #124e96 !important;
  background-color: #fff !important;
}

html body .sey-ai-widget .ai-prompt-row button:hover {
  background-color: #e0ecf8 !important;
}

html body .sey-ai-widget .ai-composer-2026 {
  border-top-color: #d2e3f4 !important;
}

html body .sey-ai-widget .ai-composer-2026 input {
  border-color: #bfd4ea !important;
}

html body .sey-ai-widget .sey-ai-footer {
  color: #64748b !important;
}

html body .shv-home .shv-hero-copy h1 {
  font-family: var(--su-font-public) !important;
  font-size: var(--su-font-display) !important;
  font-weight: 760 !important;
  line-height: 1.04 !important;
  letter-spacing: -.048em !important;
}

html body .shv-home .shv-hero-copy h1 .shv-title-line:last-child {
  color: var(--su-color-gold) !important;
}

html body .shv-home .shv-hero-copy > p {
  font-family: var(--su-font-public) !important;
  font-size: var(--su-font-body-lg) !important;
  line-height: 1.55 !important;
  letter-spacing: -.012em !important;
}

html body .shv-home .shv-actions {
  gap: var(--su-space-3);
}

html body .shv-home :is(.sx-feature-intro, .s4-story, .sx-feature-mobile, .sv351-about-card) {
  font-family: var(--su-font-public);
}

html body .shv-home :is(.sx-feature-intro h2, .s4-story h3, .sx-feature-mobile h3, .sv351-about-card h2) {
  font-family: var(--su-font-public) !important;
}

html body .shv-home :is(.sx-feature-intro-copy, .s4-value-content, .sx-feature-mobile-copy, .s4-forward-copy) > p {
  font-size: var(--su-font-body);
  line-height: 1.62;
}

html body .shv-home :is(.sx-feature-intro, .s4-story, .sx-feature-mobile) {
  border-color: var(--su-color-border);
}

html body .mobile-panel .mobile-cta {
  border-color: var(--su-color-black) !important;
  color: #fff !important;
  background: var(--su-color-black) !important;
}

@media (max-width: 860px) {
  :root {
    --su-container-pad: 1rem;
    --su-section-space: 3.75rem;
  }

  html body header.nav-wrap.seylac-production-nav > .nav {
    width: calc(100% - 2rem) !important;
  }

  html body .shv-home .shv-hero-copy h1 {
    font-size: clamp(2.75rem, 12vw, 4rem) !important;
    line-height: 1.03 !important;
  }

  html body .shv-home .shv-hero-copy > p {
    font-size: clamp(1rem, 4.4vw, 1.125rem) !important;
  }
}

@media (max-width: 760px) {
  html body main .shv-home section.shv-hero#home .shv-hero-grid,
  html body main .shv-home section.shv-hero#home .shv-hero-image,
  html body main .shv-home section.shv-hero#home .shv-hero-copy {
    background-color: transparent !important;
    background-image: none !important;
  }

  html body main .shv-home section.shv-hero#home .shv-hero-image::after {
    background: linear-gradient(180deg, rgba(6, 47, 104, 0), #06366f 88%) !important;
  }
}

@media (max-width: 520px) {
  html body .shv-home .shv-button,
  html body header.nav-wrap .mobile-cta {
    min-height: 3rem;
    padding: .7rem 1.2rem;
    font-size: .8125rem;
  }

  /* Mobile hero containment: prevent title, copy and controls from touching or
     crossing either viewport edge. Desktop geometry remains unchanged. */
  html body main .shv-home section.shv-hero#home .shv-hero-copy {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 24px 22px 42px !important;
    overflow: hidden !important;
  }

  html body main .shv-home section.shv-hero#home .shv-label {
    max-width: 100% !important;
    font-size: .6875rem !important;
    line-height: 1.4 !important;
    white-space: normal !important;
  }

  html body main .shv-home section.shv-hero#home .shv-hero-copy h1 {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 18px !important;
    font-size: clamp(2.15rem, 10.2vw, 2.5rem) !important;
    line-height: 1.04 !important;
    letter-spacing: -.042em !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }

  html body main .shv-home section.shv-hero#home .shv-title-line {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    white-space: normal !important;
  }

  html body main .shv-home section.shv-hero#home .shv-hero-copy > p {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 22px !important;
    font-size: .9375rem !important;
    line-height: 1.58 !important;
    overflow-wrap: break-word !important;
  }

  html body main .shv-home section.shv-hero#home .shv-actions {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 10px !important;
  }

  html body main .shv-home section.shv-hero#home .shv-actions .shv-button {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 50px !important;
    padding-inline: 18px !important;
    border-radius: 12px !important;
  }

  html body main .shv-home section.shv-hero#home .shv-trust {
    box-sizing: border-box !important;
    display: grid !important;
    width: 100% !important;
    max-width: 100% !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    align-items: start !important;
    gap: 8px !important;
    margin-top: 22px !important;
  }

  html body main .shv-home section.shv-hero#home .shv-trust span {
    min-width: 0 !important;
    font-size: .6875rem !important;
    line-height: 1.35 !important;
    text-align: center !important;
    white-space: normal !important;
  }

  /* Wider, calmer security cards: the icon and copy share a clear compact row. */
  html body main .shv-home .s4-story-value--trust .s4-value-content {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 28px 16px 22px !important;
  }

  html body main .shv-home .s4-story-value--trust .s4-value-content > header {
    padding-bottom: 20px !important;
  }

  html body main .shv-home .s4-story-value--trust #s4-story-value-title {
    max-width: 100% !important;
    margin-top: 10px !important;
    font-size: clamp(1.55rem, 7.2vw, 1.8rem) !important;
    line-height: 1.08 !important;
    white-space: normal !important;
    text-wrap: balance !important;
  }

  html body main .shv-home .s4-story-value--trust .s4-trust-points {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: none !important;
    gap: 10px !important;
    margin: 0 !important;
  }

  html body main .shv-home .s4-story-value--trust .s4-trust-points > div {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 0 !important;
    grid-template-columns: 50px minmax(0, 1fr) !important;
    column-gap: 14px !important;
    padding: 18px !important;
    border-radius: 18px !important;
    box-shadow: 0 12px 28px rgba(7, 47, 69, .09) !important;
  }

  html body main .shv-home .s4-story-value--trust .s4-trust-badge {
    width: 50px !important;
    height: 50px !important;
    min-width: 50px !important;
    min-height: 50px !important;
  }

  html body main .shv-home .s4-story-value--trust .s4-trust-points h4 {
    max-width: 100% !important;
    margin: 1px 0 5px !important;
    font-size: 1.0625rem !important;
    line-height: 1.2 !important;
    white-space: normal !important;
  }

  html body main .shv-home .s4-story-value--trust .s4-trust-points p {
    max-width: 100% !important;
    font-size: .875rem !important;
    line-height: 1.48 !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body *,
  html body *::before,
  html body *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}