/* Mozza v1: consumer landing + investor page
   The page is a trattoria at night: cream table, tomato, basil, crust, and the oven (ink).
   Each blade sets body[data-bg]; the ground melts from one ingredient to the next. */

:root {
  --tomate: #E03B2F;
  --tomate-d: #C0241A;
  --manjericao: #2F8F4E;
  --crosta: #E0A64B;
  --mozz: #FBF4E6;
  --farinha: #F3E5CB;
  --forno: #2B1A12;
  --ink2: #7A5B48;

  --bg: var(--mozz);
  --ink: var(--forno);
  --acc: var(--tomate);
  --soft: rgba(43, 26, 18, .12);

  --pad: clamp(16px, 4vw, 64px);
  --top: 78px;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --spring: cubic-bezier(.34, 1.56, .64, 1);
  --serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --sans: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
}

body[data-bg="mozz"]       { --bg: var(--mozz);       --ink: var(--forno); --acc: var(--tomate);  --soft: rgba(43,26,18,.12); }
body[data-bg="farinha"]    { --bg: var(--farinha);    --ink: var(--forno); --acc: var(--tomate);  --soft: rgba(43,26,18,.14); }
body[data-bg="tomate"]     { --bg: var(--tomate);     --ink: var(--mozz);  --acc: var(--crosta);  --soft: rgba(251,244,230,.24); }
body[data-bg="manjericao"] { --bg: var(--manjericao); --ink: var(--mozz);  --acc: var(--crosta);  --soft: rgba(251,244,230,.24); }
body[data-bg="crosta"]     { --bg: var(--crosta);     --ink: var(--forno); --acc: var(--tomate-d); --soft: rgba(43,26,18,.16); }
body[data-bg="forno"]      { --bg: var(--forno);      --ink: var(--mozz);  --acc: var(--crosta);  --soft: rgba(251,244,230,.16); }

*, *::before, *::after { box-sizing: border-box; }
html { background-color: var(--mozz); transition: background-color .9s var(--ease); -webkit-text-size-adjust: 100%; scroll-padding-top: var(--top); overflow-x: clip; }
html[data-bg="farinha"] { background-color: var(--farinha); }
html[data-bg="tomate"] { background-color: var(--tomate); }
html[data-bg="manjericao"] { background-color: var(--manjericao); }
html[data-bg="crosta"] { background-color: var(--crosta); }
html[data-bg="forno"] { background-color: var(--forno); }
body {
  margin: 0; background-color: var(--bg); color: var(--ink);
  font-family: var(--sans); font-size: 17px; line-height: 1.55;
  overflow-x: clip; -webkit-font-smoothing: antialiased;
  transition: background-color .9s var(--ease), color .9s var(--ease);
}
/* paper grain: a menu printed on warm stock */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 70; pointer-events: none; opacity: .07; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .17 0 0 0 0 .1 0 0 0 0 .07 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button, input { font: inherit; color: inherit; }
::selection { background: var(--tomate); color: var(--mozz); }
.skip { position: fixed; left: 12px; top: -60px; z-index: 100; background: var(--ink); color: var(--bg); padding: 10px 14px; border-radius: 99px; }
.skip:focus { top: 12px; }
:focus-visible { outline: 3px solid var(--acc); outline-offset: 3px; border-radius: 6px; }
section { position: relative; z-index: 1; overflow-x: clip; }

/* ------------------------------------------------------------------ type */
.serif { font-family: var(--serif); font-variation-settings: "SOFT" 100, "WONK" 0; }
.kick { display: inline-flex; align-items: center; gap: .7em; font-size: 12.5px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; margin: 0 0 18px; }
.kick::before { content: ""; width: 22px; height: 2px; background: var(--acc); border-radius: 2px; transition: background-color .9s; }
.mega, .big, .mid, .scrub, .disp {
  font-family: var(--serif); font-optical-sizing: auto; font-variation-settings: "SOFT" 100, "WONK" 0;
  margin: 0; font-weight: 800; letter-spacing: -.02em;
}
.mega { font-size: clamp(64px, 12.5vw, 220px); line-height: .86; font-weight: 900; letter-spacing: -.035em; }
.big { font-size: clamp(42px, 6.6vw, 112px); line-height: .94; }
.mid { font-size: clamp(30px, 3.6vw, 58px); line-height: 1.02; font-weight: 750; }
.it { font-style: italic; font-weight: 500; font-variation-settings: "SOFT" 100, "WONK" 1; }
.lead { font-size: clamp(18px, 1.45vw, 22px); line-height: 1.5; max-width: 36ch; margin: 0; }
.acc { color: var(--acc); transition: color .9s; }
.small { font-size: 13px; opacity: .78; line-height: 1.5; }
/* unconfirmed claims are flagged visibly so nobody ships them by accident */
.tbc { display: inline-block; vertical-align: .12em; margin-left: .35em; padding: 1px 7px; border-radius: 6px; border: 1.5px dashed currentColor; font: 700 10.5px/1.6 var(--sans); letter-spacing: .06em; text-transform: uppercase; opacity: .7; white-space: nowrap; font-style: normal; }

/* ------------------------------------------------------------------ buttons */
.btn {
  --b: var(--ink); --t: var(--bg);
  display: inline-flex; align-items: center; gap: .8em;
  padding: 17px 26px; border-radius: 999px; border: 0;
  background: var(--b); color: var(--t);
  font-weight: 650; font-size: 16.5px; text-decoration: none; cursor: pointer;
  transition: background-color .9s, color .9s, scale .35s var(--spring);
}
.btn:hover { scale: 1.05; }
.btn .arw { width: 26px; height: 26px; border-radius: 50%; background: var(--acc); color: var(--mozz); display: grid; place-items: center; transition: rotate .4s var(--spring), background-color .9s; }
.btn:hover .arw { rotate: -45deg; }
.btn .arw svg { width: 12px; height: 12px; }
.btn.ghost { --b: transparent; --t: var(--ink); box-shadow: inset 0 0 0 2px var(--ink); }
.btns { display: flex; flex-wrap: wrap; gap: 12px; }

