/* Onward homepage, built from the "Onward – Homepage" canvas (handoff 2026-09-29)
   against tokens.css. Only the homepage loads this file; /sell, /buy, /privacy
   and /terms still use styles.css until that is reconciled with the tokens.
   Every var(--proposed-*) below is a value awaiting sign-off (tokens.css §2). */

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--surface-sunken);
  color: var(--text-primary);
  font-family: var(--font-ui);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p, ul { margin: 0; }
ul { padding: 0; list-style: none; }

a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
}

/* One content column: 64px gutters, capped at the mockup's 1440px frame.
   Backgrounds run full width; only the content is capped. */
.wrap {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding-left: var(--space-8);
  padding-right: var(--space-8);
}

/* ---------- Wordmark: the mark stands in for the "O" (Confluence) ---------- */

.wordmark {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: var(--tracking-heading);
  line-height: 1;
  text-decoration: none;
}
.wordmark img {
  width: 0.96em;
  height: 0.96em;
  position: relative;
  top: 0.055em;
  margin-right: -0.03em;
}
.wordmark--header { font-size: var(--text-h3); color: var(--onward-stone); }
.wordmark--footer { font-size: var(--text-h3); color: var(--text-on-dark); }

/* ---------- Buttons and links ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid transparent;
  border-radius: var(--proposed-radius-control);
  font-family: var(--font-ui);
  font-weight: 600;
  line-height: var(--leading-snug);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease),
              border-color var(--duration-fast) var(--ease),
              color var(--duration-fast) var(--ease);
}
.btn--primary {
  background: var(--action-primary);
  border-color: var(--action-primary);
  color: var(--action-primary-text);
}
.btn--primary:hover {
  background: var(--action-primary-hover);
  border-color: var(--action-primary-hover);
}
.btn--secondary {
  background: transparent;
  border-color: var(--action-secondary);
  color: var(--action-secondary);
}
.btn--secondary:hover {
  border-color: var(--proposed-text-accent-strong);
  color: var(--proposed-text-accent-strong);
}
/* The two large CTAs in the hero and closing band. */
.btn--lg {
  min-width: 270px;
  padding: calc(var(--space-4) + var(--space-1)) var(--space-6);
  font-size: var(--proposed-text-button);
}
/* Small inline button, used by the estimator's email opt-in (main.js). */
.btn--ink {
  min-height: var(--tap-target-min);
  padding: 0 var(--space-4);
  background: var(--action-secondary);
  border-color: var(--action-secondary);
  color: var(--action-primary-text);
  font-size: var(--text-sm);
  /* White on ink is 15:1, so this label can stay small. */
}
.btn--ink:hover { background: var(--text-secondary); border-color: var(--text-secondary); }
.btn:disabled { opacity: 0.6; cursor: default; }

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: calc(var(--space-6) + var(--space-2));
}

.text-link {
  align-self: flex-start;
  margin-top: var(--space-5);
  font-size: var(--text-body);
  font-weight: 600;
  color: var(--proposed-text-accent-strong);
  text-underline-offset: 3px;
}
.text-link:hover { text-decoration-thickness: 2px; }
.text-link--on-dark { color: var(--proposed-text-accent-on-dark); }

/* ---------- 1. Top nav, on paper ---------- */

/* The header stays put while the page scrolls, so the nav and the early
   access button are always in reach. It needs the page's own background to
   cover what scrolls under it; scroll-padding keeps #worth and the other
   in-page links from landing underneath it. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--surface-sunken);
  border-bottom: var(--border-width) solid var(--line-strong);
}
html { scroll-padding-top: 96px; }
.site-header__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-6);
  padding-top: calc(var(--space-4) + 2px);
  padding-bottom: calc(var(--space-4) + 2px);
}
.site-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  margin-left: auto;
  font-size: var(--text-sm);
}
.site-nav a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-target-min);
  color: var(--proposed-text-muted-warm);
  text-decoration: none;
  white-space: nowrap;
}
.site-nav a:hover { color: var(--text-primary); text-decoration: underline; text-underline-offset: 4px; }
/* The header's one call to action: Request early access in preview. */
.btn--header {
  min-height: var(--tap-target-min);
  padding: var(--space-2) var(--space-5);
  font-size: var(--text-sm);
}

