/* ==========================================================================
   ColdCalling.sg — Design System
   Singapore's AI Voice Solutions Marketplace
   Vanilla CSS. No build step. No external font dependency.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Brand */
  --c-primary: #0866F5;
  --c-primary-dark: #0552CC;
  --c-primary-light: #E8F1FE;
  --c-navy: #0B1736;

  /* Text */
  --c-text: #172033;
  --c-muted: #5F6B7A;
  --c-inverse: #FFFFFF;

  /* Surface */
  --c-bg: #FFFFFF;
  --c-bg-alt: #F6F8FC;
  --c-border: #DDE3EC;
  --c-border-strong: #C3CDDB;

  /* Status */
  --c-success: #168A53;
  --c-success-bg: #E7F5EE;
  --c-warning: #B7791F;
  --c-warning-bg: #FDF6E7;
  --c-error: #C0392B;
  --c-error-bg: #FCEDEB;

  /* Type: system stack, zero network cost */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji",
    "Segoe UI Emoji";

  --fs-xs: 0.8125rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-md: 1.0625rem;
  --fs-lg: 1.25rem;
  --fs-xl: 1.5rem;
  --fs-2xl: 1.875rem;
  --fs-3xl: 2.25rem;
  --fs-4xl: 2.75rem;
  --fs-5xl: 3.25rem;

  --lh-tight: 1.15;
  --lh-snug: 1.3;
  --lh-normal: 1.6;

  /* Space */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 2.5rem;
  --s-8: 3rem;
  --s-9: 4rem;
  --s-10: 5rem;
  --s-11: 6rem;

  /* Radius */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;
  --r-pill: 999px;

  /* Shadow */
  --sh-xs: 0 1px 2px rgba(11, 23, 54, 0.06);
  --sh-sm: 0 1px 3px rgba(11, 23, 54, 0.08), 0 1px 2px rgba(11, 23, 54, 0.04);
  --sh-md: 0 4px 12px rgba(11, 23, 54, 0.08), 0 2px 4px rgba(11, 23, 54, 0.04);
  --sh-lg: 0 12px 32px rgba(11, 23, 54, 0.10), 0 4px 8px rgba(11, 23, 54, 0.04);
  --sh-focus: 0 0 0 3px rgba(8, 102, 245, 0.30);

  /* Layout */
  --wrap: 1140px;
  --wrap-narrow: 760px;
  --header-h: 68px;
}

/* --------------------------------------------------------------------------
   2. Reset
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

/* The `hidden` attribute must always win.
   Without this, any component with an explicit `display` value (buttons, step
   panels, conditional fields) stays visible when JavaScript hides it, because
   the class rule beats the user-agent [hidden] rule. */
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  line-height: var(--lh-normal);
  color: var(--c-text);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  margin: 0 0 var(--s-4);
  line-height: var(--lh-tight);
  letter-spacing: -0.02em;
  font-weight: 700;
  color: var(--c-navy);
}

h1 { font-size: clamp(2rem, 5vw, var(--fs-5xl)); }
h2 { font-size: clamp(1.625rem, 3.5vw, var(--fs-3xl)); }
h3 { font-size: var(--fs-lg); letter-spacing: -0.01em; }
h4 { font-size: var(--fs-base); letter-spacing: 0; }

p { margin: 0 0 var(--s-4); }
p:last-child { margin-bottom: 0; }

a { color: var(--c-primary); text-decoration: none; }
a:hover { text-decoration: underline; }

img, svg { max-width: 100%; height: auto; display: block; }

ul, ol { margin: 0 0 var(--s-4); padding-left: 1.25rem; }
li { margin-bottom: var(--s-2); }

hr { border: 0; border-top: 1px solid var(--c-border); margin: var(--s-7) 0; }

/* Focus: always visible, never removed */
:focus-visible {
  outline: 3px solid var(--c-primary);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

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

/* --------------------------------------------------------------------------
   3. Utilities
   -------------------------------------------------------------------------- */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--s-5); }
.wrap-narrow { max-width: var(--wrap-narrow); }