/* ------------------------------------------------------------------ chrome */
.progress { position: fixed; left: 0; top: 0; height: 4px; width: 100%; transform-origin: 0 50%; transform: scaleX(var(--prog, 0)); background: linear-gradient(90deg, var(--tomate), var(--crosta), var(--manjericao)); z-index: 60; }
.top { position: fixed; inset: 12px var(--pad) auto; z-index: 50; display: flex; align-items: center; justify-content: space-between; gap: 14px; pointer-events: none; }
.top > * { pointer-events: auto; }
.top-logo { display: block; width: 148px; padding: 10px 18px 8px; border-radius: 999px; text-decoration: none; background: rgba(251, 244, 230, .92); color: var(--forno); --wm: var(--forno); box-shadow: 0 6px 18px rgba(43, 26, 18, .14), inset 0 0 0 1.5px rgba(43, 26, 18, .1); transition: scale .4s var(--spring); }
.top-logo:hover { scale: 1.05; }
.top-logo svg { width: 100%; height: auto; overflow: visible; }
.top-logo:hover .po-slice { translate: 6px -6px; }
.po-slice { transition: translate .5s var(--spring); }
.glass {
  background: color-mix(in srgb, var(--bg) 74%, transparent);
  backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3);
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--ink) 16%, transparent);
  transition: background-color .9s;
}
.top-nav { display: flex; gap: 2px; padding: 6px; border-radius: 999px; }
.top-nav a { padding: 9px 15px; border-radius: 999px; text-decoration: none; font-weight: 600; font-size: 14.5px; transition: background-color .25s, color .25s; }
.top-nav a:hover, .top-nav a.is-active { background: var(--ink); color: var(--bg); }
.top .btn { padding: 11px 18px; font-size: 14.5px; }

.cursor { position: fixed; left: 0; top: 0; z-index: 90; pointer-events: none; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--tomate); opacity: 0; transition: width .3s var(--spring), height .3s var(--spring), margin .3s var(--spring), opacity .3s; }
.cursor.on { opacity: 1; }
.cursor.big { width: 62px; height: 62px; margin: -31px 0 0 -31px; background: rgba(224, 166, 75, .55); mix-blend-mode: multiply; }
body[data-bg="forno"] .cursor.big, body[data-bg="tomate"] .cursor.big, body[data-bg="manjericao"] .cursor.big { mix-blend-mode: normal; background: rgba(251, 244, 230, .35); }

