/* Generated by tools/build.py from design/source/voxa-tokens.json. Do not edit. */
:root{
  --color-surface-sunken:#070A12;
  --color-surface-base:#0C1020;
  --color-surface-raised:#182033;
  --color-surface-overlay:#202A41;
  --color-surface-stroke:#2D3953;
  --color-surface-scrim:#070A12B8;
  --color-content-primary:#F8FAFC;
  --color-content-secondary:#C7D2E5;
  --color-content-muted:#8591A9;
  --color-content-tertiary:#7683A0;
  --color-content-disabled:#4A5468;
  --color-brand-primary:#E8B341;
  --color-brand-primary-hover:#F2C05A;
  --color-brand-primary-pressed:#D98A2B;
  --color-brand-secondary:#2DD4BF;
  --color-brand-on-primary:#17110A;
  --color-status-success:#34D399;
  --color-status-warning:#F59E0B;
  --color-status-error:#E8574F;
  --color-status-error-content:#FB7185;
  --color-status-live:#E8574F;
  --color-status-verified:#4FA8E8;
  --color-ladder-wealth:#FF7A45;
  --color-ladder-charm:#F76A9C;
  --color-ladder-level:#2DD4BF;
  --color-ladder-vip:#E8B341;
  --color-ladder-agency:#4FA8E8;
  --color-accent-violet:#8B5CF6;
  --color-accent-amethyst:#B56CFF;
  --color-accent-sky:#38BDF8;
  --color-accent-coral:#FF725E;
  --color-accent-emerald:#34D399;
  --space-xxxs:2px;
  --space-xxs:4px;
  --space-xs:8px;
  --space-sm:12px;
  --space-md:16px;
  --space-lg:20px;
  --space-xl:24px;
  --space-xxl:32px;
  --space-xxxl:48px;
  --radius-xs:5px;
  --radius-sm:8px;
  --radius-md:12px;
  --radius-lg:16px;
  --radius-xl:20px;
  --radius-xxl:24px;
  --radius-pill:999px;
  --size-icon-xs:12px;
  --size-icon-sm:16px;
  --size-icon-md:20px;
  --size-icon-lg:24px;
  --size-icon-xl:32px;
  --size-touch-target-min:44px;
  --size-avatar-seat:48px;
  --size-avatar-owner:64px;
  --size-avatar-row:44px;
  --gradient-background:linear-gradient(135deg,#070A12,#0C1020,#101A2A);
  --gradient-hero:linear-gradient(135deg,#3B1B6F,#122B48,#0A332F);
  --gradient-brand-metallic:linear-gradient(135deg,#FFF0C4 0%,#E8B341 42%,#8A5A16 100%);
  --gradient-brand-flat:linear-gradient(135deg,#F2C05A,#D98A2B);
  --gradient-glass:linear-gradient(135deg,rgba(255,255,255,.2),rgba(255,255,255,.05));
  --gradient-stage-scrim:linear-gradient(180deg,rgba(7,10,18,.2) 0%,rgba(7,10,18,.66) 50%,rgba(7,10,18,.97) 100%);
  --shadow-e1:0px 2px 8px 0px rgba(0,0,0,.25);
  --shadow-e2:0px 4px 16px 0px rgba(0,0,0,.30);
  --shadow-e3:0px 8px 24px 0px rgba(0,0,0,.35);
  --shadow-e4:0px 16px 40px 0px rgba(0,0,0,.40);
  --shadow-glow-brand:0px 6px 20px 0px rgba(232,179,65,.34);
  --shadow-glow-brand-strong:0px 0px 34px 0px rgba(232,179,65,.50);
  --motion-instant:0ms;
  --motion-micro:90ms;
  --motion-fast:140ms;
  --motion-base:200ms;
  --motion-moderate:280ms;
  --motion-slow:400ms;
  --motion-deliberate:600ms;
  --motion-ambient:1400ms;
  --motion-stagger-ring:380ms;
  --motion-stagger-list:40ms;
  --motion-spectacle-sm:1800ms;
  --motion-spectacle-md:2600ms;
  --motion-spectacle-lg:4200ms;
  --z-base:0;
  --z-stage:10;
  --z-chrome:20;
  --z-chat:30;
  --z-action-bar:40;
  --z-sheet:50;
  --z-entry-effect:60;
  --z-pk-banner:70;
  --z-gift-spectacle:80;
  --z-toast:90;
  --z-dialog:100;
  --font-sans:'Sora', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono:'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --type-display-lg-size:34px;
  --type-display-lg-weight:600;
  --type-display-lg-line:112%;
  --type-display-lg-tracking:-0.9px;
  --type-display-md-size:28px;
  --type-display-md-weight:600;
  --type-display-md-line:114%;
  --type-display-md-tracking:-0.6px;
  --type-display-sm-size:22px;
  --type-display-sm-weight:600;
  --type-display-sm-line:115%;
  --type-display-sm-tracking:-0.35px;
  --type-title-lg-size:20px;
  --type-title-lg-weight:600;
  --type-title-lg-line:120%;
  --type-title-lg-tracking:-0.3px;
  --type-title-md-size:17px;
  --type-title-md-weight:600;
  --type-title-md-line:122%;
  --type-title-md-tracking:-0.2px;
  --type-title-sm-size:15px;
  --type-title-sm-weight:600;
  --type-title-sm-line:125%;
  --type-body-lg-size:15px;
  --type-body-lg-weight:400;
  --type-body-lg-line:160%;
  --type-body-md-size:14px;
  --type-body-md-weight:400;
  --type-body-md-line:150%;
  --type-body-sm-size:13px;
  --type-body-sm-weight:400;
  --type-body-sm-line:145%;
  --type-label-lg-size:14px;
  --type-label-lg-weight:500;
  --type-label-lg-line:120%;
  --type-label-md-size:12.5px;
  --type-label-md-weight:500;
  --type-label-md-line:120%;
  --type-label-sm-size:11px;
  --type-label-sm-weight:500;
  --type-label-sm-line:120%;
  --type-caption-md-size:11.5px;
  --type-caption-md-weight:400;
  --type-caption-md-line:140%;
  --type-caption-sm-size:10.5px;
  --type-caption-sm-weight:400;
  --type-caption-sm-line:135%;
  --type-mono-md-size:12px;
  --type-mono-md-weight:500;
  --type-mono-md-line:130%;
  --type-mono-sm-size:10.5px;
  --type-mono-sm-weight:500;
  --type-mono-sm-line:120%;
  --type-overline-size:10px;
  --type-overline-weight:600;
  --type-overline-line:100%;
  --type-overline-tracking:1.2px;
  --type-amount-lg-size:30px;
  --type-amount-lg-weight:600;
  --type-amount-lg-line:100%;
  --type-amount-lg-tracking:-0.6px;
  --type-amount-md-size:15px;
  --type-amount-md-weight:500;
  --type-amount-md-line:120%;
  --type-amount-sm-size:12px;
  --type-amount-sm-weight:500;
  --type-amount-sm-line:120%;
  --ease-standard:cubic-bezier(0.2, 0, 0, 1);
  --ease-enter:cubic-bezier(0.215, 0.61, 0.355, 1);
  --ease-exit:cubic-bezier(0.55, 0.055, 0.675, 0.19);
  --ease-emphasized:cubic-bezier(0.23, 1, 0.32, 1);
  --ease-breathe:cubic-bezier(0.445, 0.05, 0.55, 0.95);
  --ease-traverse:cubic-bezier(0.645, 0.045, 0.355, 1);
  --ease-linear:linear;
  --ease-settle:cubic-bezier(0.34, 1.36, 0.64, 1.0);
}
.type-display-lg{font:600 34px/112% var(--font-sans);letter-spacing:-0.9px}
.type-display-md{font:600 28px/114% var(--font-sans);letter-spacing:-0.6px}
.type-display-sm{font:600 22px/115% var(--font-sans);letter-spacing:-0.35px}
.type-title-lg{font:600 20px/120% var(--font-sans);letter-spacing:-0.3px}
.type-title-md{font:600 17px/122% var(--font-sans);letter-spacing:-0.2px}
.type-title-sm{font:600 15px/125% var(--font-sans)}
.type-body-lg{font:400 15px/160% var(--font-sans)}
.type-body-md{font:400 14px/150% var(--font-sans)}
.type-body-sm{font:400 13px/145% var(--font-sans)}
.type-label-lg{font:500 14px/120% var(--font-sans)}
.type-label-md{font:500 12.5px/120% var(--font-sans)}
.type-label-sm{font:500 11px/120% var(--font-sans)}
.type-caption-md{font:400 11.5px/140% var(--font-sans)}
.type-caption-sm{font:400 10.5px/135% var(--font-sans)}
.type-mono-md{font:500 12px/130% var(--font-mono)}
.type-mono-sm{font:500 10.5px/120% var(--font-mono)}
.type-overline{font:600 10px/100% var(--font-mono);letter-spacing:1.2px}
.type-amount-lg{font:600 30px/100% var(--font-mono);letter-spacing:-0.6px}
.type-amount-md{font:500 15px/120% var(--font-mono)}
.type-amount-sm{font:500 12px/120% var(--font-mono)}

@font-face{font-family:'Sora';font-weight:300 600;font-style:normal;font-display:swap;src:url(/assets/Sora-var.d2909123.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-weight:400;font-style:normal;font-display:swap;src:url(/assets/IBMPlexMono-400.c36f509c.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-weight:500;font-style:normal;font-display:swap;src:url(/assets/IBMPlexMono-500.a76f53ca.woff2) format('woff2')}

/* admin.css */
/* Beat 7: control (pos 7 -> 8). A browser frame holding a real capture of the admin panel
   (marketing/assets/admin/dashboard.png, resized, nothing edited) slides in over the phone.
     7.00 -> 7.12  the two panels leave, the phone comes back
     7.10 -> 7.35  the frame rises into place; the phone dims behind it                        */
.browser{border-radius:12px;overflow:hidden;background:#fff;border:1px solid var(--color-surface-stroke);
  box-shadow:var(--shadow-e4)}
.browser-bar{display:flex;align-items:center;gap:6px;height:30px;padding-inline:12px;background:var(--color-surface-raised)}
.browser-dot{width:9px;height:9px;border-radius:999px;background:var(--color-surface-stroke)}
.browser-url{margin-inline-start:10px;padding:3px 12px;border-radius:999px;background:var(--color-surface-base);
  font:500 11px/1.2 var(--font-mono);color:var(--color-content-muted)}
.browser img{display:block;width:100%;height:auto}

.beat-still-browser .browser{width:min(100%,640px)}
.admin-frame{display:none}
.story-on .admin-frame{--fw:min(92vw,520px,calc((var(--room) - 30px) / .625));
  display:block;position:absolute;left:50%;top:calc(var(--head-h,60px) + 12px);
  width:var(--fw);margin-left:calc(var(--fw) / -2);pointer-events:none;
  opacity:var(--fr);transform:translateY(calc((1 - var(--fr)) * 70px)) scale(calc(.94 + .06 * var(--fr)))}
.story-stage{--back:clamp(0,calc((var(--pos,0) - 7) / .12),1);--fr:calc(clamp(0,calc((var(--pos,0) - 7.1) / .25),1) * (1 - clamp(0,calc((var(--pos,0) - 8) / .15),1)))}
@media (min-width:900px){
  .story-on .admin-frame{--fw:min(40vw,560px);left:auto;margin-left:0;right:max(var(--space-xl),calc((100% - 1120px) / 2));
    top:50%;width:var(--fw);margin-top:-170px}
}

/* business.css */
/* Beat 6: the business (pos 6 -> 7). Operator surfaces take blue (#4FA8E8): the kickers and the
   agency half of the split bar. The panels are pieces of the designed G2 and F3 screens, scaled
   like a phone: a fixed 370 px layout, one transform, any width.
     6.00 -> 6.20  the phone slides aside and fades
     6.10 -> 6.30  the earnings card arrives; its split bar draws: host 6.45 -> 6.65, agency 6.55 -> 6.75
     6.30 -> 6.50  the coin seller's order arrives
     7.00 -> 7.12  (beat 7) the panels leave and the phone returns, see admin.css            */
.panel{position:relative;width:100%;aspect-ratio:370 / var(--ph);container-type:inline-size;flex:none;overflow:hidden;min-height:0}
.panel-body{width:370px;transform-origin:0 0;--pk:tan(atan2(100cqw, 370px));transform:scale(var(--pk));
  font-family:var(--font-sans);line-height:normal;-webkit-font-smoothing:antialiased}
.panel-body,.panel-body *,.panel-body *::before,.panel-body *::after{box-sizing:content-box}
.panel-earn{--ph:247}
.panel-order{--ph:318}
.kicker{font:600 11px/1 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--color-status-verified);
  margin-bottom:var(--space-xs)}
.biz-item{display:flex;flex-direction:column;width:min(100%,340px)}

/* flow (default): the two panels stacked under the line */
.beat-still-panels{flex-direction:column;align-items:center;gap:var(--space-lg)}

/* the pinned stage */
.biz{display:none}
.story-on .biz{display:flex;flex-direction:column;align-items:center;gap:12px;position:absolute;
  inset:calc(var(--head-h,60px) + 4px) 16px auto;pointer-events:none}
.story-on .biz{--bw:min(290px,max(150px,calc((var(--room) - 60px) / 1.527)))}
.story-on .biz .biz-item{width:var(--bw)}
.story-on .biz .kicker{margin-bottom:6px}
.story-stage{--ex:clamp(0,calc((var(--pos,0) - 6) / .2),1);
  --bz0:clamp(0,calc((var(--pos,0) - 6.1) / .2),1);--bz1:clamp(0,calc((var(--pos,0) - 6.3) / .2),1);
  --dh:clamp(0,calc((var(--pos,0) - 6.45) / .2),1);--da:clamp(0,calc((var(--pos,0) - 6.55) / .2),1)}
.story-stage .phone{--gone:calc(var(--ex) * (1 - var(--back,0)));
  transform:translateX(calc(var(--gone) * -62%)) scale(calc(1 - .3 * var(--gone)));
  opacity:calc((1 - var(--gone)) * (1 - .55 * var(--fr,0)))}
.biz-item:nth-child(1){opacity:calc(var(--bz0) * (1 - var(--back,0)));transform:translateY(calc((1 - var(--bz0)) * 24px - var(--back,0) * 30px))}
.biz-item:nth-child(2){opacity:calc(var(--bz1) * (1 - var(--back,0)));transform:translateY(calc((1 - var(--bz1)) * 24px - var(--back,0) * 30px))}
.panel .split-host{transform-origin:0 50%;transform:scaleX(var(--dh,1))}
.panel .split-agency{transform-origin:0 50%;transform:scaleX(var(--da,1))}
@media (min-width:900px){
  /* an overlay on the right half of the stage; it must never take a grid cell from the phone */
  .story-on .biz{inset:var(--head-h,60px) max(var(--space-xl),calc((100% - 1120px) / 2)) 0 50%;
    justify-content:center;gap:18px}
  .story-on .biz{--bw:min(400px,max(150px,calc((100vh - var(--head-h,60px) - 60px - 60px) / 1.527)));
    --bw:min(400px,max(150px,calc((100svh - var(--head-h,60px) - 60px - 60px) / 1.527)))}
}

/* components.css */
.skip{position:absolute;inset-inline-start:var(--space-md);top:-100px;z-index:var(--z-toast);padding:var(--space-sm) var(--space-md);
  border-radius:var(--radius-pill);background:var(--color-brand-primary);color:var(--color-brand-on-primary);font:600 14px var(--font-sans)}
.skip:focus{top:var(--space-sm)}

.site-head{--head-h:60px;position:absolute;inset-inline:0;top:0;z-index:var(--z-chrome);height:var(--head-h);
  display:flex;align-items:center;padding-inline:var(--space-md)}
.brand{display:inline-flex;align-items:center;gap:var(--space-xs);min-height:44px;text-decoration:none}
.brand-tile{display:grid;place-items:center;width:32px;height:32px;border-radius:var(--radius-sm);
  background:var(--gradient-brand-flat);color:var(--color-brand-on-primary);font:700 18px/1 var(--font-sans)}
.brand-name{font:600 17px/1 var(--font-sans);letter-spacing:-.01em}

.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 var(--space-xl);
  border-radius:var(--radius-pill);border:1px solid transparent;font:600 15px/1 var(--font-sans);
  text-decoration:none;text-align:center;cursor:pointer;
  transition:transform var(--motion-fast) var(--ease-standard)}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--gradient-brand-flat);color:var(--color-brand-on-primary);box-shadow:var(--shadow-glow-brand)}
.btn-ghost{border-color:var(--color-surface-stroke);color:var(--color-content-primary);background:rgba(248,250,252,.04)}
.actions{display:flex;flex-wrap:wrap;gap:var(--space-sm);margin-top:var(--space-xl)}
.actions .btn{flex:1 1 11rem}
@media (min-width:900px){.actions .btn{flex:0 0 auto}}

.display{font:600 clamp(34px,9.4vw,62px)/1.06 var(--font-sans);letter-spacing:-.03em;text-wrap:balance}
.display-2{font:600 clamp(28px,7.6vw,46px)/1.1 var(--font-sans);letter-spacing:-.025em;text-wrap:balance}
.lead{margin-top:var(--space-sm);font:400 clamp(16px,4.4vw,20px)/1.5 var(--font-sans);color:var(--color-content-secondary);
  text-wrap:balance}
.hl{color:var(--color-brand-primary);white-space:nowrap}

.scroll-hint{display:none;margin-top:var(--space-md);font:500 11px/1 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;
  color:var(--color-content-muted)}
.story-on .scroll-hint{display:block}

.nf{min-height:100svh;display:flex;flex-direction:column;justify-content:center;gap:var(--space-md);
  width:min(36rem,calc(100% - 2 * var(--space-md)));margin-inline:auto;padding-block:var(--space-xxxl)}
.nf .actions{margin-top:var(--space-md)}

/* motion.css */
/* Ambient loops that belong to the product's own screens (design/source/voxa-screens.html:
   sRing, sPulse, sSweep, sDot, sWave). Transform and opacity only. One cycle is the ambient token;
   the second ring and the waveform bars already carry their phase in an inline animation-delay. */
@keyframes ring{0%{transform:scale(1);opacity:0}18%{opacity:calc(.85 * var(--ring-on,1))}100%{transform:scale(1.5);opacity:0}}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(calc(1 + .045 * var(--ring-on,1)))}}
@keyframes sweep{0%{transform:translateX(-120%) skewX(-18deg)}100%{transform:translateX(340%) skewX(-18deg)}}
@keyframes dot{0%,100%{opacity:.35}50%{opacity:1}}
@keyframes wave{0%,100%{transform:scaleY(.42)}50%{transform:scaleY(1)}}