.section { padding-block: clamp(var(--s-8), 7vw, var(--s-11)); }
.section-sm { padding-block: var(--s-8); }
.section-alt { background: var(--c-bg-alt); }
.section-navy { background: var(--c-navy); color: rgba(255,255,255,0.88); }
.section-navy h2, .section-navy h3 { color: #fff; }

.center { text-align: center; }
.muted { color: var(--c-muted); }
.small { font-size: var(--fs-sm); }
.xs { font-size: var(--fs-xs); }

.lead { font-size: var(--fs-lg); color: var(--c-muted); line-height: 1.55; }

.section-head { max-width: 720px; margin: 0 auto var(--s-7); text-align: center; }
.section-head p { color: var(--c-muted); font-size: var(--fs-lg); margin-bottom: 0; }

.eyebrow {
  display: inline-block;
  max-width: 100%;
  text-wrap: balance;          /* if it does wrap, split the lines evenly */
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-primary);
  background: var(--c-primary-light);
  padding: 6px 12px;
  border-radius: var(--r-pill);
  margin-bottom: var(--s-4);
}

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; top: -100px; left: var(--s-4); z-index: 200;
  background: var(--c-primary); color: #fff;
  padding: var(--s-3) var(--s-5); border-radius: var(--r-md);
  font-weight: 600;
}
.skip-link:focus { top: var(--s-4); text-decoration: none; }

/* --------------------------------------------------------------------------
   4. Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--s-2);
  min-height: 46px;
  padding: 0 var(--s-5);
  font-family: inherit;
  font-size: var(--fs-base);
  font-weight: 600;
  line-height: 1;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  cursor: pointer;
  text-align: center;
  transition: background-color .15s ease, border-color .15s ease, transform .1s ease, box-shadow .15s ease;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }

.btn-primary { background: var(--c-primary); color: #fff; box-shadow: var(--sh-sm); }
.btn-primary:hover { background: var(--c-primary-dark); color: #fff; }

.btn-secondary { background: #fff; color: var(--c-navy); border-color: var(--c-border-strong); }
.btn-secondary:hover { background: var(--c-bg-alt); border-color: var(--c-muted); }

.btn-ghost { background: transparent; color: var(--c-primary); }
.btn-ghost:hover { background: var(--c-primary-light); }

.btn-lg { min-height: 54px; font-size: var(--fs-md); padding-inline: var(--s-6); }
.btn-block { width: 100%; }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.btn-row.center { justify-content: center; }

/* On narrow screens a wrapped button row looks broken: the long button fills
   the line and wraps its label, while the short one stays at content width,
   so their edges do not line up. Stack them full width instead. */
@media (max-width: 560px) {
  .btn-row { flex-direction: column; align-items: stretch; }
  .btn-row .btn { width: 100%; }
}

/* --------------------------------------------------------------------------
   5. Header
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,0.94);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--c-border);
}

.header-inner {
  display: flex; align-items: center; gap: var(--s-5);
  height: var(--header-h);
}

.brand {
  display: inline-flex; align-items: center;
  flex: 0 0 auto;
}
.brand:hover { text-decoration: none; }

/* Fixed height, width follows the aspect ratio. width/height are set on the
   <img> too so the header does not shift while the logo loads. */
.brand img { height: 34px; width: auto; display: block; }
@media (max-width: 420px) { .brand img { height: 28px; } }

.site-footer .brand img { height: 30px; }

.nav { margin-left: auto; }
.nav-list { display: flex; align-items: center; gap: var(--s-1); list-style: none; margin: 0; padding: 0; }
.nav-list li { margin: 0; }

.nav-link {
  display: inline-flex; align-items: center; gap: 4px;
  padding: var(--s-2) var(--s-3);
  font-size: var(--fs-sm); font-weight: 500;
  color: var(--c-text); border-radius: var(--r-sm);
  white-space: nowrap;
}
.nav-link:hover { background: var(--c-bg-alt); color: var(--c-primary); text-decoration: none; }
.nav-link[aria-current="page"] { color: var(--c-primary); font-weight: 600; }

