/* REVOCLE — the independent music house */
@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
:root{
--bg:oklch(11.5% .012 70);--bg2:oklch(14% .014 70);--panel:oklch(17% .016 75 / .55);--line:oklch(85% .06 85 / .13);--line2:oklch(85% .06 85 / .07);
--cream:oklch(94% .02 85);--muted:oklch(69% .018 80);--faint:oklch(52% .015 80);
--accent:oklch(72% .17 45);--accent-2:oklch(56% .19 33);--violet:oklch(60% .16 300);--green:oklch(76% .13 155);--rose:oklch(66% .17 15);
--f-d:'Archivo',sans-serif;--f-s:'Instrument Serif',serif;--f-m:'Space Mono',monospace;--f-w:'Montserrat',sans-serif;
--ease:cubic-bezier(.22,1,.36,1);--nav-h:76px}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:clip}
body{background:var(--bg);color:var(--cream);font:400 1.0625rem/1.65 var(--f-d);overflow-x:clip;-webkit-font-smoothing:antialiased}
::selection{background:var(--accent);color:oklch(15% .02 75)}
a{color:var(--accent);text-decoration:none}
a:hover{color:oklch(90% .09 88)}
img,svg{display:block}
section{scroll-margin-top:var(--nav-h)}
h1,h2,h3,h4{font-weight:800;line-height:1.02;letter-spacing:-.015em;text-wrap:balance}
.it{font-family:var(--f-s);font-style:italic;font-weight:400;letter-spacing:0;color:var(--accent)}
.wrap{width:min(1240px,92vw);margin:0 auto}
/* ambient */
.aurora{position:fixed;inset:0;z-index:-2;pointer-events:none;background:radial-gradient(52% 44% at 18% -6%,oklch(42% .13 45 / .32),transparent 62%),radial-gradient(44% 40% at 88% 8%,oklch(34% .1 300 / .26),transparent 60%),radial-gradient(50% 46% at 50% 112%,oklch(34% .11 30 / .3),transparent 62%),var(--bg)}
.aurora::after{content:"";position:absolute;inset:0;background-image:radial-gradient(oklch(85% .08 45 / .05) 1px,transparent 1px);background-size:34px 34px;mask:radial-gradient(72% 60% at 50% 34%,#000,transparent)}
.grain{position:fixed;inset:-60%;width:220%;height:220%;z-index:90;pointer-events:none;opacity:.05;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");animation:grain 7s steps(8) infinite}
@keyframes grain{0%{transform:translate(0,0)}25%{transform:translate(-4%,3%)}50%{transform:translate(3%,-4%)}75%{transform:translate(-2%,-2%)}100%{transform:translate(2%,3%)}}
body.no-grain .grain{display:none}
.cursor-glow{position:fixed;width:520px;height:520px;border-radius:50%;pointer-events:none;z-index:0;background:radial-gradient(circle,oklch(72% .15 45 / .07),transparent 62%);transform:translate(-50%,-50%);left:-999px;top:-999px}
body.no-glow .cursor-glow{display:none}
.progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:120}
.progress i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--accent-2),var(--accent))}
/* nav */
.nav{position:fixed;top:0;left:0;right:0;z-index:110;transition:background .4s,border-color .4s,backdrop-filter .4s;border-bottom:1px solid transparent}
.nav.scrolled{background:oklch(12% .012 70 / .78);backdrop-filter:blur(18px);border-color:var(--line2)}
.nav-inner{width:min(1360px,94vw);margin:0 auto;height:var(--nav-h);display:flex;align-items:center;justify-content:space-between;gap:24px}
/* Brand lockup. Everything is sized in em off the wordmark, so font-size is
   the single knob that scales mark + gap + tracking together and keeps the
   proportions locked at every breakpoint. */
/* Brand = the supplied logo artwork. The lockup already contains the wordmark,
   so .brand carries no text of its own. Heights are in rem so the logo tracks
   the user's font-size setting like the rest of the type. */
