/* Landing page. The hero sits on faint layout-grid paper: the product's subject is alignment and consistency. */
.container { max-width: 1120px; margin: 0 auto; padding-inline: 20px }
.stack { display: flex; flex-direction: column; gap: 14px }
.small { font-size: .82rem }

/* Nav */
.nav { position: sticky; top: 0; z-index: 5; background: color-mix(in srgb, var(--paper) 88%, transparent); backdrop-filter: saturate(1.2) blur(8px); border-bottom: 1px solid var(--line); padding-top: env(safe-area-inset-top, 0px) }
.nav-in { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 12px }
.logo { display: inline-flex; align-items: center; gap: 9px; color: var(--ink); text-decoration: none; font-family: var(--f-display); font-variation-settings: 'wdth' 78; font-weight: 800; font-size: 1.2rem; letter-spacing: -.015em }
.nav-links { display: flex; align-items: center; gap: 20px; font-size: .92rem }
.nav-links a:not(.btn) { color: var(--muted); text-decoration: none; font-weight: 600 }
.nav-links a:not(.btn):hover { color: var(--ink) }
.btn { text-decoration: none; color: var(--ink) }
.btn.primary { color: var(--accent-ink) }

/* Hero */
.hero {
  padding-block: 64px 72px; border-bottom: 1px solid var(--line);
  background-color: var(--paper);
  background-image:
    linear-gradient(to right, color-mix(in srgb, var(--line) 55%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in srgb, var(--line) 55%, transparent) 1px, transparent 1px);
  background-size: 24px 24px; background-position: -1px -1px;
}
.hero-in { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 48px; align-items: center }
.hero-copy { display: flex; flex-direction: column; gap: 20px; min-width: 0 }
.hero h1 { font-size: clamp(2.4rem, 5.2vw, 4.1rem); line-height: .98; font-variation-settings: 'wdth' 75; font-weight: 800; letter-spacing: -.025em; color: var(--navy) }
.lede { font-size: 1.12rem; max-width: 34em; color: var(--ink) }
.assure { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: .9rem }
.assure svg { color: var(--ok); flex: none }

/* Scan sheet (hero visual) */
.sheet { margin: 0; overflow: hidden; min-width: 0 }
.sheet-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; padding: 18px 20px; border-bottom: 1px solid var(--line); flex-wrap: wrap }
.sheet-title { font-family: var(--f-display); font-variation-settings: 'wdth' 82; font-weight: 700; font-size: 1.15rem; margin-top: 2px }
.sheet-score { display: flex; flex-direction: column; gap: 6px; min-width: 120px }
.score { font-family: var(--f-display); font-variation-settings: 'wdth' 75; font-weight: 800; font-size: 2.6rem; line-height: 1; color: var(--medium) }
.score small { font-size: 1rem; font-weight: 650; color: var(--muted) }
.meter { height: 6px; border-radius: 99px; background: var(--sunken); overflow: hidden }
.meter > span { display: block; height: 100%; background: var(--medium) }
.sheet-list { list-style: none; margin: 0; padding: 0 }
.sheet-list li { display: grid; grid-template-columns: 78px minmax(0, 1fr); gap: 12px; padding: 14px 20px; border-top: 1px solid var(--line) }
.sheet-list li:first-child { border-top: 0 }
.sheet-list li > .pill { align-self: start; justify-self: start; margin-top: 2px }
.f-what { font-weight: 650 }
.f-fe { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: .9rem; margin-top: 2px }
.f-where { font-size: .82rem; margin-top: 2px }
.sheet-foot { padding: 12px 20px; border-top: 1px solid var(--line); background: var(--sunken); font-size: .85rem }

/* Sections */
.band { padding-block: 72px }
.band.alt { background: var(--surface); border-block: 1px solid var(--line) }
.sec-head { display: flex; flex-direction: column; gap: 8px; margin-bottom: 28px; max-width: 46em }
.band h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); font-variation-settings: 'wdth' 78; font-weight: 800; color: var(--navy) }

.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface) }
table.rules { width: 100%; border-collapse: collapse; font-size: .95rem; min-width: 560px }
.rules th { text-align: left; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding: 12px 16px; border-bottom: 1px solid var(--line); background: var(--sunken) }
.rules td { padding: 12px 16px; border-top: 1px solid var(--line); vertical-align: top }
.rules tbody tr:first-child td { border-top: 0 }
.rules td:first-child { font-weight: 650; width: 34% }
.rules td:last-child { width: 1%; white-space: nowrap }

