/* ==========================================================================
   Leader pages: Home, Pricing, Why AEO and How we score (code4x-visual-system §4 F and §5a). Scoped
   by <main class="home">; loaded only by pages that list it in "styles", so
   other inner pages are unchanged.
   Few words, light display weight, one object per screen, two-tone
   statements, generous black space.
   ========================================================================== */
/* One inset from the rails for every hero and section on leader pages, so
   all text starts on the same line (owner, Oct 3, 2026). Section .wrap
   matches the rail box, then steps in by the inset. */
.home { --inset: clamp(24px, 5vw, 64px); }
.home > section:not(.h-stage) > .wrap { max-width: calc(1264px + 2 * var(--gutter)); padding-inline: calc(var(--gutter) + var(--inset)); }
.home h1, .home .big { font-weight: 600; letter-spacing: -.05em; line-height: 1; }
.center { text-align: center; margin-left: auto; margin-right: auto; }
.mono-i { font-family: var(--mono); }

/* --------------------------------------------- Hero: rails, sentence, sphere */
.h-stage { border-bottom: 1px solid var(--rule); overflow-x: clip; }
/* The rails: hairlines at the edges of the content box, as on stripe.com. */
.h-frame { border-left: 1px solid var(--rule); border-right: 1px solid var(--rule); }
.h-hero-grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: stretch; min-height: clamp(520px, 74vh, 640px); }
.h-copy { align-self: center; padding: clamp(64px, 9vw, 120px) 24px clamp(64px, 9vw, 120px) var(--inset); }
.home .h-sentence {
  max-width: 26ch; font-size: clamp(1.625rem, 2.4vw, 2.25rem); font-weight: 450;
  letter-spacing: -.035em; line-height: 1.14;
}
.h-sentence span { color: var(--muted); }
/* Keyword tags above the H1: plain words split by Signal dots. */
.h-tags {
  display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-bottom: 24px;
  padding: 6px 14px; border: 1px solid var(--rule-strong); border-radius: 999px;
  font-size: var(--t-xs); color: var(--ink); background: rgba(255, 255, 255, .02);
}
.h-tags i { width: 4px; height: 4px; border-radius: 50%; background: var(--signal); }
.h-acts { margin-top: 40px; display: flex; flex-wrap: wrap; gap: 12px; }
.h-acts .btn { padding: 13px 22px; font-size: var(--t-s); }
.h-art { position: relative; min-height: 420px; }
.h-art canvas { position: absolute; inset: 0; width: 100%; height: 100%; cursor: crosshair; }
.h-band { border-top: 1px solid var(--rule); }
.h-band-in { padding: 24px clamp(16px, 3vw, 32px); }
@media (max-width: 900px) {
  .h-hero-grid { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .h-copy { padding: 64px var(--inset) 8px; }
  .h-art { min-height: 340px; }
}

/* ------------------------------------- Client logo row (placeholders for now) */
/* A loop that drifts left (site.js [data-marquee]); stops while hovered or
   while the visitor scrolls or drags it, and drifts again when they stop. */
.logo-marquee {
  display: flex; overflow-x: auto; scrollbar-width: none; scroll-behavior: auto; cursor: grab; user-select: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.logo-marquee::-webkit-scrollbar { display: none; }
.logo-marquee.is-dragging { cursor: grabbing; }
.logo-marquee:focus-visible { outline: 2px solid var(--signal); outline-offset: 4px; }
.logo-row { list-style: none; display: flex; flex: none; gap: 16px; padding-right: 16px; }
.logo-ph {
  flex: none; width: 184px; height: 64px; border: 1.5px dotted rgba(255, 255, 255, .5); color: var(--muted); font-size: .85rem;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  transition: border-color 200ms var(--ease), color 200ms var(--ease), background-color 200ms var(--ease), opacity 200ms var(--ease);
}
.logo-ph small { font: 400 .6rem var(--mono); opacity: .75; }
.logo-ph:hover { border-color: #fff; color: var(--ink); background: rgba(255, 255, 255, .05); }
.logo-marquee:has(.logo-ph:hover) .logo-ph:not(:hover) { opacity: .45; }
@media (max-width: 760px) { .logo-ph { width: 140px; } }

/* ------------------- Story rows: big H2, product frame, side statement + links */
.story { padding: clamp(56px, 7vw, 96px) 0; }
.big { font-size: clamp(2.25rem, 4.6vw, 4rem); max-width: 18ch; }
.story-lede { margin-top: 22px; color: var(--muted); font-size: var(--t-m); max-width: 58ch; }
.story-row {
  display: grid; align-items: center; gap: clamp(32px, 4vw, 64px); margin-top: clamp(40px, 5vw, 64px);
  grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
}
.story--rev .story-row { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
@media (min-width: 961px) { .story--rev .big { margin-left: calc(100% / 3 + 22px); max-width: 15ch; } }
@media (max-width: 960px) {
  .story-row, .story--rev .story-row { grid-template-columns: minmax(0, 1fr); }
  .story--rev .story-side { order: 2; }
}
.statement { font: 500 clamp(1.25rem, 1.7vw, 1.5rem)/1.32 var(--display); letter-spacing: -.015em; }
.statement span { color: var(--muted); }
/* Owner decision, Oct 3, 2026: list labels in capitals. */
.feat-label { margin-top: 36px; font-size: var(--t-xs); font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.feat-list { list-style: none; margin-top: 12px; border-top: 1px solid var(--rule); }
.feat-list li { padding: 12px 0; border-bottom: 1px solid var(--rule); }
.feat-list a { color: var(--ink); text-decoration: none; font-weight: 600; }
.feat-list a:hover { color: var(--signal); }
.feat-list small { display: block; margin-top: 2px; color: var(--muted); font-size: var(--t-s); }

.frame { margin: 0; border: 1px solid rgba(255, 255, 255, .12); background: var(--surface); }
.frame-bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--rule); font-size: var(--t-s); }
.frame--fade { -webkit-mask-image: linear-gradient(#000 80%, transparent); mask-image: linear-gradient(#000 80%, transparent); }

.seg { display: inline-flex; border: 1px solid var(--rule-strong); }
.seg button { font: 500 .875rem/1 var(--body); background: transparent; color: var(--muted); border: 0; padding: 9px 12px; cursor: pointer; transition: background var(--d-2) var(--ease), color var(--d-2) var(--ease); }
.seg button + button { border-left: 1px solid var(--rule-strong); }
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.page-fig--frame { border: 0; background: transparent; }
.page-fig--frame .page-fig-body { padding: clamp(18px, 3vw, 32px); gap: 14px; }
.page-fig--frame .pf-h { font-size: clamp(1.25rem, 2.2vw, 1.875rem); }
.page-fig--frame .pf-plan { min-height: 112px; }

.mini-report { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
.mini-score { padding: 24px; border-right: 1px solid var(--rule); }
.mini-score .score b { font-size: var(--t-3xl); }
.mini-score .lbars { margin-top: 18px; }
.mini-findings { list-style: none; padding: 8px 24px 24px; }
.mini-findings li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: start; padding: 14px 0; border-bottom: 1px solid var(--rule); }
.mini-findings b { display: block; font-size: var(--t-s); font-weight: 600; }
.mini-findings small { display: block; margin-top: 4px; color: var(--muted); font-size: var(--t-xs); }
@media (max-width: 640px) {
  .mini-report { grid-template-columns: minmax(0, 1fr); }
  .mini-score { border-right: 0; border-bottom: 1px solid var(--rule); }
}

/* ------------------------------------ State of the web: 3 big numbers + a bar */
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: clamp(40px, 5vw, 64px); border-top: 1px solid var(--rule); }
.stat { padding: 28px 24px 8px 0; }
.stat + .stat { padding-left: 24px; border-left: 1px solid var(--rule); }
.stat b { display: block; font: 500 clamp(3rem, 6.4vw, 5.5rem)/1 var(--display); letter-spacing: -.045em; font-variant-numeric: tabular-nums; }
.stat b small { font-size: .32em; color: var(--muted); letter-spacing: 0; margin-left: 4px; }
.stat > span { display: block; margin-top: 12px; color: var(--muted); }
.stats-bar { grid-column: 1 / -1; margin-top: 40px; }
.stats-bar .stackbar { height: 10px; margin-top: 0; }
.stats-legend { margin-top: 12px; font-size: var(--t-s); color: var(--muted); display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.stats-legend .k { width: 10px; height: 10px; display: inline-block; margin-left: 12px; }
.stats-legend .k:first-child { margin-left: 0; }
.k-fail { background: var(--fail); }
.k-partial { background: var(--partial); }
.k-pass { background: var(--pass); }
@media (max-width: 760px) {
  .stats { grid-template-columns: minmax(0, 1fr); }
  .stat + .stat { padding-left: 0; border-left: 0; border-top: 1px solid var(--rule); }
}

/* ---------------------------------------------- One large two-tone statement */
.say { font: 500 clamp(1.75rem, 3.6vw, 3rem)/1.15 var(--display); letter-spacing: -.03em; max-width: 26ch; }
.say span { color: var(--muted); }
.say-foot { margin-top: 28px; color: var(--muted); font-size: var(--t-m); }

/* ---------------------------------- Ways in: 2x2 cells, each with a line drawing */
.ways { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: clamp(32px, 4vw, 48px); }
.way { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); min-height: 250px; border: 1px solid rgba(255, 255, 255, .12); background: var(--surface); transition: border-color var(--d-2) var(--ease); }
.way:hover { border-color: rgba(255, 255, 255, .3); }
.way-txt { padding: 28px; display: flex; flex-direction: column; }
.way-txt h3 { font-size: 1.375rem; font-weight: 500; }
.way-txt p { margin-top: 10px; color: var(--muted); font-size: var(--t-s); }
.way-txt .way-price { margin-top: auto; padding-top: 20px; color: var(--ink); font: 500 1.375rem var(--display); }
.way-price small { font: 400 var(--t-xs) var(--body); color: var(--muted); margin: 0 4px; }
.way-vis { display: flex; align-items: center; justify-content: center; padding: 20px; border-left: 1px solid var(--rule); background: var(--paper); }
.way-vis svg { width: 100%; max-width: 200px; }
@media (max-width: 860px) { .ways { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 520px) {
  .way { grid-template-columns: minmax(0, 1fr); }
  .way-vis { border-left: 0; border-top: 1px solid var(--rule); min-height: 140px; }
}

/* ------------------------------------------------------------------ Closing */
.h-close .big { margin-inline: auto; }
.h-form { margin: 40px auto 0; }
.h-console { max-width: 640px; margin: 48px auto 0; }

/* ------------------------------------------- Example page in the story frame
   A fuller pricing page (browser bar, site header, hero, toggle, plan cards)
   so the three readings (person / Google / crawler) read as a real site.
   Steps come from data-step on #shift-fig. */
.mp-chrome { display: flex; align-items: center; gap: 7px; padding: 10px 14px; border-bottom: 1px solid var(--rule); background: #0D1216; }
.mp-chrome i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, .16); }
.mp-url { margin: 0 auto; padding: 4px 14px; border-radius: 999px; background: rgba(255, 255, 255, .06); font: 400 .72rem var(--mono); color: var(--muted); }
.mp-site { background: #0E1418; }
.mp-nav { display: flex; align-items: center; gap: 18px; padding: 12px 22px; border-bottom: 1px solid var(--rule); font-size: .78rem; color: var(--muted); }
.mp-logo { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); font-weight: 600; }
.mp-logo i { width: 14px; height: 14px; border-radius: 4px; background: var(--ink); }
.mp-links { display: inline-flex; gap: 16px; }
.mp-sp { flex: 1; }
.mp-cta { padding: 5px 10px; border-radius: 8px; background: var(--ink); color: var(--paper); font-weight: 600; }
.mp-hero { padding: 26px 22px 6px; text-align: center; }
.mp-kicker { margin: 0 auto; font-size: .72rem; color: var(--muted); }
.mp-h { position: relative; display: inline-block; margin-top: 6px; font: 600 clamp(1.25rem, 2.1vw, 1.75rem)/1.15 var(--display); letter-spacing: -.03em; }
.mp-sub { margin: 6px auto 0; font-size: .82rem; color: var(--muted); }
.mp-toggle { display: inline-flex; margin: 14px auto 0; padding: 3px; border: 1px solid var(--rule-strong); border-radius: 999px; font-size: .72rem; color: var(--muted); }
.mp-toggle span { padding: 4px 11px; border-radius: 999px; }
.mp-toggle .on { background: var(--ink); color: var(--paper); }
.mp-plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 18px 22px 22px; }
.mp-plan {
  position: relative; display: flex; flex-direction: column; gap: 8px; min-height: 196px; padding: 14px;
  border: 1px solid rgba(255, 255, 255, .12); border-radius: 12px; background: rgba(255, 255, 255, .03);
  transition: border-color var(--d-3) var(--ease), background var(--d-3) var(--ease);
}
.mp-plan.is-mid { border-color: rgba(34, 211, 238, .55); background: rgba(34, 211, 238, .05); }
.mp-name { font-size: .78rem; font-weight: 500; color: var(--muted); }
.mp-price { position: relative; font: 600 1.6rem/1 var(--display); letter-spacing: -.03em; }
.mp-price small { margin-left: 2px; font-size: .7rem; font-weight: 400; letter-spacing: 0; color: var(--muted); }
.mp-feats { list-style: none; display: grid; gap: 5px; font-size: .72rem; color: var(--muted); }
.mp-feats li::before { content: "\2713"; margin-right: 6px; color: var(--pass); }
.mp-btn { margin-top: auto; padding: 6px; border: 1px solid var(--rule-strong); border-radius: 8px; font-size: .72rem; text-align: center; }
.is-mid .mp-btn { background: var(--signal); border-color: var(--signal); color: var(--paper); font-weight: 600; }
.mp-tag { display: none; position: absolute; top: -9px; right: -8px; padding: 1px 6px; border-radius: 6px; background: var(--signal); color: var(--paper); font: 500 .62rem/1.4 var(--mono); letter-spacing: 0; }
.mp-plan > .mp-tag { top: 10px; right: 10px; }
.mp-plan > *, .mp-toggle { transition: opacity var(--d-3) var(--ease); }

/* Google: reads the rendered page; headings and prices are labelled. */
.page-fig[data-step="2"] .mp-tag { display: inline-block; }
.page-fig[data-step="2"] .mp-h,
.page-fig[data-step="2"] .mp-price { outline: 1px dashed var(--signal); outline-offset: 4px; border-radius: 4px; }

/* AI agent: the page arrives without its plans. Shown quietly: empty cards
   with a faint red outline, no labels. Everything else stays the same. */
.page-fig[data-step="3"] .mp-plan { border-style: dashed; border-color: rgba(249, 138, 132, .32); background: none; }
.page-fig[data-step="3"] .mp-plan > * { opacity: 0; }

@media (max-width: 640px) {
  .mp-links, .mp-in, .mp-feats { display: none; }
  .mp-plans { gap: 8px; padding: 14px; }
  .mp-plan { min-height: 120px; padding: 10px; }
  .mp-price { font-size: 1.15rem; }
  .mp-btn { font-size: .62rem; }
}

/* Section heading in the hero's voice: same size and weight, two lines,
   second line muted (owner decision, Oct 3, 2026). */
.home .h-two { max-width: none; font-size: clamp(1.875rem, 2.9vw, 2.625rem); font-weight: 450; letter-spacing: -.035em; line-height: 1.14; }
.h-two span { color: var(--muted); }

/* Lead list (as in the vercel.com hero). All four words show, muted. Hovering
   or focusing one turns its word to Ink and opens the rest of its line.
   The line is always laid out (so nothing reflows); a closed item is clipped
   to one line and its continuation is transparent. Height animates to its
   real size via interpolate-size (Chrome/Edge); other browsers snap the
   height and keep the fade. Opening: height eases
   open, then the text fades in. Closing: the text fades, then the height
   eases shut. Touch screens (no hover) show every line. */
.lead-list { list-style: none; display: grid; gap: 14px; margin-top: 36px; interpolate-size: allow-keywords; }
.lead-list a {
  display: block; height: 1.5em; overflow: hidden;
  color: var(--muted); text-decoration: none; font-size: 1.1875rem; line-height: 1.5;
  transition: height 420ms var(--ease) 120ms;
}
.lead-list b { font-weight: 500; color: inherit; transition: color var(--d-2) var(--ease); }
.lead-list span { color: var(--muted); opacity: 0; transition: opacity 240ms var(--ease); }
.lead-list li:hover a, .lead-list li:focus-within a { height: auto; transition-delay: 0ms; }
.lead-list li:hover b, .lead-list li:focus-within b { color: var(--ink); }
.lead-list li:hover span, .lead-list li:focus-within span { opacity: 1; transition: opacity 320ms var(--ease) 140ms; }
.lead-list a:focus-visible { outline-offset: 4px; border-radius: 4px; }
@media (hover: none) {
  .lead-list a { height: auto; }
  .lead-list span { opacity: 1; }
  .lead-list b { color: var(--ink); }
}

/* Section 2 side column: body-sized type under the section heading. */
/* Top-aligned so revealing a description never shifts the column. */
.story-side--quiet { align-self: start; padding-top: 8px; }
.story-side--quiet .statement { font: 400 clamp(1.0625rem, 1.3vw, 1.1875rem)/1.55 var(--body); letter-spacing: 0; }

/* ------------------------------------------------- Rails down the whole page
   The hero's hairline rails continue through every Home section, aligned
   with the top bar and the hero frame, with a hairline between sections
   (owner decision, Oct 3, 2026). */
.home > section:not(.h-stage) { position: relative; }
.home > section:not(.h-stage)::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 50%; pointer-events: none;
  width: min(1264px, calc(100% - 2 * var(--gutter))); transform: translateX(-50%);
  border-left: 1px solid var(--rule); border-right: 1px solid var(--rule);
}
.home > section:not(.h-stage) + section { border-top: 1px solid var(--rule); }

/* ------------------------------------------------ Section 3: audit card
   Score with all 4 layers and their failing checks, then the 3 failing
   findings with their fixes. Right-aligned heading on this mirrored row. */
.home .h-two--right { margin-left: auto; text-align: right; }
.mini-score .lbars li { row-gap: 4px; }
.lfail { grid-column: 1 / -1; font-size: var(--t-xs); color: var(--fail); }
.lbars li.is-aside { margin-top: 6px; padding-top: 12px; border-top: 1px dashed var(--rule-strong); color: var(--muted); }
.lbars li.is-aside .lfail { color: var(--muted); }
.lbar.is-aside > i { background: var(--rule-strong); }

/* -------------------------------------------- Section 4: how we work with you
   Stripe-style grid: a wide and a narrow card, then three. Each picture sits
   on the card's bottom edge and plays one small motion on hover or focus,
   then stops. Under reduced motion the end state shows without movement. */
.steps-grid { list-style: none; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; margin-top: clamp(32px, 4vw, 48px); }
.sg {
  position: relative; grid-column: span 2; display: flex; flex-direction: column; min-height: 400px;
  border: 1px solid rgba(255, 255, 255, .12); border-radius: var(--radius-lg); background: var(--surface); overflow: hidden;
  transition: border-color var(--d-2) var(--ease);
}
.sg--wide { grid-column: span 4; }
.steps-grid > .sg:nth-child(2) { grid-column: span 2; }
.sg:hover, .sg:focus-within { border-color: rgba(255, 255, 255, .28); }
.sg-head { padding: 24px 64px 0 24px; }
.sg-n { font-size: var(--t-xs); color: var(--muted); }
.sg h3 { margin-top: 8px; font: 500 1.375rem/1.2 var(--display); letter-spacing: -.02em; }
.sg-head p:last-child { margin-top: 8px; max-width: 42ch; color: var(--muted); font-size: .9375rem; line-height: 1.5; }
.sg-more {
  position: absolute; top: 18px; right: 18px; width: 32px; height: 32px; display: grid; place-items: center;
  border: 1px solid var(--rule-strong); border-radius: 8px; color: var(--muted);
  transition: color var(--d-1) var(--ease), border-color var(--d-1) var(--ease);
}
.sg-more:hover { color: var(--ink); border-color: var(--ink); }
.sg-vis { margin-top: auto; padding: 28px 24px 0; display: flex; justify-content: center; }

/* Mini interface pieces, anchored to the card's bottom edge. */
.ui {
  width: 100%; max-width: 360px; padding: 14px 16px 16px; font-size: .78rem;
  background: #0E1418; border: 1px solid var(--rule); border-bottom: 0; border-radius: 12px 12px 0 0;
}
.ui--wide { max-width: 520px; }
.ui-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding-bottom: 10px; }
.ui-title { font-weight: 600; font-size: .875rem; }
.ui-sub { margin-top: 2px; color: var(--muted); font-size: .72rem; }
.ui-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--rule); }
.ui-row--stack { flex-direction: column; align-items: flex-start; gap: 6px; }
.ui-k { color: var(--muted); }
.ui-v { color: var(--ink); }
.ui-who { display: inline-flex; align-items: center; gap: 8px; }
.ui-avs { display: flex; }
.av { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .12); font-size: .6rem; font-weight: 600; color: var(--ink); }
.ui-avs .av + .av { margin-left: -6px; border: 2px solid #0E1418; }
.av--c { background: var(--signal); color: var(--paper); }
.ui-agenda { list-style: none; display: grid; gap: 6px; padding: 10px 0; border-top: 1px solid var(--rule); color: var(--muted); }
.ui-agenda li::before { content: ""; display: inline-block; width: 5px; height: 5px; margin-right: 8px; border-radius: 50%; background: var(--rule-strong); vertical-align: middle; }
.ui-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; padding-top: 10px; border-top: 1px solid var(--rule); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { display: inline-flex; align-items: center; padding: 2px 9px; border: 1px solid var(--rule-strong); border-radius: 999px; font-size: .7rem; color: var(--muted); }
.chip.is-pass, .is-pass-t { color: var(--pass); }
.chip.is-pass { border-color: rgba(74, 222, 128, .4); }
.ui-btns { display: inline-flex; gap: 6px; }
.ui-btn { padding: 5px 11px; border: 1px solid var(--rule-strong); border-radius: 8px; font-size: .72rem; color: var(--ink); }
.ui-btn.is-pri { background: var(--signal); border-color: var(--signal); color: var(--paper); font-weight: 600; }
.ok { color: var(--pass); font-weight: 600; }
.wait { color: var(--muted); }
.ui-bar { height: 6px; margin-top: 10px; border-radius: 999px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.ui-bar i { display: block; height: 100%; width: 100%; background: var(--signal); transform-origin: left; transform: scaleX(.75); transition: transform 700ms var(--ease); }
.ui-chain { display: flex; justify-content: space-between; gap: 6px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--rule); color: var(--muted); }
.ui-chain span { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: .7rem; }
.ui-chain span + span::before { content: ""; position: absolute; top: 4px; right: 50%; width: 100%; height: 1px; background: var(--rule-strong); }
.ui-chain i { position: relative; z-index: 1; width: 9px; height: 9px; border-radius: 50%; background: #0E1418; border: 1px solid var(--rule-strong); transition: background var(--d-2) var(--ease), border-color var(--d-2) var(--ease); }
.ui-approve { transition: transform var(--d-1) var(--ease), box-shadow var(--d-2) var(--ease); }

/* Two labels in one slot; the second takes over on hover. */
.swap { display: inline-grid; }
.swap > * { grid-area: 1 / 1; transition: opacity var(--d-3) var(--ease); }
.swap > :last-child { opacity: 0; }
.chip.is-new { opacity: 0; transform: translateY(4px); transition: opacity var(--d-3) var(--ease), transform var(--d-3) var(--ease); }

/* Hover / focus: one small motion per card. */
.sg:is(:hover, :focus-within) .swap > :first-child { opacity: 0; }
.sg:is(:hover, :focus-within) .swap > :last-child { opacity: 1; transition-delay: 120ms; }
.sg:is(:hover, :focus-within) .chip.is-new { opacity: 1; transform: none; }
.sg:is(:hover, :focus-within) .ui-bar i { transform: scaleX(1); }
.sg:is(:hover, :focus-within) .ui-approve { transform: scale(.95); box-shadow: 0 0 0 3px rgba(34, 211, 238, .25); }
.sg:is(:hover, :focus-within) .ui-chain i { background: var(--pass); border-color: var(--pass); }
.sg:is(:hover, :focus-within) .ui-chain span:nth-child(1) i { transition-delay: 200ms; }
.sg:is(:hover, :focus-within) .ui-chain span:nth-child(2) i { transition-delay: 500ms; }
.sg:is(:hover, :focus-within) .ui-chain span:nth-child(3) i { transition-delay: 800ms; }
@media (prefers-reduced-motion: reduce) {
  .sg .swap > :first-child { opacity: 0; }
  .sg .swap > :last-child { opacity: 1; }
  .sg .chip.is-new { opacity: 1; transform: none; }
  .sg .ui-bar i { transform: none; }
  .sg .ui-chain i { background: var(--pass); border-color: var(--pass); }
}
@media (max-width: 1080px) {
  .steps-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sg, .sg--wide, .steps-grid > .sg:nth-child(2) { grid-column: span 1; }
  .sg--wide { grid-column: 1 / -1; }
}
@media (max-width: 700px) {
  .steps-grid { grid-template-columns: minmax(0, 1fr); }
  .sg { min-height: 0; }
}

/* --------------------------------------------------------------- Post reel
   Circular: the active post is first and large; the others follow as
   slivers whose width depends on their position after it. Positions come
   from data-pos (set in the HTML for no-JS, then by site.js). */
.reel-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; }
.reel-arrows { display: flex; gap: 10px; flex: none; }
.reel-arrow {
  width: 48px; height: 48px; display: grid; place-items: center; cursor: pointer;
  border: 1px solid var(--rule-strong); border-radius: var(--radius); background: var(--surface); color: var(--ink);
  transition: border-color var(--d-1) var(--ease), background var(--d-1) var(--ease), transform var(--d-1) var(--ease);
}
.reel-arrow:hover { border-color: var(--ink); background: rgba(255, 255, 255, .06); }
.reel-arrow:active { transform: scale(.96); }
.reel { margin-top: clamp(32px, 4vw, 48px); }
.reel-track { --reel-gap: 12px; list-style: none; display: flex; gap: var(--reel-gap); height: clamp(260px, 38vw, 520px); }
/* Slower, symmetrical easing for the reel (owner: smoother, nothing abrupt). */
.reel { --reel-dur: 900ms; --reel-ease: cubic-bezier(.65, .05, .36, 1); }
.reel-item { min-width: 0; flex: 0 0 14px; transition: flex var(--reel-dur) var(--reel-ease), margin var(--reel-dur) var(--reel-ease); }
.reel-item[data-pos="0"] { flex: 1 1 0%; order: 0; }
.reel-item[data-pos="1"] { flex: 0 0 17%; order: 1; }
.reel-item[data-pos="2"] { flex: 0 0 8%; order: 2; }
.reel-item[data-pos="3"] { order: 3; } .reel-item[data-pos="4"] { order: 4; } .reel-item[data-pos="5"] { order: 5; }
/* Hover preview: the sliver widens and the large post gives up the space. */
.reel:not(.is-busy) .reel-item[data-pos="1"]:hover { flex-basis: 20%; }
.reel:not(.is-busy) .reel-item[data-pos="2"]:hover { flex-basis: 11%; }
.reel:not(.is-busy) .reel-item:is([data-pos="3"], [data-pos="4"], [data-pos="5"]):hover { flex-basis: 44px; }
/* Moves. Originals shrink away while a copy grows in at the other end, at
   the same time and with the same easing, so the row's width never changes;
   when the move ends the copy is swapped for the original, which looks
   identical. Negative margins cancel the gap at zero width. */
.reel-item.is-out { flex: 0 0 0%; margin-right: calc(-1 * var(--reel-gap)); order: -1; }
.reel-item.is-out-end { flex: 0 0 0%; margin-left: calc(-1 * var(--reel-gap)); order: 99; }
.reel-item.is-in { flex: 0 0 0%; margin-left: calc(-1 * var(--reel-gap)); }
.reel-item.is-in-front { flex: 0 0 0%; margin-right: calc(-1 * var(--reel-gap)); order: -1; }
.reel-item.is-ghost { pointer-events: none; }
.reel-item .reel-thumb { transition: opacity var(--reel-dur) var(--reel-ease), border-color var(--d-2) var(--ease); }
.reel-item:is(.is-out, .is-out-end, .is-in, .is-in-front) .reel-thumb { opacity: 0; }
.reel-item.no-anim, .reel-item.no-anim .reel-thumb { transition: none !important; }
.reel-thumb { transition: opacity 400ms var(--ease), border-color var(--d-2) var(--ease); }
.reel-item.is-out .reel-thumb { opacity: 0; transition-delay: 200ms; }
.reel-thumb {
  display: block; width: 100%; height: 100%; padding: 0; border: 1px solid rgba(255, 255, 255, .12);
  border-radius: var(--radius-lg); overflow: hidden; background: var(--paper-2); cursor: pointer;
}
.reel-item:not([data-pos="0"]) .reel-thumb:hover { border-color: rgba(255, 255, 255, .35); }
.reel-item[data-pos="0"] .reel-thumb { cursor: zoom-in; }
.reel-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: left top; }
.reel-info { display: grid; margin-top: 28px; }
.reel-copy {
  grid-area: 1 / 1; display: flex; justify-content: space-between; align-items: flex-start; gap: 32px;
  opacity: 0; visibility: hidden; transition: opacity var(--d-3) var(--ease), visibility 0s linear var(--d-3);
}
.reel-copy { transition: opacity 500ms var(--ease), visibility 0s linear 500ms; }
.reel-copy.is-on { opacity: 1; visibility: visible; transition: opacity 600ms var(--ease) 200ms, visibility 0s; }
.reel-text { max-width: 62ch; font: 450 clamp(1.125rem, 1.6vw, 1.375rem)/1.4 var(--display); letter-spacing: -.015em; }
.reel-text b { font-weight: 500; color: var(--ink); }
.reel-text span { color: var(--muted); }
.reel-more { flex: none; padding: 11px 18px; font-size: var(--t-s); }
@media (max-width: 760px) {
  .reel-head { flex-direction: column; align-items: flex-start; }
  .reel-track { --reel-gap: 8px; }
  .reel-item { flex-basis: 8px; }
  .reel-item[data-pos="1"] { flex-basis: 16%; }
  .reel-item[data-pos="2"] { flex-basis: 7%; }
  .reel-copy { flex-direction: column; gap: 16px; }
}

