/* Maasive Mixes — site styles
   Single dark visual world by design (the brand mark is white-on-black). Tokens first, components after.
   Shape system: all-sharp, radius 0 everywhere. One accent hue (brand red), a deeper shade for button fills. */

@font-face{font-family:"Big Shoulders Display";font-style:normal;font-weight:100 900;font-display:swap;src:url(../fonts/big-shoulders-display-var.woff2) format("woff2")}
@font-face{font-family:"Archivo";font-style:normal;font-weight:100 900;font-display:swap;src:url(../fonts/archivo-var.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/ibm-plex-mono-400.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/ibm-plex-mono-500.woff2) format("woff2")}

:root{
  color-scheme:dark;
  --ink:#0a0a0b;
  --ink-2:#111113;
  --ink-3:#18181b;
  --line:#2a2a2f;
  --line-soft:#1e1e22;
  --bone:#ecebe6;
  --bone-2:#c9c7c1;
  --mute:#8d8a86;
  --red:#ed4350;
  --red-btn:#d8323f;
  --red-btn-hover:#c62f3b;
  --red-ink:#26100f;
  --display:"Big Shoulders Display","Arial Narrow","Helvetica Neue",Impact,sans-serif;
  --body:"Archivo","Helvetica Neue",Helvetica,Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --container:1200px;
  --gutter:clamp(16px,4.5vw,44px);
  --aside-col:260px;
  --header-h:72px;
  --ease:cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 16px)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--ink);color:var(--bone);font-family:var(--body);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden}
img,svg,video,iframe{max-width:100%;display:block}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:.18em}
a:hover{color:#fff}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
:focus-visible{outline:2px solid var(--red);outline-offset:3px}
::selection{background:var(--red);color:#fff}
p{margin:0}
h1,h2,h3,h4{margin:0;font-weight:inherit;line-height:inherit}
ul,ol{margin:0;padding:0;list-style:none}
strong{font-weight:600;color:#fff}
em{font-style:italic}

.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---------- type ---------- */
.display{font-family:var(--display);font-weight:800;text-transform:uppercase;line-height:.92;letter-spacing:.005em;text-wrap:balance}
.h1{font-size:clamp(56px,8.6vw,124px);font-weight:900;line-height:.88;letter-spacing:-.005em}
.h2{font-size:clamp(40px,5.4vw,72px)}
.h3{font-family:var(--body);font-weight:600;font-size:clamp(19px,1.5vw,21px);line-height:1.3;letter-spacing:-.01em;color:#fff}
.lead{font-size:clamp(18px,1.6vw,21px);line-height:1.5;color:var(--bone-2);max-width:60ch;text-wrap:pretty}
.prose{max-width:64ch;color:var(--bone-2);text-wrap:pretty}
.prose p + p{margin-top:1em}
.mono{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;line-height:1.5}
.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);font-weight:500}
.num{font-variant-numeric:tabular-nums}

/* ---------- header ---------- */
.site-header{position:sticky;top:0;z-index:50;padding-block:24px;display:flex;align-items:center;background:rgba(10,10,11,.84);-webkit-backdrop-filter:saturate(140%) blur(12px);backdrop-filter:saturate(140%) blur(12px);border-bottom:1px solid transparent;transition:border-color .25s,padding .35s var(--ease)}
.site-header.is-stuck{padding-block:13px}
.site-header::before{content:"";position:absolute;left:50%;top:-40%;width:min(720px,80vw);height:180%;transform:translateX(-50%);pointer-events:none;background:radial-gradient(closest-side,rgba(237,67,80,.16),rgba(237,67,80,.05) 55%,transparent 75%);opacity:1;transition:opacity .35s}
.site-header.is-stuck::before{opacity:.35}
.site-header{overflow:hidden}
.site-header .container{position:relative}
.site-header.is-stuck{border-bottom-color:var(--line-soft)}
.site-header .container{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:16px}
.brand{grid-column:2;display:inline-flex;align-items:center;justify-content:center;text-decoration:none}
.brand-svg{height:clamp(56px,4.6vw,92px);width:auto;display:block;transition:height .35s var(--ease)}
.site-header.is-stuck .brand-svg{height:40px}
.brand-svg .s0{filter:drop-shadow(0 0 6px rgba(237,67,80,.75)) drop-shadow(0 0 18px rgba(237,67,80,.35))}
.brand:hover .brand-svg .s0{filter:drop-shadow(0 0 8px rgba(237,67,80,1)) drop-shadow(0 0 26px rgba(237,67,80,.5))}
.brand-svg .s0{transition:filter .3s}
/* the header CTA only exists once the hero's own button has scrolled away */
.header-cta{grid-column:3;justify-self:end;opacity:0;transform:translateY(-6px);pointer-events:none;transition:opacity .35s var(--ease),transform .35s var(--ease)}
.site-header.show-cta .header-cta{opacity:1;transform:none;pointer-events:auto}
@media (prefers-reduced-motion:reduce){.header-cta{transition:none}}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:stretch;font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:.04em;font-size:22px;line-height:1;text-decoration:none;color:#fff;background:var(--red-btn);border:1px solid var(--red-btn);transition:background .18s,border-color .18s,transform .18s;white-space:nowrap}
.btn:hover{background:var(--red-btn-hover);border-color:var(--red-btn-hover);color:#fff}
.btn:active{transform:translateY(1px)}
.btn .btn-label{display:inline-flex;align-items:center;padding:17px 24px 15px}
.btn .btn-price{display:inline-flex;align-items:center;gap:8px;padding:0 20px;border-left:1px solid rgba(255,255,255,.28);font-family:var(--display);font-weight:800;font-size:22px;letter-spacing:.02em}
.btn .btn-price s{font-size:.68em;opacity:.72;text-decoration-thickness:2px}
.btn-sm{font-size:19px}
.btn-sm .btn-label{padding:13px 18px 11px}
.btn-sm .btn-price{font-size:19px;padding:0 16px}
.btn-block{width:100%;justify-content:center}
.btn-block .btn-label{flex:1;justify-content:center}

/* ---------- hero ---------- */
.hero{padding-block:clamp(40px,6vw,88px) 0;position:relative;overflow:hidden;isolation:isolate}
.hero::before{content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;background:
  radial-gradient(1100px 700px at 8% 0%,rgba(237,67,80,.13),transparent 60%),
  radial-gradient(900px 600px at 100% 45%,rgba(255,255,255,.035),transparent 60%)}
.hero-knob{position:absolute;z-index:-1;right:-6vw;top:-4vw;width:clamp(360px,44vw,760px);height:auto;color:#fff;opacity:.05;fill:currentColor;pointer-events:none;transform-origin:50% 50%;animation:turn 140s linear infinite}
@keyframes turn{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.hero-knob{animation:none}}
@media (max-width:700px){.hero-knob{right:-30vw;top:34vh;width:110vw;opacity:.04}}
.hero .container{position:relative}
.hero .eyebrow{margin-bottom:clamp(18px,2.6vw,30px)}
.hero .h1{max-width:18ch}
.hero .lead{margin-top:clamp(20px,3vw,32px)}
.hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px;margin-top:28px}
.hero-secondary{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--bone-2);text-decoration:none;border-bottom:1px solid var(--line);padding-bottom:4px}
.hero-secondary:hover{color:#fff;border-bottom-color:var(--bone)}

/* ---------- motion ----------
   One language: things rise out of the page. Hero on load, the rest on scroll. JS opts in (no-JS is static),
   reduced-motion turns it all off, and every element rests in its visible state. */
.js .hero [data-in]{animation:rise .8s var(--ease) both;animation-delay:calc(var(--i,0) * 90ms)}
.js .hero .h1[data-in]{animation:mask-rise 1s var(--ease) both;animation-delay:90ms}
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes mask-rise{from{opacity:0;transform:translateY(34px);clip-path:inset(0 0 100% 0)}to{opacity:1;transform:none;clip-path:inset(0 0 -12% 0)}}
.reveal-init [data-reveal]{opacity:0;transform:translateY(22px);transition:opacity .75s var(--ease),transform .75s var(--ease);transition-delay:calc(var(--i,0) * 70ms)}
.reveal-init [data-reveal="stamp"]{transform:scale(1.12);transition-duration:.55s}
.reveal-init [data-reveal].in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .js .hero [data-in],.js .hero .h1[data-in]{animation:none}
  .reveal-init [data-reveal]{opacity:1;transform:none;transition:none}
}

/* video */
.video{margin-top:clamp(36px,5vw,64px)}
.video-frame{position:relative;aspect-ratio:16/9;background:var(--ink-2);border:1px solid var(--line);overflow:hidden}
.video-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;opacity:0;transition:opacity .5s var(--ease)}
.video-frame iframe.in{opacity:1}
.video-poster{transition:opacity .45s var(--ease)}
.video-poster.out{opacity:0;pointer-events:none}
.video-poster{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:pointer;text-align:left}
.video-poster img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.video-poster:hover img{transform:scale(1.015)}
.play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:clamp(72px,8vw,96px);height:clamp(72px,8vw,96px);background:var(--red-btn);display:grid;place-items:center;z-index:2;transition:transform .2s,background .2s;box-shadow:0 12px 40px rgba(0,0,0,.45)}
.play svg{width:40%;height:40%;margin-left:6%;fill:#fff}
.video-poster:hover .play{transform:translate(-50%,-50%) scale(1.05);background:var(--red-btn-hover)}
.video-caption{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:12px 0 0;font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}

/* ---------- logo marquee ---------- */
.logos{padding-block:clamp(28px,4vw,44px);border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);margin-top:clamp(48px,7vw,88px)}
.logos .eyebrow{margin-bottom:22px}
.marquee{position:relative;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee-track{display:flex;width:max-content;gap:clamp(48px,6vw,84px);align-items:center;animation:marquee 70s linear infinite;will-change:transform}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee-track img{height:clamp(30px,3.4vw,44px);width:auto;opacity:.78;transition:opacity .2s}
.marquee-track img:hover{opacity:1}
.marquee-track img.tall{height:clamp(42px,4.6vw,58px)}
.marquee-track img.short{height:clamp(22px,2.4vw,30px)}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  .marquee{mask-image:none;-webkit-mask-image:none}
  .marquee-track{animation:none;width:auto;flex-wrap:wrap;gap:28px 40px;justify-content:center}
  .marquee-track .dup{display:none}
}