.scene .ring{animation:ring var(--motion-ambient) var(--ease-breathe) infinite}
.scene[data-stage] .host-avatar .avatar{animation:pulse var(--motion-ambient) var(--ease-breathe) infinite}
.scene .live-dot{animation:dot var(--motion-ambient) var(--ease-breathe) infinite}
.scene .wave>div{animation:wave var(--motion-ambient) var(--ease-breathe) infinite}

@media (prefers-reduced-motion:reduce){
  .scene *,.scene *::before,.scene *::after{animation:none!important}
}

/* offer.css */
/* Beats 9-11 are not a story: normal sections on the same dark page. */
.wrap{width:min(1120px,calc(100% - 2 * var(--space-md)));margin-inline:auto}
.section{padding-block:var(--space-xxxl)}
.section+.section{padding-top:0}
.eyebrow{font:600 11px/1 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--color-brand-primary);
  margin-bottom:var(--space-sm)}
.section h2{font:600 clamp(30px,7vw,48px)/1.08 var(--font-sans);letter-spacing:-.025em;text-wrap:balance}
.section .sub{margin-top:var(--space-sm);font:400 clamp(16px,4vw,19px)/1.55 var(--font-sans);color:var(--color-content-secondary);
  max-width:40rem;text-wrap:pretty}