/* ---------------------------------------------------------------------- FAQ
   Native details. The answer opens with a smooth height change where the
   browser supports ::details-content; elsewhere it opens instantly. */
.faq-home { margin-top: clamp(32px, 4vw, 48px); border-top: 1px solid var(--rule); interpolate-size: allow-keywords; }
.qa { border-bottom: 1px solid var(--rule); }
.qa summary {
  display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 0;
  list-style: none; cursor: pointer; font: 500 1.125rem/1.4 var(--body); color: var(--ink);
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: "+"; flex: none; font-size: 1.375rem; font-weight: 400; line-height: 1; color: var(--muted); transition: transform var(--d-3) var(--ease); }
.qa[open] summary::after { transform: rotate(45deg); }
.qa summary:hover { color: var(--signal); }
.qa p { max-width: 68ch; padding-bottom: 22px; color: var(--muted); line-height: 1.6; }
.qa::details-content { block-size: 0; overflow: hidden; transition: block-size 420ms var(--ease), content-visibility 420ms allow-discrete; }
.qa[open]::details-content { block-size: auto; }

/* Closing heading, centred. */
.h-close .h-two { text-align: center; }

/* ------------------------------------------------------ Final pass, Oct 3 */

/* Section 4 pictures: no divider above the first row of a picture. */
.ui > .ui-row:first-child { border-top: 0; padding-top: 0; }
/* The panel's own 16px is the only space under the last row. */
.ui > .ui-row:last-child { padding-bottom: 0; }
.ui > .ui-title { padding-bottom: 10px; }
/* Swapped labels: values right-aligned in rows, centred in chips/buttons. */
.swap { justify-items: center; }
.ui-row > .swap { justify-items: end; }