.header-cta { margin-left: var(--s-3); }

/* The call to action inside the nav drawer is for the mobile layout only.
   On desktop the header already carries one. */
.nav > .btn { display: none; }

.nav-toggle {
  display: none; margin-left: auto;
  width: 44px; height: 44px;
  align-items: center; justify-content: center;
  background: transparent; border: 1px solid var(--c-border);
  border-radius: var(--r-sm); cursor: pointer;
}
.nav-toggle span {
  display: block; width: 18px; height: 2px; background: var(--c-navy);
  position: relative;
}
.nav-toggle span::before, .nav-toggle span::after {
  content: ""; position: absolute; left: 0; width: 18px; height: 2px; background: var(--c-navy);
}
.nav-toggle span::before { top: -6px; }
.nav-toggle span::after { top: 6px; }

@media (max-width: 960px) {
  .nav-toggle { display: inline-flex; }
  .nav {
    position: fixed; inset: var(--header-h) 0 auto 0;
    background: #fff; border-bottom: 1px solid var(--c-border);
    padding: var(--s-4) var(--s-5) var(--s-6);
    box-shadow: var(--sh-lg);
    display: none;
  }
  .nav[data-open="true"] { display: block; }
  .nav-list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav-link { padding: var(--s-4) var(--s-2); font-size: var(--fs-md); border-bottom: 1px solid var(--c-border); border-radius: 0; }
  .header-cta { display: none; }
  .nav > .btn { display: inline-flex; margin-top: var(--s-4); width: 100%; }
}

/* --------------------------------------------------------------------------
   6. Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  padding-block: clamp(var(--s-7), 5vw, var(--s-9)) clamp(var(--s-8), 6vw, var(--s-10));
  /* Three layers, bottom to top:
       3. the original gradient, which shows if the artwork fails to load
       2. the hero artwork, anchored right so the empty left side always sits
          under the headline whatever the viewport width
       1. a horizontal white wash: near-opaque over the left half where the
          headline sits, fading to nothing past the middle so the artwork
          actually reads on the side it was drawn for
     If the artwork is ever replaced with something busier, raise the first
     layer's alpha rather than dimming the image itself. */
  background:
    linear-gradient(100deg,
      rgba(255,255,255,0.92) 0%,
      rgba(255,255,255,0.86) 26%,
      rgba(255,255,255,0.45) 52%,
      rgba(255,255,255,0.08) 74%,
      rgba(255,255,255,0.00) 100%),
    image-set(url("/assets/images/hero-bg.webp") type("image/webp"),
              url("/assets/images/hero-bg.jpg")  type("image/jpeg")) right top / cover no-repeat,
    linear-gradient(180deg, #FFFFFF 0%, #F4F8FF 55%, #EAF1FD 100%);
  overflow: hidden;
}

/* Phones get the smaller encode. The artwork is decorative, so there is no
   point shipping 1920px of it to a 390px screen. */
/* Phones get the smaller encode, and a vertical wash instead of a horizontal
   one: the copy runs the full width here, so the artwork has to give way at the
   top and can only really show below the fold of the text. */
@media (max-width: 700px) {
  .hero {
    background:
      linear-gradient(170deg,
        rgba(255,255,255,0.90) 0%,
        rgba(255,255,255,0.80) 35%,
        rgba(255,255,255,0.55) 70%,
        rgba(255,255,255,0.30) 100%),
      url("/assets/images/hero-bg-sm.webp") right top / cover no-repeat,
      linear-gradient(180deg, #FFFFFF 0%, #F4F8FF 55%, #EAF1FD 100%);
  }
}

/* Subtle skyline band, drawn in CSS. No stock photography. */

.hero .wrap { position: relative; z-index: 1; }

.hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-7);
  align-items: start;
}
@media (min-width: 900px) {
  .hero-grid { grid-template-columns: 1.05fr 0.95fr; gap: var(--s-8); }
}