/* the hosted model in three lines */
.three{list-style:none;margin:var(--space-xl) 0 0;padding:0;display:grid;gap:var(--space-sm)}
@media (min-width:760px){.three{grid-template-columns:repeat(3,1fr);gap:var(--space-md)}}
.three li{background:var(--color-surface-raised);border:1px solid var(--color-surface-stroke);
  border-radius:var(--radius-lg);padding:var(--space-lg)}
.three .n{display:block;font:600 12px/1 var(--font-mono);letter-spacing:.12em;color:var(--color-brand-primary);margin-bottom:var(--space-md)}
.three h3{font:600 20px/1.2 var(--font-sans);letter-spacing:-.02em}
.three p{margin-top:var(--space-xs);font:400 15px/1.55 var(--font-sans);color:var(--color-content-secondary)}

/* built vs add-ons */
.inc-wrap{margin-top:var(--space-xxl);border:1px solid var(--color-surface-stroke);border-radius:var(--radius-lg);
  background:var(--color-surface-base);overflow:hidden}
.inc{width:100%;border-collapse:collapse;font:400 15px/1.4 var(--font-sans)}
.inc caption{text-align:start;padding:var(--space-md) var(--space-md) var(--space-sm);font:600 17px/1.3 var(--font-sans)}
.inc th,.inc td{padding:var(--space-sm) var(--space-md);text-align:start;vertical-align:top}
.inc tbody tr+tr td,.inc tbody tr+tr th{border-top:1px solid var(--color-surface-stroke)}
.inc .grp th{background:var(--color-surface-raised);font:600 11px/1 var(--font-mono);letter-spacing:.12em;
  text-transform:uppercase;color:var(--color-content-secondary)}
.inc td:last-child{width:6.5rem;text-align:end;white-space:nowrap}
.pill{display:inline-block;padding:4px 10px;border-radius:999px;font:600 11px/1.2 var(--font-mono);letter-spacing:.06em;
  background:rgba(45,212,191,.14);border:1px solid rgba(45,212,191,.35);color:var(--color-brand-secondary)}
.pill.addon{background:rgba(232,179,65,.12);border-color:rgba(232,179,65,.4);color:var(--color-brand-primary)}
.cta-row{margin-top:var(--space-xl);display:flex;flex-wrap:wrap;gap:var(--space-sm)}

/* questions */
.faq{margin-top:var(--space-xl);display:grid;gap:var(--space-lg) var(--space-xxl)}
@media (min-width:760px){.faq{grid-template-columns:1fr 1fr}}
.q{border-top:1px solid var(--color-surface-stroke);padding-top:var(--space-md)}
.q h3{font:600 18px/1.3 var(--font-sans);letter-spacing:-.015em}
.q p{margin-top:var(--space-xs);font:400 15px/1.6 var(--font-sans);color:var(--color-content-secondary);text-wrap:pretty}

/* close and footer */
.close-grid{display:grid;gap:var(--space-xxl);align-items:center}
@media (min-width:900px){.close-grid{grid-template-columns:1.1fr .9fr}}
.close-phone{display:flex;justify-content:center}
.close-phone .phone{--phone-w:min(100%,280px)}
.site-foot{border-top:1px solid var(--color-surface-stroke);padding-block:var(--space-xl) var(--space-xxxl)}
.foot-grid{display:grid;gap:var(--space-md);align-items:center}
@media (min-width:760px){.foot-grid{grid-template-columns:auto 1fr auto;gap:var(--space-xl)}}
.foot-note{font:400 14px/1.5 var(--font-sans);color:var(--color-content-secondary)}
.foot-links{display:flex;flex-wrap:wrap;gap:var(--space-xs) var(--space-lg)}
.foot-links a{display:inline-flex;align-items:center;min-height:44px;font:500 14px/1 var(--font-sans);
  color:var(--color-content-primary);text-decoration:none;border-bottom:1px solid transparent}
.foot-links a:hover{border-bottom-color:var(--color-brand-primary)}
.section .about{margin-top:var(--space-md);max-width:68ch;font:400 clamp(14.5px,3.6vw,16px)/1.65 var(--font-sans);color:var(--color-content-secondary)}

/* packages.css */
/* Packages: the cards come from site.json (build.py), never from the page source. */
.packages{list-style:none;margin:var(--space-xl) 0 0;padding:0;display:grid;gap:var(--space-md)}
@media (min-width:900px){.packages{grid-template-columns:repeat(3,1fr);align-items:stretch}}
.pkg{display:flex;flex-direction:column;gap:var(--space-xs);padding:var(--space-lg);border-radius:var(--radius-xl);
  background:var(--color-surface-raised);border:1px solid var(--color-surface-stroke)}
.pkg.is-featured{border-color:rgba(232,179,65,.6);background:linear-gradient(180deg,rgba(232,179,65,.1),var(--color-surface-raised) 55%);
  box-shadow:var(--shadow-glow-brand)}
