/* OfferSheet v3 landing layout. Adapted from the approved v3 comp:
   same sections, same rhythm (88px desktop padding, 1px hairline
   separators), kinpaku tokens from kinpaku.css. Type sizes land only
   on the enumerated ramp (11, 12, 13, 14, 16, 18, 20, 24, 28, 32, 40,
   48, 56, 64, 72, 80, 88) plus the three fluid clamps (hero, h2, statement). */
.v3 { background: var(--ground); color: var(--champagne); }
.v3 a { color: inherit; }
.v3 .eyebrow {
  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
  font-size: 11px; font-weight: 500; letter-spacing: .18em;
  text-transform: uppercase; color: var(--gold); margin: 0 0 20px;
}
.v3 .wrap { padding: 88px 6vw; }
.v3 section { border-top: 1px solid var(--gold-hairline); }
.v3 h2 {
  font-family: "Albert Sans", system-ui, sans-serif;
  font-size: clamp(2.6rem, 4vw, 3.4rem); font-weight: 300;
  letter-spacing: 0; line-height: 1.04; margin: 0 0 12px;
}
.v3 .lede { color: var(--muted); font-size: 16px; line-height: 1.8; margin: 0 0 48px; max-width: 680px; }
.v3 .mono { font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; }

/* Slim top bar: wordmark, one section nav, one gold CTA. */
.v3 .topbar {
  display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
  padding: 20px 6vw; border-bottom: 1px solid var(--gold-hairline);
}
.v3 .topbar .brand { font-size: 18px; font-weight: 500; margin-right: auto; }
.v3 .topbar .nav-links {
  position: static; left: auto; transform: none; bottom: auto; z-index: auto;
  display: flex; gap: 20px; flex-wrap: wrap; max-width: none; overflow: visible;
  border: 0; border-radius: 0; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none;
  box-shadow: none; padding: 0;
}
.v3 .topbar .nav-links a { font-size: 14px; color: var(--muted); text-decoration: none; }
.v3 .topbar .nav-links a:hover { color: var(--champagne); }

/* Hero: full-viewport generated arena scene, nothing else. */
.v3 .hero {
  position: relative; min-height: 100vh; display: flex;
  flex-direction: column; justify-content: flex-end; overflow: hidden; border-top: 0;
}
.v3 .hero img.bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; max-width: none; margin: 0; }
.v3 .hero .shade {
  position: absolute; inset: 0; max-width: none; margin: 0;
  background: linear-gradient(180deg, oklch(7% 0.006 95 / .25) 0%, oklch(7% 0.006 95 / .35) 45%, oklch(7% 0.006 95 / .96) 100%);
}
.v3 .hero .inner { position: relative; padding: 0 6vw 8vh; max-width: 1200px; }
.v3 .hero h1 {
  margin: 0; font-family: "Albert Sans", system-ui, sans-serif;
  font-size: clamp(3.4rem, 6.5vw, 5.6rem); font-weight: 300;
  letter-spacing: -.01em; line-height: 1.02;
}
.v3 .hero p.sub { margin: 26px 0 0; max-width: 640px; font-size: 18px; line-height: 1.8; color: var(--warm); }
.v3 .cta-row { margin-top: 36px; display: flex; gap: 24px; align-items: center; flex-wrap: wrap; }
.v3 .quiet { color: var(--muted); font-size: 16px; text-decoration: underline; text-underline-offset: 4px; padding-block: 13px; }
.v3 .scrollcue { margin-top: 56px; font-size: 11px; letter-spacing: .18em; color: var(--faint); text-transform: uppercase; }

/* Statement: one huge sentence, theatrical void. */
.v3 .statement { padding: 120px 6vw; }
.v3 .statement .big {
  font-size: clamp(2.6rem, 4.5vw, 4rem); font-weight: 300; line-height: 1.1;
  margin: 0; max-width: 1000px;
}
.v3 .statement .big em { color: var(--gold); font-style: normal; }
.v3 .statement p.sub2 { color: var(--muted); font-size: 16px; line-height: 1.8; margin: 24px 0 0; max-width: 640px; }

