/* Home page (4D flight + night reveal). Origin: direction 5. A film: graphite, letterbox bars that carry the interface, teal and orange grade. Overlays animate transform/opacity only. */
.home{
  --d-bg:#0a0b0e;--d-fg:#ece8df;--d-accent:#ff9a3c;--d-on-accent:#150d05;--d-card:#14171c;--d-line:rgba(236,232,223,.3);
  --d-radius:4px;--d-radius-in:4px;--d-input:#0f1216;--d-font:'Instrument Sans',system-ui,-apple-system,'Segoe UI',sans-serif;--d-err:#ff9b8a;--d-focus:#4fd1c5;
  --teal:#4fd1c5;--org:#ff9a3c;--mute:#d0cdc5;--mono:'Space Mono',ui-monospace,Menlo,monospace;--rv:var(--rv-h,0px);
  font-family:var(--d-font);font-weight:400;letter-spacing:.005em;
}
.home h1,.home h2,.home h3{font-weight:600;letter-spacing:-.02em;line-height:1.04;margin:0}
.home .slug{font-family:var(--mono);font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--teal);margin:0}
.home p{margin:0}
.home .ref{background:#14171c;border-bottom:1px solid var(--d-line);padding:.7rem 16px;text-align:center;font-size:.95rem}
.home .dbtn{font-weight:600;letter-spacing:.02em;border-radius:3px}
.home .dbtn:not(.ghost){box-shadow:0 8px 24px -8px rgba(0,0,0,.7)}
.home .dbtn.ghost{box-shadow:inset 0 0 0 1px rgba(236,232,223,.6)}
.home .dbtn.ghost:hover{box-shadow:inset 0 0 0 1px var(--teal);color:var(--teal)}

/* ---------- the film: tall runway + sticky screen ---------- */
.film{position:relative;height:500vh;background:#000}
.film.own{height:320vh}
.stick{position:sticky;top:var(--rv);height:calc(100vh - var(--rv));height:calc(100svh - var(--rv));overflow:hidden;background:#07080a;
  --bar:clamp(60px,9svh,92px);--n:0;--p:0;--sp:0;--zk:0;--q:0;isolation:isolate;contain:layout paint}
.poster,.cv,.final{position:absolute;inset:0;width:100%;height:100%}
.poster{object-fit:cover;transition:opacity .9s ease;filter:saturate(1.08) contrast(1.04)}
.cv{opacity:0;transition:opacity .9s ease;touch-action:pan-y;display:block;transform-origin:50% 50%;will-change:transform}
.film.live .cv{opacity:1}.film.live .poster{opacity:0}
.film:not(.own) .cv{animation:breathe 9s ease-in-out infinite alternate}
@keyframes breathe{from{transform:scale(1)}to{transform:scale(1.022)}}
.final{pointer-events:none;opacity:0;display:grid;place-items:center;background:radial-gradient(120% 90% at 50% 50%,#1b1d22 0%,#0a0b0e 75%);will-change:opacity}
.final img{position:absolute;height:calc(100% - 16px);width:auto;max-width:none;transform-origin:50% 50%;transform:translate(calc(var(--ftx,0) * 1px),calc(var(--fty,0) * 1px)) scale(var(--fs,1));box-shadow:0 30px 120px rgba(0,0,0,.7);transition:opacity .6s ease;will-change:transform}
#finalEve{opacity:0}.film.eve #finalEve{opacity:1}
.fx{position:absolute;inset:0;pointer-events:none}
.grade{background:linear-gradient(180deg,rgba(18,120,130,.30),rgba(18,120,130,0) 42%,rgba(255,120,30,.24));mix-blend-mode:soft-light;opacity:calc(.55 + var(--n) * .45)}
.leak{background:radial-gradient(60% 70% at 4% 18%,rgba(255,150,60,.55),rgba(255,150,60,0) 62%),radial-gradient(50% 60% at 100% 100%,rgba(40,200,190,.32),transparent 60%);mix-blend-mode:screen;opacity:calc(.08 + var(--gold,0) * .5)}
.flare i{position:absolute;left:12%;right:12%;height:34px;top:var(--fy,52%);margin-top:-17px;background:radial-gradient(50% 50% at 50% 50%,rgba(160,220,255,.6),rgba(160,220,255,0) 72%);mix-blend-mode:screen;opacity:calc(var(--n) * .55)}
.flare i+i{top:calc(var(--fy,52%) + 18%);height:26px;background:radial-gradient(50% 50% at 50% 50%,rgba(255,175,90,.55),rgba(255,175,90,0) 72%);opacity:calc(var(--n) * .3 + var(--gold,0) * .35);left:22%;right:22%}
.vig{background:radial-gradient(95% 100% at 50% 48%,transparent 38%,rgba(0,0,0,.78) 100%)}
.grain{background:url(/assets/d/n5_grain.png);opacity:.07;mix-blend-mode:overlay;animation:grain .7s steps(5) infinite}
@keyframes grain{0%{background-position:0 0}20%{background-position:-60px 40px}40%{background-position:90px -70px}60%{background-position:-30px -110px}80%{background-position:70px 60px}100%{background-position:0 0}}

/* title sequence: black -> streak -> the slab emerges -> title resolves (starts when .go is set) */
.black{background:#000;opacity:0;z-index:3}
.black{opacity:.7}
.go .black{animation:unveil 2.4s cubic-bezier(.3,0,.2,1) forwards}
@keyframes unveil{0%{opacity:.7}100%{opacity:0}}
.poster{transform-origin:50% 46%;transform:scale(calc(1.28 + var(--sp) * 1.6))}
.go .poster{animation:pdesc 5.6s cubic-bezier(.2,.6,.2,1) backwards}
@keyframes pdesc{from{transform:scale(1.7)}to{transform:scale(1.28)}}
.streak{z-index:4;display:grid;place-items:center}
.streak i{display:block;width:100%;height:46px;background:radial-gradient(50% 50% at 50% 50%,rgba(220,240,255,.95),rgba(140,205,255,.35) 30%,rgba(120,190,255,0) 72%);opacity:0;transform:scaleX(.05)}
.go .streak i{animation:streak 2.4s cubic-bezier(.3,.6,.2,1) .1s both}
@keyframes streak{0%{opacity:0;transform:scaleX(.05)}25%{opacity:1}60%{opacity:.9;transform:scaleX(1.1)}100%{opacity:0;transform:scaleX(1.4)}}

/* letterbox bars carry the interface */
.bar{position:absolute;left:0;right:0;height:var(--bar);background:#000;z-index:5;display:flex;align-items:center;padding:0 clamp(16px,3vw,44px);gap:16px;will-change:transform}
.bar.top{top:0;justify-content:space-between}
.bar.bot{bottom:0;display:grid;grid-template-columns:1fr auto;align-content:center;row-gap:8px;column-gap:16px}
.brand{font-weight:600;font-size:1.02rem;text-decoration:none;color:var(--d-fg);letter-spacing:.01em;flex:none}
.nav{display:flex;gap:clamp(12px,2.4vw,34px);margin:0 auto}
.nav a{font-family:var(--mono);font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;color:var(--d-fg);padding:14px 4px}
.nav a b{font-weight:400;color:var(--org)}.nav a:hover{color:var(--teal)}
.dbtn.mini{min-height:44px;padding:.5em 1.1em;font-size:.9rem;flex:none}
.where{font-family:var(--mono);font-size:.78rem;letter-spacing:.06em;color:var(--mute)}
.sample{position:absolute;z-index:4;left:clamp(16px,3vw,44px);top:calc(var(--bar) + 12px);font-family:var(--mono);font-size:.75rem;letter-spacing:.04em;color:#e4e0d6;text-shadow:0 1px 10px rgba(0,0,0,.95),0 0 2px rgba(0,0,0,.9);max-width:calc(100% - 32px);line-height:1.35;opacity:calc(1 - var(--q) * 3)}
.bar .slug{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}
.tc{font-family:var(--mono);font-size:.78rem;color:var(--mute);justify-self:end}
.tl{grid-column:1/-1;grid-row:2;height:2px;background:rgba(236,232,223,.18);position:relative;overflow:hidden}
.tl i{position:absolute;inset:0;background:linear-gradient(90deg,var(--teal),var(--org));transform-origin:0 50%;transform:scaleX(var(--p));will-change:transform}
.bar.bot .slug{grid-row:1}.bar.bot .tc{grid-row:1;grid-column:2}

/* the title card */
.intro{position:absolute;z-index:4;left:0;right:0;top:var(--bar);bottom:var(--bar);margin:0 auto;max-width:min(52rem,calc(100% - 32px));padding:0 0 clamp(14px,3vh,30px);text-align:center;display:grid;grid-template-rows:1fr auto;justify-items:center;opacity:calc(1 - var(--sp) * 12);transform:translateY(calc(var(--sp) * -240px));will-change:transform,opacity}
.tb{align-self:center;display:grid;gap:clamp(10px,1.6vh,16px);justify-items:center;position:relative;padding-top:2vh}
.tb .slug{color:#8ff3e8;text-shadow:0 1px 14px rgba(0,0,0,.95),0 0 3px rgba(0,0,0,.9);letter-spacing:.2em}
.tb::before{content:'';position:absolute;inset:-40% -40%;z-index:-1;background:radial-gradient(closest-side,rgba(5,6,8,.72),rgba(5,6,8,0));pointer-events:none}
.ac{display:grid;gap:clamp(8px,1.4vh,14px);justify-items:center;position:relative;width:100%}
.ac::before{content:'';position:absolute;inset:-150px -60vw -40px;z-index:-1;background:linear-gradient(rgba(5,6,8,0),rgba(5,6,8,.88) 45%);pointer-events:none}
.intro h1{font-size:clamp(2.8rem,7vw,6rem);line-height:.96;text-shadow:0 4px 40px rgba(0,0,0,.55)}
.h1like{font-weight:600;font-size:clamp(2.2rem,5vw,4rem);letter-spacing:-.02em;text-shadow:0 4px 30px rgba(0,0,0,.6)}
.ln{display:block;overflow:hidden;padding-bottom:.06em}.ln>span{display:block}
.intro .lead{font-size:clamp(1rem,1.5vw,1.2rem);color:#ebe7dd;max-width:32rem;text-shadow:0 2px 20px rgba(0,0,0,.9)}
.quick{display:flex;gap:10px;width:min(34rem,100%);margin-top:4px}
.quick input{flex:1 1 auto;min-width:0;min-height:52px;padding:0 14px;font:inherit;font-size:1rem;background:rgba(6,7,9,.94);color:#fff;border:1.5px solid rgba(255,255,255,.85);border-radius:3px}
.quick input::placeholder{color:#d9d5cb;opacity:1}
.quick .dbtn{flex:none}
.priceline{font-size:.92rem;color:#e0dcd2;text-shadow:0 1px 12px rgba(0,0,0,.9)}.priceline b{color:var(--org);font-weight:600}
.cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:4px;justify-content:center}
.hint{font-family:var(--mono);font-size:.78rem;letter-spacing:.34em;padding-left:.34em;color:#ddd9cf;text-transform:uppercase;display:flex;flex-direction:column;align-items:center;gap:8px;margin-top:6px}
.arrow{position:relative;width:1px;height:36px;background:linear-gradient(rgba(255,154,60,.7),transparent);overflow:visible}
.arrow::after{content:'';position:absolute;left:-2px;top:0;width:5px;height:5px;border-radius:50%;background:var(--org);animation:cue 2s cubic-bezier(.5,0,.3,1) infinite}
@keyframes cue{0%{transform:translateY(0);opacity:0}25%{opacity:1}100%{transform:translateY(34px);opacity:0}}
.go .tb>*,.go .ac>*{animation:rise 1.1s cubic-bezier(.2,.7,.2,1) var(--d,0s) both}
.go .tb>.slug{--d:.8s}.go .tb>.lead{--d:1.9s}.go .ac>.quick{--d:2.3s}.go .ac>.priceline{--d:2.6s}.go .ac>.cta{--d:2.8s}.go .ac>.hint{--d:4.6s}
.go .tb>h1{animation:none}.go .ln>span{animation:lift 1.2s cubic-bezier(.2,.8,.1,1) both}.go .ln:nth-child(1)>span{animation-delay:1.1s}.go .ln:nth-child(2)>span{animation-delay:1.45s}
.go .sample{animation:rise 1s ease 3s both}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes lift{from{transform:translateY(105%)}to{transform:none}}

.subs{position:absolute;z-index:4;left:0;right:0;bottom:calc(var(--bar) + clamp(14px,3.2vh,34px));text-align:center;padding:0 clamp(16px,6vw,120px);pointer-events:none;opacity:calc(1 - var(--q) * 3)}
.subs span{display:inline-block;font-weight:600;font-size:clamp(1.1rem,2.1vw,1.7rem);letter-spacing:-.005em;color:#fff;text-shadow:0 2px 24px rgba(0,0,0,.95),0 0 2px rgba(0,0,0,.9);transition:opacity .5s ease,transform .5s ease;max-width:36ch}
.subs span.out{opacity:0;transform:translateY(6px)}
.landed{position:absolute;z-index:6;right:clamp(16px,4vw,64px);bottom:clamp(20px,5vh,48px);display:grid;gap:12px;justify-items:start;max-width:min(21rem,calc(100% - 32px));opacity:0;pointer-events:none;transition:opacity .6s;background:rgba(0,0,0,.62);padding:16px 18px;border-left:2px solid var(--org)}
.film.landed-on .landed{opacity:1;pointer-events:auto}
.landed .big{font-weight:600;font-size:1.3rem;line-height:1.15}
.sampleN{font-family:var(--mono);font-size:.75rem;color:var(--mute);line-height:1.4}
.toggle{display:flex;border:1px solid var(--d-line)}
.tg{font:inherit;font-family:var(--mono);font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--d-fg);background:transparent;border:0;padding:0 18px;min-height:44px;cursor:pointer}
.tg.on{background:var(--d-fg);color:#0a0b0e}
.home .dbtn.cap{position:absolute;z-index:6;right:clamp(16px,3vw,44px);top:calc(var(--bar) + 14px);min-height:44px;width:auto;opacity:0;pointer-events:none;transition:opacity .4s}
.film.capon .dbtn.cap{opacity:1;pointer-events:auto}
.own .bar.top{justify-content:space-between}

/* bars slide away when the film lands on the still */
.film:not(.own) .bar{transform:translateY(0)}
.film:not(.own) .bar.top{transform:translateY(calc(var(--q) * -101%))}.film:not(.own) .bar.bot{transform:translateY(calc(var(--q) * 101%))}

/* sticky mini sell bar after the film */
.pill{position:fixed;z-index:40;right:clamp(12px,2.5vw,32px);bottom:max(14px,env(safe-area-inset-bottom));transform:translateY(160%);opacity:0;transition:transform .5s cubic-bezier(.2,.7,.2,1),opacity .4s;display:flex;gap:12px;align-items:center;background:var(--org);color:var(--d-on-accent);font-weight:600;text-decoration:none;padding:0 20px;min-height:48px;border-radius:999px;box-shadow:0 10px 30px -10px rgba(0,0,0,.8);white-space:nowrap}
.pill span{font-weight:400;font-size:.9rem;opacity:.85}.pill b{font-weight:600}
.pill.on{transform:none;opacity:1}

/* ---------- static (reduced motion, no WebGL) ---------- */
.static{padding:clamp(40px,8vw,96px) clamp(16px,5vw,72px);display:grid;gap:24px;background:#000}
.static h2{font-size:clamp(1.8rem,4vw,3rem)}
.clips2,.stills2{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:16px}.stills2 img{width:100%;height:auto}
.static[hidden]{display:none}
.html-static .film:not(.own){height:auto}.html-static .film:not(.own) .stick{position:relative;height:min(100svh,820px)}
.html-static .film .cv,.html-static .film .final{display:none}.html-static .film:not(.own) .poster{opacity:1;filter:brightness(.5) saturate(1.05)}
.html-static .bar,.html-static .intro{transform:none!important}.html-static .intro{opacity:1!important}
.html-static .bar.bot,.html-static .subs,.html-static .landed,.html-static #play,.html-static #hint{display:none}

/* ---------- sections ---------- */
.sec{padding:clamp(56px,10vw,128px) clamp(16px,5vw,72px);max-width:1280px;margin:0 auto}
.sec.first{padding-top:clamp(40px,6vw,80px)}
.sh{display:grid;gap:14px;max-width:44rem;margin-bottom:clamp(28px,5vw,56px)}
.sh h2,.gtxt h2{font-size:clamp(2.1rem,5.4vw,4rem)}
.sh p:not(.slug),.gtxt p:not(.slug){color:#d3cfc5;font-size:clamp(1rem,1.4vw,1.15rem);line-height:1.55;max-width:40rem}
.note{display:block;margin-top:.6rem;font-family:var(--mono);font-weight:400;font-size:.8rem;color:var(--org);letter-spacing:.03em}
.note2{font-family:var(--mono);font-size:.78rem;color:var(--org);text-align:center;margin:-14px 0 40px}
.frame{margin:0;position:relative;background:#000}
.frame img,.frame video{width:100%;height:auto;display:block;background:#0d0e12}
.frame figcaption{padding:10px 0 0;font-size:.74rem;color:var(--mute)}
.scope{display:grid;gap:18px}.scope .frame img{aspect-ratio:2.39/1;object-fit:cover}
@media(min-width:900px){.scope{grid-template-columns:1fr 1fr;gap:14px}.scope .frame:first-child{grid-column:1/-1}}
.yours{padding-bottom:clamp(32px,6vw,72px)}
.flowbox{max-width:44rem;background:var(--d-card);border:1px solid var(--d-line);padding:clamp(18px,3vw,32px);border-top:2px solid var(--teal)}
.dflow-cand,.dflow-pinimg,.dflow-row input,.dflow-chip{border-radius:3px}
.dflow-track i{background:linear-gradient(90deg,var(--teal),var(--org))}
.ownmsg{margin-top:1rem;font-size:.95rem;color:#d3cfc5}

.steps{list-style:none;margin:0 0 28px;padding:0;display:grid;gap:14px}
@media(min-width:800px){.steps{grid-template-columns:repeat(3,1fr)}}
.steps li{border-top:1px solid var(--d-line);padding:18px 0 0;display:grid;gap:10px;align-content:start}
.steps h3{font-size:1.5rem}.steps p{color:#d3cfc5}
.honest{max-width:42rem;font-size:1.05rem;border-left:2px solid var(--org);padding-left:16px;color:#e0dcd2}

/* compare slider */
.cmp{position:relative;max-width:620px;margin:0 auto 36px;aspect-ratio:3/4;overflow:hidden;background:#000;box-shadow:0 30px 120px rgba(0,0,0,.6)}
.cmp img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cmp .ca{clip-path:inset(0 calc(100% - var(--x)) 0 0)}
.cmp .line{position:absolute;top:0;bottom:0;left:var(--x);width:2px;background:var(--org);transform:translateX(-1px)}
.cmp .line::after{content:'';position:absolute;top:50%;left:50%;width:44px;height:44px;margin:-22px;border-radius:50%;border:2px solid var(--org);background:rgba(0,0,0,.6)}
.cmp input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0;touch-action:pan-y}
.cmp:focus-within{outline:3px solid var(--teal);outline-offset:3px}
.lbl{position:absolute;top:12px;font-family:var(--mono);font-size:.78rem;letter-spacing:.14em;background:#000;color:#fff;padding:6px 10px}
.l1{left:12px}.l2{right:12px;color:var(--org)}
.show{display:grid;gap:18px;margin-bottom:28px}
@media(min-width:800px){.show{grid-template-columns:1fr 1fr}}
.extras{display:grid;gap:18px;margin-bottom:48px}
@media(min-width:800px){.extras{grid-template-columns:1fr 1fr;align-items:start}.extras .vid{grid-row:span 2;max-width:420px;justify-self:center}}
.cards{display:grid;gap:18px;margin-top:20px}
@media(min-width:800px){.cards{grid-template-columns:1fr 1.25fr;align-items:stretch}}
.tier{background:var(--d-card);border:1px solid var(--d-line);padding:clamp(20px,3vw,34px);display:grid;gap:16px;align-content:start}
.tier h3{font-size:clamp(2.4rem,5vw,3.6rem);color:var(--d-fg)}
.tier ul{margin:0;padding:0;list-style:none;display:grid;gap:10px;color:#d3cfc5;font-size:.98rem}
.tier li{padding-left:22px;position:relative}.tier li::before{content:'';position:absolute;left:0;top:.6em;width:10px;height:2px;background:var(--teal)}
.tier.prem{border-color:var(--org);background:linear-gradient(180deg,#1a1510,#14171c 60%)}
.tier.prem .slug{color:var(--org)}.tier.prem li::before{background:var(--org)}
.later{font-size:.9rem;color:var(--mute)}
.tier .dbtn{align-self:end;margin-top:8px}
.noprev{margin-top:28px;display:grid;gap:10px;max-width:40rem}.noprev label{font-size:.95rem;color:#d3cfc5}
.nrow{display:flex;gap:12px;flex-wrap:wrap}.nrow input{flex:1 1 240px;min-height:48px;padding:0 14px;font:inherit;background:var(--d-input);color:var(--d-fg);border:1px solid var(--d-line);border-radius:3px}
.nrow input::placeholder{color:inherit;opacity:.55}

.gwrap{display:grid;gap:36px;align-items:center}
@media(min-width:800px){.gwrap{grid-template-columns:1.1fr .9fr}}
.gtxt{display:grid;gap:18px}.gtxt .cta{justify-content:flex-start}
.gfig{margin:0;justify-self:center;max-width:380px;box-shadow:0 30px 100px rgba(0,0,0,.6)}.gfig img{width:100%;height:auto}

.share{display:grid;gap:28px;align-items:center}
@media(min-width:800px){.share{grid-template-columns:minmax(0,420px) 1fr}}
.cardfig{margin:0;max-width:420px;width:100%}.cardfig img{width:100%;height:auto;box-shadow:0 30px 100px rgba(0,0,0,.65);background:#101216}
.cardfig figcaption{padding-top:10px}
.sbtns{display:grid;gap:14px;justify-items:start}
.refl{color:#d3cfc5;max-width:30rem}.refl a{color:var(--teal);word-break:break-all}
.say{min-height:1.4em;color:var(--org);font-size:.95rem}

.reelrow{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr))}
@media(min-width:900px){.reelrow{grid-template-columns:repeat(4,1fr)}.reelrow .frame.wide{grid-column:span 3}}
.order{text-align:center;justify-items:center}.order .sh{margin-left:auto;margin-right:auto;text-align:center}.order .cta{justify-content:center}
.order h2{font-size:clamp(2.4rem,7vw,5.4rem)}
.foot{border-top:1px solid var(--d-line);padding:40px clamp(16px,5vw,72px) 90px;display:grid;gap:14px;font-size:.9rem;color:var(--mute)}
.foot nav{display:flex;gap:6px 20px;flex-wrap:wrap}.foot a{padding:10px 0;display:inline-block}
.fine{max-width:44rem;font-size:.82rem}
.home .reveal{transition-duration:.45s}
.no-js .film{height:auto}.no-js .stick{position:relative;height:100svh}

/* ---------- mobile ---------- */
@media(max-width:760px){
  .film{height:380vh}.film.own{height:280vh}
  .nav{display:none}.bar.top{justify-content:space-between}
  .intro h1{font-size:clamp(2.9rem,15vw,4.4rem)}
  
  .quick{flex-direction:column}.quick .dbtn{width:100%}
  .subs span{font-size:1.1rem;max-width:26ch}
  .sample{font-size:.7rem}
  .landed{left:16px;right:16px;max-width:none}
  .home .dbtn.cap{top:calc(var(--bar) + 10px);right:12px;padding:.6em 1em}
  .bar .slug{font-size:.7rem;letter-spacing:.06em}
  
}
@media(prefers-reduced-motion:reduce){.go .black,.go .streak i,.go .poster,.go .tb>*,.go .ac>*,.go .ln>span,.go .sample{animation:none!important}.black{opacity:0}.grain,.arrow,.film:not(.own) .cv,.arrow::after{animation:none}.reveal{opacity:1;transform:none}.pill{transition:none}}

.home .dbtn.mini{width:auto}
@media(max-width:760px){
  .final img{height:auto;width:calc(100% - 16px)}
  .tb .slug{display:none}
  .ac::before{background:linear-gradient(rgba(5,6,8,0),rgba(5,6,8,.74) 50%)}
  .tb::before{background:radial-gradient(closest-side,rgba(5,6,8,.55),rgba(5,6,8,0))}
  .go .tb>.lead{--d:1.9s}
}

/* ---------- round 3: signature around the film ---------- */
.sh[data-n],.gtxt[data-n]{--nf:clamp(4.5rem,13vw,10rem);position:relative;padding-top:calc(var(--nf) * .8 + 24px)}
.sh[data-n]::before,.gtxt[data-n]::before{content:attr(data-n);position:absolute;left:-.04em;top:0;font-family:var(--mono);font-size:var(--nf);line-height:.8;letter-spacing:-.04em;color:transparent;-webkit-text-stroke:1px rgba(236,232,223,.3);pointer-events:none}
.sec{position:relative}
.sec::before{content:'';position:absolute;left:clamp(16px,5vw,72px);right:clamp(16px,5vw,72px);top:0;height:10px;background:repeating-linear-gradient(90deg,rgba(236,232,223,.2) 0 16px,transparent 16px 42px);-webkit-mask:linear-gradient(90deg,#000 0,#000 70%,transparent);mask:linear-gradient(90deg,#000 0,#000 70%,transparent);border-radius:2px}
.sh h2,.gtxt h2{text-transform:none;letter-spacing:-.025em}
.sec.first::before{display:none}
.proof{max-width:1360px}
.pgrid{display:grid;gap:clamp(24px,4vw,56px);align-items:start;margin-bottom:28px}
@media(min-width:900px){.pgrid{grid-template-columns:minmax(0,600px) 1fr}}
.pgrid .cmp{margin:0;max-width:none;width:100%}
.big8{list-style:none;margin:0;padding:0;display:grid;gap:0;counter-reset:b}
.big8 li{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:18px;padding:14px 0;border-top:1px solid var(--d-line);align-items:baseline}
.big8 li:last-child{border-bottom:1px solid var(--d-line)}
.big8 .num{grid-row:1/3;font-family:var(--mono);font-size:clamp(1.6rem,3.2vw,2.6rem);color:var(--org);letter-spacing:-.04em;min-width:2.1ch}
.big8 b{font-weight:600;font-size:clamp(1.3rem,2.6vw,2rem);letter-spacing:-.02em;line-height:1.1}
.big8 li>span:last-child{color:#c9c5bb;font-size:.95rem}
.show{grid-template-columns:1fr}
@media(min-width:800px){.show{grid-template-columns:1.25fr 1fr}.show .frame:first-child{grid-row:span 2}}
.show .frame{align-self:start}
.lrow{display:flex;gap:10px;flex-wrap:wrap}.sendsay{font-family:var(--mono);font-size:.78rem;color:var(--org);min-height:1em}
#ownLanded .big{font-size:1.3rem}
@media(max-width:760px){
  .final{inset:0 0 auto 0;height:calc(100% - 212px)}
  .landed{left:0;right:0;bottom:0;max-width:none;background:#0a0b0e;padding:14px 16px calc(14px + env(safe-area-inset-bottom));border-left:0;border-top:2px solid var(--org);gap:10px}
  .landed .big{font-size:1.15rem}.landed .sampleN{font-size:.7rem}.lrow .dbtn{flex:1 1 0;min-width:0;padding:.6em .8em}
  .landed .toggle{align-self:stretch}.landed .tg{flex:1}
}

/* ---------- round 4 ---------- */
.film:not(.own) .bar.top{background:linear-gradient(rgba(0,0,0,.88),rgba(0,0,0,.55) 70%,rgba(0,0,0,0));height:64px}
.film:not(.own) .sample{top:70px}
.tb::before{background:radial-gradient(closest-side,rgba(4,5,7,.86),rgba(4,5,7,0))!important}
.tb h1{text-shadow:0 2px 6px rgba(0,0,0,.7),0 6px 50px rgba(0,0,0,.9)}
.intro .lead{color:#f3efe6}
.glow{background:radial-gradient(70% 38% at 12% 100%,rgba(255,150,70,.38),rgba(255,150,70,0) 70%),radial-gradient(55% 30% at 88% 100%,rgba(255,200,120,.22),rgba(255,200,120,0) 70%);mix-blend-mode:screen;opacity:calc((var(--n) - .35) * 1.4)}
/* full-width compare */
.proof{max-width:1360px}
.pfull{display:grid;gap:clamp(24px,4vw,48px);margin-bottom:28px}
.pfull .cmp{max-width:none;width:100%;margin:0;aspect-ratio:3/4}
@media(min-width:800px){.pfull .cmp{aspect-ratio:2.1/1}.pfull .cmp img{object-position:50% 54%}}
.pfull .big8{grid-template-columns:1fr;column-gap:48px}
@media(min-width:800px){.pfull .big8{grid-template-columns:1fr 1fr}.pfull .big8 li:nth-last-child(2){border-bottom:1px solid var(--d-line)}}
.frame:has(> img[src*="crop_extra"]) {border:1px solid var(--d-line);background:#0d0e12}
.loop{font-size:.85rem;color:#d3cfc5;max-width:22rem}
.pill{align-items:center}.pill span{font-size:.82rem}
@media(max-width:760px){
  .sample{left:0;right:0;max-width:none;padding:6px 16px;background:rgba(5,6,8,.92);text-shadow:none}
  .film:not(.own) .sample{top:64px}
  .pill{left:12px;right:12px;justify-content:center;padding:0 14px;min-height:46px;font-size:.92rem}.pill span{display:inline;font-size:.78rem}
  .foot{padding-bottom:120px}
}
@media(min-width:900px){.reelrow .frame.wide{grid-column:span 4}}

/* ---------- round 5 ---------- */
.warm{color:var(--org)!important;font-size:1.05rem!important;font-weight:600;letter-spacing:.005em}
.tc,.where{color:#dedad0}.tc{font-size:.84rem}
.bar .slug{color:#7fe8dc}
.sec::before{background:repeating-linear-gradient(90deg,rgba(255,154,60,.55) 0 7px,transparent 7px 16px,rgba(236,232,223,.2) 16px 32px,transparent 32px 42px)}
.tclip{margin:calc(-1 * clamp(20px,3vw,34px)) calc(-1 * clamp(20px,3vw,34px)) 4px;aspect-ratio:16/9;overflow:hidden;background:#000}
.tclip video{width:100%;height:100%;object-fit:cover;object-position:50% 40%;display:block}
.cardthumb{width:54px;height:68px;object-fit:cover;border:1px solid var(--d-line);flex:none}
.lrow{align-items:center}
.show,.show>*,.pfull,.pfull>*{min-width:0}.show img{max-width:100%}
@media(max-width:760px){
  .cardthumb{display:none}
  .film:not(.own) .bar.top{height:58px}.film:not(.own) .sample{top:62px}
  main{padding-bottom:72px}
  .pill{bottom:10px}
}
/* round 5 fix (coordinator): the sample-plate line must not sit on the brand/header on phones */
@media(max-width:700px){.sample,.film:not(.own) .sample{top:auto!important;bottom:56px;left:0;right:0;text-align:center;padding:6px 14px;background:rgba(5,6,8,.78);max-width:none;opacity:1}}

/* =====================================================================
   home v2: night reveal on the still, instant opening, richer sections
   ===================================================================== */
/* instant first picture: the poster is a real file in the page (and an inline blur behind it), never a black screen */
.film{height:460vh}.film.own{height:320vh}
.poster{transform:scale(calc(1.06 + var(--sp) * 1.6));filter:saturate(1.1) contrast(1.05) brightness(.9)}
.go .poster{animation:pdesc 4.2s cubic-bezier(.2,.6,.2,1) backwards}
@keyframes pdesc{from{transform:scale(1.5)}to{transform:scale(1.06)}}
.black{opacity:0}
.go .black{animation:unveil 1.1s ease forwards}
@keyframes unveil{0%{opacity:.35}100%{opacity:0}}
.go .tb>.slug{--d:.3s}.go .tb>.lead{--d:1.2s}.go .ac>.quick{--d:1.4s}.go .ac>.priceline{--d:1.6s}.go .ac>.cta{--d:1.8s}.go .ac>.hint{--d:3s}
.go .ln:nth-child(1)>span{animation-delay:.35s}.go .ln:nth-child(2)>span{animation-delay:.65s}
.go .sample{animation:rise 1s ease 1.6s both}
.go .streak i{animation-duration:1.6s}
/* the bottom bar (timeline) stays through the whole film; only the top bar leaves when the still lands */
.film:not(.own) .bar.bot{transform:none;background:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.82) 38%)}
.film:not(.own) .bar.top{transform:translateY(calc(var(--q) * -101%))}
.film.landed-on .bar.bot{background:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.9) 30%)}
.subs{opacity:1;bottom:calc(var(--bar) + clamp(10px,2.4vh,26px))}
.film:not(.own) .sample{opacity:calc(1 - var(--q) * 4)}
.final{background:radial-gradient(120% 90% at 50% 50%,#1d1b1c 0%,#0a0b0e 75%)}
#finalEve{opacity:var(--ev,0)}
.final img{height:calc(100% - 8px)}
/* chapter rail: you always see where you are in the film */
.rail{position:absolute;z-index:6;right:clamp(10px,1.8vw,26px);top:50%;transform:translateY(-50%);margin:0;padding:0;list-style:none;display:grid;gap:12px}
.rail li{width:9px;height:9px;border-radius:50%;border:1.5px solid rgba(236,232,223,.65);background:rgba(0,0,0,.4);transition:transform .3s,background .3s,border-color .3s}
.rail li.past{background:rgba(236,232,223,.7)}
.rail li.on{background:var(--org);border-color:var(--org);transform:scale(1.55);box-shadow:0 0 14px rgba(255,154,60,.8)}
.own .rail{display:none}
.landed-on .rail{opacity:.9}

/* the lights: a box that follows the still, percentages from the print */
.lts{position:absolute;pointer-events:none;z-index:2}
.lt{position:absolute;aspect-ratio:1;border-radius:50%;mix-blend-mode:screen;pointer-events:none;transform:translate(-50%,-50%) scale(calc(.45 + var(--v,0) * .75));opacity:var(--v,0);will-change:opacity,transform}
.lt.hm{width:12.5%;background:radial-gradient(closest-side,rgba(255,214,140,.95),rgba(255,160,64,.6) 34%,rgba(255,110,30,.18) 62%,rgba(255,110,30,0) 78%)}
.lt.lm{width:14.5%;background:radial-gradient(closest-side,rgba(255,240,200,.9),rgba(255,206,120,.52) 34%,rgba(120,200,255,.14) 62%,rgba(120,200,255,0) 78%)}
.lt.h1{--v:var(--h1,0)}.lt.h2{--v:var(--h2,0)}.lt.h3{--v:var(--h3,0)}
.lt.l1{--v:var(--l1,0)}.lt.l2{--v:var(--l2,0)}.lt.l3{--v:var(--l3,0)}.lt.l4{--v:var(--l4,0)}
.lt::after{content:'';position:absolute;inset:36%;border-radius:50%;background:radial-gradient(closest-side,#fff7e2,rgba(255,220,150,0));opacity:.85;animation:flick 3.4s ease-in-out infinite alternate}
.lt.lm::after{animation-duration:4.6s}
@keyframes flick{from{opacity:.55}to{opacity:1}}
/* the still night grade, so the evening plate has depth when it fades in */
.final::after{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(90% 70% at 50% 50%,rgba(0,0,0,0),rgba(2,4,10,.55));opacity:var(--ev,0)}

/* ---------- calm version (reduced motion, ?lite=1, no WebGL): three stills, no flight ---------- */
.static{background:#07080a;padding:clamp(88px,10vw,130px) clamp(16px,5vw,72px) clamp(40px,8vw,96px)}
.static h2{font-size:clamp(2.2rem,5vw,3.8rem)}
.stlead{max-width:44rem;color:#d3cfc5}
.tri{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:18px;align-items:start}
.tri .pl{position:relative}.tri .pl img{width:100%;height:auto}
.tri .lts{inset:0}
.lit0 .lts{display:none}
.lit1{--h1:1;--h2:1;--h3:1;--l1:0;--l2:0;--l3:0;--l4:0}
.lit2{--h1:1;--h2:1;--h3:1;--l1:1;--l2:1;--l3:1;--l4:1}
.static .lt::after{animation:none}
.html-static .film:not(.own){height:auto}.html-static .film:not(.own) .stick{position:relative;height:min(100svh,780px)}
.html-static .rail{display:none}
.html-static .film:not(.own) .poster{opacity:1;transform:none;filter:brightness(.55) saturate(1.1)}
.html-static .film .bar.top{position:relative}

/* ---------- contrast: inputs and mono labels ---------- */
.home{--mute:#e2dfd6}
.slug,.tc,.where,.sampleN,.note2,.hint{color:#9ff0e6}
.bar .slug{color:#9ff0e6}
.quick input,.nrow input,.dflow-row input{background:#0b0d10;color:#fff;border:1.5px solid rgba(255,255,255,.9)}
.quick input::placeholder,.nrow input::placeholder,.dflow-row input::placeholder{color:#cfcbc1;opacity:1}
.dflow-label,.noprev label{color:#fff;font-weight:600}
.dflow-chip{color:#fff;border-color:rgba(255,255,255,.7)}
.sh p:not(.slug),.gtxt p:not(.slug),.steps p,.refl,.tier ul,.later,.loop,.ownmsg,.stlead{color:#e6e2d9}
.big8 li>span:last-child{color:#dcd8ce}
.frame figcaption{color:#d8d4ca;font-size:.78rem}
.lang-select{font:inherit;font-family:var(--mono);font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;background:#0b0d10;color:#fff;border:1px solid rgba(255,255,255,.6);border-radius:3px;min-height:44px;padding:0 10px;flex:none}
.bar.top{gap:12px}

/* ---------- compare: large, with a handle you can find ---------- */
.pfull .cmp{aspect-ratio:3/4;max-height:92svh;margin:0 auto}
@media(min-width:800px){.pfull .cmp{aspect-ratio:1.5/1;max-height:none}.pfull .cmp img{object-position:50% 52%}}
.cmp .line{width:3px;background:linear-gradient(var(--org),#ffd29a);box-shadow:0 0 24px rgba(255,154,60,.8)}
.cmp .line::after{width:68px;height:68px;margin:-34px;border-width:3px;background:rgba(0,0,0,.72) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 68 68'%3E%3Cpath d='M26 22l-12 12 12 12M42 22l12 12-12 12' fill='none' stroke='%23ff9a3c' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/68px no-repeat}
.lbl{font-size:.95rem;padding:9px 14px;top:14px}
.l1{left:14px}.l2{right:14px}
.note2{margin:12px 0 34px;color:#ffc58a}

/* ---------- Basic against Premium, in one table ---------- */
.vs{margin:0 0 28px;overflow-x:auto}
.vst{width:100%;border-collapse:collapse;min-width:520px;font-size:.98rem}
.vst th,.vst td{padding:13px 14px;text-align:left;border-top:1px solid var(--d-line);vertical-align:top}
.vst thead th{border-top:0;font-family:var(--mono);font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:#e2dfd6}
.vst th[scope=row]{font-weight:500;color:#fff;width:28%}
.vst td{color:#cfcbc1}
.vst .pc{background:linear-gradient(90deg,rgba(255,154,60,.16),rgba(255,154,60,.05));color:#fff;font-weight:600;border-left:2px solid var(--org)}
.vst thead .pc{color:var(--org)}
.drone{margin:28px 0 0}

/* ---------- the rest of the page: warm light instead of a cold grey ---------- */
.home main{background:radial-gradient(70% 40% at 8% 14%,rgba(255,150,60,.09),transparent 70%),radial-gradient(60% 40% at 100% 56%,rgba(79,209,197,.07),transparent 70%),#0a0b0e}
.sec.proof,.sec.gift,.sec.order{background:linear-gradient(180deg,rgba(255,154,60,.045),transparent 40%)}
.sec{position:relative}
.order{padding-bottom:clamp(80px,12vw,160px);background:radial-gradient(60% 70% at 50% 100%,rgba(255,154,60,.18),transparent 70%)}
.tier.prem{box-shadow:0 0 0 1px rgba(255,154,60,.35),0 40px 120px -40px rgba(255,154,60,.35)}
.dbtn{min-height:48px}
.foot{background:#07080a}
.foot .dlang a{padding:12px 10px 12px 0;min-height:44px}
.foot .dlang a[aria-current]{color:var(--org);font-weight:600}
.foot nav a{min-height:44px;display:inline-flex;align-items:center}

@media(max-width:760px){
  .film{height:360vh}.film.own{height:280vh}
  .rail{right:6px;gap:9px}.rail li{width:7px;height:7px}
  .lang-select{display:none}
  .landed{padding-bottom:calc(14px + env(safe-area-inset-bottom))}
  .film:not(.own) .bar.bot{background:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.9) 36%)}
  .vst th[scope=row]{width:34%}
}
@media(prefers-reduced-motion:reduce){.lt::after{animation:none}.go .poster{animation:none}}

/* v2b: the flight lands on the evening still (the 3D night is that same picture); then night deepens, homes and landmarks light up */
#finalImg{opacity:0}
#finalEve{opacity:1;filter:brightness(calc(1 - var(--ev,0) * .45)) saturate(calc(1 + var(--ev,0) * .18))}
.bar.top .brand{white-space:nowrap}
.film:not(.own) .sample{opacity:1;transform:translateY(calc(var(--q) * -58px))}
.lt.lm{width:16.5%;background:radial-gradient(closest-side,rgba(255,244,210,.95),rgba(255,210,125,.62) 32%,rgba(255,170,80,.2) 60%,rgba(255,150,60,0) 78%)}
.lt.hm{width:14%}
@media(min-width:900px){
  .film.stage .subs{left:clamp(20px,4vw,72px);right:auto;bottom:auto;top:50%;transform:translateY(-50%);text-align:left;padding:0;width:min(22rem,calc((100% - 700px) / 2 - 20px));min-width:15rem}
  .film.stage .subs span{max-width:none;font-size:clamp(1.5rem,2.4vw,2.2rem);line-height:1.12;border-left:3px solid var(--org);padding-left:16px;text-shadow:0 2px 24px rgba(0,0,0,.9)}
}
.lit1 img,.lit2 img{filter:brightness(calc(1 - var(--k,.3) * .4))}
.lit1{--k:.45}.lit2{--k:1}
@media(min-width:800px){.extras{grid-template-columns:1.5fr 1fr;grid-auto-flow:row}.extras .frame:nth-child(1){grid-column:1;grid-row:1}.extras .frame:nth-child(2){grid-column:1;grid-row:2}.extras .vid{grid-column:2;grid-row:1/3;max-width:none;justify-self:stretch;align-self:stretch}.extras .vid video{height:100%;object-fit:cover}}
.qlist{max-width:46rem}
.qlist details{border-top:1px solid var(--d-line);padding:16px 0}
.qlist summary{cursor:pointer;font-weight:600;font-size:1.2rem;list-style:none;display:flex;justify-content:space-between;gap:12px;min-height:44px;align-items:center}
.qlist summary::-webkit-details-marker{display:none}.qlist summary::after{content:"+";color:var(--org);font-size:1.6rem;line-height:1}
.qlist details[open] summary::after{content:"\2212"}
.qlist details p{margin:.7em 0 0;color:#e0dcd2;max-width:42em}
.qlist a{color:var(--teal)}

/* finishes picker (real plates of one town) */
.fin{max-width:1280px}
.finwrap{display:grid;gap:clamp(24px,4vw,56px);align-items:center}
@media(min-width:900px){.finwrap{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}}
.finfig{margin:0;min-width:0}
.finfig .frame{box-shadow:0 30px 100px rgba(0,0,0,.6)}
.finfig .plate img{width:100%;height:auto;display:block;transition:opacity .25s}
.placard{margin:14px 0 0;padding:10px 14px;background:rgba(0,0,0,.6);border-left:2px solid var(--org);max-width:32em}
.placard b{display:block;font-size:1.15rem;font-weight:600}
.placard .meta{display:block;font-family:var(--mono);font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:#d8d4ca;margin-top:3px}
.swatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:10px;margin:1.2rem 0 .8rem}
.swatch{all:unset;box-sizing:border-box;cursor:pointer;border:2px solid transparent;border-radius:3px;background:var(--d-card);color:var(--d-fg);padding:6px;display:grid;gap:6px;align-content:start;text-align:center;font:600 .8rem/1.2 var(--d-font);min-height:44px}
.swatch img{aspect-ratio:4/3;width:100%;object-fit:cover;border-radius:2px;height:auto}
.swatch[aria-pressed=true]{border-color:var(--org);box-shadow:0 0 0 2px #0a0b0e inset}
.swatch:focus-visible{outline:3px solid var(--teal);outline-offset:2px}
.fine2{font-size:.9rem;color:#d8d4ca}.fine2 a{color:var(--teal)}
.badge{display:inline-block;font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;border:1px solid var(--org);color:#ffc58a;padding:.3em .6em}
.vst .lb{display:none}
@media(max-width:640px){
  .vs{overflow:visible}
  .vst,.vst tbody,.vst tr{display:block;min-width:0;width:100%}
  .vst thead{display:none}
  .vst tr{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--d-line);padding:12px 0 0}
  .vst th[scope=row]{grid-column:1/-1;width:auto;border:0;padding:0 0 8px;font-weight:600;color:#fff}
  .vst td{border:0;padding:8px 10px 12px;font-size:.92rem}
  .vst .lb{display:block;font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:#9ff0e6;margin-bottom:3px}
  .vst .pc .lb{color:var(--org)}
}
.html-static .film:not(.own) .stick::after{content:'';position:absolute;z-index:3;left:0;right:0;bottom:0;height:34%;background:linear-gradient(rgba(7,8,10,0),#07080a);pointer-events:none}
.linkish{font:inherit;background:none;border:0;color:var(--d-fg);text-decoration:underline;cursor:pointer;padding:10px 0;min-height:44px}
.linkish[hidden]{display:none}

/* ---------- round 2: the landing, the night, the lights ---------- */
.final::before{content:'';position:absolute;inset:-6%;z-index:0;background:#0a0b0e center/cover no-repeat;filter:blur(34px) brightness(.5) saturate(1.2);opacity:var(--bgo,1);transition:opacity .4s}
.final.bgon::before{background-image:url(/assets/d/m/c_evening.jpg)}
.final img{z-index:1}.lts{z-index:2}
.final::after{z-index:3;background:radial-gradient(90% 75% at 50% 50%,rgba(0,0,0,0) 30%,rgba(2,4,12,.7)),linear-gradient(180deg,rgba(8,24,70,.42),rgba(4,8,26,.55));mix-blend-mode:multiply;opacity:var(--ev,0)}
#finalEve{filter:brightness(calc(1 - var(--ev,0) * .38)) saturate(calc(1 + var(--ev,0) * .1)) hue-rotate(calc(var(--ev,0) * -8deg))}
/* windows: tiny warm points inside each glow, so a lit home reads as lit windows, not a blob */
.lt::before{content:'';position:absolute;inset:26%;border-radius:50%;
  background:radial-gradient(circle at 22% 34%,#fff4c8 0 1.6px,transparent 2.6px),radial-gradient(circle at 44% 24%,#ffe6a8 0 1.4px,transparent 2.4px),radial-gradient(circle at 63% 38%,#fff4c8 0 1.8px,transparent 2.8px),radial-gradient(circle at 34% 58%,#ffd88a 0 1.5px,transparent 2.5px),radial-gradient(circle at 58% 64%,#fff4c8 0 1.5px,transparent 2.5px),radial-gradient(circle at 76% 56%,#ffe6a8 0 1.3px,transparent 2.3px),radial-gradient(circle at 48% 46%,#fffbe8 0 2.2px,transparent 3.4px)}
.landed-on .subs{opacity:0}
.landed{background:#0a0b0e}
.vst td{color:#bdb9ae}
.vst td:not(.pc){font-style:italic}
.trust{max-width:34rem;margin:0 auto;font-size:.95rem;color:#e6e2d9!important}.trust a{color:var(--teal)}
#basic .tclip{background:#14110c}#basic .tclip img{width:100%;height:100%;object-fit:cover;object-position:50% 30%;display:block}
.lts{z-index:4}
/* round 2b: night readable, not black */
#finalEve{filter:brightness(calc(1 - var(--ev,0) * .3)) saturate(calc(1 + var(--ev,0) * .12)) hue-rotate(calc(var(--ev,0) * -8deg))}
.final::after{background:radial-gradient(90% 75% at 50% 50%,rgba(0,0,0,0) 38%,rgba(2,4,12,.55)),linear-gradient(180deg,rgba(10,30,80,.3),rgba(4,8,26,.4))}

/* ---------- round 3: widescreen night crop, ground light, shorter mobile ---------- */
@media(min-width:900px){
  .film.stage .subs{left:0;right:0;top:auto;bottom:calc(var(--bar) + clamp(10px,2.4vh,26px));transform:none;text-align:center;width:auto;min-width:0;padding:0 clamp(16px,6vw,120px)}
  .film.stage .subs span{max-width:36ch;border:0;padding:0;font-size:clamp(1.3rem,2.1vw,1.9rem);line-height:1.15}
  .film.stage .subs::before{content:'';position:absolute;left:0;right:0;bottom:-30px;top:-70px;z-index:-1;background:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.72));pointer-events:none}
}
.lt.hm{width:13%}
.lt.lm{width:15%}
.lt{animation:none}
@media(max-width:640px){.vs{display:none}}

/* ---------- round 3b ---------- */
.cmpmode{display:flex;gap:0;justify-content:center;margin:14px 0 0}
.cmpmode .tg{border:1px solid var(--d-line);margin-left:-1px;min-height:44px;padding:0 16px}
.cmpmode .tg[aria-pressed=true]{background:var(--d-fg);color:#0a0b0e}
.extras .frame:nth-child(-n+2) img{aspect-ratio:2/1;object-fit:cover;object-position:100% 50%}
#finalEve{filter:brightness(calc(1 - var(--ev,0) * .2)) contrast(calc(1 + var(--ev,0) * .16)) saturate(calc(1 + var(--ev,0) * .1)) hue-rotate(calc(var(--ev,0) * -10deg))}
.final::after{background:radial-gradient(90% 75% at 50% 50%,rgba(0,0,0,0) 40%,rgba(2,4,14,.5)),linear-gradient(180deg,rgba(10,36,100,.36),rgba(4,8,30,.46))}

.bar.top{top:0!important}
.sbs{margin:0 0 28px}.sbs img{width:100%;height:auto;display:block;border:1px solid var(--d-line)}.sbs figcaption{margin-top:8px;font-size:.92rem;color:#d8d4ca}
.sbs-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}.sbs-cell .placard b{font-size:1rem}
.dlang label{font-family:var(--mono);font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;margin-right:8px}
@media(max-width:760px){.dlang .lang-select{display:inline-block}}
main p,main li,main td,main th,main h1,main h2,main h3,main summary,main label{overflow-wrap:break-word}

/* ---------- the real 3D town: the lit town stays behind, the plate arrives as the product ---------- */
.film.scene .final{background:none}
.film.scene .final::before{display:none}
.film.scene .final img{box-shadow:0 30px 120px rgba(0,0,0,.8),0 0 0 1px rgba(236,232,223,.25)}
.film.scene .cv{transition:filter .8s ease,opacity .9s ease}
.film.scene.stage .cv{filter:brightness(.55) saturate(.9)}
@media(min-width:900px){
  .film.scene.stage .subs{left:clamp(20px,4vw,72px);right:auto;bottom:calc(var(--bar) + clamp(14px,4vh,40px));text-align:left;width:min(30rem,42%);padding:0}
  .film.scene.stage .subs::before{display:none}
  .film.scene.stage .subs span{border-left:3px solid var(--org);padding-left:16px;max-width:none;font-size:clamp(1.4rem,2.2vw,2.1rem)}
  .film.scene .landed{left:clamp(20px,4vw,72px);right:auto;bottom:calc(var(--bar) + clamp(14px,4vh,40px))}
}

/* the plate is the product: bright, not dimmed by the night grade, with a larger call to action */
.film.scene #finalEve{filter:none}
.film.scene .final::after{display:none}
.film.scene .landed{max-width:min(26rem,calc(100% - 32px));padding:20px 22px;gap:14px}
.film.scene .landed .big{font-size:1.6rem}
.film.scene .landed .lrow .dbtn{min-height:52px;font-size:1.02rem}
.landed .priceline{font-size:.95rem;color:#f0ece3}

/* ---------- round 5 polish: one voice in the hero, captions in a safe corner, no lens streak on the real 3D town ---------- */
#play{background:none;box-shadow:none;text-decoration:underline;text-underline-offset:.25em;min-height:44px;font-weight:600}
#play:hover{color:var(--teal);box-shadow:none}
.film.scene .flare{display:none}
@media(min-width:900px){
  .film.scene .subs{left:clamp(20px,4vw,72px);right:auto;text-align:left;width:min(30rem,44%);padding:0}
  .film.scene .subs::before{content:'';position:absolute;left:-60px;bottom:-40px;top:-60px;right:-40px;z-index:-1;background:radial-gradient(closest-side,rgba(3,5,10,.7),rgba(3,5,10,0));pointer-events:none}
  .film.scene .subs span{max-width:none;font-size:clamp(1.25rem,1.9vw,1.8rem)}
}
@media(max-width:760px){.landed .lrow .dbtn{flex:1 1 100%}.landed .lrow .cardthumb{display:none}}
.lang-bar{display:flex;gap:14px;align-items:center;justify-content:center;flex-wrap:wrap;background:#14171c;color:#ece8df;font-size:.95rem;padding:8px 16px;border-bottom:1px solid var(--d-line);position:relative;z-index:20}
.lang-bar a{color:#ffc58a;font-weight:600}.lang-bar button{background:none;border:1px solid rgba(236,232,223,.6);color:#ece8df;border-radius:3px;font:inherit;padding:5px 12px;min-height:44px;cursor:pointer}


/* 04-11 Alex: light site (cream to light brown), the film stays a film; normal scrolling past the film */
.film,.film.own{height:100vh;height:100svh}
:root{--d-bg:#fff;--d-fg:#1f2533;--d-card:#fff;--d-line:rgba(31,37,51,.2);--d-input:#fff}
body{background:linear-gradient(180deg,#fbf7ef 0%,#f5ead8 40%,#ead8bd 100%) fixed,#f5ead8;color:var(--d-fg)}
.home main{background:transparent}
.film{--d-fg:#ece8df;--d-line:rgba(236,232,223,.3);--d-card:#14171c;--d-input:rgba(255,255,255,.08);color:#ece8df}
/* 03-11: Basic vs Premium duel — Premium must jump out */
.duel{display:grid;gap:clamp(16px,3vw,40px);align-items:end;margin:8px auto 18px;max-width:1240px}
@media(min-width:800px){.duel{grid-template-columns:2fr 3fr}}
.duel figure{margin:0;position:relative}
.duel img{display:block;width:100%;height:auto;border-radius:6px}
.duel .dtag{margin:0 0 10px;font-family:var(--mono);letter-spacing:.12em;text-transform:uppercase;font-size:.85rem;display:flex;gap:12px;align-items:baseline;flex-wrap:wrap}
.duel .dtag b{font-size:1.25rem;letter-spacing:0}
.duel figcaption{margin-top:10px;font-size:.98rem;color:#4a4f5c}
.dB img{filter:saturate(.7) brightness(.95);box-shadow:0 10px 30px rgba(60,40,10,.18)}
.dB .dtag{color:#6b6f78}
.dP img{box-shadow:0 0 0 3px #ffc76a,0 0 60px 10px rgba(255,190,90,.45),0 40px 120px rgba(60,40,10,.25)}
.dP .dtag{color:#9a5a00;font-size:1rem}
.dP .dtag b{font-size:1.6rem;color:#1f2533}
.dP .dplus{background:#ffc76a;color:#1a1206;padding:4px 10px;border-radius:999px;font-size:.72rem;letter-spacing:.08em}
.dP figcaption{color:#1f2533;font-weight:600}
@media(prefers-reduced-motion:no-preference){.dP img{animation:dglow 3.2s ease-in-out infinite alternate}@keyframes dglow{to{box-shadow:0 0 0 3px #ffd58a,0 0 90px 18px rgba(255,200,110,.6),0 40px 120px rgba(60,40,10,.25)}}}
@media(max-width:799px){.dB{width:62%}.dB figcaption{font-size:.9rem}}

/* 04-11 light theme: text and surfaces outside the film (generated from a computed-style audit) */
:is(a):not(.film *){color:#7a3f00}
:is(.dbtn.ghost):not(.film *){color:#2b3140}
:is(.dflow-row input):not(.film *){color:#2b3140}
:is(.dflow-chip):not(.film *){color:#2b3140}
:is(.home .slug):not(.film *){color:#2b3140}
:is(.sh p:not(.slug), .gtxt p:not(.slug)):not(.film *){color:#2b3140}
:is(.note):not(.film *){color:#2b3140}
:is(.note2):not(.film *){color:#2b3140}
:is(.frame figcaption):not(.film *){color:#2b3140}
:is(.steps p):not(.film *){color:#2b3140}
:is(.honest):not(.film *){color:#2b3140}
:is(.l2):not(.film *){color:#b45a00}
:is(.tier h3):not(.film *){color:#2b3140}
:is(.tier ul):not(.film *){color:#2b3140}
:is(.tier.prem .slug):not(.film *){color:#b45a00}
:is(.later):not(.film *){color:#2b3140}
:is(.noprev label):not(.film *){color:#2b3140}
:is(.nrow input):not(.film *){color:#2b3140}
:is(.refl):not(.film *){color:#2b3140}
:is(.refl a):not(.film *){color:#7a3f00}
:is(.say):not(.film *){color:#2b3140}
:is(.foot):not(.film *){color:#2b3140}
:is(.big8 .num):not(.film *){color:#b45a00}
:is(.big8 li > span:last-child):not(.film *){color:#2b3140}
:is(.warm):not(.film *){color:#b45a00}
:is(.stlead):not(.film *){color:#2b3140}
:is(.slug, .tc, .where, .sampleN, .note2, .hint):not(.film *){color:#2b3140}
:is(.quick input, .nrow input, .dflow-row input):not(.film *){color:#2b3140}
:is(.dflow-label, .noprev label):not(.film *){color:#2b3140}
:is(.sh p:not(.slug), .gtxt p:not(.slug), .steps p, .refl, .tier ul, .later, .loop, .ownmsg, .stlead):not(.film *){color:#2b3140}
:is(.lang-select):not(.film *){color:#2b3140}
:is(.vst thead th):not(.film *){color:#2b3140}
:is(.vst th[scope="row"]):not(.film *){color:#2b3140}
:is(.vst td):not(.film *){color:#2b3140}
:is(.vst .pc):not(.film *){color:#2b3140}
:is(.vst thead .pc):not(.film *){color:#2b3140}
:is(.qlist details p):not(.film *){color:#2b3140}
:is(.qlist a):not(.film *){color:#7a3f00}
:is(.placard .meta):not(.film *){color:#2b3140}
:is(.swatch):not(.film *){color:#2b3140}
:is(.fine2):not(.film *){color:#2b3140}
:is(.fine2 a):not(.film *){color:#7a3f00}
:is(.vst .lb):not(.film *){color:#2b3140}
:is(.vst .pc .lb):not(.film *){color:#2b3140}
:is(.linkish):not(.film *){color:#2b3140}
:is(.trust):not(.film *){color:#2b3140}
:is(.trust a):not(.film *){color:#7a3f00}
:is(.sbs figcaption):not(.film *){color:#2b3140}
:is(.home .ref):not(.film *){background-color:#eaf3fc;background-image:none}
:is(.static):not(.film *){background-color:transparent;background-image:none}
:is(.frame):not(.film *){background-color:transparent;background-image:none}
:is(.frame img, .frame video):not(.film *){background-color:#eef5fd;background-image:none}
:is(.cardfig img):not(.film *){background-color:#eef5fd;background-image:none}
:is(.frame:has(> img[src*="crop_extra"])):not(.film *){background-color:#fff;background-image:none}
:is(.tclip):not(.film *){background-color:#eef5fd;background-image:none}
:is(.quick input, .nrow input, .dflow-row input):not(.film *){background-color:#fff;background-image:none}
:is(.lang-select):not(.film *){background-color:#fff;background-image:none}
:is(.home main):not(.film *){background-color:transparent;background-image:none}
:is(.foot):not(.film *){background-color:#eaf3fc;background-image:none}
:is(.placard):not(.film *){background-color:rgba(255,250,240,.92);background-image:none}
:is(#basic .tclip):not(.film *){background-color:#eef5fd;background-image:none}
:is(.quick input, .nrow input, .dflow-row input, .lang-select):not(.film *){border-color:rgba(31,37,51,.45);color:#1f2533}
.home .sec::before{opacity:.5}
:is(h1,h2,h3,h4,caption,summary,p.trust):not(.film *){color:#1f2533}
:is(main b, main span, .foot b, .foot span):not(.film *):not(.dplus):not(.num){color:inherit}
:is(.tier,.flowbox,.swatch):not(.film *){background-color:#fff;background-image:none;border-color:rgba(31,37,51,.18);box-shadow:0 12px 34px rgba(80,55,20,.12)}
.tier.prem:not(.film *){background-image:linear-gradient(180deg,#eef6ff,#fff 60%);border:2px solid #f0a040;box-shadow:0 0 0 1px #f7c77a,0 18px 50px rgba(200,120,30,.25)}
#premium .tclip img{width:100%;height:100%;object-fit:cover;object-position:50% 38%;display:block}

/* 04-11 first view: light and fresh */
#film{display:none}
.topbar{display:flex;align-items:center;gap:16px;padding:14px clamp(16px,4vw,48px);max-width:1280px;margin:0 auto}
.topbar .nav{margin:0 auto}.topbar .nav a{color:#2b3140}.topbar .brand{color:#1f2533;font-weight:700}
.hero2{display:grid;gap:clamp(20px,4vw,56px);align-items:center;padding:clamp(16px,3vw,36px) clamp(16px,5vw,72px) clamp(32px,5vw,64px);max-width:1280px;margin:0 auto}
@media(min-width:900px){.hero2{grid-template-columns:1fr 1.15fr}}
.hero2 h1{font-size:clamp(2.6rem,5.6vw,4.6rem);line-height:1.02;letter-spacing:-.03em;margin:0 0 14px;color:#1f2533}
.hero2 .lead{font-size:clamp(1.05rem,1.5vw,1.2rem);color:#3c4250;margin:0 0 20px;max-width:32em;text-shadow:none}
.hero2 .quick{margin:0 0 12px}
.hero2 .priceline{color:#3c4250;text-shadow:none;margin:0}.hero2 .priceline b{color:#b45a00}
.hvid{margin:0;position:relative}
.hvid video{display:block;width:100%;height:auto;border-radius:14px;box-shadow:0 24px 60px rgba(90,60,20,.28);background:#eef5fd}
.hplay{position:absolute;left:16px;top:16px}
.hvid figcaption{margin-top:8px;font-size:.8rem}
.duel{grid-template-columns:5fr 6fr!important;align-items:center;max-width:min(1240px,115vh);gap:clamp(10px,2.4vw,32px)}
.dB{width:auto!important}
@media(max-width:640px){.duel .dtag{font-size:.7rem;gap:6px}.duel .dtag b,.dP .dtag b{font-size:1.05rem}.dP .dplus{font-size:.6rem;padding:2px 6px}.duel figcaption{font-size:.8rem}}
.home{--d-bg:#fff;--d-fg:#1f2533;--d-card:#fff;--d-line:rgba(31,37,51,.2);--d-input:#fff;color:#1f2533}
.home .film{--d-fg:#ece8df;--d-line:rgba(236,232,223,.3);--d-card:#14171c;--d-input:rgba(255,255,255,.08);color:#ece8df}
.big8 li,.big8 b,.placard b,.placard .meta,.dflow-ex span,.reveal>.slug,p.trust:not(.film *){color:#2b3140}
.big8 li>span:last-child{color:#4a5060!important}
.warm:not(.film *){color:#b45a00!important}
.sec.proof{padding-top:clamp(20px,3vw,40px)}
.sh p.trust,.sh .trust{color:#2b3140!important}

/* 04-11 (2) white with hints of light blue, centred titles, a site that comes alive */
body{background:radial-gradient(55% 34% at 12% 8%,#dcecff 0,rgba(220,236,255,0) 70%),radial-gradient(50% 38% at 92% 34%,#e2f0ff 0,rgba(226,240,255,0) 70%),radial-gradient(60% 36% at 18% 72%,#e6f2ff 0,rgba(230,242,255,0) 70%),#fff fixed;background-attachment:fixed}
.shipbar{margin:0;padding:8px 16px;text-align:center;background:linear-gradient(90deg,#d8ebff,#fff 50%,#d8ebff);font-family:var(--mono);letter-spacing:.14em;text-transform:uppercase;font-size:.82rem;color:#124a8c}
.shipbar b{color:#124a8c!important}
.hero2{display:block;text-align:center;max-width:980px;padding-top:clamp(8px,2vw,20px);grid-template-columns:none!important}
.hero2 h1{font-size:clamp(2.2rem,5.2vw,4.3rem);margin:0 auto 8px}
.tagline{margin:0 0 18px;font-size:clamp(1.1rem,2.2vw,1.6rem);color:#2b3140}
.prw{font-weight:700;background:linear-gradient(90deg,#d97706,#db2777,#2563eb,#d97706);background-size:300% 100%;-webkit-background-clip:text;background-clip:text;color:transparent!important;cursor:pointer;animation:prw 5s linear infinite}
.prw:hover,.prw:focus{filter:drop-shadow(0 0 10px rgba(255,180,60,.9))}
@keyframes prw{to{background-position:300% 0}}
.hvid{max-width:min(860px,calc((100vh - 330px)*1.78));margin:0 auto;transition:transform .5s,filter .5s}
.hvid.lit{transform:scale(1.03);filter:saturate(1.35) brightness(1.08) drop-shadow(0 0 34px rgba(255,190,90,.75))}
.hnote{margin:8px 0 14px;font-size:.78rem}
.hero2 .lead{margin:0 auto 14px}.hero2 .quick{margin:0 auto 10px}.hero2 .priceline{max-width:40rem;margin:0 auto}
.sec{padding-top:clamp(40px,6vw,84px);padding-bottom:clamp(40px,6vw,84px)}
.sh,.sh[data-n]{margin-left:auto;margin-right:auto;text-align:center;justify-items:center}
.sh p:not(.slug){margin-left:auto;margin-right:auto}
.sh[data-n]::before{left:50%;transform:translateX(-50%)}
.gtxt{text-align:center}
.lwrap{position:relative;border-radius:6px;transform:perspective(1300px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .18s ease-out;cursor:zoom-in;touch-action:pan-y}
.lwrap img{transition:filter .4s}
.alive .lwrap img{filter:saturate(1.25) contrast(1.05)}
.lens{position:absolute;left:0;top:0;width:clamp(150px,36%,300px);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background-repeat:no-repeat;filter:saturate(1.5) contrast(1.1) brightness(1.08);box-shadow:0 0 0 3px #fff,0 0 0 6px #ffc76a,0 0 40px 12px rgba(255,200,110,.75),0 18px 40px rgba(20,40,80,.45);opacity:0;transition:opacity .2s;pointer-events:none;z-index:3}
.alive .lens{opacity:1}
.lpins{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .4s}
.alive .lpins{opacity:1}
.lpins i{position:absolute;width:7%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(closest-side,#fff8dc,rgba(255,206,110,.75) 34%,rgba(255,140,50,.18) 66%,rgba(255,140,50,0));mix-blend-mode:screen;animation:pinl 1.5s ease-in-out infinite alternate}
.lpins i:nth-child(3n){background:radial-gradient(closest-side,#eaffff,rgba(120,210,255,.75) 34%,rgba(60,140,255,.18) 66%,rgba(60,140,255,0))}
.lpins i:nth-child(4n){background:radial-gradient(closest-side,#fff0f6,rgba(255,130,190,.75) 34%,rgba(230,60,140,.18) 66%,rgba(230,60,140,0))}
@keyframes pinl{from{opacity:.35;scale:.8}to{opacity:1;scale:1.25}}
.fins{display:grid;grid-template-columns:repeat(8,1fr);gap:10px;max-width:1120px;margin:16px auto 10px}
@media(max-width:800px){.fins{grid-template-columns:repeat(4,1fr)}}
.fin{all:unset;box-sizing:border-box;cursor:pointer;text-align:center;font-size:.8rem;color:#2b3140;border-radius:10px;padding:5px;background:#fff;box-shadow:0 4px 14px rgba(20,60,120,.12);transition:transform .2s}
.fin img{display:block;width:100%;height:auto;border-radius:7px;margin-bottom:4px}
.fin:hover{transform:translateY(-3px) scale(1.04)}
.fin:focus-visible{outline:3px solid #2563eb}
.fin[aria-pressed=true]{box-shadow:0 0 0 3px #f0a040,0 8px 20px rgba(200,120,30,.3);font-weight:600}
.show2{display:grid;gap:clamp(12px,2.4vw,28px);grid-template-columns:1.1fr 1fr;align-items:start;margin:24px 0}
.show2 .frame img{width:100%;height:auto;display:block;background:none}
.frame.drone video{border-radius:12px;box-shadow:0 24px 60px rgba(30,60,110,.28)}
.frame{transition:transform .35s}
#premium .tclip{position:relative;overflow:hidden;aspect-ratio:4/3}
#premium .tclip img{transform-origin:47% 53%;will-change:transform}
#premium .tclip .lpins{transform-origin:47% 53%;opacity:0;height:133.3%;top:-20%;inset:auto 0}
.tier{align-content:start}
.tier ul{gap:8px}
#basic ul li{color:#6b7280}
#basic h3{color:#6b7280}
.plist li{padding-left:26px;font-size:1rem;line-height:1.35}
.plist li::before{top:.42em;width:12px;height:12px;border-radius:50%;background:currentColor!important}
.plist li:nth-child(5n+1) b,.plist li:nth-child(5n+1)::before{color:#c2410c!important}
.plist li:nth-child(5n+2) b,.plist li:nth-child(5n+2)::before{color:#be185d!important}
.plist li:nth-child(5n+3) b,.plist li:nth-child(5n+3)::before{color:#6d28d9!important}
.plist li:nth-child(5n+4) b,.plist li:nth-child(5n+4)::before{color:#1d4ed8!important}
.plist li:nth-child(5n) b,.plist li:nth-child(5n)::before{color:#047857!important}
.mbtn{position:fixed;left:14px;bottom:max(14px,env(safe-area-inset-bottom));z-index:41;min-height:44px;padding:0 16px;border:0;border-radius:999px;background:#fff;color:#124a8c;font:inherit;font-weight:600;box-shadow:0 6px 20px rgba(20,60,120,.25);cursor:pointer}
.mbtn[aria-pressed=true]{background:#124a8c;color:#fff}
@media(prefers-reduced-motion:reduce){.prw,.lpins i{animation:none}}

.hero2{max-width:1240px}.hero2 h1{font-size:clamp(1.9rem,4.5vw,3.9rem);white-space:normal}
.alive .lwrap img{filter:saturate(1.1) contrast(1.03)}

.hvid{max-width:max(460px,min(860px,calc((100vh - 500px)*1.78)))}
.duelcta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin:18px auto 6px}
body{background:radial-gradient(55% 34% at 10% 8%,#cfe5ff 0,rgba(207,229,255,0) 72%),radial-gradient(50% 38% at 94% 36%,#d6e9ff 0,rgba(214,233,255,0) 72%),radial-gradient(60% 36% at 14% 78%,#dbecff 0,rgba(219,236,255,0) 72%),#fff;background-attachment:fixed}

.plist li{color:#3c4250;font-size:.98rem}.plist li b{font-weight:700;font-size:1.05rem}
.note2,.hnote,.slug:not(.film *),.frame figcaption,.duel figcaption,.fin span{color:#39414f!important}
#premImg{transition:opacity .35s}#premImg.sw{opacity:.25}
@media(max-width:700px){.pill{left:auto;right:10px;bottom:10px;padding:8px 14px;font-size:.85rem}.pill span{display:none}.mbtn{min-height:40px;padding:0 13px;left:10px;bottom:10px}.hero2 h1{font-size:1.9rem}.tagline{font-size:1.05rem}.show2{grid-template-columns:1fr}}
.home .hplay,.hvid .dbtn{width:auto!important;left:10px;top:10px;min-height:40px;padding:.4em 1em;font-size:.9rem}

/* 04-11 always in view: the way in */
.startbtn{position:fixed;z-index:42;left:50%;bottom:max(14px,env(safe-area-inset-bottom));transform:translateX(-50%);display:inline-flex;align-items:center;min-height:52px;padding:0 28px;border-radius:999px;background:linear-gradient(90deg,#ff9a3c,#ffc76a,#ff9a3c);background-size:200% 100%;color:#1a1206!important;font-weight:700;font-size:1.05rem;text-decoration:none;white-space:nowrap;box-shadow:0 0 0 3px #fff,0 8px 26px rgba(240,140,40,.55);animation:startglow 2.6s ease-in-out infinite}
.startbtn:hover{filter:brightness(1.06)}
.startbtn:focus-visible{outline:3px solid #2563eb;outline-offset:3px}
@keyframes startglow{0%,100%{background-position:0 0;box-shadow:0 0 0 3px #fff,0 8px 26px rgba(240,140,40,.5)}50%{background-position:100% 0;box-shadow:0 0 0 3px #fff,0 0 36px 10px rgba(255,190,90,.8)}}
@media(max-width:640px){.startbtn{font-size:.95rem;padding:0 20px;min-height:48px;left:auto;right:10px;transform:none}}
@media(prefers-reduced-motion:reduce){.startbtn{animation:none}}

/* 05-11 the fixed buttons never cover content */
body:has(.startbtn){padding-bottom:84px}
body:has(.startbtn)::after{content:"";position:fixed;z-index:40;left:0;right:0;bottom:0;height:calc(76px + env(safe-area-inset-bottom));background:#fff;border-top:1px solid #dce8f4}
.startbtn.off{opacity:0;pointer-events:none;transition:opacity .25s}