.hero h1 { margin-bottom: var(--s-4); }
.hero h1 .accent { color: var(--c-primary); display: block; }

.hero-sub { font-size: var(--fs-lg); color: var(--c-muted); max-width: 30em; margin-bottom: var(--s-5); }

/* One check per line.
   These were a wrapping flex row, which put two items on the first line and
   orphaned the third on the second. That ragged 2-then-1 shape is what reads as
   misaligned, and it happened at every width where the three did not quite fit.
   A single column has no wrap point to get wrong, and the ticks form one clean
   vertical edge. */
.hero-checks {
  display: grid; gap: var(--s-2);
  list-style: none; padding: 0; margin: 0 0 var(--s-6);
}
.hero-checks li {
  display: grid; grid-template-columns: auto 1fr; align-items: start;
  gap: var(--s-2);
  font-size: var(--fs-sm); font-weight: 600; color: var(--c-text); margin: 0;
}
/* align-items:start keeps the tick level with the first line of text rather
   than floating to the middle if an item ever wraps to two lines. */
.hero-checks .check-icon { margin-top: 0.1em; }
.check-icon { flex: 0 0 20px; width: 20px; height: 20px; color: var(--c-primary); }

/* --------------------------------------------------------------------------
   7. Credential strip (replaces logo wall)
   -------------------------------------------------------------------------- */
.credibility {
  border-block: 1px solid var(--c-border);
  background: var(--c-bg-alt);
  padding-block: var(--s-6);
}
.credibility-label {
  text-align: center; font-size: var(--fs-xs); font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-muted);
  margin-bottom: var(--s-5);
}
.credibility-grid {
  display: grid; gap: var(--s-4);
  /* 320px keeps this at three columns on desktop, so six items fill two even
     rows instead of leaving an orphan row of two. */
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}
.cred-item {
  display: flex; gap: var(--s-3); align-items: flex-start;
  padding: var(--s-4);
  background: #fff; border: 1px solid var(--c-border); border-radius: var(--r-md);
}
.cred-item svg { flex: 0 0 22px; width: 22px; height: 22px; color: var(--c-primary); margin-top: 2px; }
.cred-item strong { display: block; font-size: var(--fs-sm); color: var(--c-navy); }
.cred-item span { font-size: var(--fs-xs); color: var(--c-muted); line-height: 1.45; }

/* --------------------------------------------------------------------------
   8. Cards
   -------------------------------------------------------------------------- */
.grid { display: grid; gap: var(--s-4); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }

.card {
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: var(--s-5);
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.card h3 { margin-bottom: var(--s-2); font-size: var(--fs-base); }
.card p { font-size: var(--fs-sm); color: var(--c-muted); margin-bottom: 0; }

a.card { display: block; color: inherit; }
a.card:hover {
  text-decoration: none; border-color: var(--c-primary);
  box-shadow: var(--sh-md); transform: translateY(-2px);
}

.card-icon {
  width: 42px; height: 42px;
  display: flex; align-items: center; justify-content: center;
  background: var(--c-primary-light); color: var(--c-primary);
  border-radius: var(--r-md); margin-bottom: var(--s-4);
}
.card-icon svg { width: 22px; height: 22px; }

.card-link {
  display: inline-flex; align-items: center; gap: 4px;
  margin-top: var(--s-3); font-size: var(--fs-sm); font-weight: 600; color: var(--c-primary);
}

/* Goal / industry tiles */
.tile-grid { display: grid; gap: var(--s-3); grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.tile {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--s-2); text-align: center;
  min-height: 108px; padding: var(--s-4) var(--s-3);
  background: #fff; border: 1px solid var(--c-border); border-radius: var(--r-md);
  font-size: var(--fs-sm); font-weight: 600; color: var(--c-navy);
}
.tile:hover { text-decoration: none; border-color: var(--c-primary); background: var(--c-primary-light); }
.tile svg { width: 26px; height: 26px; color: var(--c-primary); }

/* Steps */
.steps { display: grid; gap: var(--s-5); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); counter-reset: step; }

