/* ProcessYard landing, general product site. Tokens from brand/tokens.css (copied; fonts self-hosted). */
@font-face{font-family:"Manrope";src:url("../assets/fonts/manrope.woff2") format("woff2");font-weight:400 800;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("../assets/fonts/plexmono-400.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("../assets/fonts/plexmono-500.woff2") format("woff2");font-weight:500;font-display:swap}
:root{
  --py-bg:#FFFFFF;--py-panel:#FAFAFA;--py-sunken:#F2F3F5;--py-hover:#F4F5F7;
  --py-ink:#111214;--py-ink-2:#4A4D55;--py-muted:#8A8D94;--py-faint:#B8BBC2;
  --py-line:#E7E8EB;--py-line-2:#D6D8DD;
  --py-new:#E3A21A;--py-loss:#D6453D;--py-gain:#1F8A55;
  --py-sans:"Manrope",ui-sans-serif,system-ui,sans-serif;
  --py-mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --py-r-sm:6px;--py-r:8px;--py-r-lg:12px;
  --text-muted:#686B73; /* muted text that passes AA on white; --py-muted is for non-text */
  --pad:20px;--max:1200px;--sec:72px;
}
@media (min-width:760px){:root{--pad:40px;--sec:112px}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:72px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
html.lb-open{overflow:hidden}
body{margin:0;background:var(--py-bg);color:var(--py-ink);font:400 16px/1.55 var(--py-sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
img,video,svg{display:block;max-width:100%}
a{color:inherit}
p,ol,ul,dl,dd,figure,h1,h2,h3{margin:0;padding:0}
ol,ul{list-style:none}
:focus-visible{outline:2px solid var(--py-ink);outline-offset:3px;border-radius:4px}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}
.n{font-family:var(--py-mono);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.skip{position:absolute;left:-999px;top:8px;background:var(--py-ink);color:#fff;padding:8px 12px;border-radius:6px;z-index:50}
.skip:focus{left:8px}

/* buttons: one solid ink primary per view; header uses a hairline button */
.btn{display:inline-flex;align-items:center;justify-content:center;height:48px;padding:0 22px;border-radius:var(--py-r);border:1px solid var(--py-ink);background:var(--py-ink);color:#fff;font:700 15px/1 var(--py-sans);letter-spacing:-.01em;text-decoration:none;cursor:pointer;white-space:nowrap;transition:background .15s,border-color .15s}
.btn:hover{background:#2a2c31;border-color:#2a2c31}
.btn.sm{height:38px;padding:0 15px;font-size:14px}
.btn-line{background:#fff;color:var(--py-ink);border-color:var(--py-line-2)}
.btn-line:hover{background:var(--py-hover);border-color:var(--py-faint)}
.lnk{display:inline-flex;align-items:center;gap:10px;height:48px;padding:0 4px;border:0;background:none;color:var(--py-ink);font:700 15px/1 var(--py-sans);letter-spacing:-.01em;cursor:pointer;white-space:nowrap}
.lnk svg{width:12px;height:12px}
.lnk .n{font-weight:400;font-size:13.5px;color:var(--text-muted)}
.lnk:hover{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}

/* header */
.hd{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.96);border-bottom:1px solid var(--py-line)}
.hd-in{display:flex;align-items:center;gap:32px;height:60px}
.brand{display:inline-flex;align-items:center;gap:9px;text-decoration:none;font-weight:700;font-size:18px;letter-spacing:-.035em;color:var(--py-ink)}
.brand svg{width:20px;height:20px;flex:none}
.nav{display:none;gap:28px;margin-right:auto}
.nav a{font-size:14.5px;font-weight:600;color:var(--py-ink-2);text-decoration:none;padding:6px 0}
.nav a:hover{color:var(--py-ink)}
.hd .btn{margin-left:auto}
@media (min-width:860px){.nav{display:flex}.hd .btn{margin-left:0}.hd-in{height:68px}}

/* hero */
.hero{padding:44px 0 var(--sec)}
.kicker{font-size:15px;font-weight:600;color:var(--text-muted);margin-bottom:18px;letter-spacing:-.01em}
h1{font-size:clamp(38px,10vw,62px);line-height:1.04;font-weight:800;letter-spacing:-.042em;text-wrap:balance}
h1 span{display:block;color:var(--text-muted)}
.hero-grid{display:grid;gap:22px}
.lede{font-size:clamp(17px,4.4vw,19px);line-height:1.5;color:var(--py-ink-2);text-wrap:pretty}
.ctas{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px;margin-top:28px}
@media (min-width:1000px){
  .hero{padding-top:64px}
  .kicker{margin-bottom:24px}
  .hero-grid{gap:28px}
  .hero-side .lede{max-width:40em}
  .hero-side .ctas{margin-top:32px}
}
.film{position:relative;margin-top:44px;aspect-ratio:16/9;border:1px solid var(--py-line);border-radius:var(--py-r-lg);overflow:hidden;background:var(--py-sunken) url("../assets/hero-poster.png") center/cover no-repeat}
@media (min-width:1000px){.film{margin-top:64px}}

.film-loop{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.film-hit{position:absolute;inset:0;width:100%;height:100%;border:0;background:transparent;cursor:pointer;padding:0;border-radius:var(--py-r-lg)}
.film-hit:focus-visible{outline-offset:-4px}
.film-tag{position:absolute;left:8px;bottom:8px;display:inline-flex;align-items:center;gap:7px;height:30px;padding:0 10px;border-radius:var(--py-r-sm);background:#fff;border:1px solid var(--py-line-2);font-size:12.5px;font-weight:700;pointer-events:none;transition:background .15s}
.film-tag svg{width:10px;height:10px}
.film-tag .n{font-weight:400;color:var(--text-muted);font-size:12.5px}
.film:hover .film-tag{background:var(--py-hover)}
@media (min-width:760px){.film-tag{left:20px;bottom:20px;height:42px;padding:0 16px;gap:9px;border-radius:var(--py-r);font-size:14.5px}}
.film-cap{margin-top:12px;font-size:13.5px;color:var(--text-muted)}

/* sections */
section+section{border-top:1px solid var(--py-line)}
section:not(.hero){padding:var(--sec) 0}
h2{font-size:clamp(30px,7.2vw,48px);line-height:1.06;font-weight:800;letter-spacing:-.038em;text-wrap:balance}
.sec-hd{display:grid;gap:16px;margin-bottom:40px}
.sec-lede{font-size:clamp(17px,4.4vw,19px);line-height:1.5;color:var(--py-ink-2);max-width:36em;text-wrap:pretty}
@media (min-width:1000px){
  .sec-hd{grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:64px;align-items:end;margin-bottom:64px}
  .sec-hd .sec-lede{padding-bottom:4px}
}

/* pains: typographic list */
.pain-list{border-top:1px solid var(--py-ink);counter-reset:p}
.pain-list li{display:grid;gap:10px;padding:24px 0;border-bottom:1px solid var(--py-line)}
.said{font-size:clamp(25px,6.4vw,36px);line-height:1.12;font-weight:700;letter-spacing:-.035em;text-wrap:balance}
.said .over{color:var(--py-new)}
.said .later{color:var(--text-muted)}
.pain-body{display:grid;gap:8px;max-width:34em}
.pain-body p{color:var(--py-ink-2);font-size:16px;line-height:1.55}
.pain-body .stat{font-size:14px;color:var(--py-ink);font-weight:600}
sup{font-size:10.5px;line-height:0;margin-left:2px;vertical-align:super}
sup a{color:var(--text-muted);text-decoration:none;font-weight:600}
sup a:hover{text-decoration:underline}
.sources{counter-reset:s;display:flex;flex-wrap:wrap;gap:4px 24px;margin-top:20px;font-size:12.5px;color:var(--text-muted)}
.sources li{counter-increment:s}
.sources li::before{content:counter(s) " ";font-weight:700}
@media (min-width:860px){
  .pain-list li{grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:64px;padding:30px 0;align-items:baseline}
}

/* product pillars */
.pillar{display:grid;gap:24px;padding:40px 0;border-top:1px solid var(--py-line)}
.pillar:first-of-type{border-top-color:var(--py-ink)}
.pillar:last-child{padding-bottom:0}
.pillar h3{font-size:clamp(26px,6vw,32px);font-weight:800;letter-spacing:-.035em;line-height:1.1}
.pillar-line{margin-top:10px;font-size:17px;line-height:1.5;color:var(--py-ink-2);max-width:26em;text-wrap:pretty}
.caps{margin-top:20px;border-top:1px solid var(--py-line)}
.caps li{padding:10px 0;border-bottom:1px solid var(--py-line);font-size:15px;line-height:1.45;font-weight:600;color:var(--py-ink)}
@media (min-width:1000px){
  .pillar{grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:64px;padding:56px 0}
  .pillar-copy{padding-top:4px}
}

/* product UI fragments, shared */
.ui{background:#fff;border:1px solid var(--py-line);border-radius:var(--py-r-lg);padding:18px;font-size:13.5px;line-height:1.45;color:var(--py-ink);min-width:0}
@media (min-width:760px){.ui{padding:24px}}
.pillar-ui{min-width:0}
@media (min-width:760px){.pillar-ui{background:var(--py-panel);border:1px solid var(--py-line);border-radius:16px;padding:28px}}
.ui-row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}
.ui-top{padding-bottom:12px;margin-bottom:14px;border-bottom:1px solid var(--py-line)}
.ui-title{font-weight:700;font-size:14px;letter-spacing:-.01em}
.ui-meta,.ui-label{font-size:12px;color:var(--text-muted)}
.ui-label{display:block}
.ink{color:var(--py-ink)}
.strong{font-weight:500;color:var(--py-ink)}
.dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--py-new);flex:none}
.dot.ink{background:var(--py-ink)}

/* Caught: asset frames + rounds strip */
.ask{font-size:15px;line-height:1.45;font-weight:600;letter-spacing:-.01em;max-width:32em}
.ask>span{display:block;margin-top:4px;font-size:12px;font-weight:400;color:var(--text-muted)}
.frames{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px;margin:16px 0 4px;padding:3px}
@media (min-width:760px){.frames{gap:12px;max-width:520px}}
/* Asset frames. Photo hook: .fr[data-src] (or style="--img:url(...)") paints a cover photo over the
   gradient class (g1..g6), which stays underneath as the fallback while loading or if the file is missing. */
.fr{position:relative;aspect-ratio:9/16;border-radius:6px;overflow:hidden;background-color:var(--py-sunken);background-image:var(--img,none),var(--grad,none);background-size:cover,cover;background-position:center,center;background-repeat:no-repeat}
.fr.w{aspect-ratio:16/9}
.fr.s{aspect-ratio:3/2}
.fr.has-img .lb{text-shadow:0 1px 2px rgba(0,0,0,.6)}
.fr .lb{position:absolute;left:5px;bottom:5px;font:500 9px/1 var(--py-mono);color:rgba(255,255,255,.88)}
.fr .tg{position:absolute;left:4px;top:4px;background:#fff;color:var(--py-ink);font:700 8.5px/1 var(--py-sans);padding:3px 4px;border-radius:3px}
.fr.new{outline:2px solid var(--py-new);outline-offset:2px}
@media (min-width:760px){.fr .lb{left:7px;bottom:7px;font-size:10px}.fr .tg{left:6px;top:6px;font-size:10px;padding:3px 5px}}
/* Cutdowns as the client's short-form promo posts: photo + mini HUD (scrim, handle + caption, action rail with no counts,
   progress), sized in container units so it scales with the frame. Below ~70px wide only the rail, bar and id remain. */
.fr.post{container-type:inline-size}
.hud{position:absolute;inset:0;color:#fff;pointer-events:none;background:linear-gradient(180deg,transparent 50%,rgba(0,0,0,.18) 66%,rgba(0,0,0,.64))}
.hud-rail{position:absolute;right:6cqw;bottom:50cqw;display:flex;flex-direction:column;gap:9cqw}
.hud-rail svg{width:13cqw;height:13cqw;fill:#fff}
.hud-text{position:absolute;left:7cqw;right:7cqw;bottom:9cqw;display:flex;flex-direction:column;gap:1.5cqw}
.hud-text b{font:700 9.6cqw/1.2 var(--py-sans);letter-spacing:0}
.hud-text span{font:500 9cqw/1.22 var(--py-sans);color:rgba(255,255,255,.92);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.hud-bar{position:absolute;left:0;right:0;bottom:0;height:max(2px,2.2cqw);background:rgba(255,255,255,.3)}
.hud-bar i{display:block;height:100%;background:rgba(255,255,255,.92)}
.fr.post .lb{left:auto;bottom:auto;top:5px;right:5px;padding:0 3px;border-radius:3px;background:rgba(17,18,20,.5);text-shadow:none;font-size:8px;line-height:1.4}
@container (max-width:69px){
  .hud-text{display:none}
  .hud-rail{bottom:auto;top:40%}
  .fr.post .lb{top:auto;right:auto;left:4px;bottom:6px;background:none;padding:0;font-size:7.5px}
}
.g1{--grad:linear-gradient(180deg,#B9714A,#3A1E16)}
.g2{--grad:linear-gradient(180deg,#46708F,#13222F)}
.g3{--grad:linear-gradient(180deg,#CF9A57,#4B2A12)}
.g4{--grad:linear-gradient(180deg,#647A52,#18200F)}
.g5{--grad:linear-gradient(180deg,#A69C92,#2F2925)}
.g6{--grad:linear-gradient(180deg,#3E6A88,#0F1D2A)}
.rounds{margin-top:20px;padding-top:16px;border-top:1px solid var(--py-line)}
.strip{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;margin:12px 0 10px;position:relative}
.strip li{height:36px;display:flex;align-items:center;justify-content:center;border-radius:6px;background:var(--py-sunken);color:var(--py-ink-2);font-size:13px;position:relative}
.strip li.lim::after{content:"limit";position:absolute;right:-6px;top:-18px;transform:translateX(50%);font:400 11px/1 var(--py-sans);color:var(--text-muted)}
.strip li.lim::before{content:"";position:absolute;right:-4px;top:-6px;bottom:-6px;width:2px;background:var(--py-ink);transform:translateX(50%)}
.strip li.ov{background:#fff;box-shadow:inset 0 0 0 2px var(--py-new);color:var(--py-ink);font-weight:500}
.strip li.now{background:var(--py-new);box-shadow:none;color:var(--py-ink)}
.rounds .ui-row:first-child{margin-bottom:22px}
.ui-sub{font-size:13px;color:var(--py-ink-2)}

/* Priced: decision rail */
.pr-grid{display:grid;gap:22px}
@media (min-width:640px){.pr-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px}}
.big{display:block;font-size:40px;line-height:1.05;font-weight:700;letter-spacing:-.035em;margin:4px 0 6px}
.lines{margin-top:14px;border-top:1px solid var(--py-line)}
.lines>div{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid var(--py-line)}
.lines dt{color:var(--py-ink-2)}
.lines dd{font-size:13px}
.pr-margin{display:grid;gap:14px;align-content:start}
.bar{display:grid;grid-template-columns:1fr auto;row-gap:7px;font-size:13px;color:var(--py-ink-2)}
.bar .n{color:var(--py-ink)}
.bar i{grid-column:1/-1;height:5px;border-radius:3px;background:linear-gradient(90deg,var(--c,#9A9DA4) var(--w),var(--py-sunken) var(--w))}
.bar.loss{--c:var(--py-loss)}.bar.loss .n{color:var(--py-loss)}
.bar.gain{--c:var(--py-gain)}.bar.gain .n{color:var(--py-gain)}
.flag{display:flex;gap:10px;align-items:baseline;margin-top:22px;padding-top:16px;border-top:1px solid var(--py-line);color:var(--py-ink-2)}
.flag .dot{transform:translateY(-2px)}
.flag b{color:var(--py-ink);font-weight:700}
.usage{margin-top:16px;padding-top:16px;border-top:1px solid var(--py-line)}
.track{display:flex;align-items:center;gap:10px;margin-top:12px;font-size:11.5px;color:var(--text-muted)}
.tr{flex:1;display:flex;gap:3px;height:6px}
.tr i{border-radius:3px}
.tr .was{flex:2;background:#B4B7BE}
.tr .ext{flex:1;background:var(--py-new)}

/* Approved: draft + phone */
.ui-approve{display:grid;gap:24px;align-items:center}
@media (min-width:640px){.ui-approve{grid-template-columns:minmax(0,1fr) 220px;gap:28px}}
.draft p{margin:10px 0;font-size:15px;line-height:1.55;color:var(--py-ink)}
.confirm{display:flex;gap:9px;align-items:baseline;margin-top:18px;padding-top:14px;border-top:1px solid var(--py-line);font-size:13px;color:var(--py-ink-2)}
.confirm .dot{transform:translateY(-2px)}
.phone{justify-self:center;width:220px;border:7px solid var(--py-ink);border-radius:30px;background:#fff;padding:16px 14px 18px}
.ph-screen{display:flex;flex-direction:column;font-size:11px;line-height:1.35}
.ph-top{display:flex;justify-content:space-between;align-items:baseline;padding-bottom:9px;margin-bottom:10px;border-bottom:1px solid var(--py-line)}
.ph-top b{font-size:11.5px}
.ph-top span{font-size:9.5px;color:var(--text-muted)}
.ph-k{color:var(--text-muted);font-size:9.5px}
.ph-t{font-weight:700;font-size:13px;letter-spacing:-.01em}
.ph-big{font-family:var(--py-sans);font-weight:700;font-size:26px;letter-spacing:-.035em;margin:6px 0 8px}
.ph-l{display:flex;justify-content:space-between;padding:5px 0;border-top:1px solid var(--py-line);color:var(--py-ink-2);font-size:10.5px}
.ph-l .n{color:var(--py-ink)}
.ph-btn{margin-top:12px;height:32px;border-radius:6px;background:var(--py-ink);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:11.5px}
.ph-ok{display:flex;align-items:center;gap:6px;margin-top:10px;font-weight:600;font-size:11px}

/* Remembered: record rows */
.rec li{display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:12px;row-gap:1px;padding:10px 0;border-bottom:1px solid var(--py-line)}
.rec li:last-child{border-bottom:0;padding-bottom:0}
.rec .t{grid-row:1/3;font-size:12.5px;color:var(--py-ink-2);padding-top:1px}
.rec .who{font-weight:700}
.rec .what{color:var(--py-ink-2)}
.rec .via{display:none}
@media (min-width:760px){
  .rec li{grid-template-columns:48px 120px minmax(0,1fr) 84px;align-items:baseline}
  .rec .t{grid-row:auto}
  .rec .via{display:block;text-align:right;font-size:12px;color:var(--text-muted)}
}

/* Invoiced */
.inv>div{display:flex;justify-content:space-between;gap:12px;padding:11px 0;border-bottom:1px solid var(--py-line)}
.inv dt{color:var(--py-ink-2)}
.inv .added dt{color:var(--py-ink);font-weight:600}
.inv .tot{border-bottom:0;border-top:1px solid var(--py-ink);margin-top:-1px;font-weight:700}
.inv .tot dt{color:var(--py-ink)}
.inv .tot dd{font-weight:500}

/* everyone: three parties, real fragments, one record */
.parties{display:grid;gap:40px}
.party{display:grid;gap:16px;align-content:start}
.party h3{font-size:20px;font-weight:700;letter-spacing:-.025em;line-height:1.2;text-wrap:balance}
.party-copy p{margin-top:6px;color:var(--py-ink-2);max-width:30em;text-wrap:pretty}
.party .ui{width:100%}
.ws li{display:grid;grid-template-columns:56px minmax(0,1fr) auto;gap:12px;align-items:center;padding:9px 0;border-bottom:1px solid var(--py-line)}
.ws li:first-child{padding-top:0}
.ws li:last-child{border-bottom:0;padding-bottom:0}
.ws .fr{border-radius:4px}
.ws-job{font-weight:700;letter-spacing:-.01em;min-width:0}
.ws-job span{display:block;font-weight:400;font-size:12px;color:var(--text-muted)}
.ws-amt{font-size:13px}
.ui-crop{display:flex;justify-content:center;align-items:flex-end;padding-bottom:0;overflow:hidden;background:var(--py-panel)}
.phone.sm{width:200px;border-bottom:0;border-radius:28px 28px 0 0;padding:14px 13px 16px}
.vl-bar{margin-bottom:14px;padding:6px 10px;border-radius:var(--py-r-sm);background:var(--py-sunken);font-size:11px;color:var(--py-ink-2);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vl-h{display:block;margin-top:2px;font-size:16px;font-weight:700;letter-spacing:-.02em}
.ui-vendor .lines{margin-top:10px}
.vl-ok{display:flex;align-items:center;gap:8px;margin-top:14px;font-size:13px;font-weight:600}
.join{position:relative;height:36px;margin:4px 0}
.join::before{content:"";position:absolute;left:50%;top:0;bottom:0;border-left:1px solid var(--py-muted)}
.join i{display:none}
.ui-job{max-width:760px;margin:0 auto}
@media (min-width:1000px){
  .parties{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:auto auto;gap:0 24px}
  .party{grid-row:span 2;grid-template-rows:subgrid;gap:20px}
  .join{height:56px;margin:0}
  .join i{display:block;position:absolute;top:0;height:28px;border-left:1px solid var(--py-muted)}
  .join i:nth-child(1){left:calc((100% - 48px)/6)}
  .join i:nth-child(2){left:50%}
  .join i:nth-child(3){right:calc((100% - 48px)/6)}
  .join::after{content:"";position:absolute;top:28px;left:calc((100% - 48px)/6);right:calc((100% - 48px)/6);border-top:1px solid var(--py-muted)}
  .join::before{top:28px}
}

/* nothing without you */
.ctl-grid{display:grid;gap:40px}
.ctl-list{margin-top:32px;border-top:1px solid var(--py-ink)}
.ctl-list>div{padding:18px 0;border-bottom:1px solid var(--py-line);display:grid;gap:4px}
.ctl-list dt{font-weight:700;font-size:17px;letter-spacing:-.02em}
.ctl-list dd{color:var(--py-ink-2)}
.ui-send{align-self:center;width:100%;max-width:440px;justify-self:center}
.send-btn{margin-top:20px;height:46px;border-radius:var(--py-r);background:var(--py-ink);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14.5px}
.send-note{margin-top:10px;text-align:center;font-size:12.5px;color:var(--text-muted)}
@media (min-width:1000px){
  .ctl-grid{grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:64px}
  .ctl-list>div{grid-template-columns:minmax(0,2fr) minmax(0,3fr);gap:24px}
  .ui-send{justify-self:end}
}

/* agencies: self-recognition */
.moments{margin-top:32px;border-top:1px solid var(--py-ink)}
.moments li{padding:18px 0;border-bottom:1px solid var(--py-line);font-size:clamp(20px,5.2vw,27px);line-height:1.25;font-weight:700;letter-spacing:-.03em;text-wrap:balance}
.ag-foot{display:grid;gap:28px;margin-top:36px}
.ag-line{font-size:clamp(17px,4.4vw,19px);line-height:1.5;color:var(--py-ink);font-weight:600;max-width:34em;text-wrap:pretty}
.early{display:grid;gap:6px}
.early h3{font-size:15px;font-weight:700;display:flex;align-items:center;gap:9px}
.early h3::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--py-ink)}
.early p{color:var(--py-ink-2);font-size:15.5px;max-width:30em}
@media (min-width:1000px){
  .moments{margin-top:48px}
  .moments li{padding:22px 0}
  .ag-foot{grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:64px;margin-top:44px}
}

/* final */
.final{background:var(--py-panel)}
.final h2{font-size:clamp(36px,9vw,64px);letter-spacing:-.042em}
.final .sec-lede{margin-top:14px;font-size:clamp(18px,4.8vw,22px);color:var(--py-ink)}
.final .ctas{margin-top:32px}
.alt{font-size:15px;color:var(--text-muted)}
.alt a{color:var(--py-ink);font-weight:600;text-underline-offset:3px}

/* footer */
.ft{border-top:1px solid var(--py-line)}
.ft-in{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;padding-top:24px;padding-bottom:28px;font-size:13px;color:var(--text-muted)}
.brand.sm{font-size:13.5px;font-weight:600;letter-spacing:-.015em;color:var(--py-ink)}
.brand.sm svg{width:14px;height:14px}

/* lightbox */
.lightbox{padding:0;border:0;background:transparent;max-width:none;max-height:none;width:100vw;height:100vh;height:100dvh;margin:0;color:#fff}
.lightbox::backdrop{background:rgba(10,11,12,.94)}
.lb-in{position:relative;height:100%;display:flex;align-items:center;justify-content:center;padding:64px 12px 24px}
@media (min-width:760px){.lb-in{padding:72px 48px 48px}}
.lb-frame{position:relative;width:min(100%,calc((100dvh - 120px) * 16 / 9),1440px);aspect-ratio:16/9;background:#000;border-radius:var(--py-r);overflow:hidden}
.lb-frame video{width:100%;height:100%}
.lb-x{position:absolute;top:14px;right:14px;width:44px;height:44px;display:flex;align-items:center;justify-content:center;border-radius:var(--py-r);border:1px solid rgba(255,255,255,.3);background:transparent;color:#fff;cursor:pointer}
.lb-x:hover{background:rgba(255,255,255,.1)}
.lb-x svg{width:16px;height:16px}
.lb-x:focus-visible,.lb-frame video:focus-visible{outline-color:#fff}
.lb-miss{position:absolute;inset:auto 16px 16px;background:#fff;color:var(--py-ink);border-radius:var(--py-r);padding:10px 14px;font-size:14px}
.lb-miss[hidden]{display:none}

/* desktop: tighter hero so most of the film is in the first screen on a laptop; the film stays full width so the UI in it stays readable */
@media (min-width:1000px){
  .hero{padding-top:44px}
  .kicker{margin-bottom:16px}
  .hero h1{font-size:clamp(48px,4.4vw,60px)}
  .hero-grid{gap:20px}
  .hero-side .ctas{margin-top:24px}
  .film{margin-top:40px}
}

/* phones: smaller play tag so it doesn't cover the film */
.film-tag .tg-s{display:none}
@media (max-width:520px){.film-tag{left:6px;bottom:6px;height:26px;padding:0 8px;gap:5px;font-size:12px}.film-tag .tg-l{display:none}.film-tag .tg-s{display:inline}.film-tag .n{font-size:11.5px}}