.brand{display:inline-flex;align-items:center;color:var(--cream);white-space:nowrap}
.brand .mark{flex:none;display:block;width:auto;height:auto}
.brand .mark-lockup{height:1.7rem}
.brand .mark-icon{display:none;height:1.85rem}
.brand:hover{color:var(--cream)}
.nav-links{display:flex;gap:34px;font:500 0.90625rem var(--f-d)}
.nav-links a{color:var(--muted);letter-spacing:.02em;white-space:nowrap}
.nav-links a:hover{color:var(--cream)}
.nav-cta{display:flex;align-items:center;gap:18px}
.login{font:500 0.90625rem var(--f-d);color:var(--muted)}
.login:hover{color:var(--cream)}
.nav .menu-btn{display:none}
/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;white-space:nowrap;font:600 0.9375rem var(--f-d);letter-spacing:.01em;padding:13px 24px;border-radius:999px;border:1px solid transparent;cursor:pointer;transition:transform .3s var(--ease),box-shadow .3s,background .3s,color .3s,border-color .3s;will-change:transform}
.btn-lg{padding:17px 32px;font-size:1rem}
.btn-gold{background:linear-gradient(135deg,var(--accent),var(--accent-2));color:oklch(16% .03 75);box-shadow:0 8px 30px oklch(60% .17 40 / .3),inset 0 1px 0 oklch(100% 0 0 / .35)}
.btn-gold:hover{box-shadow:0 12px 44px oklch(62% .17 40 / .45);color:oklch(14% .03 75)}
.btn-ghost{border-color:var(--line);color:var(--cream);background:oklch(100% 0 0 / .02)}
.btn-ghost:hover{border-color:oklch(85% .06 85 / .4);background:oklch(100% 0 0 / .05);color:var(--cream)}
.btn .arrow{transition:transform .3s var(--ease)}
.btn:hover .arrow{transform:translateX(4px)}
/* reveal */
[data-anim]{opacity:0;transform:translateY(34px);transition:opacity .9s var(--ease),transform .9s var(--ease);transition-delay:var(--d,0s)}
[data-anim="left"]{transform:translateX(-40px)}
[data-anim="right"]{transform:translateX(40px)}
[data-anim="scale"]{transform:scale(.92) translateY(20px)}
[data-anim].in{opacity:1;transform:none}
/* ============ HERO ============ */
.hero{min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;position:relative;padding-top:calc(var(--nav-h) + 30px)}
.hero-inner{width:min(1360px,94vw);margin:0 auto;flex:1;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:center;gap:30px;position:relative;z-index:2}
.hero-copy{position:relative;z-index:3}
.eyebrow{font:400 0.75rem var(--f-m);letter-spacing:.32em;text-transform:uppercase;color:var(--accent);display:inline-flex;align-items:center;gap:12px}
.eyebrow::before{content:"";width:34px;height:1px;background:linear-gradient(90deg,transparent,var(--accent))}
.h-title{font-size:clamp(2.75rem,5.5vw,5.75rem);margin:22px 0 22px;text-transform:uppercase;font-stretch:112%;font-weight:900}
.h-title .row{display:block;overflow:hidden;padding-bottom:.06em;margin-bottom:-.06em}
.h-title .row span{display:inline-block;transform:translateY(110%);animation:riseup 1.1s var(--ease) forwards}
.h-title .row:nth-child(2) span{animation-delay:.12s}
.h-title .row:nth-child(3) span{animation-delay:.24s}
@keyframes riseup{to{transform:none}}
.h-title .it{font-size:1.08em;text-transform:none;font-stretch:100%;background:linear-gradient(100deg,oklch(82% .13 55),var(--accent) 45%,oklch(60% .19 35));-webkit-background-clip:text;background-clip:text;color:transparent;padding-right:.08em}
.lede{color:var(--muted);font-size:clamp(1rem,1.25vw,1.1875rem);max-width:52ch;text-wrap:pretty}
.hero-cta{display:flex;gap:16px;flex-wrap:wrap;margin:34px 0 26px}
.hero-meta{display:flex;gap:26px;flex-wrap:wrap;font:400 0.78125rem var(--f-m);letter-spacing:.06em;color:var(--faint)}
.hero-meta span{display:inline-flex;align-items:center;gap:8px}
.dot{width:5px;height:5px;border-radius:50%;background:var(--green);box-shadow:0 0 10px var(--green);display:inline-block}
/* vinyl stage */
.stage{position:relative;height:min(46vw,620px);display:grid;place-items:center;perspective:1300px}
.orbit{position:absolute;width:118%;aspect-ratio:1;border:1px dashed oklch(85% .06 85 / .14);border-radius:50%;animation:spin 60s linear infinite}
.orbit i{position:absolute;top:-4px;left:50%;width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 14px var(--accent)}
.halo{position:absolute;width:82%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,oklch(64% .17 42 / .22),transparent 62%);filter:blur(30px)}
.disc-wrap{position:relative;transform-style:preserve-3d;transform:rotateX(var(--rx,8deg)) rotateY(var(--ry,-6deg));transition:transform .25s ease-out;will-change:transform}
.disc{width:min(34vw,450px);aspect-ratio:1;border-radius:50%;position:relative;background:radial-gradient(circle at 34% 28%,oklch(30% .01 70 / .9),transparent 44%),repeating-radial-gradient(circle,oklch(13% .008 70) 0 1.1px,oklch(19% .012 75) 1.1px 2.3px),oklch(14% .01 70);box-shadow:0 60px 130px oklch(0 0 0 / .62),0 8px 30px oklch(0 0 0 / .5),inset 0 0 60px oklch(0 0 0 / .8);animation:spin 8s linear infinite}
body.no-spin .disc,body.no-spin .disc .sheen{animation-play-state:paused}
@keyframes spin{to{transform:rotate(360deg)}}
.disc .sheen{position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 205deg,transparent 0 8%,oklch(92% .06 88 / .2) 13%,transparent 21% 52%,oklch(85% .05 300 / .1) 58%,transparent 66%);mix-blend-mode:screen;animation:spin 8s linear infinite reverse}
.vlabel{position:absolute;inset:31.5%;border-radius:50%;background:radial-gradient(circle at 38% 32%,oklch(80% .14 50),oklch(66% .18 40) 46%,oklch(50% .17 32));box-shadow:0 0 0 2px oklch(20% .02 75),0 0 26px oklch(64% .18 40 / .4);display:grid;place-items:center}
.vlabel svg{position:absolute;inset:0;width:100%;height:100%}
.vlabel text{font:700 8.4px var(--f-m);letter-spacing:.18em;fill:oklch(22% .06 35)}
.hole{width:11%;aspect-ratio:1;border-radius:50%;background:oklch(10% .01 70);box-shadow:0 0 0 3px oklch(30% .08 38),inset 0 2px 6px #000}
.chip{position:absolute;display:flex;align-items:center;gap:12px;background:oklch(18% .015 75 / .72);border:1px solid var(--line);border-radius:16px;padding:12px 16px;backdrop-filter:blur(14px);box-shadow:0 20px 50px oklch(0 0 0 / .45);animation:float 7s ease-in-out infinite;z-index:3}
@keyframes float{0%,100%{translate:0 0}50%{translate:0 -12px}}
.chip b{font:700 0.90625rem var(--f-d);display:block}
.chip span.sub{font:400 0.6875rem var(--f-m);color:var(--muted);letter-spacing:.04em}
.chip-pay{right:-2%;top:9%;flex-direction:column;align-items:flex-start;gap:3px}
.chip-pay b{font-size:1.1875rem;color:var(--accent)}
.chip-now{left:-5%;bottom:12%;animation-delay:-3.5s}
.cover{width:38px;height:38px;border-radius:9px;background:conic-gradient(from 220deg,var(--violet),var(--rose),var(--accent),var(--violet));box-shadow:inset 0 0 0 1px oklch(100% 0 0 / .2)}
.eq{display:flex;align-items:flex-end;gap:2.5px;height:16px}
.eq i{width:3px;background:var(--accent);border-radius:2px;animation:eq 1s ease-in-out infinite}
.eq i:nth-child(1){height:60%}.eq i:nth-child(2){height:100%;animation-delay:.15s}.eq i:nth-child(3){height:45%;animation-delay:.3s}.eq i:nth-child(4){height:80%;animation-delay:.45s}
@keyframes eq{0%,100%{transform:scaleY(.5)}50%{transform:scaleY(1)}}
.spark{position:absolute;color:var(--accent);font-size:0.9375rem;animation:twinkle 3.4s ease-in-out infinite;text-shadow:0 0 12px var(--accent)}
@keyframes twinkle{0%,100%{opacity:.15;transform:scale(.7) rotate(0deg)}50%{opacity:1;transform:scale(1.15) rotate(45deg)}}
/* dsp band */
.dsp-band{position:relative;z-index:2;margin-top:40px;padding:0 0 26px}
.band-cap{display:flex;align-items:center;gap:18px;width:min(1360px,94vw);margin:0 auto 18px;font:400 0.6875rem var(--f-m);letter-spacing:.34em;text-transform:uppercase;color:var(--faint)}
.band-cap::before,.band-cap::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--line));}
.band-cap::after{background:linear-gradient(90deg,var(--line),transparent)}
.mq{overflow:hidden;mask:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.mq-track{display:flex;width:max-content;animation:mq var(--dur,42s) linear infinite}
.mq:hover .mq-track{animation-play-state:paused}
body.no-mq .mq-track{animation-play-state:paused}
@keyframes mq{to{transform:translateX(-50%)}}
.dsp{display:flex;align-items:center;gap:12px;padding:10px 34px;color:oklch(88% .015 85 / .68);transition:color .3s;white-space:nowrap}
.dsp svg{width:25px;height:25px;flex:none}
.dsp b{font:500 0.96875rem var(--f-d);letter-spacing:.01em}
.dsp:hover{color:var(--accent)}
.dsp .sep{color:oklch(85% .06 85 / .2);font-size:0.5625rem}
/* ============ sections ============ */
.sec{padding:clamp(90px,11vw,160px) 0;position:relative}
.sec-head{margin-bottom:clamp(40px,5vw,72px)}
.s-eyebrow{display:flex;align-items:center;gap:16px;font:400 0.75rem var(--f-m);letter-spacing:.3em;text-transform:uppercase;color:var(--accent)}
.s-eyebrow .num{color:var(--faint)}
.s-eyebrow .rule{flex:0 0 44px;height:1px;background:linear-gradient(90deg,var(--accent),transparent)}
.sec-title{font-size:clamp(2.5rem,5.4vw,5.375rem);text-transform:uppercase;font-stretch:110%;margin-top:20px}
.sec-title .it{text-transform:none;font-size:1.06em}
.sec-sub{color:var(--muted);max-width:56ch;margin-top:18px;font-size:clamp(0.96875rem,1.15vw,1.125rem);text-wrap:pretty}
.center{text-align:center}
.center .s-eyebrow{justify-content:center}
.center .s-eyebrow .rule{background:linear-gradient(90deg,transparent,var(--accent))}
.center .sec-sub{margin-inline:auto}
/* manifesto */
/* numbers */
.numbers-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line2);border:1px solid var(--line2)}
.num-card{background:oklch(13.5% .012 72);padding:clamp(28px,3vw,46px) clamp(22px,2.4vw,38px);position:relative;transition:background .4s}
.num-card:hover{background:oklch(16% .018 78)}
.num-card .n{font:900 clamp(2.875rem,4.6vw,4.75rem)/1 var(--f-d);font-stretch:108%;background:linear-gradient(160deg,var(--cream) 30%,var(--accent));-webkit-background-clip:text;background-clip:text;color:transparent}
.num-card .n sup{font-size:.45em;vertical-align:.7em;font-weight:700}
.num-card .t{font:700 1rem var(--f-d);margin-top:14px}
.num-card .s{font:400 0.75rem var(--f-m);letter-spacing:.05em;color:var(--faint);margin-top:6px}
/* platform bento */
.card{position:relative;border-radius:22px;padding:30px;background:linear-gradient(170deg,oklch(19% .018 78 / .6),oklch(14% .012 72 / .55));border:1px solid var(--line2);overflow:hidden;transform-style:preserve-3d;transition:border-color .4s,box-shadow .4s}
.card:hover{border-color:oklch(72% .14 45 / .35);box-shadow:0 30px 70px oklch(0 0 0 / .4)}
.card::after{content:"";position:absolute;inset:0;background:radial-gradient(420px circle at var(--mx,50%) var(--my,-20%),oklch(72% .16 45 / .12),transparent 55%);opacity:0;transition:opacity .4s;pointer-events:none}
.card:hover::after{opacity:1}
.fic{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;color:var(--accent);background:oklch(70% .16 45 / .12);border:1px solid oklch(70% .16 45 / .25);box-shadow:inset 0 1px 0 oklch(100% 0 0 / .1);margin-bottom:20px}
.card h3{font-size:1.3125rem;margin-bottom:9px;letter-spacing:-.01em}
.card p{color:var(--muted);font-size:0.9375rem;max-width:46ch}
.tick{color:var(--green);font-size:0.6875rem}
/* royalty */
.royal-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,5vw,80px);align-items:center}
.calc-controls{margin-top:34px}
.calc-readrow{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:14px}
.calc-cap{font:400 0.71875rem var(--f-m);letter-spacing:.22em;text-transform:uppercase;color:var(--faint)}
.calc-streams{font:900 clamp(1.875rem,2.6vw,2.5rem)/1 var(--f-d);color:var(--cream)}
.calc-slider{width:100%;appearance:none;height:4px;border-radius:4px;background:linear-gradient(90deg,var(--accent) var(--fill,10%),oklch(30% .01 75) var(--fill,10%));outline:none;cursor:pointer}
.calc-slider::-webkit-slider-thumb{appearance:none;width:26px;height:26px;border-radius:50%;background:radial-gradient(circle at 35% 30%,oklch(82% .13 50),var(--accent-2));border:2px solid oklch(20% .02 75);box-shadow:0 0 0 5px oklch(70% .16 45 / .2),0 6px 18px oklch(0 0 0/.5)}
.calc-ticks{display:flex;justify-content:space-between;font:400 0.65625rem var(--f-m);letter-spacing:.1em;color:var(--faint);margin-top:12px}
.calc-foot{font-size:0.78125rem;color:var(--faint);margin-top:26px;max-width:48ch}
.calc-card{position:relative;border-radius:26px;padding:36px;background:linear-gradient(165deg,oklch(20% .022 80 / .75),oklch(13% .012 72 / .8));border:1px solid oklch(70% .15 45 / .28);box-shadow:0 40px 100px oklch(0 0 0 / .5),inset 0 1px 0 oklch(100% 0 0 / .07)}
.calc-card::before{content:"";position:absolute;inset:-1px;border-radius:27px;padding:1px;background:linear-gradient(140deg,oklch(72% .16 45 / .5),transparent 30% 65%,oklch(62% .17 38 / .35));-webkit-mask:linear-gradient(#000,#000) content-box,linear-gradient(#000,#000);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.calc-card-top{display:flex;justify-content:space-between;align-items:center;padding-right:70px}
.chip-tag{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;font:400 0.65625rem var(--f-m);letter-spacing:.16em;text-transform:uppercase;color:var(--green);border:1px solid oklch(75% .12 155 / .3);padding:6px 12px;border-radius:999px}
.cap{font:400 0.6875rem var(--f-m);letter-spacing:.22em;text-transform:uppercase;color:var(--faint)}
.payout-num{font:900 clamp(3.25rem,4.6vw,4.5rem)/1 var(--f-d);font-stretch:106%;margin-top:18px;background:linear-gradient(150deg,var(--cream) 40%,var(--accent));-webkit-background-clip:text;background-clip:text;color:transparent}
.payout-per{font:400 .32em var(--f-m);color:var(--faint);-webkit-text-fill-color:var(--faint);margin-left:8px;letter-spacing:.1em}
.payout-year{color:var(--muted);margin-top:8px;font-size:0.90625rem}
.payout-year b{color:var(--cream)}
.calc-break{margin-top:28px;display:grid;gap:9px}
.calc-brow{display:flex;justify-content:space-between;font-size:0.84375rem;color:var(--muted)}
.calc-bk{display:inline-flex;align-items:center;gap:9px}
.bd{width:8px;height:8px;border-radius:50%;display:inline-block}
.calc-bv{font-family:var(--f-m);font-size:0.78125rem;color:var(--cream)}
.bar-track{height:5px;border-radius:5px;background:oklch(26% .012 75);overflow:hidden;margin-bottom:5px}
.bar-fill{height:100%;border-radius:5px;background:linear-gradient(90deg,var(--accent-2),var(--accent));transition:width .7s var(--ease)}
/* studio */
.studio-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(40px,5vw,80px);align-items:center}
.deep-list{margin-top:38px;display:grid;gap:8px}
.deep-item{display:flex;gap:18px;padding:18px;border-radius:16px;border:1px solid transparent;transition:border-color .3s,background .3s}
.deep-item:hover{border-color:var(--line2);background:oklch(100% 0 0 / .025)}
.di{width:44px;height:44px;flex:none;border-radius:12px;display:grid;place-items:center;font-size:1.125rem;color:var(--accent);border:1px solid oklch(70% .16 45 / .28);background:oklch(70% .16 45 / .1)}
.deep-item h4{font-size:1.03125rem;margin-bottom:4px}
.deep-item p{color:var(--muted);font-size:0.875rem}
.studio-scene{perspective:1500px}
.studio{border-radius:20px;background:oklch(15% .012 72 / .92);border:1px solid var(--line);box-shadow:0 60px 140px oklch(0 0 0 / .55),inset 0 1px 0 oklch(100% 0 0 / .08);overflow:hidden;transform:rotateX(16deg) translateY(40px);will-change:transform;transform-origin:50% 100%}
.studio-bar{display:flex;align-items:center;gap:14px;padding:13px 18px;border-bottom:1px solid var(--line2)}
.tl{display:flex;gap:7px}
.tl i{width:11px;height:11px;border-radius:50%;background:oklch(30% .01 75)}
.tl i:first-child{background:oklch(60% .16 25)}
.tl i:nth-child(2){background:oklch(75% .13 90)}
.tl i:nth-child(3){background:oklch(70% .14 150)}
.url{flex:1;text-align:center;font:400 0.71875rem var(--f-m);letter-spacing:.06em;color:var(--faint);background:oklch(11% .008 70);border:1px solid var(--line2);border-radius:8px;padding:6px 14px;max-width:300px;margin:0 auto}
.studio-body{padding:20px;display:grid;gap:14px}
.s-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.s-card{background:oklch(18% .014 75 / .6);border:1px solid var(--line2);border-radius:14px;padding:18px}
.lbl{font:400 0.65625rem var(--f-m);letter-spacing:.18em;text-transform:uppercase;color:var(--faint)}
.big{font:800 1.875rem/1.1 var(--f-d);margin-top:8px}
.cents{font-size:.55em;color:var(--muted);font-weight:600}
.bars{display:flex;align-items:flex-end;gap:6px;height:64px;margin-top:14px}
.bars i{flex:1;border-radius:4px 4px 2px 2px;background:linear-gradient(180deg,oklch(66% .15 45 / .78),oklch(66% .15 45 / .16));transform-origin:bottom;animation:barpop 1s var(--ease) both}
.bars i.hot{background:linear-gradient(180deg,var(--accent),oklch(70% .12 78 / .3));box-shadow:0 0 18px oklch(68% .17 44 / .4)}
@keyframes barpop{from{transform:scaleY(0)}}
.s-rel{display:flex;align-items:center;gap:14px}
.s-rel b{display:block;font-size:0.9375rem}
.s-rel span.sub{font:400 0.6875rem var(--f-m);color:var(--faint)}
.live{margin-left:auto;display:inline-flex;align-items:center;gap:7px;font:700 0.625rem var(--f-m);letter-spacing:.2em;color:var(--green);border:1px solid oklch(75% .12 155 / .3);border-radius:999px;padding:5px 11px}
.gcell{display:flex;justify-content:space-between;align-items:baseline;font-size:0.84375rem;color:var(--muted);padding:7px 0;border-bottom:1px dashed var(--line2)}
.gcell b{font:700 0.8125rem var(--f-m);color:var(--cream)}
/* stores */
.store-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-top:8px}
/* voices */
.quote{width:440px;flex:none;padding:0 34px;border-left:1px solid var(--line2)}
.qt{font:400 1.1875rem/1.5 var(--f-s);color:var(--cream)}
.qt em{color:var(--accent)}
.qa{margin-top:14px;font:400 0.6875rem var(--f-m);letter-spacing:.18em;text-transform:uppercase;color:var(--faint)}
/* pricing */
.toggle{display:inline-flex;border:1px solid var(--line);border-radius:999px;padding:5px;gap:4px;margin:26px 0 50px;background:oklch(100% 0 0 / .02)}
.toggle button{white-space:nowrap;font:600 0.84375rem var(--f-d);color:var(--muted);background:none;border:none;border-radius:999px;padding:9px 22px;cursor:pointer;transition:.3s}
.toggle button.active{background:linear-gradient(135deg,var(--accent),var(--accent-2));color:oklch(16% .03 75)}
.toggle .save{font:700 0.625rem var(--f-m);letter-spacing:.06em;margin-left:6px;opacity:.75}
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:stretch;text-align:left}
.plan{position:relative;display:flex;flex-direction:column;gap:22px;border-radius:24px;padding:34px;border:1px solid var(--line2);background:linear-gradient(170deg,oklch(17% .015 76 / .6),oklch(13% .01 72 / .55));transition:transform .4s var(--ease),border-color .4s,box-shadow .4s}
.plan:hover{transform:translateY(-8px);border-color:oklch(72% .14 45 / .35)}
.plan.pop{border-color:oklch(70% .16 45 / .5);background:linear-gradient(170deg,oklch(22% .04 45 / .65),oklch(14% .014 74 / .7));box-shadow:0 40px 100px oklch(0 0 0 / .5),0 0 70px oklch(64% .17 42 / .14)}
.pbadge{position:absolute;top:-13px;left:50%;transform:translateX(-50%);font:700 0.625rem var(--f-m);letter-spacing:.24em;text-transform:uppercase;color:oklch(16% .03 75);background:linear-gradient(135deg,var(--accent),var(--accent-2));padding:7px 16px;border-radius:999px;white-space:nowrap}
.pname{font:800 1.3125rem var(--f-d)}
.pdesc{color:var(--muted);font-size:0.84375rem;margin-top:6px}
.price{display:flex;align-items:baseline;gap:4px}
.price .cur{font:600 1.375rem var(--f-d);color:var(--muted)}
.price .amt{font:900 3.625rem/1 var(--f-d);font-stretch:106%}
.price .per{font:400 0.75rem var(--f-m);color:var(--faint);margin-left:6px;letter-spacing:.08em}
.plan ul{list-style:none;display:grid;gap:12px;font-size:0.90625rem;color:var(--muted);flex:1}
.plan li{display:flex;gap:11px;align-items:baseline}
.plan li.muted{opacity:.38}
.plan .btn{width:100%}
/* faq */
.faq-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(40px,5vw,90px);align-items:start}
.acc details{border-bottom:1px solid var(--line2)}
.acc summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:24px 4px;font:700 1.09375rem var(--f-d);transition:color .3s}
.acc summary::-webkit-details-marker{display:none}
.acc summary:hover{color:var(--accent)}
.pm{font:400 1.5rem/1 var(--f-s);color:var(--accent);transition:transform .35s var(--ease);flex:none}
.acc details[open] .pm{transform:rotate(45deg)}
.a-body{padding:0 4px 26px;color:var(--muted);max-width:64ch;font-size:0.9375rem}
/* finale */
.finale{position:relative;text-align:center;padding:clamp(120px,15vw,220px) 0;overflow:clip}
.glow-burst{position:absolute;left:50%;top:50%;width:1100px;height:1100px;transform:translate(-50%,-50%);background:radial-gradient(circle,oklch(62% .17 42 / .18),transparent 55%),conic-gradient(from 0deg,transparent 0 40deg,oklch(72% .15 45 / .05) 60deg,transparent 80deg 160deg,oklch(72% .15 45 / .05) 180deg,transparent 200deg 280deg,oklch(72% .15 45 / .05) 300deg,transparent 320deg);animation:spin 40s linear infinite;pointer-events:none}
.fin-title{font-size:clamp(3rem,7vw,6.875rem);text-transform:uppercase;font-stretch:112%;font-weight:900}
.fin-title .it{text-transform:none}
/* footer */
footer{border-top:1px solid var(--line2);position:relative;overflow:clip}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;padding:70px 0 50px}
.f-brand p{color:var(--faint);font-size:0.84375rem;max-width:30ch;margin-top:16px}
.f-col h5{font:400 0.6875rem var(--f-m);letter-spacing:.26em;text-transform:uppercase;color:var(--faint);margin-bottom:18px}
.f-col a{display:block;color:var(--muted);font-size:0.90625rem;padding:5px 0}
.f-col a:hover{color:var(--cream)}
.socials{display:flex;gap:10px;margin-top:22px}
.socials a{width:38px;height:38px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;color:var(--muted);transition:.3s}
.socials a:hover{color:var(--accent);border-color:var(--accent);transform:translateY(-3px)}
.foot-bottom{display:flex;justify-content:space-between;gap:20px;padding:22px 0 26px;border-top:1px solid var(--line2);font:400 0.75rem var(--f-m);letter-spacing:.06em;color:var(--faint);flex-wrap:wrap}
/* tweaks */
.tw-fab{position:fixed;left:20px;bottom:20px;z-index:115;display:inline-flex;align-items:center;gap:9px;font:600 0.78125rem var(--f-d);color:var(--cream);background:oklch(16% .014 75 / .85);border:1px solid var(--line);border-radius:999px;padding:10px 18px;cursor:pointer;backdrop-filter:blur(12px);transition:.3s}
.tw-fab:hover{border-color:var(--accent);color:var(--accent)}
.tweaks{position:fixed;left:20px;bottom:74px;z-index:116;width:270px;background:oklch(14% .012 72 / .95);border:1px solid var(--line);border-radius:18px;backdrop-filter:blur(20px);box-shadow:0 30px 80px oklch(0 0 0 / .6);opacity:0;pointer-events:none;transform:translateY(14px);transition:.35s var(--ease)}
.tweaks.open{opacity:1;pointer-events:auto;transform:none}
.tw-head{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;border-bottom:1px solid var(--line2);font:700 0.8125rem var(--f-d)}
.tw-head button{background:none;border:none;color:var(--muted);font-size:1.125rem;cursor:pointer}
.tw-body{padding:16px 18px 20px;display:grid;gap:14px}
.tw-sec{font:400 0.625rem var(--f-m);letter-spacing:.24em;text-transform:uppercase;color:var(--faint)}
.tw-toggle{display:flex;justify-content:space-between;align-items:center;font-size:0.84375rem;color:var(--muted);cursor:pointer}
.tw-switch{width:36px;height:20px;border-radius:999px;background:oklch(28% .01 75);position:relative;transition:.3s;flex:none}
.tw-switch::after{content:"";position:absolute;top:3px;left:3px;width:14px;height:14px;border-radius:50%;background:var(--cream);transition:.3s var(--ease)}
.tw-toggle.on .tw-switch{background:linear-gradient(135deg,var(--accent),var(--accent-2))}
.tw-toggle.on .tw-switch::after{left:19px;background:oklch(16% .02 75)}
/* mobile menu */
.scrim{position:fixed;inset:0;background:oklch(0 0 0/.6);backdrop-filter:blur(4px);z-index:118;opacity:0;pointer-events:none;transition:.35s}
.scrim.show{opacity:1;pointer-events:auto}
.mobile-menu{position:fixed;top:0;right:0;bottom:0;width:min(340px,88vw);background:oklch(13% .012 72 / .97);border-left:1px solid var(--line);z-index:119;padding:26px;transform:translateX(102%);transition:transform .45s var(--ease);display:flex;flex-direction:column;gap:6px}
.mobile-menu.open{transform:none}
.mm-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:26px}
.mm-close{background:none;border:none;color:var(--cream);font-size:1.625rem;cursor:pointer}
.mobile-menu a{color:var(--muted);font:600 1.1875rem var(--f-d);padding:13px 0;border-bottom:1px solid var(--line2)}
.mobile-menu a:hover{color:var(--cream)}
/* responsive */
@media (max-width:1080px){
.hero-inner{grid-template-columns:1fr;gap:10px}
.stage{height:auto;padding:40px 0 10px}
.disc{width:min(64vw,420px)}
.chip-pay{right:0;top:0}.chip-now{left:0;bottom:4%}
.royal-grid,.studio-grid,.faq-grid{grid-template-columns:1fr}
.numbers-grid{grid-template-columns:1fr 1fr}
.store-grid{grid-template-columns:repeat(3,1fr)}
.plans{grid-template-columns:1fr;max-width:520px;margin:0 auto}
.foot-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
.nav-links,.login{display:none}
.nav .menu-btn{display:inline-flex}
.h-title{font-size:clamp(2.75rem,12.5vw,4.5rem)}
.store-grid{grid-template-columns:1fr 1fr}
.numbers-grid{grid-template-columns:1fr 1fr}
.quote{width:78vw}
.foot-grid{grid-template-columns:1fr;gap:30px}
.tw-fab{left:14px;bottom:14px}
.tweaks{left:14px;right:14px;width:auto}
}
/* ===== page-snap layout + 3D objects ===== */
section[data-page],footer[data-page]{scroll-margin-top:0}
.sec,.finale{min-height:100svh;display:grid;align-content:center}
footer{min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end}
.coin-scene{position:absolute;top:-30px;right:18px;width:74px;height:74px;perspective:800px;z-index:4;filter:drop-shadow(0 16px 26px oklch(0 0 0 / .5))}
.coin{width:100%;height:100%;transform-style:preserve-3d;animation:coinspin 5.5s linear infinite}
@keyframes coinspin{to{transform:rotateY(360deg)}}
.cface{position:absolute;inset:0;border-radius:50%;backface-visibility:hidden;display:grid;place-items:center;background:radial-gradient(circle at 35% 30%,#FFC9A4,#FF7847 58%,#B8431F);box-shadow:inset 0 0 0 3px oklch(100% 0 0 / .3),inset 0 0 16px oklch(42% .12 35 / .8);color:#651F0C;font:800 1.875rem var(--f-d);transform:translateZ(1.5px)}
.cface svg{width:58%;height:58%}
.cf-back{transform:rotateY(180deg) translateZ(1.5px)}
.coin-lg{position:relative;top:auto;right:auto;width:112px;height:112px;margin:0 auto 34px}
body.no-spin .coin,body.no-spin .ring,body.no-spin .c-body,body.no-spin .spool{animation-play-state:paused}
.cassette{position:absolute;right:6%;top:12%;perspective:700px;z-index:1;filter:drop-shadow(0 30px 40px oklch(0 0 0 / .5))}
.c-body{width:216px;background:linear-gradient(170deg,oklch(25% .02 76),oklch(15% .012 70));border:1px solid var(--line);border-radius:14px;padding:12px;transform-style:preserve-3d;animation:cass3d 9s ease-in-out infinite}
@keyframes cass3d{0%,100%{transform:rotateY(-14deg) rotateX(7deg) rotate(5deg) translateY(0)}50%{transform:rotateY(14deg) rotateX(-7deg) rotate(2deg) translateY(-16px)}}
.c-label{font:700 0.5625rem var(--f-m);letter-spacing:.22em;color:oklch(25% .07 35);background:linear-gradient(90deg,#FFA36B,#FF6A3D);border-radius:6px;padding:6px 8px;text-align:center}
.c-window{margin-top:10px;background:oklch(10% .008 70);border:1px solid var(--line2);border-radius:9px;display:flex;align-items:center;padding:9px 14px}
.spool{width:27px;height:27px;border-radius:50%;border:2px dashed oklch(74% .1 45 / .8);animation:spin 2.6s linear infinite;position:relative;flex:none}
.spool::after{content:"";position:absolute;inset:7px;border-radius:50%;background:oklch(30% .02 75)}
.tape-fill{flex:1;height:8px;margin:0 12px;border-radius:4px;background:repeating-linear-gradient(90deg,oklch(30% .035 60) 0 3px,oklch(20% .02 60) 3px 6px)}
@media (max-width:1080px){.cassette{display:none}}
@media (max-height:840px){.sec{padding:clamp(48px,6vh,80px) 0}.sec-head{margin-bottom:clamp(24px,3.5vw,44px)}.finale{padding:60px 0}.royal-extras{margin-top:24px;padding-top:20px}.steps{margin-top:26px}}

/* ===== informative section add-ons ===== */
.royal-extras{grid-column:1/-1;display:grid;grid-template-columns:1.35fr 1fr 1fr 1fr;gap:26px;margin-top:38px;padding-top:30px;border-top:1px solid var(--line2);align-items:center}
.flow{display:flex;align-items:center;gap:10px}
.fnode{font:700 0.65625rem var(--f-m);letter-spacing:.14em;border:1px solid var(--line);border-radius:999px;padding:9px 14px;color:var(--muted);white-space:nowrap}
.fnode.hi{color:oklch(16% .03 40);background:linear-gradient(135deg,var(--accent),var(--accent-2));border-color:transparent}
.fdash{flex:1;height:1px;min-width:22px;background:repeating-linear-gradient(90deg,var(--accent) 0 6px,transparent 6px 12px);animation:dashmove 1.1s linear infinite}
@keyframes dashmove{to{background-position:12px 0}}
.rx b{font-size:0.90625rem;display:block}
.rx .sub{font:400 0.6875rem var(--f-m);color:var(--faint);letter-spacing:.03em;display:block;margin-top:5px}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;max-width:880px;margin:36px auto 0;text-align:left}
.step{border:1px solid var(--line2);border-radius:16px;padding:18px 20px;background:oklch(15% .012 72 / .5)}
.sn{font:700 0.6875rem var(--f-m);color:var(--accent);letter-spacing:.2em}
.step b{display:block;margin:9px 0 4px;font-size:0.9375rem}
.step .sub{font:400 0.71875rem var(--f-m);color:var(--faint)}
.disc-mini{width:150px;height:150px;border-radius:50%;margin-top:38px;position:relative;background:radial-gradient(circle at 34% 28%,oklch(30% .01 70 / .9),transparent 44%),repeating-radial-gradient(circle,oklch(13% .008 70) 0 1.1px,oklch(19% .012 75) 1.1px 2.3px),oklch(14% .01 70);box-shadow:0 24px 50px oklch(0 0 0 / .5);animation:spin 7s linear infinite,float 8s ease-in-out infinite}
.dm-label{position:absolute;inset:33%;border-radius:50%;background:radial-gradient(circle at 38% 32%,oklch(80% .14 50),oklch(66% .18 40) 50%,oklch(50% .17 32));display:grid;place-items:center;font:900 1.625rem var(--f-d);color:oklch(22% .06 35)}
body.no-spin .disc-mini{animation-play-state:paused}
@media (max-width:1080px){.royal-extras{grid-template-columns:1fr 1fr}.steps{grid-template-columns:1fr;max-width:520px}.disc-mini{display:none}}
@media (max-width:760px){.royal-extras{grid-template-columns:1fr}}

/* ===== one-screen-per-section refinements ===== */
.quotes-mq{margin-top:clamp(26px,4.5vh,46px);border-top:1px solid var(--line2);padding-top:clamp(18px,3vh,30px)}
.quote{width:400px}
.plan-foot{margin-top:32px;font:400 0.65625rem var(--f-m);letter-spacing:.18em;color:var(--faint);text-transform:uppercase;text-align:center}
#numbers .cassette{right:5%;top:10%}
@media (max-width:1360px){.cassette{display:none}}
@media (max-height:960px){
.hero{padding-top:calc(var(--nav-h) + 12px)}
.h-title{font-size:clamp(2.375rem,4.6vw,4rem);margin:16px 0 14px}
.lede{font-size:0.9375rem}
.hero-cta{margin:20px 0 16px}
.hero-cta .btn-lg{padding:13px 24px;font-size:0.9375rem}
.hero-meta{font-size:0.6875rem}
.stage{height:min(37vw,460px)}
.disc{width:min(27vw,360px)}
.dsp-band{margin-top:16px;padding-bottom:12px}
.band-cap{margin-bottom:8px}
.dsp{padding:5px 26px}
.dsp b{font-size:0.84375rem}
.dsp svg{width:20px;height:20px}
.sec{padding:clamp(36px,5vh,60px) 0}
.sec-title{font-size:clamp(1.875rem,3.8vw,3.25rem)}
.sec-head{margin-bottom:clamp(16px,3vh,32px)}
.sec-sub{margin-top:10px;font-size:0.90625rem}
.num-card{padding:18px 22px}
.num-card .n{font-size:clamp(2rem,3.4vw,3rem)}
.num-card .t{font-size:0.875rem;margin-top:10px}
.quotes-mq .qt{font-size:1rem}
.card{padding:20px}
.fic{width:38px;height:38px;margin-bottom:12px}
.card h3{font-size:1.125rem}
.card p{font-size:0.84375rem}
.calc-card{padding:22px 24px}
.payout-num{font-size:clamp(2.375rem,3.4vw,3.25rem);margin-top:10px}
.calc-break{margin-top:14px;gap:5px}
.calc-brow{font-size:0.78125rem}
.calc-controls{margin-top:18px}
.calc-foot{margin-top:12px}
.calc-card .btn{margin-top:16px!important;padding:12px 20px}
.royal-extras{margin-top:18px;padding-top:14px;gap:16px}
.rx b{font-size:0.8125rem}
.deep-list{margin-top:18px}
.deep-item{padding:10px 12px}
.di{width:38px;height:38px}
.studio-body{padding:14px;gap:10px}
.s-card{padding:12px 14px}
.big{font-size:1.4375rem}
.bars{height:42px;margin-top:10px}
.plans{gap:14px}
.plan{padding:20px 22px;gap:13px}
.price .amt{font-size:2.5rem}
.price .cur{font-size:1.0625rem}
.plan ul{gap:7px;font-size:0.78125rem}
.pname{font-size:1.125rem}
.pdesc{font-size:0.75rem}
.plan .btn-lg{padding:12px 20px;font-size:0.875rem}
.toggle{margin:14px 0 24px}
.plan-foot{margin-top:20px}
.acc summary{padding:14px 4px;font-size:0.9375rem}
.a-body{padding:0 4px 14px;font-size:0.8125rem}
.disc-mini{width:104px;height:104px;margin-top:20px}
.finale{padding:40px 0}
.coin-lg{width:82px;height:82px;margin:0 auto 18px}
.fin-title{font-size:clamp(2.25rem,4.8vw,4.25rem)}
.steps{margin-top:20px;gap:10px}
.step{padding:12px 16px}
.step b{font-size:0.84375rem;margin:6px 0 3px}
.step .sub{font-size:0.65625rem}
.foot-grid{padding:40px 0 26px;gap:24px}
}

/* ===== distribution pipeline ===== */
.pipe{display:grid;grid-template-columns:1fr 30px 1fr 30px 1fr 30px 1fr;align-items:stretch}
.pnode{padding:24px 22px;border-radius:20px}
.pstep{font:700 0.625rem var(--f-m);letter-spacing:.24em;color:var(--accent)}
.pnode .fic{margin:16px 0 14px;width:42px;height:42px}
.pnode h3{font-size:1.1875rem}
.pnode p{font-size:0.84375rem}
.ptag{display:inline-block;margin-top:16px;font:700 0.59375rem var(--f-m);letter-spacing:.16em;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:6px 11px;white-space:nowrap}
.plink{align-self:center;height:1px;background:repeating-linear-gradient(90deg,var(--accent) 0 6px,transparent 6px 12px);animation:dashmove 1.1s linear infinite;margin:0 3px}
.toolrow{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:clamp(20px,3.4vh,34px);border-top:1px solid var(--line2);padding-top:clamp(18px,3vh,30px)}
.trow{display:flex;gap:14px;align-items:center}
.ti{width:42px;height:42px;flex:none;border-radius:12px;display:grid;place-items:center;color:var(--accent);border:1px solid oklch(70% .16 45 / .25);background:oklch(70% .16 45 / .1)}
.trow b{font-size:0.9375rem;display:block}
.trow .sub{font:400 0.625rem var(--f-m);letter-spacing:.06em;color:var(--faint)}
/* ===== stores tape band ===== */
.tape-band{position:relative;height:clamp(150px,20vh,200px);margin:clamp(8px,2vh,24px) 0 clamp(16px,2.6vh,30px)}
.tape{position:absolute;left:-4%;right:-4%;top:50%;padding:13px 0;overflow:hidden}
.tape-track{display:flex;align-items:center;width:max-content;animation:mq var(--dur,32s) linear infinite}
.tape-b .tape-track{animation-direction:reverse;--dur:44s}
body.no-mq .tape-track{animation-play-state:paused}
.tape-a{transform:translateY(-42%) rotate(-3deg);background:linear-gradient(90deg,var(--accent-2),var(--accent));box-shadow:0 24px 70px oklch(62% .17 42 / .3);z-index:2}
.tape-b{transform:translateY(-62%) rotate(2.4deg);background:oklch(16% .014 74 / .92);border-block:1px solid var(--line2)}
.tp{font:800 1.5rem var(--f-d);font-stretch:106%;text-transform:uppercase;letter-spacing:.04em;padding:0 24px;white-space:nowrap}
.tape-a .tp{color:oklch(20% .06 40)}
.tape-b .tp{color:transparent;-webkit-text-stroke:1px oklch(72% .04 60 / .55)}
.star{font-size:0.75rem}
.tape-a .star{color:oklch(24% .07 40)}
.tape-b .star{color:oklch(72% .04 60 / .5)}
.store{display:flex;align-items:center;gap:14px;padding:15px 17px;border-radius:16px;border:1px solid var(--line2);background:oklch(15% .012 72 / .55);transition:transform .35s var(--ease),border-color .35s,box-shadow .35s}
.store:hover{transform:translateY(-4px);border-color:oklch(72% .14 45 / .35);box-shadow:0 20px 50px oklch(0 0 0 / .4)}
.pg{width:42px;height:42px;border-radius:11px;flex:none;box-shadow:inset 0 0 0 1px oklch(100% 0 0 / .18)}
.store b{font-size:0.90625rem;display:block}
.store .sub{font:400 0.625rem var(--f-m);letter-spacing:.05em;color:var(--faint)}
@media (max-width:1080px){.pipe{grid-template-columns:1fr 1fr;gap:14px}.plink{display:none}.toolrow{grid-template-columns:1fr;gap:12px}}
@media (max-height:960px){
.pnode{padding:16px 18px}
.pnode .fic{margin:12px 0 10px;width:38px;height:38px}
.pnode h3{font-size:1.03125rem}
.pnode p{font-size:0.78125rem}
.ptag{margin-top:12px;padding:5px 9px}
.toolrow{margin-top:16px;padding-top:14px}
.ti{width:36px;height:36px}
.trow b{font-size:0.875rem}
.tape-band{height:132px;margin:6px 0 14px}
.tp{font-size:1.1875rem;padding:0 18px}
.tape{padding:10px 0}
.store{padding:11px 13px;gap:11px}
.pg{width:36px;height:36px}
.store b{font-size:0.84375rem}
.calc-card-top{padding-right:60px}
}

/* ===== final: living sections + auto-hide nav ===== */
.nav{transition:transform .55s var(--ease),background .4s,border-color .4s,backdrop-filter .4s}
.nav.hidden{transform:translateY(-112%)}
.nav-hot{position:fixed;top:0;left:0;right:0;height:16px;z-index:109}
.progress{pointer-events:none}
.spark{pointer-events:none}
.chip{text-align:left}
.sec-head{position:relative}
.numbers-grid{position:relative}
.pipe{position:relative}
.studio-scene{position:relative}
.coin-float{position:absolute;width:56px;height:56px;perspective:600px;filter:drop-shadow(0 14px 22px oklch(0 0 0 / .5));animation:float 8s ease-in-out infinite;z-index:3}
.coin-float .cface{font-size:1.4375rem}
.coin-b{top:auto;right:auto;bottom:-24px;left:-22px;width:54px;height:54px}
.coin-b .cface{font-size:1.3125rem}
.ring-bg{position:absolute;left:50%;top:52%;width:min(56vw,860px);aspect-ratio:1;translate:-50% -50%;border:1px dashed oklch(85% .06 85 / .11);border-radius:50%;animation:spin 90s linear infinite;pointer-events:none}
.coin-lg{position:relative}
.ringx{position:absolute;inset:-56%;border:1px dashed oklch(85% .06 85 / .2);border-radius:50%;animation:spin 30s linear infinite;pointer-events:none}
.ringx i{position:absolute;top:-3px;left:50%;width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 12px var(--accent)}
body.no-spin .ring-bg,body.no-spin .ringx{animation-play-state:paused}
.faq-extras{display:grid;gap:16px;margin-top:32px;max-width:320px}
.foot-word{font:900 clamp(5.25rem,13.5vw,13.125rem)/.92 var(--f-d);font-stretch:114%;text-align:center;letter-spacing:.04em;color:transparent;-webkit-text-stroke:1px oklch(85% .06 85 / .16);user-select:none;margin:36px 0 8px;mask:linear-gradient(180deg,#000 24%,oklch(0 0 0 / .3) 82%,transparent)}
@keyframes breathe{0%,100%{filter:brightness(1)}50%{filter:brightness(1.17) saturate(1.07)}}
body.pulse-on :is(.btn-gold,.vlabel,.cface,.dm-label,.c-label,.pbadge,.fnode.hi,.tape-a){animation:breathe 3.4s ease-in-out infinite}
@media (max-width:1200px){.schip{display:none}}
@media (max-width:760px){.studio-scene .chip,.coin-b{display:none}.foot-word{-webkit-text-stroke-width:.6px}}
@media (max-height:840px){.faq-extras{margin-top:18px;gap:10px}}

/* ===== company-profile sections ===== */
.routes{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.route h3{margin:14px 0 10px;font-size:1.375rem}
.route p{font-size:0.90625rem;max-width:58ch}
.fund-flow{margin-top:clamp(22px,3.5vh,40px);border-top:1px solid var(--line2);padding-top:clamp(20px,3vh,32px)}
.fund-flow .fnode{white-space:normal;text-align:center;line-height:1.55}
.talent-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(40px,5vw,80px);align-items:center}
.ref-side{position:relative}
.ref-side .chip{pointer-events:none}
.ref-rows{display:grid;gap:16px;margin-top:24px;border-top:1px solid var(--line2);padding-top:22px}
.f-addr{font:400 0.65625rem var(--f-m);letter-spacing:.05em;color:var(--faint);margin-top:18px;max-width:38ch;line-height:1.9}
.plans.p4{grid-template-columns:repeat(4,1fr);gap:16px;margin-top:clamp(26px,4.5vh,48px)}
.plans.p4 .plan{padding:26px 22px;gap:16px}
.plans.p4 .price .amt{font-size:2.75rem}
.plans.p4 .plan ul{font-size:0.8125rem;gap:9px}
.plans.p4 .pname{font-size:1.1875rem}
.plans.p4 .btn-lg{padding:13px 18px;font-size:0.84375rem}
@media (max-width:1080px){.plans.p4{grid-template-columns:1fr 1fr;max-width:780px;margin-inline:auto}.routes{grid-template-columns:1fr}.talent-grid{grid-template-columns:1fr}.toolrow{grid-template-columns:1fr 1fr;gap:14px}.fund-flow .flow{flex-wrap:wrap;gap:10px}.fund-flow .fdash{min-width:16px}}
@media (max-width:760px){.plans.p4{grid-template-columns:1fr;max-width:520px}.ref-side .chip{display:none}.toolrow{grid-template-columns:1fr;gap:12px}.route p{max-width:none}}
@media (max-height:960px){.route{padding:18px 20px}.route h3{font-size:1.125rem;margin:10px 0 7px}.route p{font-size:0.8125rem}.plans.p4 .plan{padding:17px 18px;gap:12px}.plans.p4 .price .amt{font-size:2.125rem}.plans.p4 .plan ul{font-size:0.75rem;gap:6px}.plans.p4 .pdesc{font-size:0.71875rem}.plans.p4 .btn-lg{padding:11px 16px;font-size:0.8125rem}.ref-card{padding:22px 24px}.ref-rows{margin-top:16px;padding-top:14px;gap:10px}.fund-flow .fnode{font-size:0.59375rem;padding:8px 12px}}

/* ===== fun: musical notes + needle drop ===== */
.note{position:absolute;font-size:1.1875rem;color:var(--accent);opacity:.55;pointer-events:none;text-shadow:0 0 14px oklch(70% .16 45 / .5);animation:notebob 5.5s ease-in-out infinite;z-index:1}
@keyframes notebob{0%,100%{transform:translateY(0) rotate(-8deg);opacity:.22}50%{transform:translateY(-16px) rotate(10deg);opacity:.85}}
.fund-cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:clamp(20px,3vh,36px)}
.disc-wrap{cursor:pointer}
.disc.scratch{animation:spin 8s linear infinite,scratch .85s var(--ease)}
@keyframes scratch{0%{rotate:0deg}28%{rotate:-16deg}62%{rotate:10deg}100%{rotate:0deg}}
body.no-spin .note{animation-play-state:paused}
/* ===== ADAPTIVE — fluid full-bleed + mobile ===== */
:root{--gut:clamp(18px,3.4vw,52px);--maxw:1240px;--maxw-wide:1360px}
.wrap{width:min(var(--maxw),100% - var(--gut) * 2)}
.nav-inner,.hero-inner,.band-cap{width:min(var(--maxw-wide),100% - var(--gut) * 2)}
.calc-slider::-moz-range-thumb{width:24px;height:24px;border-radius:50%;background:radial-gradient(circle at 35% 30%,oklch(82% .13 50),var(--accent-2));border:2px solid oklch(20% .02 75)}
html.menu-open,html.menu-open body{overflow:hidden}
@media (min-width:1660px){:root{--maxw:1400px;--maxw-wide:1560px;--nav-h:86px}body{font-size:1.125rem}.stage{height:min(44vw,680px)}.disc{width:min(32vw,540px)}.quote{width:480px}.dsp{padding:12px 40px}}
@media (min-width:2000px){:root{--maxw:1580px;--maxw-wide:1740px}body{font-size:1.1875rem}.disc{width:min(29vw,600px)}.stage{height:min(40vw,740px)}}
@media (min-height:1000px) and (min-width:1100px){.sec{padding:clamp(90px,11vh,170px) 0}.num-card{padding:clamp(34px,3.4vw,54px) clamp(26px,2.6vw,42px)}.pnode{padding:30px 28px}.store{padding:19px 20px}.acc summary{padding:29px 4px}.steps{max-width:1020px}.deep-item{padding:22px}}
@media (max-width:1180px){.nav-links{gap:22px;font-size:0.8625rem}.nav-cta{gap:14px}}
@media (max-width:1080px){.hero{min-height:100svh;padding-bottom:6px}.pipe{grid-template-columns:1fr 1fr;gap:16px}.royal-extras{grid-template-columns:1fr 1fr}.studio{transform:rotateX(9deg) translateY(20px)}}
@media (max-width:920px){.nav-links,.login{display:none}.nav .menu-btn{display:inline-flex}.store-grid{grid-template-columns:1fr 1fr}}
@media (max-width:760px){
:root{--nav-h:64px;--gut:18px}
body{font-size:1rem}
.sec,.finale{padding:clamp(66px,10vh,104px) 0}
footer{min-height:auto}
.hero{padding-top:calc(var(--nav-h) + 16px)}
.h-title{font-size:clamp(2.375rem,11.4vw,3.75rem);margin:16px 0 18px}
.lede{font-size:0.96875rem}
.hero-cta{gap:12px;margin:24px 0 22px}
.hero-cta .btn,.finale .hero-cta .btn,.fund-cta .btn{flex:1 1 100%;min-height:52px}
.hero-meta{gap:10px 18px;font-size:0.6875rem}
.stage{padding:26px 0 0}
.disc{width:min(66vw,320px)}
.chip{padding:9px 12px;border-radius:13px;backdrop-filter:none}
.chip b{font-size:0.8125rem}.chip span.sub{font-size:0.59375rem}
.chip-pay{right:-4px;top:0}.chip-now{left:-6px;bottom:2%}
.cover{width:32px;height:32px}
.dsp{padding:8px 20px}.dsp b{font-size:0.84375rem}.dsp svg{width:20px;height:20px}
.band-cap{font-size:0.59375rem;letter-spacing:.22em;gap:12px}
.sec-title{font-size:clamp(1.9375rem,9.2vw,3rem)}
.sec-sub{font-size:0.9375rem}
.numbers-grid{grid-template-columns:1fr 1fr}
.num-card{padding:20px 16px}
.num-card .n{font-size:clamp(2.0625rem,9.6vw,2.75rem)}
.num-card .t{font-size:0.84375rem;margin-top:9px}
.num-card .s{font-size:0.59375rem}
.pipe{grid-template-columns:1fr 1fr;gap:10px}
.pnode{padding:16px 14px;border-radius:16px}
.pnode h3{font-size:1rem}.pnode p{font-size:0.78125rem}
.ptag{font-size:0.53125rem;padding:5px 8px;margin-top:12px;white-space:normal}
.calc-card{padding:22px 20px;border-radius:20px}
.calc-card-top{padding-right:0}
.calc-streams{font-size:1.875rem}
.calc-slider{height:6px}
.calc-slider::-webkit-slider-thumb{width:30px;height:30px}
.payout-num{font-size:clamp(2.625rem,12vw,3.625rem)}
.route h3{font-size:1.0625rem}
.fund-flow .fnode{font-size:0.5625rem;padding:7px 11px}
.studio-body{padding:12px;gap:10px}
.s-row{grid-template-columns:1fr}
.big{font-size:1.625rem}
.studio{transform:none!important;border-radius:14px}
.deep-list{margin-top:24px}
.deep-item{padding:12px 10px}
.ref-card{padding:22px 20px}
.store-grid{gap:10px}
.store{padding:12px;gap:10px;border-radius:13px}
.store b{font-size:0.8125rem}.store .sub{font-size:0.5625rem}
.pg{width:34px;height:34px;border-radius:9px}
.tape-band{height:118px;margin:6px 0 18px}
.tp{font-size:1rem;padding:0 14px}
.acc summary{padding:17px 2px;font-size:0.9375rem}
.a-body{font-size:0.84375rem;padding:0 2px 18px}
.faq-extras{grid-template-columns:1fr 1fr;max-width:none;margin-top:22px;gap:14px}
.steps{grid-template-columns:1fr;gap:10px;max-width:none;margin-top:24px}
.fin-title{font-size:clamp(2.3125rem,11.6vw,3.875rem)}
.foot-word{margin:22px 0 4px}
.foot-grid{grid-template-columns:1fr 1fr;gap:24px;padding:44px 0 30px}
.f-brand{grid-column:1/-1}
.f-brand p{max-width:44ch}
.f-col a{padding:8px 0}
.socials a{width:44px;height:44px}
.foot-bottom{justify-content:center;text-align:center;font-size:0.65625rem;gap:9px}
.quote{width:min(84vw,380px);padding:0 20px}
.qt{font-size:1.0625rem}
.royal-extras{grid-template-columns:1fr;gap:14px;margin-top:22px}
.flow{flex-wrap:wrap;gap:8px}
.btn-lg{padding:15px 24px;font-size:0.9375rem}
.btn{min-height:46px}
.tw-fab{padding:9px 15px;font-size:0.71875rem}
.mobile-menu a{padding:15px 0}
.note{font-size:0.9375rem}
}
@media (max-width:520px){
.nav-cta .btn-gold{display:none}
.numbers-grid,.pipe{grid-template-columns:1fr}
.num-card{padding:15px 18px;display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.num-card .n{font-size:2.125rem}
.num-card .t{margin-top:0}
.num-card .s{flex:1 1 100%}
.faq-extras,.store-grid{grid-template-columns:1fr}
.foot-grid{grid-template-columns:1fr}
.tape-band{height:104px}
}
@media (hover:none){
.grain{animation:none;opacity:.045}
.cursor-glow{display:none}
.card::after{display:none}
.tw-toggle[data-key="tilt"],.tw-toggle[data-key="glow"]{display:none}
}
@media (max-width:999px){.tw-body .tw-sec:first-child,.tw-toggle[data-key="snap"]{display:none}}
@media (max-height:560px) and (orientation:landscape) and (pointer:coarse){
.hero,.sec,.finale,footer{min-height:auto}
.stage,.tape-band{display:none}
.hero{padding-bottom:20px}
}

/* ===== layout guard: wide content (marquees, tick rows) must never blow out a section column ===== */
.sec,.finale,footer{grid-template-columns:minmax(0,1fr)}
.sec>.wrap,.finale>.wrap,footer>.wrap{min-width:0;margin-inline:auto;max-width:100%}
.calc-ticks,.dsp-band,.tape-band,.band-cap{min-width:0;max-width:100%}
.mq,.quotes-mq{min-width:0;max-width:100%}
/* NOT .mq-track: the track has to be wider than its container — that overflow
   is what there is to scroll. .mq clips it, so it can never blow out the row. */
.mq-track{min-width:0}
.mq{overflow:hidden}

/* ============================================================
   MOBILE BUILD — html.is-mobile (≤820px, set at load)
   ============================================================ */
.swipe{display:none}
html.is-mobile{--nav-h:58px;--gut:max(16px,env(safe-area-inset-left))}
html.is-mobile body{font-size:1rem}
/* chrome */
html.is-mobile .nav{background:oklch(11% .01 70 / .9);backdrop-filter:blur(16px);border-bottom:1px solid var(--line2);transform:none!important}
html.is-mobile .nav-links,html.is-mobile .login,html.is-mobile .tw-fab,html.is-mobile .tweaks,html.is-mobile .cursor-glow,html.is-mobile .cassette,html.is-mobile .schip,html.is-mobile .coin-scene,html.is-mobile .disc-mini,html.is-mobile .ring-bg,html.is-mobile .orbit{display:none!important}
html.is-mobile .menu-btn{display:inline-flex;min-height:40px;padding:9px 13px;font-size:0.75rem}
html.is-mobile .nav-cta{gap:9px}
html.is-mobile .nav-cta .btn-gold{display:inline-flex;min-height:40px;padding:9px 14px;font-size:0.78125rem;white-space:nowrap}
html.is-mobile .nav-cta .btn-gold .rupee{display:none}
@media (max-width:374px){html.is-mobile .nav-cta .btn-gold{display:none}}
html.is-mobile .nav .brand .mark-lockup{height:1.5rem}
/* Narrow nav: the wide lockup crowds the menu button and CTA, so fall back to
   the square mark. The drawer and footer keep the full lockup — they have room. */
@media (max-width:430px){
.nav .brand .mark-lockup{display:none}
.nav .brand .mark-icon{display:block}
}
html.is-mobile .grain{animation:none;opacity:.04}
html.is-mobile .spark{font-size:0.625rem;opacity:.5}
html.is-mobile .note{font-size:0.9375rem}
html.is-mobile .card::after{display:none}
/* full-screen menu */
html.is-mobile .mobile-menu{width:100%;max-width:none;padding:calc(18px + env(safe-area-inset-top)) 22px calc(26px + env(safe-area-inset-bottom))}
html.is-mobile .mobile-menu a{padding:16px 0;font-size:1.3125rem;border-bottom:1px solid var(--line2)}
html.is-mobile .mm-close{width:44px;height:44px;font-size:1.625rem}
/* rhythm */
html.is-mobile .sec,html.is-mobile .finale{padding:58px 0;min-height:0}
html.is-mobile [data-page]{min-height:0}
html.is-mobile .sec-head{margin-bottom:26px}
html.is-mobile .s-eyebrow{font-size:0.65625rem;letter-spacing:.2em;gap:11px}
html.is-mobile .s-eyebrow .rule{flex:0 0 26px}
html.is-mobile .sec-title{font-size:clamp(2rem,9vw,2.75rem);margin-top:14px}
html.is-mobile .sec-sub{font-size:0.96875rem;margin-top:14px;max-width:none}
html.is-mobile .btn{min-height:48px}
html.is-mobile .btn-lg{padding:15px 22px;font-size:0.96875rem}
/* hero */
html.is-mobile .hero{min-height:0;padding:calc(var(--nav-h) + 30px) 0 8px}
html.is-mobile .hero-inner{grid-template-columns:1fr;gap:0}
html.is-mobile .h-title{font-size:clamp(2.5rem,12.4vw,3.625rem);margin:14px 0 16px}
html.is-mobile .lede{font-size:1rem;max-width:none}
html.is-mobile .hero-cta{flex-direction:column;gap:10px;margin:22px 0 20px}
html.is-mobile .hero-cta .btn{width:100%;justify-content:center}
html.is-mobile .hero-meta{gap:9px 16px;font-size:0.65625rem}
html.is-mobile .stage{height:auto;padding:16px 0 0}
html.is-mobile .disc{width:min(76vw,340px)}
html.is-mobile .chip{position:static;animation:none;backdrop-filter:none;padding:11px 14px;border-radius:14px}
html.is-mobile .stage .chip,html.is-mobile .studio-scene .chip,html.is-mobile .ref-side .chip{display:none}
html.is-mobile .dsp-band{margin-top:20px}
html.is-mobile .dsp{padding:8px 18px}
html.is-mobile .dsp b{font-size:0.84375rem}
html.is-mobile .band-cap{font-size:0.5625rem;letter-spacing:.2em;gap:10px}
/* numbers as clean rows */
html.is-mobile .numbers-grid{grid-template-columns:1fr;border-radius:16px;overflow:hidden}
html.is-mobile .num-card{padding:17px 18px;display:grid;grid-template-columns:auto 1fr;column-gap:16px;align-items:center}
html.is-mobile .num-card .n{font-size:2.125rem}
html.is-mobile .num-card .t{margin-top:0;font-size:0.90625rem}
html.is-mobile .num-card .s{grid-column:2;font-size:0.59375rem;margin-top:3px}
html.is-mobile .quotes-mq{margin-top:24px;padding-top:20px}
html.is-mobile .quote{width:min(80vw,320px);padding:0 18px}
html.is-mobile .qt{font-size:1.03125rem}
/* swipeable carousels — native mobile pattern */
html.is-mobile :is(.pipe,.plans,.routes){display:flex;overflow-x:auto;overflow-y:visible;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;gap:12px;margin-inline:calc(var(--gut) * -1);padding:2px var(--gut) 14px;scrollbar-width:none;grid-template-columns:none!important;max-width:none}
html.is-mobile :is(.pipe,.plans,.routes)::-webkit-scrollbar{display:none}
html.is-mobile .pnode{flex:0 0 80%;scroll-snap-align:center;padding:20px 18px}
html.is-mobile .plans .plan{flex:0 0 84%;scroll-snap-align:center;padding:24px 22px}
html.is-mobile .routes .route{flex:0 0 86%;scroll-snap-align:center}
html.is-mobile .swipe{display:flex;align-items:center;gap:8px;justify-content:center;font:400 0.59375rem var(--f-m);letter-spacing:.2em;text-transform:uppercase;color:var(--faint);margin-top:2px}
html.is-mobile .toolrow{grid-template-columns:1fr;gap:10px;margin-top:22px;padding-top:20px}
html.is-mobile .trow{gap:12px}
html.is-mobile .ti{width:38px;height:38px}
html.is-mobile .trow b{font-size:0.90625rem}
html.is-mobile .ptag{white-space:normal;font-size:0.53125rem;margin-top:12px}
/* royalty */
html.is-mobile .royal-grid,html.is-mobile .studio-grid,html.is-mobile .faq-grid,html.is-mobile .talent-grid{grid-template-columns:1fr;gap:26px}
html.is-mobile .calc-card{padding:22px 18px;border-radius:20px}
html.is-mobile .calc-streams{font-size:1.9375rem}
html.is-mobile .calc-slider{height:7px}
html.is-mobile .calc-slider::-webkit-slider-thumb{width:32px;height:32px}
html.is-mobile .payout-num{font-size:clamp(2.75rem,13vw,3.625rem)}
html.is-mobile .royal-extras{grid-template-columns:1fr;gap:12px;margin-top:20px;padding-top:18px}
/* funding + studio + talent */
html.is-mobile .fund-flow{margin-top:20px;padding-top:18px}
html.is-mobile .fund-flow .flow{flex-wrap:wrap;gap:8px;justify-content:flex-start}
html.is-mobile .fnode{font-size:0.53125rem;padding:7px 10px}
html.is-mobile .fdash{display:none}
html.is-mobile .fund-cta{flex-direction:column;gap:10px}
html.is-mobile .fund-cta .btn{width:100%;justify-content:center}
html.is-mobile .studio{transform:none!important;border-radius:16px}
html.is-mobile .studio-body{padding:12px;gap:10px}
html.is-mobile .s-row{grid-template-columns:1fr}
html.is-mobile .big{font-size:1.6875rem}
html.is-mobile .deep-list{margin-top:20px}
html.is-mobile .deep-item{padding:13px 12px;gap:14px}
html.is-mobile .di{width:40px;height:40px}
html.is-mobile .ref-card{padding:22px 18px}
/* stores */
html.is-mobile .store-grid{grid-template-columns:1fr 1fr;gap:9px}
html.is-mobile .store{padding:12px 11px;gap:9px;border-radius:13px}
html.is-mobile .store b{font-size:0.78125rem}
html.is-mobile .store .sub{font-size:0.53125rem}
html.is-mobile .pg{width:32px;height:32px;border-radius:9px}
html.is-mobile .tape-band{height:104px;margin:4px 0 16px}
html.is-mobile .tp{font-size:0.9375rem;padding:0 12px}
/* pricing + faq + finale */
html.is-mobile .toggle{margin:16px 0 22px}
html.is-mobile .plan-foot{margin-top:22px;font-size:0.5625rem;line-height:1.8}
html.is-mobile .acc summary{padding:18px 2px;font-size:1rem;min-height:56px}
html.is-mobile .a-body{font-size:0.90625rem;padding:0 2px 18px}
html.is-mobile .faq-extras{grid-template-columns:1fr;margin-top:20px;gap:10px;max-width:none}
html.is-mobile .steps{grid-template-columns:1fr;gap:10px;margin-top:22px;max-width:none}
html.is-mobile .fin-title{font-size:clamp(2.375rem,12vw,3.5rem)}
html.is-mobile .finale .hero-cta{flex-direction:column;margin-top:28px}
html.is-mobile .finale .hero-cta .btn{width:100%;justify-content:center}
/* footer */
html.is-mobile footer{min-height:0}
html.is-mobile .foot-word{margin:18px 0 2px;-webkit-text-stroke-width:.6px}
html.is-mobile .foot-grid{grid-template-columns:1fr;gap:26px;padding:38px 0 26px}
html.is-mobile .f-brand p{max-width:none}
html.is-mobile .f-col a{padding:9px 0;font-size:0.90625rem}
html.is-mobile .socials a{width:46px;height:46px}
html.is-mobile .foot-bottom{flex-direction:column;align-items:flex-start;gap:8px;font-size:0.625rem;padding:20px 0 24px}
/* landscape phone */
@media (max-height:520px) and (orientation:landscape){html.is-mobile .stage,html.is-mobile .tape-band{display:none}html.is-mobile .sec{padding:44px 0}}

/* ============================================================
   RESPONSIVE HARDENING
   Appended layer — nothing above this comment was restructured.
   Font sizes above are authored in rem so they follow the user's
   own font-size / text-zoom setting; the rules here keep that safe
   at extreme viewports and degrade gracefully on older engines.
   ============================================================ */

/* 1 — honour the user's default font size. This is what makes the rem
   type above actually respond. text-size-adjust stops mobile WebKit
   inflating text of its own accord on rotation. */
html{font-size:100%;-webkit-text-size-adjust:100%;text-size-adjust:100%}

/* 2 — with rem type, a large user font can push a long display word past a
   narrow viewport. Break the word rather than overflow the screen. */
h1,h2,h3,h4,.h-title,.sec-title,.fin-title,.page-title,.login-title,.qt,.mv-txt{overflow-wrap:break-word}

/* 3 — the nav is a fixed height; at large user font sizes let it grow
   instead of clipping its own contents. */
.nav-inner{height:auto;min-height:var(--nav-h);padding-block:.5rem}

/* 4 — dynamic viewport units: fall back for engines without svh. */
@supports not (height:100svh){
.hero,.sec,.finale,footer,.login-main{min-height:100vh}
.page-main{min-height:72vh}
}

/* 5 — the palette is authored in oklch(). On an engine that cannot parse it
   every colour token would fail at once, so pin the core tokens to sRGB. */
@supports not (color:oklch(50% .1 90)){
:root{--bg:#100E0B;--bg2:#17140F;--panel:rgba(38,33,26,.55);
--line:rgba(226,214,196,.13);--line2:rgba(226,214,196,.07);
--cream:#EFE7DA;--muted:#ADA396;--faint:#837A6E;
--accent:#FF6A3D;--accent-2:#D24A22;--violet:#8B7BD8;--green:#5FD39B;--rose:#F0687A}
}

/* 6 — coarse pointers: guarantee a comfortable target on the dense link
   lists without changing how they look. */
@media (pointer:coarse){
.f-col a,.mobile-menu a,.login-foot a{min-height:44px;display:flex;align-items:center}
.socials a{min-width:44px;min-height:44px}
}

/* 7 — short viewports at ANY width (split screens, zoomed-out laptops,
   landscape phones). The existing rule only covered coarse-pointer
   landscape; one screen per section is wrong whenever height is scarce. */
@media (max-height:600px){
.hero,.sec,.finale,footer,.login-main{min-height:0}
.sec,.finale{padding-block:clamp(2rem,6vh,3.5rem)}
.ring-bg,.glow-burst{display:none}
}

/* 8 — decorative rings are sized off viewport width, so on a short-and-wide
   window they bleed into neighbouring sections. Contain them. */
#stores,#numbers,.finale{overflow-x:clip}

/* 9 — reduced transparency and increased contrast. */
@media (prefers-reduced-transparency:reduce){
.nav.scrolled,.chip,.tweaks,.tw-fab,.mobile-menu,.scrim{backdrop-filter:none}
.grain{display:none}
}
@media (prefers-contrast:more){
:root{--line:oklch(85% .06 85 / .42);--line2:oklch(85% .06 85 / .26);--muted:oklch(82% .02 80);--faint:oklch(70% .015 80)}
.grain{display:none}
}
/* Decorative logo slots — the spinning coin faces, the mini disc label and the
   login disc label. These sit on orange fills, so they use the black mark.
   Sized to match the .cface svg rule they replaced. */
.cface img{width:58%;height:58%;object-fit:contain}
.dm-label img,.ld-label img{width:56%;height:56%;object-fit:contain}
/* ============================================================
   v1 POLISH
   ============================================================ */

/* --- drawer CTA: it is a button, not a nav link ---------------
   .mobile-menu a (0,1,1) was beating .btn-gold (0,1,0), painting the
   label muted-grey on the orange fill and adding the link divider. */
.mobile-menu a.btn{border-bottom:0;justify-content:center}
.mobile-menu a.btn-gold,.mobile-menu a.btn-gold:hover{color:oklch(16% .03 75)}
.mobile-menu a.btn-ghost,.mobile-menu a.btn-ghost:hover{color:var(--cream)}
html.is-mobile .mobile-menu a.btn{border-bottom:0;padding:15px 22px;font-size:1rem}

/* --- brand mark: a light sweep masked to the logo's own alpha ---
   "Revocle" reads as revolve, and the site already turns — the mark
   should feel alive rather than pasted on. The highlight is masked by
   the logo PNG itself, so it only ever travels across the artwork.
   prefers-reduced-motion is already handled globally. */
.brand{position:relative;--brand-mask:url(assets/revocle-lockup.png);--brand-mask-h:1.7rem}
.brand .mark{transition:transform .45s var(--ease),filter .45s var(--ease)}
.brand::after{
  content:"";position:absolute;left:0;top:0;bottom:0;right:0;pointer-events:none;
  background:linear-gradient(100deg,transparent 42%,oklch(98% .05 85 / .5) 50%,transparent 58%);
  background-size:300% 100%;background-repeat:no-repeat;
  -webkit-mask:var(--brand-mask) left center/auto var(--brand-mask-h) no-repeat;
          mask:var(--brand-mask) left center/auto var(--brand-mask-h) no-repeat;
  animation:brandSheen 7s var(--ease) infinite}
@keyframes brandSheen{0%,68%{background-position:200% 0}100%{background-position:-100% 0}}
.brand:hover .mark{transform:translateY(-1px) scale(1.02);filter:drop-shadow(0 3px 14px oklch(72% .17 45 / .45))}
body.no-spin .brand::after{animation-play-state:paused}

/* The mask has to track whichever logo is actually visible, and at what height.
   is-mobile (<=820px) shrinks the nav lockup; <=430px swaps it for the icon. */
html.is-mobile .nav .brand{--brand-mask-h:1.5rem}
@media (max-width:430px){
.nav .brand,html.is-mobile .nav .brand{--brand-mask:url(assets/revocle-mark.png);--brand-mask-h:1.85rem}
}