/* ---------- 2. Hero, on paper ---------- */

.hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  align-items: center;
  gap: var(--space-8);
  padding-top: calc(var(--space-9) + var(--space-3));
  padding-bottom: calc(var(--space-9) + var(--space-2));
}
.hero__copy { display: flex; flex-direction: column; }
.hero__title {
  max-width: 15ch;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--proposed-text-hero);
  line-height: 1.04;
  letter-spacing: var(--tracking-heading);
}
.hero__sub {
  max-width: 36ch;
  margin-top: calc(var(--space-5) + 2px);
  font-size: var(--text-h3);
  line-height: 1.5;
  color: var(--proposed-text-muted-warm);
}

/* ---------- 3. Seller and buyer panels ---------- */

.paths {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: var(--border-width) solid var(--line-strong);
}
.path {
  display: flex;
  justify-content: flex-end;
}
.path--seller { background: var(--surface-raised); }
.path--buyer {
  justify-content: flex-start;
  background: var(--proposed-surface-sand);
  border-left: var(--border-width) solid var(--line-strong);
}
/* Each half holds half the 1440 frame, so panel copy lines up with the hero. */
.path__inner {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 720px;
  padding: calc(var(--space-8) + var(--space-5)) var(--space-8);
}
.section-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--proposed-text-section);
  line-height: 1.08;
  letter-spacing: var(--tracking-heading);
}
.path .section-title { max-width: 14ch; }
.path__tagline {
  margin-top: var(--space-3);
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-h3);
  line-height: var(--leading-snug);
  color: var(--proposed-text-accent-strong);
}
.path__lede {
  max-width: 44ch;
  margin-top: var(--space-5);
  font-size: var(--text-body-lg);
  line-height: 1.65;
}
.bullets {
  max-width: 46ch;
  margin-top: calc(var(--space-5) - 2px);
}
.bullets li {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-top: var(--border-width) solid var(--line-strong);
  line-height: 1.55;
}
.bullets li::before {
  content: "";
  flex-shrink: 0;
  width: var(--space-2);
  height: var(--space-2);
  margin-top: 9px;
  border-radius: var(--radius-pill);
  background: var(--onward-orange);
}

/* ---------- 4. How Onward works, on ink ---------- */

.how {
  background: var(--surface-inverse);
  color: var(--text-on-dark);
}
.how__inner {
  padding-top: var(--space-9);
  padding-bottom: var(--space-9);
}
.how .section-title { color: var(--text-on-dark); }
.how__tracks {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-8);
  margin-top: calc(var(--space-6) + var(--space-2));
}
.track {
  display: flex;
  flex-direction: column;
}
.track__title {
  padding-bottom: var(--space-3);
  border-bottom: 3px solid var(--onward-orange);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-h3);
  line-height: var(--leading-snug);
}
.track--buying .track__title { border-bottom-color: var(--onward-paper); }
.steps li {
  display: flex;
  gap: var(--space-4);
  padding: calc(var(--space-4) + 2px) 0;
  border-bottom: var(--border-width) solid var(--line-inverse);
}
/* Numbers are 22px SemiBold so they count as large text: white on orange is
   3.2:1, which passes AA only at large sizes. */
.step__num {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--proposed-radius-control);
  background: var(--action-primary);
  color: var(--action-primary-text);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-h3);
  line-height: 1;
}
.track--buying .step__num {
  background: var(--onward-paper);
  color: var(--text-primary);
}
.step__body { display: flex; flex-direction: column; gap: var(--space-1); }
.step__title { font-size: var(--text-body-lg); font-weight: 600; line-height: var(--leading-snug); }
.step__text { line-height: 1.55; color: var(--text-on-dark-muted); }