.steps3 { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; counter-reset: none }
.steps3 li { display: flex; flex-direction: column; gap: 8px; padding-top: 16px; border-top: 2px solid var(--navy) }
.step-n { font-family: var(--f-display); font-variation-settings: 'wdth' 75; font-weight: 800; font-size: 2rem; line-height: 1; color: var(--accent) }

.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: center }
.ticks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px }
.ticks li { position: relative; padding-left: 26px }
.ticks li::before { content: ''; position: absolute; left: 2px; top: .45em; width: 12px; height: 7px; border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(-45deg) }
pre.code { margin: 0; background: var(--sunken); border: 1px solid var(--line); border-radius: var(--r); padding: 18px; font-family: var(--f-mono); font-size: .8rem; line-height: 1.6; overflow-x: auto; color: var(--ink) }
pre.code .c { color: var(--muted) }
pre.code .s { color: var(--accent) }

.privacy-band { display: flex; flex-direction: column; gap: 12px }
.privacy-band > * { max-width: 760px }
.privacy-band p { font-size: 1.05rem }

.plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px }
.plan { padding: 22px; display: flex; flex-direction: column; gap: 16px }
.plan .btn { align-self: flex-start; margin-top: auto }
.plan-head { display: flex; justify-content: space-between; align-items: center; gap: 10px }
.plan h3 { font-size: 1.25rem }

.waitlist { margin-top: 16px; padding: 22px; display: flex; flex-direction: column; gap: 16px; scroll-margin-top: 80px }
.wl-fields { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); gap: 12px }
.field { display: flex; flex-direction: column; gap: 4px; min-width: 0 }
.field > span { font-size: .8rem; font-weight: 600; color: var(--muted) }
.field input, .field select, .field textarea { border: 1px solid var(--line); background: var(--surface); border-radius: 8px; padding: 9px 10px; width: 100%; min-width: 0 }
.field textarea { resize: vertical; font: inherit }
.field input[aria-invalid="true"] { border-color: var(--high) }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden }
.wl-msg { font-size: .9rem; font-weight: 600 }
.wl-msg.ok { color: var(--ok) }
.wl-msg.err { color: var(--high) }

.faq { display: flex; flex-direction: column; gap: 4px }
.faq > * { max-width: 780px; width: 100% }
.faq h2 { margin-bottom: 12px }
.faq details { border-top: 1px solid var(--line); padding-block: 14px }
.faq details:last-child { border-bottom: 1px solid var(--line) }
.faq summary { cursor: pointer; font-weight: 650; font-size: 1.02rem }
.faq details p { margin-top: 8px; color: var(--muted); max-width: 62ch }

.foot { padding-block: 28px 40px }
.foot-in { display: flex; flex-direction: column; gap: 10px; font-size: .88rem }
.foot nav { gap: 16px }

@media (max-width: 900px) {
  .hero { padding-block: 40px 48px }
  .hero-in, .split, .plans { grid-template-columns: minmax(0, 1fr) }
  .steps3 { grid-template-columns: minmax(0, 1fr) }
  .wl-fields { grid-template-columns: minmax(0, 1fr) }
  .nav-links a:not(.btn) { display: none }
  .band { padding-block: 52px }
}
@media (max-width: 520px) {
  .container { padding-inline: 16px }
  .sheet-list li { grid-template-columns: minmax(0, 1fr); gap: 6px }
  .sheet-list li .pill { justify-self: start }
}

/* Audit offers */
.offers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: stretch }
.offer { padding: 22px; display: flex; flex-direction: column; gap: 12px }
.offer.featured { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), var(--shadow) }
.offer h3 { font-size: 1.2rem }
.price { font-family: var(--f-display); font-variation-settings: 'wdth' 78; font-weight: 800; font-size: 1.7rem; line-height: 1.1 }
.price .muted { font-family: var(--f-body); font-variation-settings: 'wdth' 100; font-weight: 500; font-size: .9rem }
@media (max-width: 900px) { .offers { grid-template-columns: minmax(0, 1fr) } }