/* Section 4 descriptions open on hover or focus; always shown on touch. */
.sg-desc { opacity: 0; transition: opacity 400ms var(--ease); }
.sg-head .sg-desc > p { margin-top: 8px; }
.sg:is(:hover, :focus-within) .sg-desc { opacity: 1; }
@media (hover: none) { .sg-desc { opacity: 1; } }

/* Pricing cells: price on one line, timing under it. */
.way-price small { margin: 0 2px; }
.way-txt .way-when { margin-top: 4px; font-size: var(--t-xs); color: var(--muted); }

/* Mobile: left-align the mirrored heading; keep content clear of the rails. */
@media (max-width: 960px) {
  .home .h-two--right { text-align: left; margin-left: 0; }
}
@media (max-width: 760px) {
  .h-copy { padding: 56px var(--inset) 8px; }
}

/* Headings keep a floor on line and letter spacing as they shrink:
   line gap never under 6px; tracking eases from -0.035em at 42px to
   -0.02em at 26px (owner, Oct 3, 2026). */
.home .h-sentence, .home .h-two { line-height: max(1.14em, calc(1em + 6px)); letter-spacing: calc(1px - .05875em); }

/* Section 3: readiness card. Readiness and what works are public; what
   needs fixing is shown only as a count and redacted rows. */
.live-title { color: var(--ink); }
.live-dot { display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: var(--pass); vertical-align: 1px; }
.lbar.is-ready > i { background: var(--signal); }
.live-date { font-size: var(--t-xs); color: var(--muted); white-space: nowrap; }
.live .mini-score .score { margin-top: 6px; }
.live-score b { font-size: var(--t-3xl); font-variant-numeric: tabular-nums; }
.live-score span { font-size: var(--t-s); }
.live .lbars .v { font-variant-numeric: tabular-nums; }
.live .lbar > i { transform: none; transition: width 1100ms cubic-bezier(.22, 1, .36, 1); }
.caret { display: inline-block; width: 1.5px; height: 1em; margin-left: 2px; vertical-align: -2px; background: var(--signal); opacity: 0; }
.live.is-typing .caret { opacity: 1; animation: caret 900ms steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.live .in-place li, .live .private { transition: opacity 500ms var(--ease); }
.live.is-typing .in-place li, .live.is-typing .private { opacity: 0; }
.live .in-place li:nth-child(2) { transition-delay: 120ms; }
.live .in-place li:nth-child(3) { transition-delay: 240ms; }
.live .private { transition-delay: 360ms; }
.live.is-typing .in-place li, .live.is-typing .private { transition-delay: 0ms; }
.live.is-clear .redact { display: none; }
.live .mini-report { align-content: start; }
.mini-side { padding: 24px; display: grid; align-content: start; gap: 14px; }
.mini-label { font-size: var(--t-xs); color: var(--muted); }
.in-place { list-style: none; display: grid; }
.in-place li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: start; padding: 12px 0; border-bottom: 1px solid var(--rule); font-size: var(--t-s); }
.in-place li:first-child { padding-top: 0; }
.in-place svg { margin-top: 3px; color: var(--pass); }
.private { margin-top: 10px; padding: 16px; border: 1px solid var(--rule); border-radius: 12px; background: rgba(255, 255, 255, .02); }
.private-head { display: flex; align-items: center; gap: 8px; font-size: var(--t-s); }
.private-head svg { color: var(--muted); }
.private-head b { font-weight: 600; }
.redact { display: grid; gap: 8px; margin-top: 14px; }
.redact i { display: block; width: var(--w); height: 8px; border-radius: 999px; background: rgba(255, 255, 255, .07); }
.private-note { margin-top: 14px; font-size: var(--t-xs); color: var(--muted); }

/* ================================================================ Pricing
   Built on the Home system (owner, Oct 3, 2026): framed text hero, rails,
   two-tone headings, Home's cells with what each includes, a plan frame. */
.p-hero { padding: clamp(40px, 5vw, 56px) var(--inset) clamp(72px, 9vw, 112px); }
.page-pricing .h-sentence { max-width: 30ch; }
.p-note { margin-top: 28px; font-size: var(--t-xs); color: var(--muted); }
.crumbs--in { padding-top: 0; margin-bottom: clamp(40px, 5vw, 64px); }
/* Cells with an included list: give the text the room. */
.way--full { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); }
@media (max-width: 760px) { .p-hero { padding: 40px var(--inset) 56px; } }

.way--full { min-height: 0; }
.way-txt h3 { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.way-tag { padding: 3px 10px; border: 1px solid var(--rule-strong); border-radius: 999px; font: 500 var(--t-xs)/1.4 var(--body); color: var(--ink); }
.way-inc { list-style: none; display: grid; gap: 8px; margin-top: 18px; font-size: var(--t-s); }
.way-inc li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: start; }
.way-inc svg { margin-top: 4px; color: var(--pass); }

.plan-list { list-style: none; padding: 8px 20px 20px; }
.plan-row {
  position: relative; display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; gap: 16px; align-items: center;
  padding: 14px 0; border-bottom: 1px solid var(--rule); transition: opacity 300ms var(--ease);
}
.plan-row:last-child { border-bottom: 0; padding-bottom: 0; }
.plan-row > i { width: 9px; height: 9px; border-radius: 50%; border: 1px solid var(--rule-strong); background: var(--surface); }
.plan-row.is-you > i { border-color: var(--ink); background: var(--ink); }
.plan-row b { display: block; font-weight: 500; }
.plan-row small { display: block; margin-top: 2px; color: var(--muted); font-size: var(--t-xs); }
.plan-row .ui-who { font-size: var(--t-xs); color: var(--muted); white-space: nowrap; }
.plan[data-view="you"] .plan-row:not(.is-you) { opacity: .28; }
@media (max-width: 520px) {
  .plan-row { grid-template-columns: 12px minmax(0, 1fr); }
  .plan-row .ui-who { grid-column: 2; }
}

.p-close-acts { justify-content: center; }

/* ================================================================ Why AEO */
.p-bluf { margin-top: 24px; max-width: 68ch; color: var(--muted); font-size: clamp(1.0625rem, 1.3vw, 1.1875rem); line-height: 1.55; }