/* The four shared steps (the same four the videos walk through). */
.how__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4) var(--space-6);
}
.how__video { color: var(--text-on-dark); font-size: var(--text-body-lg); }
.steps--four {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 var(--space-8);
  margin-top: calc(var(--space-6) + var(--space-2));
  border-top: 3px solid var(--onward-orange);
}
.steps--four .step__body { gap: var(--space-2); }
.step__who {
  display: inline-block;
  min-width: 4.6em;
  font-size: var(--text-label);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-on-dark);
}
.how__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-7);
  margin-top: var(--space-6);
}

/* ---------- 5. Estimator, on paper ---------- */

.worth__inner {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: calc(var(--space-8) + var(--space-2));
  align-items: start;
  padding-top: var(--space-9);
  padding-bottom: var(--space-9);
}
.worth .section-title { line-height: var(--leading-tight); }
.worth__sub {
  max-width: 40ch;
  margin-top: calc(var(--space-4) + 2px);
  font-size: var(--text-body-lg);
  color: var(--proposed-text-muted-warm);
}
.worth-form {
  display: flex;
  flex-direction: column;
  gap: calc(var(--space-4) + 2px);
  padding: calc(var(--space-5) + 2px);
  background: var(--surface-raised);
  border: var(--border-width) solid var(--line-strong);
  border-radius: var(--proposed-radius-card);
}
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: var(--text-sm); font-weight: 600; }
.field input,
.field select,
.worth-result__optin-row input {
  width: 100%;
  height: var(--control-height);
  padding: 0 var(--space-3);
  /* Stone, not --line-strong: a field's edge needs 3:1 against its ground
     (WCAG 1.4.11). --line-strong is 1.3:1 on paper. */
  border: var(--border-width) solid var(--onward-stone);
  border-radius: var(--proposed-radius-field);
  background: var(--surface-sunken);
  color: var(--text-primary);
  font-family: var(--font-ui);
  font-size: var(--text-body);
}
.field input::placeholder,
.worth-result__optin-row input::placeholder { color: var(--proposed-text-muted-warm); }
.field input:focus-visible,
.field select:focus-visible,
.worth-result__optin-row input:focus-visible { outline-offset: 1px; }
.worth-form > .btn {
  min-height: calc(var(--control-height) + var(--space-1));
  font-size: var(--proposed-text-button);
}
.worth-form__note {
  font-size: var(--text-label);
  line-height: 1.5;
  color: var(--proposed-text-muted-warm);
}

/* The result block is drawn by assets/js/main.js; class names are fixed there. */
.worth-result {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5);
  background: var(--surface-sunken);
  border-left: 3px solid var(--onward-orange);
}
.worth-result[hidden] { display: none; }
.worth-result__lead { font-size: var(--text-body-lg); line-height: 1.5; }
.worth-result__lead strong { font-family: var(--font-display); font-size: var(--text-h3); font-weight: 600; }
.worth-result__note,
.worth-result__heading { font-size: var(--text-sm); line-height: 1.5; color: var(--proposed-text-muted-warm); }
.worth-result__heading { font-weight: 600; color: var(--text-secondary); }
.worth-result__note a { color: var(--proposed-text-accent-strong); font-weight: 600; }
.worth-result__drivers {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--text-secondary);
}
.worth-result__drivers li { padding-left: var(--space-4); position: relative; }
.worth-result__drivers li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 6px;
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--onward-orange);
}
.worth-result__optin {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-top: var(--space-3);
  border-top: var(--border-width) solid var(--line-strong);
}
.worth-result__optin label { font-size: var(--text-sm); font-weight: 600; }
.worth-result__optin-row { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.worth-result__optin-row input { flex: 1 1 200px; width: auto; background: var(--surface-raised); }
.worth-result__optin-note { font-size: var(--text-label); line-height: 1.5; color: var(--proposed-text-muted-warm); }

/* ---------- 6. Closing, on sand; grows to meet the footer ---------- */

.closing {
  flex-grow: 1;
  display: flex;
  background: var(--proposed-surface-sand);
  border-top: var(--border-width) solid var(--line-strong);
}
.closing__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding-top: calc(var(--space-8) + var(--space-7));
  padding-bottom: calc(var(--space-8) + var(--space-7));
}
.closing .section-title { font-size: var(--proposed-text-closing); }
.closing__sub {
  max-width: 40ch;
  margin-top: var(--space-4);
  font-size: var(--proposed-text-button);
  line-height: 1.5;
  color: var(--proposed-text-muted-warm);
}
.closing .actions { justify-content: center; }