/* ------------------------------------------------------------------ fixed deco: flour in the air, a few leaves */
.deco { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.deco .warm { position: absolute; border-radius: 50%; background: radial-gradient(closest-side, var(--glow1, rgba(224, 166, 75, .26)), rgba(224, 166, 75, 0)); transition: opacity .9s; }
.deco .w1 { width: 70vmax; height: 70vmax; left: -24vmax; top: -22vmax; }
.deco .w2 { width: 56vmax; height: 56vmax; right: -20vmax; bottom: -20vmax; background: radial-gradient(closest-side, var(--glow2, rgba(224, 59, 47, .10)), rgba(224, 59, 47, 0)); }
.deco .w3 { width: 40vmax; height: 40vmax; left: 30vw; top: 30vh; background: radial-gradient(closest-side, var(--glow3, rgba(47, 143, 78, .07)), rgba(47, 143, 78, 0)); }
.deco .rim { position: absolute; border-radius: 50%; border: 2px dashed var(--line, rgba(43, 26, 18, .08)); rotate: var(--spin, 0deg); transition: border-color .9s; }
.deco .r1 { width: 46vmax; height: 46vmax; right: -12vmax; top: -16vmax; }
.deco .r2 { width: 30vmax; height: 30vmax; left: -10vmax; bottom: -6vmax; rotate: calc(var(--spin, 0deg) * -1.4); }
.deco .ts { position: absolute; width: var(--s); color: var(--line, rgba(43, 26, 18, .08)); rotate: calc(var(--spin, 0deg) * (var(--r) - 1)); transition: color .9s; }
.deco .ts svg { width: 100%; height: auto; }
.deco .fl { position: absolute; width: var(--s, 5px); height: var(--s, 5px); border-radius: 50%; background: var(--flour, rgba(224, 166, 75, .55)); animation: drift var(--t, 12s) ease-in-out infinite; animation-delay: var(--dl, 0s); transition: background-color .9s; }
.deco .lf { position: absolute; width: var(--s, 34px); color: var(--leaf, var(--manjericao)); opacity: var(--leafo, .5); transition: color .9s, opacity .9s; }
.deco .lf svg { width: 100%; height: auto; rotate: var(--rot); animation: sway 7s ease-in-out infinite; animation-delay: var(--dl, 0s); }
.deco .em { position: absolute; inset: 0; opacity: 0; transition: opacity 1.2s; }
.deco .em i { position: absolute; bottom: -10px; left: var(--x); width: var(--s); height: var(--s); border-radius: 50%; background: radial-gradient(circle, #FFC56B, #F0712C 60%, rgba(240, 113, 44, 0)); animation: rise var(--t, 7s) linear infinite; animation-delay: var(--dl); }
body[data-bg="forno"] .deco .em { opacity: 1; }
body[data-bg="farinha"] { --flour: rgba(201, 138, 58, .5); --line: rgba(43, 26, 18, .09); }
body:is([data-bg="tomate"], [data-bg="manjericao"]) { --glow1: rgba(255, 220, 160, .22); --glow2: rgba(43, 26, 18, .14); --glow3: rgba(255, 255, 255, .08); --line: rgba(251, 244, 230, .16); --flour: rgba(251, 244, 230, .7); --leaf: var(--mozz); --leafo: .22; }
body[data-bg="crosta"] { --glow1: rgba(255, 240, 200, .35); --glow2: rgba(224, 59, 47, .16); --line: rgba(43, 26, 18, .12); --flour: rgba(251, 244, 230, .75); --leaf: var(--forno); --leafo: .14; }
body[data-bg="forno"] { --glow1: rgba(240, 113, 44, .22); --glow2: rgba(224, 59, 47, .14); --glow3: rgba(224, 166, 75, .06); --line: rgba(224, 166, 75, .12); --flour: rgba(255, 197, 107, .45); --leafo: .18; }
@keyframes drift { 0%, 100% { translate: 0 0; opacity: .25; } 50% { translate: 18px -40px; opacity: 1; } }
@keyframes sway { 0%, 100% { translate: 0 0; } 50% { translate: 6px -10px; rotate: calc(var(--rot) + 18deg); } }

/* ------------------------------------------------------------------ entrance gestures */
.js .g { transition: opacity .9s var(--ease), translate 1.1s var(--ease), scale 1.1s var(--spring), rotate 1.1s var(--spring), clip-path 1.2s var(--ease), filter .9s var(--ease); transition-delay: var(--d, 0s); }
.js .g-up:not(.in) { opacity: 0; translate: 0 56px; }
.js .g-left:not(.in) { opacity: 0; translate: -70px 0; }
.js .g-right:not(.in) { opacity: 0; translate: 70px 0; }
.js .g-pop:not(.in) { opacity: 0; scale: .5; rotate: -16deg; }
.js .g-clip:not(.in) { clip-path: inset(0 0 100% 0); }
.js .g-blur:not(.in) { opacity: 0; filter: blur(12px); translate: 0 24px; }

/* ================================================================== HERO: the name is the pizza */
.hero { min-height: 100svh; padding: calc(var(--top) + 4vh) 0 0; display: flex; flex-direction: column; overflow: clip; }
.hero-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; padding-inline: var(--pad); position: relative; z-index: 3; }
.hero-head .big { max-width: 18ch; font-size: clamp(42px, 5.2vw, 92px); }
.hero-head .big .it { color: var(--acc); }
.hero-head .kick { margin-top: 14px; white-space: nowrap; }
.hero-word { position: relative; margin-top: auto; padding: 2vh calc(var(--pad) * .6) 0; z-index: 2; }
.hero-word svg.wm, .foot-word svg.wm { display: block; width: min(100%, 106svh); height: auto; margin: 0 auto; overflow: visible; color: var(--forno); }
.lt { transform-box: fill-box; transform-origin: 50% 100%; }
.hero-word .lt { translate: calc((var(--i) - 1) * var(--hp, 0) * 6vw) calc(var(--hp, 0) * var(--v, 0) * -16vh); rotate: calc((var(--i) - 1) * var(--hp, 0) * 6deg); }
.hero-word .lt-o { transform-origin: 50% 50%; scale: calc(1 + var(--hp, 0) * .45); translate: 0 calc(var(--hp, 0) * -8vh); }
.lt-o .po-spin { transform-box: fill-box; transform-origin: 46% 54%; rotate: calc(var(--hp, 0) * 140deg); }
.js .hero-word .lt > * { animation: drop-in 1s var(--spring) both; animation-delay: calc(var(--i) * 90ms + 200ms); }
@keyframes drop-in { from { translate: 0 -60%; opacity: 0; } }
.lt-o .po-slice { animation: pull-out 1.4s var(--spring) both 1s; }
@keyframes pull-out { from { translate: -13px 13px; } }
.hero-foot { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; padding: 3vh var(--pad) 5vh; position: relative; z-index: 3; }
.hero-foot .lead { max-width: 52ch; font-size: clamp(17px, 1.3vw, 20px); }
.ing { position: absolute; z-index: 4; filter: drop-shadow(0 12px 16px rgba(43, 26, 18, .18)); pointer-events: none; }
.ing svg { width: 100%; height: auto; }
.hero .i1 { width: clamp(64px, 7vw, 120px); left: 5%; top: 30%; }
.hero .i2 { width: clamp(40px, 4.4vw, 72px); right: 6%; top: 34%; }
.hero .i3 { width: clamp(52px, 5.4vw, 92px); left: 46%; top: 34%; }
.hero .i4 { width: clamp(56px, 6vw, 104px); right: 14%; bottom: 10%; z-index: 1; }
.hero .i5 { width: clamp(28px, 3vw, 50px); left: 40%; top: 36%; }
.hero .i6 { width: clamp(70px, 7.6vw, 130px); right: 26%; top: 24%; rotate: 18deg; }
.sticker { position: absolute; z-index: 5; width: clamp(104px, 10vw, 160px); aspect-ratio: 1; right: 5%; top: calc(var(--top) + 15vh); border-radius: 50%; background: var(--tomate); color: var(--mozz); display: grid; place-items: center; rotate: var(--spin, 0deg); box-shadow: 0 14px 30px rgba(224, 59, 47, .3); }
.sticker svg.ring { width: 100%; height: 100%; position: absolute; inset: 0; }
.sticker text { font: 700 11.5px var(--sans); letter-spacing: .2em; text-transform: uppercase; fill: currentColor; }
.sticker .core { width: 46%; height: auto; rotate: calc(var(--spin, 0deg) * -1); overflow: visible; }

/* ================================================================== MEET THE MACHINE */
.meet { padding: clamp(80px, 14vh, 150px) var(--pad); display: grid; grid-template-columns: .9fr 1.1fr; gap: 4vw; align-items: center; }
.meet-copy .big { max-width: 9ch; }
.meet-copy .lead { margin-top: 24px; }
.meet-stage { position: relative; height: min(88svh, 820px); display: grid; place-items: center; }
.meet-halo { position: absolute; width: 80%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, rgba(240, 113, 44, .3), rgba(240, 113, 44, 0)); }
.meet-mach { height: 100%; translate: 0 calc((1 - var(--p, .5)) * 80px - 40px); }
.meet-mach .machine { height: 100%; width: auto; filter: drop-shadow(0 34px 44px rgba(43, 26, 18, .3)); }
.labs { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; pointer-events: none; }
.lab { position: absolute; display: grid; gap: 2px; padding: 10px 14px; border-radius: 14px; background: rgba(251, 244, 230, .94); box-shadow: 0 12px 26px rgba(43, 26, 18, .14), inset 0 0 0 1.5px rgba(43, 26, 18, .08); font-size: 13px; max-width: 200px; }
.lab b { font: 750 16px/1.2 var(--serif); font-variation-settings: "SOFT" 100; color: var(--tomate); }
.lab::before { content: ""; position: absolute; top: 50%; width: 46px; height: 1.5px; background: var(--forno); opacity: .5; }
.lab.l1, .lab.l3, .lab.l5 { left: 0; } .lab.l2, .lab.l4 { right: 0; }
.lab.l1::before, .lab.l3::before, .lab.l5::before { left: 100%; } .lab.l2::before, .lab.l4::before { right: 100%; }
.lab.l1 { top: 8%; } .lab.l2 { top: 34%; } .lab.l3 { top: 58%; } .lab.l4 { top: 62%; } .lab.l5 { top: 78%; }
.seal-chip { display: none; }

/* ================================================================== MACHINE (shared) */
.machine { overflow: visible; }
.machine .m-dough { transition: fill 1s var(--ease); }
.machine .m-sauce, .machine .m-cheese, .machine .m-basil, .machine .m-spots { transform-box: fill-box; transform-origin: center; transition: scale .9s var(--spring), opacity .7s var(--ease); }
.machine .m-sauce { scale: 0; }
.machine .m-cheese > * { transform-box: fill-box; transform-origin: center; scale: 0; transition: scale .7s var(--spring); transition-delay: calc(var(--k, 0) * 60ms); }
.machine .m-basil, .machine .m-spots { opacity: 0; }
.machine .m-glow { opacity: .12; transition: opacity 1.2s var(--ease); }
.machine .m-coil { stroke: #5a3a28; transition: stroke 1s var(--ease); }
.machine .m-door { transition: translate 1s var(--ease); }
.machine .m-slice { opacity: 0; translate: 0 -18px; scale: .7; transform-box: fill-box; transform-origin: 50% 0; transition: opacity .6s var(--ease) .25s, translate 1.1s var(--spring) .25s, scale 1.1s var(--spring) .25s, rotate 1.1s var(--spring) .25s; }
.machine .m-steam path { opacity: 0; }
.machine .scr text { opacity: 0; transition: opacity .4s; }
.machine .scr .bar { transform-box: fill-box; transform-origin: 0 50%; scale: calc(var(--sp, .2)) 1; transition: scale .8s var(--ease); }
.machine .m-hatchglow { opacity: 0; transition: opacity .8s; }

.machine[data-step="1"] .scr .t1, .machine[data-step="2"] .scr .t2, .machine[data-step="3"] .scr .t3, .machine[data-step="4"] .scr .t4, .machine[data-step="5"] .scr .t5 { opacity: 1; }
.machine[data-step="1"] { --sp: .2; } .machine[data-step="2"] { --sp: .4; } .machine[data-step="3"] { --sp: .6; } .machine[data-step="4"] { --sp: .82; } .machine[data-step="5"] { --sp: 1; }
.machine:is([data-step="2"], [data-step="3"], [data-step="4"], [data-step="5"]) .m-sauce { scale: 1; }
.machine:is([data-step="3"], [data-step="4"], [data-step="5"]) .m-cheese > * { scale: 1; }
.machine:is([data-step="3"], [data-step="4"], [data-step="5"]) .m-basil { opacity: 1; }
.machine:is([data-step="4"], [data-step="5"]) .m-dough { fill: var(--crosta); }
.machine:is([data-step="4"], [data-step="5"]) .m-spots { opacity: 1; }
.machine[data-step="4"] .m-glow { opacity: 1; animation: flicker 2.4s ease-in-out infinite; }
.machine[data-step="5"] .m-glow { opacity: .55; }
.machine[data-step="4"] .m-coil { stroke: #FFB35C; }
.machine[data-step="5"] .m-coil { stroke: #C8642E; }
.machine[data-step="5"] .m-door { translate: 0 -62px; }
.machine[data-step="5"] .m-hatchglow { opacity: 1; }
.machine[data-step="5"] .m-slice { opacity: 1; translate: 0 -16px; scale: 1.45; }
.machine .m-spin { transform-box: fill-box; transform-origin: center; }
.machine .m-fire path { opacity: 0; transform-box: fill-box; transform-origin: 50% 100%; transition: opacity .8s; }
.machine:is([data-step="4"], [data-step="5"]) .m-fire path { opacity: 1; animation: lick 1.1s ease-in-out infinite alternate; animation-delay: calc(var(--k) * -.3s); }
.machine[data-step="5"] .m-fire path { opacity: .5; }
.machine:is([data-step="4"], [data-step="5"]) .m-rim { opacity: .9; }
.machine[data-step="4"] .m-spin { animation: turn 7s linear infinite; }
.machine .m-smoke path { opacity: 0; animation: steam 3.2s ease-in-out infinite; animation-delay: calc(var(--k) * 1s); }
.machine .m-led { animation: led 3s ease-in-out infinite; }
@keyframes lick { from { scale: 1 .82; } to { scale: 1.06 1.1; } }
@keyframes turn { to { rotate: 360deg; } }
@keyframes led { 50% { opacity: .45; } }
.machine[data-step="5"] .m-steam path { animation: steam 2.6s ease-in-out infinite; animation-delay: calc(var(--k, 0) * .5s + .8s); }
@keyframes flicker { 0%, 100% { opacity: 1; } 30% { opacity: .82; } 55% { opacity: .96; } 75% { opacity: .78; } }
@keyframes steam { 0% { opacity: 0; translate: 0 10px; } 35% { opacity: .75; } 100% { opacity: 0; translate: 0 -34px; } }
/* the hero machine idles: oven warm, pizza baked, screen saying hi */
.machine.idle .m-glow { animation: flicker 3s ease-in-out infinite; }

/* ================================================================== STORY (scrub) */
.story { padding: clamp(80px, 16vh, 180px) var(--pad); }
.scrub { font-size: clamp(34px, 5.2vw, 88px); line-height: 1.06; font-weight: 700; max-width: 19ch; }
.scrub .w { opacity: .14; transition: opacity .3s; }
.scrub .w.on { opacity: 1; }
.scrub .hot { color: var(--acc); font-style: italic; font-weight: 500; font-variation-settings: "SOFT" 100, "WONK" 1; }
.scrub .ic { display: inline-block; width: .9em; height: .9em; vertical-align: -.12em; }
.story-foot { display: flex; justify-content: space-between; align-items: end; gap: 30px; margin-top: 60px; flex-wrap: wrap; }
.story-foot .lead { max-width: 40ch; }

/* ================================================================== PULL (pinned cheese pull) */
.pull { height: 260vh; }
.pull-pin { position: sticky; top: 0; height: 100svh; display: grid; grid-template-columns: .9fr 1.1fr; align-items: center; gap: 3vw; padding: var(--top) var(--pad) 3vh; overflow: clip; }
.pull-copy .big { max-width: 8ch; }
.pull-copy .lead { margin-top: 24px; }
.pull-stage { position: relative; height: 100%; display: grid; place-items: center; }
.pull-stage svg { height: min(86svh, 820px); width: auto; overflow: visible; }
.pull .slice-up { translate: calc(var(--p, 0) * 10px) calc(var(--pl, 0) * -250px); rotate: calc(var(--pl, 0) * -6deg); transform-box: view-box; transform-origin: 200px 300px; }
.pull .strand { transform-box: view-box; transform-origin: 0 0; }
.pull .strand path { transform-box: fill-box; transform-origin: 50% 100%; scale: 1 var(--pl, 0); opacity: calc(1 - max(0, var(--pl, 0) - .9) * 10 * var(--snap, 0)); }
.pull .pull-words { position: absolute; inset: 0; pointer-events: none; }
.pull .pull-words span { position: absolute; font: italic 500 clamp(28px, 4vw, 64px)/1 var(--serif); font-variation-settings: "SOFT" 100, "WONK" 1; color: var(--crosta); white-space: nowrap; }
.pull-meter { display: flex; align-items: center; gap: 14px; margin-top: 30px; font-weight: 700; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; }
.pull-meter b { position: relative; width: 140px; height: 6px; border-radius: 6px; background: var(--soft); overflow: hidden; }
.pull-meter b::after { content: ""; position: absolute; inset: 0; background: var(--crosta); transform-origin: 0 50%; transform: scaleX(var(--pl, 0)); }

/* ================================================================== HOW (pinned stepper + machine) */
.how { height: 520vh; }
.how-pin { position: sticky; top: 0; height: 100svh; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 4vw; padding: var(--top) var(--pad) 3vh; overflow: clip; }
.how-head .mid { max-width: 12ch; }
.steps-list { list-style: none; margin: 34px 0 0; padding: 0; position: relative; min-height: 210px; }
.steps-list > li { position: absolute; inset: 0 auto auto 0; max-width: 42ch; opacity: 0; translate: 0 30px; transition: opacity .5s var(--ease), translate .7s var(--ease); pointer-events: none; }
.steps-list > li.on { opacity: 1; translate: 0 0; pointer-events: auto; }
.steps-list .n { font: italic 500 18px/1 var(--serif); color: var(--acc); }
.steps-list h3 { font: 800 clamp(34px, 3.6vw, 56px)/1 var(--serif); font-variation-settings: "SOFT" 100; letter-spacing: -.02em; margin: 8px 0 14px; }
.steps-list p { margin: 0; font-size: clamp(17px, 1.3vw, 20px); }
.how-rail { display: flex; gap: 8px; margin-top: 26px; align-items: center; }
.how-rail i { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--soft); color: var(--ink); opacity: .45; transition: opacity .4s, background-color .4s, color .4s, scale .4s var(--spring); }
.how-rail i svg { width: 24px; height: 24px; }
.how-rail i.on { opacity: 1; background: var(--ink); color: var(--bg); scale: 1.08; }
.how-rail i.done { opacity: .9; }
.how-stage { position: relative; height: 100%; display: grid; place-items: center; }
.how-stage .machine { height: min(82svh, 760px); width: auto; filter: drop-shadow(0 30px 40px rgba(43, 26, 18, .25)); }
.how-note { margin-top: 24px; }

/* ================================================================== MENU (pinned horizontal track) */
.menu { position: relative; }
.track-pin { position: sticky; top: 0; height: 100svh; overflow: clip; }
.track { display: flex; height: 100%; width: max-content; will-change: transform; }
.panel { position: relative; flex: none; width: 100vw; height: 100%; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 4vw; padding: var(--top) 6vw 9vh; }
.panel.intro { width: 64vw; grid-template-columns: 1fr; padding-left: var(--pad); }
.panel.intro .big { max-width: 8ch; }
.panel.intro .lead { margin-top: 24px; }
.panel .hint { margin-top: 34px; display: inline-flex; align-items: center; gap: 12px; font-weight: 700; font-size: 14px; letter-spacing: .1em; text-transform: uppercase; }
.panel .hint i { width: 60px; height: 3px; background: currentColor; border-radius: 3px; animation: nudge 1.2s ease-in-out infinite alternate; }
@keyframes nudge { to { translate: 14px 0; } }
.pnum { position: absolute; right: 6vw; top: calc(var(--top) + 8px); font-weight: 700; font-size: 13px; letter-spacing: .16em; }
.panel-art { position: relative; aspect-ratio: 1; width: min(100%, 60svh); justify-self: center; }
.panel-art svg { width: 100%; height: 100%; rotate: calc(var(--p, 0) * 160deg); filter: drop-shadow(0 26px 30px rgba(43, 26, 18, .28)); }
.panel-art .board { position: absolute; inset: -7%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0)); }
.panel h3 { font: 800 clamp(44px, 6vw, 104px)/.92 var(--serif); font-variation-settings: "SOFT" 100; letter-spacing: -.025em; margin: 0 0 18px; }
.panel h3 .it { display: block; font-size: .46em; margin-top: 8px; }
.panel p { margin: 0 0 22px; max-width: 34ch; font-size: clamp(16px, 1.3vw, 20px); }
.tags { display: flex; flex-wrap: wrap; gap: 8px; }
.tags span { padding: 7px 14px; border-radius: 999px; box-shadow: inset 0 0 0 1.5px currentColor; font-size: 13px; font-weight: 650; }
.menu-note { position: absolute; left: var(--pad); bottom: 16px; z-index: 3; }
.track-bar { position: absolute; left: var(--pad); right: var(--pad); bottom: 50px; height: 4px; border-radius: 4px; background: var(--soft); z-index: 3; }
.track-bar i { display: block; height: 100%; width: calc(var(--p, 0) * 100%); background: var(--ink); border-radius: 4px; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ================================================================== MOMENTS (rows in opposite directions) */
.moments { padding: clamp(80px, 14vh, 160px) 0; }
.moments-head { padding: 0 var(--pad); margin-bottom: 50px; display: flex; justify-content: space-between; gap: 30px; align-items: end; flex-wrap: wrap; }
.moments-head .big { max-width: 11ch; }
.row { display: flex; gap: 28px; white-space: nowrap; width: max-content; padding: 10px 0; }
.row span { font: 700 clamp(30px, 4.6vw, 78px)/1.05 var(--serif); font-variation-settings: "SOFT" 100; letter-spacing: -.02em; display: inline-flex; align-items: center; gap: 28px; }
.row span.it { font-weight: 450; }
.row span svg { width: .7em; height: .7em; color: var(--crosta); }
.row.r2 { margin-left: -40vw; }
.row.r2 span { color: transparent; -webkit-text-stroke: clamp(1.2px, .12vw, 2px) var(--ink); }
.row.r2 span svg { color: var(--crosta); }

/* ================================================================== HOSTS */
.hosts { padding: clamp(80px, 14vh, 160px) var(--pad); display: grid; grid-template-columns: 1.1fr .9fr; gap: 5vw; align-items: center; }
.hosts .big { max-width: 10ch; }
.hosts .lead { margin: 24px 0 34px; }
.perks { list-style: none; margin: 0 0 34px; padding: 0; display: grid; gap: 0; }
.perks li { display: grid; grid-template-columns: 48px 1fr; gap: 16px; align-items: start; padding: 18px 0; border-top: 1.5px solid var(--soft); }
.perks li:last-child { border-bottom: 1.5px solid var(--soft); }
.perks .pi { width: 48px; height: 48px; border-radius: 16px; background: var(--forno); color: var(--crosta); display: grid; place-items: center; }
.perks .pi svg { width: 26px; height: 26px; }
.perks h4 { margin: 2px 0 4px; font: 750 21px/1.2 var(--serif); font-variation-settings: "SOFT" 100; }
.perks p { margin: 0; font-size: 15.5px; opacity: .85; }
.hosts-stage { position: relative; display: grid; place-items: center; }
.hosts-stage .machine { height: min(74svh, 640px); width: auto; filter: drop-shadow(0 24px 34px rgba(43, 26, 18, .3)); }
.hosts-stage .tag-float { position: absolute; padding: 10px 16px; border-radius: 14px; background: var(--mozz); color: var(--forno); font-weight: 650; font-size: 14px; box-shadow: 0 14px 30px rgba(43, 26, 18, .18); white-space: nowrap; }
.hosts-stage .tag-float b { color: var(--tomate); }
.tf1 { left: -2%; top: 18%; } .tf2 { right: -4%; top: 46%; } .tf3 { left: 4%; bottom: 12%; }

/* ================================================================== INVEST TEASER (oven at night) */
.invest { padding: clamp(100px, 18vh, 200px) var(--pad); text-align: center; overflow: hidden; }
.invest .embers { position: absolute; inset: 0; pointer-events: none; }
.invest .embers i { position: absolute; bottom: -10px; left: var(--x); width: var(--s); height: var(--s); border-radius: 50%; background: radial-gradient(circle, #FFC56B, #F0712C 60%, rgba(240, 113, 44, 0)); animation: rise var(--t, 7s) linear infinite; animation-delay: var(--dl); opacity: 0; }
@keyframes rise { 0% { translate: 0 0; opacity: 0; } 15% { opacity: .9; } 100% { translate: var(--dx, 20px) -110vh; opacity: 0; } }
.invest .kick { justify-content: center; }
.invest .big { max-width: 14ch; margin: 0 auto; }
.invest .lead { margin: 26px auto 36px; max-width: 46ch; }
.invest .btns { justify-content: center; }
.invest .seal-big { width: clamp(90px, 11vw, 150px); margin: 0 auto 30px; rotate: var(--spin, 0deg); overflow: visible; }

/* ================================================================== FOOT */
.foot { padding: clamp(90px, 16vh, 180px) var(--pad) 40px; }
.foot-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 5vw; align-items: end; }
.foot .mega { color: var(--mozz); }
.foot .mega .it { color: var(--crosta); }
.wait { display: flex; gap: 8px; padding: 6px; border-radius: 999px; background: rgba(251, 244, 230, .16); box-shadow: inset 0 0 0 1.5px rgba(251, 244, 230, .4); max-width: 520px; }
.wait input { flex: 1; min-width: 0; border: 0; background: none; padding: 14px 18px; font-size: 16px; color: var(--mozz); outline: none; }
.wait input::placeholder { color: rgba(251, 244, 230, .75); }
.wait .btn { --b: var(--mozz); --t: var(--forno); padding: 14px 22px; }
.wait-msg { min-height: 1.6em; margin: 12px 0 0 6px; font-weight: 600; }
.foot-intents { display: grid; gap: 10px; margin-top: 30px; }
.foot-intents a { display: flex; justify-content: space-between; align-items: center; padding: 16px 0; border-bottom: 1.5px solid rgba(251, 244, 230, .3); text-decoration: none; font: 700 clamp(20px, 2vw, 28px)/1.1 var(--serif); font-variation-settings: "SOFT" 100; transition: padding .35s var(--ease); }
.foot-intents a:hover { padding-left: 10px; }
.foot-intents a span { font: 500 14px var(--sans); opacity: .8; }
.foot-word { margin-top: clamp(60px, 10vh, 120px); }
.foot-word svg.wm { color: var(--mozz); width: 100%; }
.foot-word .lt { transition: translate .5s var(--spring), rotate .5s var(--spring); }
.foot-word .lt:hover { translate: 0 -8%; rotate: -6deg; }
.foot-base { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-top: 90px; padding-top: 22px; border-top: 1.5px solid rgba(251, 244, 230, .3); font-size: 13.5px; }
.foot-base nav { display: flex; gap: 18px; flex-wrap: wrap; }

/* ================================================================== INVESTOR PAGE */
.ihero { min-height: 100svh; padding: calc(var(--top) + 6vh) var(--pad) 8vh; display: grid; grid-template-columns: 1.1fr .9fr; gap: 4vw; align-items: center; overflow: hidden; }
.ihero .big { max-width: 11ch; }
.ihero .big .it { color: var(--crosta); }
.ihero .lead { margin: 26px 0 34px; max-width: 42ch; }
.ihero .btn { --b: var(--mozz); --t: var(--forno); }
.ihero .btn.ghost { --b: transparent; --t: var(--mozz); box-shadow: inset 0 0 0 2px rgba(251, 244, 230, .6); }
.net { position: relative; aspect-ratio: 1; width: 100%; max-width: 560px; justify-self: center; }
.net svg { width: 100%; height: 100%; overflow: visible; }
.net .lnk { stroke: rgba(224, 166, 75, .45); stroke-width: 1.5; stroke-dasharray: 4 6; animation: dash 3s linear infinite; }
@keyframes dash { to { stroke-dashoffset: -40; } }
.net .node circle.c { fill: var(--forno); stroke: var(--crosta); stroke-width: 2; }
.net .node .gl { fill: #F0712C; opacity: .35; animation: breathe 3s ease-in-out infinite; animation-delay: var(--dl, 0s); transform-box: fill-box; transform-origin: center; }
@keyframes breathe { 50% { opacity: .8; scale: 1.25; } }

.sec { padding: clamp(80px, 14vh, 150px) var(--pad); }
.thesis-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5vw; align-items: end; }
.thesis-grid .big { max-width: 12ch; }

.why { height: 360vh; }
.why-pin { position: sticky; top: 0; height: 100svh; display: grid; grid-template-columns: 1.1fr .9fr; align-items: center; gap: 4vw; padding: var(--top) var(--pad) 4vh; overflow: clip; }
.why .steps-list { min-height: 190px; }
.why-count { font: italic 500 clamp(120px, 18vw, 300px)/.8 var(--serif); font-variation-settings: "SOFT" 100, "WONK" 1; color: var(--acc); justify-self: center; position: relative; height: 1em; overflow: hidden; }
.why-count .roll { display: block; translate: 0 calc(var(--s, 0) * -1em); transition: translate .8s var(--spring); }
.why-count .roll span { display: block; height: 1em; }
.why-count small { position: absolute; right: -.9em; bottom: .05em; font-size: .22em; color: var(--ink); opacity: .6; }

.vs-table { margin-top: 50px; border-top: 1.5px solid var(--soft); }
.vs-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; padding: 20px 0; border-bottom: 1.5px solid var(--soft); align-items: center; }
.vs-row.head { font-weight: 700; font-size: 12.5px; letter-spacing: .16em; text-transform: uppercase; }
.vs-row .k { font: 700 20px/1.2 var(--serif); font-variation-settings: "SOFT" 100; }
.vs-row .old { opacity: .65; text-decoration: line-through; text-decoration-color: var(--tomate); text-decoration-thickness: 2px; }
.vs-row .new { font-weight: 650; color: var(--manjericao); }
.js .vs-row:not(.in) .old { text-decoration-color: transparent; }
.vs-row .old { transition: text-decoration-color .6s .3s; }

.model-flow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: 50px; position: relative; }
.model-flow > div { padding: 30px 28px; border-left: 1.5px solid var(--soft); }
.model-flow > div:first-child { border-left: 0; padding-left: 0; }
.model-flow .num { font: italic 500 54px/1 var(--serif); font-variation-settings: "SOFT" 100, "WONK" 1; color: var(--acc); }
.model-flow h3 { font: 750 28px/1.1 var(--serif); font-variation-settings: "SOFT" 100; margin: 16px 0 10px; }
.model-flow p { margin: 0; opacity: .88; }
.model-note { margin-top: 36px; max-width: 70ch; }

.cyc { height: 380vh; }
.cyc-pin { position: sticky; top: 0; height: 100svh; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 4vw; padding: var(--top) var(--pad) 3vh; overflow: clip; }
.cyc-ring { position: relative; width: min(100%, 64svh); aspect-ratio: 1; justify-self: center; }
.cyc-ring svg.ring { width: 100%; height: 100%; overflow: visible; }
.cyc-ring .track-c { fill: none; stroke: var(--soft); stroke-width: 3; }
.cyc-ring .fill-c { fill: none; stroke: var(--tomate); stroke-width: 6; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: calc(100 - var(--p, 0) * 100); transform-origin: center; rotate: -90deg; transform-box: fill-box; }
.stn { position: absolute; left: var(--x); top: var(--y); translate: -50% -50%; width: 62px; height: 62px; border-radius: 50%; background: var(--bg); box-shadow: inset 0 0 0 2px var(--soft); display: grid; place-items: center; transition: background-color .4s, color .4s, scale .5s var(--spring); }
.stn svg { width: 28px; height: 28px; }
.stn.on { background: var(--forno); color: var(--crosta); scale: 1.1; }
.cyc-center { position: absolute; inset: 30%; display: grid; place-items: center; }
.cyc-center svg { width: 100%; rotate: calc(var(--p, 0) * 360deg); }
.cyc-txt { list-style: none; margin: 30px 0 0; padding: 0; position: relative; min-height: 140px; }
.cyc-txt li { position: absolute; inset: 0 auto auto 0; opacity: 0; translate: 0 20px; transition: opacity .5s, translate .6s var(--ease); max-width: 40ch; }
.cyc-txt li.on { opacity: 1; translate: 0 0; }
.cyc-txt h3 { font: 800 clamp(30px, 3vw, 46px)/1 var(--serif); font-variation-settings: "SOFT" 100; margin: 0 0 12px; }
.cyc-txt p { margin: 0; font-size: 18px; }

.talk-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 50px; }
.talk-card { padding: 30px 26px; border-radius: 26px; background: rgba(251, 244, 230, .14); box-shadow: inset 0 0 0 1.5px rgba(251, 244, 230, .35); text-decoration: none; display: flex; flex-direction: column; gap: 10px; min-height: 220px; transition: background-color .35s, translate .5s var(--spring); }
.talk-card:hover { background: rgba(251, 244, 230, .24); translate: 0 -6px; }
.talk-card h3 { font: 750 26px/1.1 var(--serif); font-variation-settings: "SOFT" 100; margin: auto 0 0; }
.talk-card p { margin: 0; opacity: .88; font-size: 15.5px; }
.talk-card svg { width: 40px; height: 40px; color: var(--crosta); }

