/* Codekeeper site rework · shared styles.
   codekeeper.co system: Plus Jakarta Sans + Mulish, teal stage, mint emphasis, white and grey bands.
   One conversion system on every page: Book a demo (primary) and the sample evidence pack (secondary).
   A reasoning layer, off by default, annotates each section for the team. Single brand theme. */
:root {
  --teal: #125467; --teal-deep: #0c4252; --ink: #042f2e; --ink-2: #406160; --ink-3: #5e7978;
  --mint: #9bf4ef; --mint-hover: #7fe9e3; --mint-soft: #cdfaf7; --link: #087e96;
  --paper: #ffffff; --grey-50: #f4f6f7; --grey-100: #eceff1; --line: #dde4e7;
  --on-teal: #ffffff; --on-teal-2: #c9dde2; --on-teal-line: rgba(255, 255, 255, 0.16);
  --ok: #1f9d6a; --warn: #b7791f;
  --note-bg: #fff6d6; --note-line: #e7b93c; --note-ink: #4d3a00;
  --display: "Plus Jakarta Sans", -apple-system, system-ui, "Segoe UI", Roboto, sans-serif;
  --text: "Mulish", -apple-system, system-ui, "Segoe UI", Roboto, sans-serif;
  --r: 16px; --r-sm: 12px; --r-btn: 6px; --max: 1200px; --gutter: 24px;
  color-scheme: light;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } }
body { margin: 0; background: var(--paper); color: var(--ink-2); font-family: var(--text); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
h1, h2, h3, h4 { font-family: var(--display); color: var(--ink); margin: 0; text-wrap: balance; }
p { margin: 0; }
a { color: var(--link); }
:focus-visible { outline: 2px solid var(--link); outline-offset: 3px; border-radius: 4px; }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.narrow { max-width: 760px; margin: 0 auto; }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 22px; border-radius: var(--r-btn); border: 1px solid transparent;
  font-family: var(--display); font-weight: 700; font-size: 16px; line-height: 1.2; text-decoration: none; cursor: pointer; transition: background 150ms ease, border-color 150ms ease; }
.btn-primary { background: var(--mint); color: var(--ink); }
.btn-primary:hover { background: var(--mint-hover); }
.btn-ghost { background: var(--paper); color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--ink-3); }
.on-teal .btn-ghost { background: transparent; color: var(--on-teal); border-color: rgba(255, 255, 255, 0.45); }
.on-teal .btn-ghost:hover { border-color: var(--on-teal); background: rgba(255, 255, 255, 0.06); }
.btn-sm { padding: 8px 16px; font-size: 14px; }

/* hero */
.hero { background: var(--teal); color: var(--on-teal-2); padding: 72px 0 88px; }
.hero .wrap { display: grid; grid-template-columns: 1.02fr 1fr; gap: 56px; align-items: center; }
.pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 18px; border: 1px solid var(--on-teal-line); background: rgba(255, 255, 255, 0.06);
  font-family: var(--display); font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--mint); margin-bottom: 22px; }