/* ---------- sections ---------- */
.section{padding-block:clamp(64px,9vw,120px)}
.section + .section{border-top:1px solid var(--line-soft)}
.section > .container > .h2{margin-bottom:clamp(32px,4.5vw,64px)}
.section > .container > .lead{margin-bottom:clamp(28px,4vw,48px)}
/* two-column sections: the left column carries a fact (a person, a number, a spec), never a label */
.section-grid{display:grid;grid-template-columns:1fr;gap:clamp(24px,3vw,32px)}
@media (min-width:960px){.section-grid{grid-template-columns:var(--aside-col) minmax(0,1fr)}}
.aside{align-self:start}
@media (min-width:960px){.aside{position:sticky;top:calc(var(--header-h) + 28px)}}
.section-body > .h2{margin-bottom:clamp(20px,3vw,32px)}
.section-body > .lead{margin-bottom:clamp(28px,4vw,48px)}

/* ---------- about ---------- */
.person img{width:100%;max-width:300px;aspect-ratio:4/5;height:auto;object-fit:cover;border:1px solid var(--line)}
.person .name{font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:30px;line-height:1;color:#fff;margin-top:16px}
.person .role{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute);margin-top:8px;line-height:1.7;max-width:22ch}
.about-grid{display:grid;grid-template-columns:1fr;gap:clamp(32px,5vw,64px)}
@media (min-width:800px){.about-grid{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr)}}
.stats{display:grid;grid-template-columns:1fr;border-top:1px solid var(--line)}
.stat{padding:18px 0 16px;border-bottom:1px solid var(--line-soft);display:flex;flex-direction:column;gap:8px}
.stat .v{font-family:var(--display);font-weight:900;font-size:clamp(44px,5vw,64px);line-height:.9;color:#fff;font-variant-numeric:tabular-nums}
.stat .v span{color:var(--red)}
.stat .k{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.credits{margin-top:28px}
.credits .k{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);margin-bottom:10px}
.credits ul{display:flex;flex-wrap:wrap;gap:8px 0}
.credits li{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:20px;line-height:1;color:var(--bone-2)}
.credits li:not(:last-child)::after{content:"/";color:var(--line);margin:0 10px;font-weight:400}

.quote-band{margin-top:clamp(40px,6vw,64px);padding:clamp(24px,4vw,40px);display:grid;grid-template-columns:1fr;gap:20px;align-items:center}
@media (min-width:700px){.quote-band{grid-template-columns:auto minmax(0,1fr)}}
.quote-band img{width:96px;height:96px;object-fit:cover;filter:grayscale(1) contrast(1.05)}
.quote-band blockquote{margin:0}
.quote-band .q{font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:clamp(26px,3.4vw,42px);line-height:.98;color:#fff;text-wrap:balance}
.quote-band .q em{color:var(--red);font-style:normal}
.quote-band .who{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);margin-top:14px;line-height:1.7}
.quote-band .who b{color:var(--bone);font-weight:500}

/* ---------- learn grid ---------- */
.learn-wrap{display:grid;grid-template-columns:1fr;gap:clamp(24px,4vw,56px);align-items:start}
@media (min-width:960px){.learn-wrap{grid-template-columns:minmax(280px,360px) minmax(0,1fr)}}
.learn-photo{margin:0;max-width:360px}
@media (min-width:960px){.learn-photo{position:sticky;top:calc(var(--header-h) + 28px)}}
.learn-photo img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border:1px solid var(--line)}
.learn{display:grid;grid-template-columns:1fr;gap:0 clamp(24px,4vw,56px)}
@media (min-width:700px){.learn{grid-template-columns:repeat(2,minmax(0,1fr))}}
.learn li{padding:22px 0 26px;border-top:1px solid var(--line);position:relative}
.learn li::before{content:"";position:absolute;left:0;top:-1px;height:1px;width:0;background:var(--red);transition:width .45s var(--ease)}
.learn li:hover::before{width:100%}
.learn .h3{margin-bottom:8px}
.learn p{color:var(--mute);font-size:16px;max-width:46ch;text-wrap:pretty}

