/* Demstrap website, the DemsPRO page. A black hero with the live app as its product shot, then a graphite page with black cards (Apple style).
   Colour rule: black hero; from Features on the page is graphite (#1d1d1f) and the content sits on black cards. White and grey text.
   Brand orange only on primary actions, the logo and the PRO word. One gradient on the page: the hero "PRO", a static run from
   amber through brand orange to vermilion with a tight neon edge and a slow band of light passing down it. Icons are bare
   monochrome glyphs: never on a tinted box, never gradient. The one exception is pricing, where the payment marks wear their own
   colour (PayPal's blue tile, and the Discord Nitro mark itself in Nitro pink for Server Boosting).
   Emphasis (Apple style): grey copy with the key phrase in white.
   Motion rule: one signature moment on load (a caret types "Start Cookin'" and keeps adding o's to "Cooooookin'", the line
   settles, "With The New" comes into focus, "PRO" arrives, then the buttons; the page holds its scroll for those few seconds
   only), the live app rising underneath on scroll, the highlights carousel, and quiet card reveals on Apple's easing.
   Grid rule: every section heading sits on the same left wrap edge; the last scene adds one axis a quarter in.
   Shape rule: controls are full pills; cards --r-card (continuous corners where corner-shape is supported); inner frames 14-18px.
   z-index scale: content 1, caret 2, sticky compare header 2, nav 40, skip link 60. */

@font-face{font-family:'Mona Sans';font-style:normal;font-weight:200 900;font-stretch:75% 125%;font-display:swap;src:url(fonts/mona-sans.woff2) format('woff2')}
@font-face{font-family:'Geist Mono';font-style:normal;font-weight:400 600;font-display:swap;src:url(fonts/geist-mono.woff2) format('woff2')}

:root{
  --bg:#000;
  --page:#1d1d1f;            /* graphite page from Features on */
  --card:#000;               /* card surface on the graphite page */
  --tile:#111113;
  --tile-2:#1a1a1d;
  --fg:#f5f5f7;
  --fg-2:#a1a1a6;            /* 8.0:1 on black */
  --fg-3:#86868b;            /* 5.9:1 on black */
  --line:rgba(255,255,255,.1);
  --line-2:rgba(255,255,255,.16);
  --chip:rgba(255,255,255,.06);
  --accent:#ff8d00;          /* DemsPRO orange: primary action, logo, PRO */
  --accent-hi:#ff9d24;
  --accent-ink:#160c00;
  --focus:#ffb95e;
  --sans:'Mona Sans','Segoe UI',system-ui,-apple-system,sans-serif;
  --mono:'Geist Mono',ui-monospace,'Cascadia Mono',Consolas,monospace;
  --wrap:1120px;
  --gutter:clamp(16px,4vw,40px);
  --nav-h:48px;--pbar-h:52px;--pbar-room:72px;
  --r-xl:28px;--r-lg:18px;--r-sm:12px;
  --r-card:clamp(22px,2.4vw,34px);
  --pad-card:clamp(24px,4.2vw,60px);
  --gap-card:clamp(12px,1.5vw,20px);
  --sec-pad:clamp(96px,15vh,176px);
  --ease:cubic-bezier(.16,1,.3,1);
  --ease-apple:cubic-bezier(.28,.11,.32,1);
  --z-nav:40;--z-skip:60;
}

*,*::before,*::after{box-sizing:border-box}
html{background:var(--page);color-scheme:dark;scroll-behavior:smooth;scroll-padding-top:calc(var(--pbar-room) + 16px);-webkit-text-size-adjust:100%;overflow-x:clip}
body{margin:0;background:transparent;color:var(--fg);font:420 17px/1.55 var(--sans);font-stretch:100%;letter-spacing:-.006em;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:clip;text-rendering:optimizeLegibility}
img,video,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
h1,h2,h3,h4,p,ul,ol,dl,dd,figure{margin:0}
ul,ol{padding:0;list-style:none}
::selection{background:rgba(255,141,0,.35)}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:8px}
main:focus,#highlights:focus{outline:none}
[hidden]{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:fixed;left:16px;top:8px;z-index:var(--z-skip);padding:14px 18px;border-radius:999px;background:var(--fg);color:#000;font:600 14px/1 var(--sans)}
.skip:not(:focus){width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.wrap{width:100%;max-width:calc(var(--wrap) + var(--gutter)*2);margin:0 auto;padding:0 var(--gutter)}
.ic{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ic-fill{fill:currentColor;stroke:none}

/* ---------- cards: black surfaces on the graphite page, large continuous corners, no border, no shadow ---------- */
.card{position:relative;background:var(--card);border-radius:var(--r-card)}
@supports (corner-shape:superellipse(1.6)){
  .card,.hl-card{corner-shape:superellipse(1.6);border-radius:calc(var(--r-card)*1.22)}
}

/* ---------- type: one colour per heading, size and weight carry the hierarchy ---------- */
.h-l{font-weight:650;font-size:clamp(36px,4.6vw,64px);line-height:1.05;letter-spacing:-.034em;text-wrap:balance}
.h-m{font-weight:650;font-size:clamp(30px,3.4vw,48px);line-height:1.07;letter-spacing:-.031em;text-wrap:balance}
.h-s{font-weight:650;font-size:clamp(24px,2.3vw,32px);line-height:1.12;letter-spacing:-.026em}
.copy{max-width:34em;font-weight:560;font-size:clamp(18px,1.55vw,21px);line-height:1.42;letter-spacing:-.016em;color:var(--fg-3);text-wrap:pretty}
.hi{font-weight:inherit;color:var(--fg)}
.lede{max-width:46ch;margin-top:16px;font-size:clamp(17px,1.4vw,20px);line-height:1.45;letter-spacing:-.012em;color:var(--fg-2);text-wrap:pretty}
.lede a{color:var(--fg);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line-2)}
.lede a:hover{text-decoration-color:var(--fg)}

/* ---------- buttons: pills, 44px targets ---------- */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;padding:0 22px;border-radius:999px;font:560 15px/1 var(--sans);letter-spacing:-.01em;white-space:nowrap;cursor:pointer;touch-action:manipulation;border:1px solid var(--line-2);background:rgba(255,255,255,.04);color:var(--fg);transition:background-color .2s ease,border-color .2s ease,transform .18s var(--ease)}
.btn:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.3)}
.btn:active{transform:scale(.97)}
.btn .ic{width:15px;height:15px}
.btn-primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn-primary:hover{background:var(--accent-hi);border-color:var(--accent-hi)}
.link{display:inline-flex;align-items:center;gap:2px;min-height:44px;padding:0 6px;font:500 17px/1 var(--sans);letter-spacing:-.015em;color:var(--fg);transition:opacity .2s ease}
.link .ic{width:17px;height:17px;transition:transform .25s var(--ease)}
.link:hover .ic{transform:translateX(3px)}
.link:hover{opacity:.8}

/* ======================= NAVIGATION, after Apple's product pages =======================
   The Demstrap bar (48px) sits at the top of the page with the sections and scrolls away with it. Once the hero is behind
   us, the DemsPRO bar comes down from the top: a floating, rounded bar with the name on the left and two buttons, Features
   (outlined) and Buy (filled), on the right (site.js sets .on). It morphs in: it drops as a short pill and widens into the
   bar, then its contents come up. On the Buy subpage it stays, with Overview in place of Features. */