.hero h1 { color: var(--on-teal); font-size: clamp(40px, 5.4vw, 64px); line-height: 1.06; letter-spacing: -0.025em; margin-bottom: 22px; }
.hero h1 em { color: var(--mint); font-style: italic; }
.hero-sub { font-size: clamp(18px, 1.7vw, 20px); max-width: 560px; margin-bottom: 30px; }
.actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.incl { margin-top: 18px; font-size: 15px; color: var(--on-teal-2); }
.incl strong { color: var(--on-teal); font-weight: 700; }
.trust { list-style: none; display: flex; flex-wrap: wrap; gap: 10px 22px; padding: 22px 0 0; margin: 26px 0 0; border-top: 1px solid var(--on-teal-line); font-family: var(--display); font-size: 14px; font-weight: 600; color: var(--on-teal); }
.trust li { display: flex; align-items: center; gap: 8px; }
.tick { width: 18px; height: 18px; border-radius: 50%; background: var(--mint); color: var(--ink); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.tick svg { width: 11px; height: 11px; }

/* product mock */
.app { background: var(--paper); border-radius: var(--r); box-shadow: 0 30px 80px rgba(2, 24, 30, 0.45); display: grid; grid-template-columns: 168px 1fr; overflow: hidden; font-size: 13px; color: var(--ink-2); min-width: 0; }
.app-side { background: var(--grey-50); border-right: 1px solid var(--line); padding: 16px 12px; display: flex; flex-direction: column; gap: 4px; }
.app-side .brand { font-size: 15px; margin-bottom: 14px; }
.app-side .brand svg { width: 18px; height: 18px; }
.side-item { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 8px; color: var(--ink-2); font-weight: 600; }
.side-item.on { background: var(--paper); color: var(--ink); box-shadow: 0 1px 2px rgba(4, 47, 46, 0.08); }
.side-label { font-family: var(--display); font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); margin: 12px 8px 4px; }
.av { width: 20px; height: 20px; border-radius: 6px; background: var(--teal); color: var(--on-teal); font-size: 9px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.app-main { padding: 18px; display: grid; gap: 12px; min-width: 0; }
.app-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.app-head h4 { font-size: 17px; }
.app-head span { font-size: 12px; color: var(--ink-3); }
.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tile { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
.tile small { display: block; font-size: 11px; color: var(--ink-3); font-weight: 600; }
.tile b { font-family: var(--display); font-size: 22px; color: var(--ink); line-height: 1.2; }
.tile b.pass { color: var(--ok); }
.run { background: var(--teal); color: var(--on-teal-2); border-radius: 12px; padding: 12px 14px; display: grid; gap: 8px; }
.run-top { display: flex; justify-content: space-between; align-items: center; color: var(--on-teal); font-family: var(--display); font-weight: 700; font-size: 13px; }
.live { display: inline-flex; align-items: center; gap: 6px; background: rgba(155, 244, 239, 0.16); color: var(--mint); font-size: 11px; padding: 2px 8px; border-radius: 10px; }
.live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--mint); animation: blink 1.6s ease-in-out infinite; }
@keyframes blink { 50% { opacity: 0.3; } }
.step { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 12px; }
.step .lbl { display: flex; align-items: center; gap: 8px; }
.dot { display: inline-block; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--mint); flex: none; }
.dot.done { background: var(--mint); }
.bar { height: 4px; background: rgba(255, 255, 255, 0.14); border-radius: 2px; overflow: hidden; }
.bar i { display: block; height: 100%; width: 64%; background: var(--mint); border-radius: 2px; animation: grow 6s ease-in-out infinite alternate; }
@keyframes grow { from { width: 48%; } to { width: 82%; } }
.cert-row { display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
.cert-row b { color: var(--ink); font-family: var(--display); font-size: 13px; display: block; }
.cert-row small { font-size: 11px; color: var(--ink-3); }
.cert-row .dl { margin-left: auto; font-family: var(--display); font-weight: 700; font-size: 11px; color: var(--ink); border: 1px solid var(--line); padding: 4px 8px; border-radius: 6px; }
.seal { width: 30px; height: 30px; border-radius: 50%; background: var(--mint-soft); color: var(--teal); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.seal svg { width: 16px; height: 16px; }

/* logos */
.logos { padding: 36px 0; border-bottom: 1px solid var(--line); }
.logos p { text-align: center; font-family: var(--display); font-weight: 600; color: var(--ink); margin-bottom: 18px; }
.logo-row { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.logo-slot { height: 44px; border: 1px dashed var(--line); border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 12px; color: var(--ink-3); font-family: var(--display); font-weight: 600; letter-spacing: 0.02em; }

/* sections */
.band { padding: 96px 0; }
.band.alt { background: var(--grey-50); }
.label { font-family: var(--display); font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--link); margin-bottom: 12px; }
.center { text-align: center; }
.h2 { font-size: clamp(30px, 4vw, 44px); letter-spacing: -0.02em; line-height: 1.14; margin-bottom: 16px; }
.lead { font-size: 19px; max-width: 680px; }
.center .lead { margin: 0 auto; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); padding: 28px; min-width: 0; display: flex; flex-direction: column; }
.alt .card { background: var(--paper); }
.band:not(.alt) .card.soft { background: var(--grey-50); }
.card h3 { font-size: 20px; letter-spacing: -0.01em; margin-bottom: 8px; }
.chip { width: 44px; height: 44px; border-radius: var(--r-sm); background: var(--mint-soft); color: var(--teal); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 18px; flex-shrink: 0; }
.chip svg, .ico { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* problem visuals */
.viz { background: var(--mint-soft); border-radius: var(--r-sm); padding: 16px; margin-bottom: 22px; font-size: 13px; min-height: 168px; }
.viz-card { background: var(--paper); border-radius: 10px; padding: 10px 12px; box-shadow: 0 1px 3px rgba(4, 47, 46, 0.08); }
.viz-head { display: flex; justify-content: space-between; font-family: var(--display); font-weight: 700; color: var(--ink); font-size: 12px; margin-bottom: 6px; }
.viz-head span { color: var(--ink-3); font-weight: 600; }
.vrow { display: flex; align-items: center; gap: 8px; padding: 5px 0; border-top: 1px solid var(--grey-100); color: var(--ink); }
.vrow:first-of-type { border-top: 0; }
.q { width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--ink-3); color: var(--ink-3); font-size: 10px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ok { width: 16px; height: 16px; border-radius: 50%; background: var(--teal); color: var(--paper); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ok svg { width: 9px; height: 9px; }
.tree-root { display: inline-flex; align-items: center; gap: 6px; background: var(--teal); color: var(--on-teal); padding: 4px 10px; border-radius: 8px; font-family: var(--display); font-weight: 700; font-size: 12px; }
.tree { margin: 6px 0 0 14px; border-left: 2px solid rgba(18, 84, 103, 0.3); padding-left: 12px; display: grid; gap: 6px; }
.dep { display: flex; align-items: center; gap: 8px; background: var(--paper); border: 1px dashed rgba(18, 84, 103, 0.4); border-radius: 8px; padding: 4px 8px; color: var(--ink); }
.ver { display: grid; gap: 6px; }
.ver div { display: flex; align-items: center; gap: 8px; color: var(--ink); }
.vdot { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--teal); flex-shrink: 0; }
.vdot.f { background: var(--teal); }
.vdot.m { background: var(--mint); border-color: var(--mint); }
.tagx { margin-left: auto; font-size: 10px; font-weight: 700; font-family: var(--display); padding: 2px 6px; border-radius: 4px; }
.tagx.t { background: var(--mint); color: var(--ink); }
.tagx.u { background: var(--paper); color: var(--warn); border: 1px solid #e9cf9d; }

/* steps + compare */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 48px; counter-reset: s; }
.num { width: 44px; height: 44px; border-radius: 50%; background: var(--ink); color: var(--paper); display: inline-flex; align-items: center; justify-content: center; font-family: var(--display); font-weight: 700; margin-bottom: 18px; }
.compare { margin-top: 56px; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: var(--paper); }
.crow { display: grid; grid-template-columns: 200px 1fr 1fr; border-top: 1px solid var(--line); }
.crow:first-child { border-top: 0; }
.crow > div { padding: 16px 22px; min-width: 0; }
.crow .k { font-family: var(--display); font-size: 13px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-3); }
.crow .old { color: var(--ink-3); }
.crow .new { background: var(--mint-soft); color: var(--ink); font-family: var(--display); font-weight: 700; }
.crow.head > div { font-family: var(--display); font-weight: 700; font-size: 14px; color: var(--ink-2); background: var(--grey-50); }
.crow.head .new { background: var(--teal); color: var(--on-teal); }

/* film */
.film { max-width: 980px; margin: 44px auto 0; }
.film-frame { position: relative; border-radius: var(--r); overflow: hidden; background: #000; aspect-ratio: 16 / 9; box-shadow: 0 30px 70px rgba(4, 47, 46, 0.22); }
.film-frame video { width: 100%; height: 100%; display: block; object-fit: cover; }
.play { position: absolute; inset: 0; display: flex; align-items: flex-start; justify-content: flex-start; gap: 14px; padding: 24px; background: linear-gradient(0deg, rgba(4, 47, 46, 0) 50%, rgba(4, 47, 46, 0.55)); border: 0; cursor: pointer; color: var(--on-teal); font-family: var(--display); font-weight: 700; font-size: 17px; }
.play-btn { width: 60px; height: 60px; flex: none; border-radius: 50%; background: var(--mint); color: var(--ink); display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); transition: transform 150ms ease; }
.play:hover .play-btn { transform: scale(1.06); }
.play-btn svg { width: 22px; height: 22px; margin-left: 3px; }
.play-label { text-align: left; line-height: 1.3; }
.play-label small { display: block; font-family: var(--text); font-weight: 600; font-size: 14px; color: var(--on-teal-2); }
.film-cap { text-align: center; margin-top: 14px; font-size: 14px; color: var(--ink-3); }

/* evidence tabs + product screens */
.tabs { display: inline-flex; gap: 4px; padding: 4px; background: var(--grey-100); border-radius: 10px; margin-bottom: 16px; max-width: 100%; overflow-x: auto; }
.tab { border: 0; background: transparent; padding: 8px 14px; border-radius: 7px; font-family: var(--display); font-weight: 700; font-size: 14px; color: var(--ink-2); cursor: pointer; white-space: nowrap; }
.tab[aria-selected="true"] { background: var(--paper); color: var(--ink); box-shadow: 0 1px 3px rgba(4, 47, 46, 0.12); }
.screen { background: var(--paper); border-radius: var(--r); box-shadow: 0 24px 60px rgba(4, 47, 46, 0.16); border: 1px solid var(--line); overflow: hidden; font-size: 13px; }
.screen-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--line); background: var(--grey-50); }
.screen-top b { font-family: var(--display); color: var(--ink); font-size: 15px; display: block; }
.screen-top small { color: var(--ink-3); font-size: 12px; }
.badge { font-family: var(--display); font-weight: 700; font-size: 11px; padding: 3px 8px; border-radius: 6px; white-space: nowrap; }
.badge.pass { background: #dcf5e9; color: #146c48; }
.meta { display: flex; flex-wrap: wrap; gap: 6px 18px; padding: 12px 18px; border-bottom: 1px solid var(--grey-100); color: var(--ink-3); font-size: 12px; }
.meta b { color: var(--ink); font-weight: 700; }
.rsteps { padding: 6px 18px 4px; }
.rstep { display: grid; grid-template-columns: 18px 1fr auto; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--grey-100); }
.rstep:last-child { border-bottom: 0; }
.rstep b { color: var(--ink); font-weight: 700; display: block; font-size: 13px; }
.rstep small { color: var(--ink-3); font-size: 12px; }
.rstep time { font-variant-numeric: tabular-nums; color: var(--ink-3); font-size: 12px; }
.flag { margin: 6px 18px 0; background: #fff7e6; border: 1px solid #f0d9a8; border-radius: 10px; padding: 10px 12px; display: grid; gap: 2px; color: #6b4a00; font-size: 12px; }
.flag b { font-family: var(--display); font-size: 13px; color: #5a3e00; }
.screen-foot { display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 12px 18px 16px; color: var(--ink-3); font-size: 12px; }
.screen-foot span { display: inline-flex; align-items: center; gap: 6px; }
.stats { display: flex; gap: 8px; flex-wrap: wrap; padding: 12px 18px; border-bottom: 1px solid var(--grey-100); }
.stats span { background: var(--grey-50); border: 1px solid var(--line); border-radius: 8px; padding: 4px 10px; font-size: 12px; color: var(--ink-2); }
.stats b { font-family: var(--display); color: var(--ink); }
.sbom-wrap { overflow-x: auto; }
.sbom { width: 100%; border-collapse: collapse; font-size: 12px; min-width: 420px; }
.sbom th { text-align: left; font-family: var(--display); font-weight: 700; color: var(--ink-3); font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; padding: 10px 18px 6px; }
.sbom td { padding: 8px 18px; border-top: 1px solid var(--grey-100); color: var(--ink); }
.sbom td:nth-child(2) { font-variant-numeric: tabular-nums; color: var(--ink-2); }
.sbom .k-lib { color: var(--ink-2); }
.typ { font-family: var(--display); font-weight: 700; font-size: 10px; padding: 2px 6px; border-radius: 4px; background: var(--grey-100); color: var(--ink-2); white-space: nowrap; }
.typ.priv { background: var(--mint-soft); color: var(--teal); }
.typ.lic { background: #efe9fb; color: #5b3fa3; }

/* evidence */
.evidence { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: 56px; align-items: start; margin-top: 48px; }
.doc { background: var(--paper); border-radius: var(--r); box-shadow: 0 24px 60px rgba(4, 47, 46, 0.16); overflow: hidden; border: 1px solid var(--line); }
.doc-top { background: var(--teal); color: var(--on-teal); padding: 18px 22px; display: flex; align-items: center; gap: 12px; }
.doc-top svg { width: 26px; height: 26px; }
.doc-top b { font-family: var(--display); font-size: 17px; display: block; }
.doc-top small { color: var(--mint); font-family: var(--display); font-weight: 700; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; }
.doc-body { padding: 18px 22px 22px; display: grid; gap: 4px; font-size: 14px; }
.kv { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--grey-100); }
.kv span { color: var(--ink-3); }
.kv b { color: var(--ink); font-family: var(--display); text-align: right; }
.kv b.pass { color: var(--ok); }
.doc-checks { display: grid; gap: 8px; margin-top: 10px; }
.doc-checks div { display: flex; align-items: center; gap: 10px; color: var(--ink); }
.doc-foot { margin-top: 14px; font-size: 12px; color: var(--ink-3); }
.doc-cta { margin-top: 22px; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; font-size: 15px; }
.items { display: grid; grid-template-columns: 1fr 1fr; gap: 26px 28px; }
.item { display: flex; gap: 14px; min-width: 0; }
.item .chip { margin: 0; width: 40px; height: 40px; }
.item h3 { font-size: 17px; margin-bottom: 4px; }
.item p { font-size: 15px; }

/* security */
.secure { background: var(--teal); border-radius: 24px; padding: 56px; display: grid; grid-template-columns: 1fr 1.2fr; gap: 48px; color: var(--on-teal-2); }
.secure .label { color: var(--mint); }
.secure .h2 { color: var(--on-teal); }
.secure-list { display: grid; gap: 22px; }
.secure-list div { display: flex; gap: 14px; }
.secure-list .chip { margin: 0; background: rgba(155, 244, 239, 0.14); color: var(--mint); width: 40px; height: 40px; }
.secure-list h3 { color: var(--on-teal); font-size: 17px; margin-bottom: 2px; }
.secure-list p { font-size: 15px; }
.stat { margin-top: 30px; display: flex; gap: 36px; flex-wrap: wrap; }
.stat b { display: block; font-family: var(--display); font-size: 40px; color: var(--mint); line-height: 1.1; letter-spacing: -0.02em; }
.stat span { font-size: 14px; }

/* quote slot */
.quote { margin-top: 56px; border: 2px dashed #c5d3d8; border-radius: var(--r); padding: 32px; display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: center; background: var(--paper); }
.quote .mark { font-family: var(--display); font-size: 64px; line-height: 0.6; color: var(--mint); font-weight: 800; }
.quote p { font-family: var(--display); font-size: 19px; font-weight: 600; color: var(--ink-3); }
.quote small { display: block; margin-top: 8px; font-family: var(--text); font-size: 14px; font-weight: 400; color: var(--ink-3); }

/* pricing */
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 48px; }
.plan { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); padding: 30px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.plan .tagline { font-family: var(--display); font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--link); }
.plan h3 { font-size: 24px; }
.price { font-family: var(--display); color: var(--ink); margin: 6px 0 4px; display: grid; }
.price small { font-family: var(--text); font-size: 13px; color: var(--ink-3); }
.price b { font-size: 34px; letter-spacing: -0.02em; line-height: 1.15; }
.price span { font-family: var(--text); font-size: 14px; color: var(--ink-3); }
.plan > p:not(.price) { font-size: 15px; margin-bottom: 14px; }
.plan ul { list-style: none; padding: 16px 0 0; margin: auto 0 0; border-top: 1px solid var(--line); display: grid; gap: 8px; font-size: 15px; color: var(--ink); }
.plan li { display: flex; gap: 10px; align-items: flex-start; }
.plan li .tick { margin-top: 3px; }
.addons { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 20px; }
.addon { border: 1px solid var(--line); border-radius: var(--r); padding: 24px 28px; background: var(--grey-50); min-width: 0; }
.addon-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 6px; flex-wrap: wrap; }
.addon h3 { font-size: 18px; }
.addon .amt { font-family: var(--display); font-weight: 700; color: var(--ink); }
.addon p { font-size: 15px; }
.fine { margin-top: 22px; font-size: 14px; color: var(--ink-3); text-align: center; }
.row-cta { margin-top: 32px; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* form */
.offer { background: var(--teal); color: var(--on-teal-2); padding: 96px 0; }
.offer .wrap { display: grid; grid-template-columns: 1fr 0.9fr; gap: 56px; align-items: center; }
.offer .label { color: var(--mint); }
.offer .h2 { color: var(--on-teal); }
.offer-list { list-style: none; padding: 0; margin: 26px 0 0; display: grid; gap: 12px; color: var(--on-teal); font-weight: 600; }
.offer-list li { display: flex; gap: 10px; align-items: flex-start; }
.offer-list li .tick { margin-top: 4px; }
.form { background: var(--paper); border-radius: var(--r); padding: 30px; box-shadow: 0 30px 80px rgba(2, 24, 30, 0.4); color: var(--ink-2); display: grid; gap: 14px; }
.form h3 { font-size: 20px; }
.field { display: grid; gap: 6px; }
.field label { font-family: var(--display); font-size: 14px; font-weight: 700; color: var(--ink); }
.field input, .field select { font: inherit; font-size: 16px; padding: 11px 12px; border: 1px solid #c5d3d8; border-radius: 8px; background: var(--paper); color: var(--ink); width: 100%; }
.field input:focus, .field select:focus { outline: 2px solid var(--link); outline-offset: 1px; border-color: var(--link); }
.field .err { font-size: 13px; color: #b42318; display: none; }
.field.bad input { border-color: #b42318; }
.field.bad .err { display: block; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form .btn { width: 100%; padding: 14px; }
.consent { font-size: 13px; color: var(--ink-3); line-height: 1.5; }
.done { display: none; text-align: center; padding: 20px 6px; }
.done .seal { width: 56px; height: 56px; margin-bottom: 12px; }
.done .seal svg { width: 26px; height: 26px; }
.done h3 { margin-bottom: 6px; }
.form.sent .fields { display: none; }
.form.sent .done { display: block; }

/* faq */
.faq { margin-top: 40px; display: grid; gap: 10px; }
details { border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--paper); }
summary { list-style: none; cursor: pointer; padding: 18px 22px; font-family: var(--display); font-weight: 700; font-size: 17px; color: var(--ink); display: flex; justify-content: space-between; gap: 16px; align-items: center; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; font-size: 22px; color: var(--link); font-weight: 600; line-height: 1; }
details[open] summary::after { content: "–"; }
details p { padding: 0 22px 20px; font-size: 16px; }

/* final */
.final { background: var(--teal); padding: 88px 0; text-align: center; color: var(--on-teal-2); }
.final h2 { color: var(--on-teal); font-size: clamp(30px, 4.4vw, 48px); letter-spacing: -0.02em; line-height: 1.12; margin-bottom: 14px; }
.final h2 em { color: var(--mint); font-style: italic; }
.final p { font-size: 19px; max-width: 600px; margin: 0 auto 30px; }
.final .actions { justify-content: center; }
.foot { background: var(--ink); color: var(--on-teal-2); padding: 32px 0; font-size: 14px; }
.foot .wrap { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; align-items: center; }
.foot .brand { color: var(--on-teal); font-size: 17px; }

/* reasoning layer */
.why { display: none; margin: 0 auto 28px; max-width: var(--max); padding: 0 var(--gutter); }
.why > div { background: var(--note-bg); border: 1px solid var(--note-line); border-left-width: 5px; border-radius: 10px; padding: 14px 18px; color: var(--note-ink); font-size: 15px; line-height: 1.55; }
.why b { font-family: var(--display); font-weight: 800; }
.why ul { margin: 6px 0 0; padding-left: 18px; }
.notes .why { display: block; }
.notes .hero .why, .notes .offer .why, .notes .final .why { margin-bottom: 28px; }
.toggle { position: fixed; right: calc(16px + env(safe-area-inset-right, 0px)); bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 60;
  display: inline-flex; align-items: center; gap: 10px; padding: 10px 14px 10px 12px; border-radius: 999px; border: 1px solid var(--note-line); background: var(--note-bg); color: var(--note-ink);
  font-family: var(--display); font-weight: 700; font-size: 14px; cursor: pointer; box-shadow: 0 8px 24px rgba(4, 47, 46, 0.18); }
.switch { width: 34px; height: 20px; border-radius: 10px; background: #d9c58a; position: relative; transition: background 150ms ease; flex-shrink: 0; }
.switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform 150ms ease; }
.toggle[aria-pressed="true"] .switch { background: var(--note-line); }
.toggle[aria-pressed="true"] .switch::after { transform: translateX(14px); }

/* responsive */
@media (max-width: 1080px) {
  .nav-links { display: none; }
  .hero .wrap, .evidence, .offer .wrap, .secure { grid-template-columns: 1fr; }
  .secure { padding: 40px 28px; }
  .logo-row { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 860px) {
  .grid3, .steps, .plans, .addons { grid-template-columns: 1fr; }
  .items { grid-template-columns: 1fr; }
  .band, .offer { padding: 72px 0; }
  .crow { grid-template-columns: 1fr 1fr; }
  .crow .k { grid-column: 1 / -1; padding-bottom: 0; }
  .crow.head .k { display: none; }
}
@media (max-width: 560px) {
  :root { --gutter: 16px; }
  .nav .wrap { gap: 12px; }
  .nav-right .btn-ghost { display: none; }
  .hero { padding: 48px 0 64px; }
  .app { grid-template-columns: 1fr; }
  .app-side { display: none; }
  .logo-row { grid-template-columns: repeat(2, 1fr); }
  .two { grid-template-columns: 1fr; }
  .quote { grid-template-columns: 1fr; }
  .card, .plan, .form { padding: 22px; }
  .crow > div { padding: 12px 14px; }
  .toggle .lbl-long { display: none; }
}

/* ─── Verification section: sub-navigation ─── */
.subnav { background: var(--grey-50); border-bottom: 1px solid var(--line); }
.subnav .wrap { display: flex; align-items: center; gap: 22px; height: 52px; overflow-x: auto; white-space: nowrap; }
.subnav-title { font-family: var(--display); font-weight: 800; color: var(--ink); font-size: 15px; padding-right: 22px; border-right: 1px solid var(--line); }
.subnav a { font-family: var(--display); font-weight: 600; font-size: 15px; color: var(--ink-2); text-decoration: none; padding: 14px 0; border-bottom: 2px solid transparent; }
.subnav a:hover { color: var(--ink); }
.subnav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--teal); }

/* ─── Overview: hero choice preview ─── */
.choice { display: grid; gap: 14px; min-width: 0; }
.choice a { display: grid; grid-template-columns: auto 1fr auto; gap: 16px; align-items: center; background: var(--paper); border-radius: var(--r); padding: 20px 22px; text-decoration: none; color: var(--ink-2); box-shadow: 0 20px 50px rgba(2, 24, 30, 0.35); transition: transform 150ms ease; }
.choice a:hover { transform: translateY(-2px); }
.choice .chip { margin: 0; }
.choice small { display: block; font-family: var(--display); font-weight: 700; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--link); }
.choice b { display: block; font-family: var(--display); font-size: 19px; color: var(--ink); line-height: 1.25; margin: 2px 0 4px; }
.choice span.sub { font-size: 14px; }
.choice .go { font-family: var(--display); font-weight: 800; color: var(--teal); font-size: 20px; }

/* ─── Overview: route cards ─── */
.routes { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 48px; }
.route { background: var(--paper); border: 1px solid var(--line); border-radius: 20px; overflow: hidden; display: flex; flex-direction: column; min-width: 0; }
.route-top { background: var(--teal); color: var(--on-teal-2); padding: 28px 30px; }
.route-top .label { color: var(--mint); margin-bottom: 8px; }
.route-top h3 { color: var(--on-teal); font-size: 28px; letter-spacing: -0.02em; margin-bottom: 6px; }
.route-top p { font-family: var(--display); font-size: 19px; font-weight: 600; color: var(--mint); }
.route-body { padding: 26px 30px 30px; display: flex; flex-direction: column; gap: 16px; flex: 1; }
.route-body ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; color: var(--ink); }
.route-body li { display: flex; gap: 10px; align-items: flex-start; }
.route-body li .tick { margin-top: 4px; }
.route-foot { margin-top: auto; padding-top: 18px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.route-foot .amt { font-family: var(--display); font-weight: 700; color: var(--ink); }
.route-foot .amt small { display: block; font-family: var(--text); font-weight: 400; font-size: 13px; color: var(--ink-3); }

/* comparison with two equal products */
.compare.duo .crow > div:not(.k) { color: var(--ink); background: var(--paper); font-family: var(--text); font-weight: 400; }
.compare.duo .crow.head > div:not(.k) { background: var(--teal); color: var(--on-teal); font-family: var(--display); font-weight: 700; }
.compare.duo .crow.head > div.k { background: var(--teal); }
.compare.duo .crow { grid-template-columns: 190px 1fr 1fr; }
.compare.duo .crow > div:nth-child(2) { border-right: 1px solid var(--line); }
.compare.duo .crow.head > div:nth-child(2) { border-right-color: var(--on-teal-line); }

/* example year */
.year { margin-top: 44px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); padding: 26px 28px 22px; }
.year-head { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-family: var(--display); font-weight: 700; color: var(--ink); margin-bottom: 18px; }
.legend { display: flex; gap: 18px; flex-wrap: wrap; font-family: var(--text); font-weight: 400; font-size: 14px; color: var(--ink-2); }
.legend span { display: inline-flex; align-items: center; gap: 8px; }
.mk { width: 14px; height: 14px; border-radius: 50%; display: inline-block; flex: none; }
.mk.av { background: var(--teal); }
.mk.ee { background: var(--mint); border: 2px solid var(--teal); border-radius: 4px; }
.months { display: grid; grid-template-columns: repeat(12, 1fr); position: relative; }
.months::before { content: ""; position: absolute; left: 0; right: 0; top: 22px; height: 2px; background: var(--grey-100); }
.m { position: relative; display: grid; justify-items: center; gap: 6px; padding-top: 14px; min-width: 0; }
.m .mk { position: relative; z-index: 1; }
.m .mk.none { width: 8px; height: 8px; background: var(--line); margin-top: 3px; }
.m small { font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.m em { font-style: normal; font-size: 11px; font-family: var(--display); font-weight: 700; color: var(--ink-2); text-align: center; line-height: 1.25; }

/* regulation */
.regs { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 44px; }
.reg { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); padding: 28px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.reg .who { display: flex; align-items: center; gap: 12px; font-family: var(--display); font-weight: 700; color: var(--ink); }
.reg .flagc { width: 40px; height: 40px; border-radius: var(--r-sm); background: var(--teal); color: var(--mint); display: inline-flex; align-items: center; justify-content: center; font-family: var(--display); font-weight: 800; font-size: 12px; flex: none; }
.reg blockquote { margin: 0; font-family: var(--display); font-size: 18px; font-weight: 600; line-height: 1.45; color: var(--ink); }
.reg cite { font-style: normal; font-size: 14px; color: var(--ink-3); margin-top: auto; }
.disclaim { margin-top: 18px; text-align: center; font-size: 14px; color: var(--ink-3); }
.reads { margin-top: 26px; display: flex; gap: 12px 24px; justify-content: center; flex-wrap: wrap; font-family: var(--display); font-weight: 700; font-size: 15px; }
.reads a { text-decoration: none; }
.reads a::after { content: "\00a0→"; }

/* exit report mock */
.report .screen-top { background: var(--paper); }
.verdict { display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid var(--grey-100); }
.verdict div { padding: 12px 18px; border-right: 1px solid var(--grey-100); }
.verdict div:last-child { border-right: 0; }
.verdict small { display: block; font-size: 11px; color: var(--ink-3); font-weight: 600; }
.verdict b { font-family: var(--display); font-size: 20px; color: var(--ink); }
.verdict b.pass { color: var(--ok); }
.fn { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; padding: 9px 18px; border-bottom: 1px solid var(--grey-100); font-size: 13px; color: var(--ink); }
.fn:last-of-type { border-bottom: 0; }
.fn small { display: block; color: var(--ink-3); font-size: 12px; }
.gap { margin: 8px 18px 0; background: #fff7e6; border: 1px solid #f0d9a8; border-radius: 10px; padding: 10px 12px; color: #6b4a00; font-size: 12px; }
.gap b { font-family: var(--display); color: #5a3e00; font-size: 13px; display: block; }
.annex { display: flex; gap: 8px; flex-wrap: wrap; padding: 12px 18px 16px; }
.annex span { font-family: var(--display); font-weight: 700; font-size: 11px; background: var(--mint-soft); color: var(--teal); padding: 4px 8px; border-radius: 6px; }

/* four-up cards and audience */
.grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 48px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 48px; }
.steps.four { grid-template-columns: repeat(4, 1fr); }
.xsell { margin-top: 48px; display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center; background: var(--mint-soft); border-radius: var(--r); padding: 28px 32px; }
.xsell h3 { font-size: 20px; margin-bottom: 4px; }
.xsell p { color: var(--ink-2); }

@media (max-width: 1080px) {
  .grid4, .steps.four { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) {
  .routes, .regs, .grid2 { grid-template-columns: 1fr; }
  .compare.duo .crow { grid-template-columns: 1fr 1fr; }
  .compare.duo .crow > div:nth-child(2) { border-right: 1px solid var(--line); }
  .xsell { grid-template-columns: 1fr; }
  .months { grid-template-columns: repeat(6, 1fr); row-gap: 14px; }
  .months::before { display: none; }
}
@media (max-width: 560px) {
  .grid4, .steps.four { grid-template-columns: 1fr; }
  .choice a { grid-template-columns: auto 1fr; }
  .choice .go { display: none; }
  .route-top, .route-body { padding-left: 22px; padding-right: 22px; }
  .verdict b { font-size: 17px; }
}

/* ─── Exit Exercise: single price panel ─── */
.one-price { margin: 48px auto 0; max-width: 920px; display: grid; grid-template-columns: 0.85fr 1.15fr; background: var(--paper); border: 1px solid var(--line); border-radius: 20px; overflow: hidden; }
.one-price .lhs { background: var(--teal); color: var(--on-teal-2); padding: 34px; display: flex; flex-direction: column; gap: 10px; }
.one-price .lhs .label { color: var(--mint); margin: 0; }
.one-price .lhs h3 { color: var(--on-teal); font-size: 26px; letter-spacing: -0.02em; }
.one-price .lhs .price { color: var(--on-teal); }
.one-price .lhs .price small, .one-price .lhs .price span { color: var(--on-teal-2); }
.one-price .lhs .btn { margin-top: auto; align-self: flex-start; }
.one-price .rhs { padding: 34px; display: flex; flex-direction: column; gap: 14px; }
.one-price .rhs h4 { font-size: 17px; }
.one-price .rhs ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 18px; color: var(--ink); }
.one-price .rhs li { display: flex; gap: 10px; align-items: flex-start; }
.one-price .rhs li .tick { margin-top: 4px; }
.one-price .rhs p { font-size: 15px; border-top: 1px solid var(--line); padding-top: 14px; margin-top: auto; }
.report-wrap { min-width: 0; }
.report-wrap .ex { margin-top: 10px; font-size: 13px; color: var(--on-teal-2); text-align: right; }
.hero .screen { color: var(--ink-2); }
.reg { margin: 0; }
.reg cite a { color: var(--link); }
.year-note { margin-top: 14px; font-size: 14px; color: var(--ink-3); }
@media (max-width: 860px) {
  .one-price { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .one-price .lhs, .one-price .rhs { padding: 24px 22px; }
  .one-price .rhs ul { grid-template-columns: 1fr; }
  .fn { padding: 9px 14px; }
}

/* route cards: price above the button on both cards, so the two line up */
.route-foot { flex-direction: column; align-items: flex-start; justify-content: flex-start; }
.lead { text-wrap: pretty; }

@media (max-width: 560px) {
  .subnav .wrap { gap: 18px; }
  .subnav-title { display: none; }
  .subnav a { font-size: 14px; }
  .nav-right .btn { white-space: nowrap; }
  .nav-long { display: none; }
}


/* ═════════════ Site chrome ═════════════ */
.skip { position: absolute; left: -9999px; top: 8px; z-index: 100; background: var(--paper); padding: 8px 12px; border-radius: 6px; }
.skip:focus { left: 8px; }
.brand { display: flex; align-items: center; gap: 8px; font-family: var(--display); font-weight: 800; font-size: 20px; color: var(--ink); text-decoration: none; letter-spacing: -0.02em; flex: none; }
.brand svg { width: 26px; height: 26px; }

/* announcement */
.announce { background: var(--ink); color: var(--on-teal-2); font-size: 14px; }
.announce .wrap { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 40px; padding-top: 6px; padding-bottom: 6px; text-align: center; flex-wrap: wrap; }
.announce .new { font-family: var(--display); font-weight: 800; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; background: var(--mint); color: var(--ink); padding: 2px 8px; border-radius: 4px; }
.announce a { color: var(--mint); font-family: var(--display); font-weight: 700; text-decoration: none; white-space: nowrap; }
.announce a::after { content: "\00a0→"; }

/* navigation */
.nav { position: sticky; top: 0; z-index: 50; background: var(--paper); border-bottom: 1px solid var(--line); }
.nav > .wrap { display: flex; align-items: center; gap: 28px; height: 68px; }
.menu { display: flex; align-items: center; gap: 4px; height: 100%; }
.mi { position: relative; height: 100%; display: flex; align-items: center; }
.mt { font: inherit; font-family: var(--display); font-size: 15px; font-weight: 600; color: var(--ink); background: none; border: 0; padding: 8px 12px; border-radius: 8px; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.mt:hover, .mi.open > .mt { background: var(--grey-50); }
button.mt::after { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); opacity: 0.6; }
.mi.on > .mt, a.mt.on { color: var(--teal); box-shadow: inset 0 -2px 0 var(--teal); border-radius: 0; }
.drop { position: absolute; top: calc(100% - 6px); left: -12px; background: var(--paper); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 24px 60px rgba(4, 47, 46, 0.16); padding: 18px; display: none; gap: 6px 22px; min-width: 300px; z-index: 60; }
.drop.wide { grid-template-columns: repeat(4, minmax(190px, 1fr)); min-width: 880px; }
.drop.two { grid-template-columns: repeat(2, minmax(220px, 1fr)); min-width: 560px; }
.mi.open > .drop { display: grid; }
@media (hover: hover) and (min-width: 1081px) { .mi:hover > .drop { display: grid; } }
.dcol { display: grid; gap: 2px; align-content: start; }
.dh { font-family: var(--display); font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); padding: 4px 10px 6px; }
.drop a { display: grid; gap: 1px; padding: 8px 10px; border-radius: 8px; text-decoration: none; color: var(--ink-2); font-size: 13px; line-height: 1.4; }
.drop a b { font-family: var(--display); font-size: 14px; color: var(--ink); }
.drop a:hover { background: var(--grey-50); }
.drop a.cur b { color: var(--teal); }
.drop a .tagn { display: inline-block; margin-left: 6px; font-size: 10px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; background: var(--mint); color: var(--ink); padding: 1px 6px; border-radius: 4px; vertical-align: 1px; }
.drop a.ext b::after { content: " ↗"; color: var(--ink-3); font-weight: 600; }
.nav-right { margin-left: auto; display: flex; gap: 14px; align-items: center; }
.nav-login { font-family: var(--display); font-weight: 600; font-size: 15px; color: var(--ink); text-decoration: none; }
.burger { display: none; width: 42px; height: 42px; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); cursor: pointer; align-items: center; justify-content: center; }
.burger span, .burger span::before, .burger span::after { display: block; width: 18px; height: 2px; background: var(--ink); border-radius: 2px; position: relative; content: ""; }
.burger span::before { position: absolute; top: -6px; }
.burger span::after { position: absolute; top: 6px; }

/* sub-navigation inside a section (Verification, Solutions) */
.subnav { background: var(--grey-50); border-bottom: 1px solid var(--line); }

/* footer */
.foot { background: var(--ink); color: var(--on-teal-2); padding: 64px 0 28px; font-size: 14px; }
.foot .wrap { display: block; }
.foot-top { display: grid; grid-template-columns: 1.3fr repeat(4, 1fr); gap: 32px; }
.foot .brand { color: var(--on-teal); font-size: 19px; margin-bottom: 14px; }
.foot-about p { max-width: 280px; line-height: 1.55; }
.foot-badge { margin-top: 18px; display: inline-flex; align-items: center; gap: 10px; border: 1px solid var(--on-teal-line); border-radius: 10px; padding: 8px 12px; color: var(--on-teal); font-family: var(--display); font-weight: 700; font-size: 13px; }
.foot-badge svg { width: 18px; height: 18px; color: var(--mint); }
.foot h3 { color: var(--on-teal); font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 14px; }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.foot a { color: var(--on-teal-2); text-decoration: none; }
.foot a:hover { color: var(--on-teal); }
.foot a.ext::after { content: " ↗"; opacity: 0.6; }
.foot-bottom { margin-top: 48px; padding-top: 22px; border-top: 1px solid var(--on-teal-line); display: flex; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; font-size: 13px; }
.foot-bottom .legal { display: flex; gap: 18px; flex-wrap: wrap; }
.kit-note { color: var(--mint); font-family: var(--display); font-weight: 700; }

/* ═════════════ Shared components ═════════════ */
.sec-head { max-width: 760px; margin: 0 auto 48px; text-align: center; }
.sec-head.left { margin-left: 0; text-align: left; }
.sec-head .lead { margin: 0 auto; }
.sec-head.left .lead { margin: 0; }
.mt-48 { margin-top: 48px; }
.on-teal .label { color: var(--mint); }
.hero .incl a { color: var(--mint); }
.hero-visual { min-width: 0; }

/* trust row variants */
.trust .iso { display: inline-flex; align-items: center; gap: 8px; }

/* production logo strip (images load from codekeeper.co; site.js swaps in the name if an image can't load) */
.logo-row.imgs { grid-template-columns: repeat(8, 1fr); align-items: center; }
.logo-row.imgs img { height: 30px; width: 100%; object-fit: contain; filter: grayscale(1); opacity: 0.75; }
.logo-row.imgs .logo-slot { height: 36px; border-style: solid; border-color: var(--grey-100); }

/* stats */
.stats-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.stats-row.three { grid-template-columns: repeat(3, 1fr); }
.stat-card { border-top: 3px solid var(--teal); padding-top: 16px; }
.stat-card b { display: block; font-family: var(--display); font-size: clamp(32px, 4vw, 44px); line-height: 1.05; letter-spacing: -0.02em; color: var(--ink); margin-bottom: 8px; }
.stat-card span { font-size: 15px; display: block; }
.stat-card small { display: block; margin-top: 6px; font-size: 12px; color: var(--ink-3); }
.on-teal .stat-card { border-top-color: var(--mint); }
.on-teal .stat-card b { color: var(--mint); }
/* a figure that still needs a source: highlighted only when the reasoning layer is on */
.notes .needs-src { background: var(--note-bg); box-shadow: 0 0 0 2px var(--note-line); border-radius: 4px; }
.notes .needs-src::after { content: " ⚑ source needed"; font-family: var(--display); font-size: 11px; font-weight: 800; color: var(--note-ink); vertical-align: super; white-space: nowrap; }

/* line-up: the five products as one ladder */
.lineup { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.lu { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); padding: 22px 20px; display: flex; flex-direction: column; gap: 8px; min-width: 0; position: relative; }
.lu .job { font-family: var(--display); font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--link); }
.lu h3 { font-size: 20px; }
.lu .line { font-family: var(--display); font-weight: 700; color: var(--ink); font-size: 15px; line-height: 1.35; }
.lu p { font-size: 14px; }
.lu .from { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line); font-family: var(--display); font-weight: 700; color: var(--ink); font-size: 14px; }
.lu .from small { display: block; font-family: var(--text); font-weight: 400; font-size: 12px; color: var(--ink-3); }
.lu.pro { background: var(--mint-soft); border-color: #b4ece7; }
.lu.top { background: var(--teal); border-color: var(--teal); color: var(--on-teal-2); }
.lu.top h3, .lu.top .line, .lu.top .from { color: var(--on-teal); }
.lu.top .job { color: var(--mint); }
.lu.top .from { border-top-color: var(--on-teal-line); }
.lu.top .from small { color: var(--on-teal-2); }
.lu.here { outline: 3px solid var(--teal); outline-offset: 2px; }
.lu a.more { font-family: var(--display); font-weight: 700; font-size: 14px; text-decoration: none; }
.lu.top a.more { color: var(--mint); }
.lu a.more::after { content: "\00a0→"; }
.lineup-note { margin-top: 18px; text-align: center; font-size: 15px; color: var(--ink-2); max-width: 820px; margin-left: auto; margin-right: auto; }

/* three jobs (Escrow / Resilience / Continuity) */
.jobs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.job-card { border-radius: var(--r); padding: 28px; border: 1px solid var(--line); background: var(--paper); display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.job-card .k { font-family: var(--display); font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--link); }
.job-card h3 { font-size: 24px; }
.job-card .flow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-family: var(--display); font-weight: 700; font-size: 13px; color: var(--ink); }
.job-card .flow span { background: var(--grey-50); border: 1px solid var(--line); border-radius: 8px; padding: 4px 8px; }
.job-card .flow i { font-style: normal; color: var(--ink-3); }
.job-card .from { margin-top: auto; font-family: var(--display); font-weight: 700; color: var(--ink); }
.job-card.cur { border: 2px solid var(--teal); }

/* proof ladder */
.ladder { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: var(--paper); }
.rung { padding: 28px; border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.rung:last-child { border-right: 0; }
.rung .lvl { font-family: var(--display); font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.rung h3 { font-size: 19px; display: flex; gap: 10px; align-items: center; }
.rung .chip { margin: 0; width: 38px; height: 38px; }
.rung .with { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--grey-100); font-size: 14px; color: var(--ink); }
.rung .with b { font-family: var(--display); }
.rung:nth-child(2) { background: var(--grey-50); }
.rung:nth-child(3) { background: var(--mint-soft); }

/* split section: text + visual */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.split.rev > :first-child { order: 2; }
.split .h2 { text-align: left; }
.split .lead { max-width: none; }
.checks { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 12px; color: var(--ink); }
.checks li { display: flex; gap: 10px; align-items: flex-start; }
.checks li .tick { margin-top: 4px; }
.on-teal .checks { color: var(--on-teal); }

/* image placeholder with an art-direction brief */
.ph { margin: 0; min-width: 0; }
.ph-box { aspect-ratio: var(--ar, 16 / 10); border: 2px dashed #b8c9cf; border-radius: var(--r); background: repeating-linear-gradient(135deg, var(--grey-50) 0 14px, #f9fbfb 14px 28px); display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 8px; padding: 26px; color: var(--ink-2); }
.ph-box .ico { width: 28px; height: 28px; color: var(--teal); }
.ph-box b { font-family: var(--display); color: var(--ink); font-size: 16px; }
.ph-box span { font-size: 14px; line-height: 1.5; max-width: 520px; }
.ph-box em { font-style: normal; font-family: var(--display); font-weight: 800; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--link); }
.on-teal .ph-box { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.3); color: var(--on-teal-2); }
.on-teal .ph-box b { color: var(--on-teal); }
.on-teal .ph-box .ico, .on-teal .ph-box em { color: var(--mint); }