/* ---------- 7. Footer, on ink ---------- */

.site-footer {
  background: var(--surface-inverse);
  color: var(--text-on-dark);
}
.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-3) var(--space-6);
  padding-top: calc(var(--space-6) + var(--space-1));
  padding-bottom: calc(var(--space-6) + var(--space-1));
}
.site-footer__tagline { font-family: var(--font-display); font-size: var(--text-body-lg); }
.site-footer__legal { margin-left: auto; font-size: var(--text-label); }
.site-footer__legal a { text-underline-offset: 3px; }

/* ---------- Responsive ---------- */

@media (max-width: 1100px) {
  :root {
    --proposed-text-hero: 60px;
    --proposed-text-closing: 44px;
    --proposed-text-section: 38px;
  }
  .wrap, .path__inner { padding-left: var(--space-7); padding-right: var(--space-7); }
  .worth__inner { gap: var(--space-7); }
}

/* Seven nav links and the button stop fitting on one row a little above the
   layout break, so the header stacks sooner: the button stays beside the
   wordmark and the nav wraps onto its own row. */
@media (max-width: 1040px) {
  .site-nav { order: 3; margin-left: 0; flex-basis: 100%; gap: 0 var(--space-4); }
  html { scroll-padding-top: 150px; }
  .btn--header { margin-left: auto; }
}

@media (max-width: 860px) {
  :root {
    --proposed-text-hero: 44px;
    --proposed-text-closing: 36px;
    --proposed-text-section: 32px;
  }
  .wrap, .path__inner { padding-left: var(--space-5); padding-right: var(--space-5); }

  .hero__inner { grid-template-columns: minmax(0, 1fr); gap: var(--space-7); padding-top: var(--space-8); padding-bottom: var(--space-8); }
  .steps--four { grid-template-columns: minmax(0, 1fr); }
  .hero__sub { font-size: var(--text-body-lg); }

  /* Two-column sections stack, seller first. */
  .paths, .how__tracks, .worth__inner { grid-template-columns: minmax(0, 1fr); }
  .path--buyer { border-left: 0; border-top: var(--border-width) solid var(--line-strong); }
  .path__inner { max-width: none; padding-top: var(--space-8); padding-bottom: var(--space-8); }
  .path__lede { font-size: var(--text-body); }
  .how__inner, .worth__inner { padding-top: var(--space-8); padding-bottom: var(--space-8); }
  .how__tracks { gap: var(--space-7); }
  .closing__inner { padding-top: var(--space-8); padding-bottom: var(--space-8); }

  .site-footer__legal { margin-left: 0; flex-basis: 100%; }
}

@media (max-width: 600px) {
  /* The 270px minimum would force two lines of buttons wider than the screen. */
  .actions { flex-direction: column; align-items: stretch; width: 100%; }
  .btn--lg { min-width: 0; }
  .worth-form { padding: var(--space-4); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn { transition: none; }
}

/* Preview mode (ONWARD-266/271): pages ship in their preview state;
   site-mode.js sets <html data-site-mode="live"> only when PREVIEW_MODE is
   explicitly off. Hide only, never set display. */
[data-site-mode="live"] .preview-only { display: none !important; }
html:not([data-site-mode="live"]) .live-only { display: none !important; }

/* The estimator's framed industry picker (ONWARD-276). */
.worth-industry { display: block; width: 100%; height: 56px; border: 0; background: transparent; }