.nav{position:absolute;top:0;left:0;right:0;z-index:var(--z-nav);background:rgba(22,22,23,.72);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid rgba(255,255,255,.06)}
@media (prefers-reduced-transparency:reduce){.nav{background:#161617;-webkit-backdrop-filter:none;backdrop-filter:none}}
.nav-in{position:relative;display:flex;align-items:center;gap:16px;max-width:calc(1024px + var(--gutter)*2);height:var(--nav-h);margin:0 auto;padding:0 var(--gutter)}
.brand{display:inline-flex;align-items:center;gap:8px;min-height:44px;font:640 15px/1 var(--sans);letter-spacing:-.02em;white-space:nowrap}
.brand img{width:18px;height:18px;object-fit:contain}
.nav-links{display:flex;gap:4px;margin:0 auto}
.nav-links a{display:inline-flex;align-items:center;height:44px;padding:0 12px;font:400 12px/1 var(--sans);letter-spacing:0;color:rgba(245,245,247,.8);transition:color .2s ease}
.nav-links a:hover,.nav-links a[aria-current]{color:#fff}
.nav-cta{display:flex;align-items:center;gap:2px;margin-right:-12px}
.nav-icon{display:inline-grid;place-items:center;width:44px;height:44px;border:0;border-radius:999px;background:transparent;color:rgba(245,245,247,.8);cursor:pointer;transition:color .2s ease}
.nav-icon:hover{color:#fff}
.nav-toggle{display:none}
.nav-toggle .ic-shut,.nav.open .nav-toggle .ic-open{display:none}
.nav.open .nav-toggle .ic-shut{display:block}

.pbar{--pb-ease:cubic-bezier(.32,.72,0,1);position:fixed;z-index:calc(var(--z-nav) + 6);top:10px;left:50%;width:min(calc(1024px + var(--gutter)*2),calc(100% - 16px));height:var(--pbar-h);
  transform:translate(-50%,-90px);opacity:0;visibility:hidden;
  transition:transform .42s cubic-bezier(.5,0,.75,0) .16s,opacity .2s ease .4s,visibility 0s linear .62s}
.pbar::before{content:'';position:absolute;inset:0;border-radius:18px;background:rgba(22,22,23,.88);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.09),0 10px 30px rgba(0,0,0,.35);clip-path:inset(0 calc(50% - 70px) round 18px);transition:clip-path .36s var(--pb-ease)}
@media (prefers-reduced-transparency:reduce){.pbar::before{background:#161617;-webkit-backdrop-filter:none;backdrop-filter:none}}
.pbar-in{position:relative;display:flex;align-items:center;justify-content:space-between;gap:16px;height:100%;padding:0 10px 0 20px;opacity:0;transform:translateY(-4px);transition:opacity .15s ease,transform .2s ease}
.pbar.on{transform:translate(-50%,0);opacity:1;visibility:visible;transition:transform .55s var(--pb-ease),opacity .2s ease,visibility 0s}
.pbar.on::before{clip-path:inset(0 0 round 18px);transition:clip-path .62s var(--pb-ease) .14s}
.pbar.on .pbar-in{opacity:1;transform:none;transition:opacity .35s ease .42s,transform .45s var(--pb-ease) .38s}
.pbar-title{font:650 17px/1 var(--sans);letter-spacing:-.02em;white-space:nowrap;color:var(--fg)}
.pbar-acts{display:flex;align-items:center;gap:8px}
.pbar-btn{position:relative;display:inline-flex;align-items:center;height:30px;padding:0 14px;border-radius:999px;font:500 13px/1 var(--sans);letter-spacing:-.005em;white-space:nowrap;transition:background-color .2s ease,border-color .2s ease,color .2s ease}
.pbar-btn::before{content:'';position:absolute;inset:-7px -3px}
.pbar-ghost{border:1px solid rgba(255,255,255,.34);color:var(--fg)}
.pbar-ghost:hover{border-color:rgba(255,255,255,.6);background:rgba(255,255,255,.06)}
.pbar-buy{background:var(--accent);color:var(--accent-ink);font-weight:560}
.pbar-buy:hover{background:var(--accent-hi)}
.pbar-back,html.on-buy .pbar-feat,html.on-buy .pbar-buy{display:none}
html.on-buy .pbar-back{display:inline-flex}
/* on a way-to-pay page (#buy, past the cards) Go Back grows in at the right of the bar and pushes Overview left; it returns
   to the cards */
.pbar .pbar-goback{display:none;max-width:0;padding:0;margin-left:-8px;border:0;opacity:0;visibility:hidden;overflow:hidden;cursor:pointer;
  transition:max-width .5s cubic-bezier(.22,1,.36,1),padding .5s cubic-bezier(.22,1,.36,1),margin .5s cubic-bezier(.22,1,.36,1),opacity .3s ease,visibility 0s linear .5s,background-color .2s ease}
html.on-buy .pbar .pbar-goback{display:inline-flex}
html.on-buy.bx-sub .pbar .pbar-goback{max-width:140px;padding:0 14px;margin-left:0;opacity:1;visibility:visible;
  transition:max-width .5s cubic-bezier(.22,1,.36,1),padding .5s cubic-bezier(.22,1,.36,1),margin .5s cubic-bezier(.22,1,.36,1),opacity .35s ease .12s,visibility 0s,background-color .2s ease}
@media (prefers-reduced-motion:reduce){.pbar .pbar-goback,html.on-buy.bx-sub .pbar .pbar-goback{transition:none}}
@media (prefers-reduced-motion:reduce){
  .pbar,.pbar.on{transform:translate(-50%,0);transition:opacity .2s ease,visibility 0s linear .2s}
  .pbar.on{transition:opacity .2s ease,visibility 0s}
  .pbar::before,.pbar.on::before{clip-path:none;transition:none}
  .pbar-in,.pbar.on .pbar-in{opacity:1;transform:none;transition:none}
}

/* the Buy DemsPRO subpage (#buy): a page of its own over the overview, which stays as it was beneath it; it scrolls by
   itself and comes up with a short fade and settle (site.js sets html.on-buy) */
.buy-view{position:fixed;inset:0;z-index:calc(var(--z-nav) + 4);overflow:auto;overscroll-behavior:contain;background:var(--page);
  opacity:0;transform:translateY(28px);transition:opacity .3s ease,transform .45s cubic-bezier(.16,1,.3,1)}
.buy-view.shown{opacity:1;transform:none}
html.on-buy{overflow:hidden}
@media (prefers-reduced-motion:reduce){.buy-view{transform:none;transition:opacity .2s ease}}

/* ======================= HERO ======================= */
.hero{position:relative;background:var(--bg)}
html.motion .hero{background:transparent}   /* the page colour itself is scrubbed from black to graphite (JS) */
html.hs{background:var(--bg)}
.hero-pin{position:relative;min-height:100vh;min-height:100svh;display:flex}
/* with the handoff (site.js, html.hand) the hero's block stays put while the app window rises up to it, then leaves (shrinks,
   rises, fades) as the window reaches it; the window (z-index 1) passes over the block, which is its own layer */
html.hand .hero-pin{position:sticky;top:0;z-index:0}
.hero-in{position:relative;flex:1;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;width:100%;padding:calc(var(--nav-h) + clamp(24px,5vh,56px)) var(--hg) clamp(20px,4vh,44px);text-align:left}
/* the hero is an edge-to-edge editorial page: its own, wider-reaching margin, and everything set from the left edge */
.hero{--hg:clamp(20px,3.4vw,72px)}
.hero-name{font-weight:600;font-size:clamp(19px,1.8vw,24px);letter-spacing:-.015em;color:var(--fg)}
.hero-in{--cook-fs:var(--cook-size,clamp(64px,min(11.4vw,22svh),200px))}
.cook{margin-top:clamp(8px,1.6vh,18px);font-weight:700;font-stretch:100%;font-size:var(--cook-fs);line-height:1;letter-spacing:-.045em;white-space:nowrap;color:var(--fg)}
/* optical kerning: at display size the r's arm otherwise touches the t's crossbar */
.cook .kr{margin-right:.028em}
.cook-vis{display:block}
.cook-a,.cook-b{display:inline-block}
/* the extra o's of "Cooooookin'": each sits in its own slot after the first o, at its final width by default (no JS, reduced
   motion, finished intro); the typewriter starts the slots closed and opens one per keystroke */
.ox{display:inline-flex;justify-content:center;width:var(--ow,.6em);vertical-align:baseline}
.ox i{flex:none;font-style:normal}
/* the typewriter caret: a thin bar laid over the hero, placed on each letter by JS (site.js) */
.caret{position:absolute;left:0;top:0;z-index:2;width:2px;height:0;border-radius:1px;background:var(--fg);opacity:0;pointer-events:none}
/* The intro (only with motion allowed, html.hs): the line and the name stay hidden until the fonts are in and the typewriter is
   built (.hero.armed); from then on GSAP shows each letter as it is typed. */
html.hs .hero:not(.armed) :is(.cook-vis,.hero-name>.hf){opacity:0}
/* safety net: if the script never runs, the finished line and everything under it still arrive */
html.hs:not(.cook-armed) .hero:not(.armed) :is(.cook-vis,.hero-name>.hf){animation:cook-fb .8s ease 2.5s forwards}
html.hs:not(.cook-armed) :is(.hero-buy,.hero-demo){animation:cook-fb-buy .8s ease 2.5s forwards}
@keyframes cook-fb{to{opacity:1}}
@keyframes cook-fb-buy{to{opacity:1;visibility:visible}}
/* the foot of the page, after Apple's product heroes: the name over a short line on the bottom left, the price beside a
   compact Buy pill on the bottom right, both resting on one baseline along the hero's bottom edge */
.hero-buy{display:flex;align-items:flex-end;justify-content:space-between;gap:18px 32px;width:100%;margin-top:clamp(24px,4vh,44px)}
.hero-tag{min-width:0}
.ht-name{font-weight:600;font-size:clamp(15px,1.2vw,19px);line-height:1.2;letter-spacing:-.012em;color:var(--fg-2)}
.ht-line{margin-top:2px;font-weight:680;font-size:clamp(28px,2.9vw,46px);line-height:1.04;letter-spacing:-.035em;color:var(--fg)}
.hero-ctas{display:flex;align-items:center;gap:16px;white-space:nowrap}
.hero-price{font-size:clamp(14px,1.05vw,16px);line-height:1.4;letter-spacing:-.006em;color:var(--fg-2)}
.hero-ctas .btn{height:36px;padding:0 18px;font-size:14px}

/* the continuation: "With The New" and "PRO". Static (reduced motion, no GSAP, no JS) it sits in the flow under the headline;
   with the sequence (html.hs) it is laid over the hero and JS places it under the settled headline. Each word of "With The New"
   is its own box so it can come into focus on its own. */
/* "With The New" is a quiet editorial line set flush right over PRO's last letter. PRO is the centrepiece: the wide,
   geometric PRO wordmark (drawn as one SVG shape, 1127 x 288, used as a mask), filled with the Dems gradient. It is sized by
   script (--pro-fs; the mark is .8em tall) to run the full width of the page, or as tall as the page allows. */
.hero-next{display:flex;flex-direction:column;align-items:stretch;width:max-content;max-width:100%;text-align:left}
.hn-with{align-self:flex-end;margin:0 0 clamp(8px,1.4vh,16px);font-weight:560;font-size:clamp(15px,1.45vw,23px);line-height:1.1;letter-spacing:-.012em;color:var(--fg-2)}
.hn-with .w{display:inline-block}
:root{--pro-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1127 288'%3E%3Cpath d='M8 0H103V288H4A4 4 0 0 1 0 284V8A8 8 0 0 1 8 0ZM8 0H310A56 56 0 0 1 366 56V154A56 56 0 0 1 310 210H0V8A8 8 0 0 1 8 0ZM103 94V116H254A9 9 0 0 0 263 107V103A9 9 0 0 0 254 94ZM389 0H484V288H385A4 4 0 0 1 381 284V8A8 8 0 0 1 389 0ZM389 0H691A56 56 0 0 1 747 56V154A56 56 0 0 1 691 210H381V8A8 8 0 0 1 389 0ZM484 94V116H635A9 9 0 0 0 644 107V103A9 9 0 0 0 635 94ZM564 209H691L744.7 284.7Q747 288 743 288H624Q620 288 617.7 284.7ZM819 0H1071A56 56 0 0 1 1127 56V232A56 56 0 0 1 1071 288H819A56 56 0 0 1 763 232V56A56 56 0 0 1 819 0ZM879 94A14 14 0 0 0 865 108V180A14 14 0 0 0 879 194H1011A14 14 0 0 0 1025 180V108A14 14 0 0 0 1011 94Z'/%3E%3C/svg%3E")}
.hn-pro{position:relative;isolation:isolate;display:block;width:calc(.8em * 1127 / 288);height:.8em;
  font-size:var(--pro-fs,min(calc((100vw - var(--hg)*2)/3.13),40svh));line-height:0}
.hn-pro>span,.pro-g>i{position:absolute;inset:0;display:block;
  -webkit-mask:var(--pro-mask) center/100% 100% no-repeat;mask:var(--pro-mask) center/100% 100% no-repeat}
/* the Dems logo's own run of colour: golden yellow at the top, through rich orange, into a fiery orange-red at the base
   (sampled from assets/logo.png: #fcae02 -> #fc8502 -> #fb5704). Seven stops in OKLab so the blend has no bands; a broad, soft
   warm highlight high on the left and a whisper of deeper red at the lower right give quiet depth. */
.pro-w,.bx-pro{overflow:hidden;background-color:#fc8502;
  background-image:
    radial-gradient(70% 60% at 22% 0%,rgba(255,238,170,.24),rgba(255,238,170,0) 72%),
    radial-gradient(60% 70% at 86% 100%,rgba(200,40,0,.16),rgba(200,40,0,0) 70%),
    linear-gradient(180deg,#ffbd1c 0%,#fcae02 15%,#fc9a02 32%,#fc8502 50%,#fb6e03 68%,#fb5c04 86%,#f44f08 100%);
  background-image:
    radial-gradient(70% 60% at 22% 0%,rgba(255,238,170,.24),rgba(255,238,170,0) 72%),
    radial-gradient(60% 70% at 86% 100%,rgba(200,40,0,.16),rgba(200,40,0,0) 70%),
    linear-gradient(180deg in oklab,#ffbd1c 0%,#fcae02 15%,#fc9a02 32%,#fc8502 50%,#fb6e03 68%,#fb5c04 86%,#f44f08 100%)}
/* a minimal glow: a softened copy of the mark just behind it, faint and close to the edges (drawn once, never animated) */
.pro-g{-webkit-mask:none!important;mask:none!important;z-index:-1;filter:blur(.03em);opacity:.3;pointer-events:none}
.pro-g>i{background:linear-gradient(180deg,#fcae02,#fb5704)}
/* the light: a soft band, brighter at its core, passes over the letters from right to left like light across a polished
   surface, then rests; a transform on its own layer, so it costs the page nothing while it moves */
.pro-sheen{position:absolute;top:0;bottom:0;left:0;width:30%;pointer-events:none;transform:translateX(360%);
  background:linear-gradient(100deg,rgba(255,246,226,0) 0%,rgba(255,246,226,.06) 28%,rgba(255,250,238,.34) 50%,rgba(255,246,226,.06) 72%,rgba(255,246,226,0) 100%)}
/* PRO's entrance (site.js): a bright band rides the edge that uncovers the word, right to left; its brightest line sits just
   inside the edge and a warm tail trails behind it */
.pro-lead{position:absolute;top:0;bottom:0;left:0;width:26%;pointer-events:none;opacity:0;transform:translateX(385%);
  background:linear-gradient(90deg,rgba(255,240,205,.32) 0%,rgba(255,246,222,.78) 9%,rgba(255,226,160,.42) 26%,rgba(255,206,120,.14) 58%,rgba(255,206,120,0) 100%)}
@media (prefers-reduced-motion:no-preference){
  .hero.pro-lit .pro-sheen{animation:pro-sweep 9s cubic-bezier(.5,0,.3,1) .6s infinite}
}
/* resting while nobody can see it: off screen, or handed off (the block is faded out but still painted) */
.hero.idle .pro-sheen,.hero-pin[data-handoff] .pro-sheen{animation-play-state:paused}
@keyframes pro-sweep{
  0%{transform:translateX(360%)}
  26%{transform:translateX(-120%)}
  100%{transform:translateX(-120%)}
}
html:not(.hs) .hero-name{display:none}
html:not(.hs) .hero-in{justify-content:flex-start}
html:not(.hs) .hero-next{margin-top:auto;padding-top:clamp(24px,6vh,72px)}
html.hs .hero-next{position:absolute;left:var(--hg);top:0;pointer-events:none}
/* with the sequence the buy block is laid over the hero too (so the typed line alone is centred), hidden until JS shows it
   under PRO; the app window waits, hidden, until the sequence has played */
html.hs .hero-buy{position:absolute;left:var(--hg);right:var(--hg);top:0;width:auto;margin:0;opacity:0;visibility:hidden}
html.hs .hn-with .w,html.hs .hn-pro,html.hs .hero-demo{opacity:0;visibility:hidden}
/* desktop (site.js sets .lock from 900px wide, not on tall screens): one centred lockup. The headline and PRO share a width,
   "With The New" bridges them flush right, and the buttons with the price under them stand centred below PRO. */
/* static (reduced motion, no GSAP): the same lockup in the flow */
html:not(.hs) .hero-in.lock{align-items:center;justify-content:center}
html:not(.hs) .hero-in.lock .hero-next{margin-top:calc(var(--cook-fs) * .07);padding-top:0}
html:not(.hs) .hero-in.lock .hero-buy{position:absolute;left:var(--hg);right:var(--hg);bottom:clamp(20px,4vh,44px);width:auto;margin:0}
html.hs .cook{will-change:transform}

/* ---------- the product shot: the live app in a clean window under the headline ----------
   Crispness rule: the window only ever moves by whole-pixel translation (site.js) and has no transform at rest. No tilt,
   scale, perspective, filter or will-change on it or its ancestors: any of those makes the browser draw the app as a
   stretched texture, and its text goes soft. The app's own fit-to-width scale (on the iframe) is a plain 2D scale that the
   browser rasterises at its final size. */
.hero-demo{position:relative;z-index:1;padding:0 var(--gutter) clamp(24px,5vh,56px)}
/* the window is pulled up into the bottom of the hero (JS sets --pull), so it peeks in under PRO and rises from there */
html.motion .hero-demo{margin-top:calc(var(--pull,0px) * -1)}
.demo-shell{--app-w:1100;--app-h:700;width:min(1200px,100%,calc((100svh - var(--nav-h) - 96px) * 1100 / 700));margin:0 auto}
.demo-shell.tall{--app-w:860;--app-h:1100;width:100%}
.demo-win{position:relative;border-radius:clamp(12px,1.3vw,18px);overflow:hidden;background:#0a0a0b;
  box-shadow:0 0 0 1px rgba(255,255,255,.12),0 1px 0 0 rgba(255,255,255,.06) inset,0 40px 120px -30px rgba(0,0,0,.9)}
@supports (corner-shape:superellipse(1.6)){.demo-win{corner-shape:superellipse(1.6);border-radius:clamp(15px,1.6vw,22px)}}
.demo-shell.kbf .demo-win{outline:2px solid var(--focus);outline-offset:4px}   /* focus moved into the app with the keyboard */
.demo-stage{position:relative;aspect-ratio:var(--app-w)/var(--app-h);overflow:hidden;background:#0a0a0c}   /* the app's own splash colour */
.demo-stage iframe{position:absolute;left:0;top:0;border:0;transform-origin:0 0;background:#0a0a0c;color-scheme:dark;pointer-events:none}
/* the page always scrolls over the app: the app takes the pointer only once it is clicked (or tabbed into), and lets it go
   again when the pointer leaves the window (site.js sets .live); until then a small hint says so */
.demo-shell.live .demo-stage iframe{pointer-events:auto}
.demo-shell:not(.live) .demo-win{cursor:pointer}
.demo-hint{position:absolute;z-index:2;left:50%;bottom:16px;padding:9px 15px;border-radius:999px;background:#161617;box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);
  font:500 13px/1 var(--sans);color:var(--fg);white-space:nowrap;pointer-events:none;opacity:0;transform:translate(-50%,6px);transition:opacity .25s ease,transform .3s var(--ease)}
@media (hover:hover){.demo-shell:not(.live) .demo-win:hover .demo-hint{opacity:1;transform:translate(-50%,0)}}
/* without JavaScript the window shows a still of the app's Home screen */
.demo-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:0 0}
.demo-foot{display:flex;align-items:center;justify-content:space-between;gap:12px 24px;margin-top:14px;padding:0 4px;font-size:14px;line-height:1.45;color:var(--fg-3)}
.demo-full{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 4px;color:var(--fg-2);white-space:nowrap;transition:color .2s ease}
.demo-full:hover{color:var(--fg)}
.demo-full .ic{width:14px;height:14px}

/* ======================= SECTIONS: one grid, headings on the wrap's left edge ======================= */
.sec{position:relative;padding-top:var(--sec-pad)}
.sec-head{margin-bottom:clamp(36px,6vh,64px)}
.sec-h{margin:0}

/* ======================= FEATURES ======================= */
.features{padding:clamp(72px,12vh,140px) 0 0}

/* highlights carousel: an endless loop, the card in focus centred with a neighbour peeking at both edges (the same amount on
   each side), the last card before the first. Without JS it is a plain horizontal scroll-snap strip; with JS (.loop) the
   cards share one grid cell and site.js places each one by translateX at its nearest place in the loop, so the strip never
   runs out and never rewinds. The two clips are 640x360, so a card's media is never wider than 640px: they play at their own
   size, never upscaled. */
.hl{--hl-w:min(640px,calc(100vw - 2*var(--gutter) - 40px));--hl-gap:20px;container-type:inline-size}
@supports (width:1cqw){.hl{--hl-w:min(640px,calc(100cqw - 2*var(--gutter) - 40px))}}
.hl .sec-h{margin-bottom:clamp(28px,4.5vh,48px)}
.hl-view{position:relative;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;cursor:grab}
.hl-view::-webkit-scrollbar{display:none}
.hl-view.drag{scroll-snap-type:none;cursor:grabbing;user-select:none;-webkit-user-select:none}
/* the loop: the window is at most three cards wide, so the card being moved from one end of the loop to the other is always
   out of sight; vertical swipes still scroll the page, horizontal ones move the cards (site.js) */
.hl-view.loop{overflow:hidden;overflow:clip;scroll-snap-type:none;max-width:calc(var(--hl-w) * 3 + var(--hl-gap) * 2);margin:0 auto;touch-action:pan-y}
.hl-view.loop .hl-track{display:grid;justify-content:center;width:auto;padding:0}
.hl-view.loop .hl-card{grid-area:1/1;scroll-snap-align:none;scroll-snap-stop:normal}
.hl-track{display:flex;gap:var(--hl-gap);width:max-content;padding:0 calc((100vw - var(--hl-w))/2)}
@supports (width:1cqw){.hl-track{padding:0 calc((100cqw - var(--hl-w))/2)}}
.hl-card{flex:none;display:flex;flex-direction:column;width:var(--hl-w);container-type:inline-size;border-radius:var(--r-card);overflow:hidden;background:var(--card);scroll-snap-align:center;scroll-snap-stop:always;transition:opacity .5s ease}
html.js .hl-card:not(.on){opacity:.55}
.hl-media{position:relative;aspect-ratio:16/9;overflow:hidden;background:#0a0a0b}
.hl-media video,.hl-media img{width:100%;height:100%;object-fit:cover}
/* a highlight still waiting on its footage: the site's placeholder (quiet surface, hairline, small grey label) at the clips' 16:9 */
.hl-media.ph{aspect-ratio:16/9;border-radius:inherit;border-end-start-radius:0;border-end-end-radius:0;corner-shape:inherit;box-shadow:inset 0 0 0 1px var(--line)}
.hl-media video{pointer-events:none}
/* the caption is sized by the card (container units), not the window: type and padding scale with the card's width, the block
   is as tall as its text plus even padding (the same in every card; a shorter caption sits centred in it), and lines stay at
   a comfortable measure, so the short Fly line breaks into two like the others instead of leaving a gap */
.hl-cap{flex:1;display:flex;align-items:center;padding:clamp(18px,4.4cqi,28px) clamp(20px,5cqi,32px) clamp(20px,4.8cqi,30px);font-weight:600;font-size:clamp(15.5px,2.9cqi,18.5px);line-height:1.36;letter-spacing:-.016em;color:var(--fg)}
.hl-cap>span{display:block;max-width:30em;color:var(--fg-2);text-wrap:pretty}
.hl-cap b{font-weight:inherit;color:var(--fg)}
.hl-ctrl{display:flex;justify-content:center;align-items:center;gap:10px;margin-top:clamp(24px,4vh,36px)}
.hl-dots{display:flex;align-items:center;height:56px;padding:0 10px;border-radius:999px;background:rgba(255,255,255,.07)}
.hl-dot{display:grid;place-items:center;width:28px;height:44px;padding:0;border:0;background:none;cursor:pointer;transition:width .4s var(--ease)}
.hl-dot i{display:block;width:8px;height:8px;border-radius:999px;background:rgba(255,255,255,.4);transition:width .4s var(--ease),background-color .3s ease}
.hl-dot:hover i{background:rgba(255,255,255,.7)}
.hl-dot[aria-current]{width:52px}
.hl-dot[aria-current] i{width:36px;background:var(--fg)}
.hl-toggle{display:grid;place-items:center;width:56px;height:56px;padding:0;border:0;border-radius:999px;background:rgba(255,255,255,.08);color:var(--fg);cursor:pointer;transition:background-color .2s ease}
.hl-toggle:hover{background:rgba(255,255,255,.14)}
.hl-toggle .ic{width:18px;height:18px}
.hl-toggle .i-p,.hl.paused .hl-toggle .i-s{display:none}
.hl.paused .hl-toggle .i-p{display:block}
@media (pointer:coarse){.hl-dot{width:44px}.hl-dot[aria-current]{width:60px}.hl-dots{padding:0 6px}}

/* ---------- the kit: the two numbers under each feature's footage, Movement and Visuals side by side, then Macros with its
   copy on the left like the cards above. Every card: one app crop, one sentence, three names at most. ---------- */
.kit{padding:var(--sec-pad) 0 0}
.kit-cards{display:grid;gap:var(--gap-card)}
.frame{position:relative;overflow:hidden;border-radius:var(--r-lg);background:#0a0a0b;box-shadow:0 0 0 1px var(--line)}
.frame img{width:100%;height:auto}
/* placeholders for footage still to come: the frame of the image it stands in for, a quiet surface and a small grey label.
   Put an <img> or <video> inside a .ph and it fills the frame; the label then hides itself. */
.ph{display:grid;place-items:center;aspect-ratio:4/3;background:#141414}
.ph-wide{aspect-ratio:3/2}
.ph-tile{aspect-ratio:16/10}   /* Movement and Visuals: the frame of the 16:10 app crops they stand in for */
.ph-label{font-weight:500;font-size:13px;letter-spacing:0;color:#6e6e73}
.ph>img,.ph>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ph:has(>img,>video,>iframe) .ph-label{display:none}
/* a YouTube clip in a frame: muted, looping, no controls, cropped to the frame like object-fit:cover (16:9 into any ratio) */
.ph.yt{overflow:hidden}
.ph.yt .yt-box{position:absolute;left:50%;top:50%;width:1920px;height:1080px;transform-origin:50% 50%;pointer-events:none;opacity:0;transition:opacity .7s ease}
.ph.yt .yt-box iframe{display:block;width:100%;height:100%;border:0;pointer-events:none}
.ph.yt.yt-on .yt-box{opacity:1}
.ph.yt .ph-label,.ph.yt.yt-off .ph-label{display:none}
/* a hosted clip: fades in once it is really playing; it takes no pointer (no menu, no picture-in-picture, nothing to click) */
.ph[data-video] .ph-label{display:none}
.ph[data-video]>video{pointer-events:none;opacity:0;transition:opacity .5s ease}
.ph[data-video].vid-on>video{opacity:1}
/* its loading states: an empty frame carries a slow, soft band of light (transform only); the first frame (.vid-still) fades
   in as soon as it arrives, and the clip over it once it plays */
.ph[data-video]>.vid-still{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .45s ease;pointer-events:none}
.ph[data-video].still-on>.vid-still{opacity:1}
.ph[data-video]::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(100deg,rgba(255,255,255,0) 30%,rgba(255,255,255,.045) 50%,rgba(255,255,255,0) 70%);transform:translateX(-100%)}
@media (prefers-reduced-motion:no-preference){.ph[data-video]:not(.still-on):not(.vid-on)::after{animation:ph-load 1.8s cubic-bezier(.45,.05,.55,.95) infinite}}
.ph[data-video]:is(.still-on,.vid-on)::after{opacity:0;transition:opacity .4s ease}
@keyframes ph-load{to{transform:translateX(100%)}}

/* Shared by the kit's cards: pictures are part of the card, not boxes inside it. Where a picture meets the card's edge it runs
   to that edge (the card clips it to its own corners); where it faces the copy it keeps a soft inner radius. */
.kit .card{overflow:hidden;isolation:isolate}
.kit .card .frame{box-shadow:none;background:#0b0b0c}
.pts{display:grid;gap:0;margin-top:clamp(24px,3.6vh,36px)}
.pts li{padding:13px 0;border-top:1px solid var(--line);font-size:15px;line-height:1.45;color:var(--fg-3);text-wrap:pretty}
.pts b{display:block;font-weight:600;font-size:16px;letter-spacing:-.014em;color:var(--fg)}

/* ---------- Raycast and Desync, the showcase: the heading, then two rows, each clip running off the card's edge (Raycast to
   the left, Desync to the right) with its number set large beside it ---------- */
/* the lead card reaches past the column on wide screens (up to 80px a side), so it reads as the showcase */
.engine{padding:var(--pad-card) 0;margin-inline:calc(-1 * clamp(0px,(100vw - var(--wrap) - var(--gutter)*2)/2 - 24px,80px))}
.engine-copy{max-width:780px;padding:0 var(--pad-card)}
.engine-copy .copy{margin-top:clamp(14px,2.2vh,22px)}
.engine-figs{display:grid;gap:clamp(36px,6vh,72px);margin-top:clamp(36px,6vh,64px)}
.efig{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);align-items:center;gap:clamp(28px,4.4vw,64px);padding-right:var(--pad-card)}
.efig-flip{grid-template-columns:minmax(0,1fr) minmax(0,1.7fr);padding:0 0 0 var(--pad-card)}
.efig-flip .efig-media{order:2}
.efig-media.ph{aspect-ratio:16/9;border-radius:0 var(--r-lg) var(--r-lg) 0}
.efig-flip .efig-media.ph{border-radius:var(--r-lg) 0 0 var(--r-lg)}
.efig-n{display:block;font-weight:700;font-size:clamp(64px,8vw,124px);line-height:.9;letter-spacing:-.055em;color:var(--fg);font-variant-numeric:tabular-nums}
.efig-t{display:block;max-width:19em;margin-top:clamp(14px,2vh,20px);font-size:clamp(16px,1.3vw,18px);line-height:1.45;letter-spacing:-.01em;color:var(--fg-3);text-wrap:pretty}
.efig-t b{font-weight:560;color:var(--fg)}

/* ---------- Movement and World Lab: compact. The picture fills the top of the card edge to edge, a short title and line
   under it, the names as a small list ---------- */
/* second heading inside the kit, above Movement and World Lab; the grid gap already adds --gap-card below it */
.kit-sub{margin:calc(var(--sec-pad) - var(--gap-card)) 0 max(0px,calc(clamp(36px,6vh,64px) - var(--gap-card)))}
.kit-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap-card)}
.tile{display:flex;flex-direction:column;padding:0 0 clamp(22px,2.6vw,32px)}
.tile>.frame.ph-tile{aspect-ratio:2/1;border-radius:0}
.tile>.h-s{margin:clamp(20px,2.6vh,28px) clamp(22px,2.4vw,32px) 0;font-size:clamp(22px,1.9vw,27px)}
.tile-copy{margin:8px clamp(22px,2.4vw,32px) 0;max-width:30em;font-weight:560;font-size:clamp(16px,1.25vw,17.5px);line-height:1.42;letter-spacing:-.014em;color:var(--fg-3);text-wrap:pretty}
.tile .pts{margin:clamp(16px,2.2vh,22px) clamp(22px,2.4vw,32px) 0}
.tile .pts li{padding:10px 0;font-size:14px}
.tile .pts b{display:inline;font-size:14.5px}
.tile .pts b+*,.tile .pts li{color:var(--fg-3)}
.tile .soon{margin:clamp(14px,2vh,20px) clamp(22px,2.4vw,32px) 0}

/* ---------- Visuals and Macros: copy on one side, the picture filling the other half to the card's edges (Visuals right,
   Macros left), so the two read as alternating spreads ---------- */
.chap{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);align-items:stretch;min-height:clamp(420px,40vw,540px)}
.chap-copy{align-self:center;padding:var(--pad-card)}
.chap-copy .copy{margin-top:clamp(14px,2.2vh,22px)}
/* the frame stays in flow and stretches with the card row (no absolute box, no percentage height), so every engine,
   Safari included, gives the picture its full half */
.chap-media{display:grid;min-height:0}
.chap-media>.frame{aspect-ratio:auto;border-radius:0;min-height:0}
.chap-flip{grid-template-columns:minmax(0,6fr) minmax(0,5fr)}
.chap-flip .chap-media{order:-1}

/* a touch of life under a pointer: the picture drifts a hair closer, slowly (transform only, on the compositor) */
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .kit .card .ph>img,.kit .card .ph>video,.kit .card .ph>.vid-still{transition:transform 1.4s var(--ease-apple),opacity .5s ease}
  .kit .card:hover .ph>img,.kit .card:hover .ph>video,.kit .card:hover .ph>.vid-still{transform:scale(1.035)}
}

/* compare (Apple compare style): a real table. Row lines only, no column lines; product names stick under the nav. */
.cmp-card{padding:clamp(8px,1.6vw,20px) var(--pad-card) var(--pad-card)}
.cmp{--c1:52%;--c2:24%;position:relative;isolation:isolate;width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed}
/* the PRO column stands on a graphite surface: one band behind the whole column (rows and section headings alike), drawn by
   the table itself so it never breaks where a heading spans the row */
.cmp::before{content:'';position:absolute;z-index:-1;top:0;bottom:0;left:calc(var(--c1) + var(--c2));width:var(--c2);border-radius:18px;background:#1c1c1e;box-shadow:inset 0 0 0 1px rgba(255,255,255,.05)}
.cmp-c-feat{width:var(--c1)}.cmp-c-prod{width:var(--c2)}
.cmp th,.cmp td{padding:16px clamp(10px,2vw,24px);font-weight:inherit;text-align:center;vertical-align:middle}
.cmp thead th{position:sticky;top:var(--pbar-room);z-index:2;padding-top:20px;padding-bottom:16px;vertical-align:bottom;background:rgba(0,0,0,.95);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-bottom:1px solid var(--line-2)}
@media (prefers-reduced-transparency:reduce){.cmp thead th{background:#000;-webkit-backdrop-filter:none;backdrop-filter:none}}
.cmp thead th:last-child{background:#1c1c1e;border-radius:18px 18px 0 0;box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
.cmp thead th:last-child .cmp-price{color:var(--accent)}
.cmp thead th:nth-child(2) .cmp-name{color:var(--fg-2)}
.cmp th:first-child{padding-left:0;text-align:left}
.cmp-name{display:block;font-weight:650;font-size:clamp(17px,1.9vw,24px);line-height:1.15;letter-spacing:-.025em;color:var(--fg)}
.cmp-price{display:block;margin-top:4px;font-size:clamp(13px,1.1vw,15px);color:var(--fg-2)}
.cmp tbody tr>*{border-top:1px solid var(--line)}
.cmp tbody th[scope=row]{font-weight:500;font-size:clamp(15px,1.25vw,17px);line-height:1.35;letter-spacing:-.014em;color:var(--fg);text-wrap:pretty}
/* rows answer the pointer: a quiet wash across the row; a feature with a showcase is a link to it,
   its chevron steps forward and warms to orange */
.cmp tbody tr:not(.cmp-grp)>*{transition:background-color .25s ease}
@media (hover:hover){.cmp tbody tr:not(.cmp-grp):hover>*{background-color:rgba(255,255,255,.035)}}
.cmp tbody th[scope=row]{padding-left:12px}
.cmp-go{display:inline;color:inherit;text-decoration:none}
.cmp-go .ic{display:inline-block;width:.8em;height:.8em;margin-left:.3em;vertical-align:-.04em;fill:none;stroke:var(--fg-3);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;transition:transform .35s var(--ease-apple),stroke .25s ease}
.cmp-go:hover .ic,.cmp-go:focus-visible .ic,.cmp tbody tr:hover .cmp-go .ic{stroke:var(--accent);transform:translateX(3px)}
.cmp-go:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
.cmp-sub{display:block;margin-top:3px;font-size:13.5px;line-height:1.4;letter-spacing:0;color:var(--fg-3)}
.cmp .cmp-grp>*{padding:clamp(34px,5vh,48px) 0 12px;border-top:0;text-align:left;font-weight:650;font-size:clamp(19px,1.7vw,24px);letter-spacing:-.022em;line-height:1.2;color:var(--fg)}
.yes,.no{display:inline-block;vertical-align:middle}
.yes svg{display:block;width:20px;height:20px;fill:none;stroke:var(--fg-2);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.cmp td:last-child .yes svg{stroke:var(--accent)}
.no{width:14px;height:2px;border-radius:1px;background:#6e6e73}
.cmp-foot{display:flex;flex-direction:column;align-items:center;gap:20px;margin-top:clamp(40px,6vh,64px);text-align:center}
.cmp-note{font-size:14.5px;color:var(--fg-3)}
/* "PRO only" carries a small orange mark, the one accent in the section headings */
.cmp .cmp-grp-pro>th::before{content:'';display:inline-block;width:7px;height:7px;margin:0 10px .18em 0;border-radius:50%;background:var(--accent);vertical-align:middle}
.cmp .cmp-grp>th{padding-left:12px}
.cmp-go .nw{white-space:nowrap}
/* the rows arrive in a quick cascade the first time the table comes into view (site.js adds .in) */
html.reveals .cmp tbody tr{transition:opacity .6s var(--ease-apple),transform .8s var(--ease-apple);transition-delay:calc(var(--i,0) * 40ms)}
html.reveals .cmp:not(.in) tbody tr{opacity:0;transform:translateY(14px)}

/* ---------- Buy DemsPRO (#buy): a software pricing page, art-directed rather than assembled. A short two-line headline under
   a few soft ember streaks; the three ways to pay as one joined set, the side cards tucked under PayPal, which stands taller in
   the middle; then an open area, no boxes, with the chosen way's steps and link on the left and what happens next on Discord
   in a narrower column on the right. Wide Mona Sans for the headline and the amounts; Geist Mono for units and labels.
   Orange marks only the choice, the action and the key. ---------- */
.bx{--bx-r:24px;position:relative;z-index:1;isolation:isolate;overflow-x:clip;
  padding:calc(var(--pbar-room) + clamp(40px,9vh,104px)) 0 clamp(40px,7vh,80px)}
.bx [hidden]{display:none!important}
/* the Buy page's surface, "soft carbon": near-black graphite, a faint wash of light from the top centre, a vignette held to the
   window, and a fine grain under the content, barely there. */
.buy-view{background-color:#0d0d0f;
  background-image:
    radial-gradient(ellipse 1100px 620px at 50% -160px,rgba(255,255,255,.055),rgba(255,255,255,.028) 35%,rgba(255,255,255,.009) 66%,rgba(255,255,255,0) 100%),
    linear-gradient(180deg,#121214 0,#0d0d0f 1000px),
    radial-gradient(ellipse 125% 95% at 50% 35%,rgba(0,0,0,0) 55%,rgba(0,0,0,.2) 78%,rgba(0,0,0,.42) 100%);
  background-attachment:local,local,scroll}
.buy-view::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.035;background-size:180px 180px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1.6 -.55'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E")}
/* the ember streaks: three soft diagonal bars of the logo's orange falling in from the top, fading out before the headline.
   They drift on their own slow, out-of-step loops (19s, 26s, 31s), breathing in and out, and every 17s a faint warm sheen
   crosses them, like light moving over a polished surface. Only transform and opacity animate, each bar blurred once on its
   own layer, so the motion costs the page nothing; the Buy page is display:none when closed. The set leans and takes on a
   tint from the Dems logo for each way to pay (PayPal golden, Robux orange, Boosts orange-red), see .bx[data-m]. */
@property --st1{syntax:'<color>';inherits:true;initial-value:rgba(226,88,8,.9)}
@property --st2{syntax:'<color>';inherits:true;initial-value:rgba(252,120,20,.95)}
@property --st3{syntax:'<color>';inherits:true;initial-value:rgba(206,70,4,.8)}
.bx{--st1:rgba(244,122,16,.85);--st2:rgba(255,172,44,.8);--st3:rgba(204,74,8,.78);--hi:rgba(255,222,160,.95);--tint:#fc8502;--tint-rgb:252,133,2;--rot:-36deg;
  transition:--st1 1.4s ease,--st2 1.4s ease,--st3 1.4s ease}
.bx[data-m=paypal],.bx[data-m=rewup]{--st1:rgba(250,150,18,.85);--st2:rgba(255,196,60,.8);--st3:rgba(220,106,8,.78);--tint:#fcae02;--tint-rgb:252,174,2;--rot:-32deg}
.bx[data-m=robux]{--st1:rgba(248,128,10,.88);--st2:rgba(255,160,30,.82);--st3:rgba(212,80,6,.8)}
.bx[data-m=boost]{--st1:rgba(242,96,14,.86);--st2:rgba(255,140,40,.8);--st3:rgba(196,52,10,.8);--tint:#fb6a2a;--tint-rgb:251,106,42;--rot:-40deg}
/* The light over the Buy page: the owner's reference image itself (2026-10-26), recoloured to the Dems run (the red light
   mapped through deep orange-red, orange and golden by its brightness, the cool blue shadows turned graphite; assets/
   buy-ribbons-*.webp, made by scratchpad recolor.py). It fills the top of the page and fades into the graphite; a dark hush
   sits behind the headline. Its only motion is a very slow drift and breath (transform and opacity, 46s); each way to pay
   shifts its tone a touch (PayPal more golden, Boosts redder). */
.bx-streaks{position:absolute;z-index:-1;top:0;left:0;right:0;height:min(820px,100svh);pointer-events:none;overflow:hidden;transition:opacity 1.2s ease;
  -webkit-mask:linear-gradient(180deg,#000 38%,rgba(0,0,0,.6) 66%,transparent 98%);mask:linear-gradient(180deg,#000 38%,rgba(0,0,0,.6) 66%,transparent 98%)}
.bx-streaks>i{position:absolute;inset:0;background:#0d0d0f url(buy-ribbons-1200.webp) 50% 40%/cover no-repeat;
  background-image:image-set(url(buy-ribbons-800.webp) 1x,url(buy-ribbons-1200.webp) 2x);
  transform:scale(1.06);will-change:transform,opacity;transition:filter 1.4s ease;animation:rb-drift 46s ease-in-out -12s infinite}
@media (min-width:700px){.bx-streaks>i{background-image:url(buy-ribbons-1200.webp)}}
@media (max-width:699.98px){.bx-streaks{height:min(640px,90svh)}.bx-streaks>i{background-position:26% 40%}}
.bx-streaks::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 36% 24% at 50% 36%,rgba(13,13,15,.72),rgba(13,13,15,.38) 55%,rgba(13,13,15,0) 100%)}
.bx[data-view=go] .bx-streaks{opacity:.72}
.bx[data-view=go] .bx-streaks::after{background:radial-gradient(ellipse 50% 46% at 28% 60%,rgba(13,13,15,.9),rgba(13,13,15,.6) 50%,rgba(13,13,15,0) 100%),radial-gradient(ellipse 30% 40% at 84% 64%,rgba(13,13,15,.8),rgba(13,13,15,0) 100%)}
.bx[data-m=paypal] .bx-streaks>i,.bx[data-m=rewup] .bx-streaks>i{filter:hue-rotate(8deg) saturate(1.05)}
.bx[data-m=boost] .bx-streaks>i{filter:hue-rotate(-8deg)}
.bx-gl{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity 1.2s ease}
.bx-streaks.gl-on .bx-gl{opacity:1}
.bx-streaks.gl>i{display:none}
@keyframes rb-drift{0%,100%{transform:scale(1.06) translate3d(-1%,-.6%,0);opacity:.92}50%{transform:scale(1.1) translate3d(1%,.8%,0);opacity:1}}
@media (prefers-reduced-motion:reduce){.bx-streaks>i{animation:none}.bx-streaks{transition:none}}

.bx-head{text-align:center}
.bx-title{font-weight:660;font-stretch:120%;font-size:clamp(40px,4.8vw,66px);line-height:1;letter-spacing:-.045em;text-shadow:0 2px 30px rgba(13,13,15,.6)}
.bx-lede{margin-top:16px;font-weight:460;font-size:clamp(17px,1.45vw,20px);line-height:1.4;letter-spacing:-.012em;color:#a1a1a8;text-wrap:balance}

/* the joined set: the side cards sit on one dark shelf that runs under the middle card; PayPal stands taller and lighter */
.bx-cards{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr) minmax(0,1fr);max-width:1100px;margin:clamp(44px,7vh,72px) auto 0;align-items:stretch}
.bx-card{position:relative;display:flex;flex-direction:column;padding:36px 32px 30px;overflow:hidden;
  background:linear-gradient(180deg,#0f0f11,#0a0a0c);box-shadow:inset 0 0 0 1px rgba(255,255,255,.075),0 0 56px -8px rgba(255,255,255,.06);transition:box-shadow .35s ease}
.bx-card[data-pay=robux]{margin:26px -24px 26px 0;padding-right:54px;border-radius:var(--bx-r) 0 0 var(--bx-r)}
.bx-card[data-pay=boost]{margin:26px 0 26px -24px;padding-left:54px;border-radius:0 var(--bx-r) var(--bx-r) 0}
.bx-feat{z-index:2;padding:38px 34px 32px;border-radius:var(--bx-r);
  background:linear-gradient(180deg,#161618,#0f0f11 70%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),inset 0 0 0 1px rgba(255,255,255,.12),0 0 0 1px rgba(0,0,0,.7),0 0 80px -4px rgba(255,255,255,.1),0 40px 80px -30px rgba(0,0,0,.9)}
.bx-card-top{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.bx-name{font-weight:650;font-size:19px;line-height:1.2;letter-spacing:-.02em}
.bx-sub{margin-top:2px;font-size:16px;line-height:1.35;color:var(--fg-3)}
.bx-mark{display:grid;place-items:center;width:36px;height:36px;flex:none;border-radius:10px;background:#141416;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.bx-mark img{width:19px;height:auto}
.bx-mark .bx-nitro{width:23px}
.bx-mark-pp{background:#fff;box-shadow:none}
.bx-amt{display:flex;align-items:center;gap:14px;margin-top:30px;font-weight:620;font-stretch:115%;font-size:clamp(46px,4.6vw,62px);line-height:1;letter-spacing:-.045em}
.bx-unit{font:450 13px/1.45 var(--mono);letter-spacing:0;color:var(--fg-3)}
.bx-pts{display:grid;gap:11px;margin:28px 0 0}
/* the ink motif: a monochrome, pen-drawn take on each way's mark, filling the quiet space above the button */
/* the ink motif: set into the lower right of each card like an emboss, larger than the space it sits in, running off the card's
   edge and fading out toward the copy, so it reads as part of the card rather than a picture placed in it */
.bx-art{position:relative;z-index:0;flex:1 1 0;min-height:100px;margin:6px -32px 16px 0;color:#f5f5f7;opacity:.26;pointer-events:none;
  -webkit-mask:radial-gradient(ellipse 78% 62% at 70% 50%,#000 36%,rgba(0,0,0,.45) 64%,transparent 100%);mask:radial-gradient(ellipse 78% 62% at 70% 50%,#000 36%,rgba(0,0,0,.45) 64%,transparent 100%)}
.bx-feat .bx-art{opacity:.32;margin-right:-34px}
.bx-card[data-pay=boost] .bx-art{margin-right:-32px}
.bx-ink{position:absolute;right:-10%;top:50%;width:auto;height:min(100%,200px);max-width:118%;aspect-ratio:280/170;transform:translateY(-50%);overflow:visible}
.bx-cta{position:relative;z-index:1}
.bx-pts li{position:relative;padding-left:27px;font-size:15.5px;line-height:1.4;color:#d6d6db}
.bx-pts li::before{content:"";position:absolute;left:0;top:1px;width:17px;height:17px;opacity:.75;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f5f5f7' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.2'/%3E%3Cpath d='m8.2 12.3 2.6 2.6 5-5.4'/%3E%3C/svg%3E") center/contain no-repeat}
.bx-feat .bx-pts li{color:var(--fg)}
.bx-feat .bx-pts li::before{opacity:.9}
.bx-cta{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:44px;margin-top:auto;padding:0 18px;border:0;border-radius:12px;cursor:pointer;
  font:560 15px/1 var(--sans);letter-spacing:-.01em;color:#e9e9ec;background:#1a1a1d;box-shadow:inset 0 1px 0 rgba(255,255,255,.06),inset 0 0 0 1px rgba(255,255,255,.1);
  transition:background-color .25s ease,color .25s ease,box-shadow .25s ease,transform .18s var(--ease)}
.bx-cta:hover{background:#222226}
.bx-cta:active{transform:scale(.98)}
.bx-feat .bx-cta{background:var(--accent);color:var(--accent-ink);box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 10px 30px -12px rgba(252,133,2,.55)}
.bx-feat .bx-cta:hover{background:var(--accent-hi)}
.bx-cta .ic{width:14px;height:14px;transition:transform .25s var(--ease)}
.bx-cta:hover .ic{transform:translateX(3px)}


/* PayPal's other side: on hover (a tap on phones, or focus on its button) the ink P is rubbed out, an ink cross is drawn over
   the PayPal mark, the price and points step aside and the Rewup voucher comes in, with its own way to pay */
.bx-feat .bx-mark-pp{position:relative;overflow:visible}
.bx-feat .bx-mark-pp{transition:background-color .25s ease,box-shadow .25s ease}
.bx-feat .bx-mark-pp img{transition:opacity .25s ease}
/* the cross: two tapered brush strokes in ink with a hatched print shadow, stamped over the mark (lands a touch large and
   tilted, settles), each stroke revealed along its own path, a few droplets thrown off the end */
.bx-feat .bx-x{position:absolute;left:50%;top:50%;width:66px;height:66px;max-width:none;margin:-33px 0 0 -33px;overflow:visible;pointer-events:none;
  opacity:0;transform:scale(1.22) rotate(-6deg);transition:opacity .15s ease,transform .3s ease}
.bx-x-s{fill:#f5f5f7;stroke:#0d0d0f;stroke-width:2.4;stroke-linejoin:round;paint-order:stroke}
.bx-x-sh{fill:url(#bxx-h)}
.bx-x-b{fill:none;stroke:#0d0d0f;stroke-width:.55;stroke-linecap:round;opacity:.85}
.bx-x-r{fill:none;stroke:#fff;stroke-width:16;stroke-linecap:butt;stroke-dasharray:1 1;stroke-dashoffset:1;transition:stroke-dashoffset .12s ease}
.bx-x-d circle{fill:#f5f5f7;stroke:#0d0d0f;stroke-width:.8;paint-order:stroke;opacity:0;transition:opacity .1s ease}
.bx-feat.alt-on .bx-x{opacity:1;transform:none;transition:opacity .06s linear .4s,transform .55s cubic-bezier(.2,1.7,.35,1) .4s}
.bx-feat.alt-on #bxx-m1 .bx-x-r{stroke-dashoffset:0;transition:stroke-dashoffset .2s cubic-bezier(.5,0,.3,1) .42s}
.bx-feat.alt-on #bxx-m2 .bx-x-r{stroke-dashoffset:0;transition:stroke-dashoffset .18s cubic-bezier(.5,0,.3,1) .64s}
.bx-feat.alt-on .bx-x-d circle{opacity:1;transition-delay:.8s}
.bx-feat.alt-on .bx-mark-pp img{opacity:.55;transition-delay:.3s}
.bx-feat.alt-on .bx-mark-pp{background-color:#141416;box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);transition-delay:.3s}
@media (hover:hover){
  .bx-feat:hover .bx-x{opacity:1;transform:none;transition:opacity .06s linear .4s,transform .55s cubic-bezier(.2,1.7,.35,1) .4s}
  .bx-feat:hover #bxx-m1 .bx-x-r{stroke-dashoffset:0;transition:stroke-dashoffset .2s cubic-bezier(.5,0,.3,1) .42s}
  .bx-feat:hover #bxx-m2 .bx-x-r{stroke-dashoffset:0;transition:stroke-dashoffset .18s cubic-bezier(.5,0,.3,1) .64s}
  .bx-feat:hover .bx-x-d circle{opacity:1;transition-delay:.8s}
  .bx-feat:hover .bx-mark-pp img{opacity:.55;transition-delay:.3s}
  .bx-feat:hover .bx-mark-pp{background-color:#141416;box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);transition-delay:.3s}
}
.bx-body{position:relative;display:flex;flex-direction:column;flex:1 1 auto;min-height:0}
.bx-feat .bx-ink{-webkit-mask:linear-gradient(100deg,#000 42%,transparent 58%) 0 0/260% 100% no-repeat;mask:linear-gradient(100deg,#000 42%,transparent 58%) 0 0/260% 100% no-repeat;
  transition:-webkit-mask-position .45s cubic-bezier(.4,0,.2,1) .22s,mask-position .45s cubic-bezier(.4,0,.2,1) .22s,opacity .3s ease .22s}
.bx-body>.bx-amt,.bx-body>.bx-pts{transition:opacity .3s ease .12s,transform .4s var(--ease) .12s}
.bx-alt{position:absolute;inset:0 0 6px;z-index:2;display:flex;flex-direction:column;gap:12px;pointer-events:none}
.bx-alt>*{opacity:0;transform:translateY(8px);transition:opacity .16s ease,transform .2s ease}
.bx-alt>:nth-child(2){--k:1}.bx-alt>:nth-child(3){--k:2}.bx-alt>:nth-child(4){--k:3}
.bx-alt-h{margin:26px 0 4px;font-weight:620;font-stretch:115%;font-size:clamp(30px,2.7vw,38px);line-height:1.02;letter-spacing:-.04em;color:var(--fg)}
.bx-alt-h span{display:block;color:var(--fg-3)}
.bx-alt-p{font-size:14.5px;line-height:1.45;color:#c9c9cf}
.bx-alt .bx-alt-pts{margin:2px 0 0;gap:8px}
.bx-alt .bx-alt-pts li{font-size:14px}
.bx-feat .bx-alt .bx-cta{margin-top:auto;color:#e9e9ec;background:#1a1a1d;box-shadow:inset 0 1px 0 rgba(255,255,255,.06),inset 0 0 0 1px rgba(255,255,255,.1)}
.bx-feat .bx-alt .bx-cta:hover{background:#222226}
.bx-feat.alt-on .bx-ink{-webkit-mask-position:100% 0;mask-position:100% 0;opacity:0;transition-delay:0s,0s,.3s}
.bx-feat.alt-on .bx-body>.bx-amt,.bx-feat.alt-on .bx-body>.bx-pts{opacity:0;transform:translateY(-6px);transition-delay:.2s}
.bx-feat.alt-on .bx-alt{pointer-events:auto}
.bx-feat.alt-on .bx-alt>*{opacity:1;transform:none;transition:opacity .4s ease calc(.46s + var(--k,0) * 70ms),transform .55s var(--ease) calc(.46s + var(--k,0) * 70ms)}
@media (hover:hover){
  .bx-feat:hover .bx-ink{-webkit-mask-position:100% 0;mask-position:100% 0;opacity:0;transition-delay:0s,0s,.3s}
  .bx-feat:hover .bx-body>.bx-amt,.bx-feat:hover .bx-body>.bx-pts{opacity:0;transform:translateY(-6px);transition-delay:.2s}
  .bx-feat:hover .bx-alt{pointer-events:auto}
  .bx-feat:hover .bx-alt>*{opacity:1;transform:none;transition:opacity .4s ease calc(.46s + var(--k,0) * 70ms),transform .55s var(--ease) calc(.46s + var(--k,0) * 70ms)}
}
@media (prefers-reduced-motion:reduce){.bx-feat .bx-ink,.bx-body>*,.bx-alt>*,.bx-feat .bx-x,.bx-x *,.bx-feat .bx-mark-pp,.bx-feat .bx-mark-pp img{transition-duration:.01s!important;transition-delay:0s!important}.bx-alt>*{transform:none}}
.bx-mark-rw svg{width:19px;height:19px;fill:none;stroke:#f5f5f7;stroke-width:1.6;stroke-linejoin:round}

/* the three views: the cards (pick), the preparing screen (wait), and one way's page (go) */
.bx[data-view=pick]{padding-bottom:clamp(24px,4vh,40px)}
.bx-pick{display:flex;flex-direction:column;min-height:calc(100svh - var(--pbar-room) - clamp(40px,9vh,104px) - clamp(24px,4vh,40px))}
.bx-pick .bx-cards{flex:1 1 auto;min-height:440px;width:100%}
.bx-view-in{animation:bx-in .55s var(--ease) both}
@keyframes bx-in{from{opacity:0;transform:translateY(10px)}}

/* preparing: two quiet lines in the middle of the window, a soft light running through them (like a chat app thinking) */
.bx-wait{display:flex;flex-direction:column;justify-content:center;align-items:center;min-height:calc(100svh - var(--pbar-room) - clamp(40px,9vh,104px) - 80px)}
.bx-wait>*{width:min(320px,100%)}
.bx-wait-t{font-weight:560;font-size:16px;letter-spacing:-.01em;color:#d9d9de}
.bx-wait-s{margin-top:4px;font-size:14px;color:var(--fg-3)}
.bx-wait-t,.bx-wait-s span{background:linear-gradient(100deg,currentColor 0 38%,#fff 48%,currentColor 58% 100%) 0 0/250% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:bx-shine 1.5s linear infinite}
.bx-wait-s span{color:var(--fg-3);background-image:linear-gradient(100deg,var(--fg-3) 0 38%,#c9c9cf 48%,var(--fg-3) 58% 100%)}
@keyframes bx-shine{from{background-position:100% 0}to{background-position:-50% 0}}

/* one way's page: a back link, then the steps as one long numbered run on the left (each step's link sits in the step that
   needs it), what you get in a narrower column on the right */
.bx-go-grid{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:48px clamp(48px,8vw,120px);margin-top:clamp(12px,3vh,32px);align-items:start}
.bx-eye{display:flex;align-items:center;gap:12px;font-weight:600;font-size:16px;letter-spacing:-.01em}
.bx-eye i{font:450 13px/1 var(--mono);font-style:normal;color:var(--fg-3)}
.bx-eye .bx-mark{width:32px;height:32px;border-radius:9px}
.bx-go-h{margin-top:22px;max-width:15ch;font-weight:680;font-stretch:118%;font-size:clamp(36px,4.6vw,62px);line-height:1.02;letter-spacing:-.045em;text-wrap:balance}
.bx-go-h .bx-h2{display:block;color:#8e8e94}
.bx-go-h:focus,.bx-title:focus,.bx-wait:focus{outline:none}
.bx-go-lede{margin-top:16px;max-width:44ch;font-size:clamp(16px,1.35vw,18px);line-height:1.5;letter-spacing:-.01em;color:var(--fg-3)}
/* the steps as a path: a node per step joined by a rail; the step you are on is lit, finished ones turn into a tinted check and
   fill the rail down to the next. Each node is a button (tick a step off by hand), and following a step's link ticks it too. */
.bx-run{margin-top:clamp(32px,5.5vh,52px)}
.bx-run>li{position:relative;padding:4px 0 34px 60px;font-size:clamp(17px,1.6vw,20px);line-height:1.45;letter-spacing:-.014em;color:var(--fg-3);transition:color .4s ease}
.bx-run>li:not(.bx-claim)::after{content:"";position:absolute;left:15px;top:40px;bottom:6px;width:2px;border-radius:1px;
  background:linear-gradient(var(--tint),rgba(var(--tint-rgb),.35)) top/100% 0% no-repeat,rgba(255,255,255,.08);transition:background-size .7s cubic-bezier(.65,0,.35,1)}
.bx-run>li.done::after{background-size:100% 100%}
.bx-run>li.now,.bx-run>li.done{color:var(--fg-2)}
.bx-run b{font-weight:600;color:var(--fg-2);transition:color .4s ease}
.bx-run>li.now b{color:var(--fg)}
.bx-run em{font-style:normal;color:var(--tint)}
.bx-run{counter-reset:r}
.bx-node{counter-increment:r;position:absolute;left:0;top:2px;display:grid;place-items:center;width:32px;height:32px;padding:0;border-radius:50%;cursor:pointer;
  border:1px solid rgba(255,255,255,.14);background:#141416;color:var(--fg-3);font:500 12px/1 var(--mono);
  transition:background-color .35s ease,border-color .35s ease,color .35s ease,box-shadow .5s ease,transform .2s var(--ease)}
.bx-node::before{content:counter(r)}
.bx-node .ic{position:absolute;width:15px;height:15px;stroke-width:2.4;opacity:0;transform:scale(.5);transition:opacity .25s ease,transform .45s cubic-bezier(.34,1.56,.64,1)}
.bx-node:hover{border-color:rgba(255,255,255,.32);color:var(--fg)}
.bx-node:active{transform:scale(.92)}
.bx-node:focus-visible{outline:2px solid var(--tint);outline-offset:3px}
li.now>.bx-node{border-color:rgba(var(--tint-rgb),.75);color:var(--fg);box-shadow:0 0 0 5px rgba(var(--tint-rgb),.1)}
li.done>.bx-node{border-color:var(--tint);background:var(--tint);color:#141416}
li.done>.bx-node::before{opacity:0}
li.done>.bx-node .ic{opacity:1;transform:none}
/* the finish: plain text like the steps above it, the key standing in for the last node. Once every step is done the key
   lights up and turns, and the label changes to "Ready when you are". */
.bx-run>li.bx-claim{padding-bottom:0;color:var(--fg-2)}
.bx-claim b{color:var(--fg)}
.bx-claim-key{position:absolute;left:0;top:2px;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;
  border:1px solid rgba(255,255,255,.14);background:#141416;transition:background-color .5s ease,border-color .5s ease,box-shadow .8s ease}
.bx-claim-key svg{width:17px;height:17px;fill:none;stroke:var(--fg-3);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transform:rotate(-38deg);
  transition:transform .9s cubic-bezier(.34,1.56,.64,1) .15s,stroke .5s ease}
.bx-claim-k{display:block;margin-bottom:6px;font:500 12px/1.3 var(--mono);color:var(--fg-3)}
.bx-ck-b,.bx-m.ready .bx-ck-a{display:none}
.bx-m.ready .bx-ck-b{display:inline;color:var(--tint)}
.bx-claim-s{display:block;margin-top:10px;font-size:14px;line-height:1.5;letter-spacing:0;color:var(--fg-3)}
.bx-m.ready .bx-claim-key{border-color:var(--tint);background:var(--tint);box-shadow:0 0 0 5px rgba(var(--tint-rgb),.1),0 0 32px rgba(var(--tint-rgb),.3)}
.bx-m.ready .bx-claim-key svg{stroke:#141416;transform:none}
/* an ink drawing beside each step, in the same hand as the cards' motifs: it brightens on the step you are on, settles
   back once it is done, and the key's drawing takes the method's colour when the key is ready */
.bx-run>li{padding-right:clamp(120px,13vw,164px)}
.bx-sa{position:absolute;right:0;top:-6px;width:clamp(104px,10.5vw,136px);color:#f5f5f7;opacity:.24;pointer-events:none;
  transition:opacity .6s ease,color .8s ease,transform .8s cubic-bezier(.22,1,.36,1)}
.bx-sa svg{display:block;width:100%;height:auto}
li.now>.bx-sa{opacity:.46;transform:translateY(-2px)}
li.done>.bx-sa{opacity:.18}
.bx-m.ready .bx-claim>.bx-sa{opacity:.62;color:var(--tint)}
/* the page arrives as a sequence: the header, then each step in turn */
.bx-go.bx-view-in .bx-run>li{animation:bx-step .6s cubic-bezier(.22,1,.36,1) both;animation-delay:calc(220ms + var(--i,0) * 90ms)}
@keyframes bx-step{from{opacity:0;transform:translateY(12px)}}
@media (prefers-reduced-motion:reduce){.bx-go.bx-view-in .bx-run>li{animation:none}.bx-claim-key svg,.bx-sa{transition:none}}
.bx-run-act{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;margin-top:16px}
.bx-run-act .btn .ic-fill{width:16px;height:16px}
.bx-url{font:450 13px/1.3 var(--mono);color:var(--fg-3);overflow-wrap:anywhere}
.bx-run-note{display:block;margin-top:14px;max-width:54ch;font-size:14px;line-height:1.5;letter-spacing:0;color:var(--fg-3)}
.bx-run-note a{color:var(--fg-2);text-decoration:underline;text-decoration-color:var(--line-2);text-underline-offset:3px}
.bx-run-note a:hover{color:var(--fg);text-decoration-color:var(--fg)}
.bx-go-side{position:sticky;top:calc(var(--pbar-room) + 24px);padding-top:6px}
.bx-k{font:500 12.5px/1.3 var(--mono);color:var(--fg-3)}
.bx-get{margin-top:14px;border-top:1px solid rgba(255,255,255,.08)}
.bx-get li{display:flex;flex-direction:column;gap:2px;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.08)}
.bx-get b{font-weight:600;font-size:16px;letter-spacing:-.012em}
.bx-get span{font-size:14px;line-height:1.45;color:var(--fg-3)}
.bx-logged{margin-top:22px;font-size:14px;line-height:1.5;color:var(--fg-2)}
.bx-help{margin-top:12px;font-size:14px;line-height:1.5;color:var(--fg-3)}
.bx-help a{color:var(--fg-2);text-decoration:underline;text-decoration-color:var(--line-2);text-underline-offset:3px}
.bx-help a:hover{color:var(--fg)}

/* arrival: the parts rise in one after another as the page opens */
.bx-a{transition:opacity .6s var(--ease),transform .7s var(--ease)}
.buy-view:not(.shown) .bx-a{opacity:0;transform:translateY(14px)}
.buy-view.shown .bx-a{transition-delay:calc(var(--d,0) * 70ms)}
.bx-cards{--d:1}
.bx-foot{--d:2;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px 0;margin-top:clamp(28px,4vh,40px);font:450 12.5px/1.5 var(--mono);color:var(--fg-3);text-align:center}
.bx-foot span+span::before{content:"";display:inline-block;width:3px;height:3px;margin:0 14px;vertical-align:middle;border-radius:50%;background:rgba(255,255,255,.22)}
.bx-foot a{color:var(--fg-2);text-decoration:underline;text-decoration-color:var(--line-2);text-underline-offset:3px;}
.bx-foot a:hover{color:var(--fg)}
@media (prefers-reduced-motion:reduce){.buy-view:not(.shown) .bx-a{transform:none}.bx-view-in{animation:none}.bx-wait-t,.bx-wait-s span{animation:none;background:none;-webkit-text-fill-color:currentColor}}


/* FAQ */
.faq-wrap{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,6vw,88px);align-items:start}
.faq-aside{position:sticky;top:calc(var(--pbar-room) + 32px)}
.faq{padding:clamp(4px,1vw,12px) clamp(22px,3.4vw,44px)}
.faq details+details{border-top:1px solid var(--line)}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:44px;padding:22px 0;cursor:pointer;list-style:none;font-weight:560;font-size:clamp(17px,1.4vw,20px);letter-spacing:-.018em;line-height:1.35}
.faq summary::-webkit-details-marker{display:none}
.faq summary .ic{width:20px;height:20px;color:var(--fg-3);transition:transform .35s var(--ease)}
.faq details[open] summary .ic{transform:rotate(45deg);color:var(--fg)}
.faq .a{padding:0 48px 24px 0;color:var(--fg-2);font-size:16px;line-height:1.6}
.faq .a p+p{margin-top:12px}
.faq .a b{font-weight:600;color:var(--fg)}
.faq .a a{color:var(--fg);text-decoration:underline;text-decoration-color:var(--line-2);text-underline-offset:3px}
.faq code{font:500 14px var(--mono);padding:2px 6px;border-radius:6px;background:var(--chip);color:var(--fg)}

/* ======================= THE LAST SCENE: THE FOOTER =======================
   One frame, on black again (with motion the page colour itself turns back from graphite to black as the footer arrives, see
   site.js; without, the footer's top fades from graphite into black on its own). Everything hangs on two edges: the wrap's
   left edge (the index labels) and one axis a quarter in (the index values, the legal line). The footer is an index, not
   columns of lists: one row per group, hairlines between them. Last, the Demstrap signature, set to the exact width of the
   grid and sunk into the bottom edge of the page (about a sixth of its height below it), so at desktop sizes the whole last
   screen is one composition. It is decorative (aria-hidden) and static without motion. */
.foot{--axis:minmax(0,1fr) minmax(0,3fr);--axis-gap:var(--gap-card);padding-top:calc(var(--sec-pad) * 1.25);
  background:transparent;font-size:15px;--fg-3:#98989d}
html.motion .foot{background:transparent}

.foot-row,.foot-legal{display:grid;grid-template-columns:var(--axis);column-gap:var(--axis-gap);align-items:start;border-top:1px solid var(--line)}
.foot-row{padding:6px 0}
.foot-k{display:flex;align-items:center;min-height:44px;margin:0;font:600 14px/1.3 var(--sans);letter-spacing:-.01em;color:var(--fg)}
.foot .brand{align-self:start;justify-self:start;font-weight:640;font-size:15px}
.foot-about{max-width:58ch;padding:11px 0;line-height:1.47;color:var(--fg-3);text-wrap:pretty}
.foot-links{display:flex;flex-wrap:wrap;column-gap:clamp(20px,2.8vw,40px)}
.foot-links a{display:inline-flex;align-items:center;gap:8px;min-height:44px;color:var(--fg-2);letter-spacing:-.008em;transition:color .2s ease}
.foot-links a:hover{color:var(--fg)}
.foot-links .ic{width:15px;height:15px;color:var(--fg-3);transition:color .2s ease}
.foot-links a:hover .ic{color:var(--fg)}
.foot-legal{padding:4px 0;font-size:13px;color:var(--fg-3)}
.foot-legal .foot-k{font:inherit;color:inherit}
.foot-legal .foot-v{display:flex;align-items:center;min-height:44px}

/* the signature, full bleed, after the reference: the name in Mona Sans 900 at 112.5% width and -0.065em, flat warm white.
   Measured from the rendered ink, "Demstrap" is 4.839em wide and starts .047em in, so the font size is 103% of the band's
   width / 4.839 and it is pulled .9% past the left edge: both ends run off the page (the D's stem, the p's bowl), and
   .foot-mark clips them, so the word never widens the page. In the 1em line box the cap top sits at .151em and the
   baseline at .885em: the top margin puts the cap top at --cap, the bottom margin puts the baseline just under the bottom
   edge of the page. Over it, "Keep cooking." in brush pen (the brand's hot orange), its baseline just under the D's cap
   top so the descenders and the long underline swash run over the letters, and a thin pen flick across "rap".
   Small mono captions in the corners. Flat colour, no texture. */
.foot-mark{margin-top:clamp(40px,5.5vh,72px);overflow:hidden;overflow:clip}
.foot-sig{--ink:#ff6a1f;--paper:#ecebe7;--hw:clamp(250px,35.5vw,920px);--st:max(2.8vw,42px);
  --cap:calc(var(--st) + var(--hw) * .1834 - var(--hw) * .027);--fs:calc(103vw / 4.839);
  position:relative;container-type:inline-size;isolation:isolate}
@supports (width:1cqw){.foot-sig{--hw:clamp(250px,35.5cqw,920px);--fs:calc(103cqw / 4.839)}}
.foot-word{position:relative;z-index:0;display:block;width:max-content;font-size:var(--fs);
  margin:calc(var(--cap) - .151em) 0 -.12em calc(-.9cqw - .047em);font-weight:900;font-stretch:112.5%;
  line-height:1;letter-spacing:-.065em;white-space:nowrap;color:var(--paper);user-select:none;-webkit-user-select:none}
.sig-hand,.sig-flick{position:absolute;z-index:2;display:block;overflow:visible;fill:var(--ink);pointer-events:none}
.sig-hand{left:18cqw;top:var(--st);width:var(--hw);height:calc(var(--hw) * 93 / 338)}
.sig-flick{left:70.5cqw;width:30cqw;height:calc(30cqw * 58 / 406);bottom:calc(var(--fs) * (.547 - .005) - 30cqw * 58 / 406 * .08)}
.sig-pen{fill:none;stroke:#fff;stroke-linecap:round;stroke-linejoin:round}
/* with motion, the pen writes once when the band is in view: every stroke is cut into pieces that never cross themselves,
   each revealed through its own mask (so no pass leaks ink onto another), driven by site.js at a hand's pace. Once written,
   the dashes come off and the ink is the plain static drawing, the same one reduced motion and no-JS see. */
html.sig-draw .sig-pen{stroke-dasharray:1 1.2;stroke-dashoffset:1.1}
html.sig-draw .foot-sig.done .sig-pen{stroke-dasharray:none;stroke-dashoffset:0}
/* on a phone the flick over "rap" is drawn at under a third of a pixel per unit: a half-pixel edge of the same ink keeps
   its hair-thin taper a continuous line instead of breaking into antialiased beads (the masks are wide enough to hold it) */
@media (max-width:600px){.sig-flick path[mask]{stroke:var(--ink);stroke-width:.5px;stroke-linejoin:round;vector-effect:non-scaling-stroke}}
/* under ~460px the hand (250px at least) is so much wider than the band's third that the g's long exit runs right along
   the flick's first stretch: there the flick lands light (fades in) and never doubles that line into a broken-looking pair */
@media (max-width:480px){.sig-flick{-webkit-mask-image:linear-gradient(90deg,transparent 19%,#000 30%);mask-image:linear-gradient(90deg,transparent 19%,#000 30%)}}

/* quiet reveals, set up from JS only when motion is allowed (no JS and reduced motion see everything) */
html.reveals .rv,html.reveals .reveal{transition:opacity .9s var(--ease-apple),transform 1.1s var(--ease-apple)}
html.reveals .reveal[data-d="1"]{transition-delay:.1s}
html.reveals .rv[data-d="1"]{transition-delay:.12s}
html.reveals .reveal[data-d="2"]{transition-delay:.2s}
html.reveals .rv:not(.in){opacity:0;transform:translateY(28px)}
html.reveals .reveal:not(.in){opacity:0;transform:translateY(56px) scale(.965)}

/* ======================= RESPONSIVE ======================= */
@media (max-width:899.98px){
  .nav-in{gap:8px;justify-content:space-between;padding-right:4px}
  .nav-cta{margin-right:0}
  .nav-toggle{display:inline-grid}
  .nav-links{position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:0;margin:0;padding:8px var(--gutter) 20px;background:#161617;border-bottom:1px solid rgba(255,255,255,.08);opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .25s var(--ease),transform .3s var(--ease),visibility 0s linear .3s}
  .nav.open .nav-links{opacity:1;visibility:visible;transform:none;transition:opacity .25s var(--ease),transform .3s var(--ease)}
  .nav-links a{height:52px;padding:0;font-size:22px;font-weight:600;letter-spacing:-.02em;color:var(--fg);border-bottom:1px solid rgba(255,255,255,.06)}
  .pbar-in{padding-left:16px}
  .pbar-btn{padding:0 12px}

  /* the spreads stack: the picture across the top of the card, the copy under it */
  .chap,.chap-flip{grid-template-columns:1fr;min-height:0}
  .chap-media,.chap-flip .chap-media{order:-1}
  .chap-media>.frame{aspect-ratio:16/10}
  /* the set comes apart into a stack (PayPal first), the open area into one column */
  .bx-cards{grid-template-columns:minmax(0,1fr);max-width:560px;gap:12px}
  .bx-card[data-pay=robux],.bx-card[data-pay=boost]{margin:0;padding:28px 24px 24px;border-radius:var(--bx-r)}
  .bx-feat{order:-1;padding:30px 24px 24px}
  .bx-amt{margin-top:24px}
  .bx-pts{margin:22px 0 0}
  .bx-art{flex:none;height:150px}
  .bx-ink{width:min(86%,300px)}
  .bx-pick{min-height:0}
  .bx-pick .bx-cards{min-height:0}
  .bx-go-grid{grid-template-columns:minmax(0,1fr)}
  .bx-go-side{position:static}

  .faq-wrap{grid-template-columns:1fr}
  .faq-aside{position:static}
  .faq .a{padding-right:8px}
}
@media (max-width:760px){
  .kit-pair{grid-template-columns:1fr}
  /* the showcase rows stack: the clip edge to edge across the card, the number under it */
  .efig,.efig-flip{grid-template-columns:1fr;gap:22px;padding:0}
  .efig-flip .efig-media{order:0}
  .efig-media.ph,.efig-flip .efig-media.ph{border-radius:0}
  .efig figcaption{padding:0 var(--pad-card)}
  .engine-figs{gap:44px}
}
@media (max-width:640px){
  .bx-run>li{padding-left:48px}
  .bx .bx-foot{flex-direction:column;gap:4px}
  .bx .bx-foot span+span::before{display:none}
  /* phones: the drawing floats beside the step's first lines and the text wraps around it */
  .bx-run>li{padding-right:0}
  .bx-sa{position:static;float:right;width:80px;margin:2px 0 6px 14px;opacity:.3}
  .bx-run>li{display:flow-root}
  .bx-run>li>.bx-run-act,.bx-run>li>.bx-run-note,.bx-run>li>.bx-claim-s{clear:both}
  :root{--sec-pad:72px}
  .features{padding-top:48px}
  /* two lines on phones so the stretched word can still be big */
  .hero-in{--cook-fs:var(--cook-size,clamp(52px,17vw,96px));padding-bottom:28px}
  .cook{line-height:.98}
  .cook-a{display:block}
  .hn-with{font-size:clamp(15px,4.2vw,18px)}
  /* the foot stacks: the name and line, then the price and Buy under them */
  .hero-buy{flex-direction:column;align-items:flex-start;gap:14px}
  .hero-ctas{gap:14px}
  .hero-demo{padding-bottom:16px}
  .demo-foot{flex-direction:column;align-items:flex-start;gap:0;margin-top:10px;font-size:13px}
  .demo-full{min-height:40px}
  .efig-n{font-size:clamp(54px,15vw,68px)}
  .cmp{--c1:40%;--c2:30%}
  /* the product names may break after "Dems" (a <wbr>) and shrink a touch, so they never run into each other */
  .cmp thead th:not(:first-child){padding-left:4px;padding-right:4px}
  .cmp-name{font-size:clamp(14px,4.4vw,17px)}
  .cmp th,.cmp td{padding:14px 8px}
  .cmp-card{padding:4px 16px 24px}
  .cmp th:first-child,.cmp tbody th[scope=row],.cmp .cmp-grp>th{padding-left:6px}
  .cmp thead th{padding-top:14px;padding-bottom:12px}
  .hl{--hl-gap:12px}
  .sec-head{margin-bottom:28px}
  .faq summary{padding:18px 0}
  .foot-row,.foot-legal{grid-template-columns:minmax(0,1fr)}
  .foot-row{padding:12px 0 8px}
  .foot-row>h2.foot-k{min-height:36px}
  .foot-about{padding:2px 0 8px}
  .foot-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:16px}
  .foot-legal{padding:12px 0 0}
  .foot-legal .foot-k{min-height:0;padding-bottom:2px}
  .foot-legal .foot-v{min-height:0;padding-bottom:4px}
  .foot-mark{margin-top:48px}
}
/* phones on their side (at most 640px wide and short): the hero keeps the one-line headline and the side-by-side foot of the
   next size up, so PRO and the Buy button still fit on the screen */
@media (max-width:640px) and (max-height:480px) and (orientation:landscape){
  .hero-in{--cook-fs:var(--cook-size,clamp(64px,min(11.4vw,22svh),200px));padding-bottom:clamp(20px,4vh,44px)}
  .cook{line-height:1}
  .cook-a{display:inline-block}
  .hero-buy{flex-direction:row;align-items:flex-end;gap:18px 32px}
  .hero-ctas{gap:16px}
}
/* the last scene on laptop-height screens (a 1440x790 or 1366x768 browser window): the index and the signature still make
   one frame under the nav, so the spacing gives way with the height, continuing the values above 900px without a step */
@media (min-width:641px) and (max-height:899.98px){
  .foot-row{padding:clamp(0px,(100vh - 780px) / 20,6px) 0}
  .foot-legal{padding:clamp(0px,(100vh - 820px) / 20,4px) 0}
  .foot-mark{margin-top:clamp(24px,12vh - 54px,72px)}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}
}

/* text is not selectable or copyable (owner's call); form fields still are */
body{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
input,textarea,[contenteditable="true"]{-webkit-user-select:text;user-select:text}

/* World Lab: a quiet "coming soon" line with a soft light sweeping across it (static without motion) */
.soon{margin:clamp(18px,2.6vh,24px) clamp(8px,1.6vw,20px) 0;font-weight:600;font-size:13px;letter-spacing:.01em}
.soon span{background:linear-gradient(100deg,#86868b 0%,#86868b 38%,#fff 50%,#86868b 62%,#86868b 100%);background-size:250% 100%;
  background-position:100% 0;-webkit-background-clip:text;background-clip:text;color:transparent;animation:soon-sweep 3.2s cubic-bezier(.45,.05,.55,.95) infinite}
@keyframes soon-sweep{0%{background-position:100% 0}70%,100%{background-position:0 0}}
@media (prefers-reduced-motion:reduce){.soon span{animation:none;background:none;color:var(--fg-2)}}

/* World Lab: two looks of the same idea (light, then weather) cross-fade slowly; reduced motion keeps the first */
.xfade>img:last-child{animation:xfade 10s ease-in-out infinite}
/* the endless loops (the coming-soon sweep, the cross-fades) rest while their card is off screen (site.js sets .off) */
.soon.off span,.xfade.off>img:last-child{animation-play-state:paused}
@keyframes xfade{0%,40%{opacity:1}50%,90%{opacity:0}100%{opacity:1}}
@media (prefers-reduced-motion:reduce){.xfade>img:last-child{animation:none;opacity:0}}