.legal { padding: clamp(70px, 12vh, 130px) var(--pad) 40px; }
.legal-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 4vw; margin-top: 30px; font-size: 14.5px; line-height: 1.65; opacity: .88; }
.legal-cols p { margin: 0 0 14px; }

/* ================================================================== RESPONSIVE */
@media (max-width: 980px) {
  .top-nav { display: none; }
  .hero-head { flex-direction: column; gap: 10px; }
  .hero-head .kick { order: -1; margin: 0; }
  .hero-foot { flex-direction: column; align-items: flex-start; }
  .sticker { top: calc(var(--top) + 150px); right: 4%; width: 92px; }
  .hero .i1, .hero .i3, .hero .i6 { display: none; }
  .hero .i2 { top: 44%; right: 8%; }
  .meet { grid-template-columns: 1fr; }
  .meet-stage { height: auto; display: block; }
  .meet-mach { height: 64svh; translate: none; display: grid; justify-items: center; }
  .meet-halo { left: 10%; top: 0; }
  .labs { position: static; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 24px; }
  .lab { position: static; max-width: none; }
  .lab::before { display: none; }
  .pull-pin, .how-pin, .why-pin, .cyc-pin { grid-template-columns: 1fr; grid-template-rows: auto 1fr; gap: 10px; align-content: start; padding-top: calc(var(--top) + 6px); }
  .pull-stage svg { height: 52svh; }
  .how-stage .machine { height: 46svh; }
  .how-stage { order: -1; height: auto; }
  .steps-list { margin-top: 14px; min-height: 160px; }
  .steps-list h3 { font-size: 32px; margin: 4px 0 8px; }
  .steps-list p { font-size: 16px; }
  .how-head .mid { font-size: 26px; }
  .how-head .kick { margin-bottom: 8px; }
  .how-rail { margin-top: 8px; }
  .how-rail i { width: 38px; height: 38px; }
  .how-note { display: none; }
  .panel { grid-template-columns: 1fr; grid-template-rows: auto auto; align-content: center; gap: 18px; padding: calc(var(--top) + 10px) var(--pad) 90px; }
  .panel.intro { width: 100vw; }
  .panel-art { width: min(70vw, 36svh); }
  .panel h3 { font-size: 46px; }
  .track-bar { bottom: 74px; }
  .hosts, .thesis-grid, .foot-grid, .ihero { grid-template-columns: 1fr; }
  .hosts-stage { order: -1; }
  .hosts-stage .machine { height: 52svh; }
  .model-flow, .talk-grid { grid-template-columns: 1fr; }
  .model-flow > div { border-left: 0; border-top: 1.5px solid var(--soft); padding: 26px 0; }
  .legal-cols { grid-template-columns: 1fr; }
  .why-count { font-size: 110px; justify-self: start; order: -1; }
  .cyc-ring { width: min(86vw, 40svh); order: -1; }
  .stn { width: 46px; height: 46px; } .stn svg { width: 22px; height: 22px; }
  .cursor { display: none; }
}
@media (max-width: 560px) {
  body { font-size: 16px; }
  .top-logo { width: 122px; padding: 9px 14px 7px; }
  .hero .i3 { top: 52%; } .hero .i5 { display: none; } .hero .i4 { bottom: 4%; right: 4%; }
  .top .btn { padding: 10px 14px; font-size: 13.5px; }
  .top .btn .arw { display: none; }
  .hero-head .big { font-size: 12vw; }
  .lab.l1, .lab.l3, .lab.l5 { left: -2%; } .lab.l2, .lab.l4 { right: -2%; }
  .scrub { font-size: 9vw; }
  .row span { font-size: 9vw; gap: 18px; }
  .vs-row { grid-template-columns: 1fr 1fr; }
  .vs-row .k { grid-column: 1 / -1; font-size: 18px; }
  .vs-row.head span:first-child { display: none; }
  .hosts-stage .tag-float { font-size: 12.5px; padding: 8px 12px; }
  .tf2 { right: 0; }
  .wait { flex-direction: column; border-radius: 26px; }
  .wait .btn { justify-content: center; }
  .pull .pull-words { display: none; }
}

