/* Page layout for audit.g8n.ai and its 404 page.
   Look comes from g8n-ds-2.0.0.css (the Scanner design system). This file only lays the page out and
   uses nothing but var(--…) tokens for color, type, space, radius, border and shadow. */

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; }
img, svg { max-width: 100%; }
[id] { scroll-margin-top: var(--space-9); }

/* ---------- Bands: a dark band is data-theme="dark" on the element; the page itself is light ---------- */
.band { background: var(--surface-0); color: var(--text-2); }
.band--deck { background: var(--surface-1); }
.section { padding-block: var(--space-8); }
.band + .section, .section + .section { border-top: var(--border-width) solid var(--line); }
.section.band + .section { border-top: 0; }

p { margin: 0 0 var(--space-4); max-width: var(--measure); line-height: var(--lh-relaxed); }
.lead { font-size: var(--fs-lg); line-height: var(--lh-relaxed); color: var(--text-2); }
.note { margin: var(--space-3) 0 0; font-size: var(--fs-sm); line-height: var(--lh-normal); color: var(--text-3); }
.note + .note { margin-top: var(--space-2); }

h1.g8n-display { font-size: clamp(var(--fs-h1), 5vw, var(--fs-display)); margin: var(--space-4) 0 var(--space-5); max-width: 15em; }
h2.g8n-display { font-size: clamp(var(--fs-h2), 3.4vw, var(--fs-h1)); margin: var(--space-3) 0 var(--space-5); max-width: 22em; }
h3 { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-h3); line-height: var(--lh-snug); letter-spacing: var(--ls-tight); color: var(--text-1); margin: 0 0 var(--space-3); }

/* ---------- Header ---------- */
.g8n-site-header__bar { max-width: var(--container-max); margin-inline: auto; padding-inline: var(--container-pad); }
.g8n-site-header__home { min-height: 44px; align-items: center; }
/* No page links on this page, so the call to action stays visible on phones and the menu button is not needed. */
.g8n-site-header__cta { display: inline-flex; }
.g8n-site-header__bar { justify-content: space-between; }
.g8n-site-header__nav, .g8n-site-header__toggle, .g8n-site-header__panel { display: none; }

/* ---------- Hero ---------- */
.hero { padding-block: var(--space-8) var(--space-9); }
.hero__grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: var(--space-8); align-items: center; }
.hero .lead { max-width: 36em; }
.chips { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-5) 0 0; padding: 0; }
.chip { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-1) var(--space-3); border: var(--border-width) solid var(--edge); border-radius: var(--radius-pill); background: var(--surface-1); color: var(--text-1); font-size: var(--fs-sm); line-height: var(--lh-normal); }
.price { margin: var(--space-6) 0 0; }
.price__amt { display: block; font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-display); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); color: var(--text-1); margin-bottom: var(--space-2); }
.price p { margin-bottom: 0; }
.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-top: var(--space-5); }

.signal { display: grid; justify-items: center; gap: var(--space-6); padding: var(--space-7) var(--space-6); border: var(--border-width) solid var(--line); border-radius: var(--radius-lg); background: var(--surface-1); box-shadow: var(--shadow-glow); }
.signal .g8n-mark { width: 100%; max-width: 12rem; height: auto; }
.signal .g8n-sweep { width: 100%; max-width: 16rem; }

/* ---------- Cards and grids ---------- */
.cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); margin-top: var(--space-5); }
.cards .g8n-card p:last-child, .g8n-card > p:last-child { margin-bottom: 0; }
.g8n-card { display: flex; flex-direction: column; align-items: flex-start; }
.g8n-card p { max-width: none; }
.g8n-card .actions { margin-top: auto; padding-top: var(--space-4); }
.bridge { padding: var(--space-6); }
.bridge h2.g8n-display { margin-top: var(--space-3); }

/* ---------- The brand path: four steps, the last one lit ---------- */
.path { --node: 1.25rem; list-style: none; margin: var(--space-6) 0 0; padding: 0; display: grid; gap: var(--space-6); }
.path__item { position: relative; padding-left: var(--space-7); }
.path__item::before { content: ""; position: absolute; z-index: 1; left: 0; top: 0; width: var(--node); height: var(--node); border-radius: var(--radius-pill); background: var(--surface-1); border: var(--border-width-bold) solid var(--text-1); }
.path__item::after { content: ""; position: absolute; left: calc(var(--node) / 2 - var(--border-width-tab) / 2); top: var(--node); bottom: calc(var(--node) - var(--space-6)); width: var(--border-width-tab); background: var(--accent); }
.path__item:last-child::after { display: none; }
.path__item--lit::before { background: var(--lit); border-color: var(--text-1); }
.path__item p { margin: var(--space-2) 0 0; }
.path__item strong { color: var(--text-1); }

