/* Home v3.4 (prepared Oct 30, 2026; NOT deployed). Extends /assets/site.css; uses its tokens only, no new colors.
   Served as /assets/home-v3.css after go-live (an external file, because the site's CSP is style-src 'self':
   an inline <style> block or style="" attribute would be blocked in production). Scoped to body.home-v3
   (the page also carries .home, so site.css's phone rules for the home page apply first). */

/* hero: one claim, who it is for, one proof line, two buttons */
.home-v3 .hero h1{max-width:13ch; font-size:clamp(40px,10.5vw,76px)}
.home-v3 .hero .sub,.home-v3 .hero .hero-for,.home-v3 .hero .hero-proof,.home-v3 .final p,.home-v3 .lede p{text-wrap:pretty}
.home-v3 .hero .sub{max-width:680px}
.home-v3 .hero .hero-for{max-width:700px; margin:16px auto 0; font-size:16px; line-height:1.55; color:var(--body)}
.home-v3 .hero .hero-for .lbl{display:inline-block; margin-right:8px; font-family:var(--mono); font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--brass)}
.home-v3 .hero .hero-proof{max-width:640px; margin-top:18px}
.home-v3 .hero .cta-row{margin-top:28px}
/* v3.2: the note under the buttons carries the free/paid difference, so it reads as body text, not a faint mono label */
.home-v3 .hero .cta-note{margin-top:14px; max-width:540px; font-family:var(--sans); font-size:15px; line-height:1.5; letter-spacing:0; color:var(--muted); text-wrap:balance}

/* the pipeline figure. Below 960px: a numbered rail (no card chrome, so the phone page stays short).
   From 960px: five boxes in one row with arrows between. */
.pipe-fig{margin-top:30px}
.pipe{list-style:none; display:grid; grid-template-columns:minmax(0,1fr); gap:0}
.pipe li{position:relative; min-width:0}
.pipe .n{font-family:var(--mono); font-size:12px; letter-spacing:.14em; color:var(--brass)}
.pipe h3{font-family:var(--serif); font-weight:400; line-height:1.1; color:var(--paper)}
.pipe p{color:var(--body)}
.pipe .stop{display:block; font-family:var(--mono); letter-spacing:.02em; color:var(--faint)}
@media (max-width:959px){
  .pipe li{padding:0 0 16px 30px}
  .pipe li:last-child{padding-bottom:0}
  .pipe li::before{content:""; position:absolute; left:1px; top:9px; width:9px; height:9px; border:1px solid var(--brass); background:var(--ink); transform:rotate(45deg)}
  .pipe li.end::before{background:var(--brass)}
  .pipe li:not(:last-child)::after{content:""; position:absolute; left:6px; top:21px; bottom:2px; width:1px; background:var(--brass-line)}
  .pipe .n{display:inline-block; min-width:2.6em}
  /* run-in heads: the step name and its sentence share a line */
  .pipe h3{display:inline; margin-right:8px; font-size:23px}
  .pipe p{display:inline; font-size:16px; line-height:1.55}
  .pipe .stop{margin-top:2px; font-size:12.5px}
  .pipe .stop::before{content:"\2192  "; color:var(--brass)}
}
.pipe-fig figcaption{margin-top:20px; max-width:72ch; font-size:15px; color:var(--muted)}
@media (min-width:960px){
  .pipe-fig{margin-top:36px}
  .pipe{grid-template-columns:repeat(5,minmax(0,1fr)); gap:26px}
  .pipe li{border:1px solid var(--line); border-radius:3px; background:var(--ink-2); padding:16px 18px 18px}
  .pipe li + li::before{content:""; position:absolute; left:-26px; top:40px; width:20px; height:1px; background:var(--brass-line)}
  .pipe li + li::after{content:""; position:absolute; left:-8px; top:35.5px; border-top:4.5px solid transparent; border-bottom:4.5px solid transparent; border-left:6px solid var(--brass)}
  .pipe li.end{border-color:var(--brass-line); background:linear-gradient(180deg,rgba(200,162,74,.08),var(--ink-2) 70%)}
  .pipe h3{font-size:26px; margin:4px 0 6px}
  .pipe p{font-size:15px; line-height:1.5}
  .pipe .stop{margin-top:10px; padding-top:9px; border-top:1px dashed var(--line); font-size:11.5px}
}

/* the worked example: five beats in the site's log style, beside a short lede.
   Each row: beat label and verdict on one line, the sentence under them. */
.home-v3 .ex .log{margin-top:0; max-width:none}
.home-v3 .ex .log-head{color:var(--brass)}
.home-v3 .ex .log-head a{color:var(--brass-2); display:inline-block; padding-block:4px}
.home-v3 .ex .log-row{grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"beat v" "k k"; gap:3px 14px; align-items:baseline; padding:12px 16px}
.home-v3 .ex .beat{grid-area:beat; font-size:11.5px; letter-spacing:.14em; color:var(--brass)}
.home-v3 .ex .v{grid-area:v; font-family:var(--mono); font-size:12.5px; white-space:nowrap; text-align:right}
.home-v3 .ex .k{grid-area:k; color:var(--body); font-family:var(--sans); font-size:16px; line-height:1.5}
.home-v3 .ex .log-foot{font-size:15px; line-height:1.5; color:var(--muted)}
.home-v3 .ex .lede p b{font-weight:500; color:var(--paper)}
.home-v3 .ex .more{margin-top:18px; display:flex; flex-wrap:wrap; gap:4px 22px; font-family:var(--mono); font-size:13px}
.home-v3 .ex .more a{display:inline-block; padding-block:4px}
@media (min-width:960px){ .home-v3 .ex.split{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)} }