@media (min-width:900px){.pkg.is-featured{transform:translateY(-10px)}}
.pkg-name{font:600 20px/1.2 var(--font-sans);letter-spacing:-.02em}
.pkg-price{font:600 clamp(34px,6vw,44px)/1 var(--font-mono);letter-spacing:-.04em;margin-block:var(--space-xs)}
.pkg-line{flex:1;font:400 15px/1.55 var(--font-sans);color:var(--color-content-secondary)}
.pkg .btn{margin-top:var(--space-md)}
.fee-line{margin-top:var(--space-lg);font:400 15px/1.55 var(--font-sans);color:var(--color-content-secondary);max-width:46rem}
.fee-line strong{color:var(--color-content-primary);font-weight:600}
.pkg-price .cm{margin-inline:-.1em}

/* page.css */
*,*::before,*::after{box-sizing:border-box}
html{background:var(--color-surface-sunken);color-scheme:dark;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--color-surface-sunken);color:var(--color-content-primary);
  font:400 var(--type-body-lg-size)/1.5 var(--font-sans);-webkit-font-smoothing:antialiased}
h1,h2,h3,p{margin:0}
a{color:inherit}
html{--head-h:60px}
:focus-visible{outline:2px solid var(--color-brand-primary);outline-offset:3px}
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
main{display:block}

/* phone.css */
/* The device frame. A scene is the designer's 402 x 874 layout, untouched; the frame scales it
   with one transform. tan(atan2(100cqw, 402px)) is the frame width divided by 402px as a plain
   number, so a scene fits a frame of any width and is exactly the 402 px layout at every size.
   Set the width with --phone-w (any length) or let the frame fill its parent. */
.phone{position:relative;flex:none;width:var(--phone-w,100%);aspect-ratio:402/874;container-type:inline-size;
  overflow:hidden;border-radius:10.45%/4.806%;background:var(--color-surface-sunken);
  box-shadow:0 0 0 1px rgba(255,255,255,.16),0 24px 48px -12px rgba(0,0,0,.65)}
.phone>.scene{position:absolute;left:0;top:0;transform-origin:0 0;
  --k:tan(atan2(100cqw, 402px));transform:scale(var(--k))}