/* Five-step sequences wrap 3 + 2, which reads as intentional.
   The default 4 + 1 leaves an orphan that looks like a mistake. */
.steps-wide { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.step { position: relative; padding-top: var(--s-6); }
.step::before {
  counter-increment: step; content: counter(step);
  position: absolute; top: 0; left: 0;
  width: 32px; height: 32px; border-radius: var(--r-pill);
  background: var(--c-primary); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: var(--fs-sm); font-weight: 700;
}
.step h3 { font-size: var(--fs-base); margin-bottom: var(--s-2); }
.step p { font-size: var(--fs-sm); color: var(--c-muted); margin: 0; }

/* Cost calculator result bands. Always three across, even in a narrow
   column, because the low / typical / high relationship only reads
   left to right. */
.cost-bands {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-2);
  margin-bottom: var(--s-5);
}
.cost-band {
  text-align: center;
  padding: var(--s-4) var(--s-2);
  background: var(--c-bg-alt);
  border-radius: var(--r-md);
  border: 1px solid transparent;
}
.cost-band-label { font-size: var(--fs-xs); color: var(--c-muted); }
.cost-band-value { font-size: var(--fs-lg); font-weight: 700; color: var(--c-navy); line-height: 1.2; }
.cost-band.is-typical { background: var(--c-primary-light); border-color: var(--c-primary); }
.cost-band.is-typical .cost-band-label { color: var(--c-primary); font-weight: 700; }
.cost-band.is-typical .cost-band-value { font-size: var(--fs-xl); font-weight: 800; color: var(--c-primary); }

/* --------------------------------------------------------------------------
   9. Comparison table
   -------------------------------------------------------------------------- */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--c-border); border-radius: var(--r-lg); background: #fff; }
.table-scroll:focus-visible { outline: 3px solid var(--c-primary); }