/* ================================================================== REDUCED MOTION */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; transition-duration: .001s !important; scroll-behavior: auto !important; }
}
.rm .scrub .w { opacity: 1; }
.rm .pull, .rm .how, .rm .why, .rm .cyc { height: auto; }
.rm .pull-pin, .rm .how-pin, .rm .why-pin, .rm .cyc-pin { position: relative; height: auto; min-height: 100svh; }
.rm .pull { --pl: .75; }
.rm .steps-list { min-height: 0; }
.rm .steps-list > li, .rm .cyc-txt li { position: relative; opacity: 1; translate: none; margin-bottom: 26px; }
.rm .menu .track-pin { position: relative; height: auto; overflow: visible; }
.rm .menu .track { flex-direction: column; height: auto; }
.rm .menu .panel { width: 100%; min-height: 80svh; }
.rm .menu-note { position: relative; left: auto; bottom: auto; padding: 0 var(--pad) 40px; display: block; }
.rm .row.r2 { margin-left: 0; }
.rm .row { flex-wrap: wrap; white-space: normal; width: auto; padding: 10px var(--pad); }
.rm .invest .embers, .rm .deco .fl, .rm .deco .em { display: none; }
.rm .track { transform: none !important; width: auto; }
.rm .menu .panel.intro { width: 100%; }
.rm .track-bar, .rm .panel .hint { display: none; }
.rm .hero-word .lt, .rm .hero-word .lt-o, .rm .lt-o .po-spin { translate: none; rotate: none; scale: none; }