/* Assistant tabs: names with our own neutral dots, never their logos. */
.chat-bar { padding: 8px 10px; }
.chat-tabs { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.chat-tabs::-webkit-scrollbar { display: none; }
.chat-tabs button {
  display: inline-flex; align-items: center; gap: 8px; flex: none; padding: 7px 12px; border: 0; border-radius: 8px;
  background: transparent; color: var(--muted); font: 500 var(--t-s)/1 var(--body); cursor: pointer;
  transition: background-color var(--d-2) var(--ease), color var(--d-2) var(--ease);
}
.chat-tabs button i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, .25); transition: background-color var(--d-2) var(--ease); }
.chat-tabs button:hover { color: var(--ink); }
.chat-tabs button[aria-selected="true"] { background: rgba(255, 255, 255, .08); color: var(--ink); }
.chat-tabs button[aria-selected="true"] i { background: var(--signal); }
.chat-tabs button:focus-visible { outline: 2px solid var(--signal); outline-offset: -2px; }
.chat-cap { margin-top: 10px; font-size: var(--t-xs); color: var(--muted); }
.chat-a[hidden] { display: none; }
/* AI answer about Code4X, streaming like a real chat (chat-answer.js). A
   tall panel that scrolls; the script follows the text while it streams. */
.chat .chat-scroll {
  height: clamp(440px, 58vh, 580px); overflow-y: auto; padding: 22px 26px 28px; overscroll-behavior: contain;
  scrollbar-width: none;
}
.chat .chat-scroll::-webkit-scrollbar { display: none; }
.chat .chat-scroll:focus-visible { outline: 2px solid var(--signal); outline-offset: -2px; }
.ans-q { margin-left: auto; width: fit-content; max-width: 85%; padding: 11px 16px; border-radius: 16px 16px 4px 16px; background: rgba(255, 255, 255, .07); font-weight: 500; }
.chat-status { display: flex; align-items: center; gap: 10px; margin-top: 24px; color: var(--muted); font-size: var(--t-s); }
.chat-status[hidden] { display: none; }
.typing { display: inline-flex; gap: 5px; }
.typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); animation: typing-dot 900ms ease-in-out infinite; }
.typing i:nth-child(2) { animation-delay: 150ms; }
.typing i:nth-child(3) { animation-delay: 300ms; }
@keyframes typing-dot { 0%, 100% { opacity: .3; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-3px); } }
.chat-a { margin-top: 22px; font-size: 1.0625rem; line-height: 1.65; }
.chat-a > * + * { margin-top: 14px; }
.chat-a p { max-width: none; }
.chat-a .chat-h { margin-top: 22px; font-weight: 600; }
.chat-a ul { padding-left: 20px; display: grid; gap: 8px; }
.chat-a li::marker { color: var(--muted); }
.chat-a b { font-weight: 600; }
.cite { display: inline-block; margin-left: 2px; padding: 1px 8px; border-radius: 999px; background: rgba(255, 255, 255, .08); color: var(--muted); font: 500 .72rem/1.6 var(--body); vertical-align: 2px; white-space: nowrap; }
.src-card { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: center; margin-top: 22px !important; padding: 12px 14px; border: 1px solid var(--rule); border-radius: 12px; background: rgba(255, 255, 255, .02); }
.src-card b { display: block; font-weight: 500; font-size: var(--t-s); }
.src-card small { display: block; margin-top: 2px; color: var(--muted); font-size: var(--t-xs); }
.stream-caret { display: inline-block; width: 8px; height: 1em; margin-left: 2px; vertical-align: -2px; border-radius: 2px; background: var(--ink); animation: caret 900ms steps(1) infinite; }
@media (max-width: 760px) { .chat .chat-scroll { height: 460px; padding: 18px; } .chat-a { font-size: 1rem; } }

/* Three shifts as a step story (from stripe.com, owner Oct 3, 2026). Each
   shift: number, title, one line; its picture is a collage of small
   realistic cards. Desktop with JS: steps on the left, pictures stacked in
   one pinned cell on the right, the active one shown. */
.tm { margin-top: clamp(32px, 4vw, 48px); }
.tm { position: relative; }
.tm-txt { padding-top: 28px; display: grid; grid-template-columns: 32px minmax(0, 1fr); column-gap: 20px; align-content: start; }
.tm-txt > :not(.tm-n) { grid-column: 2; }
.tm-n { position: relative; z-index: 1; grid-column: 1; grid-row: 1 / span 4; align-self: start; display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: #15191C; box-shadow: 0 0 0 1px rgba(255, 255, 255, .1); color: var(--muted); font-weight: 500; transition: background-color 300ms var(--ease), color 300ms var(--ease), box-shadow 300ms var(--ease); }
.tm-txt h3 { margin-top: 2px; font-size: 1.375rem; font-weight: 500; letter-spacing: -.02em; }
/* The line that links the numbers; it fills with scroll (site.js). */
.tm-line { display: none; position: absolute; width: 2px; margin-left: -1px; border-radius: 2px; background: rgba(255, 255, 255, .1); }
.tm-line i { display: block; width: 100%; height: 0; border-radius: 2px; background: var(--signal); }
.tm-step.is-past .tm-n { background: #0E2A30; box-shadow: 0 0 0 1px rgba(34, 211, 238, .6); color: var(--signal); }
.tm-txt p { margin-top: 8px; color: var(--muted); line-height: 1.6; max-width: 44ch; }
.tm-vis { position: relative; height: 420px; margin: 24px 0 56px; }
.tm-card { position: absolute; border: 1px solid rgba(255, 255, 255, .12); border-radius: 14px; background: var(--surface); padding: 16px 18px; font-size: .85rem; }
.tm-dot { display: inline-block; width: 7px; height: 7px; margin-right: 8px; border-radius: 50%; vertical-align: 1px; }
.tm-dot.is-signal { background: var(--signal); }
.tm-dot.is-fail { background: var(--fail); }
.tm-bubble { margin-left: auto; width: fit-content; max-width: 90%; padding: 8px 12px; border-radius: 12px 12px 4px 12px; background: rgba(255, 255, 255, .07); }
.tm-btn { display: inline-block; padding: 7px 12px; border-radius: 8px; background: var(--signal); color: var(--paper); font-weight: 600; font-size: .78rem; }
.tm-btn.is-off { background: rgba(255, 255, 255, .08); color: var(--muted); }

/* 1: search results fade behind an AI answer */
.tm-serp { left: 0; top: 0; width: 56%; opacity: .55; }
.tm-search { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid var(--rule-strong); border-radius: 999px; color: var(--muted); }
.tm-res { margin-top: 12px; }
.tm-res small { display: block; color: var(--muted); font-size: .7rem; }
.tm-res b { font-weight: 500; color: #9FD8FF; }
.tm-ai { right: 0; top: 26%; width: 64%; }
.tm-ans { margin-top: 12px; line-height: 1.55; }
.tm-chips { display: flex; gap: 6px; margin-top: 10px; }
.tm-chips span { padding: 2px 9px; border-radius: 999px; background: rgba(255, 255, 255, .08); color: var(--muted); font-size: .72rem; }

/* 2: the browser shows a price; the crawler gets an empty box */
.tm-browser { left: 0; top: 0; width: 50%; padding: 0; overflow: hidden; }
.tm-bbar { display: flex; align-items: center; gap: 5px; padding: 9px 12px; border-bottom: 1px solid var(--rule); color: var(--muted); font: .7rem var(--mono); }
.tm-bbar i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, .15); }
.tm-bbar span { margin-left: 8px; }
.tm-plan { padding: 16px 18px 18px; }
.tm-plan small { color: var(--muted); }
.tm-plan b { display: block; margin: 4px 0 12px; font-size: 1.6rem; font-weight: 600; letter-spacing: -.02em; }
.tm-plan b span { font-size: .8rem; font-weight: 400; color: var(--muted); }
.tm-code { right: 0; top: 24%; width: 62%; }
.tm-code-h { color: var(--muted); font-size: .75rem; }
.tm-code ol { margin-top: 10px; padding-left: 26px; font: .76rem/1.9 var(--mono); color: var(--muted); }
.tm-code li::marker { color: rgba(255, 255, 255, .25); }
.tm-code li { white-space: nowrap; }
.tm-code code { white-space: pre; font: inherit; color: var(--ink); }
.tm-code em { margin-left: 10px; padding: 1px 7px; border-radius: 999px; font: 500 .66rem/1.5 var(--body); font-style: normal; }
.tm-code .is-empty code { background: rgba(249, 138, 132, .14); border-radius: 4px; }
.tm-code .is-empty em { background: rgba(249, 138, 132, .16); color: var(--fail); }
.tm-code .is-skip code { color: var(--muted); text-decoration: line-through; text-decoration-color: rgba(255, 255, 255, .3); }
.tm-code .is-skip em { background: rgba(255, 255, 255, .08); color: var(--muted); }

/* 2: ten tabs give way to an AI shortlist */
.tm-tabs { left: 0; top: 0; width: 58%; opacity: .55; padding: 0; overflow: hidden; }
.tm-tabrow { display: flex; gap: 4px; padding: 8px 8px 0; border-bottom: 1px solid var(--rule); overflow: hidden; }
.tm-tabrow span { flex: none; padding: 6px 10px; border-radius: 8px 8px 0 0; background: rgba(255, 255, 255, .05); color: var(--muted); font-size: .7rem; white-space: nowrap; }
.tm-tabrow span:first-child { background: var(--surface); color: var(--ink); }
.tm-cmp { padding: 12px 16px 16px; }
.tm-cmp p { display: grid; grid-template-columns: 2fr 1fr 1fr; padding: 7px 0; border-bottom: 1px solid var(--rule); font-size: .76rem; color: var(--muted); }
.tm-cmp p:last-child { border-bottom: 0; }
.tm-cmp b { font-weight: 500; color: var(--ink); }
.tm-short { right: 0; top: 24%; width: 60%; }
.tm-short-h { margin-top: 14px; color: var(--muted); font-size: .72rem; }
.tm-short ol { margin-top: 6px; padding-left: 20px; display: grid; gap: 8px; }
.tm-short li b { display: block; font-weight: 600; }
.tm-short li span { color: var(--muted); font-size: .76rem; }

/* 3: an agent tries a form it can't fully read */
.tm-chatc { left: 0; top: 0; width: 44%; }
.tm-agent { margin-top: 12px; line-height: 1.5; color: var(--ink); }
.tm-typing { display: flex; gap: 4px; margin-top: 10px; }
.tm-typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); animation: typing-dot 900ms ease-in-out infinite; }
.tm-typing i:nth-child(2) { animation-delay: 150ms; }
.tm-typing i:nth-child(3) { animation-delay: 300ms; }
.tm-form { right: 0; top: 14%; width: 52%; }
.tm-form-h { font-weight: 600; }
.tm-field { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; margin-top: 10px; padding: 8px 10px; border: 1px solid var(--rule-strong); border-radius: 8px; }
.tm-field small { grid-column: 1 / -1; color: var(--muted); font-size: .68rem; }
.tm-field.is-ok svg { color: var(--pass); }
.tm-field.is-bad { border: 1px dashed rgba(249, 138, 132, .7); color: var(--fail); }
.tm-note { margin: 8px 0 12px; color: var(--fail); font-size: .72rem; }