/* ---------- tracklist ---------- */
.specs{display:grid;gap:14px;border-top:1px solid var(--line);padding-top:18px}
.spec .k{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.spec .v{font-family:var(--display);font-weight:800;font-size:30px;line-height:1;text-transform:uppercase;margin-top:4px;color:#fff}
.side{margin-top:clamp(28px,4vw,44px)}
.side-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding-bottom:12px;border-bottom:2px solid var(--bone)}
.side-head .t{font-family:var(--display);font-weight:900;text-transform:uppercase;font-size:clamp(28px,3.4vw,40px);line-height:1;color:#fff}
.side-head .t span{color:var(--red)}
.side-head .r{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.track{display:grid;grid-template-columns:56px minmax(0,1fr);gap:0 18px;padding:18px 0;border-bottom:1px solid var(--line-soft);align-items:start}
@media (min-width:700px){.track{grid-template-columns:72px minmax(0,26ch) minmax(0,1fr);gap:0 28px;padding:20px 0}}
.track .n{font-family:var(--display);font-weight:900;font-size:clamp(34px,3.6vw,44px);line-height:.9;color:var(--bone-2);font-variant-numeric:tabular-nums;transition:color .15s}
.track{position:relative}
.track::after{content:"";position:absolute;left:0;bottom:-1px;height:1px;width:0;background:var(--red);transition:width .45s var(--ease)}
.track:hover::after{width:100%}
.track:hover .n{color:var(--red)}
.track .h3{font-size:19px;transition:transform .3s var(--ease)}
.track:hover .h3{transform:translateX(4px)}
.track p{color:var(--mute);font-size:15.5px;line-height:1.55;text-wrap:pretty;grid-column:2;margin-top:6px}
@media (min-width:700px){.track p{grid-column:3;margin-top:2px}}

/* ---------- extras (bento, 6 cells, two wide) ---------- */
.bento{display:grid;grid-template-columns:1fr;gap:1px;background:var(--line-soft);border:1px solid var(--line-soft)}
@media (min-width:760px){.bento{grid-template-columns:repeat(3,minmax(0,1fr))}.bento .wide{grid-column:span 2}}
.cell{background:var(--ink);transition:background .3s;padding:26px 24px 28px;display:flex;flex-direction:column;gap:10px;min-height:100%;position:relative;overflow:hidden}
.cell .tag{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--red);font-weight:500}
.cell .h3{font-size:20px}
.cell p{color:var(--mute);font-size:15.5px;line-height:1.55;text-wrap:pretty;max-width:52ch}
.cell .big{font-family:var(--display);font-weight:900;font-size:clamp(64px,7vw,104px);line-height:.85;color:#fff;margin:6px 0 4px}
.cell .big span{color:var(--red)}
.cell .big small{display:inline-block;font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);font-weight:500;margin-left:6px;vertical-align:baseline}
.cell.tint{background:var(--red-ink)}
.cell.tint .tag{color:var(--red)}
.cell.tint p{color:var(--bone-2)}
.cell.wide{justify-content:flex-end}
.cell.has-bg .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:right center;opacity:.32;pointer-events:none}
.cell.has-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--ink) 30%,rgba(10,10,11,.55) 65%,rgba(10,10,11,.25));pointer-events:none}
.cell.has-bg > :not(.bg){position:relative;z-index:1}
.cell.has-bg:hover .bg{opacity:.45}
.cell:hover{background:var(--ink-2)}
.cell.tint:hover{background:#2d1412}

/* ---------- testimonials ---------- */
.quotes{display:grid;grid-template-columns:1fr;gap:clamp(16px,2vw,24px)}
@media (min-width:700px){.quotes{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px){.quotes{grid-template-columns:repeat(3,minmax(0,1fr))}}
.quotes figure{margin:0;padding:26px 26px 24px;display:flex;flex-direction:column;justify-content:space-between;gap:18px;min-height:100%}
.quotes blockquote{margin:0;font-size:17.5px;line-height:1.5;color:var(--bone);text-wrap:pretty}
.quotes blockquote::before{content:"\201C";display:block;font-family:var(--display);font-weight:900;font-size:48px;line-height:.6;color:var(--red);margin-bottom:10px}
.quotes figcaption{margin-top:0;font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.quotes figcaption b{color:var(--bone-2);font-weight:500}

/* ---------- faq ---------- */
.faq{border-top:1px solid var(--line);max-width:820px}
.faq details{border-bottom:1px solid var(--line-soft)}
.faq summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:minmax(0,1fr) 28px;align-items:center;gap:16px;padding:18px 0;font-family:var(--body);font-weight:600;font-size:18px;color:#fff;transition:color .15s}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--red)}
.faq summary .x{position:relative;width:20px;height:20px;justify-self:end}
.faq summary .x::before,.faq summary .x::after{content:"";position:absolute;left:0;top:9px;width:20px;height:2px;background:currentColor;transition:transform .2s}
.faq summary .x::after{transform:rotate(90deg)}
.faq details[open] summary .x::after{transform:rotate(0)}
.faq .a{padding:0 0 22px;max-width:62ch;color:var(--bone-2)}
.faq details[open] .a{animation:rise .35s var(--ease) both}
@media (prefers-reduced-motion:reduce){.faq details[open] .a{animation:none}}
.faq .a p + p{margin-top:.8em}

/* ---------- guarantee ---------- */
.days{font-family:var(--display);font-weight:900;font-size:clamp(96px,12vw,168px);line-height:.8;color:#fff;letter-spacing:-.01em}
.days small{display:block;font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);margin-top:14px;font-weight:500}
.guarantee .h2{max-width:19ch}
.guarantee .aside{overflow:hidden}
.days{transform-origin:left center}

/* ---------- offer ---------- */
.offer{padding-block:clamp(64px,9vw,120px);border-top:1px solid var(--line-soft)}
.offer-card{display:grid;grid-template-columns:1fr}
@media (min-width:860px){.offer-card{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr)}}
.offer-main{padding:clamp(24px,4vw,44px);display:flex;flex-direction:column;gap:22px;border-bottom:1px solid var(--line)}
@media (min-width:860px){.offer-main{border-bottom:0;border-right:1px solid var(--line)}}
.offer-main .name{font-family:var(--display);font-weight:900;text-transform:uppercase;font-size:clamp(34px,4vw,48px);line-height:.95;color:#fff}
.price{display:flex;align-items:baseline;gap:18px;flex-wrap:wrap}
.price .now{font-family:var(--display);font-weight:900;font-size:clamp(88px,11vw,132px);line-height:.85;color:#fff;letter-spacing:-.01em}
.price .now sup{font-size:.4em;vertical-align:top;top:.25em;position:relative;color:var(--red)}
.price .was{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);display:flex;flex-direction:column;gap:6px}
.price .was s{color:var(--bone-2);text-decoration-color:var(--red);text-decoration-thickness:3px;font-size:36px;font-family:var(--display);font-weight:800;letter-spacing:.02em;line-height:1}
.offer-meta{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--bone-2);line-height:1.9}
.offer-fine{font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--mute);line-height:1.7;text-transform:uppercase}
.offer-fine a{color:var(--bone-2)}
.offer-list{padding:clamp(24px,4vw,44px)}
.offer-list .k{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);margin-bottom:14px}
.offer-list li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:12px;padding:12px 0;border-top:1px solid var(--line-soft);font-size:16px;color:var(--bone)}
.offer-list li:last-child{border-bottom:1px solid var(--line-soft)}
.offer-list li::before{content:"";width:12px;height:12px;margin-top:7px;background:var(--red);clip-path:polygon(0 45%,35% 80%,100% 15%,100% 35%,35% 100%,0 65%)}
.offer-list li b{color:#fff;font-weight:600}
.offer-list li span{color:var(--mute)}

/* ---------- pointer spotlight on cards (hover devices only) ----------
   Two things follow the cursor: a red light in the 1px border (painted to the border box under the card's
   padding-box fill, revealed by fading the border to transparent) and a soft red wash inside the card
   (a pseudo-element that fades in). The card also lifts 3px. Nothing runs on touch devices. */
.spot{border:1px solid var(--line);background:var(--spot-fill,var(--ink-2)) padding-box;transition:border-color .4s var(--ease),transform .45s var(--ease)}
.spot > *{position:relative;z-index:1}
@media (hover:hover) and (pointer:fine){
  .spot{background:linear-gradient(var(--spot-fill,var(--ink-2)),var(--spot-fill,var(--ink-2))) padding-box,radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(237,67,80,1),rgba(237,67,80,.7) 40%,rgba(255,255,255,.22) 85%) border-box}
  .spot::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .45s var(--ease);
    background:radial-gradient(560px circle at var(--mx,50%) var(--my,50%),rgba(237,67,80,.22),rgba(237,67,80,.07) 32%,transparent 62%)}
  .spot:hover{border-color:transparent}
  .spot:hover::before{opacity:1}
  .spot:hover,.reveal-init .spot.in:hover{transform:translateY(-3px)}
  .offer-card.spot:hover,.reveal-init .offer-card.spot.in:hover{transform:none}
  .offer-card.spot::before{background:radial-gradient(720px circle at var(--mx,50%) var(--my,50%),rgba(237,67,80,.14),rgba(237,67,80,.04) 35%,transparent 65%)}
}
.offer-card.spot{--spot-fill:var(--ink-2);border-color:var(--bone-2)}

/* ---------- grain: a fixed, non-interactive film layer so the black reads as paper, not a screen ---------- */
@media (min-width:900px){
  body::after{content:"";position:fixed;inset:0;z-index:70;pointer-events:none;opacity:.045;mix-blend-mode:screen;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
    background-size:220px 220px}
}

