/* ==========================================================================
   Public marketing site
   Design system lifted from the v2 mockup: Instrument Sans + JetBrains Mono,
   navy/blue palette, result colours shared with the app.
   ========================================================================== */

:root {
  --bg:        #F6F8FB;
  --surface:   #FFFFFF;
  --surface-2: #FBFCFE;
  --tint:      #F3F7FE;
  --line:      #E1E8F0;
  --line-soft: #EDF1F7;
  --field:     #D6DFEA;

  --ink:    #0A1A2F;
  --ink-2:  #33475B;
  --ink-3:  #6B7C93;
  --ink-4:  #9AA9BC;

  --blue:      #1257E8;
  --blue-dark: #0B47B0;
  --blue-soft: #E7F0FE;
  --navy:      #06264F;
  --navy-deep: #04203F;
  --sky:       #9CC2FB;
  --sky-pale:  #C7D8F0;
  --sky-dim:   #8FAFD6;

  --good: #0F7B6C;
  /* Wordmark accent: the logo's shield teal, darkened enough to
     stay legible as 18px text on white. */
  --brand-accent: #0E9E80;
  --bad:  #C0392B;
  --warn: #B26A00;
  --grey: #64748B;

  --sans: 'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI',
          Roboto, Helvetica, Arial, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas,
          monospace;

  --wrap: 1280px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { font-weight: 600; letter-spacing: -0.022em; margin: 0; }
p { margin: 0; }
a { color: var(--blue); text-decoration: none; }
a:hover { color: var(--blue-dark); }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
::selection { background: #D7E5FE; }
img { max-width: 100%; }

.wrap { max-width: var(--wrap); margin: 0 auto; }
.mono { font-family: var(--mono); }
.tnum { font-variant-numeric: tabular-nums; }
.center { text-align: center; }

@keyframes pulse { 0%,100% { opacity: 1 } 50% { opacity: .3 } }
@keyframes land  { from { opacity: 0; transform: translateY(10px) } to { opacity: 1; transform: none } }
@keyframes sweep { 0% { transform: translateX(-100%) } 100% { transform: translateX(220%) } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ---------- header ------------------------------------------------------ */

.site-header {
  position: sticky; top: 0; z-index: 30;
  background: rgba(246,248,251,.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.site-header .bar {
  max-width: var(--wrap); margin: 0 auto; padding: 14px 28px;
  display: flex; align-items: center; gap: 28px;
}
.brand { display: flex; align-items: center; gap: 10px; color: var(--ink); flex: none; }
.brand-mark {
  width: 26px; height: 26px; border-radius: 7px;
  background: linear-gradient(135deg, var(--blue), var(--navy));
  display: grid; place-items: center; color: #fff;
  font-family: var(--mono); font-size: 13px; font-weight: 600;
}
.brand-name { font-size: 18px; font-weight: 600; letter-spacing: -0.02em; }

.site-nav { display: flex; gap: clamp(12px, 1.6vw, 24px); align-items: center; flex-wrap: wrap; row-gap: 6px; min-width: 0; }
.site-nav a { font-size: 14.5px; color: var(--ink-2); }
.site-nav a:hover, .site-nav a.on { color: var(--ink); }
.header-actions { display: flex; gap: 10px; align-items: center; margin-left: auto; flex: none; }

.nav-toggle { display: none; }

/* ---------- buttons ----------------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: inherit; font-size: 15px; font-weight: 600;
  padding: 12px 20px; border-radius: 10px; border: 1px solid transparent;
  cursor: pointer; white-space: nowrap; transition: background .14s, color .14s, border-color .14s;
}
.btn-primary { background: var(--blue); color: #fff; box-shadow: 0 1px 2px rgba(6,38,79,.16); }
.btn-primary:hover { background: var(--blue-dark); color: #fff; }
.btn-light { background: #fff; color: var(--navy); box-shadow: 0 10px 26px rgba(4,32,63,.35); }
.btn-light:hover { color: var(--navy); background: #F3F7FE; }
.btn-ghost { background: rgba(255,255,255,.08); color: #fff; border-color: rgba(156,194,251,.35); }
.btn-ghost:hover { color: #fff; background: rgba(255,255,255,.16); }
/* A quiet secondary action on a *light* surface. `.btn-ghost` is the same idea
   for dark ones — it is white text on a translucent white fill, which is
   correct in the hero and invisible on a white card. Keeping them separate is
   what stops fixing one from breaking the other. */
.btn-quiet { background: #fff; color: var(--ink-2); border-color: var(--field); }
.btn-quiet:hover { background: var(--tint); color: var(--ink);
                   border-color: var(--blue); }

.btn-outline { background: #fff; color: var(--blue); border-color: var(--field); }
.btn-outline:hover { background: var(--tint); }
.btn-sm { font-size: 14px; padding: 9px 15px; }
.btn-link { font-size: 14.5px; color: var(--ink-2); padding: 9px 14px; }
.btn-link:hover { color: var(--ink); }
.btn[disabled] { opacity: .55; cursor: not-allowed; }
.btn-block { width: 100%; }

/* ---------- sections ---------------------------------------------------- */

.section { padding: 88px 28px; border-bottom: 1px solid var(--line); }
.section-white { background: var(--surface); }
.section-navy { background: var(--navy); color: #fff; border-bottom: 0; }
.section-navy h2, .section-navy h3 { color: #fff; }

.eyebrow {
  font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--blue); font-weight: 600; margin-bottom: 14px;
}
.section-navy .eyebrow { color: var(--sky); }
.section h2 { font-size: clamp(30px, 3.4vw, 44px); margin-bottom: 12px; }
.lede { font-size: 17px; color: var(--ink-2); max-width: 62ch; }
.section-navy .lede { color: var(--sky-pale); }

/* ---------- hero -------------------------------------------------------- */

.hero {
  position: relative; overflow: hidden; padding: 84px 28px 88px;
  background:
    radial-gradient(1100px 520px at 78% -8%, #17408C 0%, transparent 60%),
    linear-gradient(160deg, var(--navy-deep) 0%, var(--navy) 46%, #0B3E8F 100%);
}
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(156,194,251,.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(156,194,251,.10) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(900px 480px at 20% 10%, #000, transparent 75%);
  mask-image: radial-gradient(900px 480px at 20% 10%, #000, transparent 75%);
}
.hero-grid {
  position: relative; max-width: var(--wrap); margin: 0 auto;
  display: grid; grid-template-columns: minmax(340px, 1.08fr) minmax(400px, 1fr);
  gap: 60px; align-items: center;
}
.hero h1 {
  font-size: clamp(40px, 5.2vw, 66px); line-height: 1.04; color: #fff;
  margin-bottom: 22px; text-wrap: balance;
}
.hero h1 em { font-style: normal; color: #7FB2FF; }
.hero-lede { font-size: 19px; line-height: 1.6; color: #BFD4EE; max-width: 52ch; margin-bottom: 26px; }

.hero-points { list-style: none; padding: 0; margin: 0 0 30px; display: grid; gap: 12px; }
.hero-points li { display: flex; align-items: flex-start; gap: 11px; font-size: 15.5px; color: #E4EEFC; }
.hero-points .tick {
  width: 20px; height: 20px; flex: none; border-radius: 50%;
  background: rgba(15,123,108,.25); border: 1px solid #3DDC97; color: #7BF0C6;
  display: grid; place-items: center; font-size: 11px;
}
.hero-points strong { color: #fff; font-weight: 600; }
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.hero-fine { font-size: 13px; color: var(--sky-dim); margin-bottom: 30px; }

.hero-stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  background: rgba(156,194,251,.22); border: 1px solid rgba(156,194,251,.22);
  border-radius: 14px; overflow: hidden;
}
.hero-stats > div { background: rgba(4,32,63,.55); padding: 16px 18px; }
.hero-stats b { display: block; font-family: var(--mono); font-size: 20px; font-weight: 600; color: #fff; }
.hero-stats span { font-size: 12.5px; color: var(--sky-dim); }

/* ---------- verifier widget --------------------------------------------- */

.widget {
  background: #fff; border: 1px solid rgba(255,255,255,.4); border-radius: 20px;
  box-shadow: 0 30px 70px rgba(2,16,34,.45); overflow: hidden;
}
.widget-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 22px; border-bottom: 1px solid var(--line-soft);
}
.widget-head b { font-size: 15.5px; font-weight: 600; }
.live { display: flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 11px; color: var(--ink-3); }
.live i { width: 6px; height: 6px; border-radius: 50%; background: var(--good); display: block; animation: pulse 1.6s ease-in-out infinite; }
.widget-body { padding: 16px 18px; }
.widget form { display: flex; gap: 8px; margin-bottom: 10px; }
.widget input[type=email], .widget input[type=text] {
  flex: 1; min-width: 0; font-family: var(--mono); font-size: 13px;
  padding: 11px 12px; border: 1px solid var(--field); border-radius: 9px;
  background: var(--surface-2); color: var(--ink);
}
.widget button { font-size: 14px; font-weight: 600; color: #fff; background: var(--blue); border: 0; border-radius: 9px; padding: 0 18px; cursor: pointer; }
.widget-alt { display: flex; align-items: baseline; gap: 7px; margin-bottom: 12px; font-size: 12.5px; color: var(--ink-3); }
.widget-alt a { font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

.stage-list { border-top: 1px solid var(--line-soft); }
.stage {
  display: flex; align-items: center; gap: 10px; padding: 7px 0;
  border-bottom: 1px solid var(--line-soft);
}
.stage i {
  width: 18px; height: 18px; flex: none; display: grid; place-items: center;
  border-radius: 50%; font-family: var(--mono); font-size: 10.5px;
  font-weight: 600; color: #fff; background: #B7C3D2; font-style: normal;
}
.stage.done i { background: var(--good); }
.stage.fail i { background: var(--bad); }
.stage.busy i { background: var(--blue); animation: pulse 1s ease-in-out infinite; }
.stage b { font-size: 13px; font-weight: 500; flex: 1; }
.stage span { font-family: var(--mono); font-size: 11px; color: var(--ink-3); text-align: right; }

.elapsed { display: flex; justify-content: space-between; align-items: baseline; padding: 9px 0; }
.elapsed span { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.elapsed b { font-family: var(--mono); font-size: 14px; font-weight: 600; color: var(--navy); }

.verdict { border-radius: 12px; overflow: hidden; animation: land .3s ease-out; border: 1px solid var(--grey); }
.verdict-head { display: flex; align-items: center; gap: 9px; padding: 9px 12px; color: #fff; background: var(--grey); }
.verdict-head b { font-weight: 600; font-size: 14px; }
.verdict-head .code { margin-left: auto; font-family: var(--mono); font-size: 10.5px; opacity: .85; }
.verdict-body { padding: 11px 12px; background: var(--surface-2); }
.verdict-body p { font-size: 12.5px; color: var(--ink-2); margin-bottom: 9px; }
.verdict-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 16px; font-family: var(--mono); font-size: 11px; }
.verdict-facts div { display: flex; justify-content: space-between; border-bottom: 1px dashed var(--line); padding-bottom: 5px; }
.verdict-facts span { color: var(--ink-3); }
.v-good { border-color: var(--good) !important; } .v-good .verdict-head { background: var(--good); }
.v-bad  { border-color: var(--bad)  !important; } .v-bad  .verdict-head { background: var(--bad); }
.v-warn { border-color: var(--warn) !important; } .v-warn .verdict-head { background: var(--warn); }
.v-unk  { border-color: var(--grey) !important; } .v-unk  .verdict-head { background: var(--grey); }

.widget-note { font-size: 12px; color: var(--ink-3); margin-top: 10px; }

/* ---------- ticker ------------------------------------------------------ */

.ticker { background: #fff; border-bottom: 1px solid var(--line); padding: 18px 28px; }
.ticker .wrap { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.ticker .stat { font-family: var(--mono); font-size: 13px; color: var(--ink); }
.ticker .stat span { color: var(--ink-3); }
.ticker .label { font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-4); margin-left: auto; }
.ticker .list { display: flex; gap: 20px; flex-wrap: wrap; font-size: 13.5px; font-weight: 500; color: #8494A8; }

/* ---------- cards / grids ----------------------------------------------- */

.grid { display: grid; gap: 24px; }
.g2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.g3 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.g4 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.gap-sm { gap: 16px; }

.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 16px; padding: 24px; box-shadow: 0 1px 3px rgba(6,38,79,.05);
}
.card-flat { background: var(--surface-2); box-shadow: none; }
.card h3 { font-size: 19px; margin-bottom: 8px; }
.card p { font-size: 14px; color: var(--ink-2); }

.step-n {
  width: 26px; height: 26px; border-radius: 8px; background: var(--blue-soft);
  color: var(--blue); display: grid; place-items: center;
  font-family: var(--mono); font-size: 12px; font-weight: 600;
}
.step-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }

.faux {
  background: var(--surface-2); border: 1px solid var(--line-soft);
  border-radius: 12px; padding: 14px; font-family: var(--mono); font-size: 12px;
}
.faux .row { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--line-soft); }
.faux .row:first-child { padding-top: 0; }
.faux .row:last-child { border-bottom: 0; padding-bottom: 0; }
.faux .k { color: var(--ink-3); }

.bar-track { height: 10px; border-radius: 999px; background: #E7EDF6; position: relative; overflow: hidden; }
.bar-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--blue), #3D8BFD); }
.bar-sweep { position: absolute; inset: 0; width: 40%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.7), transparent); animation: sweep 1.8s linear infinite; }

/* ---------- taxonomy ---------------------------------------------------- */

.tax {
  background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--grey);
  border-radius: 14px; padding: 22px; display: flex; gap: 14px; align-items: flex-start;
}
.tax .mark {
  width: 28px; height: 28px; flex: none; display: grid; place-items: center;
  border-radius: 9px; font-family: var(--mono); font-size: 14px; font-weight: 600;
  color: #fff; background: var(--grey);
}
.tax h3 { font-size: 17px; margin: 0; }
.tax .code { font-family: var(--mono); font-size: 11px; color: var(--ink-4); }
.tax .def { font-size: 14px; color: var(--ink-2); margin: 7px 0 5px; }
.tax .act { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.tax .detail { font-size: 13.5px; color: var(--ink-3); margin-top: 6px; }

/* ---------- tables ------------------------------------------------------ */

.table-card { background: #fff; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.table-scroll { overflow-x: auto; }
table.plain { width: 100%; border-collapse: collapse; font-size: 14.5px; }
table.plain thead tr { background: var(--tint); }
table.plain th {
  text-align: left; padding: 13px 18px; font-size: 12px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-3); white-space: nowrap;
}
table.plain th.us { color: var(--blue); }
table.plain td { padding: 13px 18px; border-top: 1px solid var(--line-soft); }
table.plain td.k { font-weight: 500; }
table.plain td.us { font-family: var(--mono); font-size: 13px; color: var(--good); }
table.plain td.them { font-family: var(--mono); font-size: 13px; color: var(--ink-3); }

.pill {
  font-family: var(--mono); font-size: 12px; font-weight: 600;
  border-radius: 6px; padding: 3px 9px;
}
.m-get { color: var(--good); background: #E6F4F1; }
.m-post { color: var(--blue); background: var(--blue-soft); }
.m-delete { color: var(--bad); background: #FBEAE7; }

/* ---------- pricing ----------------------------------------------------- */

.packs { display: flex; flex-wrap: wrap; gap: 16px; }
.pack {
  flex: 1 1 210px; background: #fff; border: 1px solid var(--line);
  border-radius: 16px; padding: 24px; display: flex; flex-direction: column; gap: 7px;
  box-shadow: 0 1px 3px rgba(6,38,79,.05);
}
.pack.featured { border-color: var(--blue); box-shadow: 0 12px 30px rgba(18,87,232,.14); }
.pack .tier { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--blue); font-weight: 600; }
.pack .badge { font-size: 11px; color: #fff; background: var(--blue); border-radius: 999px; padding: 2px 8px; }
.pack .price { font-size: 32px; font-weight: 600; letter-spacing: -0.03em; }
.pack .credits { font-family: var(--mono); font-size: 13px; }
.pack .each { font-family: var(--mono); font-size: 12.5px; color: var(--ink-3); }
.pack .never { border-top: 1px solid var(--line-soft); margin-top: 8px; padding-top: 10px; font-size: 13px; color: var(--good); font-weight: 500; }
.pack form { margin-top: auto; }

.calc { display: grid; grid-template-columns: minmax(260px,1fr) minmax(260px,1fr); gap: 36px; align-items: center; }
.calc input[type=range] { width: 100%; accent-color: var(--blue); }
.calc input[type=number] {
  margin-top: 12px; max-width: 220px; width: 100%; font-family: var(--mono);
  font-size: 14px; padding: 10px 12px; border: 1px solid var(--field);
  border-radius: 9px; background: #fff;
}
.calc-row { display: flex; justify-content: space-between; padding: 11px 0; border-bottom: 1px solid var(--line-soft); font-family: var(--mono); font-size: 13px; }
.calc-row span { color: var(--ink-3); }
.calc-total { display: flex; justify-content: space-between; align-items: baseline; padding: 14px 0; }
.calc-total span { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.calc-total b { font-size: 34px; font-weight: 600; color: var(--blue); letter-spacing: -0.03em; }

/* ---------- forms ------------------------------------------------------- */

.field { display: grid; gap: 6px; }
.field label { font-size: 12.5px; color: var(--ink-3); }
.field input, .field textarea, .field select {
  width: 100%; font-family: inherit; font-size: 14px; padding: 12px;
  border: 1px solid var(--field); border-radius: 10px; background: var(--surface-2);
  color: var(--ink);
}
.field input.mono { font-family: var(--mono); }
.field textarea { min-height: 130px; resize: vertical; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-soft); }
.form-grid { display: grid; gap: 14px; }
.section-navy .field label { color: var(--sky-pale); }
.section-navy .field input {
  background: rgba(255,255,255,.1); border-color: rgba(156,194,251,.4); color: #fff;
}
.section-navy .field input::placeholder { color: rgba(199,216,240,.7); }

.flash { padding: 11px 15px; border-radius: 10px; font-size: 14px; font-weight: 500; border: 1px solid var(--line); background: #fff; }
.flash-success { background: #E6F4F1; color: var(--good); border-color: transparent; }
.flash-error   { background: #FBEAE7; color: var(--bad);  border-color: transparent; }
.flash-warning { background: #FDF3E0; color: var(--warn); border-color: transparent; }
.flash-stack { display: grid; gap: 10px; max-width: var(--wrap); margin: 16px auto 0; padding: 0 28px; }

/* ---------- faq --------------------------------------------------------- */

.faq { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 6px 22px; }
.faq details { border-bottom: 1px solid var(--line-soft); padding: 16px 0; }
.faq details:last-child { border-bottom: 0; }
.faq summary {
  cursor: pointer; font-weight: 600; font-size: 16px; list-style: none;
  display: flex; justify-content: space-between; gap: 16px; align-items: center;
}
.faq summary::-webkit-details-marker { display: none; }
.faq .plus { color: var(--blue); font-size: 20px; transition: transform .18s ease; line-height: 1; }
.faq details[open] .plus { transform: rotate(45deg); }
.faq p { font-size: 14.5px; color: var(--ink-2); margin-top: 12px; max-width: 72ch; line-height: 1.6; }

/* ---------- code -------------------------------------------------------- */

.code-card { background: var(--navy); border-radius: 16px; padding: 22px; overflow: hidden; }
.code-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.code-head span { font-family: var(--mono); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--sky); }
.code-head button { font-size: 12px; color: #fff; background: rgba(255,255,255,.12); border: 1px solid rgba(156,194,251,.3); border-radius: 7px; padding: 5px 11px; cursor: pointer; }
.code-card pre { margin: 0; overflow-x: auto; font-family: var(--mono); font-size: 12.5px; line-height: 1.75; color: #E4EEFC; }

/* ---------- tabs -------------------------------------------------------- */

.tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 40px; }
.tab {
  padding: 11px 18px; border-radius: 999px; font-size: 14.5px; font-weight: 600;
  border: 1px solid var(--field); background: #fff; color: var(--ink-2);
}
.tab.on { background: var(--blue); border-color: var(--blue); color: #fff; }

/* ---------- timeline ---------------------------------------------------- */

.timeline { background: #fff; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.timeline .row { display: grid; grid-template-columns: 150px 1fr; gap: 20px; padding: 20px 24px; border-bottom: 1px solid var(--line-soft); }
.timeline .row:last-child { border-bottom: 0; }
.timeline .t { font-family: var(--mono); font-size: 13px; font-weight: 600; color: var(--blue); }
.timeline strong { font-size: 15px; }
.timeline p { font-size: 14px; color: var(--ink-2); margin-top: 5px; }

/* ---------- cta --------------------------------------------------------- */

.cta {
  padding: 96px 28px;
  background: linear-gradient(135deg, var(--navy) 0%, var(--blue-dark) 60%, var(--blue) 100%);
  color: #fff;
}
.cta .wrap { display: grid; grid-template-columns: minmax(300px,1.3fr) minmax(260px,1fr); gap: 48px; align-items: center; }
.cta h2 { font-size: clamp(32px, 4vw, 50px); color: #fff; max-width: 20ch; margin-bottom: 16px; }
.cta p { font-size: 17.5px; color: var(--sky-pale); max-width: 52ch; margin-bottom: 28px; }
.cta-facts { background: rgba(255,255,255,.08); border: 1px solid rgba(156,194,251,.28); border-radius: 16px; padding: 24px; }
.cta-facts .row { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid rgba(156,194,251,.25); font-size: 14px; }
.cta-facts .row:last-child { border-bottom: 0; }
.cta-facts .row span { color: var(--sky-pale); }
.cta-facts .row b { font-family: var(--mono); font-weight: 400; }

/* ---------- footer ------------------------------------------------------ */

.site-footer { background: #fff; border-top: 1px solid var(--line); padding: 56px 28px 32px; }
.footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 36px; }
.footer-col { display: flex; flex-direction: column; gap: 9px; }
.footer-col .head { font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-4); }
.footer-col a, .footer-col span.val { font-size: 14px; color: var(--ink-2); }
.footer-col a:hover { color: var(--ink); }
.footer-bottom {
  max-width: var(--wrap); margin: 32px auto 0; border-top: 1px solid var(--line-soft);
  padding-top: 18px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font-size: 12.5px; color: var(--ink-4);
}

/* ---------- auth pages -------------------------------------------------- */

.auth { min-height: calc(100vh - 66px); display: grid; place-items: center; padding: 40px 24px; }
.auth-card {
  width: min(940px, 100%); background: #fff; border-radius: 20px; overflow: hidden;
  box-shadow: 0 40px 90px rgba(2,16,34,.18);
  display: grid; grid-template-columns: minmax(280px,1fr) minmax(300px,1.05fr);
}
.auth-aside { background: linear-gradient(160deg, var(--navy-deep), #0B3E8F); color: #fff; padding: 36px 32px; display: flex; flex-direction: column; }
.auth-aside h2 { font-size: 28px; color: #fff; margin-bottom: 12px; line-height: 1.15; }
.auth-aside p { font-size: 15px; color: #BFD4EE; margin-bottom: 24px; }
.auth-aside ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.auth-aside li { display: flex; gap: 10px; font-size: 14px; color: #E4EEFC; }
.auth-aside li i { color: #7BF0C6; font-style: normal; }
.auth-aside .foot { margin-top: auto; font-size: 12.5px; color: var(--sky-dim); font-family: var(--mono); }
.auth-main { padding: 34px 32px; }
.auth-main h1 { font-size: 22px; margin-bottom: 6px; }
.auth-main .sub { font-size: 14px; color: var(--ink-3); margin-bottom: 22px; }
.auth-narrow { width: min(440px, 100%); grid-template-columns: 1fr; }

/* ---------- misc -------------------------------------------------------- */

.note { font-size: 12px; color: var(--ink-4); font-family: var(--mono); }
.split-card { display: grid; grid-template-columns: minmax(280px,1fr) minmax(300px,1.15fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.split-card > * { background: #fff; padding: 28px; }
.split-card .dark { background: linear-gradient(150deg, var(--navy), var(--blue-dark)); color: #fff; }
.split-card .dark h3 { color: #fff; font-size: 24px; margin-bottom: 10px; }
.split-card .dark p { font-size: 14.5px; opacity: .88; }
.kv-row { display: flex; gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--line-soft); font-size: 14px; }
.kv-row:last-child { border-bottom: 0; }
.kv-row .key { font-family: var(--mono); font-size: 12px; width: 130px; flex: none; color: var(--blue); }
.kv-row .val { color: var(--ink-2); }

.chips { display: flex; gap: 10px; flex-wrap: wrap; }
.chip { font-family: var(--mono); font-size: 12px; background: var(--tint); border: 1px solid var(--line); border-radius: 999px; padding: 4px 11px; color: var(--ink-2); }
.chip-muted { background: var(--surface-2); color: var(--ink-4); }

/* ---------- responsive -------------------------------------------------- */

@media (max-width: 1080px) {
  .hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .cta .wrap { grid-template-columns: 1fr; }
  .split-card { grid-template-columns: 1fr; }
  .calc { grid-template-columns: 1fr; gap: 20px; }
  .auth-card { grid-template-columns: 1fr; }
  .auth-aside { display: none; }
}
@media (max-width: 860px) {
  .site-nav { display: none; }
  .site-nav.open {
    display: flex; flex-direction: column; align-items: flex-start;
    position: absolute; top: 100%; left: 0; right: 0; background: #fff;
    border-bottom: 1px solid var(--line); padding: 16px 28px; gap: 14px;
  }
  .site-header .bar { position: relative; gap: 14px; }
  .nav-toggle {
    display: inline-flex; margin-left: auto; order: 3;
    background: #fff; border: 1px solid var(--field); border-radius: 9px;
    padding: 8px 12px; cursor: pointer; font-size: 15px; color: var(--ink);
  }
  .header-actions { margin-left: 0; order: 4; }
  .section { padding: 60px 20px; }
  .hero { padding: 56px 20px 64px; }
  .hero-stats { grid-template-columns: 1fr; }
  .timeline .row { grid-template-columns: 1fr; gap: 6px; }
  .verdict-facts { grid-template-columns: 1fr; }
}

/* ---------- signup wall (public verifier) -------------------------------- */

.signup-wall {
  border: 1px solid var(--blue);
  background: linear-gradient(160deg, var(--blue-soft), #fff);
  border-radius: 12px;
  padding: 18px 16px;
  text-align: center;
  animation: land .3s ease-out;
}
.signup-wall-icon { font-size: 24px; line-height: 1; margin-bottom: 8px; }
.signup-wall-title { font-size: 14.5px; font-weight: 600; color: var(--ink); margin-bottom: 6px; }
.signup-wall-sub { font-size: 13px; color: var(--ink-2); margin-bottom: 12px; }
.signup-wall .btn { font-size: 14.5px; padding: 11px 16px; }

/* ---------- one-time code input ------------------------------------------ */

.otp-input {
  font-family: var(--mono);
  font-size: 30px !important;
  font-weight: 600;
  letter-spacing: 12px;
  text-align: center;
  padding: 14px 12px !important;
  text-indent: 12px;   /* balances the trailing letter-spacing */
}
.otp-input::placeholder { letter-spacing: 12px; color: #C6D0DE; }

/* ---------- brand mark -------------------------------------------------- */
/* The mark is icon-only, so the wordmark is rendered as text beside it.
   It is square: constraining both axes stops a slow-loading image from
   reflowing the header. No colour correction on dark backgrounds — the mark is
   bright blue and teal on transparent, which reads on the navy auth panel and
   in dashboard dark mode alike. */
.brand-logo { height: 30px; width: 30px; display: block; flex: none; }
.brand-logo-lg { height: 36px; width: 36px; }

/* Standing alone in the header, the mark needs real presence — otherwise the
   top of the page reads as empty. Sized against the 56px nav row rather than
   against the old wordmark it used to sit beside. */
.brand-logo-solo { height: 46px; width: 46px; }
@media (max-width: 640px) {
  /* The nav row is shorter on small screens; 46px would crowd it. */
  .brand-logo-solo { height: 38px; width: 38px; }
}

/* ---------- wordmark ---------------------------------------------------- */
/* Set in two tones the way the logo draws it: the name in ink, the trailing
   word in the accent green. Tight tracking and a slightly heavier weight are
   what separate a wordmark from ordinary running text — at default spacing a
   lowercase name reads as a stray sentence rather than a brand. */
.brand { gap: 9px; }
.wordmark {
  font-size: 18px;
  font-weight: 640;
  letter-spacing: -0.035em;
  color: var(--ink);
  line-height: 1;
  white-space: nowrap;
  /* Lining figures and tighter shapes; falls back cleanly where unsupported. */
  font-feature-settings: "ss01" 1, "cv01" 1;
}
.wordmark-accent { color: var(--brand-accent); }
.wordmark-lg { font-size: 20px; }

/* On the navy auth panel the ink half would disappear, so it inverts to white
   and the accent lifts to the brighter tint already used for the ticks there. */
.wordmark-on-dark { color: #FFFFFF; }
.wordmark-on-dark .wordmark-accent { color: #7BF0C6; }

/* The taller solo mark would push the sticky header to ~74px and eat viewport
   on every page, so the row's vertical padding gives back what the mark took. */
.site-header .bar { padding-top: 10px; padding-bottom: 10px; }

/* ---------- header nav -------------------------------------------------- */
/* The nav is centred in the bar, not merely placed after the logo. Giving the
   brand and the actions equal flex weight is what does it: each takes a third,
   so the nav's midpoint is the bar's midpoint regardless of how wide the
   buttons on the right happen to be. Centring with margin:auto alone drifts as
   soon as "Log in / Start free" becomes "Open dashboard". */
.site-header .bar { gap: 16px; }
.site-header .brand { flex: 1 1 0; }
.site-header .site-nav { flex: 0 1 auto; justify-content: center; }
.site-header .header-actions { flex: 1 1 0; justify-content: flex-end; margin-left: 0; }

/* Hover and current state are pills rather than colour shifts: at 14.5px a
   colour-only change is easy to miss, and the padding gives a real target. */
.site-nav a {
  padding: 8px 12px;
  border-radius: 9px;
  transition: background-color .14s ease, color .14s ease;
}
.site-nav a:hover {
  background: var(--tint);       /* lightest blue in the palette */
  color: var(--blue);
}
.site-nav a.on {
  /* A step stronger than hover, or the current page is indistinguishable from
     whatever the pointer happens to be resting on. */
  background: var(--blue-soft);
  color: var(--blue);
  font-weight: 600;
}
.site-nav a:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

@media (max-width: 860px) {
  /* Stacked in the dropdown, the pills should fill the row rather than sit as
     ragged islands. */
  .site-header .brand, .site-header .header-actions { flex: none; }
  .site-nav.open a { width: 100%; padding: 10px 12px; }
}

/* ---------- demo widget, allowance used up ------------------------------ */
/* Rendered instead of the form once the visitor's three free checks are gone.
   Offering an input that is going to be refused wastes the one moment they
   were willing to try the product. */
.demo-locked {
  text-align: center; padding: 22px 18px 20px;
  background: var(--tint); border: 1px solid var(--line-soft);
  border-radius: 12px;
}
.demo-locked-title {
  margin: 0 0 6px; font-size: 15px; font-weight: 650; color: var(--ink);
}
.demo-locked-note {
  margin: 0 0 16px; font-size: 13.5px; color: var(--ink-3); line-height: 1.55;
}
.demo-locked .btn { width: 100%; justify-content: center; }
.demo-locked-small {
  margin: 12px 0 0; font-size: 12.5px; color: var(--ink-4);
}
.demo-locked-small a { color: var(--blue); font-weight: 600; }

/* ---------- price comparison -------------------------------------------- */
/* Fully styled here rather than borrowing `table.data`, which lives only in
   the dashboard stylesheet — on this page that class resolves to nothing and
   the table renders as a bare browser default. */
.compare {
  width: 100%; border-collapse: separate; border-spacing: 0;
  font-size: 14.5px;
}
.compare th, .compare td {
  padding: 14px 16px; text-align: right; white-space: nowrap;
}
.compare th:first-child, .compare td:first-child {
  text-align: left; width: 22%;
}
.compare thead th {
  font-size: 12px; font-weight: 650; letter-spacing: .01em;
  color: var(--ink-3); border-bottom: 1px solid var(--line);
  padding-bottom: 11px;
}
.compare tbody td {
  border-bottom: 1px solid var(--line-soft);
  color: var(--ink-2); font-variant-numeric: tabular-nums;
}
.compare tbody tr:last-child td { border-bottom: 0; }
.compare tbody td:first-child { color: var(--ink); font-weight: 600; }

/* The whole of our column is lifted, not just the cells — a highlight that
   stops between rows reads as a rendering fault. */
.compare .us-col {
  background: var(--tint);
  border-left: 1px solid var(--sky-pale);
  border-right: 1px solid var(--sky-pale);
}
.compare thead .us-col {
  color: var(--blue); font-weight: 700; font-size: 13.5px;
  border-top: 1px solid var(--sky-pale);
  border-top-left-radius: 10px; border-top-right-radius: 10px;
}
.compare tbody .us-col { color: var(--ink); }
.compare tbody .us-col strong { font-size: 17px; letter-spacing: -.01em; }
.compare tbody tr:last-child .us-col {
  border-bottom: 1px solid var(--sky-pale);
  border-bottom-left-radius: 10px; border-bottom-right-radius: 10px;
}
.compare-saving { display: block; margin-top: 2px; font-size: 12.5px;
                  color: var(--good); font-weight: 600; }

.compare-card h3 { font-size: 20px; margin-bottom: 6px; }
.compare-foot { margin: 16px 0 0 !important; font-size: 12.5px;
                color: var(--ink-3); line-height: 1.65; max-width: 78ch; }

@media (max-width: 720px) {
  /* Six columns will not fit; let it scroll rather than crush the figures. */
  .compare { font-size: 13.5px; }
  .compare th, .compare td { padding: 11px 12px; }
}

/* The scroll container the comparison table sits in. Also dashboard-only
   until now, so a six-column table on a phone pushed the whole page sideways
   instead of scrolling within its card. */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }