@font-face {
  font-family: "Newsreader";
  font-style: normal;
  font-weight: 540 660;
  font-display: swap;
  src: url("/fonts/clarity/newsreader-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Newsreader";
  font-style: normal;
  font-weight: 540 660;
  font-display: swap;
  src: url("/fonts/clarity/newsreader-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400 820;
  font-display: swap;
  src: url("/fonts/clarity/manrope-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400 820;
  font-display: swap;
  src: url("/fonts/clarity/manrope-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* The mono carries the whole engineering register — every check ID, every
   PASS/FAIL, the scanner bounds, the rail labels. Leaving that to whatever
   ui-monospace the visitor's OS ships meant the one face making the
   credibility argument was the one face we did not control. Self-hosted and
   subset like the other two. */
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/fonts/clarity/jetbrains-mono-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/fonts/clarity/jetbrains-mono-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* Ground — cool stone, not the warm cream that ships with every other
     serif-and-terracotta landing page. The faint green-grey bias matches the
     ink, so the neutrals read as chosen rather than inherited. */
  --canvas: #EFF1ED;
  --surface: #FAFBF8;
  --ink: #16201C;
  --muted: #55625C;
  /* Darkened from #69746E, which measured 4.05–4.68:1 across the six grounds
     this page actually uses and failed AA on every one of them. This clears
     4.5:1 everywhere, including the sand packet tile. */
  --quiet: #5B6862;
  --line: #D7DAD3;
  --line-strong: #C1C6BD;

  /* Both accents are lifted straight off the logo, which runs vermillion on
     the left of the hexagon to teal on the right. Vermillion carries actions,
     teal carries links and the "authoritative data" surfaces. The earlier
     indigo was invented before anyone looked at the mark. */
  --accent: #E4522F;
  --accent-dark: #B03A1B;
  --accent-soft: #FBE8E1;
  --teal: #17978E;
  --teal-ink: #0A6963;

  /* Reserved for scanner verdicts and nothing else. Fail is pulled toward
     crimson so it cannot read as a washed-out version of the CTA. */
  --green: #14785D;
  --green-soft: #E4F1EB;
  --rust: #96202B;
  --rust-soft: #FAE8E5;
  --amber: #8A6115;
  --amber-soft: #FBF0D3;

  /* The one warm surface left on the page: the commerce packet, so a stone
     ground and an indigo accent never tip the whole thing cold. */
  --sand: #F2E9DF;
  --white: #FFFFFF;
  --font-display: "Newsreader", Georgia, serif;
  --font-body: "Manrope", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;
  --shadow-sm: 0 12px 30px rgba(35, 43, 39, .07);
  --shadow-lg: 0 28px 74px rgba(35, 43, 39, .11);
  --radius-sm: 10px;
  --radius: 18px;
  --radius-lg: 28px;
  --max: 1180px;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 90px;
  background: var(--canvas);
  color-scheme: light;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  overflow-x: clip;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.58;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

button, input, select, textarea { font: inherit; }
button, summary { -webkit-tap-highlight-color: transparent; }
img, svg { display: block; max-width: 100%; }

a {
  color: var(--teal-ink);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

a:hover { text-decoration-thickness: 2px; }

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 5px;
}

::selection { background: #FBD5C7; color: var(--ink); }

h1, h2, h3, p, ul, ol, dl, figure { margin-top: 0; }
h1, h2, h3 { color: var(--ink); text-wrap: balance; }

h1, h2 {
  margin-bottom: 0;
  font-family: var(--font-display);
  font-weight: 560;
  letter-spacing: -.045em;
}

/* Display tier, sized by rank rather than by the width of whatever column a
   heading happens to sit in. That inversion is how the page ended up with the
   H1 (53.6px) set smaller than three of its own section headings (57.6px).
   Three steps, no more: the promise, the sections, the supporting sections.
   The hero copy column is widened below so the H1 can be the largest type on
   the page and still set four lines with an even rag. */
h1 {
  max-width: 20ch;
  font-size: clamp(2.75rem, 4.15vw, 3.75rem);
  line-height: 1.18;
}

h2 {
  max-width: 18ch;
  font-size: clamp(2.15rem, 3.4vw, 3.05rem);
  line-height: 1.2;
}

h3 {
  margin-bottom: 0;
  font-size: 1.16rem;
  font-weight: 760;
  letter-spacing: -.025em;
  line-height: 1.4;
}

p { margin-bottom: 1em; }

.wrap {
  width: min(calc(100% - 48px), var(--max));
  margin-inline: auto;
}

.mono { font-family: var(--font-mono); }
.is-hidden { display: none !important; }
.micro { color: var(--quiet); font-size: .78rem; line-height: 1.55; }

.lede {
  color: var(--muted);
  font-size: clamp(1.05rem, 1.4vw, 1.2rem);
  line-height: 1.58;
}

.eyebrow {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 18px;
  color: var(--green);
  font-size: .75rem;
  font-weight: 790;
  letter-spacing: .105em;
  line-height: 1.4;
  text-transform: uppercase;
}

/* Aligned to the first line rather than the block: a two-line eyebrow used to
   centre the rule against both lines and read as a floating dash. */
.eyebrow::before {
  width: 24px;
  height: 3px;
  margin-top: .57em;
  border-radius: 999px;
  background: var(--accent);
  content: "";
  flex: 0 0 auto;
}

.muted-eyebrow { color: var(--quiet); }

.section { padding-block: 102px; }

/* Section volume. Seven sections opening at one size gave the page no ask
   moment: #review read exactly as loud as #agencies. The argument peaks
   twice — the offer (#outcomes, #sprint) and the ask (#review) — and the
   supporting sections step down between them. */
#system h2,
#price h2,
#faq h2,
.agency-panel h2 {
  font-size: clamp(1.85rem, 2.85vw, 2.5rem);
  letter-spacing: -.038em;
}

.section-head {
  display: grid;
  grid-template-columns: minmax(0, .88fr) minmax(280px, .52fr);
  gap: 60px;
  align-items: end;
  margin-bottom: 46px;
}

.section-head .lede {
  max-width: 47ch;
  justify-self: end;
  margin-bottom: 0;
}

/* Shared indexed layout used by the legal pages and footer. */
.sec {
  width: min(calc(100% - 48px), var(--max));
  display: grid;
  grid-template-columns: 108px minmax(0, 1fr);
  gap: 36px;
  margin-inline: auto;
  padding-block: 82px;
}

.rail {
  padding-top: 8px;
  color: var(--green);
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.rail span { display: block; }

.skip-link {
  position: fixed;
  z-index: 1000;
  top: 10px;
  left: 12px;
  padding: 10px 14px;
  border-radius: 8px;
  background: var(--ink);
  color: var(--white);
  transform: translateY(-160%);
  transition: transform .18s ease;
}

.skip-link:focus { transform: translateY(0); }

/* Header */
.site-header {
  position: sticky;
  z-index: 100;
  top: 0;
  border-bottom: 1px solid rgba(193, 198, 189, .78);
  background: rgba(239, 241, 237, .93);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.header-inner {
  min-height: 72px;
  display: flex;
  align-items: center;
  gap: 28px;
}

.wordmark {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: -.025em;
  text-decoration: none;
  white-space: nowrap;
}

/* The real mark: a hexagonal wireframe running vermillion to teal. Extracted
   from logo-black.svg — the wordmark beside it stays live text so it can be
   sized, coloured and read by assistive tech. */
.brand-mark {
  width: 31px;
  height: 34px;
  flex: 0 0 auto;
}



.desktop-nav {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-left: auto;
}

.desktop-nav a {
  color: var(--muted);
  font-size: .88rem;
  font-weight: 680;
  text-decoration: none;
}

.desktop-nav a:hover { color: var(--ink); }

.btn {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 12px 20px;
  border: 1px solid transparent;
  border-radius: 12px;
  cursor: pointer;
  font-weight: 780;
  line-height: 1.15;
  text-decoration: none;
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease, border-color .16s ease;
}

.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn-primary {
  background: var(--accent);
  color: #2E0C03;
  box-shadow: 0 10px 22px rgba(228, 82, 47, .24);
}

.btn-primary:hover {
  background: #F0653F;
  box-shadow: 0 13px 28px rgba(228, 82, 47, .32);
}

.btn-secondary {
  border-color: var(--line-strong);
  background: var(--surface);
  color: var(--ink);
}

.btn-secondary:hover { border-color: var(--accent); color: var(--accent); }
/* Redundant while the scanner it points at is on screen: the header CTA
   only earns its place once the hero has scrolled away. Visible by default,
   so no-JS keeps a working path. */
.btn-header {
  min-height: 44px;
  padding: 10px 16px;
  font-size: .86rem;
  transition: opacity .22s ease, transform .22s ease, background .16s ease, box-shadow .16s ease;
}

.btn-header.is-tucked {
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
}
.btn-block { width: 100%; }

.mobile-nav {
  display: none;
  position: relative;
  margin-left: auto;
}

.mobile-nav summary {
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  font-size: .85rem;
  font-weight: 760;
  list-style: none;
}

.mobile-nav summary::-webkit-details-marker { display: none; }
.mobile-nav summary::after { color: var(--accent-dark); content: "+"; font-size: 1.2rem; }
.mobile-nav[open] summary::after { content: "×"; }

.mobile-nav nav {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: min(280px, calc(100vw - 36px));
  display: grid;
  gap: 4px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: var(--shadow-lg);
}

.mobile-nav nav a {
  min-height: 44px;
  display: flex;
  align-items: center;
  padding: 10px 12px;
  border-radius: 8px;
  color: var(--ink);
  font-size: .9rem;
  font-weight: 680;
  text-decoration: none;
}

.mobile-nav nav a:hover { background: var(--accent-soft); }
.mobile-nav nav .mobile-nav-cta { margin-top: 5px; background: var(--accent); color: #2E0C03; }

/* Hero */
.hero-shell {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.hero-shell::before {
  position: absolute;
  z-index: 0;
  top: -100px;
  right: max(-190px, calc((100vw - var(--max)) / 2 - 230px));
  width: 660px;
  height: 660px;
  border-radius: 50%;
  background:
    radial-gradient(circle at center, rgba(23, 151, 142, .09) 0 2px, transparent 2.5px) 0 0 / 27px 27px,
    radial-gradient(circle at 42% 38%, rgba(228, 82, 47, .12), transparent 59%);
  content: "";
  mask-image: radial-gradient(circle, #000 8%, rgba(0, 0, 0, .62) 48%, transparent 74%);
  -webkit-mask-image: radial-gradient(circle, #000 8%, rgba(0, 0, 0, .62) 48%, transparent 74%);
  pointer-events: none;
}

#field {
  position: absolute;
  z-index: 0;
  top: 10px;
  right: max(-100px, calc((100vw - var(--max)) / 2 - 100px));
  left: auto;
  width: min(760px, 58vw);
  height: 650px;
  border-radius: 50%;
  opacity: 0;
  filter: saturate(.22) sepia(.18) hue-rotate(322deg);
  mask-image: radial-gradient(circle at 48% 42%, #000 0 24%, rgba(0, 0, 0, .7) 48%, transparent 76%);
  -webkit-mask-image: radial-gradient(circle at 48% 42%, #000 0 24%, rgba(0, 0, 0, .7) 48%, transparent 76%);
  pointer-events: none;
  transition: opacity 1s ease;
}

#field.on { opacity: .07; }

.hero {
  position: relative;
  z-index: 1;
  padding-block: 68px 58px;
}

.hero-layout {
  display: grid;
  grid-template-columns: minmax(0, .96fr) minmax(490px, 1.04fr);
  gap: clamp(42px, 4.4vw, 64px);
  align-items: start;
}

.hero-copy { padding-top: 6px; }
.hero-copy .lede { max-width: 47ch; margin: 25px 0 0; }

.hero-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin-top: 22px;
  color: var(--ink);
  font-size: .88rem;
  font-weight: 720;
}

/* Not a flex container: as one, "<strong>10</strong> business days" became two
   flex items, so the word space either doubled with the gap or vanished with
   it. Plain inline flow spaces the words, and the dot is an inline marker. */
.hero-facts span { display: inline; }

.hero-facts span::before {
  width: 7px;
  height: 7px;
  display: inline-block;
  margin-right: 9px;
  border-radius: 50%;
  background: var(--green);
  content: "";
  vertical-align: .12em;
}

.hero-facts strong { font-weight: 820; }

.hero-proof {
  margin: 24px 0 0;
  color: var(--muted);
  font-size: .84rem;
  font-weight: 620;
  line-height: 1.6;
}

.hero-proof strong { color: var(--ink); }

.hero-link {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 14px;
  font-size: .9rem;
  font-weight: 760;
  text-decoration: none;
}

.hero-link:hover { text-decoration: underline; }

/* The copy column ran ~420px shorter than the instrument beside it. The order
   of events is the one thing the hero never answered at the moment the visitor
   decides whether to type their production domain — and stating it in the
   scanner's own mono register carries the instrument language into the copy. */
.hero-sequence {
  margin: 30px 0 0;
  padding: 0;
  border-top: 1px solid var(--line);
  list-style: none;
  counter-reset: none;
}

.hero-sequence li {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 14px;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
}

.seq-index {
  padding-top: 2px;
  color: var(--accent-dark);
  font-size: .72rem;
  font-weight: 700;
}

.hero-sequence strong {
  display: block;
  font-size: .88rem;
  font-weight: 800;
  letter-spacing: -.01em;
}

.hero-sequence span:not(.seq-index) {
  display: block;
  margin-top: 2px;
  max-width: 46ch;
  color: var(--muted);
  font-size: .82rem;
  line-height: 1.5;
}

/* Panels and the live scanner */
.panel {
  position: relative;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--surface);
}

/* Registration marks, not a border. Sat on the edge at -1px, they read as a
   clipped frame or a rendering artifact; inset, they read as the corner marks
   on an instrument face. */
.panel .tick {
  position: absolute;
  z-index: 2;
  width: 8px;
  height: 8px;
  opacity: .85;
  pointer-events: none;
}

.panel .tick.tl { top: 9px; left: 9px; border-top: 1.5px solid var(--accent); border-left: 1.5px solid var(--accent); }
.panel .tick.tr { top: 9px; right: 9px; border-top: 1.5px solid var(--accent); border-right: 1.5px solid var(--accent); }
.panel .tick.bl { bottom: 9px; left: 9px; border-bottom: 1.5px solid var(--accent); border-left: 1.5px solid var(--accent); }
.panel .tick.br { right: 9px; bottom: 9px; border-right: 1.5px solid var(--accent); border-bottom: 1.5px solid var(--accent); }

.scanner {
  overflow: hidden;
  margin-top: 88px;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

.scan-head {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 19px 21px;
  border-bottom: 1px solid var(--line);
}

.scan-head h2 {
  max-width: none;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.35;
}

.scan-head p { margin: 2px 0 0; color: var(--quiet); font-size: .78rem; }

.scan-icon {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--accent-soft);
  color: var(--accent-dark);
  flex: 0 0 auto;
}

.scan-icon svg { width: 21px; height: 21px; }

.scan-free {
  margin-left: auto;
  padding: 5px 9px;
  border-radius: 999px;
  background: var(--green-soft);
  color: var(--green);
  font-size: .72rem;
  font-weight: 820;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.scan-body { padding: 21px; }

.scan-label {
  display: block;
  margin-bottom: 8px;
  color: var(--ink);
  font-size: .8rem;
  font-weight: 760;
}

.scan-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 9px;
}

#scan-url,
.field input[type="text"],
.field input[type="email"],
.field select,
.field textarea {
  width: 100%;
  border: 1px solid var(--line-strong);
  border-radius: 11px;
  background: var(--white);
  color: var(--ink);
  font-size: 1rem;
  transition: border-color .16s ease, box-shadow .16s ease;
}

#scan-url {
  min-width: 0;
  min-height: 50px;
  padding: 12px 14px;
}

#scan-url:focus,
.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(228, 82, 47, .16);
  outline: none;
}

#scan-url[aria-invalid="true"],
.field [aria-invalid="true"] { border-color: var(--rust); }

#scan-url::placeholder,
.field input::placeholder { color: var(--quiet); }

/* The blast radius, stated at a size the person typing their production
   domain can actually read. These are the scanner's real bounds, not fine
   print — they are the most credible sentences on the page. */
.scan-bounds {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.scan-bounds li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 9px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--canvas);
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: -.01em;
  white-space: nowrap;
}

.scan-bounds li::before {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--green);
  content: "";
  flex: 0 0 auto;
}

/* Arrival from a merchant's own Magento admin: quiet, factual, and above the
   input it pre-fills — the visitor's motivation is already high, the panel
   only has to avoid wasting it. */
.scan-referral {
  margin: 0 0 14px;
  padding: 11px 13px;
  border: 1px solid var(--line, #D5DDD6);
  border-left: 3px solid var(--green);
  border-radius: 10px;
  background: #F6FAF6;
  color: var(--ink, #1b241c);
  font-size: .82rem;
  line-height: 1.55;
}

.scan-referral b {
  font-weight: 600;
  white-space: nowrap;
}

.scan-sub {
  max-width: none;
  margin: 10px 0 0;
  color: var(--quiet);
  font-size: .75rem;
  line-height: 1.55;
}

.commerce-packet {
  margin-top: 18px;
  padding: 15px;
  border: 1px solid #D5DDD6;
  border-radius: 16px;
  background: #F2F6F2;
}

.packet-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 12px;
  color: var(--quiet);
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* The honesty tag: this exchange is an example, and says so in the same
   breath as its headline — like "replayed from the checks" below it. */
.packet-tag { color: var(--quiet); font-weight: 400; letter-spacing: .06em; }

/* One question, one answer: the whole page in two speech turns. The reader
   labels sit in a narrow left rail; green stays reserved for what the
   store's own data answers. */
.exchange { display: grid; gap: 8px; }

.exchange-row {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 9px;
  align-items: start;
  margin: 0;
}

.exchange-who {
  padding-top: 9px;
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  text-align: right;
  color: var(--quiet);
}

.exchange-reply .exchange-who { color: var(--green); }

.exchange-bubble {
  display: block;
  padding: 9px 12px;
  border: 1px solid #D4DCD5;
  border-radius: 10px;
  background: var(--canvas);
  font-size: .8rem;
  line-height: 1.45;
  color: var(--ink);
}

.exchange-answer {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 11px;
  align-items: center;
  background: var(--surface);
  border-left: 3px solid var(--green);
}

.exchange-thumb {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: var(--sand);
  color: #A5602E;
}

.exchange-thumb svg { width: 36px; height: 27px; }

.exchange-facts strong { font-size: .82rem; }
.exchange-stock { color: var(--green); }
.exchange-facts small { display: block; margin-top: 2px; color: var(--quiet); font-size: .72rem; }

.exchange-note {
  margin: 1px 0 0;
  font-size: .72rem;
  line-height: 1.5;
  color: var(--quiet);
}

.scan-panel {
  margin-top: 18px;
  padding-top: 15px;
  border-top: 1px solid var(--line);
}

.scan-panel-head {
  margin-bottom: 9px;
  color: var(--quiet);
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .04em;
}

/* Empty before a scan runs, so the separator has to come from the value, not
   from the markup — otherwise the panel rests on a dangling em dash that
   reads as an unrendered variable. */
.scan-panel-head b { color: var(--green); font-weight: 700; }
.scan-panel-head b:not(:empty)::after { color: var(--quiet); content: " — "; font-weight: 400; }
.scan-lines { margin: 0; padding: 0; list-style: none; }

.scan-line {
  position: relative;
  max-width: none;
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr) auto;
  gap: 11px;
  align-items: baseline;
  padding: 9px 8px 9px 11px;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: .8rem;
}

.scan-line::before {
  position: absolute;
  top: 7px;
  bottom: 7px;
  left: 0;
  width: 3px;
  border-radius: 99px;
  background: var(--line-strong);
  content: "";
}

.scan-line.is-pass::before { background: var(--green); }
.scan-line.is-fail::before { background: var(--rust); }
.scan-line.is-locked::before { background: var(--amber); }

/* A scan that could not run reports one sentence, not a check row. Without
   this it inherited the 82px ID track and wrapped six times into a broken
   column — on the one artifact meant to earn trust. */
.scan-line.is-message {
  grid-template-columns: minmax(0, 1fr);
  gap: 4px;
  padding-block: 13px;
  color: var(--ink);
  font-size: .82rem;
  line-height: 1.5;
}

.scan-line.is-message .check-verdict { max-width: 62ch; }

.scan-line.is-running .check-glyph { color: var(--accent-dark); }
.scan-line.is-running::before { background: var(--accent); }

/* Checks the scan never reached. Dimmed rather than struck: nothing was
   observed about them, which is exactly what the row should say. */
.scan-line.is-skipped { color: var(--quiet); opacity: .62; }
.scan-line.is-skipped .check-glyph { color: var(--quiet); }
.check-id { color: var(--quiet); font-size: .7rem; font-weight: 700; white-space: nowrap; }
.check-glyph { font-size: .7rem; font-weight: 800; letter-spacing: .03em; white-space: nowrap; }
.scan-line.is-pass .check-glyph { color: var(--green); }
.scan-line.is-fail .check-glyph { color: var(--rust); }
.scan-line.is-locked .check-glyph { color: var(--amber); }
.scan-line.is-pending .check-glyph { color: var(--quiet); }

.gauge {
  display: flex;
  align-items: center;
  gap: 15px;
  flex-wrap: wrap;
  margin-top: 15px;
}

.gauge-cells { display: flex; gap: 4px; }

/* One segment per check. Empty at rest so the panel keeps its height. */
.gauge-cells .seg {
  width: 27px;
  height: 7px;
  border-radius: 99px;
  background: var(--line);
  transition: background .35s ease;
}

.gauge-cells .seg.is-pass { background: var(--green); }
.gauge-cells .seg.is-fail { background: var(--rust); }
.gauge-cells .seg.is-na { background: #B39A5E; }
.gauge-cells .seg.is-locked { background: var(--line-strong); }

.scan-readout {
  margin: 0;
  color: var(--muted);
  font-size: .79rem;
  min-height: 1.4em;
}

.scan-readout b { color: var(--green); font-size: 1rem; }

/* The peak used to deflate straight into two paragraphs about what is being
   withheld. One finding is explained here, free and unhedged, before anything
   is asked for. */
.scan-finding {
  margin: 15px 0 0;
  padding: 14px 15px;
  border: 1px solid #F3CDBF;
  border-radius: 10px;
  background: var(--accent-soft);
}

.scan-finding-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0 0 6px;
  color: var(--quiet);
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.scan-finding-head b { color: var(--rust); font-weight: 700; }
.scan-finding.is-clear .scan-finding-head b { color: var(--green); }

.scan-finding p {
  max-width: 62ch;
  margin: 0;
  color: var(--ink);
  font-size: .84rem;
  line-height: 1.55;
}

/* The six verdicts replayed as one shopping agent's session. First person is
   the point: a store owner has never watched their store turn a customer
   away, and a checklist cannot show them that — a transcript can. */
.agent-session {
  margin: 15px 0 0;
  padding: 14px 15px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: var(--surface);
}

.agent-session-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0 0 9px;
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* "replayed from the checks" — the honesty tag. The session is simulated and
   says so in the same breath as its headline. */
.agent-session-head span { color: var(--quiet); font-weight: 400; }

.agent-session-lines {
  display: grid;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.agent-line {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 9px;
  align-items: baseline;
  color: var(--ink);
  font-size: .82rem;
  line-height: 1.5;
}

.agent-line .agent-text { max-width: 62ch; }
.agent-mark { font-size: .7rem; font-weight: 800; color: var(--quiet); }
.agent-line.is-ok .agent-mark { color: var(--green); }
.agent-line.is-bad .agent-mark { color: var(--rust); }
.agent-line.is-locked .agent-mark { font-size: .78rem; }
.agent-line.is-locked .agent-text { color: #5C4A1E; }
.agent-line.is-dim { color: var(--muted); }

/* The closing line is the verdict of the whole session — separated, weighted,
   coloured by outcome. */
.agent-line.is-end-ok,
.agent-line.is-end-bad,
.agent-line.is-end-dim {
  margin-top: 3px;
  padding-top: 10px;
  border-top: 1px dashed var(--line-strong);
  font-weight: 600;
}

.agent-line.is-end-ok .agent-text, .agent-line.is-end-ok .agent-mark { color: var(--green); }
.agent-line.is-end-bad .agent-text, .agent-line.is-end-bad .agent-mark { color: var(--rust); }
.agent-line.is-end-dim .agent-text { color: var(--muted); }

.agent-line.reveal { animation: line-in .28s ease both; }

/* The counterpart session: the same agent on our reference store. The foil,
   not the hero — separated by a rule, slightly compressed, and framed in the
   green reserved for verified store data. */
.agent-session-ref {
  margin-top: 13px;
  padding: 11px 12px 12px;
  border: 1px solid #B7D2C5;
  border-radius: 9px;
  background: #F1F7F3;
}

.agent-session-ref .agent-session-head { margin-bottom: 8px; }
.agent-session-ref .agent-session-head a { color: var(--green); }
.agent-session-ref .agent-line { font-size: .78rem; }
.agent-session-ref .agent-session-lines { gap: 6px; }

.agent-ref-note {
  margin: 10px 0 0;
  padding-top: 9px;
  border-top: 1px dashed #B7D2C5;
  font-size: .76rem;
  color: var(--muted);
}
.agent-ref-note b { color: var(--green); }

.scan-gate {
  margin: 13px 0 0;
  padding: 12px 13px;
  border-radius: 9px;
  background: var(--amber-soft);
  color: #5C4A1E;
  font-size: .78rem;
}

/* The result is the thing a director forwards to their CTO. It has a URL —
   this is where the page finally admits it. */
.scan-share {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 12px;
  padding: 10px 12px;
  border: 1px dashed var(--line-strong);
  border-radius: 9px;
}

/* The two buttons travel together: wrapping them apart left one on each line,
   ragged against a truncated URL. */
.scan-share-actions { display: flex; gap: 8px; margin-left: auto; }

.scan-share-label {
  color: var(--quiet);
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.scan-share-url {
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: .72rem;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1 1 12ch;
}

.scan-share button,
.scan-share a.scan-share-open {
  min-height: 34px;
  padding: 7px 11px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  font-size: .75rem;
  font-weight: 760;
  text-decoration: none;
  transition: border-color .16s ease, color .16s ease;
}

.scan-share button:hover,
.scan-share a.scan-share-open:hover { border-color: var(--accent); color: var(--accent-dark); }
.scan-share button[data-copied="1"] { border-color: var(--green); color: var(--green); }

/* Compact lead capture, revealed under a finished result */
.scan-lead {
  margin-top: 14px;
  padding: 16px 16px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.scan-lead-head {
  margin: 0 0 4px;
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink);
}

/* Two scans in a row used to silently rewrite the hidden target. The form
   now says out loud which store the report will describe. */
.scan-lead-host {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 10px;
  padding: 4px 9px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--canvas);
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: .72rem;
}

.scan-lead-host b { color: var(--ink); font-weight: 700; }

.scan-lead-sub {
  margin: 0 0 12px;
  color: var(--muted);
  font-size: .79rem;
  line-height: 1.5;
}

.scan-lead-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  gap: 8px;
  margin-bottom: 10px;
}

.scan-lead-row input {
  min-width: 0;
  padding: 11px 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--ink);
  font: inherit;
  font-size: .88rem;
}

.scan-lead-row input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: transparent;
}

.scan-lead-row .btn { white-space: nowrap; }
.scan-lead .field-check { margin-bottom: 0; }
.scan-lead .field-check label { font-size: .78rem; }

@media (max-width: 620px) {
  .scan-lead-row { grid-template-columns: 1fr; }
  .scan-lead-row .btn { width: 100%; }
}

/* Proof band */
.proof-band {
  border-block: 1px solid var(--line);
  background: var(--surface);
}

.proof-name {
  margin: 0;
  padding: 16px 0 14px;
  border-bottom: 1px solid var(--line);
  font-size: .88rem;
  color: var(--muted);
}

.proof-name strong { color: var(--ink); }

.founder-role {
  margin-left: 8px;
  color: var(--muted);
  font-family: var(--font-body);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.proof-grid { display: grid; grid-template-columns: repeat(4, 1fr); }

.proof-grid > div {
  min-height: 104px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 20px 25px;
  border-left: 1px solid var(--line);
}

.proof-grid > div:first-child { border-left: 0; }
.proof-grid strong { font-size: 1.02rem; line-height: 1.25; }
.proof-grid span { margin-top: 4px; color: var(--quiet); font-size: .76rem; }

/* Outcomes */
.outcome-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 17px; }

/* The tag anchors to the bottom rather than floating mid-card, so the three
   cards read as one set instead of three differently-filled boxes. */
.outcome-card {
  min-height: 274px;
  display: flex;
  flex-direction: column;
  padding: 27px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.outcome-card:hover { transform: translateY(-3px); border-color: var(--line-strong); box-shadow: var(--shadow-sm); }

/* The three outcomes are parallel concerns, not steps — so the label names the
   checks that test each one rather than counting them off 01/02/03. Same
   identifiers the scanner reports and the sprint bills against. */
.outcome-checks {
  display: block;
  margin-bottom: 22px;
  color: var(--quiet);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .09em;
}

/* Two registers run through this page — the scanner's checks and the sprint's
   deliverables — and SEC-01 exists in both. The label says which one is
   being cited, so the identifier stays exact instead of decorative. */
.outcome-checks .register {
  margin-right: 7px;
  padding: 3px 7px;
  border-radius: 5px;
  background: var(--canvas);
  color: var(--muted);
  font-family: var(--font-body);
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.outcome-card p { margin: 12px 0 0; color: var(--muted); font-size: .9rem; }

.outcome-tag {
  display: inline-flex;
  align-self: flex-start;
  margin-top: auto;
  padding-top: 5px;
  padding: 5px 8px;
  border-radius: 7px;
  background: var(--canvas);
  color: var(--quiet);
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* The load section: two failure modes and the position between them. The
   third card is the only one that carries the accent — the page argues that
   both extremes are wrong, and the visual has to make the same argument
   before the copy is read. */
.load-section { border-block: 1px solid var(--line); background: var(--surface); }

.load-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 17px; }

.load-card {
  display: flex;
  flex-direction: column;
  padding: 27px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--canvas);
}

.load-card.is-third {
  border-color: var(--accent);
  background: var(--surface);
  box-shadow: 0 1px 0 var(--accent-soft), 0 10px 30px -22px var(--accent-dark);
}

.load-head {
  margin: 0 0 10px;
  color: var(--ink);
  font-size: .95rem;
  font-weight: 800;
  letter-spacing: -.01em;
}

.load-card.is-third .load-head { color: var(--accent-dark); }

.load-card p { margin: 0 0 18px; color: var(--muted); font-size: .9rem; }
.load-card .outcome-checks,
.load-card .outcome-tag { margin-top: auto; margin-bottom: 0; }

.load-note { margin: 24px 0 0; color: var(--quiet); font-size: .85rem; }
.load-note a { color: var(--accent-dark); }

/* Sprint */
.sprint-section { border-block: 1px solid var(--line); background: var(--surface); }

.sprint-layout {
  display: grid;
  grid-template-columns: minmax(280px, .69fr) minmax(0, 1.31fr);
  gap: clamp(48px, 7vw, 88px);
  align-items: start;
}

.sprint-intro { position: sticky; top: 108px; }
.sprint-intro .lede { max-width: 34ch; margin: 21px 0 0; }
.sprint-intro .btn { margin-top: 24px; }

.sprint-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
  margin-top: 25px;
}

.sprint-meta > span,
.timeline > span {
  padding: 13px;
  border-radius: 10px;
  background: var(--canvas);
}

.sprint-meta small,
.timeline small {
  display: block;
  color: var(--quiet);
  font-size: .7rem;
  font-weight: 790;
  text-transform: uppercase;
}

.sprint-meta strong { display: block; margin-top: 3px; font-size: .9rem; }
.sprint-slots { margin-top: 11px; }
.deliverables { margin: 0; padding: 0; border-top: 1px solid var(--line); list-style: none; }

.deliverables li {
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr) auto;
  gap: 15px;
  align-items: start;
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
}

.deliverable-index {
  padding-top: 3px;
  color: var(--accent-dark);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .05em;
  white-space: nowrap;
}

.deliverables p { max-width: 52ch; margin: 5px 0 0; color: var(--muted); font-size: .84rem; }

.deliverable-cond {
  margin-left: 6px;
  color: var(--muted);
  font-size: .72rem;
  font-style: normal;
  font-weight: 500;
  white-space: nowrap;
}

.artifact {
  padding: 5px 8px;
  border: 1px solid #F3CDBF;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-dark);
  font-size: .7rem;
  font-weight: 790;
  white-space: nowrap;
}

.timeline { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 23px; }
.timeline small { color: var(--green); }
.timeline strong { display: block; margin-top: 3px; font-size: .78rem; line-height: 1.25; }

/* No-replatforming system map */
.system-section { background: #EDF2EC; border-bottom: 1px solid #D6DFD7; }

.system-layout {
  display: grid;
  grid-template-columns: minmax(280px, .76fr) minmax(0, 1.24fr);
  gap: clamp(48px, 7vw, 88px);
  align-items: center;
}

.system-copy .lede { max-width: 39ch; margin: 22px 0 0; }

.system-note {
  max-width: 55ch;
  margin: 21px 0 0;
  padding-left: 15px;
  border-left: 3px solid var(--accent);
  color: var(--muted);
  font-size: .82rem;
}

/* A protocol name that carries its own source. Reads as body text until
   hovered — the terms sit inside sentences and would shred them as blue. */
.term {
  color: inherit;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-decoration-thickness: 1px;
  text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
  text-underline-offset: 3px;
}

.term:hover {
  color: var(--teal-ink);
  text-decoration-style: solid;
  text-decoration-color: currentColor;
}

.standards-grid .term:hover, .load-card .term:hover { color: inherit; }

.source-links { margin: 18px 0 0; font-size: .78rem; font-weight: 710; }
/* Named source links, not terms inside a sentence: read as links. */
.source-links .term { color: var(--teal-ink); text-decoration-style: solid; text-decoration-color: currentColor; }
.source-links a, .founder-links a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

.source-links, .founder-links { line-height: 1; }

.system-map {
  margin: 0;
  padding: 24px;
  border: 1px solid #CCD8CE;
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.map-surface,
.map-record {
  padding: 13px 16px;
  border-radius: 11px;
  text-align: center;
}

.map-surface { background: #E2F0EE; color: var(--teal-ink); }
.map-record { background: var(--green); color: var(--white); }

.map-surface small,
.map-record small {
  display: block;
  font-size: .7rem;
  font-weight: 820;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.map-surface strong,
.map-record strong { display: block; margin-top: 2px; font-size: .89rem; }
.map-record span { display: block; margin-top: 3px; color: rgba(255,255,255,.85); font-size: .72rem; }
.map-path { padding: 4px 0; color: var(--accent-dark); font-weight: 820; text-align: center; }

.standards-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }

.standards-grid > div {
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--canvas);
}

.standards-grid span { display: block; color: var(--accent-dark); font-size: .76rem; font-weight: 840; line-height: 1.3; }
.standards-grid p { margin: 7px 0 0; color: var(--muted); font-size: .72rem; line-height: 1.45; }
/* The acronym is now a definition inside the sentence, not the headline. It
   still has to be findable by someone scanning for it. */
.std-abbr { color: var(--ink); font-weight: 800; }
.std-abbr .term { color: inherit; }
.standards-grid .mcp span { color: var(--green); }

.standards-grid em {
  display: inline-block;
  margin-left: 3px;
  padding: 2px 4px;
  border-radius: 4px;
  background: var(--amber-soft);
  color: var(--amber);
  font-size: .7rem;
  font-style: normal;
  letter-spacing: .03em;
  text-transform: uppercase;
  vertical-align: 1px;
}

.connected-systems { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 8px; }

.connected-systems span {
  padding: 8px;
  border: 1px solid #CBD8CF;
  border-radius: 8px;
  background: #F1F5F1;
  color: var(--muted);
  font-size: .7rem;
  font-weight: 760;
  text-align: center;
}

.system-map figcaption {
  margin-top: 15px;
  padding-top: 13px;
  border-top: 1px solid var(--line);
  color: var(--quiet);
  font-size: .75rem;
  line-height: 1.5;
}

/* Worked example — the before/after band and the four work cards. The full
   check-by-check table lives on /case-study/<store>; this is the summary that
   has to survive being read in four seconds. */
.case-section .lede b { color: var(--ink); }

.case-band {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 14px;
  align-items: stretch;
  margin-top: 30px;
}

.case-figure {
  padding: 24px 26px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}
.case-figure.is-now { border-color: var(--green); background: var(--green-soft); }
.case-figure small { display: block; color: var(--quiet); font-size: .7rem; font-weight: 820; letter-spacing: .07em; text-transform: uppercase; }
.case-figure strong {
  display: block;
  margin-top: 12px;
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  font-weight: 820;
  letter-spacing: -.045em;
  line-height: 1;
}
.case-figure.is-now strong { color: var(--green); }
.case-figure span { display: block; margin-top: 9px; color: var(--muted); font-size: .8rem; line-height: 1.45; }

.case-arrow { display: flex; align-items: center; color: var(--accent-dark); font-size: 1.5rem; font-weight: 820; }

.case-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 11px; margin-top: 14px; }

.case-card {
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}
.case-card h3 { margin: 11px 0 0; font-size: .95rem; letter-spacing: -.015em; }
.case-card p { margin: 9px 0 0; color: var(--muted); font-size: .81rem; line-height: 1.5; }

.case-note { max-width: 82ch; margin: 20px 0 0; color: var(--muted); font-size: .88rem; }
.case-note b { color: var(--ink); }

/* Pricing and fit */
.pricing-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 11px; }

.price-card {
  min-height: 360px;
  display: flex;
  flex-direction: column;
  padding: 23px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.price-card.featured {
  border: 2px solid var(--accent);
  background: linear-gradient(180deg, var(--accent-soft), var(--surface) 48%);
  box-shadow: var(--shadow-sm);
}

.price-stage { color: var(--quiet); font-size: .7rem; font-weight: 820; letter-spacing: .07em; text-transform: uppercase; }
.price-card.featured .price-stage { color: var(--accent-dark); }

.price {
  margin-top: 17px;
  font-family: var(--font-body);
  font-size: clamp(1.55rem, 2.3vw, 2.05rem);
  font-weight: 820;
  letter-spacing: -.045em;
  line-height: 1;
}

.price-time { margin-top: 8px; color: var(--green); font-size: .75rem; font-weight: 760; }
.price-card p { margin: 20px 0 0; color: var(--muted); font-size: .82rem; }

/* Which card is yours, answered on the card. Four prices in a row with no
   routing made the reader do the qualifying, and a merchant told us so. Set
   on the ink rather than the muted grey: it is the first line read, not a
   footnote to the price. */
.price-who {
  margin-top: 16px !important;
  padding: 11px 13px;
  border-radius: var(--radius-sm);
  background: var(--canvas);
  color: var(--ink) !important;
  font-size: .79rem !important;
  line-height: 1.45;
}
.price-card.featured .price-who { background: var(--white); }
.price-who b { font-weight: 800; }

.price-inhouse {
  max-width: 82ch;
  margin: 20px 0 0;
  padding: 15px 18px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-sm);
  color: var(--muted);
  font-size: .86rem;
}
.price-inhouse b { color: var(--ink); }
.price-list { margin: 14px 0 0; padding-left: 1.1em; color: var(--muted); font-size: .78rem; line-height: 1.45; }
.price-list li + li { margin-top: 6px; }
/* 38px tall before: a primary path out of a pricing card, under the 44px
   floor on every phone. */
.price-card a {
  min-height: 44px;
  display: inline-flex;
  align-items: flex-end;
  margin-top: auto;
  padding-top: 20px;
  font-size: .8rem;
  font-weight: 760;
}

.fit-panel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  margin-top: 34px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--line);
}

.fit-panel > div { padding: 26px; background: var(--surface); }
.fit-panel .eyebrow { margin-bottom: 10px; }
.fit-list { display: grid; gap: 9px; margin: 17px 0 0; padding: 0; list-style: none; }

.fit-list li {
  position: relative;
  max-width: none;
  padding-left: 24px;
  color: var(--muted);
  font-size: .82rem;
}

.fit-list li::before { position: absolute; left: 1px; color: var(--green); content: "✓"; font-weight: 900; }
.fit-list.no li::before { color: var(--rust); content: "×"; }

/* Founder and review form */
/* #EAF0EA sat 1.5% from #system's #EDF2EC — close enough to read as drift.
   The ask gets a warm ground instead, in the same family as the packet's
   --sand: cool for the machine sections, warm where a person is involved. */
.review-section { border-block: 1px solid #DFD8CD; background: #EFEAE3; }

.review-layout {
  display: grid;
  grid-template-columns: minmax(290px, .78fr) minmax(0, 1.22fr);
  gap: clamp(48px, 7vw, 88px);
  align-items: start;
}

.founder-copy .lede { max-width: 37ch; margin: 22px 0 0; }

.founder-card {
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  margin-top: 27px;
  padding: 16px;
  border: 1px solid #DFD8CD;
  border-radius: 14px;
  background: rgba(250, 251, 248, .7);
}

.founder-mark {
  width: 78px;
  height: 78px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background:
    linear-gradient(145deg, transparent 45%, rgba(23, 151, 142, .12) 45% 55%, transparent 55%),
    var(--green-soft);
  color: var(--green);
  font-family: var(--font-display);
  font-size: 1.65rem;
  font-weight: 650;
}

.founder-card p { margin: 6px 0 0; color: var(--muted); font-size: .79rem; }
.founder-card .founder-links { font-size: .76rem; font-weight: 740; }

.review-promise { display: grid; gap: 9px; margin: 24px 0 0; padding: 0; list-style: none; }
.review-promise li { display: flex; gap: 9px; color: var(--muted); font-size: .82rem; }
.review-promise li::before { color: var(--green); content: "✓"; font-weight: 900; }

.review-form { padding: 28px; box-shadow: var(--shadow-sm); }

/* The conversion panel had no heading of its own and the three promises that
   answer a sceptic sat in the other column — on mobile, ~800px above the
   submit button they were meant to reassure. */
.review-form-head {
  margin: 0 0 4px;
  font-family: var(--font-display);
  font-size: 1.32rem;
  font-weight: 580;
  letter-spacing: -.03em;
  line-height: 1.35;
}

.review-form-sub {
  margin: 0 0 20px;
  color: var(--muted);
  font-size: .82rem;
}

.review-form .review-promise {
  gap: 7px;
  margin: 0 0 16px;
  padding: 13px 14px;
  border-radius: 10px;
  background: var(--canvas);
}

.review-form .review-promise li { font-size: .78rem; }
.field { margin-bottom: 15px; }

.field label {
  display: block;
  margin-bottom: 7px;
  color: var(--ink);
  font-size: .76rem;
  font-weight: 760;
}

.field .optional { color: var(--quiet); font-weight: 520; }

.field input[type="text"],
.field input[type="email"],
.field select,
.field textarea {
  min-height: 48px;
  padding: 11px 12px;
}

.field textarea { min-height: 86px; resize: vertical; }

.field select {
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--quiet) 50%),
    linear-gradient(135deg, var(--quiet) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

.field-help { margin: 5px 0 0; color: var(--quiet); font-size: .72rem; }

.form-details {
  margin: 5px 0 17px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--canvas);
}

.form-details summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 13px 14px;
  color: var(--ink);
  cursor: pointer;
  font-size: .78rem;
  font-weight: 760;
  list-style: none;
}

/* Without a marker this block read as a disabled grey panel — and it is where
   an agency finds the only control that routes their lead correctly. */
.form-details summary::-webkit-details-marker { display: none; }

.form-details summary::after {
  width: 25px;
  height: 25px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent-dark);
  content: "+";
  font-size: 1rem;
  font-weight: 700;
  flex: 0 0 auto;
}

.form-details[open] summary::after { content: "−"; }
.form-details summary > span:first-of-type { margin-left: auto; }

.form-details summary span { color: var(--quiet); font-size: .7rem; font-weight: 600; }
.form-details-body { padding: 2px 14px 1px; border-top: 1px solid var(--line); }
.form-details-body .field:first-child { margin-top: 14px; }

.field-check { margin-bottom: 12px; }

.field-check label {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-bottom: 0;
  min-height: 44px;
  padding-block: 10px;
  color: var(--muted);
  font-size: .78rem;
  font-weight: 540;
}

/* 17px box inside a 44px tappable label — the control stays visually quiet
   without making consent a precision task on a phone. */
.field-check input[type="checkbox"] {
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--green);
  flex: 0 0 auto;
}

/* The consent label is already 44px; the link inside it gets its own hit
   area through padding that is cancelled by an equal negative margin, so the
   sentence keeps its rhythm. */
.field-check a { display: inline-block; padding-block: 14px; margin-block: -14px; }

.privacy-check { margin: 0 0 16px; }
.hp-field { position: absolute !important; top: -9999px; left: -9999px; }
.form-legal { margin: 12px 0 0; color: var(--quiet); font-size: .72rem; text-align: center; }
.form-error { margin: 6px 0 0; color: var(--rust); font-size: .75rem; line-height: 1.45; }

.form-error-summary {
  margin: 0 0 17px;
  padding: 11px 13px;
  border-left: 3px solid var(--rust);
  border-radius: 7px;
  background: var(--rust-soft);
}

/* Agency */
.agency-section { padding-block: 72px; }

.agency-panel {
  display: grid;
  grid-template-columns: minmax(280px, .8fr) minmax(0, 1.2fr);
  gap: 60px;
  padding: 38px;
  border: 1px solid #F3CDBF;
  border-radius: var(--radius-lg);
  background: var(--accent-soft);
}

.agency-panel .lede { max-width: 49ch; margin-bottom: 0; }
.agency-list { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 22px; margin: 20px 0; padding: 0; list-style: none; }
.agency-list li { position: relative; padding-left: 20px; color: var(--muted); font-size: .82rem; }
.agency-list li::before { position: absolute; left: 0; color: var(--accent-dark); content: "→"; font-weight: 820; }

/* FAQ */
.faq-section { border-top: 1px solid var(--line); }

.faq-layout {
  display: grid;
  grid-template-columns: minmax(260px, .62fr) minmax(0, 1.38fr);
  gap: clamp(48px, 8vw, 105px);
  align-items: start;
}

/* The heading column used to leave ~450px of dead ground beside the list;
   it now travels with the answers, the way the sprint intro does. */
.faq-layout > div:first-child { position: sticky; top: 112px; }
.faq-list { border-top: 1px solid var(--line-strong); }
.faq-item { border-bottom: 1px solid var(--line-strong); }

.faq-item summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  padding: 19px 0;
  color: var(--ink);
  cursor: pointer;
  font-size: .9rem;
  font-weight: 750;
  line-height: 1.35;
  list-style: none;
}

.faq-item summary::-webkit-details-marker { display: none; }

.faq-item summary::after {
  width: 27px;
  height: 27px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent-dark);
  content: "+";
  font-size: 1.05rem;
}

.faq-item[open] summary::after { content: "−"; }
.faq-item p { max-width: 66ch; margin: 0; padding: 0 45px 20px 0; color: var(--muted); font-size: .85rem; }

/* Legal and acknowledgement pages */
.support-main { min-height: 65vh; }
.support-page { padding-top: 76px; padding-bottom: 94px; }
.support-heading { margin-bottom: 32px; }
.support-heading h1 { max-width: 15ch; }
.support-meta { max-width: 78ch; margin-top: 17px; }
.support-copy { max-width: 900px; padding: 36px 38px; box-shadow: var(--shadow-sm); }
.support-block { scroll-margin-top: 96px; }
.support-block + .support-block { margin-top: 27px; padding-top: 27px; border-top: 1px solid var(--line); }
.support-block h2 { max-width: none; margin-bottom: 11px; font-size: clamp(1.55rem, 2.5vw, 2rem); letter-spacing: -.025em; }
.support-block p { margin-bottom: 0; color: var(--muted); font-size: .92rem; }

.ack-section { min-height: 68vh; align-items: start; }
.ack-panel { max-width: 820px; padding: 45px; box-shadow: var(--shadow-sm); }
.ack-panel h1 { margin-bottom: 18px; }
.ack-status { display: flex; align-items: center; gap: 9px; margin: 0 0 25px; color: var(--green); font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.ack-status .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px var(--green-soft); }
.ack-actions { display: flex; gap: 11px; flex-wrap: wrap; margin: 25px 0 20px; }
.ack-note { max-width: 70ch; margin-bottom: 0; }