/* ---------- footer ---------- */
.site-footer{border-top:1px solid var(--line);padding-block:40px 48px;color:var(--mute);font-size:13px}
.footer-grid{display:grid;grid-template-columns:1fr;gap:28px}
@media (min-width:860px){.footer-grid{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr)}}
.site-footer p{max-width:70ch;text-wrap:pretty}
.site-footer p + p{margin-top:.7em}
.footer-links{display:flex;flex-wrap:wrap;gap:8px 20px;font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase}
.footer-links a{text-decoration:none;color:var(--bone-2)}
.footer-links a:hover{color:#fff;text-decoration:underline}
.footer-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 24px;margin-top:28px;padding-top:20px;border-top:1px solid var(--line-soft);font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase}

/* ---------- legal pages ---------- */
.legal{padding-block:clamp(48px,7vw,96px)}
.legal .h1{font-size:clamp(44px,7vw,96px);max-width:12ch}
.legal .meta{margin:18px 0 40px;color:var(--mute)}
.legal article{max-width:68ch;color:var(--bone-2)}
.legal article h2{font-family:var(--body);font-weight:600;color:#fff;font-size:20px;margin:36px 0 10px}
.legal article p{margin:0 0 1em}
.legal article ul{list-style:disc;padding-left:1.3em;margin:0 0 1em}
.legal article li{margin:.3em 0}
.legal article a{color:var(--bone)}
.back{display:inline-flex;gap:10px;align-items:center;font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;color:var(--bone-2);margin-top:40px}
.back:hover{color:#fff}

/* ---------- misc ---------- */
.thanks{padding-block:clamp(56px,8vw,112px)}
.thanks .h1{font-size:clamp(44px,7vw,96px);max-width:14ch}
.thanks .lead{max-width:56ch;margin:20px 0 32px}
.thanks ol{list-style:none;padding:0;margin:0 0 36px;max-width:62ch;counter-reset:s}
.thanks li{display:grid;grid-template-columns:40px 1fr;gap:14px;padding:20px 0;border-top:1px solid var(--line);counter-increment:s}
.thanks li:last-child{border-bottom:1px solid var(--line)}
.thanks li::before{content:counter(s,decimal-leading-zero);font-family:var(--mono);color:var(--red);font-size:13px;letter-spacing:.12em;padding-top:5px}
.thanks li b{display:block;color:#fff;font-weight:600;font-size:18px;margin-bottom:6px}
.thanks li p{margin:0;color:var(--bone-2)}
.thanks .actions{display:flex;gap:22px;flex-wrap:wrap;align-items:center}
.thanks .fine{margin-top:32px;color:var(--mute);font-size:14px;max-width:60ch;line-height:1.6}
.thanks .fine a{color:var(--bone)}
.notfound{min-height:60vh;display:grid;place-items:center;text-align:center;padding-block:80px}
.notfound .h1{font-size:clamp(80px,20vw,240px)}
@media (max-width:560px){
  .btn{font-size:19px}
  .btn .btn-label{padding:14px 16px 12px}
  .btn .btn-price{font-size:19px;padding:0 12px}
  .btn .btn-price s{display:none}
  .btn-sm .btn-label{padding:12px 14px 10px}
  .btn-sm .btn-price{padding:0 12px}
  .site-header .container{display:flex;justify-content:center}
  .site-header.show-cta .container{justify-content:space-between}
  .header-cta{display:none}
  .site-header.show-cta .header-cta{display:block}
  .brand-svg{height:40px}
  .site-header{padding-block:16px}
  .site-header.is-stuck{padding-block:10px}
  .site-header.is-stuck .brand-svg{height:30px}
  :root{--header-h:56px}
}

/* ===================== v2 overrides: image-first, poster-like stacked storytelling ===================== */
.v2 .display.mixed{text-transform:none;letter-spacing:-.01em;font-weight:700;line-height:.96}
.v2 .h2{font-size:clamp(38px,5vw,66px)}
.v2 .section{padding-block:clamp(40px,5vw,64px)}
.v2 .wall{padding-top:clamp(36px,4.5vw,56px);padding-bottom:clamp(36px,4.5vw,56px)}
.v2 .faq2{padding-top:clamp(32px,4vw,44px)}
.v2 .gatefold{padding-top:clamp(36px,4.5vw,64px);padding-bottom:clamp(28px,3vw,44px)}
.v2 .extras2{padding-top:clamp(32px,4vw,56px);padding-bottom:clamp(28px,3.5vw,44px)}
.v2 .section + .section{border-top:0}
.v2 .dossier{padding-bottom:clamp(28px,3vw,40px)}
/* phones: sections sit a hair closer, the metrics strip and the quote too */
@media (max-width:600px){
  .v2 .section{padding-block:34px}
  .v2 .gatefold{padding-top:18px;padding-bottom:28px}
  .v2 .extras2{padding-top:32px;padding-bottom:28px}
  .v2 .faq2{padding-top:32px}
  /* metrics to quote: a little more room; quote to the learn heading: a lot less */
  .v2 .proof{padding-top:26px;padding-bottom:24px}
  .v2 .proof .metrics-row{margin-bottom:72px}
}

/* header floats over the hero image */
.site-header{background:none;-webkit-backdrop-filter:none;backdrop-filter:none;margin-bottom:calc(-1 * (var(--header-h) + 60px))}
/* Home page: the header is FIXED, not sticky. Its height changes when it sticks and when the phone CTA appears; as an in-flow
   sticky element that pushed the whole page up and down, which fed back into the observers that toggle it and made the page shake
   at one scroll spot on phones (2026-09-26). Out of flow, it can resize freely. main gets exactly the offset the in-flow header
   produced: header height at the top (49px of padding and border plus the logo) minus the negative margin (--header-h + 60px). */
:root{--hh0:calc(49px + clamp(56px,4.6vw,92px))}
@media (max-width:560px){:root{--hh0:73px}}
.site-header.is-home{position:fixed;left:0;right:0;top:0;margin-bottom:0}
.site-header.is-home + main{margin-top:calc(var(--hh0) - var(--header-h) - 60px)}
/* the sentinel that tells the header it has left the top: pinned to the document top, so main's negative margin cannot drag it up (it collapsed through and made the header start 'stuck') */
#top-sentinel{position:absolute;top:0;left:0;width:1px;height:1px;pointer-events:none}
/* inner pages (legal, thank-you, 404) have no hero to float over: give the content back the room the header's negative margin took */
.legal,.thanks{padding-top:calc(var(--header-h) + 60px + clamp(28px,5vw,64px))}
.notfound{padding-top:calc(var(--header-h) + 60px + 40px)}
/* gradient lives on a pseudo that runs past the header's bottom edge: Chrome draws a faint seam on a gradient box with a fractional height */
.site-header::after{content:"";position:absolute;left:0;right:0;top:0;bottom:-12px;z-index:-1;background:linear-gradient(180deg,rgba(10,10,11,.82),rgba(10,10,11,0) 88%);transition:opacity .25s}
.site-header.is-stuck::after{opacity:0}
.site-header.is-stuck{background:rgba(10,10,11,.86);-webkit-backdrop-filter:saturate(140%) blur(12px);backdrop-filter:saturate(140%) blur(12px)}
.site-header::before{opacity:0;transition:opacity .3s}
.site-header.is-stuck::before{opacity:.5}
.brand-svg .s0,.brand:hover .brand-svg .s0{filter:none}

/* ---------- hero: full-bleed studio photo, text bottom-left ---------- */
.hero2{position:relative;min-height:min(92vh,980px);display:flex;align-items:flex-end;overflow:hidden;isolation:isolate;background:var(--ink);border:0;aspect-ratio:auto}
.hero2-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 72%;z-index:-2;transform-origin:50% 100%}
.hero2-shade{position:absolute;inset:0;z-index:-1;background:
  linear-gradient(180deg,rgba(10,10,11,.28) 0%,rgba(10,10,11,0) 26%,rgba(10,10,11,.42) 58%,rgba(10,10,11,.96) 100%),
  linear-gradient(90deg,rgba(10,10,11,.66) 0%,rgba(10,10,11,.22) 40%,rgba(10,10,11,0) 68%)}
@media (max-width:900px){
  .hero2-bg{height:66%;object-position:48% 100%}
  .hero2-shade{background:linear-gradient(180deg,rgba(10,10,11,.3) 0%,rgba(10,10,11,0) 18%,rgba(10,10,11,.55) 44%,var(--ink) 64%)}
}
.hero2-inner{position:relative;padding-block:clamp(120px,16vw,200px) clamp(28px,4vw,48px)}
.hero2 .h1{max-width:20ch;font-size:clamp(56px,8.4vw,132px);font-weight:800;line-height:.86;text-shadow:0 2px 40px rgba(0,0,0,.35)}
.hero2 .eyebrow{margin-bottom:clamp(16px,2vw,26px);color:var(--bone-2)}
.hero2-row{display:grid;grid-template-columns:1fr;gap:20px 48px;align-items:end;margin-top:clamp(20px,3vw,32px)}
@media (min-width:900px){.hero2-row{grid-template-columns:minmax(0,1fr) auto}}
.hero2 .lead{max-width:44ch;color:var(--bone)}
.hero2 .hero-actions{margin-top:0;gap:14px 28px}
.link-arrow{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--bone);border-bottom:1px solid var(--bone-2);padding-bottom:5px;transition:color .2s,border-color .2s}
.link-arrow::after{content:" \2192"}
.link-arrow:hover{color:#fff;border-bottom-color:#fff}
.hero2 iframe{z-index:5}
.hero2 .video-poster{position:static;width:auto;height:auto;display:inline;cursor:pointer}
/* scroll-driven slow push-in where supported (anchored at the bottom edge, so it never opens a gap) */
@supports (animation-timeline: scroll()){
  .hero2-bg{animation:drift linear both;animation-timeline:scroll();animation-range:0 120vh}
  @keyframes drift{from{transform:scale(1)}to{transform:scale(1.08)}}
  @media (prefers-reduced-motion:reduce){.hero2-bg{animation:none}}
}

/* ---------- logos strip: centered, bigger ---------- */
.logos2{padding-block:clamp(28px,4vw,44px) clamp(28px,4vw,48px);text-align:center;border-bottom:1px solid var(--line-soft)}
.strip-label{font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute);margin-bottom:28px}
.logos2 .marquee-track img{height:clamp(36px,4.2vw,56px);opacity:.85}
.logos2 .marquee-track img.tall{height:clamp(50px,5.6vw,72px)}
.logos2 .marquee-track img.short{height:clamp(26px,3vw,38px)}
/* phones: the hero's intro link and the logo strip sit closer together */
@media (max-width:900px){
  .hero2-inner{padding-bottom:18px}
  .logos2{padding-top:18px}
  .logos2 .strip-label{margin-bottom:20px}
}

/* ---------- dossier: layered image crop frames + right-third caption ---------- */
.dossier-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(40px,6vw,80px);align-items:center}
@media (min-width:960px){.dossier-grid{grid-template-columns:minmax(0,1.6fr) minmax(300px,1fr)}}
/* four frames: the stage dive leads, the Chino selfie with a drawn-on note, the LED shot, and the black and white console portrait overlapping the corner */
.frames{position:relative;aspect-ratio:4/6;min-height:0}
@media (min-width:960px){.frames{aspect-ratio:5/4;min-height:420px}}
.frames figure{position:absolute;margin:0;border:1px solid var(--line);background:var(--ink-2);overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.5)}
.frames img{width:100%;height:100%;object-fit:cover;display:block}
.frames .f1{left:0;top:0;width:100%;height:38%}
.frames .f1 img{object-position:50% 12%}
.frames .f4{left:0;top:41%;width:48%;height:29%}
.frames .f4 img{object-position:45% 0}
.frames .f3{right:0;top:46%;width:46%;height:24%}
.frames .f3 img{opacity:.85}
.frames .f2{left:0;bottom:0;width:100%;height:27%}
.frames .f2 img{object-position:30% 20%}
@media (min-width:960px){
  .frames .f1{width:62%;height:58%}
  .frames .f1 img{object-position:50% 40%}
  .frames .f4{left:auto;right:0;top:0;width:35%;height:50%}
  .frames .f3{right:auto;left:0;top:auto;bottom:0;width:36%;height:32%}
  .frames .f2{left:auto;right:0;width:58%;height:44%}
  .frames .f2 img{object-position:30% 50%}
}
/* reveal: each frame wipes up from its bottom edge while the photo settles from a slight zoom, staggered; the block itself no longer slides */
.reveal-init .frames[data-reveal]{opacity:1;transform:none;transition:none}
.frames .f1{--f:0}.frames .f4{--f:1}.frames .f3{--f:2}.frames .f2{--f:3}
.reveal-init .frames figure{opacity:0;transition:opacity .45s var(--ease);transition-delay:calc(var(--f) * 160ms)}
.reveal-init .frames figure img{clip-path:inset(100% 0 0 0);transform:scale(1.12);transition:clip-path 1s cubic-bezier(.16,1,.3,1),transform 1.8s cubic-bezier(.16,1,.3,1);transition-delay:calc(var(--f) * 160ms)}
.reveal-init .frames.in figure{opacity:1}
.reveal-init .frames.in figure img{clip-path:inset(0 0 0 0);transform:none}
@media (prefers-reduced-motion:reduce){.reveal-init .frames figure,.reveal-init .frames figure img{opacity:1;clip-path:none;transform:none;transition:none}}
/* the note: a red arrow draws itself from the caption up to Chino once the frames have revealed */
.frames .f4 figcaption{left:auto;right:10px;bottom:8px;text-align:right;color:#fff;font-weight:500;font-size:11px;line-height:1.5;letter-spacing:.1em;padding:6px 8px;background:rgba(10,10,11,.72);border-left:2px solid var(--red)}
.frames .note{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible;filter:drop-shadow(0 1px 2px rgba(0,0,0,.7))}
.frames .note path{fill:none;stroke:var(--red);stroke-width:.9;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:0}
.reveal-init .frames .note path{stroke-dashoffset:1}
.reveal-init .frames.in .note .n1{animation:note-draw .8s var(--ease) 1.25s forwards}
.reveal-init .frames.in .note .n2{animation:note-draw .25s var(--ease) 2s forwards}
@keyframes note-draw{to{stroke-dashoffset:0}}
.reveal-init .frames .f4 figcaption{opacity:0;transition:opacity .5s var(--ease) 1.1s}
.reveal-init .frames.in .f4 figcaption{opacity:1}
@media (prefers-reduced-motion:reduce){.reveal-init .frames .note path{stroke-dashoffset:0;animation:none}.reveal-init .frames .f4 figcaption{opacity:1;transition:none}}
.frames figcaption{position:absolute;left:12px;bottom:10px;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--bone-2)}
.dossier-text .eyebrow{margin-bottom:14px}
.dossier-text .role{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute);margin:12px 0 22px;line-height:1.7}
.dossier-text .prose{font-size:16.5px}
.credits2{margin-top:28px}
.credits2 .k{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);margin-bottom:8px}
.credits2 ol{columns:2;column-gap:24px}
.credits2 li{display:flex;gap:10px;align-items:baseline;padding:7px 0;border-top:1px solid var(--line-soft);font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:18px;color:var(--bone-2);break-inside:avoid}
.credits2 .idx{font-family:var(--mono);font-size:11px;color:var(--red);letter-spacing:.08em}