@media (min-width: 961px) {
  .js .tm { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(40px, 6vw, 96px); }
  .js .tm-step { display: contents; }
  .js .tm-txt { grid-column: 1; min-height: 36vh; }
  .js .tm-step:nth-child(1) .tm-txt { grid-row: 1; }
  .js .tm-step:nth-child(2) .tm-txt { grid-row: 2; }
  .js .tm-step:nth-child(3) .tm-txt { grid-row: 3; }
  .js .tm-step:nth-child(4) .tm-txt { grid-row: 4; }
  .js .tm-step:nth-child(5) .tm-txt { grid-row: 5; }
  .js .tm-line { display: block; }
  /* The last step gets room to stay pinned once it lights up, so its picture
     is seen before the section scrolls on (owner, Oct 4, 2026). */
  .js .tm-step:last-child .tm-txt { min-height: max(36vh, 660px); }
  .js .tm-vis { grid-column: 2; grid-row: 1 / span 5; align-self: start; position: sticky; top: 168px; height: 440px; margin: 28px 0 0; pointer-events: none; }
  .js .tm-txt h3, .js .tm-txt p { opacity: .45; transition: opacity 300ms var(--ease); }
  .js .tm-step.is-on .tm-txt h3, .js .tm-step.is-on .tm-txt p { opacity: 1; }
  /* Pictures: the cards simply appear, one after another; no movement. */
  .js .tm-vis .tm-card { opacity: 0; transition: opacity 400ms var(--ease); }
  .js .tm-step.is-on .tm-vis .tm-card { opacity: 1; }
  .js .tm-step.is-on .tm-vis .tm-serp, .js .tm-step.is-on .tm-vis .tm-tabs { opacity: .55; }
  .js .tm-step.is-on .tm-vis .tm-card:nth-child(2) { transition-delay: 220ms; }
  .js .tm-step.is-on .tm-vis .tm-card:nth-child(3) { transition-delay: 440ms; }
}
/* Phones: the collage stacks, each card overlapping the one above a little. */
@media (max-width: 600px) {
  .tm-vis { height: auto; display: grid; gap: 0; }
  .tm-card { position: relative; inset: auto !important; width: 90% !important; }
  .tm-card:nth-child(2) { margin: -18px 0 0 auto; }
  .tm-code { overflow: hidden; width: 100% !important; }
  .tm-code ol { padding-left: 20px; font-size: .62rem; }
  .tm-code em { margin-left: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .js .tm-vis .tm-card { transition: none; }
}

/* AEO and SEO: a Venn on the right of a mirrored story row. One timeline:
   0-1.1s the rings draw their outlines while sliding together from the
   sides; 1.1s the shared lens lights up; then the items arrive, SEO from
   the left, AEO from the right, the shared ones last. Lead-list hover
   lights the matching zone. */
.venn { position: relative; margin: 0; aspect-ratio: 600 / 380; }
.venn-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.venn-ring { fill: none; stroke-width: 1.2; transform-box: fill-box; transform-origin: center; transition: stroke 300ms var(--ease); }
.venn-ring.is-seo { stroke: rgba(232, 239, 243, .35); }
.venn-ring.is-aeo { stroke: rgba(34, 211, 238, .6); }
.venn-lens { fill: rgba(34, 211, 238, .1); transition: fill 300ms var(--ease); }
.venn-col { position: absolute; top: 50%; transform: translateY(-50%); }
.venn-col.is-seo { left: 7%; width: 27%; }
.venn-col.is-both { left: 50%; width: 19%; transform: translate(-50%, -50%); text-align: center; }
.venn-col.is-aeo { left: 69%; width: 28%; }
.venn-col h3 { font-size: 1.25rem; font-weight: 500; letter-spacing: -.02em; }
.venn-col.is-aeo h3 { color: var(--signal); }
.venn-col.is-both h3 { font-size: var(--t-xs); font-weight: 500; letter-spacing: 0; color: var(--signal); }
.venn-col ul { list-style: none; display: grid; gap: 7px; margin-top: 12px; font-size: .875rem; color: var(--muted); }
.venn-col.is-both ul { gap: 8px; font-size: .78rem; color: var(--ink); }
.venn-col li { transition: color 300ms var(--ease); }

/* The timeline (JS adds .is-in when the figure comes into view). */
.js .venn[data-draw] .venn-ring { stroke-dasharray: 100; stroke-dashoffset: 100; opacity: 0; }
.js .venn[data-draw] .venn-ring.is-seo { transform: translateX(-120px); }
.js .venn[data-draw] .venn-ring.is-aeo { transform: translateX(120px); }
.js .venn[data-draw] .venn-lens { opacity: 0; }
.js .venn[data-draw] .venn-col h3, .js .venn[data-draw] .venn-col li { opacity: 0; }
.js .venn[data-draw] .venn-col.is-seo :is(h3, li) { transform: translateX(-14px); }
.js .venn[data-draw] .venn-col.is-aeo :is(h3, li) { transform: translateX(14px); }
.js .venn[data-draw] .venn-col.is-both :is(h3, li) { transform: scale(.94); }
.js .venn[data-draw].is-in .venn-ring {
  stroke-dashoffset: 0; opacity: 1; transform: none;
  transition: stroke-dashoffset 1100ms cubic-bezier(.65, .05, .36, 1), transform 1100ms cubic-bezier(.65, .05, .36, 1), opacity 300ms var(--ease), stroke 300ms var(--ease);
}
.js .venn[data-draw].is-in .venn-lens { opacity: 1; transition: opacity 700ms var(--ease) 1050ms, fill 300ms var(--ease); animation: venn-glow 1400ms var(--ease) 1050ms 1 both; }
@keyframes venn-glow { 0% { fill: rgba(34, 211, 238, 0); } 40% { fill: rgba(34, 211, 238, .26); } 100% { fill: rgba(34, 211, 238, .1); } }
.js .venn[data-draw].is-in .venn-col :is(h3, li) { opacity: 1; transform: none; transition: opacity 450ms var(--ease), transform 450ms var(--ease), color 300ms var(--ease); }
.js .venn[data-draw].is-in .venn-col.is-seo h3, .js .venn[data-draw].is-in .venn-col.is-aeo h3 { transition-delay: 1250ms; }
.js .venn[data-draw].is-in .venn-col.is-seo li:nth-child(1), .js .venn[data-draw].is-in .venn-col.is-aeo li:nth-child(1) { transition-delay: 1350ms; }
.js .venn[data-draw].is-in .venn-col.is-seo li:nth-child(2), .js .venn[data-draw].is-in .venn-col.is-aeo li:nth-child(2) { transition-delay: 1430ms; }
.js .venn[data-draw].is-in .venn-col.is-seo li:nth-child(3), .js .venn[data-draw].is-in .venn-col.is-aeo li:nth-child(3) { transition-delay: 1510ms; }
.js .venn[data-draw].is-in .venn-col.is-aeo li:nth-child(4) { transition-delay: 1590ms; }
.js .venn[data-draw].is-in .venn-col.is-both h3 { transition-delay: 1750ms; }
.js .venn[data-draw].is-in .venn-col.is-both li:nth-child(1) { transition-delay: 1850ms; }
.js .venn[data-draw].is-in .venn-col.is-both li:nth-child(2) { transition-delay: 1930ms; }
.js .venn[data-draw].is-in .venn-col.is-both li:nth-child(3) { transition-delay: 2010ms; }
.js .venn[data-draw].is-in .venn-col.is-both li:nth-child(4) { transition-delay: 2090ms; }

/* Lead-list words light their zone. */
.story-row:has(.lead-list li[data-z="seo"]:is(:hover, :focus-within)) .venn-ring.is-seo { stroke: var(--ink); }
.story-row:has(.lead-list li[data-z="seo"]:is(:hover, :focus-within)) .venn-col.is-seo li,
.story-row:has(.lead-list li[data-z="aeo"]:is(:hover, :focus-within)) .venn-col.is-aeo li { color: var(--ink); }
.story-row:has(.lead-list li[data-z="aeo"]:is(:hover, :focus-within)) .venn-ring.is-aeo { stroke: var(--signal); }
.story-row:has(.lead-list li[data-z="both"]:is(:hover, :focus-within)) .venn-lens { fill: rgba(34, 211, 238, .24); }

/* Phones: the picture keeps the circles and labels; the lists live in the lead list. */
@media (max-width: 600px) {
  .venn-col ul { display: none; }
  .venn-col.is-seo { left: 12%; }
  .venn-col.is-aeo { left: 72%; }
}
@media (prefers-reduced-motion: reduce) {
  .js .venn[data-draw] .venn-ring, .js .venn[data-draw] .venn-lens, .js .venn[data-draw] .venn-col :is(h3, li) {
    stroke-dashoffset: 0; opacity: 1; transform: none; transition: none !important; animation: none !important;
  }
}

/* What AEO is not: the email in a box on the left; the corrections on the
   right, revealed one by one by scroll position (site.js [data-pitch]).
   Each correction strikes its claim as it arrives. */
.pitch-track { margin-top: clamp(40px, 5vw, 64px); }
.pitch-wrap { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(24px, 3vw, 40px); align-items: start; }
.pitch { font-size: .9rem; }
.pitch-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 16px 22px; border-bottom: 1px solid var(--rule); }
.pitch-head .av { width: 32px; height: 32px; font-size: .75rem; }
.pitch-head b { display: block; font-weight: 600; font-size: .875rem; }
.pitch-head small { display: block; margin-top: 1px; color: var(--muted); font-size: .75rem; }
.pitch-time { color: var(--muted); font-size: .75rem; }
.pitch-mail { padding: 20px 22px 24px; color: rgba(232, 239, 243, .82); line-height: 1.65; }
.pitch-mail p { max-width: none; }
.pitch-mail > * + * { margin-top: 12px; }
.pitch-subj { font-size: 1.0625rem; font-weight: 600; color: var(--ink); }
.pitch-mail ul { padding-left: 18px; display: grid; gap: 6px; }
.pitch-mail li::marker { color: var(--muted); }
.pitch-sign { color: var(--ink); }
.pitch-sign span { color: var(--muted); font-size: .8rem; }
/* The strike is a background line, so it draws across line breaks too. */
.pitch mark { padding: 1px 3px; border-radius: 4px; background-color: rgba(249, 138, 132, .14); background-image: linear-gradient(var(--fail), var(--fail)); background-repeat: no-repeat; background-position: 0 56%; background-size: 100% 1.5px; color: var(--ink); cursor: default; transition: background-size 550ms cubic-bezier(.65, .05, .36, 1), background-color 250ms var(--ease); }
.pitch mark sup { margin-left: 3px; color: var(--fail); font-size: .6rem; font-weight: 600; }
.pitch-notes { list-style: none; display: grid; gap: 12px; }
.pitch-notes li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; padding: 16px 18px; border: 1px solid rgba(255, 255, 255, .12); border-radius: 14px; background: var(--surface); line-height: 1.55; transition: opacity 450ms var(--ease), transform 450ms var(--ease), border-color 250ms var(--ease), background-color 250ms var(--ease); }
.pitch-notes p { color: var(--muted); font-size: .9375rem; }
.pitch-notes b { color: var(--ink); font-weight: 600; }
.pitch-n { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: rgba(34, 211, 238, .16); color: var(--signal); font-size: .7rem; font-weight: 600; }
.js [data-pitch] mark { background-size: 0% 1.5px; }
.js [data-pitch] mark.is-on { background-size: 100% 1.5px; }
.js [data-pitch] .pitch-notes li { opacity: 0; transform: translateY(90px); }
.js [data-pitch] .pitch-notes li.is-on { opacity: 1; transform: none; }
.pitch-wrap:has(:is(mark[data-n="1"], .pitch-notes li[data-n="1"]):hover) mark[data-n="1"] { background-color: rgba(249, 138, 132, .3); }
.pitch-wrap:has(:is(mark[data-n="1"], .pitch-notes li[data-n="1"]):hover) .pitch-notes li[data-n="1"] { border-color: var(--signal); background: rgba(34, 211, 238, .06); }
.pitch-wrap:has(:is(mark[data-n="2"], .pitch-notes li[data-n="2"]):hover) mark[data-n="2"] { background-color: rgba(249, 138, 132, .3); }
.pitch-wrap:has(:is(mark[data-n="2"], .pitch-notes li[data-n="2"]):hover) .pitch-notes li[data-n="2"] { border-color: var(--signal); background: rgba(34, 211, 238, .06); }
.pitch-wrap:has(:is(mark[data-n="3"], .pitch-notes li[data-n="3"]):hover) mark[data-n="3"] { background-color: rgba(249, 138, 132, .3); }
.pitch-wrap:has(:is(mark[data-n="3"], .pitch-notes li[data-n="3"]):hover) .pitch-notes li[data-n="3"] { border-color: var(--signal); background: rgba(34, 211, 238, .06); }
.pitch-wrap:has(:is(mark[data-n="4"], .pitch-notes li[data-n="4"]):hover) mark[data-n="4"] { background-color: rgba(249, 138, 132, .3); }
.pitch-wrap:has(:is(mark[data-n="4"], .pitch-notes li[data-n="4"]):hover) .pitch-notes li[data-n="4"] { border-color: var(--signal); background: rgba(34, 211, 238, .06); }
/* Desktop: the email and the list stay pinned while the visitor scrolls
   through the track; the corrections stack in one at a time. */
@media (min-width: 861px) {
  .js .pitch-track > .pitch-wrap { position: sticky; top: 120px; }
  /* Desktop: scroll drives each card's rise (inline styles), so only a short smoothing transition. */
  .js [data-pitch] .pitch-notes li { transition: opacity 120ms linear, transform 120ms linear, border-color 250ms var(--ease), background-color 250ms var(--ease); }
}
@media (max-width: 860px) { .pitch-wrap { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) {
  .js [data-pitch] mark { background-size: 100% 1.5px; transition: none; }
  .js [data-pitch] .pitch-notes li { opacity: 1; transform: none; transition: none; }
}

/* Tables on leader pages: hairlines, our row in Ink. */
.p-tbl { margin-top: clamp(28px, 3vw, 40px); border-top: 1px solid var(--rule); }
.page-aeo .tbl th, .page-aeo .tbl td { padding: 16px 20px 16px 0; }
.page-aeo .tbl td { color: var(--muted); }
.page-aeo .tbl thead th { color: var(--ink); font-weight: 500; }
.p-approach .tbl-wrap { border-top: 0; padding: 4px 22px 8px; }
.p-approach .tbl tbody tr:last-child > * { border-bottom: 0; }
.p-approach .tbl .is-us th, .p-approach .tbl .is-us td { color: var(--ink); }
.p-approach .tbl .is-us th { color: var(--signal); }

/* What AEO is not: term left, answer right. */
.nots { margin-top: clamp(32px, 4vw, 48px); border-top: 1px solid var(--rule); }
.nots > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 8px 32px; padding: 24px 0; border-bottom: 1px solid var(--rule); }
.nots dt { font-size: 1.25rem; font-weight: 500; letter-spacing: -.015em; }
.nots dd { color: var(--muted); line-height: 1.6; }
.nots-src { display: block; margin-top: 8px; font-size: var(--t-xs); }
.nots-src a { color: var(--muted); }
@media (max-width: 760px) { .nots > div { grid-template-columns: minmax(0, 1fr); } }