/* Footer */
.site-footer { border-top: 1px solid var(--line); background: var(--surface); }
.site-footer .sec { padding-block: 64px 44px; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 42px; }
.site-footer .wordmark { margin: 0 0 12px; }
.footer-label { margin: 0 0 10px; color: var(--quiet); font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.footer-lines { margin: 0; color: var(--muted); font-size: .82rem; line-height: 1.5; }
.footer-lines a { display: inline-block; padding-block: 12px; text-decoration: none; }
.footer-meta { display: flex; gap: 18px 25px; flex-wrap: wrap; margin-top: 35px; padding-top: 17px; border-top: 1px solid var(--line); }
.footer-meta .stat { color: var(--quiet); font-size: .7rem; font-weight: 720; letter-spacing: .05em; text-transform: uppercase; }
.footer-meta .stat b { color: var(--green); }
.disclaimer { max-width: none; margin: 15px 0 0; color: var(--quiet); font-size: .72rem; line-height: 1.55; }

/* Progressive enhancement: critical hero content is never delayed. */
.rv { opacity: 1; transform: none; }

.has-js .rv:not(.hero .rv) {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .48s ease, transform .48s ease;
}

/* Must repeat the :not() — a :not() takes the specificity of its most specific
   argument, so the hiding rule above scores (0,4,0). Plain `.has-js .rv.in` is
   (0,3,0) and loses, which left every revealed element permanently invisible. */
.has-js .rv.in:not(.hero .rv) { opacity: 1; transform: none; }
.scan-line.reveal { animation: line-in .28s ease both; }

@keyframes line-in {
  from { opacity: 0; transform: translateX(-6px); }
  to { opacity: 1; transform: none; }
}

@media (max-width: 1060px) {
  .desktop-nav { gap: 17px; }
  .hero-layout { grid-template-columns: minmax(0, .86fr) minmax(450px, 1.14fr); gap: 34px; }
  h1 { font-size: clamp(2.6rem, 4.3vw, 3.2rem); }
  .pricing-grid { grid-template-columns: 1fr 1fr; }
  .case-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
  .desktop-nav, .btn-header { display: none; }
  .mobile-nav { display: block; }
  .hero { padding-top: 50px; }
  .hero-layout { grid-template-columns: 1fr; }
  .hero-copy { max-width: 720px; padding-top: 0; }
  .hero-copy h1 { max-width: 14ch; }
  .scanner { max-width: 720px; margin-top: 8px; }
  #field { right: -25%; width: 110%; height: 560px; opacity: 0; }
  #field.on { opacity: .045; }
  .section { padding-block: 78px; }
  .section-head,
  .sprint-layout,
  .system-layout,
  .review-layout,
  .agency-panel,
  .faq-layout { grid-template-columns: 1fr; gap: 30px; }
  .section-head .lede { justify-self: start; }
  .sprint-intro { position: static; }
  .sprint-intro .lede,
  .system-copy .lede,
  .founder-copy .lede { max-width: 52ch; }
  .outcome-grid { grid-template-columns: 1fr; }
  .load-grid { grid-template-columns: 1fr; }
  .outcome-card { min-height: auto; }
  .proof-grid { grid-template-columns: 1fr 1fr; }
  .proof-grid > div:nth-child(3) { border-left: 0; }
  .proof-grid > div:nth-child(n+3) { border-top: 1px solid var(--line); }
  .agency-panel { padding: 32px; }
  .sec { grid-template-columns: 1fr; gap: 20px; }
  .support-page { padding-top: 58px; }
}

@media (max-width: 620px) {
  body { font-size: 16px; }
  .wrap, .sec { width: min(calc(100% - 34px), var(--max)); }
  .header-inner { min-height: 64px; }
  .hero { padding-block: 40px 36px; }
  /* 12vw set the headline in five lines with "discovery" orphaned; 10vw
     sets it in four and gives the scanner ~50px more of the first screen. */
  h1 { font-size: clamp(2.45rem, 10vw, 3.3rem); line-height: 1.16; }
  h2 { font-size: clamp(2.15rem, 10vw, 2.85rem); }
  .hero-copy .lede { margin-top: 20px; }
  .hero-facts { margin-top: 18px; }
  .hero-proof { margin-top: 17px; }
  .hero-link { margin-top: 17px; }
  /* The store URL input used to sit ~857px down, off the first screen on a
     390×844 phone. Credentials and the secondary link move below the
     scanner so the page's one action is reachable without a scroll. */
  .hero-layout { gap: 0; }
  .hero-copy { display: contents; }
  .hero-copy > * { order: 1; }
  .scanner { order: 2; margin-top: 20px; }
  .hero-proof { order: 3; margin-top: 20px; }
  .hero-link { order: 4; margin-top: 4px; }
  .hero-sequence { order: 5; margin-top: 22px; }

  .scan-head, .scan-body { padding: 17px; }
  .scan-row { grid-template-columns: 1fr; }
  .scan-row .btn { width: 100%; }
  /* The example packet used to sit between the submit button and the result,
     so the first thing scrolled past after tapping scan was an illustration
     a first-timer can mistake for a finding. */
  .scan-body { display: flex; flex-direction: column; }
  .scan-body > * { order: 1; }
  .scan-panel { order: 2; }
  .commerce-packet { order: 3; margin-top: 20px; padding: 13px; }
  /* The speaker rail costs too much width on a phone: labels move above
     their bubbles. */
  .exchange-row { grid-template-columns: 1fr; gap: 3px; }
  .exchange-who { padding-top: 0; text-align: left; }
  .scan-line { grid-template-columns: 72px minmax(0, 1fr); gap: 8px; }
  .scan-line .check-glyph { grid-column: 2; }
  .section { padding-block: 64px; }
  .section-head { margin-bottom: 31px; }
  .proof-grid { grid-template-columns: 1fr; }
  .proof-grid > div { min-height: 84px; padding-inline: 18px; border-top: 1px solid var(--line); border-left: 0; }
  .proof-grid > div:first-child { border-top: 0; }
  .outcome-card { padding: 22px; }
  .sprint-meta,
  .timeline,
  .case-grid,
  .case-band,
  .pricing-grid,
  .fit-panel,
  .standards-grid,
  .connected-systems,
  .agency-list { grid-template-columns: 1fr; }
  /* Stacked, the arrow stops pointing across and starts pointing down. */
  .case-arrow { justify-content: center; transform: rotate(90deg); }
  /* PROTO-01 and ROAD-01 are eight characters: 40px could not hold them and
     the ID ran into the heading beside it. */
  .deliverables li { grid-template-columns: 62px minmax(0, 1fr); gap: 10px; }
  .deliverable-index { letter-spacing: 0; }
  .artifact { grid-column: 2; justify-self: start; }
  .price-card { min-height: auto; }
  .fit-panel > div { padding: 22px; }
  .founder-card { grid-template-columns: 64px minmax(0, 1fr); }
  .founder-mark { width: 64px; height: 64px; }
  .review-form { padding: 21px; }
  .agency-panel { padding: 23px; }
  .support-copy, .ack-panel { padding: 25px 22px; }
  .ack-actions { display: grid; }
  .ack-actions .btn { width: 100%; }
  .footer-grid { grid-template-columns: 1fr; gap: 25px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  /* Same specificity trap as above — must out-score .has-js .rv:not(.hero .rv). */
  .has-js .rv:not(.hero .rv) { opacity: 1; transform: none; transition: none; }
  .scan-line.reveal, .agent-line.reveal { animation: none; }
  #field { transition: none; }
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ── Sprint purchase + pre-sale assistant ──────────────────────────────── */
.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.buy-form { margin: 0; }
.sprint-intro .buy-form { margin-top: 26px; }

/* Same affordance as .price-card a, but the purchase is a POST. */
.price-buy {
  min-height: 44px;
  display: inline-flex;
  align-items: flex-end;
  margin-top: auto;
  padding: 20px 0 0;
  border: 0;
  background: none;
  cursor: pointer;
  font: inherit;
  font-size: .8rem;
  font-weight: 760;
  color: var(--accent-dark);
}
.price-buy:hover { color: var(--accent); }

.chat-open-inline {
  margin-top: 30px;
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: var(--surface);
  padding: 10px 16px;
  font: inherit; font-size: .9rem; font-weight: 600;
  color: var(--accent-dark);
  cursor: pointer;
}
.chat-open-inline:hover { border-color: var(--accent); color: var(--accent); }

/* Objection pages under the FAQ heading: the long answers a buyer reads
   before committing, listed from resources/docs/answers. */
.faq-answers { margin-top: 28px; }
.faq-answers .micro { margin: 0 0 8px; }
.faq-answers ul { margin: 0; padding: 0; list-style: none; }
.faq-answers li { margin: 0 0 6px; }
.faq-answers a {
  font-size: .92rem; font-weight: 600;
  color: var(--accent-dark);
  text-decoration: underline; text-underline-offset: 3px;
}
.faq-answers a:hover { color: var(--accent); }

/* Floating shell (sagetube.ai-style): bubble bottom-right, panel above it.
   Everything inside the panel reuses the original chat-* styles. */
.chat-float {
  position: fixed;
  right: clamp(14px, 2.5vw, 24px);
  bottom: clamp(14px, 2.5vw, 24px);
  z-index: 90;
  display: flex; flex-direction: column; align-items: flex-end; gap: 12px;
}
.chat-bubble {
  width: 54px; height: 54px;
  border: 0; border-radius: 50%;
  background: var(--accent); color: #fff;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 12px 28px -12px rgba(0,0,0,.45);
  transition: background .15s ease;
}
.chat-bubble:hover { background: var(--accent-dark); }
.chat-bubble .chat-bubble-close { display: none; }
.chat-float.is-open .chat-bubble .chat-bubble-open { display: none; }
.chat-float.is-open .chat-bubble .chat-bubble-close { display: block; }
.chat-panel {
  width: min(380px, calc(100vw - 28px));
  max-height: min(560px, calc(100dvh - 110px));
  display: flex; flex-direction: column;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: var(--surface);
  padding: 16px;
  overflow-y: auto;
  box-shadow: 0 26px 60px -24px rgba(0,0,0,.35);
}
.chat-panel[hidden] { display: none; }
.chat-panel .chat-log { flex: 1; max-height: none; min-height: 120px; }
.chat-close {
  margin-left: auto;
  border: 0; background: none; color: var(--quiet);
  font-size: 1.25rem; line-height: 1; cursor: pointer; padding: 0 2px;
}
.chat-close:hover { color: var(--ink); }
.chat-head {
  display: flex; align-items: center; gap: 8px;
  margin: 0 0 12px; font-size: .72rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--quiet);
}
.chat-head .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px var(--green-soft); }
.chat-log { display: flex; flex-direction: column; gap: 10px; max-height: 320px; overflow-y: auto; }
.chat-msg {
  margin: 0; padding: 10px 12px; border-radius: 8px;
  font-size: .85rem; line-height: 1.5; color: var(--ink);
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.chat-msg.from-assistant { background: var(--canvas); align-self: flex-start; max-width: 92%; }
.chat-msg.from-user { background: var(--accent-soft); align-self: flex-end; max-width: 85%; }
.chat-msg.is-error { color: var(--rust); background: var(--rust-soft); }
.chat-msg.is-pending { color: var(--quiet); }
.chat-form { display: flex; gap: 8px; margin-top: 12px; }
.chat-form input {
  flex: 1; min-width: 0; min-height: 44px; padding: 8px 12px;
  border: 1px solid var(--line-strong); border-radius: 8px;
  background: var(--white); font: inherit; font-size: .85rem; color: var(--ink);
}
.chat-form input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.chat-form button {
  min-width: 44px; min-height: 44px; border: 0; border-radius: 8px;
  background: var(--accent); color: var(--white); font-size: 1rem;
  cursor: pointer;
}
.chat-form button:hover { background: var(--accent-dark); }
.chat-form button:disabled { opacity: .5; cursor: default; }

/* ── Chat escalation: assistant → real ticket ──────────────────────────── */
.chat-escalate { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 10px; }
.chat-escalate-open {
  border: 0; background: none; padding: 4px 0; min-height: 32px;
  font: inherit; font-size: .78rem; font-weight: 700; color: var(--teal-ink);
  cursor: pointer;
}
.chat-escalate-open:hover { color: var(--accent-dark); }
.chat-escalate-form { display: grid; gap: 8px; margin-top: 8px; }
.chat-escalate-form.is-hidden { display: none; }
.chat-escalate-head { margin: 0; font-size: .78rem; color: var(--quiet); }
.chat-escalate-form input[type="text"],
.chat-escalate-form input[type="email"],
.chat-escalate-form textarea {
  width: 100%; min-height: 44px; padding: 8px 12px;
  border: 1px solid var(--line-strong); border-radius: 8px;
  background: var(--white); font: inherit; font-size: .85rem; color: var(--ink);
}
.chat-escalate-form textarea { min-height: 72px; resize: vertical; }
.chat-escalate-form input:focus, .chat-escalate-form textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.chat-escalate-form .btn { justify-self: start; }

/* ── Customer ticket thread (/support/t/…) ─────────────────────────────── */
.ticket-flash {
  margin: 0 0 18px; padding: 10px 14px; border-radius: 8px;
  background: var(--green-soft); color: var(--green); font-size: .85rem; font-weight: 700;
}
.ticket-thread { display: flex; flex-direction: column; gap: 12px; margin-bottom: 28px; }
.ticket-msg { margin: 0; padding: 14px 16px; border-radius: 10px; border: 1px solid var(--line); }
.ticket-msg.from-customer { background: var(--surface); }
.ticket-msg.from-agent { background: var(--accent-soft); border-color: var(--accent-soft); }
.ticket-msg p:last-child { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font-size: .9rem; line-height: 1.6; }
.ticket-who { margin: 0 0 6px; font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; color: var(--quiet); }
.ticket-reply { display: grid; gap: 10px; padding: 20px; }
.ticket-reply label { font-size: .8rem; font-weight: 760; color: var(--ink); }
.ticket-reply textarea {
  width: 100%; padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: 8px;
  background: var(--white); font: inherit; font-size: .88rem; color: var(--ink); resize: vertical;
}
.ticket-reply textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.ticket-reply .btn { justify-self: start; }
.ticket-error { color: var(--rust); }

/* ── Magento module plans (#module-plans) ──────────────────────────────── */
/* Released module builds link /#scanner; the scanner section is #scan.
   The alias is a zero-size scroll target sitting at the panel's top edge. */
.anchor-alias { position: absolute; width: 0; height: 0; }

.scan-referral-pricing { display: block; margin-top: 6px; font-weight: 760; }

.module-plans-referral {
  margin: 0 0 22px;
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--green);
  border-radius: 10px;
  background: #F6FAF6;
  color: var(--ink);
  font-size: .82rem;
  line-height: 1.55;
}

.module-plans-referral b { font-weight: 600; white-space: nowrap; }

.module-plans-grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 11px;
  max-width: 900px;
}