table.matrix { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); min-width: 720px; }
table.matrix th, table.matrix td { padding: var(--s-3) var(--s-4); text-align: left; vertical-align: top; border-bottom: 1px solid var(--c-border); }
table.matrix thead th { background: var(--c-bg-alt); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.05em; color: var(--c-muted); white-space: nowrap; }
table.matrix tbody th { font-weight: 600; color: var(--c-navy); white-space: nowrap; }
table.matrix tbody tr:last-child th, table.matrix tbody tr:last-child td { border-bottom: 0; }
table.matrix tbody tr:hover { background: #FBFCFE; }
.table-note { font-size: var(--fs-xs); color: var(--c-muted); margin-top: var(--s-3); }

/* --------------------------------------------------------------------------
   10. FAQ
   -------------------------------------------------------------------------- */
.faq { border: 1px solid var(--c-border); border-radius: var(--r-lg); overflow: hidden; background: #fff; }
.faq details { border-bottom: 1px solid var(--c-border); }
.faq details:last-child { border-bottom: 0; }
.faq summary {
  display: flex; justify-content: space-between; align-items: center; gap: var(--s-4);
  padding: var(--s-4) var(--s-5);
  font-weight: 600; color: var(--c-navy); cursor: pointer; list-style: none;
  min-height: 56px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: 0 0 10px; width: 10px; height: 10px;
  border-right: 2px solid var(--c-muted); border-bottom: 2px solid var(--c-muted);
  transform: rotate(45deg); transition: transform .2s ease;
}
.faq details[open] summary::after { transform: rotate(-135deg); }
.faq summary:hover { background: var(--c-bg-alt); }
.faq .faq-body { padding: 0 var(--s-5) var(--s-5); font-size: var(--fs-sm); color: var(--c-muted); }

/* --------------------------------------------------------------------------
   11. Callouts
   -------------------------------------------------------------------------- */
.callout {
  display: flex; gap: var(--s-4); align-items: flex-start;
  padding: var(--s-5);
  border-radius: var(--r-lg);
  border: 1px solid var(--c-border);
  background: var(--c-bg-alt);
}
.callout svg { flex: 0 0 22px; width: 22px; height: 22px; color: var(--c-primary); margin-top: 2px; }
.callout p { font-size: var(--fs-sm); margin: 0; }
.callout strong { color: var(--c-navy); }
.callout-warning { background: var(--c-warning-bg); border-color: #F0DFB8; }
.callout-warning svg { color: var(--c-warning); }

.free-band {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-4);
  padding: var(--s-4) var(--s-5);
  background: var(--c-success-bg); border: 1px solid #C3E6D3;
  border-radius: var(--r-lg);
}
.free-band svg { flex: 0 0 22px; width: 22px; height: 22px; color: var(--c-success); }
.free-band strong { color: var(--c-success); font-size: var(--fs-base); }
.free-band span { font-size: var(--fs-sm); color: var(--c-text); }

/* --------------------------------------------------------------------------
   12. Form engine
   -------------------------------------------------------------------------- */
.form-card {
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-lg);
  padding: var(--s-6);
}
@media (max-width: 520px) { .form-card { padding: var(--s-5) var(--s-4); border-radius: var(--r-lg); } }

.form-card h2 { font-size: var(--fs-xl); text-align: center; margin-bottom: var(--s-2); }
.form-intro { font-size: var(--fs-sm); color: var(--c-muted); text-align: center; margin-bottom: var(--s-5); }

.progress { margin-bottom: var(--s-5); }
.progress-label { display: flex; justify-content: space-between; font-size: var(--fs-xs); font-weight: 600; color: var(--c-muted); margin-bottom: var(--s-2); }
.progress-track { height: 6px; background: var(--c-border); border-radius: var(--r-pill); overflow: hidden; }
.progress-bar { height: 100%; width: 16.6%; background: var(--c-primary); border-radius: var(--r-pill); transition: width .3s ease; }

.step-panel[hidden] { display: none; }
.step-question { font-size: var(--fs-lg); font-weight: 700; color: var(--c-navy); margin-bottom: var(--s-2); }
.step-hint { font-size: var(--fs-sm); color: var(--c-muted); margin-bottom: var(--s-4); }

fieldset { border: 0; padding: 0; margin: 0 0 var(--s-4); }
legend { padding: 0; font-size: var(--fs-base); font-weight: 700; color: var(--c-navy); margin-bottom: var(--s-3); }

/* Selectable option cards */
.option-grid { display: grid; gap: var(--s-3); grid-template-columns: 1fr; }
@media (min-width: 420px) { .option-grid.two-col { grid-template-columns: 1fr 1fr; } }

.option {
  position: relative; display: flex; align-items: center; gap: var(--s-3);
  min-height: 56px; padding: var(--s-3) var(--s-4);
  border: 1px solid var(--c-border); border-radius: var(--r-md);
  background: #fff; cursor: pointer;
  font-size: var(--fs-sm); font-weight: 600; color: var(--c-navy);
  transition: border-color .12s ease, background-color .12s ease, box-shadow .12s ease;
}
.option:hover { border-color: var(--c-primary); background: #FAFCFF; }
.option input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.option svg { flex: 0 0 20px; width: 20px; height: 20px; color: var(--c-primary); }
.option .option-text { display: block; }
.option .option-desc { display: block; font-size: var(--fs-xs); font-weight: 400; color: var(--c-muted); margin-top: 2px; }
.option:has(input:checked) {
  border-color: var(--c-primary); background: var(--c-primary-light);
  box-shadow: inset 0 0 0 1px var(--c-primary);
}
.option:has(input:focus-visible) { outline: 3px solid var(--c-primary); outline-offset: 2px; }

/* Standard inputs */
.field { margin-bottom: var(--s-4); }
.field label { display: block; font-size: var(--fs-sm); font-weight: 600; color: var(--c-navy); margin-bottom: var(--s-2); }
.field .optional { font-weight: 400; color: var(--c-muted); }

.input, select.input, textarea.input {
  width: 100%; min-height: 48px;
  padding: var(--s-3) var(--s-4);
  font-family: inherit; font-size: var(--fs-base); color: var(--c-text);
  background: #fff; border: 1px solid var(--c-border-strong); border-radius: var(--r-md);
  transition: border-color .12s ease, box-shadow .12s ease;
}
textarea.input { min-height: 96px; resize: vertical; }
.input:focus { border-color: var(--c-primary); box-shadow: var(--sh-focus); outline: none; }
.input[aria-invalid="true"] { border-color: var(--c-error); background: var(--c-error-bg); }

select.input {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%235F6B7A'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 16px;
  padding-right: 40px;
}

.field-error { display: none; font-size: var(--fs-xs); color: var(--c-error); margin-top: var(--s-2); font-weight: 600; }
.field-error[data-visible="true"] { display: block; }

.two-up { display: grid; gap: var(--s-4); grid-template-columns: 1fr; }
@media (min-width: 520px) { .two-up { grid-template-columns: 1fr 1fr; } }

/* Consent */
.consent { display: flex; gap: var(--s-3); align-items: flex-start; padding: var(--s-4); border: 1px solid var(--c-border); border-radius: var(--r-md); background: var(--c-bg-alt); margin-bottom: var(--s-3); }
.consent input[type="checkbox"] { flex: 0 0 20px; width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--c-primary); }
.consent label { font-size: var(--fs-sm); color: var(--c-text); line-height: 1.5; font-weight: 400; margin: 0; }

/* Nav */
.form-nav { display: flex; gap: var(--s-3); margin-top: var(--s-5); }
.form-nav .btn { flex: 1; }
.form-nav .btn-secondary { flex: 0 0 auto; min-width: 96px; }

.form-footnote { display: flex; align-items: center; justify-content: center; gap: var(--s-2); font-size: var(--fs-xs); color: var(--c-muted); margin-top: var(--s-4); text-align: center; }
.form-footnote svg { flex: 0 0 14px; width: 14px; height: 14px; }

.honeypot { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

/* Summary */
.summary-list { list-style: none; padding: 0; margin: 0 0 var(--s-4); border: 1px solid var(--c-border); border-radius: var(--r-md); overflow: hidden; }
.summary-list li { display: flex; justify-content: space-between; gap: var(--s-4); padding: var(--s-3) var(--s-4); font-size: var(--fs-sm); border-bottom: 1px solid var(--c-border); margin: 0; }
.summary-list li:last-child { border-bottom: 0; }
.summary-list dt, .summary-key { color: var(--c-muted); }
.summary-val { font-weight: 600; color: var(--c-navy); text-align: right; }

.form-status { padding: var(--s-4); border-radius: var(--r-md); font-size: var(--fs-sm); margin-top: var(--s-4); }
.form-status[data-type="error"] { background: var(--c-error-bg); color: var(--c-error); border: 1px solid #F0C4BE; }
.form-status[data-type="success"] { background: var(--c-success-bg); color: var(--c-success); border: 1px solid #C3E6D3; }

/* --------------------------------------------------------------------------
   13. Footer
   -------------------------------------------------------------------------- */
.site-footer { background: var(--c-navy); color: rgba(255,255,255,0.72); padding-block: var(--s-9) var(--s-6); font-size: var(--fs-sm); }
.footer-grid { display: grid; gap: var(--s-6); grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); margin-bottom: var(--s-7); }
.footer-brand { grid-column: 1 / -1; }
@media (min-width: 760px) { .footer-brand { grid-column: auto; } }
.site-footer .brand { color: #fff; }
.site-footer h3 { color: #fff; font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: var(--s-4); }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: var(--s-2); }
.site-footer a { color: rgba(255,255,255,0.72); }
.site-footer a:hover { color: #fff; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.14); padding-top: var(--s-5); display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-5); justify-content: space-between; font-size: var(--fs-xs); }

/* --------------------------------------------------------------------------
   14. Breadcrumbs & meta
   -------------------------------------------------------------------------- */
.breadcrumbs { font-size: var(--fs-xs); color: var(--c-muted); padding-block: var(--s-4); }
.breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s-2); padding: 0; margin: 0; }
.breadcrumbs li { margin: 0; display: flex; align-items: center; gap: var(--s-2); }
.breadcrumbs li + li::before { content: "/"; color: var(--c-border-strong); }

.page-meta { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); font-size: var(--fs-xs); color: var(--c-muted); padding-top: var(--s-5); border-top: 1px solid var(--c-border); margin-top: var(--s-7); }

/* --------------------------------------------------------------------------
   15. Sticky mobile CTA
   -------------------------------------------------------------------------- */
.sticky-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  padding: var(--s-3) var(--s-4) calc(var(--s-3) + env(safe-area-inset-bottom));
  background: rgba(255,255,255,0.96);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--c-border);
  display: none;
}
.sticky-cta .btn { width: 100%; }
@media (max-width: 760px) {
  .sticky-cta[data-visible="true"] { display: block; }
  body:has(.sticky-cta[data-visible="true"]) { padding-bottom: 76px; }
}

/* --------------------------------------------------------------------------
   16. Print
   -------------------------------------------------------------------------- */
@media print {
  .site-header, .sticky-cta, .form-card, .site-footer { display: none !important; }
  body { font-size: 12pt; }
}

/* ==========================================================================
   MOTION
   --------------------------------------------------------------------------
   Everything here is gated on .motion, a class that motion.js adds to <html>
   only after it has confirmed the visitor has not asked for reduced motion. No
   JavaScript, or reduced motion requested, means none of these rules apply and
   nothing is ever hidden. The @media block at the end is a second guard in case
   the class is ever set some other way.

   Only transform and opacity are animated, so none of this causes layout or
   paint work during scrolling.
   ========================================================================== */

/* --- scroll reveals and hero entrance ----------------------------------- */
.motion .rise {
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  transition:
    opacity   .55s cubic-bezier(.22,.61,.36,1),
    transform .55s cubic-bezier(.22,.61,.36,1);
  will-change: opacity, transform;
}
.motion .rise.in {
  opacity: 1;
  transform: none;
}
/* Once it has played, drop the hint so the compositor can release the layer. */
.motion .rise.in { will-change: auto; }

/* --- hover, for things that are actually interactive -------------------- */
a.card {
  transition:
    transform   .22s cubic-bezier(.22,.61,.36,1),
    box-shadow  .22s cubic-bezier(.22,.61,.36,1),
    border-color .22s ease;
}
@media (hover: hover) {
  a.card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px -12px rgba(18, 48, 110, .28);
  }
  a.card:hover .card-link { transform: translateX(3px); }
}
.card-link {
  display: inline-block;
  transition: transform .22s cubic-bezier(.22,.61,.36,1);
}