/* suggested film (not yet made) */
.vid-ph { max-width: 980px; margin: 44px auto 0; }
.vid-box { position: relative; aspect-ratio: 16 / 9; border-radius: var(--r); background: linear-gradient(135deg, var(--teal-deep), var(--teal)); color: var(--on-teal-2); display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; padding: 28px; border: 2px dashed rgba(155, 244, 239, 0.45); overflow: hidden; }
.vid-box .play-btn { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); opacity: 0.85; }
.vid-box em { font-style: normal; font-family: var(--display); font-weight: 800; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mint); }
.vid-box b { font-family: var(--display); color: var(--on-teal); font-size: 20px; }
.vid-box span { font-size: 14px; max-width: 640px; }
.vid-ph.small { margin: 0; max-width: none; }
.vid-ph.small .vid-box { padding: 20px; }
.vid-ph.small .vid-box b { font-size: 16px; }

/* testimonials */
.tgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.tcard { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); padding: 26px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.tcard blockquote { margin: 0; font-size: 16px; color: var(--ink); line-height: 1.55; }
.tcard blockquote::before { content: "“"; display: block; font-family: var(--display); font-size: 44px; line-height: 0.6; color: var(--teal); margin-bottom: 10px; font-weight: 800; }
.tcard .who { margin-top: auto; font-size: 14px; }
.tcard .who b { display: block; font-family: var(--display); color: var(--ink); }
.stars { color: #e3a008; letter-spacing: 2px; font-size: 14px; }

/* case study */
.case { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 0; border-radius: 20px; overflow: hidden; background: var(--ink); color: var(--on-teal-2); }
.case-body { padding: 44px; display: flex; flex-direction: column; gap: 16px; }
.case-body .label { color: var(--mint); margin: 0; }
.case-body h3 { color: var(--on-teal); font-size: clamp(24px, 2.6vw, 32px); letter-spacing: -0.02em; line-height: 1.2; }
.case-body h3 em { color: var(--mint); font-style: italic; }
.case-body .src { font-size: 13px; color: var(--on-teal-2); }
.case-body .src a { color: var(--mint); }
.case-stats { background: var(--teal); padding: 44px; display: grid; gap: 22px; align-content: center; }

/* "the old way / the new way" */
.versus { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.vs { border-radius: var(--r); padding: 28px; border: 1px solid var(--line); background: var(--paper); }
.vs.old { background: var(--grey-50); }
.vs.new { border: 2px solid var(--teal); }
.vs h3 { font-size: 19px; margin-bottom: 12px; }
.vs ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.vs li { display: flex; gap: 10px; align-items: flex-start; color: var(--ink); }
.vs.old li { color: var(--ink-2); }
.xmark { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--ink-3); color: var(--ink-3); display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; flex: none; margin-top: 4px; }

/* pricing grid */
.pgrid-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r); background: var(--paper); }
.pgrid { width: 100%; border-collapse: collapse; min-width: 820px; }
.pgrid th, .pgrid td { padding: 18px 16px; text-align: left; border-top: 1px solid var(--line); vertical-align: top; }
.pgrid thead th { border-top: 0; background: var(--grey-50); font-family: var(--display); font-size: 15px; color: var(--ink); }
.pgrid thead th small { display: block; font-family: var(--text); font-weight: 400; font-size: 12px; color: var(--ink-3); margin-top: 2px; }
.pgrid thead th.pro { background: var(--mint-soft); }
.pgrid thead th.top { background: var(--teal); color: var(--on-teal); }
.pgrid thead th.top small { color: var(--on-teal-2); }
.pgrid tbody th { font-family: var(--display); color: var(--ink); font-size: 16px; }
.pgrid tbody th small { display: block; font-family: var(--text); font-weight: 400; font-size: 13px; color: var(--ink-3); }
.pgrid td { font-family: var(--display); font-weight: 700; color: var(--ink); font-size: 20px; white-space: nowrap; }
.pgrid td small { font-family: var(--text); font-weight: 400; font-size: 13px; color: var(--ink-3); }
.pgrid td.pro { background: rgba(205, 250, 247, 0.35); }
.pgrid td.top { background: rgba(18, 84, 103, 0.06); }
.pnotes { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 28px; margin-top: 28px; font-size: 15px; }
.pnotes div { border-left: 3px solid var(--mint); padding-left: 14px; }
.pnotes b { font-family: var(--display); color: var(--ink); }