/* ---------- oversized metrics strip ---------- */
.proof{position:relative;isolation:isolate;overflow:hidden;text-align:center;padding-top:clamp(8px,1.5vw,20px);padding-bottom:clamp(24px,3vw,40px)}
.proof .container{position:relative}
.proof .metrics-row{margin-bottom:clamp(52px,6vw,88px)}
.metrics-row{display:grid;grid-template-columns:1fr;gap:24px}
@media (min-width:700px){.metrics-row{grid-template-columns:repeat(3,minmax(0,1fr));gap:0}.metric + .metric{border-left:1px solid var(--line);padding-left:clamp(20px,3vw,40px)}}
.metric .v{font-family:var(--display);font-weight:800;font-size:clamp(64px,8.5vw,132px);line-height:.85;color:#fff;font-variant-numeric:tabular-nums}
.metric .v em{font-style:normal;color:var(--red)}
.metric .k{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);margin-top:12px}
@media (max-width:699px){.metric{text-align:left}}

/* ---------- centered pull quote ---------- */
.pull{position:relative;text-align:center;margin:0 auto;max-width:1000px}
.proof::after{content:"";position:absolute;left:50%;top:30%;width:min(1100px,100vw);height:64%;transform:translateX(-50%);pointer-events:none;z-index:-2;background:radial-gradient(closest-side,rgba(237,67,80,.09),transparent)}
.wave{position:absolute;left:0;right:0;bottom:0;top:32%;width:100%;height:68%;z-index:-1;pointer-events:none;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent),linear-gradient(180deg,transparent,#000 30%,#000 78%,transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent),linear-gradient(180deg,transparent,#000 30%,#000 78%,transparent);mask-composite:intersect}
.pull .q{font-size:clamp(34px,5.2vw,76px);font-weight:800;line-height:.96;color:#fff}
.pull .q em{color:var(--red);font-style:normal}
/* an ink pool behind the quote so the red word stays legible over the red bars; the wave still shows around it (denser on phones, where the bars sit right behind the words) */
.pull::before{content:"";position:absolute;left:-8%;right:-8%;top:-18%;bottom:-10%;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 50% 44%,rgba(10,10,11,.94) 0%,rgba(10,10,11,.8) 36%,rgba(10,10,11,.4) 62%,rgba(10,10,11,0) 82%)}
.pull .q{text-shadow:0 2px 26px rgba(10,10,11,.95),0 0 6px rgba(10,10,11,.8)}
@media (max-width:900px){
  .pull::before{left:-14%;right:-14%;top:-20%;bottom:-12%;background:radial-gradient(ellipse at 50% 44%,rgba(10,10,11,.97) 0%,rgba(10,10,11,.9) 38%,rgba(10,10,11,.55) 62%,rgba(10,10,11,0) 84%)}
}
.pull footer{display:inline-flex;align-items:center;gap:16px;margin-top:32px;text-align:left;font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);line-height:1.7}
.pull footer img{width:72px;height:72px;object-fit:cover;filter:grayscale(1)}
.pull footer b{color:var(--bone);font-weight:500}