.module-plan-list { display: grid; gap: 9px; margin: 20px 0 0; padding: 0; list-style: none; }

.module-plan-list li {
  position: relative;
  max-width: none;
  padding-left: 24px;
  color: var(--muted);
  font-size: .82rem;
}

.module-plan-list li::before { position: absolute; left: 1px; color: var(--green); content: "✓"; font-weight: 900; }

.module-plans-grid .micro { margin-top: 12px; color: var(--quiet); font-size: .72rem; line-height: 1.55; }

.module-plan-notes { display: grid; gap: 7px; max-width: 900px; margin-top: 22px; }
.module-plan-notes p { max-width: none; margin: 0; color: var(--quiet); font-size: .78rem; line-height: 1.55; }
.module-plan-notes b { color: var(--muted); }

@media (max-width: 860px) {
  .module-plans-grid { grid-template-columns: 1fr; }
}

/* Module Pro success page: the key is the deliverable, so it is set to be
   read aloud and retyped — grouped blocks, large, selectable in one go. */
.license-keys { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 10px; }
.license-key {
  display: block;
  padding: 14px 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-2, rgba(255, 255, 255, .04));
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: .06em;
  user-select: all;
  overflow-wrap: anywhere;
}

/* Pro purchase inside the featured plan card: quantity + one primary button.
   The select reuses the form-field look; the discount tier shows in the
   option label, so the price on Stripe's form never surprises an agency. */