/* The hero frame's 1px rail border sits inside its box; take it off the inset. */
.h-frame.p-hero, .h-frame > .h-copy { padding-left: calc(var(--inset) - 1px); }

/* Why AEO hero: balanced lines, so no word sits alone on the last line. */
.page-aeo .h-sentence { text-wrap: balance; }
.page-aeo .h-sentence br { display: none; }
.page-aeo .h-sentence span { display: block; text-wrap: balance; }

/* ============================================================ How we score */
/* Layer explorer: the frame shows the layer chosen in the side list. */
.lx-panel { padding: 26px 28px 30px; min-height: 340px; }
.lx-panel[hidden] { display: none; }
.lx-count { font-size: var(--t-xs); color: var(--signal); }
.lx-panel h3 { margin-top: 10px; font-size: 2rem; font-weight: 500; letter-spacing: -.03em; }
.lx-q { margin-top: 6px; color: var(--muted); font-size: 1.0625rem; }
.lx-panel ul { list-style: none; display: grid; gap: 0; margin-top: 22px; border-top: 1px solid var(--rule); }
.lx-panel li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: start; padding: 14px 0; border-bottom: 1px solid var(--rule); }
.lx-panel li svg { margin-top: 5px; color: var(--signal); }
.js .lx-panel:not([hidden]) { animation: lx-in 350ms var(--ease) both; }
@keyframes lx-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.lead-list li.is-active b { color: var(--ink); }

/* Step story cards */
.hs-k { color: var(--muted); font-size: .75rem; }
.hs-big { margin-top: 10px; }
.hs-big b { font-size: 2.6rem; font-weight: 600; letter-spacing: -.03em; }
.hs-big span { margin-left: 4px; color: var(--muted); }
.hs-note { margin-top: 8px; color: var(--muted); font-size: .78rem; }
.hs-ev { left: 0; top: 0; width: 86%; }
.hs-req { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; padding: 8px 10px; border-radius: 8px; background: rgba(255, 255, 255, .05); }
.hs-req code { font: .78rem var(--mono); color: var(--ink); }
.hs-req span { padding: 1px 8px; border-radius: 999px; background: rgba(74, 222, 128, .14); color: var(--pass); font-size: .7rem; }
.hs-ev pre { margin-top: 10px; padding: 10px 12px; border-radius: 8px; background: rgba(0, 0, 0, .25); font: .78rem/1.6 var(--mono); color: var(--muted); }
.hs-res { display: flex; gap: 10px; align-items: center; margin-top: 12px; font-size: .82rem; }
.hs-layer { left: 0; top: 0; width: 70%; }
.hs-layer .sqs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.hs-layer .sqs i { width: 18px; height: 18px; border-radius: 5px; }
.hs-layer .sqs i.p { background: rgba(74, 222, 128, .75); }
.hs-layer .sqs i.f { background: rgba(249, 138, 132, .75); }
.hs-total { left: 0; top: 0; width: 70%; }
.hs-total .lbars { margin-top: 14px; }
.hs-rep { left: 0; top: 0; width: 70%; }
.hs-mon { list-style: none; display: grid; gap: 10px; margin-top: 14px; }
.hs-mon li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: center; font-size: .85rem; }
.hs-mon svg { color: var(--signal); }
.hs-dots { display: flex; gap: 8px; margin-top: 14px; }
.hs-dots i { width: 14px; height: 14px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .35); }
.hs-months { display: flex; gap: 6px; margin-top: 14px; }
.hs-months span { padding: 3px 10px; border-radius: 999px; background: rgba(255, 255, 255, .05); color: var(--muted); font-size: .72rem; }
.hs-months .is-on { background: rgba(34, 211, 238, .16); color: var(--signal); }
.page-hws .js .tm-vis, .page-hws .tm-vis { height: 320px; }
@media (max-width: 600px) { .hs-ev, .hs-layer, .hs-total, .hs-rep { width: 100% !important; } }

/* The scorer: three inputs flow into one score; what's never used sits below. */
.scorer-body { display: grid; grid-template-columns: minmax(0, 1.1fr) auto minmax(0, .9fr); gap: 18px; align-items: center; padding: 26px 24px; }
.scorer-in { list-style: none; display: grid; gap: 10px; }
.scorer-in li { padding: 12px 14px; border: 1px solid var(--rule-strong); border-radius: 10px; font-size: .9rem; }
.scorer-in b { margin-left: 6px; font-family: var(--mono); font-weight: 500; font-size: .8rem; color: var(--signal); }
.scorer-arrow { position: relative; width: 56px; height: 2px; background: rgba(255, 255, 255, .12); overflow: hidden; }
.scorer-arrow i { position: absolute; inset: 0; background: var(--signal); transform-origin: left; }
.scorer-out { padding: 16px 18px; border: 1px solid rgba(34, 211, 238, .45); border-radius: 12px; background: rgba(34, 211, 238, .05); }
.scorer-never { padding: 16px 24px 22px; border-top: 1px solid var(--rule); }
.scorer-never p:last-child { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.scorer-never span { padding: 4px 12px; border-radius: 999px; border: 1px solid rgba(249, 138, 132, .4); color: var(--muted); font-size: .8rem; text-decoration: line-through; text-decoration-color: rgba(249, 138, 132, .8); }
.js .scorer[data-draw] .scorer-in li, .js .scorer[data-draw] .scorer-out, .js .scorer[data-draw] .scorer-never span { opacity: 0; }
.js .scorer[data-draw] .scorer-arrow i { transform: scaleX(0); }
.js .scorer[data-draw].is-in .scorer-in li { opacity: 1; transition: opacity 400ms var(--ease); }
.js .scorer[data-draw].is-in .scorer-in li:nth-child(2) { transition-delay: 150ms; }
.js .scorer[data-draw].is-in .scorer-in li:nth-child(3) { transition-delay: 300ms; }
.js .scorer[data-draw].is-in .scorer-arrow i { transform: none; transition: transform 600ms cubic-bezier(.65, .05, .36, 1) 500ms; }
.js .scorer[data-draw].is-in .scorer-out { opacity: 1; transition: opacity 500ms var(--ease) 1100ms; }
.js .scorer[data-draw].is-in .scorer-never span { opacity: 1; transition: opacity 400ms var(--ease) 1500ms; }
@media (max-width: 600px) {
  .scorer-body { grid-template-columns: minmax(0, 1fr); }
  .scorer-arrow { width: 2px; height: 32px; justify-self: center; }
}
@media (prefers-reduced-motion: reduce) {
  .js .scorer[data-draw] .scorer-in li, .js .scorer[data-draw] .scorer-out, .js .scorer[data-draw] .scorer-never span { opacity: 1; transition: none !important; }
  .js .scorer[data-draw] .scorer-arrow i { transform: none; transition: none !important; }
}

/* Why us hero: our own published result, centred in the hero's right half.
   Once in view, the checks resolve left to right behind a Signal beam, then
   the score and the checks we still lose points on appear. */
.h-art--card { display: flex; align-items: center; justify-content: center; padding: 40px clamp(20px, 3vw, 40px); }
.selfscore { width: 100%; max-width: 440px; margin: 0; padding: 24px 26px 26px; border: 1px solid rgba(255, 255, 255, .12); border-radius: 16px; background: var(--surface); }
.ss-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.ss-head b { display: block; font-weight: 600; }
.ss-head small { display: block; margin-top: 2px; color: var(--muted); font-size: .78rem; }
.ss-pub { display: inline-flex; align-items: center; gap: 7px; padding: 4px 10px; border-radius: 999px; background: rgba(74, 222, 128, .1); color: var(--pass); font-size: .72rem; font-weight: 500; white-space: nowrap; }
.ss-pub i { width: 6px; height: 6px; border-radius: 50%; background: var(--pass); }
.ss-score { margin-top: 18px; }
.ss-score b { font-size: 4rem; font-weight: 600; letter-spacing: -.04em; line-height: 1; }
.ss-score span { margin-left: 6px; color: var(--muted); font-size: 1.1rem; }
.ss-grid { position: relative; display: grid; grid-template-columns: repeat(11, minmax(0, 1fr)); gap: 9px; margin-top: 22px; }
.ss-grid i { aspect-ratio: 1; border-radius: 50%; background: rgba(74, 222, 128, .8); }
.ss-grid i.h { background: var(--partial); }
.ss-grid i.f { background: var(--fail); }
.ss-label { margin-top: 22px; color: var(--muted); font-size: .75rem; }
.ss-fails { list-style: none; margin-top: 8px; border-top: 1px solid var(--rule); }
.ss-fails li { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--rule); font-size: .875rem; }
.ss-fails li:last-child { border-bottom: 0; padding-bottom: 0; }
.ss-beam { position: absolute; top: -6px; bottom: -6px; left: 0; width: 2px; border-radius: 2px; background: var(--signal); box-shadow: 0 0 12px rgba(34, 211, 238, .9); opacity: 0; }

.js .selfscore[data-draw] .ss-grid i { background: rgba(255, 255, 255, .1); }
.js .selfscore[data-draw] .ss-score, .js .selfscore[data-draw] .ss-label, .js .selfscore[data-draw] .ss-fails li { opacity: 0; }
.js .selfscore[data-draw].is-in .ss-grid i { background: rgba(74, 222, 128, .8); transition: background-color 300ms var(--ease) calc(300ms + var(--c) * 110ms); }
.js .selfscore[data-draw].is-in .ss-grid i.h { background: var(--partial); }
.js .selfscore[data-draw].is-in .ss-grid i.f { background: var(--fail); }
.js .selfscore[data-draw].is-in .ss-beam { animation: ss-beam 1300ms cubic-bezier(.45, 0, .55, 1) 250ms 1 both; }
@keyframes ss-beam { 0% { opacity: 0; left: 0; } 8% { opacity: 1; } 92% { opacity: 1; } 100% { opacity: 0; left: 100%; } }
.js .selfscore[data-draw].is-in .ss-score { opacity: 1; transition: opacity 500ms var(--ease) 1600ms; }
.js .selfscore[data-draw].is-in .ss-label { opacity: 1; transition: opacity 400ms var(--ease) 1900ms; }
.js .selfscore[data-draw].is-in .ss-fails li { opacity: 1; transition: opacity 400ms var(--ease) 2050ms; }
.js .selfscore[data-draw].is-in .ss-fails li:nth-child(2) { transition-delay: 2200ms; }
.js .selfscore[data-draw].is-in .ss-fails li:nth-child(3) { transition-delay: 2350ms; }
@media (max-width: 900px) { .h-art--card { min-height: 0; padding: 8px var(--inset) 48px; justify-content: flex-start; } }
@media (prefers-reduced-motion: reduce) {
  .js .selfscore[data-draw] .ss-grid i, .js .selfscore[data-draw] .ss-score, .js .selfscore[data-draw] .ss-label, .js .selfscore[data-draw] .ss-fails li { transition: none !important; }
  .js .selfscore[data-draw] .ss-score, .js .selfscore[data-draw] .ss-label, .js .selfscore[data-draw] .ss-fails li { opacity: 1; }
  .js .selfscore[data-draw] .ss-beam { display: none; }
}

/* Why us, "Where we fit": full-width comparison grid. Code4X column first,
   tinted and edged in Signal; ticks in Ink (Signal in our column), crosses
   faint, partly as a half-filled ring. Rows appear in turn once in view. */