/* Hairline diagrams: 1px strokes, functional only. */
.v3 .fig { border: 1px solid var(--gold-hairline); border-radius: 14px; background: var(--panel); padding: 34px 32px; margin-bottom: 28px; }
.v3 .fig .cap { font-size: 11px; font-weight: 500; letter-spacing: .18em; color: var(--muted); text-transform: uppercase; margin: 0 0 22px; }
.v3 .fig svg { width: 100%; height: auto; display: block; }
.v3 .steps { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0; border-top: 1px solid var(--gold-hairline); }
.v3 .step { padding: 28px 28px 8px 0; border-right: 1px solid var(--gold-hairline); }
.v3 .step:last-child { border-right: 0; padding-right: 0; }
.v3 .step .n { font-size: 11px; font-weight: 500; color: var(--gold); letter-spacing: .18em; }
.v3 .step h3 { font-size: 18px; font-weight: 500; line-height: 1.35; margin: 12px 0 8px; }
.v3 .step p { color: var(--muted); font-size: 16px; line-height: 1.8; margin: 0; }

/* Evidence cards, photo band, proof strip. */
.v3 .cards { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 22px; }
.v3 .card { border: 1px solid var(--gold-hairline); border-radius: 14px; background: var(--panel); padding: 26px 24px; }
.v3 .card h3 { font-size: 18px; font-weight: 500; margin: 0 0 8px; }
.v3 .card p { color: var(--muted); font-size: 16px; line-height: 1.8; margin: 0; }
.v3 .card .tag { display: inline-block; margin-top: 16px; border: 1px solid var(--gold-hairline); border-radius: 999px; padding: 8px 14px; font-size: 12px; color: var(--muted); }
.v3 .photo-band { margin: 28px 0 0; }
.v3 .photo-band img { width: 100%; height: auto; display: block; border-radius: 14px; }
.v3 .photo-band figcaption { color: var(--muted); font-size: 14px; line-height: 1.8; margin-top: 12px; }
.v3 .proof { margin-top: 28px; border: 1px solid var(--gold-hairline); border-radius: 14px; background: var(--panel); padding: 26px 24px; }
.v3 .proof h3 { font-size: 18px; font-weight: 500; margin: 0 0 8px; }
.v3 .proof .note { color: var(--muted); font-size: 14px; line-height: 1.8; margin: 0 0 20px; }
.v3 .proof table { width: 100%; border-collapse: collapse; font-size: 14px; }
.v3 .proof th, .v3 .proof td { text-align: left; padding: 12px 12px 12px 0; border-top: 1px solid var(--gold-hairline); color: var(--warm); }
.v3 .proof th { color: var(--muted); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; }
.v3 .proof .hash { font-size: 13px; }

/* Formula. */
.v3 .formula-big { border: 1px solid var(--gold-hairline); border-radius: 14px; background: var(--panel); padding: 34px 32px; }
.v3 .formula-big .line { font-size: 24px; line-height: 1.35; margin: 0 0 16px; }
.v3 .formula-big .ceil { font-size: 18px; color: var(--warm); margin: 0 0 24px; }
.v3 .formula-big .quiet-lines { color: var(--muted); font-size: 16px; line-height: 1.8; margin: 0; }

/* Recorded trials. */
.v3 .trials { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 22px; }
.v3 .trial { border: 1px solid var(--gold-hairline); border-radius: 14px; background: var(--panel); padding: 26px 24px; }
.v3 .trial .rec { font-size: 11px; letter-spacing: .18em; color: var(--gold); text-transform: uppercase; margin: 0 0 16px; }
.v3 .trial .t-num { font-size: 48px; font-weight: 300; margin: 0 0 12px; }
.v3 .trial p { color: var(--muted); font-size: 16px; line-height: 1.8; margin: 0; }

/* Dashboard preview shell (static picture of the app shell; its
   destinations link to the real app sections). */