/* ---------- Comparison ---------- */
.compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); margin-top: var(--space-5); }

/* ---------- Why me ---------- */
.whyme { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--space-7); align-items: start; }
.why { list-style: none; margin: 0; padding: 0; }
.why li { padding: var(--space-4) 0; border-bottom: var(--border-width) solid var(--line); line-height: var(--lh-relaxed); }
.why li:first-child { padding-top: 0; }
.why b { font-family: var(--font-display); color: var(--text-1); }
.proof { margin-top: var(--space-5); font-weight: var(--fw-bold); color: var(--text-1); }
.proof a { color: var(--text-1); text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: var(--border-width-bold); text-underline-offset: 0.25em; border-radius: var(--radius-xs); outline: var(--border-width-bold) solid transparent; }
.proof a:focus-visible, .g8n-link:focus-visible, .coming-note a:focus-visible { box-shadow: 0 0 0 2px var(--surface-0), 0 0 0 4px var(--accent), 0 0 0 6px var(--partner); }
.story { margin-top: var(--space-7); padding-inline-start: var(--space-5); border-inline-start: var(--border-width-tab) solid var(--edge); }
.story h3 { max-width: 28em; }
.story p:last-child { margin-bottom: 0; }

/* Markers: a dashed Courier label where an asset or wording is missing */
.placeholder { display: grid; place-items: center; min-height: 14rem; aspect-ratio: 1200 / 866; padding: var(--space-5); border: var(--border-width-bold) dashed var(--edge); border-radius: var(--radius-lg); background: var(--surface-2); font-family: var(--font-mono); font-weight: var(--fw-bold); font-size: var(--fs-xs); letter-spacing: var(--ls-label); text-align: center; color: var(--text-2); }
.coming { display: inline-flex; align-items: center; min-height: 1.5rem; padding: 0 var(--space-3); border: var(--border-width-bold) dashed var(--edge); border-radius: var(--radius-pill); font-family: var(--font-mono); font-weight: var(--fw-bold); font-size: var(--fs-xs); letter-spacing: var(--ls-badge); color: var(--text-2); }

/* ---------- Who this is for ---------- */
.two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-7); }
.two ul { margin: 0; padding-left: 1.1em; }
.two li { margin-bottom: var(--space-2); line-height: var(--lh-normal); }

/* ---------- What it costs ---------- */
.pricecard { padding: var(--space-6); max-width: 46rem; }
.pricecard .amt { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-display); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); color: var(--text-1); }
.pricecard .lbl { font-size: var(--fs-lg); color: var(--text-1); margin-left: var(--space-2); }
.pricecard .k { margin: var(--space-5) 0 var(--space-2); font-family: var(--font-display); font-weight: var(--fw-bold); color: var(--text-1); }
.pricecard ul { margin: 0 0 var(--space-4); padding-left: 1.15em; }
.pricecard li { margin-bottom: var(--space-2); line-height: var(--lh-normal); }
.pricecard .note { max-width: var(--measure); }
.or { display: flex; align-items: center; gap: var(--space-4); max-width: 46rem; margin: var(--space-6) 0; font-family: var(--font-mono); font-weight: var(--fw-bold); letter-spacing: var(--ls-label); color: var(--text-3); }
.or::before, .or::after { content: ""; flex: 1; height: var(--border-width); background: var(--line); }
.alt { max-width: 46rem; padding: var(--space-6); }

/* ---------- Other ways in ---------- */
.ways { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); margin-top: var(--space-5); }
.ways .g8n-card[data-surface="flat"] { border-style: solid; }
.ways .soon { border-style: dashed; }
.ways .soon p { color: var(--text-2); }

/* ---------- What you leave with ---------- */
.leave { padding: var(--space-6); max-width: 52rem; }

/* ---------- FAQ ---------- */
.faq { max-width: 52rem; }
.faq .g8n-accordion__summary { padding-block: var(--space-4); font-size: var(--fs-base); }
.faq .g8n-accordion__panel { padding: 0 var(--space-1) var(--space-4) calc(var(--space-4) + var(--space-5)); font-size: var(--fs-base); line-height: var(--lh-relaxed); }
.faq .g8n-accordion__panel p { margin: 0; max-width: var(--measure); }

