/* ==========================================================================
   VO Life Coach · v13

   Base        04 layouts
   Backdrop    02's clean light surfaces, dark ocean hero only
   Type        01's choices: Anton display, Inter Tight text
   Buttons     06 pills
   Ticker      06
   Film+email  09
   ========================================================================== */
:root{
  /* sampled from the key art, same values as the 02 concept */
  --abyss:#06282D;
  --deep:#093945;
  --mid:#194E69;
  --teal:#287B98;
  --teal-dk:#114459;
  --surf:#50BDD9;
  --foam:#f1fafc;
  --paper:#ffffff;
  --red:#B73635;
  --red-dk:#97292A;
  --ink:#0b1f28;
  --ink-2:#3f5a66;
  --ink-3:#6b8391;
  --line:#d6e4ea;
  --line-soft:#e4eef3;
  --s1:8px; --s2:16px; --s3:24px; --s4:40px; --s5:64px; --s6:96px;
  --r-lg:20px; --r:14px; --r-sm:7px;
  --gutter:clamp(20px,4.5vw,48px);
  --maxw:1220px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--paper);color:var(--ink);overflow-x:hidden;
  font:400 17px/1.66 'Inter Tight',system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--teal-dk)}
a:hover{color:var(--teal)}
b,strong{font-weight:600}
::selection{background:var(--teal);color:#fff}
:focus-visible{outline:2px solid var(--teal);outline-offset:3px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:8px;top:8px;z-index:300;background:var(--red);color:#fff;padding:12px 16px;border-radius:var(--r-sm)}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)}

/* -------------------------------------------------- type, from 01 */
h1,h2,h3{margin:0;font-family:'Anton',Impact,sans-serif;font-weight:400;letter-spacing:.004em;line-height:.98}
h1{font-size:clamp(2.7rem,5.8vw,4.8rem);line-height:.94}
h2{font-size:clamp(1.9rem,3.4vw,2.8rem)}
h3{font-size:21px;line-height:1.08}
.kick{font-size:15px;color:var(--teal);margin:0 0 var(--s2);font-weight:500}
.lede{font-size:19px;line-height:1.6;color:var(--ink-2);max-width:58ch;margin:0}
.small{font-size:15px;color:var(--ink-3)}
@media (max-width:640px){.lede{font-size:17.5px}}

/* -------------------------------------------------- buttons, from 06 */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;text-decoration:none;
  font:600 15px/1 'Inter Tight',sans-serif;padding:16px 26px;border-radius:100px;
  border:1.5px solid transparent;cursor:pointer;
  transition:background .16s,border-color .16s,color .16s,transform .08s;
}
.btn:active{transform:translateY(1px)}
.btn svg{width:17px;height:17px;fill:currentColor;flex:0 0 auto}
.btn-red{background:var(--red);color:#fff}
.btn-red:hover{background:var(--red-dk);color:#fff}
.btn-royal{background:var(--mid);color:#fff}
.btn-royal:hover{background:var(--deep);color:#fff}
.btn-line{border-color:var(--line);color:var(--ink);background:#fff}
.btn-line:hover{border-color:var(--ink);color:var(--ink)}
/* on the dark hero the outline button flips to light */
.hero .btn-line{border-color:rgba(255,255,255,.4);color:#fff;background:rgba(255,255,255,.08)}
.hero .btn-line:hover{border-color:#fff;color:#fff}
.btn-sm{padding:11px 16px;font-size:14px}
.acts{display:flex;flex-wrap:wrap;gap:var(--s1)}

/* -------------------------------------------------- header */
.bar{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.95);border-bottom:1px solid var(--line)}
@supports (backdrop-filter:blur(10px)){.bar{backdrop-filter:blur(14px)}}
.bar-in{display:flex;align-items:center;gap:var(--s3);height:74px}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--ink);flex:0 0 auto}
.brand img{width:42px;height:42px}
.brand span{font-family:'Anton',sans-serif;font-weight:400;font-size:19px;letter-spacing:.012em}
.nav{display:flex;gap:var(--s3);margin-left:auto}
.nav a{font-size:15px;font-weight:500;color:var(--ink-2);text-decoration:none;padding:6px 0;
  border-bottom:2px solid transparent}
.nav a:hover{color:var(--ink)}
.nav a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--red)}
.bar-r{display:flex;align-items:center;gap:var(--s2);margin-left:auto;flex:0 0 auto}

/* -------------------------------------------------- hero: 02's drawn water, no photo */
.hero{position:relative;overflow:hidden;color:#fff;background:var(--deep)}
.hero::after{ /* light shafts, drawn not blurred, exactly as 02 does it */
  content:"";position:absolute;inset:0;opacity:.5;pointer-events:none;
  background:
    linear-gradient(101deg,transparent 12%,rgba(255,255,255,.07) 14%,transparent 17%),
    linear-gradient(97deg,transparent 30%,rgba(255,255,255,.05) 33%,transparent 36%),
    linear-gradient(104deg,transparent 58%,rgba(255,255,255,.06) 61%,transparent 65%),
    linear-gradient(180deg,#287B98 0%,#194E69 34%,#093945 70%,#06282D 100%)}
.hero-in{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:var(--s5);align-items:center;padding-block:var(--s5)}
.hero-in.solo{grid-template-columns:1fr;justify-items:center;text-align:center}
.hero-in.solo .lede{margin-inline:auto}
.hero-in.solo .acts{justify-content:center}
.hero h1{margin-bottom:var(--s3)}
.hero h1 em{font-style:normal;color:#ff6a5f;display:block}
.hero .kick{color:var(--surf)}
.hero .lede{color:#cfe6ee}
.hero .acts{margin-top:var(--s4)}
.hero-fig{margin:0}
.hero-fig img{width:100%;aspect-ratio:1/1;object-fit:cover;object-position:56% 14%;
  border-radius:var(--r-lg);filter:grayscale(1) contrast(1.1);
  box-shadow:0 34px 70px -28px rgba(0,0,0,.8)}
@media (max-width:960px){
  .hero-in{grid-template-columns:1fr;gap:var(--s4);padding-block:var(--s4) var(--s5)}
  .hero-fig{order:-1}
  .hero-fig img{aspect-ratio:3/2}
}

/* inner page headers: same drawn water */
.phead{position:relative;overflow:hidden;color:#fff;background:var(--deep)}
.phead::after{content:"";position:absolute;inset:0;opacity:.5;pointer-events:none;
  background:
    linear-gradient(101deg,transparent 12%,rgba(255,255,255,.07) 14%,transparent 17%),
    linear-gradient(104deg,transparent 58%,rgba(255,255,255,.06) 61%,transparent 65%),
    linear-gradient(180deg,#287B98 0%,#194E69 40%,#093945 100%)}
.phead .wrap{position:relative;z-index:1}
.phead .kick{color:var(--surf)}
.phead .lede{color:#cfe6ee;max-width:80ch}
.phead-in{padding:var(--s4) 0;max-width:80ch}
.phead h1,.phead .xl{font-size:clamp(2.3rem,4.6vw,3.7rem);margin-bottom:var(--s2)}
@media (max-width:640px){.phead-in{padding:var(--s4) 0}}

/* -------------------------------------------------- sections */
section{padding:40px 0}
section+section{border-top:1px solid var(--line-soft)}
.sh{max-width:58ch;margin-bottom:var(--s4)}
.sh .lede{margin-top:var(--s2)}
.deep{background:var(--foam);border-block:1px solid var(--line-soft)}
@media (max-width:640px){section{padding:var(--s4) 0}}

/* -------------------------------------------------- cards */
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:var(--s3)}

/* landing: two ways in */
.ways{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:var(--s3)}
.way{display:block;text-decoration:none;color:var(--ink);background:#fff;
  border:1px solid var(--line);border-radius:var(--r);padding:var(--s3);
  transition:border-color .18s,box-shadow .18s}
.way:hover{border-color:var(--teal);box-shadow:0 12px 28px -18px rgba(9,57,69,.35);color:var(--ink)}
.way h3{margin-bottom:var(--s2)}
.way p{margin:0 0 var(--s2);color:var(--ink-2);font-size:16.5px}
.way span{font-size:15px;color:var(--teal-dk);font-weight:600}

/* -------------------------------------------------- app tour, from 04 */
.tour{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:var(--s5);align-items:start}
.pin{justify-self:center;width:min(100%,300px);position:sticky;top:max(96px,calc(50vh - 340px))}
.dev{position:relative;border-radius:38px;padding:9px;background:var(--ink);
  box-shadow:0 34px 70px -28px rgba(9,57,69,.6),inset 0 1px 0 rgba(255,255,255,.15)}
.dev::before{content:"";position:absolute;top:19px;left:50%;transform:translateX(-50%);
  width:30%;height:7px;border-radius:20px;background:#000;z-index:2}
.dev img{border-radius:30px;width:100%}
.dev-cap{font-size:14px;color:var(--ink-3);padding-top:var(--s2);text-align:center}
.steps{display:grid;gap:var(--s3);align-content:center}
.step{display:block;width:100%;text-align:left;font:inherit;color:inherit;cursor:pointer;
  background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:var(--s3);transition:border-color .22s,background .22s}
.step:hover{border-color:var(--teal)}
.step[data-on]{border-color:var(--teal);background:var(--foam)}
.step h3{margin-bottom:var(--s1)}
.step .soonline{font-style:normal;font-weight:600;color:var(--teal)}
.step p{margin:0;color:var(--ink-2);font-size:16.5px}
@media (max-width:920px){
  .tour{grid-template-columns:minmax(150px,44%) minmax(0,1fr);gap:var(--s2)}
  .pin{width:100%}
  .dev{border-radius:26px;padding:6px}
  .dev::before{top:13px;height:5px}
  .dev img{border-radius:20px}
  .pin{top:150px}
  .dev-cap{font-size:12.5px}
  .step{padding:var(--s2)}
  .step h3{font-size:17px}
  .step p{font-size:14px}
}

/* the nine sections inside Train, with the app's own artwork */
.secs{display:grid;grid-template-columns:repeat(auto-fit,minmax(310px,1fr));gap:var(--s3)}
.sec{display:flex;gap:var(--s2);align-items:flex-start;background:#fff;border:1px solid var(--line);
  border-radius:var(--r);padding:var(--s2)}
.sec img{width:88px;height:88px;border-radius:var(--r-sm);object-fit:cover;flex:0 0 auto}
.sec h3{font-size:18px}
.sec .n{margin:4px 0 6px;font-size:13.5px;color:var(--teal);font-weight:600}
.sec p{margin:0;font-size:14.5px;color:var(--ink-2);line-height:1.5}

/* the three plans, priced as inside the app */
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--s3)}
.plan{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:var(--s3);
  display:flex;flex-direction:column}
.plan{cursor:pointer;transition:border-color .18s,box-shadow .18s}
.plan:hover{border-color:var(--teal);box-shadow:0 12px 28px -18px rgba(9,57,69,.35)}
.plan.lead{border-color:var(--red)}
.plan .tag{margin:0 0 6px;font-size:13.5px;color:var(--red);font-weight:600}
.plan h3{font-size:24px}
.plan .pr{margin:var(--s2) 0 2px;display:flex;align-items:baseline;gap:9px}
.plan .pr b{font-family:'Anton',sans-serif;font-weight:400;font-size:34px;letter-spacing:.004em}
.plan .pr span{font-size:14px;color:var(--ink-3)}
.plan .pr-alt{margin:0 0 var(--s2);font-size:13.5px;color:var(--ink-3)}
.plan ul{list-style:none;margin:auto 0 0;padding:var(--s2) 0 0;border-top:1px solid var(--line-soft);
  display:grid;gap:8px}
.plan li{font-size:15px;color:var(--ink-2);padding-left:20px;position:relative}
.plan li::before{content:"";position:absolute;left:2px;top:8px;width:7px;height:7px;
  border-radius:50%;background:var(--teal)}

/* vault modules */
.mods{list-style:none;margin:0;padding:0;display:grid;gap:var(--s2)}
.mods li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px var(--s3);align-items:center;
  background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:18px var(--s3)}
.mods b{font-family:'Anton',sans-serif;font-weight:400;font-size:19px;letter-spacing:.006em;display:block}
.mods .nt{display:block;font-size:15.5px;color:var(--ink-3);margin-top:3px}
.mods .dur{font-size:15px;color:var(--teal);white-space:nowrap;font-weight:500}

/* -------------------------------------------------- one on one, from 04 */
.svc{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:var(--s3)}
.sc{background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:var(--s3);display:flex;flex-direction:column;gap:var(--s2);position:relative;
  transition:border-color .18s}
.sc:hover{border-color:var(--teal)}
.sc .flag{position:absolute;top:18px;right:20px;background:var(--red);color:#fff;
  border-radius:100px;padding:5px 12px;font-size:12.5px;font-weight:600}
/* the first offering gets a full-width lead row so six cards sit clean below it */
.sc.lead{grid-column:1/-1;border-color:var(--red);display:grid;align-items:center;
  grid-template-columns:auto minmax(0,1fr) auto;
  grid-template-areas:"flag flag flag" "title desc price";
  gap:var(--s2) var(--s5);padding:var(--s3) var(--s4)}
.sc.lead .flag{position:static;grid-area:flag;justify-self:start}
.sc.lead h3{grid-area:title;font-size:26px}
.sc.lead p{grid-area:desc;margin:0}
.sc.lead .amt{grid-area:price;margin:0;border-top:0;padding-top:0}
.sc.lead .amt b{font-size:38px}
@media (max-width:720px){
  .sc.lead{grid-template-columns:1fr;grid-template-areas:"flag" "title" "desc" "price";padding:var(--s3)}
  .sc.lead h3{font-size:22px}
}
.sc h3 a{color:inherit;text-decoration:none}
.sc h3 a:hover{color:var(--teal)}
.sc p{margin:0;color:var(--ink-2);font-size:16px}
.sc .gate{font-size:14.5px;color:var(--ink-3);border-left:2px solid var(--line);padding-left:12px}
.sc .amt{display:flex;align-items:baseline;gap:10px;margin-top:auto;padding-top:var(--s2);
  border-top:1px solid var(--line-soft)}
.sc .amt b{font-family:'Anton',sans-serif;font-weight:400;font-size:30px;letter-spacing:.004em}
.sc .amt span{font-size:14px;color:var(--ink-3)}
.sc .amt.ref b{font-family:'Inter Tight',sans-serif;font-size:17px;font-weight:600}
.sc .amt.ref a{color:inherit;text-decoration:none;border-bottom:1px solid var(--line)}
.sc .amt.ref a:hover{border-color:var(--teal)}
.paynote{margin:var(--s4) 0 0;padding:var(--s3);background:var(--foam);border:1px solid var(--line-soft);
  border-radius:var(--r);font-size:16px;color:var(--ink-2)}
.paynote a{color:var(--teal-dk)}

/* -------------------------------------------------- reviews, from 04 */
/* the ACM endorsement sits on a dark card, like 02's anchor quote */
.anchor{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--s4);align-items:start;
  background:var(--mid);color:#fff;
  border-radius:var(--r);padding:var(--s4)}
.anchor img{width:84px;height:84px;border-radius:50%}
.anchor .big{margin:0 0 var(--s3);font-size:19.5px;line-height:1.6}
.anchor .sub{margin:0;color:#cfe6ee;font-size:16.5px}
.anchor .by{margin:var(--s3) 0 0;font-size:15px;font-weight:600}
.anchor .by span{display:block;font-weight:400;color:#a8cbd8;margin-top:2px}
@media (max-width:760px){.anchor{grid-template-columns:1fr}}

.revs{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:var(--s3)}
.rev{background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:var(--s3);display:flex;flex-direction:column;gap:var(--s2)}
.rev .st{color:#e8a713;display:inline-flex}
.rev blockquote{margin:0;font-size:16.5px;line-height:1.58;color:var(--ink-2)}
.rev .who{display:flex;align-items:center;gap:12px;margin-top:auto;padding-top:4px}
.rev .who img{width:42px;height:42px;border-radius:50%;flex:0 0 auto}
.rev .who b{display:block;font-size:15px;font-weight:600}
.rev .who span{display:block;font-size:13.5px;color:var(--ink-3);margin-top:1px}
.rev .who a{color:inherit;text-decoration:none}
.rev .who a:hover{color:var(--teal)}
.rev .res{font-size:14px;color:var(--teal);font-weight:500}

/* results log: an editorial list, deliberately not another card grid */
.wins{list-style:none;margin:var(--s2) 0 0;padding:0;border-top:1px solid var(--line)}
.win{display:grid;grid-template-columns:minmax(0,15rem) minmax(0,1fr);gap:var(--s1) var(--s5);
  padding:var(--s3) 0;border-bottom:1px solid var(--line-soft);align-items:baseline}
.win .out{margin:0;font-family:'Anton',sans-serif;font-weight:400;letter-spacing:.004em;
  font-size:20px;line-height:1.1;color:var(--ink)}
.win blockquote{margin:0;color:var(--ink-2);font-size:16.5px;line-height:1.56}
.win .nm{margin:9px 0 0;font-size:14px;color:var(--ink);font-weight:600}
.win .nm span{color:var(--ink-3);font-weight:400;margin-left:7px}
.win .nm a{color:inherit;text-decoration:none}
.win .nm a:hover{color:var(--teal)}
@media (max-width:720px){.win{grid-template-columns:1fr;gap:6px;padding:var(--s3) 0}}

.glenn{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,240px));gap:var(--s4);
  align-items:start;justify-content:center;
  width:fit-content;max-width:100%;margin-inline:auto;
  background:#fff;border:1px solid var(--line);
  border-radius:var(--r);padding:var(--s4)}
.glenn .gp{position:relative;display:block;width:100%;border:0;padding:0;background:none;cursor:pointer;border-radius:var(--r-sm);overflow:hidden}
.glenn .gp img{width:100%;height:auto;aspect-ratio:9/16;object-fit:cover;display:block}
.glenn .gp span{position:absolute;inset:0;display:grid;place-items:center;background:rgba(6,40,45,.28)}
.glenn .gp span i{width:54px;height:54px;border-radius:50%;background:var(--red);display:grid;place-items:center;font-style:normal}
.glenn .gp svg{width:16px;height:16px;fill:#fff;margin-left:2px}
.glenn .gt{grid-column:1/-1;text-align:center;margin:0 0 var(--s1);font-size:22px}
.glenn h3{margin:var(--s2) 0 0;font-size:17px;text-align:center}
.glenn p{margin:var(--s1) 0 0;color:var(--ink-2);font-size:15px}
@media (max-width:640px){.glenn{grid-template-columns:minmax(0,280px)}.glenn video{max-width:210px}}

/* -------------------------------------------------- demos, from 04 */
.chips{display:flex;flex-wrap:wrap;gap:var(--s1);margin-bottom:var(--s3)}
.chip{font:500 14px/1 'Inter Tight',sans-serif;background:#fff;
  border:1.5px solid var(--line);border-radius:100px;padding:10px 16px;cursor:pointer;color:var(--ink-2)}
.chip:hover{border-color:var(--ink);color:var(--ink)}
.chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.reel{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s3)}
.reel button{display:block;width:100%;border:0;padding:0;background:none;cursor:pointer;
  text-align:left;color:inherit;font:inherit}
.reel .t{display:block;position:relative;aspect-ratio:16/10;border-radius:var(--r);
  overflow:hidden;background:var(--foam);border:1px solid var(--line)}
.reel .t img{width:100%;height:100%;object-fit:cover;filter:grayscale(1);transition:filter .3s,transform .35s}
.reel button:hover .t img,.reel button:focus-visible .t img{filter:none;transform:scale(1.04)}
.reel .pl{position:absolute;inset:0;display:grid;place-items:center;background:rgba(6,40,45,.26);
  transition:background .25s}
.reel button:hover .pl{background:rgba(6,40,45,.05)}
.reel .pl span{width:44px;height:44px;border-radius:50%;background:#fff;display:grid;place-items:center;
  box-shadow:0 8px 20px -6px rgba(0,0,0,.4)}
.reel .pl svg{width:13px;height:13px;fill:var(--red);margin-left:2px}
.reel .n{display:block;font-weight:600;font-size:16px;padding-top:12px}
.reel .k{display:block;font-size:14px;color:var(--ink-3);padding-top:2px}
.reel iframe{width:100%;aspect-ratio:16/10;border:0;border-radius:var(--r);background:#000;display:block}
@media (max-width:900px){.reel{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* -------------------------------------------------- who is rider, from 01 */
.rider{display:grid;grid-template-columns:340px minmax(0,1fr);gap:var(--s5);align-items:start}
.rider figure{margin:0;position:sticky;top:100px}
.rider figure img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 24%;
  border-radius:var(--r-lg);box-shadow:0 30px 60px -26px rgba(9,57,69,.45)}
.rider figcaption{font-size:14.5px;color:var(--ink-3);padding-top:var(--s2)}
.rider p{margin:0 0 var(--s3);color:var(--ink-2);line-height:1.72}
.rider p:first-child{color:var(--ink)}
.pull{margin:var(--s4) 0;padding:var(--s3);background:var(--foam);border:1px solid var(--line-soft);
  border-radius:var(--r);
  font-family:'Anton',sans-serif;font-weight:400;letter-spacing:.004em;
  font-size:clamp(1.2rem,2.1vw,1.7rem);line-height:1.14;color:var(--ink)}
.pull b{color:var(--red);font-weight:400}
.rider .sign{font-family:'Anton',sans-serif;font-weight:400;font-size:21px;line-height:1.2;
  color:var(--ink);margin-top:var(--s4)}
.more{background:none;border:0;color:var(--teal-dk);cursor:pointer;padding:0;
  font:600 16px/1 'Inter Tight',sans-serif}
.more:hover{color:var(--teal)}
.fold[hidden]{display:none}
@media (max-width:860px){.rider{grid-template-columns:1fr;gap:var(--s4)}
  .rider figure{position:static;max-width:340px}}

/* -------------------------------------------------- ticker, from 06 */
.tick{border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);
  overflow:hidden;background:var(--deep);position:relative}
.tick>div{display:flex;width:max-content;animation:tick 60s linear infinite}
.tick span{font-family:'Anton',sans-serif;font-weight:400;font-size:clamp(1.05rem,2vw,1.7rem);
  letter-spacing:.006em;color:#cfe6ee;padding:var(--s3) 0;white-space:nowrap;
  display:inline-flex;align-items:center;gap:var(--s4)}
.tick span::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--red);
  flex:0 0 auto;margin-inline:var(--s4)}
@keyframes tick{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.tick>div{animation:none;flex-wrap:wrap;width:100%;padding-inline:var(--gutter)}}

/* -------------------------------------------------- film + email, from 09: the one dark band */
.film{position:relative;color:#fff;background:var(--abyss)}
.film::after{content:"";position:absolute;inset:0;opacity:.5;pointer-events:none;
  background:
    linear-gradient(99deg,transparent 20%,rgba(255,255,255,.05) 23%,transparent 27%),
    linear-gradient(180deg,#093945 0%,#06282D 60%)}
.film .kick{color:var(--surf)}
.film .lede{color:#cfe6ee}
.film .small{color:#a8cbd8}
.film-in{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:var(--s5);align-items:center;padding-block:48px}
.vid{position:relative;aspect-ratio:16/9;border-radius:var(--r);overflow:hidden;background:#000;
  box-shadow:0 30px 64px -26px rgba(0,0,0,.85)}
.vid img{width:100%;height:100%;object-fit:cover;opacity:.66}
.vid>button{position:absolute;inset:0;width:100%;border:0;background:none;cursor:pointer;display:grid;place-items:center}
.vid>button span{width:70px;height:70px;border-radius:50%;background:var(--red);display:grid;place-items:center;
  transition:transform .18s}
.vid>button:hover span{transform:scale(1.07)}
.vid>button svg{width:20px;height:20px;fill:#fff;margin-left:3px}
.vid iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
form.cap{display:grid;gap:var(--s2);margin-top:var(--s3);max-width:410px}
form.cap .two{display:grid;grid-template-columns:1fr 1fr;gap:var(--s2)}
form.cap label{display:block;font-size:14px;color:#a8cbd8;margin-bottom:5px}
form.cap input{width:100%;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.25);
  border-radius:var(--r-sm);color:#fff;padding:13px 14px;font:400 16px/1.3 'Inter Tight',sans-serif}
form.cap input:focus{outline:none;border-color:var(--surf)}
form.cap button{margin-top:var(--s1)}
.ok{font-size:15px;color:#8fe0ae;margin:var(--s1) 0 0;font-weight:600}
@media (max-width:900px){.film-in{grid-template-columns:1fr;gap:var(--s4)}}
@media (max-width:480px){form.cap .two{grid-template-columns:1fr}}

/* -------------------------------------------------- footer */
footer{background:var(--abyss);color:#eaf6fa;padding:var(--s5) 0 var(--s4)}
.fg{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr);gap:var(--s4);
  padding-bottom:var(--s4)}
.fg h4{margin:0 0 var(--s2);font-size:14px;font-weight:600;color:#a8cbd8}
.fg ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.fg a{color:#cfe6ee;text-decoration:none;font-size:16px}
.fg a:hover{color:#fff}
.fg .big{font-family:'Anton',sans-serif;font-weight:400;font-size:22px;line-height:1.14;
  margin:0 0 var(--s2);max-width:24ch}
.fg .small{color:#a8cbd8}
.fg .small a{color:#eaf6fa}
.fbot{border-top:1px solid rgba(255,255,255,.15);padding-top:var(--s3);display:flex;flex-wrap:wrap;
  gap:12px var(--s4);justify-content:space-between;font-size:14px;color:#a8cbd8}
@media (max-width:820px){.fg{grid-template-columns:1fr 1fr}.fg>div:first-child{grid-column:1/-1}}

/* -------------------------------------------------- mobile */
@media (max-width:900px){
  .bar-in{flex-wrap:wrap;height:auto;padding:12px 0 0;gap:var(--s2);justify-content:center}
  .brand{flex:0 0 auto}
  .nav{order:3;width:100%;margin:0;padding:11px 4px 10px;
    gap:var(--s3);overflow-x:auto;-webkit-overflow-scrolling:touch;
    justify-content:center;justify-content:safe center;
    scrollbar-width:none;border-top:1px solid var(--line-soft)}
  .nav::-webkit-scrollbar{display:none}
  .nav a{white-space:nowrap;flex:0 0 auto}
}

/* store popup, raised by the plan cards */
.go{background:#fff;border-radius:var(--r);padding:var(--s4);text-align:center;max-width:460px;margin:0 auto}
.go h3{font-size:28px}
.go p{margin:var(--s2) 0 0;color:var(--ink-2)}
.go .acts{justify-content:center;margin-top:var(--s3)}

/* -------------------------------------------------- lightbox */
.lb{position:fixed;inset:0;z-index:400;background:rgba(4,25,31,.94);display:grid;
  place-items:center;padding:3vmin}
.lb[hidden]{display:none}
.lb-in{position:relative;width:min(1100px,96vw)}
.lb-in.tall{width:auto;max-width:96vw}
.lb-x{position:absolute;right:0;top:-46px;border:0;background:none;color:#fff;
  cursor:pointer;font:400 30px/1 'Inter Tight',sans-serif;padding:4px 10px}
.lb-x:hover{color:var(--surf)}
.bookmenu{background:#fff;border-radius:var(--r);padding:var(--s3);display:grid;gap:var(--s2);
  width:min(440px,92vw)}
.bookmenu h3{margin:0 0 var(--s1)}
.bookmenu button{display:grid;gap:2px;text-align:left;font:inherit;color:inherit;cursor:pointer;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-sm);padding:var(--s2);
  transition:border-color .18s,background .18s}
.bookmenu button:hover{border-color:var(--teal);background:var(--foam)}
.bookmenu button b{font-weight:600}
.bookmenu button span{color:var(--ink-2);font-size:15px}
.lb-body iframe{width:100%;aspect-ratio:16/9;border:0;border-radius:var(--r);background:#000;display:block}
.lb-body video{height:min(86vh,900px);max-width:96vw;border-radius:var(--r);background:#000;display:block}