/* Crew site v2 · the home page and /pricing (xs20, 28 Sep 2026).
   Direction A "Quiet room": light first, one cherry action per screen, the App under the headline,
   one night section for the privacy line. Loaded after /styles.css, which holds the tokens and the shell. */

.v2{background:var(--ground); --eyebrow:#621427}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]).v2{--eyebrow:#D69AA7} }
:root[data-theme="dark"].v2{--eyebrow:#D69AA7}
.v2 main{overflow:clip}
.v2 .wrap{max-width:1180px; margin-left:auto; margin-right:auto; padding-left:var(--gutter); padding-right:var(--gutter)}

/* Type scale: display, title, lead, body, fine. SF on the Mac; nothing below 13px. */
.v2 .eyebrow{margin:0; font-size:17px; font-weight:600; letter-spacing:-.01em; color:var(--eyebrow)}
.v2 .display{margin:0; font-size:clamp(52px,8.2vw,112px); line-height:1; font-weight:700; letter-spacing:-.045em; text-wrap:balance}
.v2 .title{margin:0; font-size:clamp(38px,4.6vw,60px); line-height:1.03; font-weight:700; letter-spacing:-.035em; text-wrap:balance}
.v2 .intro{margin:0; font-size:clamp(19px,1.6vw,21px); line-height:1.45; letter-spacing:-.012em; color:var(--ink-2); text-wrap:pretty}
.v2 .body{margin:0; font-size:17px; line-height:1.5; color:var(--ink-2); text-wrap:pretty}
.v2 .small-print{margin:0; font-size:13px; line-height:1.5; color:var(--ink-3)}
.dark-cherry{color:var(--cherry)}

/* Buttons: one filled cherry action per screen; everything else is a text link. */
.v2 .btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:48px; padding:0 26px; border-radius:999px;
  font-size:17px; font-weight:500; letter-spacing:-.01em; text-decoration:none; transition:background-color .18s, transform .18s}
.v2 .btn-primary{background:var(--cherry); color:var(--ivory); box-shadow:var(--cherry-edge)}
.v2 .btn-primary:hover{background:#4E0F1F}
.v2 .btn-primary:active{transform:scale(.97)}
.v2 .btn-text{color:var(--accent-fg); padding:0 10px}
.v2 .btn-text:hover{text-decoration:underline}
.v2 .btn-text .chev{width:14px; height:14px}

/* ───────── Hero ───────── */
.hero2{padding-top:clamp(56px,9vh,96px); text-align:center}
.hero2 .icon{width:96px; height:96px; border-radius:22px; box-shadow:0 14px 34px -14px rgba(60,20,30,.38)}
.hero2 .eyebrow{margin-top:22px}
.hero2 .display{margin-top:10px}
.hero2 .intro{max-width:34em; margin:22px auto 0}
.hero2 .ctas{margin-top:32px; display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:8px 10px}
.hero2 .small-print{margin-top:16px}
.hero2 .h-stage{margin-top:clamp(40px,6vh,64px)}

/* ───────── Capture frames ─────────
   Every App picture is a real capture from the App on Sample Co, taken on the Mac (research/site-v2/CAPTURES.md).
   Until it lands, the frame shows a quiet empty window and carries data-capture-pending; check.py blocks the deploy
   while any frame is pending, so an empty frame can never go public. */
.cap{margin:0; position:relative}
/* SITE-FINISH: a frame still waiting for its capture is not drawn (no empty windows at rest); the chapter reads as
   words + points until the capture lands. check.py still blocks the deploy while any frame is pending. */
.cap[data-capture-pending]{display:none}
.cap-win{position:relative; border-radius:14px; overflow:hidden; background:var(--win); box-shadow:0 0 0 .5px var(--win-hair), var(--win-shadow); aspect-ratio:16/10}
.cap-win img{display:block; width:100%; height:100%; object-fit:cover; object-position:top left}
.cap-bar{height:44px; display:flex; align-items:center; gap:8px; padding:0 16px; background:var(--win-bar); border-bottom:1px solid var(--win-hair)}
.cap-bar i{width:12px; height:12px; border-radius:50%; background:var(--tl)}
.cap-body{display:grid; grid-template-columns:minmax(120px,22%) 1fr; height:calc(100% - 44px)}
.cap-side{background:var(--win-side); border-right:1px solid var(--win-hair)}
.cap-slot{display:grid; place-items:center; align-content:center; gap:4px; padding:16px; text-align:center; color:var(--win-text-3); font-size:12px; letter-spacing:.01em}
.cap-slot b{color:var(--win-text-2); font-size:13px; font-weight:600}
.cap .sample-tag{position:absolute; right:12px; bottom:10px; z-index:1; font-size:11px; line-height:1; color:var(--win-text-2); background:var(--win); padding:5px 8px; border-radius:6px; box-shadow:0 0 0 .5px var(--win-hair)}
.cap figcaption{margin-top:14px; font-size:14px; line-height:1.45; color:var(--ink-3); text-align:center}

/* ───────── The five: local nav (sticky under the header) ───────── */
.five{position:sticky; top:52px; z-index:4; margin-top:clamp(72px,10vh,120px); background:color-mix(in srgb, var(--ground) 86%, transparent);
  -webkit-backdrop-filter:saturate(1.6) blur(18px); backdrop-filter:saturate(1.6) blur(18px); border-bottom:1px solid var(--hair-2)}
.five ol{list-style:none; margin:0 auto; padding:0 var(--gutter); max-width:1180px; display:flex; gap:4px; overflow-x:auto; scrollbar-width:none}
.five ol::-webkit-scrollbar{display:none}
.five a{display:flex; align-items:baseline; gap:8px; min-height:48px; padding:14px 12px; white-space:nowrap; font-size:14px; letter-spacing:-.005em; color:var(--ink-3); text-decoration:none; transition:color .2s}
.five a span{font-variant-numeric:tabular-nums; font-size:12px; color:var(--ink-3)}
.five a:hover, .five a[aria-current="true"]{color:var(--ink)}
.five a:focus-visible{outline-offset:-3px}
.five a[aria-current="true"] span{color:var(--eyebrow)}
.five li:first-child a{padding-left:0}

/* ───────── Chapters ───────── */
.chapter{padding-top:clamp(96px,14vh,150px); scroll-margin-top:100px}
.chapter .ch-head{display:grid; grid-template-columns:1.1fr 1fr; gap:24px 64px; align-items:end}
.chapter .ch-head .eyebrow{grid-column:1/-1}
.chapter .ch-head .title{margin-top:-14px}
.chapter .cap{margin-top:48px}
.points{list-style:none; margin:48px 0 0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.points li{background:var(--paper); border-radius:18px; padding:24px 26px 26px; box-shadow:0 0 0 .5px var(--hair)}
.points small{display:block; font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3)}
.points b{display:block; margin-top:10px; font-size:19px; font-weight:600; letter-spacing:-.015em; line-height:1.3; color:var(--ink)}
.points p{margin:8px 0 0; font-size:15px; line-height:1.45; color:var(--ink-2)}
/* SITE-FINISH: the ship flow, four stages on one line (a diagram of the flow, not a capture) */
.flow{list-style:none; margin:48px 0 0; padding:0; display:grid; grid-template-columns:repeat(4,1fr); gap:0; border-radius:18px; overflow:hidden; box-shadow:0 0 0 .5px var(--hair)}
.flow li{position:relative; background:var(--paper); padding:22px 26px 24px}
.flow li + li{box-shadow:inset .5px 0 0 var(--hair)}
.flow li + li::before{content:""; position:absolute; left:-7px; top:50%; width:12px; height:12px; margin-top:-6px; border-radius:3px; background:var(--paper); box-shadow:.5px -.5px 0 var(--hair); transform:rotate(45deg); z-index:1}
.flow small{display:block; font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--eyebrow)}
.flow b{display:block; margin-top:8px; font-size:17px; font-weight:600; letter-spacing:-.01em; color:var(--ink)}
.flow li:last-child small{color:var(--ink)}
.points .said{font-size:17px; font-weight:500; color:var(--ink); line-height:1.4}

/* ───────── Night: your data stays on your Mac ───────── */
.night{border-block:1px solid var(--night-hair); margin-top:clamp(110px,16vh,170px); background:var(--night); color:var(--night-ink); padding:clamp(110px,16vh,170px) 0 clamp(72px,10vh,110px); text-align:center; scroll-margin-top:52px}
.night .eyebrow{color:#D69AA7}
.night .display{margin:14px auto 0; max-width:11em; font-size:clamp(46px,7vw,104px)}
.night .intro{margin:26px auto 0; max-width:30em; color:var(--night-ink-2)}
.night .mac{position:relative; margin:72px auto 0; width:min(720px,100%); aspect-ratio:720/280; border:1.5px solid rgba(245,240,232,.2); border-bottom:0; border-radius:22px 22px 0 0; display:grid; place-items:center}
.night .mac::after{content:""; position:absolute; left:-8%; right:-8%; bottom:0; height:1.5px; background:rgba(245,240,232,.2)}
.night .mac svg{width:clamp(72px,12vw,116px); height:auto; aspect-ratio:1; color:var(--ivory); filter:drop-shadow(0 0 36px rgba(214,154,167,.45))}
.night .facts{list-style:none; margin:0 auto; padding:40px 0 0; max-width:1080px; display:grid; grid-template-columns:repeat(3,1fr); gap:36px; text-align:left; border-top:1px solid var(--night-hair)}
.night .facts b{display:block; font-size:19px; font-weight:600; letter-spacing:-.015em}
.night .facts p{margin:6px 0 0; font-size:15px; line-height:1.5; color:var(--night-ink-2)}
.night a{color:var(--night-ink)}

/* ───────── One agent vs Crew ───────── */
.versus{margin-top:48px; display:grid; grid-template-columns:1fr 1fr; gap:16px}
.versus > div{border-radius:18px; padding:28px; box-shadow:0 0 0 .5px var(--hair)}
.versus .crew{background:var(--paper)}
.versus h3{margin:0; font-size:15px; font-weight:600; letter-spacing:-.005em; color:var(--ink-3)}
.versus .crew h3{color:var(--eyebrow)}
.versus ul{list-style:none; margin:14px 0 0; padding:0}
.versus li{padding:12px 0; border-top:1px solid var(--hair-2); font-size:17px; line-height:1.4; color:var(--ink-2)}
.versus .crew li{color:var(--ink)}

/* ───────── The film slot (off until the film exists: html.film-off hides it and the hero link) ───────── */
.film-off [data-film]{display:none !important}
.film .frame{position:relative; margin-top:48px; border-radius:22px; overflow:hidden; aspect-ratio:16/9; background:radial-gradient(110% 90% at 50% 115%, rgba(98,20,39,.6), transparent 62%), #0B0909; color:var(--night-ink); display:grid; place-items:center; box-shadow:0 30px 80px -30px rgba(40,10,20,.5)}
.film video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.film .play{position:relative; z-index:1; display:inline-flex; align-items:center; gap:10px; min-height:48px; padding:0 24px; border-radius:999px; background:rgba(245,240,232,.14); color:var(--night-ink); font-size:17px; font-weight:500; -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); border:0; cursor:pointer}
.film .play i{width:0; height:0; border-left:12px solid currentColor; border-top:7px solid transparent; border-bottom:7px solid transparent}
.film .frame small{position:absolute; left:0; right:0; bottom:18px; text-align:center; font-size:12px; color:rgba(245,240,232,.62)}

/* ───────── Price ───────── */
.price2{padding-top:clamp(110px,16vh,160px); text-align:center}
.price2 .price-card{margin:44px auto 0; max-width:560px; background:var(--paper); border-radius:24px; padding:40px clamp(24px,5vw,48px) 36px; box-shadow:0 0 0 .5px var(--hair), 0 30px 60px -36px rgba(60,20,30,.3)}
.price2 .amount{display:flex; align-items:baseline; justify-content:center; gap:8px}
.price2 .amount b{font-family:var(--serif); font-weight:400; font-size:clamp(64px,8vw,88px); letter-spacing:-.03em; line-height:1; color:var(--ink); font-variant-numeric:lining-nums}
.price2 .amount span{font-size:17px; color:var(--ink-2)}
.price2 .guarantee{margin:18px 0 0; font-size:17px; font-weight:600; letter-spacing:-.01em; color:var(--ink)}
.price2 .price-card .body{margin-top:8px}
.price2 .price-card .btn{margin-top:28px; width:100%}
.price2 .price-card .small-print{margin-top:14px}
.price2 ul.incl{list-style:none; margin:28px 0 0; padding:24px 0 0; border-top:1px solid var(--hair-2); text-align:left; display:grid; gap:10px}
.price2 ul.incl li{position:relative; padding-left:26px; font-size:15px; line-height:1.45; color:var(--ink-2)}
.price2 ul.incl li::before{content:""; position:absolute; left:2px; top:5px; width:12px; height:7px; border-left:1.8px solid var(--eyebrow); border-bottom:1.8px solid var(--eyebrow); transform:rotate(-45deg)}
.price2 ul.incl b{color:var(--ink); font-weight:600}
.price2 .is-soon{font-size:12px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-3)}

/* The pricing page reuses the card; the fine print below it reads like Apple's footnotes. */
.notes{max-width:720px; margin:56px auto 0; padding:0 var(--gutter); display:grid; gap:14px}
.notes h2{margin:24px 0 0; font-size:21px; font-weight:600; letter-spacing:-.015em}
.notes p{margin:0; font-size:15px; line-height:1.55; color:var(--ink-2)}

/* ───────── Motion: things arrive once, where the eye already is. Never loops; Reduce Motion = none. ───────── */
@media print{ .five{position:static} }
@media (prefers-reduced-motion: reduce){ .v2 .btn{transition:none} }

/* ───────── Phone ───────── */
@media (max-width: 820px){
  .chapter .ch-head{grid-template-columns:1fr}
  .chapter .ch-head .title{margin-top:0}
  .points, .versus, .night .facts{grid-template-columns:1fr}
  .night .facts{gap:22px}
  .cap-body{grid-template-columns:1fr} .cap-side{display:none}
  .cap-win{aspect-ratio:4/3}
  .flow{grid-template-columns:1fr 1fr}
  .flow li:nth-child(3){box-shadow:inset 0 .5px 0 var(--hair)} .flow li:nth-child(4){box-shadow:inset .5px .5px 0 var(--hair)}
  .flow li:nth-child(3)::before{display:none}
}
@media (max-width: 480px){
  .hero2 .icon{width:76px; height:76px; border-radius:18px}
  .hero2 .ctas .btn-primary{width:100%}
  .five{top:52px}
  .five a{padding:14px 10px}
  .points li{padding:20px 22px 22px}
  .price2 .price-card{border-radius:20px}
}