/* includes table (what each level includes) */
.inc { width: 100%; border-collapse: collapse; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; min-width: 760px; }
.inc-wrap { overflow-x: auto; border-radius: var(--r); }
.inc th, .inc td { padding: 14px 16px; border-top: 1px solid var(--line); text-align: center; font-size: 15px; }
.inc thead th { border-top: 0; background: var(--grey-50); font-family: var(--display); color: var(--ink); font-size: 14px; }
.inc tbody th { text-align: left; font-family: var(--text); font-weight: 600; color: var(--ink); }
.inc .y { color: var(--teal); font-weight: 800; }
.inc .n { color: #b6c3c7; }

/* offer band: the sample evidence pack, once per page */
.pack-band { padding: 72px 0; background: var(--mint-soft); }
.pack-band .wrap { display: grid; grid-template-columns: 300px 1fr auto; gap: 44px; align-items: center; }
.pack-band .label { margin-bottom: 8px; }
.pack-band h2 { font-size: clamp(26px, 3vw, 34px); letter-spacing: -0.02em; line-height: 1.15; margin-bottom: 10px; }
.pack-band p { max-width: 560px; }
.pack-band .mini { list-style: none; padding: 0; margin: 14px 0 0; display: flex; flex-wrap: wrap; gap: 8px 18px; color: var(--ink); font-weight: 600; font-size: 15px; }
.pack-band .mini li { display: flex; gap: 8px; align-items: center; }
.pack-stack { position: relative; height: 210px; }
.pack-stack .sheet { position: absolute; width: 190px; height: 200px; background: var(--paper); border-radius: 12px; box-shadow: 0 16px 40px rgba(4, 47, 46, 0.16); border: 1px solid var(--line); padding: 14px; font-size: 11px; display: grid; align-content: start; gap: 6px; }
.pack-stack .sheet:nth-child(1) { left: 0; top: 18px; transform: rotate(-6deg); }
.pack-stack .sheet:nth-child(2) { left: 50px; top: 8px; transform: rotate(-1deg); }
.pack-stack .sheet:nth-child(3) { left: 100px; top: 0; transform: rotate(4deg); }
.pack-stack .sheet b { font-family: var(--display); color: var(--ink); font-size: 12px; }
.pack-stack .sheet i { display: block; height: 6px; border-radius: 3px; background: var(--grey-100); }
.pack-stack .sheet i.s { width: 60%; }
.pack-stack .sheet .tag { justify-self: start; font-family: var(--display); font-weight: 800; font-size: 10px; background: var(--mint); color: var(--ink); border-radius: 4px; padding: 2px 6px; }
.pack-stack .sheet.cert { background: var(--teal); color: var(--on-teal-2); border-color: var(--teal); }
.pack-stack .sheet.cert b { color: var(--on-teal); }
.pack-stack .sheet.cert i { background: rgba(255, 255, 255, 0.18); }

/* regulation cards (overview of frameworks) */
.fw-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.fw { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); padding: 24px; display: flex; flex-direction: column; gap: 10px; text-decoration: none; color: var(--ink-2); min-width: 0; transition: border-color 150ms ease, transform 150ms ease; }
a.fw:hover { border-color: var(--teal); transform: translateY(-2px); }
.fw .top { display: flex; align-items: center; gap: 12px; }
.fw .flagc { width: 40px; height: 40px; border-radius: var(--r-sm); background: var(--teal); color: var(--mint); display: inline-flex; align-items: center; justify-content: center; font-family: var(--display); font-weight: 800; font-size: 12px; flex: none; }
.fw h3 { font-size: 19px; }
.fw .reg-of { font-size: 13px; color: var(--ink-3); }
.fw p { font-size: 15px; }
.fw .go { margin-top: auto; font-family: var(--display); font-weight: 700; color: var(--link); font-size: 14px; }
.fw .go::after { content: "\00a0→"; }
.fw.ext .go::after { content: "\00a0↗"; }