.btn {
  transition:
    background-color .18s ease,
    box-shadow       .18s ease,
    transform        .12s cubic-bezier(.22,.61,.36,1);
}
@media (hover: hover) {
  .btn-primary:hover { transform: translateY(-1px); box-shadow: 0 10px 22px -10px rgba(8,102,245,.7); }
}
.btn:active { transform: translateY(0) scale(.985); }

.nav-link { position: relative; }
.nav-link::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -4px; height: 2px;
  background: var(--c-primary);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .22s cubic-bezier(.22,.61,.36,1);
}
@media (hover: hover) {
  .nav-link:hover::after { transform: scaleX(1); }
}
.nav-link[aria-current="page"]::after { transform: scaleX(1); }

/* --- the FAQ disclosure arrow ------------------------------------------- */
.faq details summary { transition: color .18s ease; }
.faq details[open] summary { color: var(--c-primary); }

/* --- respect the OS setting, whatever else happens ---------------------- */
@media (prefers-reduced-motion: reduce) {
  .motion .rise,
  .motion .rise.in {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* The eyebrow is set in uppercase with wide tracking, which is what pushes it
   onto two lines on a 390px screen and leaves a tall, awkward pill. Tightening
   the tracking and dropping a point keeps it on one line down to about 360px. */
@media (max-width: 560px) {
  .eyebrow { letter-spacing: 0.05em; font-size: 11.5px; padding: 5px 11px; }
}