/* v4 · build the frame, the store's clean system on the app page
   restraint: old london only on the hero, the chia banner + the closing, all sized down.
   section titles in archivo expanded with the red period. white + cool grey surfaces.
   yellow only on actions + tags. flat buttons, soft rules. a moving proof band. three phases. */
@font-face{font-family:'Sometype Mono';src:url('fonts/sometype-mono.woff2') format('woff2');font-weight:400 700;font-display:swap}
:root{--paper:#fff;--mist:#f4f4f4;--rule:#dedede;--mono:'Sometype Mono',ui-monospace,Menlo,monospace;--yellow-press:#e3b638}
body{background:#fff}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* frame: soft rules, flat buttons */
.header{background:#fff;border-bottom-color:var(--rule)}
.section,.closing{border-bottom-color:var(--rule)}
.cta,.nav-cta,.mobile-join .cta{box-shadow:none}
.cta:hover,.nav-cta:hover{transform:none;box-shadow:none;background:#ededed}
.nav-cta:hover,.hero .cta:hover,.path .cta:hover,.mobile-join .cta:hover{background:var(--yellow-press)}

/* type: mono eyebrows, archivo expanded section titles, a smaller hero */
.eyebrow{font-family:var(--mono);font-weight:600;font-size:11px;letter-spacing:.12em}
h2{font:750 clamp(30px,3.3vw,54px)/1.02 Archivo,Arial,sans-serif;font-stretch:125%;letter-spacing:-.045em}
h1{font-size:clamp(56px,8vw,86px)}
.chia-copy h2{font:400 clamp(50px,5.6vw,94px)/.9 OldLondon,Georgia,serif;font-stretch:normal;letter-spacing:-.02em}
.closing h2{font:400 clamp(40px,6vw,96px)/.92 OldLondon,Georgia,serif;font-stretch:normal;letter-spacing:-.02em}
.homes b{font:750 17px/1.1 Archivo,Arial,sans-serif;font-stretch:125%;letter-spacing:-.03em}
.guide h3{font:750 24px/1.1 Archivo,Arial,sans-serif;font-stretch:125%;letter-spacing:-.04em}
.section-head>p:not(.eyebrow){font-size:14px}

/* surfaces, alternating white + mist in the v2 order */
.ig,.training,.programs,.guides,.faq{background:#fff}
.path,.receipts,.life,.membership,.closing{background:var(--mist)}
.wall img,.homes img{border:1px solid var(--rule)}
.proof-grid img{border-color:var(--rule)}
.plain-list,.plain-list li,.plan,.faq-list details,.faq-list details:last-child,.extras-line{border-color:var(--rule)}

/* the proof band: a dark archive strip that runs straight out of the hero.
   the members' photos are dated phone shots, so they sit small, framed like prints, numbered,
   one gentle grade + a film grain so 38 different phones read as one set. never upscaled. */
.proofband{position:relative;background:#141414;color:#f1efe9;padding:24px 0 30px;border-bottom:1px solid #000;overflow:hidden;isolation:isolate}
.proofband:after{content:'';position:absolute;inset:0;z-index:2;pointer-events:none;opacity:.07;mix-blend-mode:overlay;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='200' height='200' filter='url(%23g)'/></svg>")}
.pb-head{display:flex;justify-content:space-between;align-items:center;gap:10px 24px;flex-wrap:wrap;padding:0 4vw 20px;font:600 11px/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase}
.proofband .pb-label{margin:0;font:600 11px/1.3 var(--mono);font-stretch:normal;letter-spacing:.1em;text-transform:uppercase;color:var(--yellow)}
.pb-meta{display:flex;align-items:center;flex-wrap:wrap;gap:8px 18px;color:#8f8c86}
.pb-meta a{color:#f1efe9;text-decoration:none;border-bottom:1px solid #4a4845;padding-bottom:2px}
.pb-meta a:hover{border-bottom-color:var(--yellow)}
.pb-toggle{font:600 11px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:#f1efe9;border:1px solid #3a3835;padding:8px 10px;min-height:32px}
.pb-toggle:hover{border-color:#77736c}
.pb-row{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.pb-row+.pb-row{margin-top:26px}
.pb-track{display:flex;align-items:stretch;gap:18px;width:max-content;animation:pb-left 150s linear infinite}
.pb-row.rev .pb-track{gap:0;animation-name:pb-right;animation-duration:190s}
/* hover is handled in v4.js: the row under the mouse glides to a stop and back. keyboard focus + the button still pause both rows */
.proofband:focus-within .pb-track,.proofband.paused .pb-track{animation-play-state:paused}
@keyframes pb-left{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes pb-right{from{transform:translateX(-50%)}to{transform:translateX(0)}}
.pb-shot{flex:none;width:clamp(132px,11.5vw,184px)}
.pb-shot img{width:100%;height:auto;aspect-ratio:1;object-fit:cover;background:#222;border:4px solid #ebe8e1;box-shadow:0 10px 26px rgba(0,0,0,.45);filter:saturate(.8) contrast(1.06) brightness(.97)}
.pb-shot span{display:block;margin-top:9px;font:500 9.5px/1.2 var(--mono);letter-spacing:.09em;text-transform:uppercase;color:#8f8c86;white-space:nowrap}
.pb-quote{flex:none;width:clamp(270px,23vw,350px);padding:2px 30px 2px 0;margin-right:30px;border-right:1px solid #2e2d2b;display:flex;flex-direction:column;justify-content:center;gap:12px}
.pb-quote q{quotes:none;font:500 15px/1.45 Archivo,Arial,sans-serif;color:#f1efe9}
.pb-quote q:before{content:'“';display:block;height:22px;font:750 38px/1 Archivo,Arial,sans-serif;font-stretch:125%;color:var(--yellow)}
.pb-quote cite{font:600 10px/1.3 var(--mono);letter-spacing:.09em;text-transform:uppercase;font-style:normal;color:#8f8c86}
.pb-stat{flex:none;display:flex;flex-direction:column;justify-content:center;gap:6px;padding:2px 30px 2px 0;margin-right:30px;border-right:1px solid #2e2d2b}
.pb-stat b{font:750 34px/1 Archivo,Arial,sans-serif;font-stretch:125%;letter-spacing:-.045em;color:var(--yellow);white-space:nowrap}
.pb-stat span{font-size:13px;line-height:1.35;color:#cfccc5;max-width:190px}
@media(prefers-reduced-motion:reduce){.pb-track{animation:none}.pb-track>[aria-hidden="true"]{display:none}.pb-row{overflow-x:auto;-webkit-mask-image:none;mask-image:none;padding-inline:4vw}.pb-toggle{display:none}}

/* the path: three phases, all in the app */
.phase-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.phase{min-width:0;display:flex;flex-direction:column;background:#fff;border:1px solid var(--rule)}
.phase-art{position:relative;aspect-ratio:4/5;overflow:hidden;background:#ececec}
.phase-art img{width:100%;height:100%;object-fit:cover}
.phase-tag{position:absolute;top:14px;left:14px;background:var(--yellow);font:600 11px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;padding:8px 10px}
.phase-body{padding:22px 22px 24px;display:flex;flex-direction:column;gap:12px;flex:1}
.phase-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.phase-head h3{font:750 24px/1.05 Archivo,Arial,sans-serif;font-stretch:125%;letter-spacing:-.045em}
.phase-head span{font:400 11px/1.3 var(--mono);color:#444;text-align:right}
.phase-format{font:600 11px/1.3 var(--mono);text-transform:uppercase;letter-spacing:.06em}
.phase-copy{font-size:14px}
.phase-programs{display:grid;gap:9px;border-top:1px solid var(--rule);padding-top:14px;margin-top:auto;font-size:13px;line-height:1.35}
.phase-programs li{display:flex;align-items:center;gap:11px;min-width:0}
.phase-programs img{width:34px;height:34px;flex:none;border-radius:50%;object-fit:cover;border:1px solid var(--rule)}
.phase-programs small{color:#555;font-size:12px}
.path-actions{display:flex;align-items:center;flex-wrap:wrap;gap:16px 24px;margin-top:34px}
.path-actions .cta,.membership-plans>.cta,.closing .cta{background:var(--yellow)}
.membership-plans>.cta:hover,.closing .cta:hover{background:var(--yellow-press)}
.path-actions .terms{flex-basis:100%;margin-top:0}

/* the hall of fame, inside the receipts */
.hof{margin-top:46px;padding-top:32px;border-top:1px solid var(--rule)}
.hof-head{display:flex;justify-content:space-between;align-items:end;gap:12px 24px;flex-wrap:wrap;margin-bottom:22px}
.hof-head h3{font:750 22px/1.1 Archivo,Arial,sans-serif;font-stretch:125%;letter-spacing:-.04em}
.hof-head a{font-size:12px;font-weight:650}
.hof-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.hof-grid figure{min-width:0;margin:0;background:#fff;border:1px solid var(--rule);display:flex;flex-direction:column}
.hof-grid img{width:100%;height:auto;aspect-ratio:900/865;object-fit:cover;filter:saturate(.84) contrast(1.05) brightness(.98)}
.hof-grid blockquote{margin:0;padding:16px 18px 8px;font-size:14px;line-height:1.45;flex:1}
.hof-grid figcaption{padding:0 18px 16px;font:600 10px/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:#555}
.hof-note{font-size:11px;color:#444;margin-top:16px}

@media(min-width:1600px){.pb-head{padding-inline:max(4vw,calc((100vw - 1760px)/2))}h1{font-size:clamp(86px,5.8vw,118px)}h2{font-size:clamp(54px,3.3vw,64px)}.closing h2{font-size:clamp(96px,6vw,124px)}.eyebrow{font-size:12px}}
@media(max-width:1100px){h1{font-size:clamp(48px,8.6vw,72px)}.phase-grid{gap:16px}.phase-body{padding:18px}.hof-grid{grid-template-columns:1fr 1fr}}
@media(max-width:760px){h1{font-size:clamp(40px,15vw,56px)}h2{font-size:clamp(28px,8.4vw,38px)}.closing h2{font-size:clamp(38px,11vw,54px)}.chia-copy h2{font-size:clamp(42px,12vw,58px)}
  .phase-grid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px;margin-inline:-5vw;padding:0 5vw 6px}.phase{flex:0 0 84%;scroll-snap-align:start}
  .hof-grid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px;margin-inline:-5vw;padding:0 5vw 6px}.hof-grid figure{flex:0 0 84%;scroll-snap-align:start}.pb-head{padding-inline:5vw}.pb-toggle,.pb-meta a,.hof-head a{display:inline-flex;align-items:center;min-height:44px}.pb-toggle{padding-inline:14px}.pb-shot{width:124px}.pb-track{gap:14px}.pb-quote{width:248px;padding-right:22px;margin-right:22px}.pb-quote q{font-size:14px}.pb-stat{padding-right:22px;margin-right:22px}.pb-stat b{font-size:28px}}
@media(max-width:370px){h1{font-size:40px}}

/* triple-check pass · 16 oct */
/* one flat button language: the last hard shadows go */
.topic-choices button[aria-pressed=true],.scenes button[data-src].active,#life .approved-player .scenes button[data-src].active{box-shadow:none}
/* titles step up evenly: phone < tablet < desktop */
@media(min-width:761px) and (max-width:1100px){h2{font-size:clamp(34px,4.6vw,48px)}}
@media(max-width:760px){h2{font-size:clamp(28px,8vw,36px)}}
/* under reduced motion there is nothing to pause, on any width */
@media(prefers-reduced-motion:reduce){.proofband .pb-toggle{display:none}}
/* phones: nothing under 11px [the header button, terms, captions, credits, footer] */
@media(max-width:760px){
  .nav-cta{font-size:11px}
  .pb-shot span{font-size:10.5px}
  .pb-quote cite,.hof-grid figcaption,.terms,.wall-note,.guide-detail,.proof-grid em,.frames figcaption span,.mobile-join div>span,footer p,footer>a,.hof-note{font-size:11px}
}
@media(max-width:760px){#ig .topic-actions .terms{font-size:11px}}