/* proof strip header sits above the site's .proof band */
.home-v3 #measured .lede{margin-bottom:28px}
.home-v3 .stat p{font-size:16px; line-height:1.45}
.home-v3 .proof-foot{font-size:15px; line-height:1.5; color:var(--muted)}
/* v3.2: who checked the four figures, said plainly, first and in paper white */
.home-v3 .proof-foot .who-line{display:block; margin-bottom:4px; font-weight:500; font-size:16px; color:var(--paper)}

/* the invitation: two buttons, the published price line, depth links */
.home-v3 .final p.anchor{margin:18px auto 0; max-width:560px; font-size:15px; color:var(--muted)}
.home-v3 .final p.anchor b{color:var(--paper); font-weight:500}
.home-v3 .final .depth{margin-top:18px; display:flex; flex-wrap:wrap; justify-content:center; gap:4px 22px; font-family:var(--mono); font-size:13px}
.home-v3 .final .depth a{display:inline-block; padding-block:4px; color:var(--muted)}
.home-v3 .final .depth a:hover{color:var(--brass-2)}
.home-v3 .final .reach{margin-top:20px}

@media (min-width:960px){
  .home-v3 .hero .plumb .cord{height:48px}
  .home-v3 .hero .plumb{margin-bottom:18px}
  .home-v3 .hero h1{margin-top:14px}
  .home-v3 .hero .sub{margin-top:18px}
}

/* phones: shorter page, same words */
@media (max-width:759px){
  /* v3.2: buttons on the first phone screen. The proof and "Built for" lines move below the buttons visually only;
     they hold no links, so focus order still matches what the eye sees. */
  .home-v3 .hero .wrap{display:grid; grid-template-columns:minmax(0,1fr)}
  .home-v3 .hero .eyebrow{order:1}
  .home-v3 .hero h1{order:2; max-width:none}
  .home-v3 .hero .sub{order:3}
  .home-v3 .hero .cta-row{order:4}
  .home-v3 .hero .cta-note{order:5}
  .home-v3 .hero .hero-proof{order:6; margin-top:22px}
  .home-v3 .hero .hero-for{order:7}
  .home-v3 .hero .eyebrow{font-size:11.5px}
  .home-v3 .ex .log-foot{font-size:15px}
  .home-v3 .proof-foot{font-size:15px}
  .home-v3 main{line-height:1.5}
  .home-v3 .pipe p,.home-v3 .ex .k{line-height:1.5}
  .home-v3 .hero{padding-bottom:28px}
  .home-v3 .hero .sub{font-size:16px}
  .home-v3 .hero h1{font-size:clamp(38px,11vw,56px); margin-top:14px}
  .home-v3 .hero .sub{margin-top:16px}
  .home-v3 .hero .hero-for{margin-top:14px}
  .home-v3 .hero .cta-row{margin-top:22px; gap:10px}
  .home-v3 .hero .cta-row .btn,.home-v3 .final .cta-row .btn{width:100%}
  .home-v3 .hero .plumb .cord{height:10px}
  .home-v3 .hero .plumb{margin-bottom:6px}
  .home-v3 .section{padding:32px 0}
  .home-v3 .pipe-fig{margin-top:18px}
  .home-v3 .pipe li{padding-bottom:10px}
  .home-v3 .pipe-fig figcaption{margin-top:10px}
  .home-v3 .ex .lede p{margin-top:0}
  .home-v3 .ex .more{margin-top:12px}
  .home-v3 #measured .lede{margin-bottom:20px}
  .home-v3 .stat p{font-size:15px; line-height:1.4}
  .home-v3 .section.tight{padding-top:0}
  .home-v3 .lede h2{margin:10px 0 12px}
  .home-v3 .split{gap:24px}
  .home-v3 .ex .log-row{padding:9px 14px}
  .home-v3 .ex .log-head,.home-v3 .ex .log-foot{padding-left:14px; padding-right:14px}
  .home-v3 .stat{padding:14px 12px}
  .home-v3 .stat p{margin-top:6px}
  .home-v3 .proof-foot{padding-top:12px; padding-bottom:14px}
  /* footer: the ten standards links in two columns instead of one half-width column */
  .home-v3 .foot{padding:28px 0 22px}
  .home-v3 .foot-grid{gap:18px 16px}
  .home-v3 .foot-grid > div:last-child{grid-column:1 / -1}
  .home-v3 .foot-grid > div:last-child ul{grid-template-columns:minmax(0,1fr) minmax(0,1fr); column-gap:16px}
  .home-v3 .foot-base{margin-top:18px}
  .home-v3 .stat .v{font-size:34px}
  .home-v3 .final{padding:36px 0 40px}
  .home-v3 .final h2{font-size:clamp(34px,9.5vw,44px)}
  .home-v3 .final p{margin:16px auto 22px; font-size:16px}
  .home-v3 .final .cta-row{gap:10px}
  .home-v3 .final .reach{display:none} /* the same email and Copy button sit in the footer just below */
}