/* The Alpha Standard · OXFORD: a gentlemen's club in charcoal, ivory and cool silver.
   Herringbone and pinstripe cloth, stitched leather cards, an engraved crest, a wax seal, tailor's tickets. Premium, never worn. */
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:500 600;font-display:swap;src:url(/work/alpha/fonts/cormorant-500-600.woff2) format('woff2')}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:500;font-display:swap;src:url(/work/alpha/fonts/cormorant-italic-500.woff2) format('woff2')}
@font-face{font-family:'Manrope';font-style:normal;font-weight:400 700;font-display:swap;src:url(/work/alpha/fonts/manrope.woff2) format('woff2')}

:root{
  --bg:#0a0a0b; --ink:#f4f5f6; --muted:#b4b7bb; --faint:#8a8d92; --silver:#dce1e6; --white:#ffffff;
  --polish:linear-gradient(135deg,#ffffff,#dce1e6 35%,#9da3aa 65%,#e9edf1);
  --line:rgba(244,245,246,.13); --line2:rgba(244,245,246,.24); --seam:rgba(223,228,234,.2);
  --serif:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  --sans:'Manrope',ui-sans-serif,system-ui,-apple-system,sans-serif;
  --pad:20px; --top:64px;
  /* cloth and hide, all procedural */
  --herring:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14'%3E%3Cpath d='M0 7L7 0M0 14L7 7' stroke='%23f4f5f6' stroke-opacity='.045' stroke-width='1'/%3E%3Cpath d='M7 0L14 7M7 7L14 14' stroke='%23f4f5f6' stroke-opacity='.03' stroke-width='1'/%3E%3C/svg%3E");
  --pin:repeating-linear-gradient(90deg,rgba(244,245,246,.035) 0 1px,transparent 1px 11px);
  --hide:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  --leather:var(--hide),linear-gradient(180deg,#1e1f21,#141516);
  --bevel:inset 0 1px 0 rgba(255,255,255,.07),inset 0 -1px 0 rgba(0,0,0,.7),0 10px 30px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--pin),var(--bg);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
button{font:inherit;color:inherit}
a{color:inherit}
img,video{display:block;max-width:100%}
:focus-visible{outline:2px solid var(--silver);outline-offset:3px}

/* ---------- the room: silver spotlight cone, drifting haze, vignette ---------- */
.room{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.cone{position:absolute;left:50%;top:-10vh;width:150vmax;height:120vh;transform:translateX(-50%);
  background:radial-gradient(36% 60% at 50% 0%,rgba(226,230,234,.13),rgba(226,230,234,.045) 45%,transparent 70%);animation:breathe 9s ease-in-out infinite alternate}
.haze{position:absolute;border-radius:50%;filter:blur(60px);opacity:.55}
.haze.h1{width:70vmax;height:40vmax;left:-20vmax;bottom:-12vmax;background:radial-gradient(closest-side,rgba(222,224,227,.11),transparent);animation:drift1 38s ease-in-out infinite alternate}
.haze.h2{width:60vmax;height:36vmax;right:-22vmax;top:30vh;background:radial-gradient(closest-side,rgba(222,224,227,.08),transparent);animation:drift2 46s ease-in-out infinite alternate}
.vig{position:absolute;inset:0;box-shadow:inset 0 0 170px rgba(0,0,0,.75)}
@keyframes breathe{from{opacity:.7}to{opacity:1}}
@keyframes drift1{to{transform:translate(18vmax,-6vmax)}}
@keyframes drift2{to{transform:translate(-16vmax,8vmax)}}

/* ---------- top bar ---------- */
.top{position:fixed;left:0;right:0;top:0;z-index:20;height:var(--top);display:flex;align-items:center;gap:12px;padding:0 var(--pad);padding-top:env(safe-area-inset-top,0);background:linear-gradient(var(--bg) 60%,rgba(10,10,11,0))}
.mark{display:inline-grid;place-items:center;width:44px;height:44px}
.mark svg{width:30px;height:36px;filter:drop-shadow(0 0 6px rgba(226,230,234,.25))}
.count{font:500 13px/1 var(--sans);letter-spacing:.2em;color:var(--faint);margin-right:auto}
.planlink{position:relative;overflow:hidden;min-height:44px;padding:0 16px;border:1px solid var(--line2);border-radius:999px;background:rgba(20,20,23,.75);font-size:14px;font-weight:600;letter-spacing:.02em;cursor:pointer;white-space:nowrap}
.prog{position:fixed;left:var(--pad);right:var(--pad);top:var(--top);z-index:20;height:1px;background:var(--line)}
.prog i{display:block;height:100%;width:20%;background:linear-gradient(90deg,var(--silver),var(--ink));transition:width .4s ease}

/* ---------- screens ---------- */
#flow{position:relative;z-index:1}
.screen{display:none;min-height:100vh;min-height:100svh;padding:calc(var(--top) + 18px) var(--pad) 28px}
.screen.on{display:block;animation:in .32s ease backwards}
.screen.on.back{animation:inb .32s ease backwards}
@keyframes in{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:none}}
@keyframes inb{from{opacity:0;transform:translateX(-18px)}to{opacity:1;transform:none}}

/* media panels: rounded image cards with a label on the photo */
.panel{position:relative;margin:0 0 20px;border-radius:18px;overflow:hidden;border:1px solid var(--line2);background:#000;box-shadow:var(--bevel)}
.panel.media{aspect-ratio:16/10}
.panel.media>img,.panel.media>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.panel.media>video{opacity:0;transition:opacity .6s ease}
.panel.media>video.play{opacity:1}
.panel.media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(0,0,0,.65)),radial-gradient(120% 90% at 50% 0%,transparent 55%,rgba(0,0,0,.35));pointer-events:none}
.panel.media::before{content:"";position:absolute;inset:7px;border:1px dashed var(--seam);border-radius:12px;z-index:2;pointer-events:none}
.onphoto{position:absolute;left:18px;bottom:16px;z-index:3;margin:0;font:600 12px/1.3 var(--sans);letter-spacing:.3em;text-transform:uppercase;color:var(--silver);max-width:calc(100% - 36px)}
#line-echo{font:italic 500 20px/1.3 var(--serif);letter-spacing:0;text-transform:none;color:var(--ink)}
.photo-crest{position:absolute;top:16px;right:16px;width:30px;height:36px;z-index:3;filter:drop-shadow(0 2px 6px rgba(0,0,0,.6))}
.panel.portrait img{object-position:50% 30%}
.panel.type{display:none}

.coach{display:flex;align-items:center;gap:12px;margin:0 0 18px;font-size:16px;color:var(--muted);line-height:1.4}
.coach img{width:44px;height:44px;border-radius:50%;object-fit:cover;border:1px solid var(--silver);box-shadow:0 0 0 3px var(--bg),0 0 0 4px var(--line2);flex:none}
.coach b{color:var(--ink);font-weight:600}

.eyebrow{margin:0 0 10px;font:600 13px/1.3 var(--sans);letter-spacing:.26em;text-transform:uppercase;color:var(--faint)}
.hd{margin:0 0 12px;font:500 clamp(36px,10vw,46px)/1.05 var(--serif);letter-spacing:-.005em;text-wrap:balance}
.hd em{font-style:italic;font-weight:500}
.lead{margin:0 0 18px;color:var(--muted);font-size:17px}
.price-line{margin:0 0 20px;font-size:17px;color:var(--muted)}
.price{font:600 24px/1 var(--serif);color:var(--silver)}

/* glow: the italic word that sells, and the price */
.glow{color:var(--silver);text-shadow:0 0 10px rgba(226,230,234,.3),0 0 26px rgba(226,230,234,.12)}
/* only the screen's main headline breathes; the rest hold a steady glow (cheaper, calmer) */
.screen.on .hd:not(.sub) .glow{animation:glow 6s ease-in-out infinite alternate}
@keyframes glow{from{text-shadow:0 0 8px rgba(226,230,234,.22),0 0 22px rgba(226,230,234,.08)}to{text-shadow:0 0 13px rgba(232,235,238,.42),0 0 34px rgba(226,230,234,.2)}}

/* cufflink divider */
.cuff{display:flex;align-items:center;gap:12px;margin:4px 0 18px}
.cuff::before,.cuff::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,transparent,rgba(223,228,234,.4))}
.cuff::after{background:linear-gradient(90deg,rgba(223,228,234,.4),transparent)}
.cuff i{width:30px;height:12px;background:radial-gradient(circle at 6px 6px,#eef1f5 0 3px,#8b929b 3.6px,transparent 4.4px),radial-gradient(circle at 24px 6px,#eef1f5 0 3px,#8b929b 3.6px,transparent 4.4px),linear-gradient(#aab1ba,#aab1ba) center/12px 1px no-repeat}

/* buttons, with a silver foil swipe on every primary one (staggered by --fd) */
.actions{display:grid;gap:12px;margin-top:24px}
.actions.row{grid-template-columns:1fr 2fr}
.btn{position:relative;overflow:hidden;min-height:54px;padding:0 20px;border-radius:12px;border:1px solid var(--ink);background:linear-gradient(180deg,#ffffff,#dfe3e7);color:#121214;font-weight:600;font-size:17px;letter-spacing:.04em;cursor:pointer;box-shadow:inset 0 1px 0 #fff,inset 0 -1px 0 rgba(0,0,0,.25),0 8px 24px rgba(0,0,0,.35);transition:transform .15s ease,opacity .2s ease}
.btn:active{transform:scale(.985)}
.btn:disabled{opacity:.38;cursor:not-allowed}
.btn.ghost{background:rgba(20,20,23,.6);color:var(--ink);border-color:var(--line2);box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
.foilbtn::after{content:"";position:absolute;top:-30%;bottom:-30%;width:34%;left:0;transform:translateX(-180%) skewX(-20deg);pointer-events:none;will-change:transform;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.95),rgba(233,237,241,.7),rgba(157,163,170,.25),transparent);animation:sweep 5.6s ease-in-out infinite;animation-delay:var(--fd,0s)}
.btn.ghost.foilbtn::after,.planlink.foilbtn::after{background:linear-gradient(90deg,transparent,rgba(255,255,255,.42),rgba(220,225,230,.2),transparent)}
.foilbtn:disabled::after{display:none}
@keyframes sweep{0%,58%{transform:translateX(-180%) skewX(-20deg)}84%,100%{transform:translateX(390%) skewX(-20deg)}}

/* leather cards: options, tickets, the plan */
.opts{display:grid;gap:10px}
.opt{position:relative;display:grid;grid-template-columns:58px 1fr;column-gap:14px;align-items:center;text-align:left;padding:13px 16px 13px 13px;min-height:84px;border:1px solid var(--line2);border-radius:16px;background:var(--leather);box-shadow:var(--bevel);cursor:pointer;transition:border-color .2s ease,transform .15s ease}
.opt::after{content:"";position:absolute;inset:5px;border:1px dashed var(--seam);border-radius:12px;pointer-events:none;transition:border-color .2s ease}
.opt .thumb{grid-row:1/span 2}
.opt b{grid-column:2;font-weight:600;font-size:17px;align-self:end}
.opt .d{grid-column:2;color:var(--muted);font-size:16px;line-height:1.42;margin-top:2px;align-self:start}
.opt:active{transform:scale(.99)}
.opt[aria-checked="true"],.opt[aria-pressed="true"]{border-color:var(--silver);box-shadow:var(--bevel),0 0 0 1px rgba(226,230,234,.3),0 0 24px rgba(226,230,234,.1)}
.opt[aria-checked="true"]::after,.opt[aria-pressed="true"]::after{border-color:rgba(223,228,234,.5)}

/* thumbnails: clips, engraved emblems, and Grok slot posters */
.thumb{position:relative;width:58px;height:58px;border-radius:12px;overflow:hidden;border:1px solid var(--line2);background:var(--herring),radial-gradient(circle at 50% 30%,#26282d,#141518);display:grid;place-items:center;flex:none}
.thumb svg{width:30px;height:30px;filter:drop-shadow(0 1px 0 rgba(0,0,0,.8))}
.thumb>img,.thumb>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.thumb>video{opacity:0;transition:opacity .5s ease}.thumb>video.play{opacity:1}
.rank{position:absolute;right:3px;bottom:3px;width:22px;height:22px;border-radius:50%;display:none;place-items:center;background:var(--silver);color:#121214;font:italic 600 14px/1 var(--serif);box-shadow:0 0 10px rgba(226,230,234,.5)}
.rank:not(:empty){display:grid}

/* tailor's tickets */
.tickets{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.ticket{position:relative;display:grid;grid-template-columns:62px 1fr 104px;align-items:center;gap:0 14px;padding:0;min-height:104px;overflow:hidden;border:1px solid var(--line2);border-radius:14px;background:var(--leather);box-shadow:var(--bevel)}
.stub{align-self:stretch;display:flex;flex-direction:column;align-items:center;justify-content:center;border-right:1px dashed var(--seam);font:600 11px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--faint);position:relative}
.stub b{display:block;margin-top:4px;font:italic 500 26px/1 var(--serif);letter-spacing:0;color:var(--silver)}
.stub::before,.stub::after{content:"";position:absolute;right:-7px;width:12px;height:12px;border-radius:50%;background:var(--bg);border:1px solid var(--line2)}
.stub::before{top:-7px}.stub::after{bottom:-7px}
.tx strong{display:block;font-weight:600}
.tx span{color:var(--muted);font-size:16px}
.aside{margin:16px 0 0;font:italic 500 21px/1.35 var(--serif)}

/* fields and the wax seal */
.field{display:block;margin:0 0 14px}
.field>span{display:block;margin-bottom:8px;font-weight:600;font-size:16px}
.field small{display:block;font-weight:400;color:var(--muted);font-size:16px;margin-top:2px}
.field input,.field textarea{width:100%;padding:14px 16px;border-radius:12px;border:1px solid var(--line2);background:var(--leather);box-shadow:inset 0 2px 6px rgba(0,0,0,.5);color:var(--ink);font:inherit;font-size:17px;resize:vertical}
.field textarea{font:italic 500 21px/1.35 var(--serif)}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--silver)}
.sealrow{display:flex;align-items:center;gap:14px;margin:4px 0 0;color:var(--muted);font-size:16px}
.sealrow p{margin:0}
.seal{width:58px;height:58px;flex:none;filter:drop-shadow(0 4px 8px rgba(0,0,0,.6))}
#line-seal{opacity:.28;transform:scale(.9);transition:opacity .3s ease}
#line-seal.ready{opacity:.6}
#line-seal.stamped{animation:stamp .55s cubic-bezier(.3,1.6,.5,1) forwards}
@keyframes stamp{0%{opacity:.6;transform:scale(1.5) rotate(-12deg)}60%{opacity:1;transform:scale(.94) rotate(-4deg)}100%{opacity:1;transform:scale(1) rotate(-6deg)}}

/* the plan */
.vow{margin:-6px 0 16px;font:italic 500 20px/1.35 var(--serif)}
.plan{position:relative;padding:22px 20px 20px;border:1px solid var(--line2);border-radius:18px;background:var(--leather);box-shadow:var(--bevel)}
.plan::after{content:"";position:absolute;inset:6px;border:1px dashed var(--seam);border-radius:13px;pointer-events:none}
.plan-seal{position:absolute;top:-14px;right:14px;width:62px;height:62px;transform:rotate(-8deg);z-index:2}
.tag{position:absolute;top:20px;right:86px;padding:4px 10px;border:1px solid var(--line2);border-radius:999px;font:600 12px/1.2 var(--sans);letter-spacing:.18em;color:var(--faint)}
.plan .k{margin:0;font:600 13px/1.3 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--faint)}
.plan .amt{margin:6px 0 2px;font:500 54px/1 var(--serif)}
.plan .amt.sm{font-size:34px}
.plan .amt small{font-size:19px;color:var(--muted)}
.plan .sub{margin:4px 0 16px;color:var(--muted);font-size:16px}
.plan ul{list-style:none;margin:0 0 16px;padding:0;display:grid;gap:8px}
.plan li{padding-left:24px;position:relative}
.plan li::before{content:"";position:absolute;left:2px;top:.55em;width:10px;height:5px;border-left:1.5px solid var(--silver);border-bottom:1.5px solid var(--silver);transform:rotate(-45deg)}
.card{display:flex;align-items:center;gap:12px;margin:0;padding:14px 16px;border:1px solid var(--line);border-radius:12px;letter-spacing:.14em;color:var(--muted);background:rgba(0,0,0,.25)}
.card i{width:30px;height:20px;border-radius:4px;background:linear-gradient(135deg,#eef1f5,#8c939d)}
.guar{margin:16px 0 0;color:var(--muted);font-size:16px}
.body.center{text-align:center;padding-top:6vh}
.done-seal{width:96px;height:96px;margin:0 auto 18px;display:block;transform:rotate(-6deg)}

.foot{position:relative;z-index:1;display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;padding:22px var(--pad) calc(26px + env(safe-area-inset-bottom,0));border-top:1px solid var(--line);color:var(--faint);font-size:16px}
.foot a{display:inline-flex;align-items:center;min-height:44px;margin:-12px 0;text-underline-offset:3px}

/* ---------- splash: the suit film, the crest stitched on in silver (protocol: black, .45 s fade, no poster) ---------- */
#splash{position:fixed;inset:0;z-index:50;background:#000;display:grid;place-items:center}
.nosplash #splash{display:none}
#splash.out{animation:spOut .4s ease forwards}
#splash .sp-film{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .45s ease-out}
.sp-clear{position:absolute;left:50%;top:50%;width:300px;height:300px;transform:translate(-50%,-46%);border-radius:50%;z-index:1;
  background:radial-gradient(closest-side,rgba(0,0,0,.86) 52%,rgba(0,0,0,.55) 74%,transparent)}
.sp-crest{position:relative;z-index:2;width:110px;height:132px;overflow:visible}
.sp-crest .sp-m1,.sp-crest .sp-in,.sp-crest .sp-sm{stroke-dasharray:1;stroke-dashoffset:1}
.sp-crest .sp-as,.sp-crest .sp-dot{opacity:0}
#splash.go .sp-m1{animation:draw 1.5s .15s cubic-bezier(.45,.1,.3,1) forwards}
#splash.go .sp-in{animation:draw 1.2s .55s ease-in-out forwards}
#splash.go .sp-as{animation:inkIn .7s 1.15s ease forwards}
#splash.go .sp-sm{animation:draw .5s 1.6s ease-out forwards}
#splash.go .sp-dot{animation:inkIn .3s 1.85s ease forwards}
.sp-word{position:absolute;z-index:2;top:calc(50% + 104px);font:italic 500 24px/1 var(--serif);color:var(--silver);opacity:0;text-shadow:0 0 14px rgba(226,230,234,.35)}
#splash.go .sp-word{animation:rise .7s 1.9s ease forwards}
.sp-skip{position:absolute;z-index:3;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0));min-height:44px;padding:0 16px;border:1px solid var(--line);border-radius:999px;background:rgba(0,0,0,.45);color:var(--muted);font-size:14px;letter-spacing:.2em;text-transform:uppercase;cursor:pointer}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes inkIn{to{opacity:1}}
@keyframes spOut{to{opacity:0;visibility:hidden}}
@keyframes rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ---------- tablet ---------- */
@media (min-width:700px){
  :root{--pad:32px;--top:72px}
  .screen{max-width:660px;margin:0 auto}
  .hd{font-size:54px}
  .lead,.price-line{font-size:19px}
  .top{left:50%;right:auto;width:min(660px,100%);transform:translateX(-50%)}
  .prog{left:50%;right:auto;width:min(596px,calc(100% - 64px));transform:translateX(-50%)}
  .opt{grid-template-columns:66px 1fr}.opt .thumb{width:66px;height:66px}
}

/* ---------- desktop: the room on the left, the work on the right ---------- */
@media (min-width:1024px){
  :root{--pad:40px}
  .screen{max-width:none;margin:0;padding:0}
  .screen.on{display:grid;grid-template-columns:minmax(0,1fr) minmax(470px,610px);height:100dvh}
  .panel{margin:0;border-radius:0;border:0;border-right:1px solid var(--line2);box-shadow:none}
  .panel.media{aspect-ratio:auto;height:100dvh}
  .panel.media::before{inset:14px;border-radius:4px}
  .onphoto{left:40px;bottom:84px;font-size:13px}
  #s-commit .lead{margin-bottom:10px}
  #s-commit .vow{margin-bottom:12px}
  #s-commit .plan{padding:18px 20px 16px}
  #s-commit .plan .amt{font-size:44px}
  #s-commit .plan .amt.sm{font-size:28px}
  #s-commit .plan .sub{margin-bottom:10px}
  #s-commit .plan ul{grid-template-columns:1fr 1fr;gap:6px 16px;margin-bottom:12px}
  #s-commit .cuff{margin:2px 0 10px}
  #s-commit .actions{margin-top:14px}
  #s-commit .guar{margin-top:10px}
  #line-echo{font-size:34px;max-width:20ch}
  .photo-crest{top:32px;right:32px;width:40px;height:48px}
  .panel.portrait img{object-position:50% 20%}
  .panel.type{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:0 8vw;height:100dvh;
    background:var(--herring),radial-gradient(60% 70% at 40% 20%,rgba(226,230,234,.08),transparent 70%),#0e0e10}
  .big-crest{width:clamp(150px,14vw,210px);height:auto;aspect-ratio:100/120;filter:drop-shadow(0 0 22px rgba(226,230,234,.25))}
  .ticket-big{font:italic 500 clamp(140px,15vw,230px)/.9 var(--serif);color:rgba(233,236,239,.2)}
  .ticket-big span{font:600 16px/1 var(--sans);font-style:normal;letter-spacing:.3em;text-transform:uppercase;vertical-align:top;margin-right:10px;color:var(--faint)}
  .panel.type .quote{margin:26px 0 0;max-width:22ch;font:italic 500 clamp(28px,2.6vw,40px)/1.2 var(--serif)}
  .body{overflow-y:auto;padding:calc(var(--top) + 32px) var(--pad) 48px;max-height:100dvh}
  .body.center{padding-top:calc(var(--top) + 14vh)}
  .top{left:auto;width:min(610px,100%);right:0;transform:none;background:linear-gradient(var(--bg) 70%,rgba(10,10,11,0))}
  .prog{left:auto;right:var(--pad);width:calc(min(610px,100%) - 80px);transform:none}
  .hd{font-size:50px}
  .foot{position:fixed;left:0;bottom:0;width:calc(100% - min(610px,100%));border:0;background:linear-gradient(transparent,rgba(0,0,0,.6));z-index:5}
  .opt{min-height:76px;padding:10px 14px 10px 10px}
  .opt .d{font-size:15.5px}
  .opts{gap:8px}
}
@media (min-width:1024px) and (max-height:940px){ .opt{min-height:64px;padding-top:7px;padding-bottom:7px} .opt .thumb{width:50px;height:50px} .opt{grid-template-columns:50px 1fr} .opts{gap:7px} .hd{font-size:44px} .actions{margin-top:18px} .lead{margin-bottom:12px} }
@media (min-width:1024px) and (max-height:820px){ .hd{font-size:42px} .opt{min-height:68px} .opt .thumb{width:52px;height:52px} .opt{grid-template-columns:52px 1fr} .ticket{padding-top:8px;padding-bottom:8px} .tickets{gap:8px} .lead{margin-bottom:12px} }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  #splash{display:none}
  .glow{text-shadow:0 0 10px rgba(226,230,234,.3)}
  .foilbtn::after{display:none}
}

/* ---------- OXFORD watermark: guilloché, the engraved banknote linework, behind every screen ---------- */
.wm{position:absolute;inset:0;background:url(/work/alpha/guilloche-field.svg) repeat 0 0/480px 240px;opacity:.055;
  -webkit-mask-image:radial-gradient(140% 90% at 50% 40%,#000 55%,transparent 100%);mask-image:radial-gradient(140% 90% at 50% 40%,#000 55%,transparent 100%)}
.sp-crest,.sp-word{z-index:1}
.body.center{position:relative}
.body.center::before{content:"";position:absolute;left:50%;top:calc(6vh - 67px);width:230px;height:230px;-webkit-mask-image:radial-gradient(closest-side,#000 70%,transparent);mask-image:radial-gradient(closest-side,#000 70%,transparent);transform:translateX(-50%);background:url(/work/alpha/guilloche-rosette.svg) center/contain no-repeat;opacity:.13;pointer-events:none;z-index:-1}
@media (min-width:1024px){
  .panel.type::after{content:"";position:absolute;width:560px;height:560px;left:calc(8vw + clamp(150px,14vw,210px)/2 - 280px);top:calc(50% - 280px - 60px);
    background:url(/work/alpha/guilloche-rosette.svg) center/contain no-repeat;opacity:.14;pointer-events:none}
  .panel.type>*{position:relative;z-index:1}
  .body.center::before{top:calc(var(--top) + 14vh - 67px)}
}

/* ---------- the footage: aim cards carry their clip full-bleed ---------- */
.opt.clip{display:flex;flex-direction:column;justify-content:center;min-height:132px;padding:16px 20px;overflow:hidden;background:#0b0b0d}
.opt.clip>img,.opt.clip>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:70% 50%;filter:brightness(.8);transition:filter .5s ease,opacity .6s ease}
.opt.clip>video{opacity:0}.opt.clip>video.play{opacity:1}
.opt.clip::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,rgba(10,10,12,.9),rgba(10,10,12,.66) 42%,rgba(10,10,12,.16) 78%,transparent);transition:opacity .5s ease}
.opt.clip::after{z-index:2}
.opt.clip b,.opt.clip .d{position:relative;z-index:2;align-self:flex-start;text-align:left;max-width:76%;text-shadow:0 1px 8px rgba(0,0,0,.85)}
.opt.clip b{font-size:18px}
.opt.clip .d{color:#c4cad3}
.opt.clip[aria-pressed="true"]>img,.opt.clip[aria-pressed="true"]>video{filter:brightness(1.12)}
.opt.clip[aria-pressed="true"]::before{opacity:.72}
.opt.clip .rank{z-index:3;top:12px;right:12px;bottom:auto;width:30px;height:30px;font-size:17px}

/* tickets: the clip fills the right end of each ticket */
.ticket .tx{padding:12px 0}
.ticket .thumb{width:104px;height:auto;min-height:104px;align-self:stretch;border:0;border-left:1px solid var(--line2);border-radius:0}
.thumb.dup>svg{display:none}

/* the plan opens on the wide whisky */
.plan .pour{position:relative;margin:-22px -20px 18px;height:150px;overflow:hidden;border-radius:17px 17px 0 0;border-bottom:1px solid var(--line2);background:#000}
.plan .pour>img,.plan .pour>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.plan .pour>video{opacity:0;transition:opacity .6s ease}.plan .pour>video.play{opacity:1}
.plan .pour::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.2),transparent 45%,rgba(14,14,16,.6))}
.plan .tag{z-index:2;background:rgba(10,10,12,.62);color:var(--muted)}

@media (max-width:1023px){ .panel.only-lg{display:none} }
@media (min-width:700px){ .opt.clip{min-height:140px} .opt.clip b,.opt.clip .d{max-width:66%} }
@media (min-width:1024px){
  .opt.clip{min-height:92px;padding:10px 20px}
  .opt.clip .d{max-width:74%}
  #s-commit .plan .pour{margin:-18px -20px 14px;height:104px}
  .thumb.dup>img,.thumb.dup>video{display:none}.thumb.dup>svg{display:block}
  /* the pick stage: the latest aim plays large, the rosette behind it */
  .pick-stage .ticket-big,.pick-stage .quote{transition:opacity .5s ease}
  .pick-stage.has .ticket-big,.pick-stage.has .quote{opacity:0}
  .pick-stage::after{transition:opacity .6s ease}
  .pick-stage.has::after{left:calc(50% - 300px);top:calc(50% - 300px - 40px);width:600px;height:600px;opacity:.2}
  .pick-stage .pick-frame{position:absolute;left:50%;top:50%;width:min(420px,30vw,54vh);aspect-ratio:4/5;transform:translate(-50%,calc(-50% - 40px)) scale(.97);opacity:0;z-index:2;
    border:1px solid var(--line2);border-radius:6px;overflow:hidden;background:#000;box-shadow:0 30px 80px rgba(0,0,0,.65),var(--bevel);transition:opacity .6s ease,transform .6s ease}
  .pick-stage.has .pick-frame{opacity:1;transform:translate(-50%,calc(-50% - 40px))}
  .pick-frame::before{content:"";position:absolute;inset:8px;border:1px dashed var(--seam);border-radius:3px;z-index:3;pointer-events:none}
  .pick-frame::after{content:"";position:absolute;inset:0;z-index:2;background:linear-gradient(180deg,transparent 55%,rgba(0,0,0,.7));pointer-events:none}
  .pick-frame .pv{position:absolute;inset:0;opacity:0;transition:opacity .7s ease}
  .pick-frame .pv.on{opacity:1}
  .pick-frame .pv>img,.pick-frame .pv>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
  .pick-frame .pv>video{opacity:0;transition:opacity .5s ease}.pick-frame .pv>video.play{opacity:1}
  .pick-stage .pick-cap{position:absolute;left:24px;right:24px;bottom:20px;z-index:4;margin:0;font:600 12px/1.4 var(--sans);letter-spacing:.28em;text-transform:uppercase;color:var(--silver)}
}
@media (min-width:1024px) and (max-height:940px){ .opt.clip{min-height:80px;padding-top:8px;padding-bottom:8px} }
/* the crystal glass is the brightest clip: hold it down under the words */
.opt.clip[data-pick="whisky"]>img,.opt.clip[data-pick="whisky"]>video{filter:brightness(.6)}
.opt.clip[data-pick="whisky"][aria-pressed="true"]>img,.opt.clip[data-pick="whisky"][aria-pressed="true"]>video{filter:brightness(.85)}
/* phones and tablets: a solid scrim under the words, the clip stays clear on the right */
@media (max-width:1023px){
  .opt.clip::before{background:linear-gradient(90deg,rgba(10,10,12,.9),rgba(10,10,12,.78) 45%,rgba(10,10,12,.75) 60%,rgba(10,10,12,.4) 80%,rgba(10,10,12,.08))}
  .opt.clip[aria-pressed="true"]::before{opacity:1}
}

/* ---------- overlays: every clip carries line work that answers it (Oxford silver, quiet; stills for reduced motion) ---------- */
:root{--mono:ui-monospace,"SF Mono",Menlo,Consolas,"Roboto Mono","Droid Sans Mono",monospace}
.fx{position:absolute;inset:0;z-index:1;pointer-events:none}
.chip,.fx-line,.fx-chip{font:500 12px/1.2 var(--mono);letter-spacing:.04em;color:var(--silver);white-space:nowrap}
.dot{display:inline-block;width:6px;height:6px;margin-right:6px;border-radius:50%;background:#e6ebf1;box-shadow:0 0 6px rgba(236,238,241,.8);vertical-align:1px;animation:blink 1.6s ease-in-out infinite}
@keyframes blink{50%{opacity:.25}}

/* hero: a dial ring sweeping with the second hand */
.fx-dial{inset:auto;left:16px;top:16px;display:flex;align-items:center;gap:10px}
.fx-dial svg{width:56px;height:56px;overflow:visible;filter:drop-shadow(0 1px 4px rgba(0,0,0,.7))}
.fx-dial circle:first-child{fill:rgba(8,8,10,.35);stroke:rgba(226,232,240,.55);stroke-width:1}
.fx-dial .ticks line{stroke:rgba(226,232,240,.5);stroke-width:.8}
.fx-dial .hand{transform-origin:50px 50px;animation:dialSweep 60s steps(60) infinite}
.fx-dial .hand line{stroke:#eef2f6;stroke-width:1.1}
.fx-dial .trail{fill:rgba(226,232,240,.12)}
.fx-dial .hub{fill:#eef2f6}
.fx-dial .chip{padding:4px 9px;border:1px solid rgba(226,230,234,.22);border-radius:999px;background:rgba(10,10,12,.6)}
.fx-dial .chip b{font-weight:600;color:#eef2f6}
@keyframes dialSweep{to{transform:rotate(360deg)}}

/* aim cards: the motif sits under the scrim; the line gets its own row so it never covers the words */
.opt.clip::before{z-index:2}
.opt.clip b,.opt.clip .d{z-index:3}
.opt.clip::after{z-index:3}
.opt.clip .rank{z-index:4}
.fx-line{position:relative;z-index:3;align-self:flex-end;margin-top:8px;padding:4px 9px;border:1px solid rgba(226,230,234,.22);border-radius:999px;background:rgba(10,10,12,.62)}
.fx-line.ul::after{content:"";position:absolute;left:9px;right:9px;bottom:2px;height:1px;background:linear-gradient(90deg,#eef2f6,rgba(238,242,246,.3));transform-origin:0 50%;animation:underline 6s ease-in-out infinite}
@keyframes underline{0%{transform:scaleX(0);opacity:1}35%,88%{transform:scaleX(1);opacity:1}100%{transform:scaleX(1);opacity:0}}
.typed{display:inline-block;letter-spacing:0;vertical-align:bottom;overflow:hidden;width:28ch;border-right:1px solid rgba(238,242,246,.7);animation:typeOn 7s infinite,caret .8s step-end infinite}
@keyframes typeOn{0%{width:0;animation-timing-function:steps(5,end)}16%{width:5ch}34%{width:5ch;animation-timing-function:steps(23,end)}62%,100%{width:28ch}}
@keyframes caret{50%{border-right-color:transparent}}
.check{display:inline-block;font:italic 500 17px/1 var(--serif);letter-spacing:0;animation:land 6s cubic-bezier(.2,.8,.2,1) infinite}
@keyframes land{0%{opacity:0;transform:translateY(-8px) scale(1.25)}10%,92%{opacity:1;transform:none}100%{opacity:0}}
.fx-grid{left:auto;width:52%;-webkit-mask-image:linear-gradient(90deg,transparent,#000 40%);mask-image:linear-gradient(90deg,transparent,#000 40%);opacity:.38}
.fx-grid svg{width:100%;height:100%}
.fx-grid line{stroke:#e6ebf1;stroke-width:.6;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:0;animation:gridOn 6s calc(var(--i) * .08s) ease infinite}
@keyframes gridOn{0%{stroke-dashoffset:1}25%,100%{stroke-dashoffset:0}}
.fx-ripple i{position:absolute;left:68%;top:48%;width:120px;height:120px;margin:-60px 0 0 -60px;border:1px solid rgba(238,242,246,.55);border-radius:50%;opacity:.3;animation:ripple 4.4s ease-out infinite}
.fx-ripple i+i{animation-delay:2.2s}
@keyframes ripple{0%{transform:scale(.15);opacity:.7}100%{transform:scale(1.7);opacity:0}}
.opt.clip[data-pick="corridor"]>img,.opt.clip[data-pick="corridor"]>video{object-position:50% 50%;filter:brightness(1.05)}
.opt.clip[data-pick="corridor"][aria-pressed="true"]>img,.opt.clip[data-pick="corridor"][aria-pressed="true"]>video{filter:brightness(1.3)}
.fx-walk svg{width:100%;height:100%}
.fx-walk.hero{z-index:2}.fx-walk.hero .lg{display:none}
.fx-walk path{fill:none;stroke:#eef2f6;stroke-width:1.2;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:0;filter:drop-shadow(0 0 3px rgba(238,242,246,.7));animation:walkOn 7s ease-in-out infinite}
@keyframes walkOn{0%{stroke-dashoffset:1;opacity:1}40%,88%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:0}}
.fx-line em{font-style:normal}

/* tickets: a status chip per clip */
.thumb .chip{position:absolute;left:50%;bottom:7px;z-index:2;transform:translateX(-50%);padding:3px 7px;border-radius:999px;background:rgba(8,8,10,.7);font-size:11px}
.thumb .chip.bar::after{content:"";display:block;height:2px;margin-top:3px;background:linear-gradient(90deg,#eef2f6 60%,rgba(238,242,246,.2) 60%);background-size:100% 100%;animation:bar 5s ease-in-out infinite}
@keyframes bar{0%{clip-path:inset(0 60% 0 0)}50%,100%{clip-path:inset(0 0 0 0)}}
.fx-chip.tl{position:absolute;width:max-content;left:18px;top:16px;z-index:3;padding:5px 11px;border:1px solid rgba(226,230,234,.22);border-radius:999px;background:rgba(10,10,12,.6)}

/* the line: an ink stroke draws under the echoed sentence */
#line-echo::after{content:"";display:block;width:min(260px,70%);height:1px;margin-top:10px;background:linear-gradient(90deg,#eef2f6,rgba(238,242,246,0));transform-origin:0 50%;animation:underline 5.5s ease-in-out infinite}

/* the plan: the house stamp */
.plan .pour .stamp{position:absolute;left:16px;bottom:14px;z-index:3;padding:5px 10px;border:1px solid rgba(238,242,246,.55);outline:1px solid rgba(238,242,246,.22);outline-offset:2px;border-radius:3px;background:rgba(10,10,12,.5);
  font:600 12px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#eef2f6;transform:rotate(-4deg);animation:stampIn .55s .7s cubic-bezier(.3,1.4,.5,1) both}
@keyframes stampIn{0%{opacity:0;transform:rotate(-4deg) scale(1.6)}100%{opacity:1;transform:rotate(-4deg) scale(1)}}

@media (min-width:1024px){
  .fx-dial{left:40px;top:40px;gap:12px}
  .fx-dial svg{width:92px;height:92px}
  .fx-dial .chip{font-size:13px}
  .opt.clip .fx-line{display:none}
  .fx-chip.tl{left:40px;top:40px;font-size:13px}
  .ticket .thumb.dup .chip{display:none}
  .pick-stage .pick-cap .pick-line{display:block;margin-top:8px;font:500 13px/1.3 var(--mono);letter-spacing:.04em;text-transform:none;color:var(--muted)}
}
@media (prefers-reduced-motion:reduce){ .fx-dial .hand{transform:rotate(0)} }
.fx-line .tc{color:#eef2f6;font-weight:600}
@media (max-width:374px){ .fx-dial{gap:8px;left:14px;top:14px} .fx-dial svg{width:44px;height:44px} .fx-dial .chip{font-size:11px;padding:4px 8px;letter-spacing:0} }
.fx-dial.card{inset:auto;right:14px;left:auto;top:50%;width:48px;height:48px;margin-top:-24px;z-index:1;display:block}
.fx-dial.card svg{display:block;width:48px;height:48px}
@media (max-width:374px){ .fx-dial.card,.fx-dial.card svg{width:40px;height:40px} .fx-dial.card{right:10px;margin-top:-20px} }
@media (min-width:1024px){ .fx-walk.hero .sm{display:none} .fx-walk.hero .lg{display:block} .fx-dial.card{right:22px} }

/* ---------- Begin: the corridor full-bleed behind the opening words (phones and tablets) ---------- */
.fx-walk.hero .md{display:none}
@media (max-width:1023px){
  #s-begin{position:relative;padding:0}
  #s-begin .hero{position:relative;margin:0;border:0;border-radius:0;aspect-ratio:auto;box-shadow:none;z-index:0}
  #s-begin .hero::before{display:none}
  #s-begin .hero::after{background:linear-gradient(180deg,rgba(10,10,11,.4),transparent 16%,transparent 40%,rgba(10,10,11,.74) 56%,rgba(10,10,11,.93) 72%,var(--bg) 100%)}
  #s-begin .body{position:relative;z-index:1;padding:0 var(--pad) 28px}
  #s-begin .intro{display:flex;flex-direction:column;padding:calc(var(--top) + 100px) 0 10px}
  #s-begin .intro .actions{margin-top:10px}
  #s-begin .onphoto{top:calc(var(--top) + 20px);bottom:auto;left:var(--pad)}
  #s-begin .fx-chip.tl{top:calc(var(--top) + 46px);left:var(--pad)}
  #s-begin .photo-crest{top:calc(var(--top) + 12px);right:var(--pad)}
  .cue{display:flex;justify-content:center;margin:12px 0 0}
  .cue i{display:block;width:1px;height:26px;background:linear-gradient(var(--silver),transparent);animation:cue 2.6s ease-in-out infinite}
  @keyframes cue{0%,100%{opacity:.25;transform:translateY(-3px)}50%{opacity:.9;transform:none}}
}
@media (min-width:700px) and (max-width:1023px){
  #s-begin{max-width:none}
  #s-begin .body{max-width:660px;margin:0 auto}
  .fx-walk.hero .sm{display:none} .fx-walk.hero .md{display:block}
}
@media (min-width:1024px){ .cue{display:none} .fx-walk.hero .md{display:none} }

/* the words under the hero */
.more{margin:22px 0 6px}
.hd.sub{font-size:clamp(30px,8.4vw,40px)}
.changes{list-style:none;margin:4px 0 0;padding:0}
.changes li{display:grid;grid-template-columns:28px 1fr;gap:14px;align-items:center;padding:14px 0;border-top:1px solid rgba(223,228,234,.16);font:500 21px/1.3 var(--serif)}
.changes li:first-child{border-top:0}
.changes svg{width:26px;height:26px;fill:none;stroke:var(--silver);stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round;opacity:.9}
.changes em{font-style:italic}
.textlink{display:inline-flex;align-items:center;min-height:44px;padding:0;border:0;background:none;color:var(--ink);font:600 16px/1 var(--sans);letter-spacing:.04em;text-decoration:underline;text-underline-offset:6px;text-decoration-color:rgba(223,228,234,.45);cursor:pointer}
.coachband{position:relative;display:flex;align-items:center;gap:18px;margin:26px 0 22px;padding:18px;border:1px solid var(--line2);border-radius:16px;background:var(--leather);box-shadow:var(--bevel)}
.coachband::after{content:"";position:absolute;inset:6px;border:1px dashed var(--seam);border-radius:12px;pointer-events:none}
.medal{position:relative;flex:none;width:76px;height:76px;display:grid;place-items:center;border-radius:50%;background:radial-gradient(circle,#1d1e22,#0d0d0f);border:1px solid var(--line2)}
.medal::before{content:"";position:absolute;inset:-12px;background:url(/work/alpha/guilloche-rosette.svg) center/contain no-repeat;opacity:.32}
.medal svg{position:relative;width:34px;height:41px;filter:drop-shadow(0 0 8px rgba(226,230,234,.25))}
.coachband p{margin:0;font-size:16px;line-height:1.45;color:var(--muted)}
.coachband b{display:block;margin-bottom:2px;font-size:17px;font-weight:600;color:var(--ink)}

/* the plan: the crest where a face was */
.panel.crestpanel{display:grid;place-items:center;height:170px;background:var(--herring),radial-gradient(60% 80% at 50% 38%,rgba(226,230,234,.09),transparent 70%),#0e0e10}
.panel.crestpanel::before{content:"";position:absolute;left:50%;top:50%;width:300px;height:300px;margin:-160px 0 0 -150px;background:url(/work/alpha/guilloche-rosette.svg) center/contain no-repeat;opacity:.16;pointer-events:none}
.panel.crestpanel .big-crest{position:relative;z-index:1;width:72px;height:auto;aspect-ratio:100/120;margin-top:-18px;filter:drop-shadow(0 0 18px rgba(226,230,234,.28))}
@media (min-width:1024px){
  .panel.crestpanel{height:100dvh}
  .panel.crestpanel::before{width:620px;height:620px;margin:-340px 0 0 -310px}
  .panel.crestpanel .big-crest{width:clamp(150px,14vw,210px);margin-top:-60px}
  #s-begin .more .hd.sub{font-size:38px}
}

/* ================= the arsenal, in Oxford ================= */
/* room: silver lint rising in the light, barely-there beams, a slow light sweep, floating crests */
.beams{position:absolute;left:50%;top:38%;width:160vmax;height:160vmax;margin:-80vmax 0 0 -80vmax;opacity:.05;
  background:repeating-conic-gradient(from 0deg,rgba(232,235,238,.9) 0deg 2deg,transparent 2deg 30deg);
  -webkit-mask-image:radial-gradient(closest-side,#000,transparent 70%);mask-image:radial-gradient(closest-side,#000,transparent 70%);animation:turn 150s linear infinite}
@keyframes turn{to{transform:rotate(360deg)}}
.sweep{position:absolute;inset:-20%;background:linear-gradient(105deg,transparent 42%,rgba(232,235,238,.05) 50%,transparent 58%);transform:translateX(-60%);animation:lightSweep 14s ease-in-out infinite}
@keyframes lightSweep{0%,30%{transform:translateX(-60%)}70%,100%{transform:translateX(60%)}}
.motes i{position:absolute;bottom:-10px;width:2px;height:2px;border-radius:50%;background:#e8edf3;box-shadow:0 0 4px rgba(236,238,241,.8);opacity:0;animation:mote 26s linear infinite}
.motes i:nth-child(1){left:8%;animation-delay:-2s}.motes i:nth-child(2){left:17%;animation-delay:-11s;animation-duration:31s}
.motes i:nth-child(3){left:26%;animation-delay:-6s}.motes i:nth-child(4){left:35%;animation-delay:-19s;animation-duration:29s}
.motes i:nth-child(5){left:44%;animation-delay:-3s;animation-duration:34s}.motes i:nth-child(6){left:53%;animation-delay:-15s}
.motes i:nth-child(7){left:62%;animation-delay:-8s;animation-duration:30s}.motes i:nth-child(8){left:71%;animation-delay:-22s}
.motes i:nth-child(9){left:80%;animation-delay:-13s;animation-duration:33s}.motes i:nth-child(10){left:89%;animation-delay:-5s}
.motes i:nth-child(11){left:22%;animation-delay:-25s;animation-duration:36s}.motes i:nth-child(12){left:66%;animation-delay:-17s;animation-duration:28s}
@keyframes mote{0%{transform:translate(0,0);opacity:0}10%{opacity:.5}60%{transform:translate(14px,-62vh);opacity:.35}100%{transform:translate(-8px,-110vh);opacity:0}}
.marks svg{position:absolute;width:26px;height:31px;opacity:.045;animation:float 40s ease-in-out infinite alternate}
.marks svg:nth-child(1){left:7%;top:22%}.marks svg:nth-child(2){left:84%;top:14%;animation-delay:-9s}
.marks svg:nth-child(3){left:72%;top:66%;animation-delay:-17s}.marks svg:nth-child(4){left:14%;top:78%;animation-delay:-25s}
.marks svg:nth-child(5){left:46%;top:48%;animation-delay:-31s}
@keyframes float{from{transform:translate(0,0) rotate(-6deg)}to{transform:translate(18px,-26px) rotate(6deg)}}

/* header: the crest on a nickel plaque */
.mark{border-radius:9px;background:linear-gradient(180deg,#2a2c31,#16171a);border:1px solid rgba(223,228,234,.28);box-shadow:inset 0 1px 0 rgba(255,255,255,.12),inset 0 -1px 0 rgba(0,0,0,.6),0 2px 8px rgba(0,0,0,.5)}
.mark svg{width:24px;height:29px}

/* projector advance between steps: a brief dark gap and a tiny frame shake */
.projgap{position:fixed;inset:0;z-index:30;background:#000;opacity:0;pointer-events:none}
.projgap.go{animation:gap .3s ease-out}
@keyframes gap{0%{opacity:0}25%{opacity:.6}100%{opacity:0}}
.screen.on.proj{animation:proj .42s ease-out backwards}
@keyframes proj{0%{opacity:0;transform:translate(0,4px)}35%{opacity:1;transform:translate(1.5px,-1px)}55%{transform:translate(-1px,1px)}75%{transform:translate(.5px,0)}100%{opacity:1;transform:none}}

/* scroll reveal */
.rv{opacity:0;transform:translateY(16px);transition:opacity .7s ease,transform .7s ease}
.rv.in{opacity:1;transform:none}

/* marquee */
.marquee{overflow:hidden;margin:6px calc(var(--pad) * -1) 8px;padding:12px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.mq-track{display:flex;align-items:center;gap:18px;width:max-content;animation:mq 46s linear infinite}
.mq-track span{font:italic 500 20px/1 var(--serif);color:var(--silver);white-space:nowrap}
.mq-track i{width:6px;height:6px;border:1px solid rgba(223,228,234,.55);transform:rotate(45deg);flex:none}
@keyframes mq{to{transform:translateX(-50%)}}

/* true counters */
.counters{display:grid;grid-template-columns:1fr 1fr;gap:1px;margin:22px 0;border:1px solid var(--line2);border-radius:16px;overflow:hidden;background:var(--line)}
.counters div{padding:16px 14px;background:var(--leather);text-align:center}
.counters b{display:block;font:500 40px/1 var(--serif);color:var(--ink);font-variant-numeric:tabular-nums}
.counters span{display:block;margin-top:6px;font-size:16px;line-height:1.3;color:var(--muted)}

/* before / after: drag to compare */
.ba{position:relative;height:200px;border-radius:16px;overflow:hidden;border:1px solid var(--line2);box-shadow:var(--bevel);touch-action:pan-y}
.ba-card{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;gap:10px;padding:18px 20px}
.ba-card.after{background:var(--herring),linear-gradient(160deg,#24262b,#121316);align-items:flex-end;text-align:right}
.ba-card.before{background:linear-gradient(160deg,#141416,#0c0c0d);clip-path:inset(0 calc(100% - var(--x)) 0 0);align-items:flex-start}
.ba-k{font:600 12px/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--faint)}
.bubble{margin:0;max-width:78%;padding:12px 14px;border-radius:16px;font-size:16px;line-height:1.4}
.after .bubble{background:linear-gradient(180deg,#eef1f5,#cfd5dd);color:#121214;border-bottom-right-radius:4px;font-weight:600}
.before .bubble{background:#1f2023;color:#9a9da2;border-bottom-left-radius:4px;font-style:italic}
.ba-meta{font:500 12px/1 var(--mono);color:var(--faint)}
.ba-handle{position:absolute;top:0;bottom:0;left:var(--x);width:2px;margin-left:-1px;background:linear-gradient(transparent,#eef2f6 20%,#eef2f6 80%,transparent);pointer-events:none}
.ba-handle i{position:absolute;top:50%;left:50%;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;border:1px solid #eef2f6;background:rgba(10,10,11,.8);box-shadow:0 0 14px rgba(226,230,234,.35)}
.ba-handle i::before,.ba-handle i::after{content:"";position:absolute;top:50%;width:6px;height:6px;margin-top:-3px;border:solid #eef2f6;border-width:0 0 1px 1px}
.ba-handle i::before{left:8px;transform:rotate(45deg)}.ba-handle i::after{right:8px;transform:rotate(-135deg)}
.ba-range{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize}
.ba-note{margin:8px 0 0;font-size:16px;color:var(--faint)}

/* comparison */
.vs{width:100%;border-collapse:separate;border-spacing:0;border:1px solid var(--line2);border-radius:16px;overflow:hidden;font-size:16px}
.vs th,.vs td{padding:12px 10px;text-align:left;vertical-align:top;border-top:1px solid var(--line);line-height:1.35}
.vs thead th{border-top:0;font:600 12px/1.3 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--faint)}
.vs thead th:last-child{color:var(--silver)}
.vs tbody th{font-weight:600;color:var(--ink)}
.vs td{color:var(--muted)}
.vs td:last-child{color:var(--ink);background:rgba(226,230,234,.05)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* phone mock: the 07:00 check-in, a cursor taps Done */
.phone{width:min(250px,72%);margin:18px auto 20px;padding:10px;border-radius:34px;background:linear-gradient(160deg,#2b2d32,#121316);border:1px solid rgba(223,228,234,.25);box-shadow:var(--bevel),0 20px 40px rgba(0,0,0,.5)}
.ph-screen{position:relative;height:300px;border-radius:26px;overflow:hidden;padding:30px 14px;background:radial-gradient(90% 60% at 50% 0%,rgba(226,230,234,.12),transparent 70%),#0b0b0d}
.ph-time{margin:0 0 18px;text-align:center;font:500 50px/1 var(--serif);color:var(--ink)}
.ph-note{display:grid;gap:4px;padding:12px;border-radius:14px;background:rgba(40,42,47,.92);border:1px solid rgba(223,228,234,.16);font-size:16px;line-height:1.35;color:var(--muted)}
.ph-note b{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--silver)}
.ph-done{justify-self:end;margin-top:4px;padding:6px 14px;border-radius:999px;border:1px solid var(--silver);font:600 14px/1 var(--sans);font-style:normal;color:var(--ink);animation:done 6s ease infinite}
.ph-done::after{content:" ✓";opacity:0;animation:doneTick 6s ease infinite}
@keyframes done{0%,50%{transform:none}54%{transform:scale(.92)}60%,100%{transform:none}}
@keyframes doneTick{0%,54%{opacity:0}60%,92%{opacity:1}100%{opacity:0}}
.cursor{position:absolute;left:62%;top:78%;width:18px;height:18px;border-radius:50%;background:rgba(238,242,246,.35);border:1px solid #eef2f6;animation:tap 6s ease infinite}
@keyframes tap{0%{transform:translate(30px,40px);opacity:0}25%{opacity:1}45%{transform:translate(0,0)}52%{transform:translate(0,0) scale(.7)}60%{transform:translate(0,0) scale(1)}85%{opacity:1;transform:translate(0,0)}100%{opacity:0;transform:translate(0,0)}}
.cycle{position:relative;display:grid}
.cycle i{grid-area:1/1;font:500 24px/1.15 var(--serif);font-style:italic;color:var(--ink);opacity:0;animation:cyc 10s infinite}
.cycle i:nth-child(1){opacity:1;animation-delay:0s}.cycle i:nth-child(2){animation-delay:2.5s}.cycle i:nth-child(3){animation-delay:5s}.cycle i:nth-child(4){animation-delay:7.5s}
@keyframes cyc{0%{opacity:0}4%,22%{opacity:1}26%,100%{opacity:0}}

/* drills drifting in opposite directions */
.drills{display:grid;gap:10px;margin:4px calc(var(--pad) * -1) 18px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.drift{overflow:hidden}
.drift>div{display:flex;gap:10px;width:max-content;animation:mq 40s linear infinite}
.drift.rev>div{animation-direction:reverse}
.drift span{padding:9px 14px;border:1px solid var(--line2);border-radius:999px;background:rgba(20,20,23,.7);font-size:16px;color:var(--muted);white-space:nowrap}

/* fitting tape: moves with the scroll */
.tape{position:relative;height:40px;margin:0 0 10px;border-radius:6px;overflow:hidden;border:1px solid var(--line2);
  background:repeating-linear-gradient(90deg,rgba(223,228,234,.35) 0 1px,transparent 1px 10px) bottom/100% 9px no-repeat,repeating-linear-gradient(90deg,rgba(223,228,234,.5) 0 1px,transparent 1px 50px) bottom/100% 16px no-repeat,#141518}
.tape-fill{position:absolute;left:0;top:0;bottom:0;width:calc(var(--p,0) * 100%);background:linear-gradient(90deg,rgba(226,230,234,.05),rgba(226,230,234,.18));border-right:1px solid #eef2f6}
.tape-k,.tape-v{position:absolute;top:8px;font:600 12px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--silver)}
.tape-k{left:10px}.tape-v{right:10px;font-variant-numeric:tabular-nums}

/* coach: Fig. 01, the crest turning slowly, drop cap, pull quote */
.medal-fig{margin:0;display:grid;justify-items:center;gap:8px;flex:none}
.medal-fig figcaption{font:500 12px/1.35 var(--mono);color:var(--faint);text-align:center}
.medal svg{animation:spin 14s ease-in-out infinite}
@keyframes spin{0%,72%{transform:rotateY(0)}100%{transform:rotateY(360deg)}}
.dropcap{margin:0 0 14px;color:var(--muted);font-size:17px}
.dropcap::first-letter{float:left;margin:6px 8px 0 0;font:500 62px/.78 var(--serif);color:var(--silver)}
.pull{margin:8px 0 18px;padding:6px 0 6px 18px;border-left:1px solid var(--silver)}
.pull p{margin:0;font:italic 500 26px/1.25 var(--serif);color:var(--ink)}

/* not convinced yet + the week */
.notyet{display:block;text-align:center;width:100%;min-height:44px;margin:10px 0 0;padding:10px 0;border:0;background:none;color:var(--muted);font:500 16px/1.3 var(--sans);text-decoration:underline;text-underline-offset:5px;text-decoration-color:rgba(223,228,234,.35);cursor:pointer}
.week{width:min(440px,calc(100% - 32px));max-height:calc(100vh - 32px);max-height:calc(100svh - 32px);padding:0;border:1px solid var(--line2);border-radius:20px;background:var(--leather);color:var(--ink);box-shadow:0 30px 90px rgba(0,0,0,.7)}
.week::backdrop{background:rgba(5,5,6,.78)}
.wk-in{position:relative;padding:26px 22px 22px}
.wk-x{position:absolute;right:10px;top:10px;width:44px;height:44px;border:0;background:none;color:var(--muted);font-size:26px;cursor:pointer}
.wk-reel{position:relative;height:150px;margin:6px 0 14px;padding:0;list-style:none}
.wk-reel li{position:absolute;inset:0;display:grid;align-content:start;gap:6px;padding:16px;border:1px solid var(--line2);border-radius:14px;background:rgba(10,10,11,.6);opacity:0;animation:reel 20s infinite}
.wk-reel li:nth-child(1){opacity:1;animation-delay:0s}.wk-reel li:nth-child(2){animation-delay:5s}.wk-reel li:nth-child(3){animation-delay:10s}.wk-reel li:nth-child(4){animation-delay:15s}
@keyframes reel{0%{opacity:0;transform:translateX(14px)}3%,22%{opacity:1;transform:none}25%,100%{opacity:0;transform:translateX(-14px)}}
.wk-d{font:500 12px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
.wk-reel b{font:500 28px/1.1 var(--serif)}
.wk-reel span:last-child{color:var(--muted);font-size:16px}
.wk-bar{height:2px;margin:0 0 16px;background:var(--line)}
.wk-bar i{display:block;height:100%;background:var(--silver);transform-origin:0 50%;animation:wkbar 20s linear infinite}
@keyframes wkbar{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.week .btn{width:100%}

/* sticky book bar on Begin (phones and tablets) */
.bookbar{position:fixed;left:0;right:0;bottom:0;z-index:15;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px var(--pad) calc(10px + env(safe-area-inset-bottom,0));background:linear-gradient(rgba(10,10,11,.6),rgba(10,10,11,.96) 30%);border-top:1px solid var(--line2);transform:translateY(110%);transition:transform .35s ease}
.bookbar.show{transform:none}
.bookbar span{font-size:16px;color:var(--muted)}.bookbar b{font:500 22px/1 var(--serif);color:var(--ink)}
.bookbar .btn{min-height:46px;padding:0 18px;font-size:16px;white-space:nowrap}
#s-begin:not(.on) .bookbar{display:none}

/* tickets: tick themselves off, tap to expand */
.ticket .tx summary{list-style:none;cursor:pointer;position:relative;padding-right:22px}
.ticket .tx summary::-webkit-details-marker{display:none}
.ticket .tx p{margin:6px 0 0;color:var(--muted);font-size:16px;line-height:1.45}
.more-i{position:absolute;right:0;top:4px;width:14px;height:14px}
.more-i::before,.more-i::after{content:"";position:absolute;left:0;top:6px;width:12px;height:1px;background:var(--silver);transition:transform .25s ease}
.more-i::after{transform:rotate(90deg)}
.tx[open] .more-i::after{transform:rotate(0)}
.tick{position:absolute;left:50%;bottom:8px;width:16px;height:9px;margin-left:-8px;border:solid #eef2f6;border-width:0 0 1.5px 1.5px;transform:rotate(-45deg) scale(1);opacity:.9}
#s-how.on .tick{animation:tickIn .45s calc(var(--n) * .45s + .5s) cubic-bezier(.3,1.5,.5,1) both}
@keyframes tickIn{from{opacity:0;transform:rotate(-45deg) scale(.2)}to{opacity:.9;transform:rotate(-45deg) scale(1)}}
.stub b{margin-bottom:12px}

/* add-ons: a swipe row with snap and dots (a 3-up grid on desktop) */
.addons{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 calc(var(--pad) * -1);padding:4px var(--pad) 8px;scrollbar-width:none}
.addons::-webkit-scrollbar{display:none}
.addon{flex:0 0 78%;scroll-snap-align:center;position:relative;padding:18px;border:1px solid var(--line2);border-radius:16px;background:var(--leather);box-shadow:var(--bevel)}
.addon:nth-child(1){transform:rotate(-.6deg)}.addon:nth-child(2){transform:rotate(.5deg)}.addon:nth-child(3){transform:rotate(-.4deg)}
.addon::after{content:"";position:absolute;inset:6px;border:1px dashed var(--seam);border-radius:12px;pointer-events:none}
.addon h3{margin:12px 0 6px;font:500 24px/1.15 var(--serif)}
.addon p{margin:0;color:var(--muted);font-size:16px;line-height:1.45}
.addon .ad-price{margin-top:12px;color:var(--ink);font:500 26px/1 var(--serif)}
.addon .ad-price small{font:500 13px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
.ad-loop{position:relative;height:70px;display:flex;align-items:center;gap:12px}
.ad-loop svg{width:56px;height:56px;fill:none;stroke:#e6ebf1;stroke-width:1.3;stroke-linejoin:round;stroke-linecap:round}
.ad-loop svg *{stroke-dasharray:1;animation:adraw 6s ease-in-out infinite}
@keyframes adraw{0%{stroke-dashoffset:1}40%,85%{stroke-dashoffset:0}100%{stroke-dashoffset:0;opacity:.3}}
.lv{display:flex;align-items:flex-end;gap:4px;height:30px}
.lv i{width:4px;height:100%;background:#e6ebf1;border-radius:2px;transform-origin:50% 100%;animation:lv 1.2s ease-in-out infinite alternate}
.lv i:nth-child(2){animation-delay:-.3s}.lv i:nth-child(3){animation-delay:-.6s}.lv i:nth-child(4){animation-delay:-.9s}
@keyframes lv{from{transform:scaleY(.25)}to{transform:scaleY(1)}}
.dots{display:flex;justify-content:center;gap:8px;margin:8px 0 0}
.dots i{width:7px;height:7px;border-radius:50%;border:1px solid var(--silver);transition:background .25s ease}
.dots i.on{background:var(--silver)}

/* FAQ accordion */
.faq details{border-top:1px solid var(--line2)}
.faq details:last-child{border-bottom:1px solid var(--line2)}
.faq summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:56px;padding:12px 0;font:500 21px/1.3 var(--serif);cursor:pointer}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:10px;height:10px;border:solid var(--silver);border-width:0 1px 1px 0;transform:rotate(45deg);transition:transform .25s ease}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq p{margin:0 0 16px;color:var(--muted);font-size:16px}

/* the signature moment: a silver wax seal presses onto the sentence, the letter folds and slides into the plan */
.letter{position:fixed;inset:0;z-index:25;display:none;place-items:center;pointer-events:none;perspective:900px;background:rgba(6,6,7,.0);transition:background .3s ease}
.letter.show{display:grid;background:rgba(6,6,7,.6)}
.paper{position:relative;width:min(340px,86vw);padding:30px 24px 34px;border-radius:6px;transform-origin:50% 100%;
  background:var(--herring),linear-gradient(170deg,#ffffff,#eceef0);color:#0a0a0b;box-shadow:0 30px 60px rgba(0,0,0,.6);animation:paperIn .35s ease backwards;transition:transform .5s ease,opacity .45s ease-in}
.paper .flap{position:absolute;left:0;right:0;top:0;height:50%;transform-origin:50% 0;background:linear-gradient(180deg,rgba(0,0,0,.08),transparent);border-radius:6px 6px 0 0}
.l-k{margin:0 0 10px;font:600 12px/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:#5b5f64}
.l-line{margin:0 0 12px;font:italic 500 26px/1.25 var(--serif)}
.l-name{margin:0;font:600 15px/1 var(--sans);color:#3c4045}
.l-seal{position:absolute;left:50%;top:50%;width:96px;height:96px;margin:30px 0 0 -48px;opacity:0;filter:drop-shadow(0 6px 10px rgba(0,0,0,.55))}
.l-shine{position:absolute;left:50%;top:50%;width:96px;height:96px;margin:30px 0 0 -48px;border-radius:50%;opacity:0;background:linear-gradient(120deg,transparent 35%,rgba(255,255,255,.55) 50%,transparent 65%);-webkit-mask:radial-gradient(closest-side,#000 80%,transparent);mask:radial-gradient(closest-side,#000 80%,transparent)}
.letter.press .l-seal{animation:press .5s cubic-bezier(.2,.9,.3,1.2) forwards}
.letter.press .l-shine{animation:shine .6s .4s ease forwards}
.letter.fold .paper{transform:rotateX(62deg) scaleY(.52)}
.letter.fold .l-seal{animation:none;opacity:1;transform:translateY(-30px) scale(.66) rotate(-4deg);transition:transform .45s ease}
.letter.slide .paper{transform:translateY(46vh) rotateX(62deg) scale(.4);opacity:0;transition:transform .45s ease-in,opacity .45s ease-in}
.letter.slide .l-seal{animation:none;transform:translateY(46vh) scale(.3);opacity:0;transition:transform .45s ease-in,opacity .45s ease-in}
@keyframes paperIn{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}
@keyframes press{0%{opacity:0;transform:scale(1.7) rotate(-14deg)}55%{opacity:1;transform:scale(.92) rotate(-3deg);filter:drop-shadow(0 1px 2px rgba(0,0,0,.6))}75%{transform:scale(1.04) rotate(-4deg)}100%{opacity:1;transform:scale(1) rotate(-4deg);filter:drop-shadow(0 3px 5px rgba(0,0,0,.5))}}
@keyframes shine{0%{opacity:0;transform:translateX(-30px)}40%{opacity:1}100%{opacity:0;transform:translateX(30px)}}

/* footer disclaimer */
.foot .disc{flex-basis:100%;font-size:16px;color:var(--faint)}

/* desktop: built for the width */
@media (min-width:1024px){
  .counters{grid-template-columns:repeat(4,1fr)}
  .counters b{font-size:36px}
  .addons{display:grid;grid-template-columns:repeat(3,1fr);overflow:visible;margin:0;padding:0}
  .addon{transform:none!important}
  .addon h3{font-size:21px}
  .dots{display:none}
  .opt:hover,.ticket:hover,.addon:hover,.coachband:hover{border-color:rgba(223,228,234,.5);transform:translateY(-2px)}
  .opt,.ticket,.addon,.coachband{transition:border-color .2s ease,transform .2s ease}
  .bookbar{display:none}
  .marquee,.drills{margin-left:calc(var(--pad) * -1);margin-right:calc(var(--pad) * -1)}
  .phone{width:220px;float:right;margin:0 0 12px 18px}
  .ph-screen{height:270px}
  .ph-time{font-size:42px}
}
@media (prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none}
  .cycle i{opacity:0}.cycle i:nth-child(1){opacity:1}
  .wk-reel li{opacity:0}.wk-reel li:nth-child(1){opacity:1}
  .motes,.sweep,.beams{display:none}
  .letter.show .l-seal{opacity:1}
}
.nw{white-space:nowrap}
@media (min-width:1024px){ .foot{flex-wrap:nowrap;align-items:center;gap:18px} .foot .disc{flex-basis:auto;margin-left:auto;font-size:14px} .foot>span:nth-child(2){order:3} }
/* hero words: the scrim rides with the words, so they read on every screen size */
@media (max-width:1023px){
  #s-begin .hero::after{background:linear-gradient(180deg,rgba(10,10,11,.45),transparent 16%,transparent 70%,var(--bg) 100%)}
  #s-begin .intro{position:relative}
  #s-begin .intro::before{content:"";position:absolute;z-index:-1;left:calc(var(--pad) * -1);right:calc(var(--pad) * -1);top:calc(100% - var(--copy-h, 100%) - 110px);bottom:0;pointer-events:none;
    background:linear-gradient(180deg,rgba(10,10,11,0),rgba(10,10,11,.82) 110px,rgba(10,10,11,.9) 60%,var(--bg))}
  #s-begin .intro .eyebrow{color:#c9ced6}
}
@media (min-width:700px) and (max-width:1023px){ #s-begin .intro::before{left:calc(50% - 50vw);right:calc(50% - 50vw)} }

/* long pages: anything scrolled out of view holds still */
.off,.off *,.off ::before,.off ::after{animation-play-state:paused!important}
@media (max-width:1023px){ .beams{width:120vmax;height:120vmax;margin:-60vmax 0 0 -60vmax} }
.bookbar:not(.show){visibility:hidden;transition:transform .35s ease,visibility 0s .35s}

/* while the splash plays, the page underneath holds still (it's covered anyway) */
.splashing .room *,.splashing #flow *,.splashing #flow *::before,.splashing #flow *::after{animation-play-state:paused!important}
.sp-clear{background:radial-gradient(closest-side,rgba(226,230,234,.07),rgba(0,0,0,.86) 34%,rgba(0,0,0,.86) 52%,rgba(0,0,0,.55) 74%,transparent)}

/* small phones (and large text): a shorter header button that keeps a 16 px gutter */
.pl-short{display:none}
.count{min-width:0;overflow:hidden;text-overflow:clip;white-space:nowrap}
@media (max-width:360px){
  :root{--pad:16px}
  .top{gap:10px}
  .planlink{padding:0 12px;flex:none}
  .pl-full{display:none}.pl-short{display:inline}
}
/* the comparison never pushes past a small phone */
.vs{table-layout:fixed;-webkit-hyphens:auto;hyphens:auto;overflow-wrap:break-word}
.vs th:first-child{width:31%}
@media (max-width:360px){ .vs th,.vs td{padding:11px 7px} }

/* ---------- Oxford, re-tuned (Josiah, Oct 19): neutral white, black and gray; bright polished silver is the star ---------- */
/* polished silver on rules and dividers */
.cuff::before{background:linear-gradient(90deg,transparent,rgba(233,237,241,.75))}
.cuff::after{background:linear-gradient(90deg,rgba(233,237,241,.75),transparent)}
.cuff i{background:radial-gradient(circle at 6px 6px,#ffffff 0 3px,#9da3aa 3.6px,transparent 4.4px),radial-gradient(circle at 24px 6px,#ffffff 0 3px,#9da3aa 3.6px,transparent 4.4px),linear-gradient(#dce1e6,#dce1e6) center/12px 1px no-repeat}
.prog i{background:var(--polish)}
.tape-fill{border-right-color:#ffffff}
.pull{border-left-color:#dce1e6}
.mark{background:linear-gradient(180deg,#3a3d41,#16171a);border-color:rgba(233,237,241,.45)}
.btn{background:linear-gradient(180deg,#ffffff,#e4e8ec 60%,#d3d8dd);border-color:#ffffff;color:#0a0a0b}
.glow{color:#ffffff;text-shadow:0 0 10px rgba(233,237,241,.4),0 0 26px rgba(220,225,230,.16)}

/* white-ground moments: the plan card and the sealed letter are white paper with black type */
.plan{background:linear-gradient(180deg,#ffffff,#f1f3f5);color:#0a0a0b;border-color:#ffffff;box-shadow:0 22px 50px rgba(0,0,0,.55),inset 0 -1px 0 #dce1e6}
.plan::after{border-color:rgba(10,10,11,.16)}
.plan .k{color:#55595e}
.plan .amt,.plan .amt.sm{color:#0a0a0b}
.plan .amt small,.plan .sub{color:#45494e}
.plan .glow{color:#0a0a0b;text-shadow:0 0 1px rgba(10,10,11,.2),0 2px 14px rgba(157,163,170,.55)}
.plan li{color:#1e1f21}
.plan li::before{border-color:#55595e}
.plan .cuff::before{background:linear-gradient(90deg,transparent,rgba(10,10,11,.28))}
.plan .cuff::after{background:linear-gradient(90deg,rgba(10,10,11,.28),transparent)}
.plan .cuff i{background:radial-gradient(circle at 6px 6px,#9da3aa 0 3px,#55595e 3.6px,transparent 4.4px),radial-gradient(circle at 24px 6px,#9da3aa 0 3px,#55595e 3.6px,transparent 4.4px),linear-gradient(#55595e,#55595e) center/12px 1px no-repeat}
.plan .card{color:#2a2c2f;background:#e9ecef;border-color:#dce1e6}
.plan .card i{background:var(--polish);box-shadow:inset 0 0 0 1px rgba(10,10,11,.15)}
.plan .pour{border-bottom-color:#dce1e6}
.paper{background:linear-gradient(170deg,#ffffff,#eef0f2)}
/* fix pass Oct 19: row labels get a little more room on phones and "Accountability" breaks with a hyphen, never mid-word */
@media (max-width:430px){ .vs th:first-child{width:36%} }

/* 2026-10-24: while the splash holds the first screen at its slide-in start (translateX 18px), clip it so the page never scrolls sideways */
.splashing #flow{overflow-x:clip}
/* 2026-10-29 tune: the same clip at all times. Each screen's 18px slide-in (and the crest glow) widened the phone layout by 10-20px at 390-430, so the page loaded a little zoomed out and could drift sideways */
#flow{overflow-x:clip}

/* ---------- hero, phones (2026-10-29, v2 per Josiah): the polished-silver AS crest is the hero; the words sit smaller under it and rise in. Light: one slow sweep across the metal every 7.5 s, a glint on the shoulder, a faint breathing glow ---------- */
.as-hmark{display:none}
/* 2026-10-29 tune: the crest glow is capped at 96vw so it never widens the page (it pushed phones 10-20 px sideways at 390-430 while loading) */
@media (max-width:699px){
  #s-begin .intro{padding-top:calc(var(--top) + 14px)}
  #s-begin .photo-crest,#s-begin .onphoto,#s-begin .fx-chip.tl{display:none}
  #s-begin .hd.hero-big{font-size:clamp(26px,9.3vw,40px);line-height:1.06;margin-bottom:10px}
  .hero-big .tg{white-space:nowrap}
  /* 06g: the hero eyebrow and headline sit centred under the crest (the lead below stays left) */
  #s-begin .intro .eyebrow,#s-begin .hd.hero-big{text-align:center}
  #s-begin .intro .lead{margin-bottom:12px}
  .hero-big .hw{display:inline-block}
  .hero-big.hw-wait .hw{opacity:0}
  .hero-big.hw-go .hw{animation:hwrise .6s cubic-bezier(.2,.7,.2,1) calc(var(--i,0) * 90ms + .45s) both}
  .screen.on .hero-big.hw-go .glow.hw{animation:hwrise .6s cubic-bezier(.2,.7,.2,1) calc(var(--i,0) * 90ms + .45s) both,glow 6s ease-in-out 1.8s infinite alternate}
  .hero-big.hw-done .hw{animation:none;opacity:1}
  .screen.on .hero-big.hw-done .glow.hw{animation:glow 6s ease-in-out infinite alternate}
  .as-hmark{position:relative;display:flex;flex:none;height:var(--crest);align-items:center;justify-content:center;container-type:size;margin:0 0 10px}
  .as-hmark svg{position:relative;height:min(440px,100cqh);width:auto;aspect-ratio:112/132;filter:drop-shadow(0 6px 18px rgba(0,0,0,.75))}
  .as-glow{position:absolute;left:50%;top:50%;width:min(92cqh,420px,96vw);height:min(92cqh,420px,96vw);transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(closest-side,rgba(226,230,234,.16),rgba(226,230,234,.05) 55%,transparent);pointer-events:none;animation:asbreathe 6s ease-in-out infinite alternate}
  .as-hmark.hw-wait svg,.as-hmark.hw-wait .as-glow{opacity:0}
  .as-hmark.hw-go svg{animation:hwmark 1.2s cubic-bezier(.2,.7,.2,1) both}
}
@keyframes hwrise{from{opacity:0;transform:translateY(.35em)}to{opacity:1;transform:none}}
@keyframes hwmark{from{opacity:0;transform:translateY(12px) scale(.96)}to{opacity:1;transform:none}}
@keyframes asbreathe{from{opacity:.55}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.hero-big .hw,.as-hmark svg,.as-glow{animation:none!important;opacity:1!important}}
/* 2026-10-29 (Josiah's Samsung, in the Showroom): the hero video sometimes painted over the crest and words while it started playing. The words, crest and buttons get their own layer above the film, and the film its own layer below */
@media (max-width:699px){
  #s-begin .fx-walk.hero,#s-begin .panel.media.hero{z-index:0;transform:translateZ(0)}
  #s-begin .intro,#s-begin .as-hmark,#s-begin .actions{position:relative;z-index:3;transform:translateZ(0);isolation:isolate}
}
/* 2026-10-29 (06g, Code Gold fix): below the hero, section eyebrows, headings and text-link CTAs sit centred at every width (inside the right-hand panel on desktop); running text, cards, lists and tables stay left */
.more>.eyebrow,.more>.hd,.screen:not(#s-begin) .body>.eyebrow,.screen:not(#s-begin) .body>.hd,.wk-in>.eyebrow,.wk-in>.hd{text-align:center;text-wrap:balance}
.more .textlink{display:table;margin-left:auto;margin-right:auto}

/* Desktop and tablet (Josiah, Oct 30): the AS crest on top of the corridor video, as on phones; the small corner crest goes */
@media (min-width:700px){
  #s-begin figure.hero .as-hmark.lgmark{display:flex;position:absolute;left:0;right:0;top:9%;height:clamp(150px,30vh,280px);z-index:4;align-items:center;justify-content:center;pointer-events:none;container-type:size;margin:0}
  #s-begin figure.hero .as-hmark.lgmark svg{position:relative;height:100cqh;width:auto;aspect-ratio:112/132;filter:drop-shadow(0 6px 18px rgba(0,0,0,.75))}
  #s-begin figure.hero .as-hmark.lgmark .as-glow{position:absolute;left:50%;top:50%;width:min(140cqh,520px);height:min(140cqh,520px);transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(closest-side,rgba(226,230,234,.16),rgba(226,230,234,.05) 55%,transparent);pointer-events:none}
  #s-begin .photo-crest{display:none}
}


/* ======================================================================================================
   2026-11-05 · REBUILD (Josiah's Android: "rebuild that entire card from scratch"). Phones and tablets (<1024 px).
   Root cause of every glitch: the first screen was sized from the viewport (100svh intro, flex:1 crest, max-height steps)
   and alpha.js re-measured it against innerHeight on every resize, which Chrome fires each time its toolbar slides,
   so the crest, words, Start / See the plan and the word strip moved 50-60 px up and down mid-scroll.
   Now: one document scroll, no viewport-height sizing anywhere on the Begin screen, no JS that sizes anything.
   The hero film sits in the same grid row as the words, so it is exactly as tall as the words, whatever the screen.
   The crest size comes from the width only (plus .as-big / .as-framed, set once at load from the text size and the frame).
   ====================================================================================================== */
@media (max-width:1023px){
  #s-begin{--intro-pt:calc(var(--top) + 14px)}
  #s-begin.on{display:grid;grid-template-columns:minmax(var(--pad),1fr) minmax(0,660px) minmax(var(--pad),1fr);align-content:start;padding:0}
  #s-begin>.body{display:contents}
  #s-begin>.body>*{grid-column:2;position:relative;z-index:1}
  #s-begin>.hero{grid-column:1/-1;grid-row:1;align-self:stretch;height:auto;min-height:0;aspect-ratio:auto;margin:0;z-index:0}
  #s-begin>.hero>.fx{position:absolute;inset:0}
  #s-begin>.body>.intro{grid-row:1;z-index:3;min-height:0;justify-content:flex-start;padding:var(--intro-pt) 0 10px}
  #s-begin>.body>:last-child{margin-bottom:28px}
  /* the scrim under the words starts just above the eyebrow: pure CSS now (crest height is known) */
  #s-begin .intro::before{top:calc(var(--intro-pt) + var(--crest) - 100px)}
  /* the word strip: fixed line box, room above and below the italic glyphs, never clipped */
  #s-begin .marquee{height:auto;padding:13px 0;margin-top:8px;margin-bottom:10px}
  #s-begin .marquee .mq-track span{line-height:1.25;padding:0 1px}
  /* reveals fade only: nothing slides under the thumb while scrolling */
  .rv{transform:none!important}
  /* the slim bar keeps one height and fades (no slide) */
  .bookbar{transform:none;opacity:0;transition:opacity .3s ease,visibility 0s .3s}
  .bookbar.show{opacity:1;transition:opacity .3s ease}
  .bookbar:not(.show){visibility:hidden;transition:opacity .3s ease,visibility 0s .3s}
  /* the tablet copy of the crest on the film is desktop-only now; tablets use the in-flow crest */
  #s-begin figure.hero .as-hmark.lgmark{display:none}
}
/* phones */
@media (max-width:699px){
  #s-begin{--crest:clamp(118px,40vw,200px)}
  html.as-big #s-begin{--crest:clamp(88px,27vw,140px)}
  html.as-framed #s-begin{--crest:clamp(84px,25vw,132px)}
  html.as-framed.as-big #s-begin{--crest:clamp(46px,13vw,80px);--intro-pt:calc(var(--top) + 6px)}
  html.as-framed #s-begin .cue,html.as-big #s-begin .cue{display:none}
  html.as-big #s-begin .hd.hero-big,html.as-framed #s-begin .hd.hero-big{margin-bottom:8px}
  html.as-framed.as-big #s-begin .hd.hero-big{font-size:clamp(21px,7.4vw,30px)}
  html.as-framed.as-big #s-begin .intro .lead{font-size:15px;line-height:1.4;margin-bottom:8px}
  html.as-framed.as-big #s-begin .intro .eyebrow{margin-bottom:6px}
  html.as-framed.as-big #s-begin .actions{gap:8px}
  html.as-framed.as-big #s-begin .actions .btn{min-height:46px}
}
/* tablets: the same in-flow crest as phones, a size up */
@media (min-width:700px) and (max-width:1023px){
  #s-begin{--crest:clamp(170px,26vw,260px);--intro-pt:calc(var(--top) + 30px)}
  html.as-framed #s-begin{--crest:clamp(120px,18vw,190px)}
  #s-begin .as-hmark:not(.lgmark){position:relative;display:flex;flex:none;height:var(--crest);align-items:center;justify-content:center;container-type:size;margin:0 0 14px}
  #s-begin .as-hmark:not(.lgmark) svg{position:relative;height:100cqh;width:auto;aspect-ratio:112/132;filter:drop-shadow(0 6px 18px rgba(0,0,0,.75))}
  #s-begin .as-hmark:not(.lgmark) .as-glow{position:absolute;left:50%;top:50%;width:min(130cqh,520px);height:min(130cqh,520px);transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(closest-side,rgba(226,230,234,.16),rgba(226,230,234,.05) 55%,transparent);pointer-events:none}
  #s-begin .intro .eyebrow,#s-begin .hd.hero-big{text-align:center}
  #s-begin .intro .actions{max-width:460px;width:100%;margin-left:auto;margin-right:auto}
}
/* inside the Showroom frame: the Showroom carries the deposit bar, so Alpha's own slim bar stays off, and the frame's scrollbar is hidden */
html.as-framed .bookbar{display:none!important}
html.as-framed{scrollbar-width:none}
html.as-framed::-webkit-scrollbar{display:none;width:0;height:0}

/* Meet Coach Duke Firmhand: small round portrait with a slowly turning silver ring (the homepage's founder link, in Alpha's metal) */
.as-founder{display:flex;justify-content:center;margin:22px 0 4px}
.as-founder a{display:inline-flex;align-items:center;gap:12px;min-height:52px;color:var(--ink);text-decoration:none;font-size:16px;font-weight:600;letter-spacing:.02em}
.as-founder-ph{position:relative;flex:none;width:44px;height:44px;border-radius:50%;padding:2px;background:conic-gradient(from var(--as-a,0deg),rgba(244,245,246,.95),rgba(157,163,170,.15) 35%,rgba(220,225,230,.7) 60%,rgba(157,163,170,.15) 85%,rgba(244,245,246,.95));animation:as-ring 9s linear infinite}
.as-founder-ph img{display:block;width:40px;height:40px;border-radius:50%;object-fit:cover;filter:grayscale(.35)}
.as-founder-t{border-bottom:1px solid rgba(220,225,230,.4);padding-bottom:2px;transition:border-color .2s ease,color .2s ease}
.as-founder a:hover .as-founder-t,.as-founder a:focus-visible .as-founder-t{color:#fff;border-bottom-color:var(--silver)}
@property --as-a{syntax:'<angle>';inherits:false;initial-value:0deg}
@keyframes as-ring{to{--as-a:360deg}}
@media (min-width:700px){.as-founder-ph{width:60px;height:60px;padding:3px}.as-founder-ph img{width:54px;height:54px}.as-founder a{font-size:17px;gap:14px;min-height:68px}}
@media (prefers-reduced-motion:reduce){.as-founder-ph{animation:none}}

/* 2026-11-09 (Josiah's Samsung screen recording, in the carousel preview): the hero words blinked on and off while
   the floor line looped. Cause: layers fighting. The looping floor line (drop-shadow, infinite), the breathing crest glow and the
   glowing "meant" repainted every frame, while three earlier patches forced the words, crest, buttons, film and line onto separate
   GPU layers; Android in a frame dropped the word layer on each repaint. In the carousel preview (as-framed) only: no forced
   layers, nothing loops on the first screen, the floor line sits drawn and still. The full site is unchanged. */
html.as-framed #s-begin .fx-walk.hero,html.as-framed #s-begin .panel.media.hero,
html.as-framed #s-begin .intro,html.as-framed #s-begin .as-hmark,html.as-framed #s-begin .actions{transform:none;isolation:auto;will-change:auto}
html.as-framed #s-begin .fx-walk path{animation:none;stroke-dashoffset:0}
html.as-framed #s-begin .as-glow{animation:none;opacity:.8}
html.as-framed #s-begin .hero-big .glow.hw,html.as-framed .screen.on #s-begin .hero-big .glow.hw,html.as-framed #s-begin.screen.on .hero-big.hw-done .glow.hw{animation:none;text-shadow:0 0 10px rgba(226,230,234,.3),0 0 26px rgba(226,230,234,.12)}
html.as-framed #s-begin .as-hmark.hw-go svg{animation:none}
html.as-framed #s-begin .foilbtn::after,html.as-framed #s-begin .as-founder-ph{animation:none}
html.as-framed #s-begin .foilbtn::after{opacity:0}
/* 2026-11-09 (still blinking in the carousel only): the fixed .room layer (rotating beams, 60px-blurred haze, sweep, motes, watermark)
   kept animating behind the hero inside the frame; a fixed, blurred, animated layer in a scrolling iframe is what Android drops.
   In the carousel preview only it is removed (the page's own dark background stays), along with the floor line and the word-strip mask. */
html.as-framed .room{display:none}
html.as-framed #s-begin .fx-walk{display:none}
html.as-framed #s-begin .marquee{-webkit-mask-image:none;mask-image:none}