/* The designed markup assumes the browser default box model; page.css resets to border-box. */
.scene,.scene *,.scene *::before,.scene *::after{box-sizing:content-box}
.scene{font-family:var(--font-sans);-webkit-font-smoothing:antialiased;text-align:start;line-height:normal}
.scene .ico{width:1em;height:1em;flex:none;vertical-align:-.14em}
/* Icons that replace colour emoji keep their colour; the rest follow the text. */
.scene .ico-bell{color:#E8B341}

/* pk.css */
/* Beat 4: PK (pos 4 -> 5). R6 is stacked over the room scene.
     4.00 -> 4.25  the room fades out by 4.12, the PK screen fades in from 4.06; the two teams split apart (4.05 -> 4.30)
     4.35 -> 4.95  seven states, one a second: six boosts land (alternating, the designed 2k each); each
                   swap is a 0.03-pos cross-fade so a one-digit change does not smear; the bar swings
                   in the same window; the last state is the designed R6
     4.6 / 4.8     the boost line and the message rise
   The numbers are worked backwards from the designed screen by tools/scenes.py (--sh0..--sh6 on the
   scene root are the bar shares). Transform and opacity only. */
.scene[data-scene="R6"][data-stage]{
  --x:clamp(0,calc((var(--pos,0) - 4.06) / .19),1);
  --sp:clamp(0,calc((var(--pos,0) - 4.05) / .25),1);
  opacity:var(--x);
  --w0:clamp(0,calc((4.415 - var(--pos,0)) / .03),1);
  --w1:clamp(0,calc((.065 - max(var(--pos,0) - 4.45,4.45 - var(--pos,0))) / .03),1);
  --w2:clamp(0,calc((.065 - max(var(--pos,0) - 4.55,4.55 - var(--pos,0))) / .03),1);
  --w3:clamp(0,calc((.065 - max(var(--pos,0) - 4.65,4.65 - var(--pos,0))) / .03),1);
  --w4:clamp(0,calc((.065 - max(var(--pos,0) - 4.75,4.75 - var(--pos,0))) / .03),1);
  --w5:clamp(0,calc((.065 - max(var(--pos,0) - 4.85,4.85 - var(--pos,0))) / .03),1);
  --w6:clamp(0,calc((var(--pos,0) - 4.885) / .03),1);
  --r0:clamp(0,calc((var(--pos,0) - 4.385) / .03),1);
  --r1:clamp(0,calc((var(--pos,0) - 4.485) / .03),1);
  --r2:clamp(0,calc((var(--pos,0) - 4.585) / .03),1);
  --r3:clamp(0,calc((var(--pos,0) - 4.685) / .03),1);
  --r4:clamp(0,calc((var(--pos,0) - 4.785) / .03),1);
  --r5:clamp(0,calc((var(--pos,0) - 4.885) / .03),1);
  --share:calc(var(--sh0) + (var(--sh1) - var(--sh0)) * var(--r0) + (var(--sh2) - var(--sh1)) * var(--r1)
    + (var(--sh3) - var(--sh2)) * var(--r2) + (var(--sh4) - var(--sh3)) * var(--r3)
    + (var(--sh5) - var(--sh4)) * var(--r4) + (var(--sh6) - var(--sh5)) * var(--r5));
}
.scene[data-scene="R6"][data-stage] .team-a{transform:translateX(calc((1 - var(--sp)) * 70px));opacity:var(--sp)}
.scene[data-scene="R6"][data-stage] .team-b{transform:translateX(calc((1 - var(--sp)) * -70px));opacity:var(--sp)}
.scene[data-scene="R6"][data-stage] .pk-head{opacity:clamp(0,calc((var(--pos,0) - 4.1) / .15),1);
  transform:translateY(calc((1 - clamp(0,calc((var(--pos,0) - 4.1) / .15),1)) * -10px))}
.scene[data-scene="R6"][data-stage] .pk-bar{position:relative}
.scene[data-scene="R6"][data-stage] .pk-fill-b{position:absolute;inset:0}
.scene[data-scene="R6"][data-stage] .pk-fill-a{position:absolute;left:0;top:0;bottom:0;width:100%!important;z-index:1;
  transform-origin:0 50%;transform:scaleX(var(--share))}
.scene[data-scene="R6"][data-stage] .chat-boost{opacity:clamp(0,calc((var(--pos,0) - 4.6) / .12),1);
  transform:translateY(calc((1 - clamp(0,calc((var(--pos,0) - 4.6) / .12),1)) * 12px))}
.scene[data-scene="R6"][data-stage] .chat-msg{opacity:clamp(0,calc((var(--pos,0) - 4.8) / .12),1);
  transform:translateY(calc((1 - clamp(0,calc((var(--pos,0) - 4.8) / .12),1)) * 12px))}

/* score and clock strings: state i is visible in its window */
.scene[data-scene="R6"][data-stage] :is(.pk-score-a,.pk-score-b,.pk-clock){position:relative}
.scene[data-scene="R6"][data-stage] :is(.sa,.sb,.ck):not(.sa-full,.sb-full,.ck-full){position:absolute;top:0;white-space:nowrap}
.scene[data-scene="R6"][data-stage] .sa:not(.sa-full),.scene[data-scene="R6"][data-stage] .ck:not(.ck-full){left:0}
.scene[data-scene="R6"][data-stage] .sb:not(.sb-full){right:0}
.scene[data-scene="R6"][data-stage] :is(.sa-0,.sb-0,.ck-0){opacity:var(--w0)}
.scene[data-scene="R6"][data-stage] :is(.sa-1,.sb-1,.ck-1){opacity:var(--w1)}
.scene[data-scene="R6"][data-stage] :is(.sa-2,.sb-2,.ck-2){opacity:var(--w2)}
.scene[data-scene="R6"][data-stage] :is(.sa-3,.sb-3,.ck-3){opacity:var(--w3)}
.scene[data-scene="R6"][data-stage] :is(.sa-4,.sb-4,.ck-4){opacity:var(--w4)}
.scene[data-scene="R6"][data-stage] :is(.sa-5,.sb-5,.ck-5){opacity:var(--w5)}
.scene[data-scene="R6"][data-stage] :is(.sa-full,.sb-full,.ck-full){opacity:var(--w6)}

/* in the pinned stage only: the PK screen gives way to the status cuts (5.0 -> 5.12) */
.story-stage .scene[data-scene="R6"][data-stage]{opacity:min(var(--x),clamp(0,calc((5.12 - var(--pos,0)) / .12),1))}

/* each boost shows its designed amount as a chip that rises from the score it went to, midway
   between two states (4.40 + 0.1 k), then fades */
.scene[data-scene="R6"][data-stage] .pk-head{position:relative}
.scene[data-scene="R6"][data-stage] .boost-chip{position:absolute;top:34px;padding:3px 8px;border-radius:999px;
  font:600 11px/1 'IBM Plex Mono',monospace;pointer-events:none;
  opacity:clamp(0,calc(1 - max(var(--pos,0) - var(--m),var(--m) - var(--pos,0)) / .05),1);
  transform:translateY(calc((var(--m) - var(--pos,0)) * 220px))}
.scene[data-scene="R6"][data-stage] .boost-a{left:14px;color:#2DD4BF;background:rgba(45,212,191,.16);border:1px solid rgba(45,212,191,.4)}
.scene[data-scene="R6"][data-stage] .boost-b{right:14px;color:#F76A9C;background:rgba(247,106,156,.16);border:1px solid rgba(247,106,156,.4)}
.scene[data-scene="R6"][data-stage] .boost-0{--m:4.40}
.scene[data-scene="R6"][data-stage] .boost-1{--m:4.50}
.scene[data-scene="R6"][data-stage] .boost-2{--m:4.60}
.scene[data-scene="R6"][data-stage] .boost-3{--m:4.70}
.scene[data-scene="R6"][data-stage] .boost-4{--m:4.80}
.scene[data-scene="R6"][data-stage] .boost-5{--m:4.90}

/* rebrand.css */
/* Beat 8: make it yours (pos 8 -> 9). The stage hands the phone back at full size showing the
   designed Home screen with a brand strip; the visitor's name and colour live in the copy block.
     8.00 -> 8.15  the browser frame leaves; the leaderboard gives way to Home (8.05 -> 8.2)    */
:root{--brand-accent:#E8B341;--brand-accent-hi:#F2C05A;--brand-accent-lo:#D98A2B}

.scene[data-stage] .pbrand{position:absolute;left:16px;top:14px;z-index:2;display:flex;align-items:center;gap:9px;
  max-width:260px}
.scene[data-stage] .pbrand-tile{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:9px;
  background:linear-gradient(135deg,var(--brand-accent-hi),var(--brand-accent-lo));color:#17110A;
  font:700 17px/1 'Sora',sans-serif}
.scene[data-stage] .pbrand-name{font:600 15px/1.1 'Sora',sans-serif;letter-spacing:-.01em;color:#F8FAFC;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.rebrand{margin-top:var(--space-md);display:grid;gap:var(--space-sm)}
.rebrand-label{font:600 11px/1 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;
  color:var(--color-content-muted)}
.rebrand-input{width:100%;min-height:52px;padding:0 var(--space-md);border-radius:var(--radius-md);
  border:1px solid var(--color-surface-stroke);background:var(--color-surface-raised);color:var(--color-content-primary);
  font:600 20px/1.2 var(--font-sans);letter-spacing:-.01em;caret-color:var(--brand-accent);outline:none}
.rebrand-input::placeholder{color:var(--color-content-tertiary)}
.rebrand-input:focus{border-color:var(--brand-accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand-accent) 28%,transparent)}
.swatches{display:flex;gap:var(--space-sm);align-items:center}
.swatch{width:44px;height:44px;border-radius:999px;border:2px solid transparent;padding:0;cursor:pointer;
  background:var(--sw);box-shadow:inset 0 0 0 3px var(--color-surface-sunken);
  transition:transform var(--motion-fast) var(--ease-standard)}
.swatch[aria-pressed="true"]{border-color:var(--color-content-primary)}
.swatch:active{transform:scale(.92)}
.rebrand-caption,.rebrand-note{font:400 13px/1.45 var(--font-sans);color:var(--color-content-secondary);margin-top:var(--space-xxs)}
.rebrand-note{color:var(--color-content-muted)}

/* the caption is a truth rule and always shows; the copy block is measured and the phone makes room */
.beat[data-beat="8"] .beat-copy .lead{font-size:clamp(15px,4vw,18px)}
.beat[data-beat="8"] .beat-still .phone{--phone-w:min(100%,300px)}
.beat[data-beat="8"] .beat-copy{pointer-events:auto}
.story-on .beat[data-beat="8"]{pointer-events:auto}

/* room.css */
/* The room (R1) as a function of --pos, the stage's continuous beat position.
   Every beat's still sets its own --pos on its phone, so the pinned stage and the stills are the
   same markup in different states.

     pos 0        the room as designed: four on the mic, chat moving, 2.4k listening (hero)
     0.3 -> 1     everyone leaves, the count drops to one
     1 -> 2       the host is alone; the speaking ring starts across 1.35 -> 1.6
     2.05 -> 2.72 seats fill in a fixed order: Noura, Sofia, Yusuf, Khalid, Rania
     2.5 -> 2.95  the four chat lines rise, one after another
     2.0 -> 3     the count climbs 1, 12, 148, 640, 2.4k

   Opacity and transform only; the derived numbers are custom properties. */
.scene[data-scene="R1"][data-stage]{
  --out:clamp(0,calc((1 - var(--pos,0)) / .7),1);
  --s0:max(var(--out),clamp(0,calc((var(--pos,0) - 2.05) / .15),1));
  --s2:max(var(--out),clamp(0,calc((var(--pos,0) - 2.18) / .15),1));
  --s3:max(var(--out),clamp(0,calc((var(--pos,0) - 2.31) / .15),1));
  --s1:max(var(--out),clamp(0,calc((var(--pos,0) - 2.44) / .15),1));
  --s7:max(var(--out),clamp(0,calc((var(--pos,0) - 2.57) / .15),1));
  --c0:clamp(0,calc((var(--pos,0) - 2.50) / .12),1);
  --c1:clamp(0,calc((var(--pos,0) - 2.61) / .12),1);
  --c2:clamp(0,calc((var(--pos,0) - 2.72) / .12),1);
  --c3:clamp(0,calc((var(--pos,0) - 2.83) / .12),1);
  --ring-on:max(var(--out),clamp(0,calc((var(--pos,0) - 1.35) * 4),1));
}
.scene[data-scene="R1"][data-stage] .seat{position:relative}
.scene[data-scene="R1"][data-stage] .seat-0{--s:var(--s0)}
.scene[data-scene="R1"][data-stage] .seat-1{--s:var(--s1)}
.scene[data-scene="R1"][data-stage] .seat-2{--s:var(--s2)}
.scene[data-scene="R1"][data-stage] .seat-3{--s:var(--s3)}
.scene[data-scene="R1"][data-stage] .seat-7{--s:var(--s7)}
.scene[data-scene="R1"][data-stage] .seat.has-ghost>:not(.seat-ghost){opacity:var(--s);transform:scale(calc(.86 + .14 * var(--s)))}
.scene[data-scene="R1"][data-stage] .seat-ghost{position:absolute;inset:0;opacity:calc(1 - var(--s))}

.scene[data-scene="R1"][data-stage] .chat-row{transform:translateY(calc((1 - var(--c)) * 12px));opacity:calc(var(--c) * (1 - var(--b,0)))}
.scene[data-scene="R1"][data-stage] .chat-row:nth-child(1){--c:var(--c0)}
.scene[data-scene="R1"][data-stage] .chat-row:nth-child(2){--c:var(--c1)}
.scene[data-scene="R1"][data-stage] .chat-row:nth-child(3){--c:var(--c2)}
.scene[data-scene="R1"][data-stage] .chat-row:nth-child(4){--c:var(--c3)}

/* listener count: each string has a window on --pos (rise, hold, fall) */
.scene[data-scene="R1"][data-stage] .listeners{position:relative}
.scene[data-scene="R1"][data-stage] .lv:not(.lv-full){position:absolute;left:0;top:0;white-space:nowrap}
.scene[data-scene="R1"][data-stage] .lv-0{opacity:min(clamp(0,calc((var(--pos,0) - .5) / .4),1),clamp(0,calc((2.25 - var(--pos,0)) / .1),1))}
.scene[data-scene="R1"][data-stage] .lv-1{opacity:min(clamp(0,calc((var(--pos,0) - 2.15) / .1),1),clamp(0,calc((2.5 - var(--pos,0)) / .1),1))}
.scene[data-scene="R1"][data-stage] .lv-2{opacity:min(clamp(0,calc((var(--pos,0) - 2.4) / .1),1),clamp(0,calc((2.75 - var(--pos,0)) / .1),1))}
.scene[data-scene="R1"][data-stage] .lv-3{opacity:min(clamp(0,calc((var(--pos,0) - 2.65) / .1),1),clamp(0,calc((2.95 - var(--pos,0)) / .1),1))}
.scene[data-scene="R1"][data-stage] .lv-full{opacity:max(var(--out),clamp(0,calc((var(--pos,0) - 2.85) / .1),1))}

/* ---- beat 3: a gift (pos 3 -> 4). The numbers in the strings come from design/voxa-seed.json
   (Dragon: 10,000 coins, 5,000 diamonds = floor(price / 2)); tools/scenes.py writes them.
     3.00 -> 3.38  the gift flies from the gift button to the middle of the room on a curve
     3.32 -> 3.58  the designed overlay blooms: scrim, glow, tile, nameplate, label
     3.45 -> 3.95  (--cnt) the viewer's balance falls in four steps, the host's diamonds rise in four */
.scene[data-scene="R1"][data-stage]{
  --g:clamp(0,calc((var(--pos,0) - 3) / .38),1);
  --gs:calc(3 * var(--g) * var(--g) - 2 * var(--g) * var(--g) * var(--g));
  --gx:calc(1 - (1 - var(--g)) * (1 - var(--g)));
  --b:clamp(0,calc((var(--pos,0) - 3.32) / .26),1);
  --cnt:clamp(0,calc((var(--pos,0) - 3.45) / .5),1);
}
.scene[data-scene="R1"][data-stage] .composer{position:relative;z-index:2}
.scene[data-scene="R1"][data-stage] .gift-fly{position:absolute;left:354px;top:802px;width:38px;height:38px;z-index:3;pointer-events:none;
  transform:translateY(calc(var(--gs) * -396px));
  opacity:min(clamp(0,calc(var(--g) * 25),1),clamp(0,calc((1 - var(--g)) * 7),1))}
.scene[data-scene="R1"][data-stage] .gift-fly-x{transform:translateX(calc(var(--gx) * -172px)) scale(calc(1 + 1.7 * var(--g)))}
.scene[data-scene="R1"][data-stage] .gift-fly-tile{width:38px;height:38px;border-radius:10px;
  background:radial-gradient(circle at 38% 32%,#FFF0C4,#E8B341 46%,#8A5A16);box-shadow:0 0 18px rgba(232,179,65,.6)}

.scene[data-scene="R1"][data-stage] .gift-layer{position:absolute;inset:0;z-index:1;pointer-events:none}
.scene[data-scene="R1"][data-stage] .gift-dim{opacity:var(--b)}
.scene[data-scene="R1"][data-stage] .particle{opacity:calc(var(--b) * .9);transform:translateY(calc((1 - var(--b)) * 36px))}
.scene[data-scene="R1"][data-stage] .gift-banner{opacity:var(--b);transform:translateY(calc((1 - var(--b)) * -26px))}
.scene[data-scene="R1"][data-stage] .gift-glow{opacity:var(--b);transform:scale(calc(.4 + .6 * var(--b)))}
.scene[data-scene="R1"][data-stage] .gift-tile-big{opacity:clamp(0,calc(var(--b) * 3),1);
  transform:scale(calc(.5 + .5 * var(--b) + .14 * sin(calc(var(--b) * 180deg))))}
.scene[data-scene="R1"][data-stage] .gift-label{opacity:clamp(0,calc((var(--b) - .35) * 2),1);transform:translateY(calc((1 - var(--b)) * 18px))}

/* balance: the designed "12.4k" falls to 9.9k, 7.4k, 4.9k, 2.4k */
.scene[data-scene="R1"][data-stage] .coin-count{position:relative}
.scene[data-scene="R1"][data-stage] .cv:not(.cv-full){position:absolute;left:0;top:0;white-space:nowrap}
.scene[data-scene="R1"][data-stage] .cv-full{opacity:clamp(0,calc((.1875 - max(var(--cnt) - 0,0 - var(--cnt))) / .125),1)}
.scene[data-scene="R1"][data-stage] .cv-0{opacity:clamp(0,calc((.1875 - max(var(--cnt) - 0.25,0.25 - var(--cnt))) / .125),1)}
.scene[data-scene="R1"][data-stage] .cv-1{opacity:clamp(0,calc((.1875 - max(var(--cnt) - 0.5,0.5 - var(--cnt))) / .125),1)}
.scene[data-scene="R1"][data-stage] .cv-2{opacity:clamp(0,calc((.1875 - max(var(--cnt) - 0.75,0.75 - var(--cnt))) / .125),1)}
.scene[data-scene="R1"][data-stage] .cv-3{opacity:clamp(0,calc((.1875 - max(var(--cnt) - 1,1 - var(--cnt))) / .125),1)}

/* the host's diamonds: a pill built from the coin pill's own pattern, in the charm colour */
.scene[data-scene="R1"][data-stage] .diamond-pill{position:absolute;left:244px;top:112px;z-index:3;display:flex;align-items:center;gap:5px;
  padding:6px 10px 6px 7px;border-radius:999px;background:rgba(247,106,156,.14);
  border:1px solid rgba(247,106,156,.3);color:#F76A9C;font:500 12px/1 'Sora',sans-serif;
  opacity:clamp(0,calc((var(--pos,0) - 3.38) * 14),1)}
.scene[data-scene="R1"][data-stage] .diamond-pill .ico{width:14px;height:14px}
.scene[data-scene="R1"][data-stage] .dv-count{position:relative;display:inline-block}
.scene[data-scene="R1"][data-stage] .dv-size{visibility:hidden}
.scene[data-scene="R1"][data-stage] .dv{position:absolute;left:0;top:0;white-space:nowrap}
.scene[data-scene="R1"][data-stage] .dv-0{opacity:clamp(0,calc((.1875 - max(var(--cnt) - 0,0 - var(--cnt))) / .125),1)}
.scene[data-scene="R1"][data-stage] .dv-1{opacity:clamp(0,calc((.1875 - max(var(--cnt) - 0.25,0.25 - var(--cnt))) / .125),1)}
.scene[data-scene="R1"][data-stage] .dv-2{opacity:clamp(0,calc((.1875 - max(var(--cnt) - 0.5,0.5 - var(--cnt))) / .125),1)}
.scene[data-scene="R1"][data-stage] .dv-3{opacity:clamp(0,calc((.1875 - max(var(--cnt) - 0.75,0.75 - var(--cnt))) / .125),1)}
.scene[data-scene="R1"][data-stage] .dv-4{opacity:clamp(0,calc((.1875 - max(var(--cnt) - 1,1 - var(--cnt))) / .125),1)}

/* the bloom takes the room: the designed overlay has no chat and only faint seats beneath it */
.scene[data-scene="R1"][data-stage] .seats,.scene[data-scene="R1"][data-stage] .host{opacity:calc(1 - .55 * var(--b,0))}

/* beat 4 hands the phone to the PK scene: this one fades out as R6 fades in (R1 out by 4.12, R6 in from 4.06 to 4.25) */
.scene[data-scene="R1"][data-stage]{opacity:clamp(0,calc((4.12 - var(--pos,0)) / .12),1)}

/* status.css */
/* Beat 5: status (pos 5 -> 6), three cuts on the stage, one after another.
     5.00 -> 5.12  VIP card in (the metallic sweep loops); its bar fills 5.12 -> 5.32
     5.36 -> 5.46  level ring in; the arc fills to 0.68 across 5.46 -> 5.66
     5.70 -> 5.80  leaderboard in; the five rows change places across 5.80 -> 5.98
   The cuts cross-fade in the pinned stage only; every still sets --pos: 6 and shows all three
   in their end state. Transform, opacity and custom properties only. */
.story-stage .scene[data-scene="W2"][data-stage]{opacity:min(clamp(0,calc((var(--pos,0) - 5) / .12),1),clamp(0,calc((5.46 - var(--pos,0)) / .1),1))}
.story-stage .scene[data-scene="W6"][data-stage]{opacity:min(clamp(0,calc((var(--pos,0) - 5.36) / .1),1),clamp(0,calc((5.8 - var(--pos,0)) / .1),1))}
.story-stage .scene[data-scene="W3"][data-stage]{opacity:min(clamp(0,calc((var(--pos,0) - 5.7) / .1),1),clamp(0,calc((8.2 - var(--pos,0)) / .15),1))}
/* beat 8: the Home screen (with the brand strip) takes the phone */
.story-stage .scene[data-scene="S2"][data-stage]{opacity:clamp(0,calc((var(--pos,0) - 8.05) / .15),1)}
.scene[data-scene="S2"][data-stage]{opacity:1}

/* W2: the bar fills to the designed 70%; the sheen of the metallic card loops */
.scene[data-scene="W2"][data-stage] .vip-fill{width:100%!important;transform-origin:0 50%;
  transform:scaleX(calc(.7 * clamp(0,calc((var(--pos,0) - 5.12) / .2),1)))}
.scene[data-scene="W2"][data-stage] .vip-sheen{animation:sweep var(--motion-spectacle-md) var(--ease-standard) infinite}

/* W6: the conic arc fills to the designed 0.68 turn */
.scene[data-scene="W6"][data-stage]{--lv:calc(.68 * clamp(0,calc((var(--pos,0) - 5.46) / .2),1))}
.scene[data-scene="W6"][data-stage] .level-arc{
  background:conic-gradient(#E8B341 0turn calc(var(--lv) * 1turn),rgba(248,250,252,.09) calc(var(--lv) * 1turn) 1turn)!important}

/* W3: rows start in another order and settle into the designed one; row i starts d rows away
   (d = start slot - final slot, one row = 61 design px) and eases out to 0 */
.scene[data-scene="W3"][data-stage]{--m:clamp(0,calc((var(--pos,0) - 5.8) / .18),1);--e:calc(1 - (1 - var(--m)) * (1 - var(--m)))}
.scene[data-scene="W3"][data-stage] .lb-list{position:relative}
.scene[data-scene="W3"][data-stage] .lb-row-0{transform:translateY(calc((1 - var(--e)) * 183px))}
.scene[data-scene="W3"][data-stage] .lb-row-1{transform:translateY(calc((1 - var(--e)) * 61px))}
.scene[data-scene="W3"][data-stage] .lb-row-2{transform:translateY(calc((1 - var(--e)) * 122px))}
.scene[data-scene="W3"][data-stage] .lb-row-3{transform:translateY(calc((1 - var(--e)) * -122px))}
.scene[data-scene="W3"][data-stage] .lb-row-4{transform:translateY(calc((1 - var(--e)) * -244px))}
.scene[data-scene="W3"][data-stage] .rank-n{opacity:clamp(0,calc((var(--m) - .85) / .15),1)}
.scene[data-scene="W3"][data-stage] .rank-fixed{opacity:calc(1 - clamp(0,calc((var(--m) - .85) / .15),1))}

/* story.css */
/* Story layout (LANDING_PLAN.md, L0.3). Default = flow: no JavaScript, or reduced motion.
   Each beat is a block with its copy and its own still; nothing is sticky; --p is 1 (end state).
   html.story-on (set by story.js, never under reduced motion) pins the stage and turns every
   beat into a scroll range. */
.story{position:relative}
.story-stage{display:none}
.beat{--p:1;--d:0;position:relative}
.beat-copy{padding:var(--space-xxxl) var(--space-md) var(--space-xl);max-width:34rem;margin-inline:auto}
.beat-still{display:flex;justify-content:center;padding:var(--space-md) var(--space-md) var(--space-xxxl)}
.beat-still .phone{--phone-w:min(100%,300px)}
.beat-still-3{gap:var(--space-sm)}
.beat-still-3 .phone{--phone-w:min(30vw,170px)}
.beat[data-beat="0"] .beat-copy{padding-top:calc(var(--head-h,60px) + var(--space-xl))}
/* the pinned stage's own glow: the room skin bed, static */
.story-stage{background:radial-gradient(ellipse 70% 45% at 50% 28%,rgba(59,27,111,.55),transparent 70%),
  radial-gradient(ellipse 60% 40% at 62% 40%,rgba(10,51,47,.5),transparent 72%)}

/* The stage keeps its real height and the first beat is pulled up over it. A negative bottom
   margin on the stage instead would shrink its margin box to nothing, and a sticky box is only
   released when its margin box reaches the end of the track: it would stay pinned one screen
   too long, on top of whatever follows the story. */
.story-on .story-stage{display:flex;position:sticky;top:0;height:100vh;height:100svh;
  align-items:flex-start;justify-content:center;overflow:hidden;
  padding-top:var(--head-h,0px);box-sizing:border-box}
.story-on .story-stage + .beat{margin-top:-100vh;margin-top:-100svh}
.story-on .beat{height:var(--beat-h,150vh);height:var(--beat-h,150svh);pointer-events:none}   /* length - 1 viewport = the end of the beat's animation */
/* the copy is a compact block pinned at one line; it fades out within a short distance, so it never crosses the phone */
.story-on .beat-copy{--copy-top:calc(100vh - var(--copy-h,260px) - var(--space-xxl));
  --copy-top:calc(100svh - var(--copy-h,260px) - var(--space-xxl));
  position:sticky;top:var(--copy-top);padding-block:0;pointer-events:auto;
  opacity:clamp(0,calc(1 - var(--d,0) * 6),1)}
.story-on .beat-still{display:none}
.story-on .beat[data-beat="0"] .beat-copy{padding-top:0}

/* phone first: the pinned device takes the upper part of the screen, the line sits under it;
   from 900 px the phone sits in the right half of a centred container and the copy in the left */
.story-stage{--room:calc(100vh - var(--head-h,60px) - var(--copy-h,260px) - 64px);
  --room:calc(100svh - var(--head-h,60px) - var(--copy-h,260px) - 64px)}
.story-on .story-stage .phone{--phone-w:min(60vw,320px,max(120px,calc(var(--room) / 2.174)));margin-top:8px}
@media (min-width:900px){
  .story-on .story-stage{display:grid;grid-template-columns:1fr 1fr;align-items:center;
    padding-inline:max(var(--space-xl),calc((100% - 1120px) / 2));padding-top:var(--head-h,0px)}
  .story-on .story-stage .phone{grid-column:2;justify-self:center;--phone-w:min(34vh,340px);--phone-w:min(34svh,340px);margin-top:0}
  .story-on .beat-copy{--copy-top:50vh;--copy-top:50svh;transform:translateY(-50%);
    max-width:none;margin-inline:0;padding-block:0;
    padding-inline-start:max(var(--space-xl),calc((100% - 1120px) / 2));padding-inline-end:calc(50% + var(--space-xl))}
}

/* zy-pages.css */
/* Text pages: the Arabic landing page and the guides. Same tokens and components as the
   story page, in normal flow, with logical properties so right-to-left works unchanged. */
.doc-head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-md);
  width:min(1120px,calc(100% - 2 * var(--space-md)));margin-inline:auto;min-height:64px}
.doc-nav{display:flex;flex-wrap:wrap;gap:var(--space-xs) var(--space-md);font:500 14px/1 var(--font-sans)}
.doc-nav a{display:inline-flex;align-items:center;min-height:44px;color:var(--color-content-secondary);text-decoration:none}
.doc-nav a:hover{color:var(--color-content-primary)}
.doc{width:min(760px,calc(100% - 2 * var(--space-md)));margin-inline:auto;padding-block:var(--space-xl) var(--space-xxxl)}
.doc-wide{width:min(1120px,calc(100% - 2 * var(--space-md)))}
.doc h1{font:600 clamp(32px,7vw,54px)/1.1 var(--font-sans);letter-spacing:-.025em;text-wrap:balance}
.doc .standfirst{margin-top:var(--space-md);font:400 clamp(17px,4vw,21px)/1.6 var(--font-sans);color:var(--color-content-secondary)}
.doc h2{margin-top:var(--space-xxxl);font:600 clamp(23px,5vw,31px)/1.2 var(--font-sans);letter-spacing:-.015em}
.doc h3{margin-top:var(--space-xl);font:600 18px/1.3 var(--font-sans)}
.doc p,.doc li{font:400 16.5px/1.75 var(--font-sans);color:var(--color-content-secondary)}
.doc p{margin-top:var(--space-md)}
.doc ul,.doc ol{margin:var(--space-md) 0 0;padding-inline-start:1.3em}
.doc li{margin-top:var(--space-xs)}
.doc strong{color:var(--color-content-primary);font-weight:600}
.doc a:not(.btn){color:var(--color-brand-primary);text-underline-offset:3px}
.doc table{width:100%;margin-top:var(--space-lg);border-collapse:collapse;font:400 15px/1.5 var(--font-sans)}
.doc th,.doc td{padding:var(--space-sm) var(--space-sm);text-align:start;vertical-align:top;
  border-bottom:1px solid var(--color-surface-stroke);color:var(--color-content-secondary)}
.doc th{color:var(--color-content-primary);font-weight:600}
.table-scroll{overflow-x:auto}
.shots{display:flex;justify-content:center;gap:var(--space-md);margin-top:var(--space-xl)}
.shots img{display:block;width:min(30%,230px);height:auto;border-radius:22px;
  box-shadow:0 0 0 1px rgba(248,250,252,.14),0 24px 48px -16px rgba(0,0,0,.7)}
.shots.one img{width:min(62%,260px)}
.shots-cap{margin-top:var(--space-sm);text-align:center;font:400 13.5px/1.5 var(--font-sans);color:var(--color-content-muted,#8591A9)}
.band{margin-top:var(--space-xxxl);padding:var(--space-xl);border-radius:var(--radius-lg,20px);
  border:1px solid rgba(232,179,65,.35);background:linear-gradient(135deg,rgba(232,179,65,.10),rgba(124,58,237,.10))}
.band h2{margin-top:0}
.band .actions{margin-top:var(--space-lg)}
.doc .packages{margin-top:var(--space-lg)}
.more{margin-top:var(--space-xxxl);padding-top:var(--space-lg);border-top:1px solid var(--color-surface-stroke)}
.more ul{list-style:none;padding:0}
.crumbs{font:500 13px/1 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--color-brand-primary);margin-bottom:var(--space-md)}
[dir="rtl"] .doc,[dir="rtl"] .doc-head{font-family:'Geeza Pro','Noto Sans Arabic','Segoe UI',Tahoma,var(--font-sans)}
[dir="rtl"] .doc h1,[dir="rtl"] .doc h2,[dir="rtl"] .doc h3,[dir="rtl"] .doc p,[dir="rtl"] .doc li,[dir="rtl"] .doc td,[dir="rtl"] .doc th,
[dir="rtl"] .doc .standfirst,[dir="rtl"] .doc-nav,[dir="rtl"] .btn,[dir="rtl"] .shots-cap{font-family:inherit;letter-spacing:0}
[dir="rtl"] .doc h1{line-height:1.35}
[dir="rtl"] .doc h2{line-height:1.45}
[dir="rtl"] .doc p,[dir="rtl"] .doc li{line-height:1.95;font-size:17px}
.pk-ar{list-style:none;padding:0;display:grid;gap:var(--space-sm);margin-top:var(--space-lg)}
.pk-ar li{margin:0;padding:var(--space-lg);border-radius:var(--radius-md,16px);background:var(--color-surface-raised);border:1px solid var(--color-surface-stroke)}
.pk-ar .price{display:block;margin-top:4px;font:600 26px/1.2 var(--font-mono);color:var(--color-content-primary);direction:ltr;text-align:end}
@media (min-width:760px){.pk-ar{grid-template-columns:repeat(3,1fr)}}
.table-scroll table{min-width:600px}

/* zz-desktop.css */
/* Desktop composition (>= 900 px). Loaded last, so it only adjusts sizes set earlier.
   The phone fills the height of the screen, the type scales with the width, and the
   stage gets a halo and a progress rail so the wide canvas reads as designed, not empty. */
@media (min-width:900px){
  /* type that holds a wide screen */
  .display{font-size:clamp(54px,5.4vw,86px);line-height:1.02}
  .display-2{font-size:clamp(42px,4.3vw,66px);line-height:1.05}
  .lead{font-size:clamp(18px,1.55vw,23px);max-width:30em}
  .beat[data-beat="8"] .beat-copy .lead{font-size:clamp(17px,1.4vw,21px)}
  .beat-copy .eyebrow{font-size:12.5px;margin-bottom:var(--space-md)}
  .actions .btn{min-height:54px;padding-inline:var(--space-xxl);font-size:16px}
  .scroll-hint{margin-top:var(--space-xl)}

  /* the phone takes the full height that is left under the header */
  .story-on .story-stage .phone{
    --phone-w:min(calc((100vh - var(--head-h,60px) - 56px) / 2.174),410px);
    --phone-w:min(calc((100svh - var(--head-h,60px) - 56px) / 2.174),410px)}

  /* a wider frame for the two columns */
  .story-on .story-stage{padding-inline:max(var(--space-xxl),calc((100% - 1280px) / 2))}
  .story-on .beat-copy{padding-inline-start:max(var(--space-xxl),calc((100% - 1280px) / 2))}
  .story-on .biz{inset-inline-end:max(var(--space-xxl),calc((100% - 1280px) / 2))}
  /* never wider than the right column, so it cannot cover the line beside it */
  .story-on .admin-frame{--fw:min(46vw,700px,calc(50vw - max(var(--space-xxl),calc((100vw - 1280px) / 2)) - 32px));
    right:max(var(--space-xxl),calc((100% - 1280px) / 2));margin-top:calc(var(--fw) * -.33)}

  /* a halo behind the phone and a horizon under it */
  .story-stage{background:
    radial-gradient(ellipse 34% 52% at 74% 46%,rgba(124,58,237,.34),transparent 70%),
    radial-gradient(ellipse 30% 40% at 80% 62%,rgba(45,212,191,.16),transparent 72%),
    radial-gradient(ellipse 26% 30% at 66% 30%,rgba(232,179,65,.12),transparent 70%),
    radial-gradient(ellipse 70% 45% at 30% 20%,rgba(59,27,111,.32),transparent 70%)}

  /* which beat of the night this is, as a quiet number above the headline */
  .story{counter-reset:beat -1}
  .beat{counter-increment:beat}
  .story-on .beat:not([data-beat="0"]) .beat-copy::before{content:counter(beat,decimal-leading-zero);display:block;
    margin-bottom:var(--space-md);font:500 13px/1 var(--font-mono);letter-spacing:.18em;color:var(--color-brand-primary)}

  /* progress through the night: a rail at the left edge that fills as the story runs */
  .story-on .story-stage::before,.story-on .story-stage::after{content:"";position:absolute;
    inset-inline-start:max(calc(var(--space-xxl) - 28px),calc((100% - 1280px) / 2 - 28px));
    top:calc(50% - 110px);width:2px;height:220px;border-radius:2px}
  .story-on .story-stage::before{background:rgba(248,250,252,.12)}
  .story-on .story-stage::after{background:var(--color-brand-primary);transform-origin:50% 0;transform:scaleY(var(--t,0))}

  /* the offer sections breathe more on a wide screen */
  .wrap{width:min(1180px,calc(100% - 2 * var(--space-xxl)))}
  .section h2{font-size:clamp(40px,3.8vw,58px)}
}
@media (min-width:900px) and (max-height:700px){
  /* short laptop screens: keep the headline from crowding the phone */
  .display{font-size:clamp(44px,4.4vw,64px)}
  .display-2{font-size:clamp(36px,3.6vw,52px)}
}
@media (min-width:1800px) and (min-height:1100px){
  /* large monitors: let the whole composition grow instead of sitting small in the middle */
  .display{font-size:clamp(86px,4.6vw,118px)}
  .display-2{font-size:clamp(66px,3.5vw,90px)}
  .lead{font-size:clamp(23px,1.15vw,29px)}
  .story-on .story-stage .phone{
    --phone-w:min(calc((100vh - var(--head-h,60px) - 72px) / 2.174),540px);
    --phone-w:min(calc((100svh - var(--head-h,60px) - 72px) / 2.174),540px)}
  .story-on .story-stage{padding-inline:max(var(--space-xxl),calc((100% - 1640px) / 2))}
  .story-on .beat-copy{padding-inline-start:max(var(--space-xxl),calc((100% - 1640px) / 2))}
  .story-on .biz{inset-inline-end:max(var(--space-xxl),calc((100% - 1640px) / 2))}
  .story-on .admin-frame{--fw:min(42vw,920px,calc(50vw - max(var(--space-xxl),calc((100vw - 1640px) / 2)) - 32px));
    right:max(var(--space-xxl),calc((100% - 1640px) / 2));margin-top:calc(var(--fw) * -.33)}
  .story-on .story-stage::before,.story-on .story-stage::after{
    inset-inline-start:max(calc(var(--space-xxl) - 28px),calc((100% - 1640px) / 2 - 32px));top:calc(50% - 150px);height:300px}
  .wrap{width:min(1400px,calc(100% - 2 * var(--space-xxl)))}
}