/* a hair tighter on desktop (Graham 2026-09-26): About Jay to the metrics strip, and the last module to the finder. Phones keep their own values. */
@media (min-width:601px){.v2 .proof{padding-top:clamp(24px,2.8vw,40px)}.v2 .learn2{padding-top:clamp(28px,2.8vw,40px)}}
/* ---------- learn (the finder): plain background, so the video and the list are the only things moving ---------- */
.learn2{position:relative}
/* ---------- modules opener: the control-room photo and the speaker rings sit behind the "15" and the headline only,
   in a full-bleed band that fades out before the four module columns start ---------- */
.v2 .gatefold{padding-top:0}
.gf-band{position:relative;isolation:isolate;overflow:hidden;padding-top:clamp(36px,4.5vw,64px);padding-bottom:clamp(36px,5vw,64px)}
.gf-band .gatefold-head{margin-bottom:0}
.room-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.12;z-index:-1;pointer-events:none;-webkit-mask-image:linear-gradient(180deg,transparent,#000 22%,#000 58%,transparent);mask-image:linear-gradient(180deg,transparent,#000 22%,#000 58%,transparent)}
.gf-band .rings{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none;-webkit-mask-image:linear-gradient(180deg,transparent,#000 22%,#000 58%,transparent);mask-image:linear-gradient(180deg,transparent,#000 22%,#000 58%,transparent)}
@media (max-width:600px){.gf-band{padding-top:18px;padding-bottom:36px}}

/* ---------- the finder: pick the problem, see the lessons that fix it ---------- */
.finder-head{display:grid;grid-template-columns:1fr;gap:clamp(14px,2.5vw,36px);align-items:end;margin-bottom:clamp(24px,3.5vw,40px)}
@media (min-width:900px){.finder-head{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr)}}
.finder-head .eyebrow{margin-bottom:14px}
.finder-head .h2{max-width:14ch}
.finder-head .lead{max-width:46ch;color:var(--bone-2)}
.finder{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(18px,2.4vw,30px)}
/* tabs: chips on phones (a scrolling strip), a 4 x 2 grid on tablets, one bar across the top on desktop */
.ftabs{display:flex;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;gap:8px;padding:2px 0 6px;margin-inline:calc(-1 * var(--gutter));padding-inline:var(--gutter);scroll-padding-inline:var(--gutter)}
.ftabs::-webkit-scrollbar{display:none}
.ftab{flex:none;min-width:140px;display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:10px 14px;text-align:left;background:var(--ink-2);border:1px solid var(--line);color:var(--bone-2);cursor:pointer;position:relative;scroll-snap-align:start;transition:color .2s,border-color .2s,background .2s}
.ftab .ft{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:17px;letter-spacing:.01em;line-height:1.1}
.ftab .fc{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute);white-space:nowrap}
.ftab .fc b{font-weight:500;color:var(--mute)}
.ftab .fc i{display:none}
.ftab:hover{color:#fff}
.ftab.is-on{color:#fff;border-color:var(--red);background:var(--ink-3)}
.ftab.is-on .fc b{color:var(--bone-2)}
.ftab:focus-visible{outline:2px solid var(--red);outline-offset:-2px}
@media (min-width:700px) and (max-width:1099px){
  .ftabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));overflow:visible;margin-inline:0;padding-inline:0}
  .ftab{min-width:0}
}
@media (min-width:1100px){
  .ftabs{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:0 14px;overflow:visible;margin-inline:0;padding:0;border-bottom:1px solid var(--line)}
  .ftab{min-width:0;gap:6px;padding:2px 0 16px;background:none;border:0}
  .ftab::before{content:"";position:absolute;left:0;right:0;bottom:-1px;height:3px;background:var(--red);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease),background .2s}
  .ftab:not(.is-on):hover::before{transform:scaleX(1);background:var(--line)}
  .ftab.is-on{background:none}
  .ftab.is-on::before{transform:scaleX(1)}
  .ftab .ft{font-size:21px}
  .ftab:focus-visible{outline-offset:2px}
}
/* panel: phones and portrait tablets stack it (problem, video, list); from 960px the video and the list sit side by side at the same height */
.fpanel{display:grid;grid-template-columns:minmax(0,1fr);gap:18px 28px}
.fpanel[hidden],.fmore[hidden]{display:none}
.fhead .h3{font-size:clamp(28px,3.4vw,46px);font-weight:700;line-height:.98;color:#fff;max-width:20ch;text-wrap:balance}
.fhead p{color:var(--bone-2);font-size:15.5px;line-height:1.55;margin-top:10px;max-width:60ch;text-wrap:pretty}
@media (min-width:960px){
  .fpanel{grid-template-columns:minmax(0,1.72fr) minmax(0,1fr);grid-template-rows:minmax(92px,auto) auto;gap:22px 28px;align-items:end}
  .fpanel .fhead{display:contents}
  .fhead .h3{grid-column:1;grid-row:1;max-width:none;align-self:end}
  .fhead p{grid-column:2;grid-row:1;margin-top:0;align-self:end;font-size:15px}
  .fpanel .ffeat{grid-column:1;grid-row:2;align-self:start}
  /* the list box takes the video's height (its contents are absolutely placed, so they add nothing to the row) */
  .fpanel .fside{grid-column:2;grid-row:2;align-self:stretch;position:relative;min-height:320px;background:var(--ink-2);border:1px solid var(--line)}
  .fside .flist{position:absolute;inset:0;overflow:hidden;border-top:0;padding:0 16px}
  .fside.is-open .flist{overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--line) transparent}
  .fside .fmore,.fside .fmore.desk-only{display:block;position:absolute;left:0;right:0;bottom:0;height:46px;padding:0 16px;margin:0;border:0;border-top:1px solid var(--line);background:var(--ink-2);z-index:2}
  .fside .fmore[hidden]{display:none}
  .fside .fmore:hover{background:var(--ink-3)}
  .fside::after{content:"";position:absolute;left:0;right:0;bottom:46px;height:84px;background:linear-gradient(180deg,rgba(17,17,19,0),var(--ink-2) 92%);pointer-events:none;z-index:1;transition:opacity .25s}
  .fside.is-open::after{bottom:0;height:56px}
  .fside.is-open.at-end::after,.fside.fits::after{opacity:0}
  .fside.fits .fmore,.fside.is-open .fmore{display:none}
  .fside .frow-btn{padding-right:4px}
}
/* featured lesson: the free one plays in place; a locked one shows the padlock and opens the checkout */
.ffeat .lesson-play{position:relative;display:block;width:100%;aspect-ratio:16/9;background:#000;border:1px solid var(--line);padding:0;cursor:pointer;overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,.45)}
.ffeat .lesson-play img{width:100%;height:100%;object-fit:cover;display:block;opacity:.92;transition:transform 1.2s var(--ease),opacity .4s}
.ffeat .lesson-play:hover img{transform:scale(1.03);opacity:1}
.ffeat .lesson-play iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.play-ring{position:absolute;left:50%;top:50%;width:76px;height:76px;transform:translate(-50%,-50%);border-radius:50%;background:rgba(10,10,11,.55);border:1px solid rgba(236,235,230,.5);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);display:grid;place-items:center;transition:transform .3s var(--ease),background .3s}
.play-ring i{display:block;width:0;height:0;border-style:solid;border-width:12px 0 12px 20px;border-color:transparent transparent transparent #fff;margin-left:5px}
.ffeat.is-free .lesson-play:hover .play-ring{transform:translate(-50%,-50%) scale(1.08);background:var(--red-btn);border-color:var(--red-btn)}
.free-tag{position:absolute;left:14px;top:14px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#fff;background:var(--red-btn);padding:7px 10px}
.lock-big{position:absolute;left:14px;top:14px;width:34px;height:34px;border-radius:50%;background:rgba(10,10,11,.72);border:1px solid rgba(236,235,230,.35);display:flex;flex-direction:column;align-items:center;justify-content:center}
.lock-big::before{content:"";width:10px;height:8px;border:1.5px solid var(--bone);border-bottom:0;border-radius:5px 5px 0 0}
.lock-big::after{content:"";width:14px;height:10px;background:var(--bone);border-radius:2px}
.veil-big{position:absolute;inset:0;display:grid;place-items:center;background:rgba(10,10,11,.5);color:#fff;font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;opacity:0;transition:opacity .25s}
.ffeat .lesson-play:hover .veil-big,.ffeat .lesson-play:focus-visible .veil-big{opacity:1}
.ffeat .play-ring,.ffeat .free-tag{display:none}
.ffeat.is-free .play-ring,.ffeat.is-free .free-tag{display:grid}
.ffeat.is-free .free-tag{display:block}
.ffeat.is-free .lock-big,.ffeat.is-free .veil-big{display:none}
.ffeat .lesson-play.is-playing > :not(iframe){display:none}
.free-meta{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 20px;padding:12px 2px 0}
.free-meta .ft{font-weight:600;font-size:16px;color:#fff}
.free-meta .fd{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);padding-top:3px}
/* lesson rows */
.flist{list-style:none;border-top:1px solid var(--line)}
.fgrp{padding:16px 0 6px;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--bone-2)}
.fgrp.is-freegrp{color:var(--red)}
.fgrp.is-more{display:none}
.flist.is-open .fgrp.is-more{display:block}
.ffeat .nothumb-big{position:absolute;inset:0;display:none;place-items:center;font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute);background:var(--ink-3)}
.ffeat.no-img .lesson-play img{display:none}
.ffeat.no-img .nothumb-big{display:grid}
.frow.is-more{display:none}
.flist.is-open .frow.is-more{display:block}
.frow-btn{display:grid;grid-template-columns:104px minmax(0,1fr);gap:12px;align-items:center;width:100%;text-align:left;padding:8px 6px 8px 0;background:none;border:0;border-bottom:1px solid var(--line-soft);color:var(--bone);cursor:pointer;transition:background .2s}
.frow-btn:hover{background:rgba(255,255,255,.03)}
.frow-btn:focus-visible{outline:2px solid var(--red);outline-offset:-2px}
.frow.is-on .frow-btn{background:rgba(237,67,80,.08)}
.fth{position:relative;display:block;aspect-ratio:16/9;background:var(--ink-3);overflow:hidden;border:1px solid var(--line-soft)}
.fth img{width:100%;height:100%;object-fit:cover;display:block;opacity:.9}
.fth .nothumb{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.fth .lock{position:absolute;left:5px;top:5px;width:18px;height:18px;border-radius:50%;background:rgba(10,10,11,.75);border:1px solid rgba(236,235,230,.3);display:flex;flex-direction:column;align-items:center;justify-content:center}
.fth .lock::before{content:"";width:6px;height:4px;border:1.2px solid var(--bone);border-bottom:0;border-radius:3px 3px 0 0}
.fth .lock::after{content:"";width:8px;height:6px;background:var(--bone);border-radius:1px}
.fth .fb{position:absolute;left:5px;top:5px;font-family:var(--mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:#fff;background:var(--red-btn);padding:3px 6px}
.ftx{display:grid;gap:3px;min-width:0}
.ftt{font-size:14.5px;font-weight:600;line-height:1.3;color:var(--bone);text-wrap:pretty}
.frow.is-free .ftt{color:#fff}
.ftd{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
.fmore{margin-top:12px;background:none;border:1px solid var(--line);color:var(--bone);font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;padding:14px 16px;cursor:pointer;width:100%;transition:border-color .2s,color .2s,background .2s}
.fmore:hover{border-color:var(--bone);color:#fff}
.fmore.desk-only{display:none}
.flist.is-open + .fmore{display:none}
@media (max-width:600px){.frow-btn{grid-template-columns:88px minmax(0,1fr)}.ftt{font-size:14px}}

/* ---------- modules: gatefold spread with the oversized 15 ---------- */
.gatefold-head{display:grid;grid-template-columns:1fr;gap:clamp(16px,3vw,40px);align-items:end;margin-bottom:clamp(36px,5vw,64px)}
@media (min-width:800px){.gatefold-head{grid-template-columns:auto minmax(0,1fr)}}
.fifteen{font-family:var(--display);font-weight:900;font-size:clamp(140px,22vw,340px);line-height:.78;color:#fff;letter-spacing:-.02em;width:max-content;transform-origin:left center}
.fifteen::after{content:"";display:block;width:64px;height:6px;background:var(--red);margin-top:18px}
.gatefold .lead{margin-top:16px;max-width:52ch}
.sides{display:grid;grid-template-columns:1fr;gap:clamp(28px,4vw,48px);align-items:start}
@media (min-width:760px){.sides{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1180px){.sides{grid-template-columns:repeat(4,minmax(0,1fr));gap:36px}}
.side2 .side-head{border-bottom:2px solid var(--bone);padding-bottom:10px;margin-bottom:6px}
.side2 li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:12px;padding:16px 0;border-bottom:1px solid var(--line-soft)}
.side2 .n{font-family:var(--display);font-weight:800;font-size:28px;line-height:1;color:var(--red);font-variant-numeric:tabular-nums;padding-top:2px}
.side2 .h3{font-size:17px;font-weight:600;text-wrap:balance}
.side2 p{color:var(--mute);font-size:14.5px;margin-top:4px;max-width:50ch;text-wrap:pretty}

/* ---------- gapless bento ---------- */
.gapless{display:grid;grid-template-columns:1fr;gap:0;margin-top:clamp(28px,4vw,48px)}
@media (min-width:760px){.gapless{grid-template-columns:repeat(3,minmax(0,1fr))}.gapless .wide{grid-column:span 2}}
.gcell{position:relative;overflow:hidden;padding:30px 28px 32px;display:flex;flex-direction:column;gap:10px;min-height:260px;background:var(--ink-2);justify-content:flex-end}
.gcell:nth-child(2),.gcell:nth-child(6){background:var(--ink-3)}
.gcell.tint{background:var(--red-btn);color:#fff}
.gcell.tint .tag{color:#fff}.gcell.tint p{color:rgba(255,255,255,.85)}
.gcell .tag{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--red);font-weight:500}
.gcell .h3{font-size:20px}
.gcell p{color:var(--mute);font-size:15.5px;line-height:1.55;max-width:52ch;text-wrap:pretty}
.gcell .big{font-family:var(--display);font-weight:800;font-size:clamp(64px,7vw,110px);line-height:.85;color:#fff;margin-bottom:6px}
.gcell .big span{color:var(--red)}
.gcell .big small{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);margin-left:8px;font-weight:500}
.gcell.has-bg .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:right top;opacity:.28;pointer-events:none}
.gcell.has-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--ink-2) 25%,rgba(17,17,19,.6) 60%,rgba(17,17,19,.2));pointer-events:none}
.gcell.has-bg > :not(.bg){position:relative;z-index:1}
/* Travels artwork in the stems cell: cover sits on the right, text keeps the left; the red field bleeds over the art's left edge */
.gcell.has-art{min-height:340px}
.gcell.has-art > :not(.art){position:relative;z-index:1;max-width:52%}
.gcell.has-art .art{position:absolute;top:0;right:0;bottom:0;width:48%;pointer-events:none}
.gcell.has-art .art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 18%;display:block}
.gcell.has-art .art::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,var(--red-btn) 0%,rgba(216,50,63,.55) 22%,rgba(216,50,63,0) 55%)}
.gcell.has-art .art .smoke{position:absolute;inset:0;width:100%;height:100%;z-index:2}
@media (max-width:759px){
  /* stacked cells size to their text; the desktop min-height was pushing the copy to the bottom of an empty box */
  .gcell{min-height:0;padding:26px 24px 28px}
  .gcell.has-bg{min-height:220px}
  .gcell.has-art{min-height:0;padding-top:250px}
  .gcell.has-art > :not(.art){max-width:none}
  .gcell.has-art .art{width:100%;bottom:auto;height:250px}
  .gcell.has-art .art img{object-position:50% 12%}
  .gcell.has-art .art::before{background:linear-gradient(180deg,rgba(216,50,63,0) 55%,var(--red-btn) 100%)}
}

/* ---------- split testimonial quote wall ---------- */
.wall-grid{display:grid;grid-template-columns:1fr;gap:clamp(36px,6vw,80px);align-items:start}
@media (min-width:960px){.wall-grid{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}.featured{position:sticky;top:calc(var(--header-h) + 32px)}}
.featured .eyebrow{margin-bottom:18px}
.featured .fq{font-size:clamp(30px,3.8vw,54px);font-weight:700;text-transform:none;line-height:1.02;letter-spacing:-.01em;color:#fff}
.featured .who{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);margin-top:22px}
.wall-list figure{margin:0;padding:20px 0 22px;border-top:1px solid var(--line)}
.wall-list blockquote{margin:0;font-size:17px;line-height:1.55;color:var(--bone)}
.wall-list figcaption{margin-top:10px;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}

/* ---------- faq centered, narrow ---------- */
.faq2 .container{max-width:860px}
.faq2 .h2{text-align:center;margin-bottom:clamp(28px,4vw,48px)}
.faq2 .faq{max-width:none}

/* ---------- offer: color-blocked diptych ---------- */
.diptych{display:grid;grid-template-columns:1fr}
@media (min-width:900px){.diptych{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.dip-red{background:var(--red);color:var(--ink);position:relative;overflow:hidden}
.dip-red .dip-inner{position:relative;padding-bottom:calc(clamp(48px,7vw,104px) + 110px)}
.dip-wave{position:absolute;left:0;right:0;bottom:0;height:150px;pointer-events:none;isolation:isolate}
.dip-wave .wave{top:0;height:100%;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);-webkit-mask-composite:source-over;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-composite:add}
.dip-ink{background:var(--ink-2);color:var(--bone)}
.dip-inner{padding:clamp(48px,7vw,104px) var(--gutter);max-width:calc(var(--container) / 2);margin-inline:auto;width:100%;display:flex;flex-direction:column;gap:20px}
@media (min-width:900px){.dip-red .dip-inner{margin-inline:auto 0}.dip-ink .dip-inner{margin-inline:0 auto}}
.dip-red .eyebrow{color:rgba(10,10,11,.7)}
.dip-price{font-family:var(--display);font-weight:900;font-size:clamp(120px,15vw,220px);line-height:.82;letter-spacing:-.02em;color:var(--ink)}
.dip-price sup{font-size:.36em;vertical-align:top;top:.3em;position:relative}
.dip-was{font-size:17px;color:rgba(10,10,11,.85);max-width:40ch}
.dip-was s{text-decoration-thickness:2px}
.btn.btn-ink{background:var(--ink);border-color:var(--ink);color:#fff}
.btn.btn-ink:hover{background:#000;border-color:#000}
.dip-fine{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:rgba(10,10,11,.7);line-height:1.7}
.dip-list li{padding:12px 0;border-top:1px solid var(--line);font-size:16px}
.dip-list li:last-child{border-bottom:1px solid var(--line)}
.dip-list b{color:#fff;font-weight:600}.dip-list span{color:var(--mute)}
.dip-g{color:var(--bone-2);font-size:15px;margin-top:8px;max-width:56ch}
.dip-g b{color:#fff;font-weight:600}
.dip-g a{color:var(--bone)}

/* module rows: real lesson counts, and the full list behind a disclosure */
.side2 .meta{display:block;margin-top:8px;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
/* four sides: compact heads */
.side2 .side-head{display:block}
.side2 .side-head .t{font-size:clamp(26px,2.6vw,34px)}
.side2 .side-head .r{margin-top:6px;font-size:11px;line-height:1.6}
.side2 .side-head .rn{display:block;color:var(--bone-2)}
/* phones: the modules now come before the finder, so they read as a tracklist (title + lessons + time) and the free lessons stay a short scroll away */
@media (max-width:600px){
  .side2 p{display:none}
  .side2 li{padding:12px 0;gap:10px;grid-template-columns:40px minmax(0,1fr);align-items:baseline}
  .side2 .n{font-size:24px}
  .side2 .meta{margin-top:4px}
  .sides{gap:26px}
}

/* ---------- hero video player: opens over the hero, closes with the button, Esc, or a click outside the frame ---------- */
.hero-player{position:absolute;inset:0;z-index:6;background:rgba(10,10,11,.97);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;padding:calc(var(--header-h) + 100px) var(--gutter) 24px;cursor:pointer;animation:player-in .35s var(--ease)}
.player-cta{cursor:default;transition:opacity .6s var(--ease),transform .6s var(--ease)}
.player-cta.is-waiting{opacity:0;transform:translateY(8px);pointer-events:none}
.player-cta .btn{display:inline-flex}
@keyframes player-in{from{opacity:0}to{opacity:1}}
.player-frame{position:relative;width:100%;max-width:min(1180px,calc((92vh - var(--header-h) - 204px) * 16 / 9));aspect-ratio:16/9;background:#000;cursor:default;box-shadow:0 30px 90px rgba(0,0,0,.65)}
.player-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;opacity:1;display:block}
.player-close{position:absolute;top:calc(var(--header-h) + 76px);right:var(--gutter);z-index:7;display:inline-flex;align-items:center;gap:12px;font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--bone);background:rgba(10,10,11,.7);border:1px solid var(--line);padding:11px 14px 11px 16px;cursor:pointer;transition:border-color .2s,color .2s}
.player-close:hover{border-color:var(--bone);color:#fff}
.player-close i{position:relative;width:12px;height:12px;display:block}
.player-close i::before,.player-close i::after{content:"";position:absolute;left:-2px;right:-2px;top:50%;height:1.5px;background:currentColor;transform:rotate(45deg)}
.player-close i::after{transform:rotate(-45deg)}
.hero2.is-playing .hero2-inner{visibility:hidden}
@media (max-width:900px){.hero-player{padding:calc(var(--header-h) + 100px) var(--gutter) 24px;align-items:center}.player-frame{max-width:none;box-shadow:none}.player-close{right:var(--gutter)}}

/* touch targets: the intro link and the footer links get a taller hit area on phones */
@media (hover:none) and (pointer:coarse){
  .link-arrow{padding-top:10px;padding-bottom:10px;margin-top:-10px}
  .site-footer a{display:inline-block;padding:8px 0}
  .dip-g a{padding:6px 0}
}