.cmp { margin-top: clamp(40px, 5vw, 64px); }
.cmp-scroll { position: relative; overflow-x: auto; scrollbar-width: thin; }
.cmp table { width: 100%; min-width: 760px; border-collapse: separate; border-spacing: 0; }
.cmp th, .cmp td { padding: 16px 18px; border-bottom: 1px solid var(--rule); text-align: center; vertical-align: middle; }
.cmp thead th { padding-top: 20px; font-size: .875rem; font-weight: 500; color: var(--muted); }
.cmp thead th.is-us { color: var(--signal); font-weight: 600; font-size: 1rem; }
.cmp tbody th { text-align: left; font-weight: 400; font-size: .95rem; color: var(--ink); width: 34%; }
.cmp tbody tr:last-child > * { border-bottom: 0; }
.cmp .is-us { background: rgba(34, 211, 238, .06); border-left: 1px solid rgba(34, 211, 238, .35); border-right: 1px solid rgba(34, 211, 238, .35); }
.cmp td svg { display: inline-block; vertical-align: middle; }
.cmp td.is-y { color: var(--ink); }
.cmp td.is-y.is-us { color: var(--signal); }
.cmp td.is-n { color: rgba(255, 255, 255, .28); }
.cmp td.is-p { color: var(--muted); }
.cmp tbody th { position: sticky; left: 0; background: var(--surface); }
.cmp-key { max-width: none; display: flex; justify-content: flex-end; gap: 18px; padding: 12px 18px 16px; border-top: 1px solid var(--rule); color: var(--muted); font-size: .75rem; }
.cmp-key span { display: inline-flex; align-items: center; gap: 6px; }
.cmp-key svg { width: 14px; height: 14px; }
.cmp-key .is-n svg { color: rgba(255, 255, 255, .4); }
.js .cmp[data-draw] tbody td svg { opacity: 0; transform: scale(.6); }
.js .cmp[data-draw].is-in tbody td svg { opacity: 1; transform: none; transition: opacity 350ms var(--ease), transform 350ms var(--ease); transition-delay: calc(150ms + var(--r, 0) * 90ms); }
@media (max-width: 760px) {
  .cmp table { min-width: 560px; }
  .cmp th, .cmp td { padding: 12px 10px; }
  .cmp tbody th { width: 150px; min-width: 150px; font-size: .82rem; }
  .cmp thead th { font-size: .75rem; }
  .cmp thead th.is-us { font-size: .875rem; }
}
@media (prefers-reduced-motion: reduce) { .js .cmp[data-draw] tbody td svg { opacity: 1; transform: none; transition: none !important; } }

/* Why us, the rubric: every check in the chosen layer. All four panels share
   one grid cell, so the frame keeps the tallest height and never jumps. */
.lx-panels { display: grid; }
.lx-panels > .lx-panel { grid-area: 1 / 1; transition: opacity 300ms var(--ease); }
.lx-panel.is-off { visibility: hidden; opacity: 0; }
.lx .lx-panel { min-height: 0; padding: 22px 24px 24px; }
.lx .lx-panel h3 { font-size: 1.6rem; }
.lx-list { list-style: none; columns: 2; column-gap: 28px; margin-top: 18px; padding-top: 6px; border-top: 1px solid var(--rule); font-size: .85rem; counter-reset: lx; }
.lx-list li { break-inside: avoid; display: flex; align-items: baseline; gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--rule); counter-increment: lx; }
.lx-list li::before { content: counter(lx, decimal-leading-zero); flex: none; width: 22px; font: .7rem var(--mono); color: var(--muted); }
.lx-list li span { flex: 1; }
.lx-tag { flex: none; padding: 1px 7px; border-radius: 999px; background: rgba(240, 180, 41, .12); color: var(--partial); font: 500 .66rem/1.5 var(--body); font-style: normal; }
.lx-key { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: .75rem; }
.js .lx-panel:not([hidden]) { animation: none; }
@media (max-width: 600px) { .lx-list { columns: 1; } }

/* Evidence code wraps on narrow screens instead of widening the card. */
.hs-ev { max-width: 100%; box-sizing: border-box; }
.hs-ev pre { white-space: pre-wrap; overflow-wrap: anywhere; }
.hs-req code { overflow-wrap: anywhere; }

/* Layer overview: question, one-line overview, what the client gains. */
.lx-over { margin-top: 14px; max-width: 52ch; line-height: 1.6; }
.lx-gain { list-style: none; display: grid; gap: 0; margin-top: 18px; border-top: 1px solid var(--rule); }
.lx-gain li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: start; padding: 12px 0; border-bottom: 1px solid var(--rule); }
.lx-gain li:last-child { border-bottom: 0; }
.lx-gain svg { margin-top: 5px; color: var(--signal); }

/* Pricing hero: a scoped proposal. Rows arrive in turn on a Signal line;
   the free scan is ticked as done; live agent testing marked optional. */
.quote { width: 100%; max-width: 460px; margin: 0; padding: 22px 24px 20px; border: 1px solid rgba(255, 255, 255, .12); border-radius: 16px; background: var(--surface); }
.q-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding-bottom: 16px; border-bottom: 1px solid var(--rule); }
.q-head b { display: block; font-weight: 600; }
.q-head small { display: block; margin-top: 2px; color: var(--muted); font: .78rem var(--mono); }
.q-tag { padding: 4px 10px; border-radius: 999px; background: rgba(34, 211, 238, .1); color: var(--signal); font-size: .72rem; font-weight: 500; white-space: nowrap; }
.q-steps { position: relative; list-style: none; margin-top: 6px; }
.q-steps li { position: relative; display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 14px; align-items: start; padding: 14px 0; border-bottom: 1px solid var(--rule); }
/* The line runs from each dot to the next (dot centres sit 25px into every row). */
.q-steps li:not(:last-child)::before, .q-steps li:not(:last-child)::after { content: ""; position: absolute; left: 10px; top: 25px; bottom: -25px; width: 2px; margin-left: -1px; background: rgba(255, 255, 255, .1); }
.q-steps li:not(:last-child)::after { background: var(--signal); transform-origin: top; }
.q-steps li:last-child { border-bottom: 0; }
.q-steps i { margin-top: 1px; position: relative; z-index: 1; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: #15191C; box-shadow: 0 0 0 1px rgba(34, 211, 238, .6); }
.q-steps .is-done i { background: var(--signal); box-shadow: none; color: var(--paper); }
.q-steps .is-opt i { box-shadow: 0 0 0 1px rgba(255, 255, 255, .25); }
.q-steps b { display: block; font-weight: 500; font-size: .95rem; }
.q-steps small { display: block; margin-top: 2px; color: var(--muted); font-size: .76rem; }
.q-price { margin-top: 1px; font-weight: 600; white-space: nowrap; }
.q-price small { display: inline; margin: 0 2px; color: var(--muted); font-weight: 400; font-size: .72rem; }
.q-steps .is-opt b, .q-steps .is-opt .q-price { color: var(--muted); }
.q-foot { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--rule); color: var(--muted); font-size: .75rem; }
.js .quote[data-draw] .q-steps li { opacity: 0; }
.js .quote[data-draw] .q-steps li::after { transform: scaleY(0); }
.js .quote[data-draw].is-in .q-steps li { opacity: 1; transition: opacity 450ms var(--ease); }
.js .quote[data-draw].is-in .q-steps li:nth-child(2) { transition-delay: 450ms; }
.js .quote[data-draw].is-in .q-steps li:nth-child(3) { transition-delay: 900ms; }
.js .quote[data-draw].is-in .q-steps li:nth-child(4) { transition-delay: 1350ms; }
.js .quote[data-draw].is-in .q-steps li::after { transform: scaleY(1); transition: transform 450ms cubic-bezier(.45, 0, .55, 1) 250ms; }
.js .quote[data-draw].is-in .q-steps li:nth-child(2)::after { transition-delay: 700ms; }
.js .quote[data-draw].is-in .q-steps li:nth-child(3)::after { transition-delay: 1150ms; }
@media (prefers-reduced-motion: reduce) {
  .js .quote[data-draw] .q-steps li { opacity: 1; transition: none !important; }
  .js .quote[data-draw] .q-steps li::after { transform: none; transition: none !important; }
}

/* ==================================================================== Blog
   From stripe.com/blog (owner, Oct 4, 2026). Hero: the latest post as a
   featured card (text left, 16:9 cover right) over a skewed band of Signal
   dots that runs past the card. Rows: the date with a tick on top; title
   (cols 1-8) and author (cols 10-12) on one line; description + Read more
   (cols 1-5) level with a 16:9 cover (cols 7-12). Phones: date, title,
   author, cover, description, Read more. */
.bl-hero { position: relative; padding: clamp(48px, 6vw, 80px) var(--inset) clamp(56px, 7vw, 88px); overflow: hidden; }
.bl-band {
  position: absolute; left: -10%; right: -10%; top: 34%; height: 58%; transform: skewY(-7deg); pointer-events: none;
  background-image: radial-gradient(circle, rgba(34, 211, 238, .9) 1.3px, transparent 1.8px), linear-gradient(90deg, rgba(34, 211, 238, 0), rgba(34, 211, 238, .08) 30%, rgba(34, 211, 238, .14) 70%, rgba(34, 211, 238, 0));
  background-size: 14px 14px, 100% 100%;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent), linear-gradient(transparent, #000 20%, #000 80%, transparent);
  -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent), linear-gradient(transparent, #000 20%, #000 80%, transparent);
  mask-composite: intersect; opacity: .8;
}
.bl-feat { position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 4vw, 56px); align-items: center; padding: clamp(24px, 3vw, 36px); border: 1px solid rgba(255, 255, 255, .12); border-radius: 18px; background: var(--surface); box-shadow: 0 30px 80px rgba(0, 0, 0, .55); }
.bl-feat .bl-title { margin-top: 18px; font-size: clamp(1.9rem, 3vw, 2.75rem); }
.bl-feat .bl-by { margin-top: 22px; }
.bl-feat .bl-desc { margin-top: 20px; }
.bl-feat .bl-img { border-radius: 12px; }

.bl-rows > .bl-row:first-child { padding-top: 8px; }
.bl-row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2vw, 28px); padding: clamp(40px, 5vw, 64px) 0; border-bottom: 1px solid var(--rule); }
.bl-rows > .bl-row:last-child { border-bottom: 0; }
.bl-row .bl-dt { grid-column: 1 / -1; grid-row: 1; }
.bl-title { font-size: clamp(1.6rem, 2.6vw, 2.4rem); font-weight: 500; letter-spacing: -.03em; line-height: 1.15; }
.bl-row .bl-title { grid-column: 1 / 9; grid-row: 2; margin-top: 18px; }
.bl-title a { color: var(--ink); text-decoration: none; }
.bl-title a:hover { color: var(--signal); }
.bl-dt { position: relative; padding-left: 18px; color: var(--muted); font-size: .92rem; }
.bl-dt::before { content: ""; position: absolute; left: 0; top: 2px; bottom: 2px; width: 1px; background: var(--rule-strong); }
.bl-by { display: flex; align-items: center; gap: 12px; }
.bl-row .bl-by { grid-column: 10 / 13; grid-row: 2; align-self: start; margin-top: 22px; }
.bl-by .av { width: 40px; height: 40px; font-size: .72rem; flex: none; }
.bl-by b { display: block; font-weight: 500; font-size: .95rem; }
.bl-by small { display: block; margin-top: 2px; color: var(--muted); font-size: .85rem; }
.bl-row .bl-txt { grid-column: 1 / 6; grid-row: 3; margin-top: 24px; }
.bl-desc { color: var(--muted); font-size: 1.0625rem; line-height: 1.65; }
.bl-more { display: inline-flex; align-items: center; gap: 6px; margin-top: 18px; color: var(--signal); font-size: .95rem; text-decoration: none; }
.bl-more:hover { text-decoration: none; color: var(--ink); }
.bl-more svg { transition: transform 200ms var(--ease); }
.bl-more:hover svg { transform: translateX(3px); }
.bl-img { display: block; overflow: hidden; border-radius: 14px; border: 1px solid var(--rule); }
.bl-row .bl-img { grid-column: 7 / 13; grid-row: 3; margin-top: 30px; }
.bl-img img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; transition: transform 500ms var(--ease); }
.bl-img:hover img { transform: scale(1.02); }
@media (max-width: 900px) {
  .bl-feat { grid-template-columns: minmax(0, 1fr); }
  .bl-feat .bl-img { order: -1; }
  .bl-row { grid-template-columns: minmax(0, 1fr); }
  .bl-row .bl-dt, .bl-row .bl-title, .bl-row .bl-by, .bl-row .bl-txt, .bl-row .bl-img { grid-column: 1; grid-row: auto; }
  .bl-row .bl-title { margin-top: 14px; }
  .bl-row .bl-by { margin-top: 16px; }
  .bl-row .bl-img { order: 4; margin-top: 20px; }
  .bl-row .bl-txt { order: 5; margin-top: 18px; }
}

/* Post page: the title and date sit in the right column, level with the
   body; the author sits in the left column. Rails run through. */
.bl-post-head { padding: clamp(56px, 7vw, 96px) var(--inset) clamp(32px, 4vw, 48px); }
.bl-post-grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 8fr); column-gap: clamp(32px, 5vw, 72px); }
.bl-post-head h1 { font-size: clamp(2.2rem, 4.4vw, 3.75rem); font-weight: 500; letter-spacing: -.035em; line-height: 1.08; }
.bl-post-head .bl-dt { margin-top: clamp(28px, 4vw, 44px); }
.bl-post-body { padding-top: clamp(40px, 5vw, 56px); }
.bl-side { align-self: start; position: sticky; top: 108px; }
.bl-body { max-width: 68ch; font-size: 1.125rem; line-height: 1.75; }
.bl-body > * + * { margin-top: 20px; }
.bl-lede { color: var(--ink); }
.bl-body h2 { margin-top: 52px; font-size: clamp(1.6rem, 2.4vw, 2.1rem); font-weight: 500; letter-spacing: -.025em; line-height: 1.2; }
.bl-body ul { padding-left: 22px; }
.bl-body li + li { margin-top: 6px; }
.bl-body pre { padding: 16px 18px; border: 1px solid var(--rule); border-radius: 12px; background: rgba(0, 0, 0, .3); font: .875rem/1.7 var(--mono); overflow-x: auto; }
.bl-ph { color: var(--muted); }
.bl-note { padding: 16px 18px; border-left: 2px solid var(--signal); border-radius: 0 12px 12px 0; background: rgba(34, 211, 238, .05); }
@media (max-width: 860px) {
  .bl-post-grid { grid-template-columns: minmax(0, 1fr); }
  .bl-post-head .bl-post-grid > div:first-child { display: none; }
  .bl-post-head .bl-dt { margin-top: 20px; }
  .bl-side { position: static; margin-bottom: 28px; }
  .bl-body { font-size: 1.0625rem; }
}