.module-buy-form { display: flex; flex-wrap: wrap; align-items: stretch; gap: 10px; margin-top: auto; padding-top: 22px; }
.module-qty { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: .78rem; font-weight: 700; }
.module-qty select {
  min-height: 44px;
  padding: 0 32px 0 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink, inherit);
  font-size: .85rem;
  font-weight: 700;
}
.module-qty select:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.module-buy-form .module-pro-cta { flex: 1 1 auto; justify-content: center; min-height: 44px; }

/* Renewal page: the licence's facts, then two terms as radio cards. */
.renew-facts { display: grid; gap: 8px; margin: 22px 0 0; }
.renew-facts div { display: grid; grid-template-columns: 170px 1fr; gap: 12px; font-size: .88rem; }
.renew-facts dt { color: var(--quiet); font-weight: 700; }
.renew-facts dd { margin: 0; }
.renew-form { margin-top: 22px; }
.renew-terms { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.renew-term { display: grid; gap: 4px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; }
.renew-term:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.renew-term input { position: absolute; opacity: 0; }
.renew-term-name { font-size: .8rem; font-weight: 760; color: var(--quiet); text-transform: uppercase; letter-spacing: .05em; }
.renew-term-price { font-size: 1.45rem; font-weight: 820; letter-spacing: -.03em; }
.renew-form .field { display: grid; gap: 6px; }
.renew-form .field span { font-size: .8rem; font-weight: 700; color: var(--quiet); }
.renew-form .field input { padding: 12px 14px; }