.v3 .shell { display: grid; grid-template-columns: 200px 1fr; border: 1px solid var(--gold-hairline); border-radius: 14px; overflow: hidden; }
.v3 .side { background: var(--deep); padding: 28px 24px; }
.v3 .side .brand { font-size: 18px; font-weight: 500; margin: 0 0 8px; }
.v3 .side .status { font-size: 12px; color: var(--verdigris); margin: 0 0 24px; }
.v3 .side-links { display: flex; flex-direction: column; gap: 4px; }
.v3 .side-links a { font-size: 14px; color: var(--muted); text-decoration: none; padding: 12px 0; }
.v3 .side-links a.on { color: var(--gold); }
.v3 .main { padding: 28px; }
.v3 .crumbs { font-size: 12px; color: var(--muted); margin: 0 0 20px; }
.v3 .formstrip { display: flex; gap: 16px; flex-wrap: wrap; align-items: end; border: 1px solid var(--gold-hairline); border-radius: 14px; background: var(--panel); padding: 20px; }
.v3 .formstrip .field { flex: 1 1 140px; }
.v3 .formstrip .field label { display: block; font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; font-weight: 500; font-size: 12px; color: var(--muted); margin-bottom: 8px; }
.v3 .formstrip .field .val { font-size: 16px; }
.v3 .verdict { margin-top: 22px; border: 1px solid var(--gold-hairline); border-radius: 14px; background: var(--panel); padding: 28px 24px; }
.v3 .verdict .who { color: var(--muted); font-size: 14px; margin: 0 0 12px; }
.v3 .verdict .num { font-size: 64px; font-weight: 300; margin: 0; line-height: 1.05; }
.v3 .verdict .num small { display: block; font-size: 16px; color: var(--muted); margin-top: 8px; }
.v3 .verdict .formula { color: var(--warm); font-size: 16px; margin: 16px 0; }
.v3 .verdict .chips { list-style: none; padding: 0; margin: 0; display: flex; gap: 12px; flex-wrap: wrap; }
.v3 .verdict .chips li { border: 1px solid var(--gold-hairline); border-radius: 999px; padding: 8px 14px; font-size: 12px; color: var(--muted); }
.v3 .evrow { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; margin-top: 22px; }
.v3 .evmini { border: 1px solid var(--gold-hairline); border-radius: 14px; background: var(--panel); padding: 20px; }
.v3 .evmini h3 { font-size: 18px; font-weight: 500; margin: 0 0 8px; }
.v3 .evmini p { color: var(--muted); font-size: 14px; line-height: 1.8; margin: 0; }
.v3 .workstrip { margin-top: 22px; border: 1px solid var(--gold-hairline); border-radius: 14px; background: var(--panel); padding: 20px 24px; }
.v3 .workstrip h3 { font-size: 18px; font-weight: 500; margin: 0 0 8px; }
.v3 .workstrip p { color: var(--muted); font-size: 14px; line-height: 1.8; margin: 0; }

/* Ledger. */
.v3 table.ledger { width: 100%; border-collapse: collapse; font-size: 16px; }
.v3 table.ledger th, .v3 table.ledger td { text-align: left; padding: 14px 14px 14px 0; border-top: 1px solid var(--gold-hairline); color: var(--warm); }
.v3 table.ledger th { font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; color: var(--muted); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; }
.v3 .empty { margin-top: 20px; color: var(--muted); font-size: 16px; line-height: 1.8; }

/* Mobile section: phone + static record. */
.v3 .mobile-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
.v3 .mobile-copy { font-size: 18px; line-height: 1.8; color: var(--warm); margin: 0; }
.v3 .pwa-note { color: var(--muted); font-size: 14px; line-height: 1.8; margin: 20px 0 0; }

/* Contrast only. `.v3 a { color: inherit }` was painting light text on the
   gold fill, and the topbar link color was painting muted gray on the
   white primary pill. Both sat under 4.5:1. Copy and layout are unchanged. */
.v3 a.cta-gold,
.v3 a.btn--gold {
  color: var(--on-gold);
  background: var(--gold);
}
.v3 .topbar .nav-links a.btn--primary {
  color: #0A0A0A;
  background: #FFFFFF;
}
.v3 .topbar .nav-links a.btn--primary:hover {
  color: #0A0A0A;
  background: #E5E5E5;
}

@media (max-width: 820px) {
  .v3 .wrap { padding: 72px 6vw; }
  .v3 .steps, .v3 .cards, .v3 .trials, .v3 .evrow { grid-template-columns: 1fr; }
  .v3 #flow .fig { display: none; }
  .v3 .step { border-right: 0; padding-right: 0; }
  .v3 .shell { grid-template-columns: 1fr; }
  .v3 .mobile-grid { grid-template-columns: 1fr; }
  .v3 .statement { padding: 88px 6vw; }
}