/* ============================================================ Free check
   Visitor flow (free_check_spec.md): a stepped card in the hero (domain,
   details, running), then the results full width below. No score: a
   summary of failed, critical and passed checks, then each check with what
   we found and what it means. */
.fc-grid { min-height: 0; }
.fc-points { list-style: none; display: grid; gap: 10px; margin-top: 32px; color: var(--muted); }
.fc-points li { position: relative; padding-left: 20px; }
.fc-points li::before { content: ""; position: absolute; left: 0; top: .62em; width: 8px; height: 8px; border-radius: 50%; background: var(--signal); }
.fc-wrap { display: flex; align-items: center; justify-content: center; padding: 40px clamp(20px, 3vw, 40px); }
.fc-card { width: 100%; max-width: 480px; padding: 22px 24px 26px; border: 1px solid rgba(255, 255, 255, .12); border-radius: 16px; background: var(--surface); }
.fc-steps { list-style: none; display: flex; gap: 6px; padding-bottom: 18px; margin-bottom: 20px; border-bottom: 1px solid var(--rule); }
.fc-steps li { display: inline-flex; align-items: center; gap: 8px; flex: 1; color: var(--muted); font-size: .8rem; }
.fc-steps i { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; font-style: normal; font-size: .72rem; background: #15191C; box-shadow: 0 0 0 1px rgba(255, 255, 255, .14); }
.fc-steps .is-on { color: var(--ink); }
.fc-steps .is-on i { background: #0E2A30; box-shadow: 0 0 0 1px rgba(34, 211, 238, .7); color: var(--signal); }
.fc-steps .is-done i { background: var(--signal); box-shadow: none; color: var(--paper); }
.fc-title { font-size: 1.25rem; font-weight: 500; letter-spacing: -.015em; line-height: 1.3; }
.fc-view[hidden] { display: none; }
.fc-label { display: block; margin: 16px 0 6px; font-size: .82rem; color: var(--muted); }
.fc-opt { margin-left: 4px; font-size: .75rem; opacity: .7; }
.fc-card .inp { width: 100%; }
.fc-btn { width: 100%; margin-top: 18px; padding: 13px 20px; }
.fc-btn:disabled { opacity: .7; cursor: progress; }
.fc-err { margin-top: 10px; color: var(--fail); font-size: .85rem; }
.fc-help { margin-top: 14px; color: var(--muted); font-size: .8rem; line-height: 1.5; }
.fc-help a { color: var(--muted); }
.fc-site { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; font-size: .85rem; color: var(--muted); }
.fc-site b { color: var(--ink); font: 500 .85rem var(--mono); }
.fc-change { padding: 0; border: 0; background: none; color: var(--signal); font: inherit; cursor: pointer; }
.fc-fields { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 14px; }
.fc-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.fc-consent { display: flex; align-items: flex-start; gap: 10px; margin-top: 18px; font-size: .85rem; color: var(--ink); cursor: pointer; }
.fc-consent input { margin-top: 3px; accent-color: var(--signal); width: 16px; height: 16px; }
.fc-bar { height: 4px; margin-top: 14px; border-radius: 999px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.fc-bar i { display: block; height: 100%; width: 0; background: var(--signal); transition: width 300ms var(--ease); }
.fc-live { list-style: none; margin-top: 16px; }
.fc-live li { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--rule); font-size: .875rem; }
.fc-live li:last-child { border-bottom: 0; }
.fc-live em { font-style: normal; font-size: .75rem; color: var(--muted); }
.fc-spin { width: 12px; height: 12px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .15); border-top-color: var(--signal); animation: fc-spin 800ms linear infinite; }
@keyframes fc-spin { to { transform: rotate(360deg); } }
.fc-live li[class*="is-"] .fc-spin { animation: none; border: 0; }
.fc-live .is-pass .fc-spin { background: var(--pass); }
.fc-live .is-fail .fc-spin { background: var(--fail); }
.fc-live .is-na .fc-spin { background: rgba(255, 255, 255, .25); }
.fc-live .is-pass em { color: var(--pass); }
.fc-live .is-fail em { color: var(--fail); }

.fc-results[hidden] { display: none; }
.fc-demo { display: inline-block; margin-bottom: 24px; padding: 6px 12px; border-radius: 999px; background: rgba(240, 180, 41, .1); color: var(--partial); font-size: .78rem; }
.fc-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 20px; }
.fc-dom { color: var(--signal); }
.fc-date { margin-top: 8px; color: var(--muted); font-size: .9rem; }
.fc-share { display: flex; gap: 10px; }
.fc-sum { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 28px; }
.fc-sum li { padding: 18px 20px; border: 1px solid rgba(255, 255, 255, .12); border-radius: 14px; background: var(--surface); }
.fc-sum b { display: block; font-size: 2.4rem; font-weight: 600; letter-spacing: -.03em; line-height: 1; }
.fc-sum span { display: block; margin-top: 6px; color: var(--muted); font-size: .85rem; }
.fc-sum .is-fail b, .fc-sum .is-crit b { color: var(--fail); }
.fc-sum .is-crit { border-color: rgba(249, 138, 132, .35); }
.fc-sum .is-pass b { color: var(--pass); }
.fc-mail { margin-top: 16px; color: var(--muted); font-size: .85rem; }
.fc-list { list-style: none; display: grid; gap: 12px; margin-top: 28px; }
.fc-item { padding: 18px 20px; border: 1px solid rgba(255, 255, 255, .1); border-radius: 14px; background: var(--surface); }
.fc-item.is-fail { border-left: 2px solid var(--fail); }
.fc-item.is-pass { border-left: 2px solid var(--pass); }
.fc-item.is-na { opacity: .7; }
.fc-item-h { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.fc-item h3 { font-size: 1.05rem; font-weight: 500; }
.fc-st { font-size: .75rem; font-weight: 600; }
.fc-item.is-fail .fc-st { color: var(--fail); }
.fc-item.is-pass .fc-st { color: var(--pass); }
.fc-item.is-na .fc-st { color: var(--muted); }
.fc-imp { margin-left: auto; padding: 2px 10px; border-radius: 999px; font-size: .72rem; font-weight: 500; border: 1px solid currentColor; }
.fc-imp.is-critical { color: var(--fail); }
.fc-imp.is-moderate { color: var(--partial); }
.fc-imp.is-minor { color: var(--muted); }
.fc-item dl { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px 28px; margin-top: 14px; }
.fc-item dt { color: var(--muted); font-size: .75rem; }
.fc-item dd { margin: 4px 0 0; font-size: .92rem; line-height: 1.55; }
.fc-next { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: center; margin-top: 40px; padding: 28px; border: 1px solid rgba(34, 211, 238, .3); border-radius: 16px; background: rgba(34, 211, 238, .04); }
.fc-next .h-acts { margin-top: 0; }
.fc-toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 50; padding: 10px 16px; border-radius: 10px; background: var(--ink); color: var(--paper); font-size: .85rem; box-shadow: 0 10px 30px rgba(0, 0, 0, .4); }
.fc-toast[hidden] { display: none; }
@media (max-width: 760px) {
  .fc-fields, .fc-item dl, .fc-next { grid-template-columns: minmax(0, 1fr); }
  .fc-sum b { font-size: 1.9rem; }
  .fc-wrap { padding: 8px var(--inset) 40px; }
  .fc-steps li { font-size: .72rem; }
}

.h-two .fc-dom { color: var(--signal); }

/* Closing domain box on every leader page; it lights up when an
   "Am I AI-ready?" button brings the visitor here. */
.h-form .domain-row { border-radius: 12px; transition: box-shadow 400ms var(--ease); }
.h-form.is-called .domain-row { box-shadow: 0 0 0 4px rgba(34, 211, 238, .28); }
.h-alt { max-width: none; margin-top: 16px; text-align: center; font-size: .9rem; }
.h-alt a { color: var(--muted); }
.h-alt a:hover { color: var(--signal); }

/* Free check: no step tracker; Role as a list. */
.fc-grid { position: relative; overflow: hidden; }
.fc-grid > .h-copy, .fc-grid > .fc-wrap { position: relative; z-index: 1; }
.fc-card { padding: 28px 28px 30px; box-shadow: 0 30px 80px rgba(0, 0, 0, .55); }
.fc-card .fc-title { margin-bottom: 4px; }
.fc-fields { row-gap: 2px; }
.fc-select { appearance: none; -webkit-appearance: none; padding-right: 40px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%239AA4AB' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; }
.fc-select option { background: #0E1418; color: var(--ink); }
.fc-select:invalid, .fc-select option[value=""] { color: var(--muted); }
@media (max-width: 760px) { .fc-card { padding: 22px 20px 24px; } }
.h-form .form-error { text-align: center; }
.fc-select:has(option[value=""]:checked) { color: var(--muted); }

/* Hero dot fields (hero-field.js): a scan beam on the free check, rings of
   a call on Talk to an engineer. The canvas fills the frame, under the copy. */
.fc-grid > .hf { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.fc-full { grid-column: 1 / -1; }
.fc-card textarea.inp { min-height: 96px; resize: vertical; }
.fc-card .inp::placeholder { color: var(--muted); opacity: .8; }
.fc-first { max-width: none; margin-top: 28px; color: var(--muted); font-size: .95rem; }
.fc-more { color: var(--signal); text-decoration: none; font-weight: 500; white-space: nowrap; }
.fc-more span { display: inline-block; transition: transform 200ms var(--ease); }
.fc-more:hover { color: var(--ink); }
.fc-more:hover span { transform: translateX(3px); }
.fc-sent:focus { outline: none; }
.fc-sent p { margin-top: 12px; color: var(--muted); line-height: 1.55; }
.fc-sent b { color: var(--ink); font-weight: 500; }
.fc-mono { font-family: var(--mono); font-size: .92em; }
.fc-tick { display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 18px; border-radius: 50%; background: rgba(34, 211, 238, .12); box-shadow: 0 0 0 1px rgba(34, 211, 238, .5); }
.fc-tick::after { content: ""; width: 12px; height: 7px; margin-top: -3px; border: solid var(--signal); border-width: 0 0 2px 2px; transform: rotate(-45deg); }
/* Free check and Talk to an engineer: equal columns and room around the
   card, so the field shows on every side of it. */
.fc-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.fc-wrap { padding: 72px clamp(24px, 4vw, 56px); }
@media (max-width: 900px) { .fc-grid { grid-template-columns: minmax(0, 1fr); } .fc-wrap { padding: 8px var(--inset) 56px; } }
/* No dark halo around the card: the band reads as one clean area (owner,
   Oct 4, 2026). The domain step needs no visible label under its question. */
.fc-grid .fc-card { box-shadow: none; }
.fc-view[data-view="domain"] .fc-title { margin-bottom: 18px; }

/* Policy pages: the blog post layout, with "On this page" where a post has
   its author. The current section is Ink; links never underline. */
.lg-toc-h { color: var(--muted); font-size: .8rem; font-weight: 500; }
.lg-toc ol { list-style: none; display: grid; gap: 10px; margin-top: 14px; padding-left: 16px; border-left: 1px solid var(--rule); }
.lg-toc a { display: block; color: var(--muted); font-size: .9rem; line-height: 1.4; text-decoration: none; transition: color 160ms var(--ease); }
.lg-toc a:hover, .lg-toc a[aria-current="true"] { color: var(--ink); }
.lg-toc a[aria-current="true"] { box-shadow: -17px 0 0 -16px var(--signal); }
.page-legal .bl-body h2 { scroll-margin-top: 100px; font-size: clamp(1.35rem, 2vw, 1.6rem); margin-top: 44px; }
.page-legal .bl-body p, .page-legal .bl-body li { color: var(--muted); }
.page-legal .bl-body .bl-lede, .page-legal .bl-body b { color: var(--ink); font-weight: 500; }
.page-legal .bl-body a { color: var(--signal); text-decoration: none; }
.page-legal .bl-body a:hover { color: var(--ink); }
.page-legal .bl-body code { font: .9em var(--mono); color: var(--ink); }
@media (max-width: 900px) { .page-legal .bl-side { display: none; } }