/* ---------- Closing band ---------- */
.final { padding-block: var(--space-9); text-align: center; }
.final h2.g8n-display { margin-inline: auto; max-width: 20em; }
.final p { margin-inline: auto; }
.final .cta-row { justify-content: center; }

/* ---------- Footer ---------- */
.g8n-site-footer { padding-inline: 0; }
.g8n-site-footer__grid, .g8n-site-footer__base { max-width: var(--container-max); margin-inline: auto; padding-inline: var(--container-pad); }
.g8n-site-footer__link, .g8n-site-footer__base a { display: inline-flex; align-items: center; min-height: 24px; }

/* ---------- 404 ---------- */
.nf { padding-block: var(--space-9); }
.nf__grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: var(--space-8); align-items: center; }
.nf__links { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-3); margin: var(--space-5) 0 0; padding: 0; }
.trace { display: grid; place-items: center; padding: var(--space-6); border: var(--border-width) solid var(--line); border-radius: var(--radius-lg); background: var(--surface-1); box-shadow: var(--shadow-glow); }
.trace svg { width: 100%; max-width: 22rem; height: auto; }
.trace__glow { fill: none; stroke: var(--glow); stroke-width: 16; stroke-linecap: round; stroke-linejoin: round; opacity: 0.9; }
.trace__line { fill: none; stroke: var(--accent); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.trace__node { fill: var(--surface-1); stroke: var(--partner); stroke-width: 3; }
.trace__end { fill: var(--lit); }

/* ---------- Sticky call bar: phones only. audit.js hides it while a page button is on screen, so one primary button shows at a time. ---------- */
.buybar { display: none; background: var(--surface-0); }

/* ---------- Narrow screens: one column ---------- */
@media (min-width: 1024px) {
  .path { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-5); }
  .path__item { padding-left: 0; padding-top: var(--space-7); }
  .path__item::before { top: 0; }
  .path__item::after { top: calc(var(--node) / 2 - var(--border-width-tab) / 2); bottom: auto; left: var(--node); right: calc(var(--node) - var(--space-5)); width: auto; height: var(--border-width-tab); }
}
@media (max-width: 860px) {
  .hero__grid, .whyme, .nf__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-7); }
}
@media (max-width: 640px) {
  .section { padding-block: var(--space-7); }
  .hero { padding-block: var(--space-7); }
  .cards, .compare, .two, .ways { grid-template-columns: minmax(0, 1fr); }
  .two { gap: var(--space-6); }
  .bridge, .pricecard, .alt, .leave { padding: var(--space-5); }
  .signal { padding: var(--space-6) var(--space-5); }
  .cta-row .g8n-btn { white-space: normal; text-align: center; min-height: 52px; height: auto; padding-block: var(--space-3); }
  .g8n-site-header__bar { gap: var(--space-3); }
  body[data-bar] { padding-bottom: calc(5rem + env(safe-area-inset-bottom)); }
  .buybar { display: flex; position: fixed; inset: auto 0 0 0; z-index: var(--z-sticky); justify-content: center; padding: var(--space-3) var(--space-4) calc(var(--space-3) + env(safe-area-inset-bottom)); border-top: var(--border-width) solid var(--line); }
  .buybar[hidden] { display: none; }
  .buybar .g8n-btn { width: 100%; max-width: 26rem; white-space: normal; text-align: center; }
}
.two h3 { margin-top: var(--space-4); }
.path__item--lit .g8n-label { color: var(--lit-text); }
@media (min-width: 1024px) { .path__item { padding-top: var(--space-5); } }
body { min-height: 100vh; display: flex; flex-direction: column; }
main { flex: 1; display: flex; flex-direction: column; }
.nf { flex: 1; }
.photo { display: block; width: 100%; height: auto; border-radius: var(--radius-lg); border: var(--border-width) solid var(--line); }
figure.shot { margin: 0; padding: 0; }
figure.shot figcaption { margin-top: var(--space-3); color: var(--text-2); font-size: var(--fs-sm); line-height: var(--lh-relaxed); }
@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}

/* Wordmark sizes: the header mark is --fs-h3 (22px), the footer mark 1.25rem (20px). */
.wm-header { font-size: var(--fs-h3); }
.wm-footer { font-size: 1.25rem; }