/* evidence map: which document answers which requirement */
.emap { width: 100%; border-collapse: collapse; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.emap-wrap { overflow-x: auto; border-radius: var(--r); }
.emap th, .emap td { padding: 16px 18px; border-top: 1px solid var(--line); text-align: left; vertical-align: top; font-size: 15px; }
.emap thead th { border-top: 0; background: var(--teal); color: var(--on-teal); font-family: var(--display); font-size: 14px; }
.emap tbody th { font-family: var(--display); color: var(--ink); width: 30%; }
.emap td .doc-chip { display: inline-block; margin: 2px 6px 2px 0; font-family: var(--display); font-weight: 700; font-size: 12px; background: var(--mint-soft); color: var(--teal); border-radius: 6px; padding: 3px 8px; }
.emap td .lvlc { font-size: 13px; color: var(--ink-3); display: block; margin-top: 4px; }

/* mini product screens used across pages */
.mock { background: var(--paper); border-radius: var(--r); box-shadow: 0 30px 80px rgba(2, 24, 30, 0.35); overflow: hidden; font-size: 13px; color: var(--ink-2); min-width: 0; border: 1px solid var(--line); }
.band .mock, .band.alt .mock { box-shadow: 0 24px 60px rgba(4, 47, 46, 0.16); }
.mock-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--line); background: var(--grey-50); }
.mock-top b { font-family: var(--display); color: var(--ink); font-size: 15px; display: block; }
.mock-top small { color: var(--ink-3); font-size: 12px; }
.mrow { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 11px 18px; border-bottom: 1px solid var(--grey-100); }
.mrow:last-child { border-bottom: 0; }
.mrow b { color: var(--ink); font-weight: 700; display: block; font-size: 13px; }
.mrow small { color: var(--ink-3); font-size: 12px; }
.pill-s { font-family: var(--display); font-weight: 700; font-size: 11px; padding: 3px 8px; border-radius: 6px; white-space: nowrap; background: var(--grey-100); color: var(--ink-2); }
.pill-s.ok { width: auto; height: auto; border-radius: 6px; background: #dcf5e9; color: #146c48; }
.pill-s.pro { background: var(--mint-soft); color: var(--teal); }
.pill-s.top { background: var(--teal); color: var(--on-teal); }
.pill-s.warn { background: #fff1d6; color: #7a4e00; }
.mock-foot { padding: 12px 18px 16px; display: flex; gap: 8px 16px; flex-wrap: wrap; font-size: 12px; color: var(--ink-3); border-top: 1px solid var(--grey-100); }
.ico-sq { width: 30px; height: 30px; border-radius: 8px; background: var(--mint-soft); color: var(--teal); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.ico-sq svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ico-sq.t { background: var(--teal); color: var(--mint); }

/* live environment map (Continuity) */
.envmap { position: relative; background: var(--teal); border-radius: var(--r); padding: 26px; color: var(--on-teal-2); min-height: 340px; overflow: hidden; }
.envmap .svc { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background: var(--mint); color: var(--ink); font-family: var(--display); font-weight: 800; font-size: 14px; padding: 12px 16px; border-radius: 12px; box-shadow: 0 0 0 10px rgba(155, 244, 239, 0.15), 0 0 0 22px rgba(155, 244, 239, 0.07); white-space: nowrap; z-index: 2; }
.envmap .node { position: absolute; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.22); border-radius: 10px; padding: 8px 10px; font-size: 12px; color: var(--on-teal); z-index: 2; min-width: 120px; }
.envmap .node b { display: block; font-family: var(--display); font-size: 13px; }
.envmap .node small { color: var(--mint); font-family: var(--display); font-weight: 700; font-size: 11px; }
.envmap svg.lines { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }
.envmap .cap { position: absolute; left: 18px; bottom: 14px; font-size: 12px; color: var(--on-teal-2); z-index: 2; }

/* lists of people / audiences */
.aud { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.aud .card h3 { font-size: 18px; }

/* in-page anchor offset under the sticky nav */
[id] { scroll-margin-top: 84px; }

/* ═════════════ Responsive (site chrome and new components) ═════════════ */
@media (max-width: 1180px) {
  .lineup { grid-template-columns: repeat(3, 1fr); }
  .drop.wide { grid-template-columns: repeat(2, minmax(200px, 1fr)); min-width: 520px; }
}
@media (max-width: 1080px) {
  .burger { display: inline-flex; }
  .nav-login { display: none; }
  .menu { display: none; position: fixed; left: 0; right: 0; top: var(--nav-bottom, 108px); bottom: 0; background: var(--paper); flex-direction: column; align-items: stretch; gap: 0; padding: 12px var(--gutter) 40px; overflow-y: auto; height: auto; border-top: 1px solid var(--line); }
  body.menu-open { overflow: hidden; }
  body.menu-open .menu { display: flex; }
  .mi { height: auto; flex-direction: column; align-items: stretch; border-bottom: 1px solid var(--grey-100); }
  .mt { width: 100%; justify-content: space-between; padding: 16px 4px; font-size: 17px; border-radius: 0; }
  a.mt { border-bottom: 1px solid var(--grey-100); }
  .mi.on > .mt, a.mt.on { box-shadow: none; }
  .drop, .drop.wide, .drop.two { position: static; box-shadow: none; border: 0; min-width: 0; padding: 0 0 14px; grid-template-columns: 1fr; }
  .foot-top { grid-template-columns: 1fr 1fr 1fr; }
  .foot-about { grid-column: 1 / -1; }
  .split, .case { grid-template-columns: 1fr; }
  .split.rev > :first-child { order: 0; }
  .pack-band .wrap { grid-template-columns: 1fr; gap: 26px; }
  .pack-stack { display: none; }
  .stats-row { grid-template-columns: 1fr 1fr; }
  .logo-row.imgs { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 860px) {
  .lineup, .jobs, .ladder, .tgrid, .fw-grid, .aud, .versus, .pnotes { grid-template-columns: 1fr; }
  .rung { border-right: 0; border-bottom: 1px solid var(--line); }
  .rung:last-child { border-bottom: 0; }
  .stats-row.three { grid-template-columns: 1fr; }
  .case-body, .case-stats { padding: 30px 24px; }
}
@media (max-width: 560px) {
  .nav > .wrap { gap: 10px; }
  .nav-right { gap: 8px; }
  .foot-top { grid-template-columns: 1fr 1fr; }
  .stats-row { grid-template-columns: 1fr; }
  .logo-row.imgs { grid-template-columns: repeat(2, 1fr); }
  .lu, .job-card, .rung, .fw, .tcard, .vs { padding: 22px; }
  .announce { font-size: 13px; }
  .envmap { min-height: 420px; }
}

.img-fallback { display: inline-flex; align-items: center; justify-content: center; font-family: var(--display); font-weight: 700; font-size: 12px; color: var(--ink-3); border: 1px dashed var(--line); border-radius: 8px; padding: 6px 10px; }

.tcard { margin: 0; }
.case-stats .stat-card { border-top-color: var(--mint); }
.case-stats .stat-card b { color: var(--mint); }
.case-stats .stat-card span { color: var(--on-teal-2); }
.rung:nth-child(3) .chip { background: var(--paper); }
.play.play-top { align-items: flex-start; background: linear-gradient(0deg, rgba(4, 47, 46, 0) 50%, rgba(4, 47, 46, 0.55)); }

/* vertical steps (inside a split) */
.vsteps { display: grid; gap: 12px; margin-top: 26px; }
.vstep { display: grid; grid-template-columns: 34px 1fr; gap: 14px; align-items: start; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 16px 18px; }
.vstep .n { width: 32px; height: 32px; border-radius: 50%; background: var(--ink); color: var(--paper); display: inline-flex; align-items: center; justify-content: center; font-family: var(--display); font-weight: 700; font-size: 14px; }
.vstep h3 { font-size: 17px; margin-bottom: 2px; }
.vstep p { font-size: 15px; }
.band:not(.alt) .vstep { background: var(--grey-50); }
/* announcement: shorter on phones */
.announce .short { display: none; }
@media (max-width: 560px) { .announce .long { display: none; } .announce .short { display: inline; } }

/* fixes from the first build */
.form .fields { display: grid; gap: 14px; }
.plans.two { grid-template-columns: 1fr 1fr; max-width: 880px; margin: 0 auto; }
@media (max-width: 860px) { .plans.two { grid-template-columns: 1fr; } }
.envmap .node { background: var(--teal-deep); }
.notes .on-teal .needs-src, .notes .case-stats .needs-src { color: var(--note-ink); }
.vid-cap { margin-top: 10px; font-size: 14px; color: var(--ink-3); max-width: 980px; margin-left: auto; margin-right: auto; }
.on-teal .vid-cap { color: var(--on-teal-2); }

/* price an application (pricing hero) */
.calc .calc-out { background: var(--mint-soft); border-radius: var(--r-sm); padding: 16px 18px; display: grid; gap: 4px; color: var(--ink-2); }
.calc .calc-out > span { font-size: 15px; }
.calc .calc-out > span b { font-family: var(--display); font-size: 36px; color: var(--ink); letter-spacing: -0.02em; margin-right: 6px; }
.calc .calc-out small { font-size: 13px; color: var(--ink-3); }
.calc .calc-out small b { color: var(--ink); }
.calc .calc-out p { font-size: 14px; color: var(--ink); margin-top: 4px; }

.scroll-hint { margin-top: 8px; font-size: 13px; color: var(--ink-3); text-align: right; }
.scroll-hint::after { content: "\00a0→"; }

[hidden] { display: none !important; }
img { max-width: 100%; }