/* The home page since 1 Nov 2026 (tools/quit-site/creator-home.mjs): the movement film's story, built to the approved comps
   (the owner's question box, 1 Nov 2026: hero A, comps d1a and d2 to d7 for a desktop, m1 to m4 for a phone), followed
   since 2 Nov 2026 by the whole one page, which keeps its own design.
   One idea runs through it: every photograph is a tall 9:16 reel, shown whole, as the product is reels. Near-black and
   cream paper sections take turns. The type is the site's own (the owner's F1, 2 Nov 2026): headings in its pixel face
   (QUIT Pixel, the face of YOU QUIT. THE AI CLOCKS IN.), keys, labels and figures in QUIT Display, words in IBM Plex
   Mono. The site declares Plex Mono at 72% of its size (coins/quit/ui/fonts/body.css, size-adjust), so a size written
   here as calc(N / .72) draws at N on screen: 18 to 20 px for reading text on a desktop, 15 to 17 px on a phone. Its
   line box is 1em of the written size (its ascent and descent overrides), so a line-height of 1.18 here is about 1.6
   times the size the eye reads.
   Buttons are flat keys with a 2 px corner, reels have a 14 px corner, nothing else is rounded.
   Everything is scoped to the qh- classes, so no other page changes. */
:root{
 --qh-dark:#030805;--qh-dark-2:#070d0b;--qh-paper:#f4e7cb;--qh-ink:#0b0e0c;--qh-cream:#f4e7cb;--qh-muted:rgba(244,231,203,.86);
 --qh-orange:#ff610b;--qh-green:#25dc71;--qh-amber:#ffa21f;--qh-rule-dark:rgba(244,231,203,.28);--qh-rule-paper:rgba(11,14,12,.78);
 --qh-serif:"QUIT Pixel","QUIT Pixel Fallback",ui-monospace,monospace;
 --qh-mono:"IBM Plex Mono","QUIT Body Fallback",ui-monospace,monospace;
 --qh-pixel:"QUIT Display","QUIT Display Fallback",ui-monospace,monospace;
 --qh-gutter:clamp(20px,6.667vw,96px);--qh-reel-radius:14px;--qh-key-radius:2px
}
.qh-wrap{box-sizing:border-box;width:min(100% - 2 * var(--qh-gutter),1248px);margin-inline:auto}
.qh-dark{background:var(--qh-dark);color:var(--qh-cream)}
.qh-paper{background:var(--qh-paper);color:var(--qh-ink)}
/* the headings: the site's pixel face in capitals, as every floor of the building sets its titles */
.qh-serif{font-family:var(--qh-serif);font-weight:700;letter-spacing:.01em;text-transform:uppercase;text-shadow:none;margin:0}
.qh-line{display:inline}
.qh-accent{color:var(--qh-orange)}
.qh-title{font-size:clamp(38px,4.4vw,66px);line-height:1}
.qh-label{margin:0 0 16px;font:700 17px/1 var(--qh-pixel);letter-spacing:.06em;color:var(--qh-orange);text-transform:uppercase}
.qh-body{margin:20px 0 0;font:400 calc(18px / .72)/1.18 var(--qh-mono);max-width:56ch}
.qh-num{font:700 46px/1 var(--qh-pixel);letter-spacing:.02em}
.qh-num--small{font-size:24px;color:inherit}
.qh-keys{display:flex;flex-wrap:wrap;align-items:center;gap:14px 18px;margin-top:34px}
.qh-key{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;min-height:56px;padding:0 34px;border:2px solid transparent;border-radius:var(--qh-key-radius);
 font:700 20px/1 var(--qh-pixel);letter-spacing:.05em;text-decoration:none;text-transform:uppercase;white-space:nowrap;cursor:pointer;transition:filter .12s linear,transform .12s ease-out;background:none}
.qh-key--orange{background:var(--qh-orange);color:#1d0800}
.qh-key--green{background:var(--qh-green);color:#03200f}
.qh-key--outline{border-color:var(--qh-cream);color:var(--qh-cream)}
.qh-key--ink{border-color:var(--qh-ink);color:var(--qh-ink)}
.qh-key:focus-visible,.qh-film__sound:focus-visible,.qh-ca__copy:focus-visible,.qh-panel a:focus-visible,.qh-crew__links a:focus-visible,.qh-footnav a:focus-visible{outline:3px solid #fff0ad;outline-offset:3px}
@media(hover:hover){.qh-key:hover{filter:brightness(1.08);transform:translateY(-1px)}}
.qh-key:active{transform:translateY(1px);filter:none}
.qh-text-link,.qh-rules a,.qh-mail{color:inherit;font:600 calc(16px / .72)/1.18 var(--qh-mono);letter-spacing:.02em;text-underline-offset:4px}
.qh-mail{display:inline-flex;flex-direction:column;gap:6px;text-decoration:none}
.qh-mail span:first-child{text-decoration:underline;text-underline-offset:4px}
.qh-mail span:last-child{font-weight:400}
.qh-rules{margin:16px 0 0}
/* A reel is the frame's own 9:16 (941 x 1672), so the picture is never cut. */
.qh-reel{position:relative;overflow:hidden;border-radius:var(--qh-reel-radius);aspect-ratio:941/1672;background:#121512}
.qh-reel__img{display:block;width:100%;height:100%;object-fit:cover}

/* 1. The film. */
.qh-hero{background:var(--qh-dark);color:var(--qh-cream);padding:clamp(28px,3.6vw,56px) 0 clamp(40px,5vw,72px);overflow:hidden}
.qh-hero__grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(24px,4vw,72px);align-items:center}
.qh-led{margin:0 0 18px;font:700 clamp(22px,2.3vw,34px)/1 var(--qh-pixel);letter-spacing:.08em;color:var(--qh-green);text-shadow:0 0 14px rgba(37,220,113,.35)}
.qh-hero__title{font-size:clamp(40px,4.7vw,74px);line-height:.98}
/* the copy column: eyebrow, headline, lede, the two keys side by side, the views line (comp d1a) */
.qh-hero__copy{display:grid;grid-template-columns:auto auto minmax(0,1fr);column-gap:18px;align-content:center}
.qh-hero__over{display:contents}
.qh-hero__copy>*,.qh-hero__over>*{grid-column:1/-1}
.qh-hero__join{grid-column:1;grid-row:4;margin-top:34px}
.qh-hero__watch{grid-column:2;grid-row:4;margin-top:34px}
.qh-hero__copy .qh-lede{grid-row:3}
.qh-hero__copy .qh-proof{grid-row:5}
.qh-hero__title .qh-line{display:block}
.qh-lede{margin:26px 0 0;max-width:34em;font:400 calc(clamp(17px,1.4vw,20px) / .72)/1.18 var(--qh-mono);color:var(--qh-cream)}
.qh-proof{margin:30px 0 0;padding-top:18px;border-top:2px solid var(--qh-orange);max-width:46em;font:400 calc(16px / .72)/1.18 var(--qh-mono);color:var(--qh-cream)}
.qh-proof a{color:var(--qh-orange);text-underline-offset:4px;white-space:nowrap}
/* The film keeps its 9:16 and fits the first screen under the header and the contract bar, so no edge of it is cut. */
.qh-film{margin:0;border:1.5px solid var(--qh-cream);box-shadow:0 30px 120px rgba(255,140,40,.18);justify-self:end;width:min(100%,520px,calc((100vh - 230px) * 9 / 16));aspect-ratio:9/16}
.qh-film__video{display:block;width:100%;height:100%;object-fit:cover;background:#111}
.qh-film__sound{position:absolute;top:16px;right:16px;padding:8px 10px;border:0;background:rgba(0,0,0,.55);color:#fff;font:700 15px/1 var(--qh-pixel);letter-spacing:.06em;cursor:pointer;border-radius:var(--qh-key-radius)}
.qh-film__sound[aria-pressed="true"]{background:var(--qh-orange);color:#1d0800}
.qh-film__caption{position:absolute;left:5%;right:5%;bottom:4.5%;margin:0;padding:10px 16px;background:rgba(10,10,10,.8);color:#fff;font:400 calc(clamp(15px,1.25vw,18px) / .72)/1.15 var(--qh-mono);text-align:left}
.qh-film__caption:empty{display:none}
.qh-film video::cue{opacity:0}

/* 2. The formula (comp B, the owner's G1, 2 Nov 2026): the copy column with the steps; the board with three new
   photographs in the site's bezels (deck-art/bay.webp, as the contract bar's bays) and the AI's time card on its rack;
   the closing line and the two facts under an orange rule. The card's words are sized in container units, so they keep
   their place on the photographed card at any width. */
.qh-formula{padding:clamp(52px,5vw,84px) 0 clamp(40px,4vw,60px);border-top:1px solid var(--qh-rule-dark)}
.qh-formula__grid{display:grid;grid-template-columns:minmax(0,4.2fr) minmax(0,7.8fr);gap:clamp(28px,3.5vw,56px);align-items:start}
.qh-tag{display:inline-block;margin:0 0 18px;padding:7px 12px 6px;border:2px solid var(--qh-orange);border-radius:var(--qh-key-radius);font:700 17px/1 var(--qh-pixel);letter-spacing:.06em;color:var(--qh-cream)}
.qh-formula__title{font-size:clamp(44px,4.6vw,72px);line-height:.98}
.qh-steps{list-style:none;margin:30px 0 0;padding:0}
.qh-step{display:grid;grid-template-columns:64px minmax(0,1fr);gap:4px 14px;align-items:start;padding:16px 0;border-top:1px solid var(--qh-rule-dark)}
.qh-step:last-child{border-bottom:1px solid var(--qh-rule-dark)}
.qh-step .qh-num{font-size:44px;line-height:.86;color:var(--qh-orange)}
.qh-step__label{margin:0;font:700 21px/1.1 var(--qh-pixel);letter-spacing:.05em;color:var(--qh-cream)}
.qh-step__line{margin:8px 0 0;font:400 calc(16px / .72)/1.18 var(--qh-mono);color:var(--qh-muted)}
.qh-formula__key{margin-top:30px}
.qh-formula__board{position:relative;display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1fr) minmax(0,1.16fr);gap:10px;align-items:start;padding-bottom:clamp(44px,5vw,76px)}
.qh-shot{position:relative;margin:0;padding:15px 17px;border:0 solid transparent;border-image:url(/runtime/quit/deck-art/bay.webp) 44 50 fill/15px 17px stretch;box-shadow:0 24px 60px rgba(0,0,0,.55)}
.qh-shot--1{margin-top:46px}.qh-shot--2{margin-top:22px}
.qh-shot__img{display:block;width:100%;height:auto;aspect-ratio:.44;object-fit:cover;border-radius:3px;background:#121512}
.qh-shot--1 .qh-shot__img{object-position:22% 50%}
.qh-shot--2 .qh-shot__img{object-position:100% 50%}
.qh-shot--3 .qh-shot__img{object-position:50% 50%}
.qh-shot__tag{position:absolute;top:26px;left:28px;margin:0;padding:5px 8px 4px;border:2px solid var(--qh-green);border-radius:var(--qh-key-radius);background:rgba(3,8,5,.82);font:700 18px/1 var(--qh-pixel);letter-spacing:.04em;color:var(--qh-green)}
.qh-card{position:absolute;z-index:2;right:-1%;top:40%;width:38%;transform:rotate(5deg)}
.qh-card__paper{position:relative;isolation:isolate;container-type:inline-size;aspect-ratio:.78;box-sizing:border-box;padding:7% 8% 0;overflow:hidden;color:#24180c;box-shadow:0 26px 52px rgba(0,0,0,.62)}
.qh-card__bg{position:absolute;inset:0;z-index:-1;display:block;width:100%;height:100%;object-fit:cover}
.qh-card__title{margin:0;padding-bottom:2cqw;border-bottom:.7cqw solid rgba(36,24,12,.78);font:700 10cqw/1 var(--qh-serif);letter-spacing:.02em;text-transform:uppercase}
.qh-card__who{margin:2.6cqw 0 0;font:700 4.6cqw/1 var(--qh-pixel);letter-spacing:.06em}
.qh-card__rows{list-style:none;margin:2.8cqw 0 0;padding:0;border-top:.35cqw solid rgba(36,24,12,.55)}
.qh-card__rows li{display:grid;grid-template-columns:1fr auto;align-items:center;gap:3cqw;padding:1.5cqw .6cqw;border-bottom:.3cqw solid rgba(36,24,12,.38)}
.qh-card__time{font:700 6.3cqw/1 var(--qh-pixel);letter-spacing:.04em;color:#c24406}
.qh-card__stamp{padding:.7cqw 2cqw .5cqw;border:.5cqw solid rgba(22,132,70,.86);border-radius:.8cqw;font:700 4.2cqw/1 var(--qh-pixel);letter-spacing:.08em;color:rgba(22,132,70,.94);transform:rotate(-3deg);mix-blend-mode:multiply}
.qh-card__rows li:nth-child(even) .qh-card__stamp{transform:rotate(2deg)}
.qh-card__rows li:nth-child(3n) .qh-card__stamp{transform:rotate(-5deg) translateX(-1.2cqw)}
.qh-card__foot{margin:2.6cqw 0 0;font:700 3cqw/1.3 var(--qh-pixel);letter-spacing:.05em}
.qh-card__rack{position:absolute;left:-5%;right:-5%;bottom:-4%;height:12%;border:0 solid transparent;border-image:url(/runtime/quit/deck-art/bay.webp) 44 50 fill/12px 14px stretch;box-shadow:0 14px 30px rgba(0,0,0,.6)}
.qh-formula__close{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 28px;padding-top:24px;border-top:2px solid var(--qh-orange)}
.qh-formula__side{margin:0;font-size:clamp(26px,2.5vw,36px);line-height:1.05;color:var(--qh-cream)}
.qh-chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:12px}
.qh-chips li{padding:10px 14px 9px;border:2px solid var(--qh-green);border-radius:var(--qh-key-radius);font:700 16px/1 var(--qh-pixel);letter-spacing:.06em;color:var(--qh-green);white-space:nowrap}

/* 3. Who it is for (comp d3): five reels, staggered. */
.qh-who{padding:clamp(52px,5vw,88px) 0 clamp(48px,5vw,80px)}
.qh-who__row{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(10px,1.2vw,18px);align-items:start}
.qh-who__item p{margin:14px 2px 0;font:400 calc(clamp(15px,1.2vw,17px) / .72)/1.18 var(--qh-mono);color:var(--qh-cream)}
.qh-who__item--1{margin-top:22px}.qh-who__item--2{margin-top:40px}.qh-who__item--3{margin-top:0}.qh-who__item--4{margin-top:30px}.qh-who__item--5{margin-top:22px}
.qh-who__close{display:flex;align-items:center;justify-content:space-between;gap:28px;margin-top:clamp(40px,4vw,64px)}
.qh-who__waited{font-size:clamp(38px,4.4vw,66px);line-height:1}
.qh-who__close .qh-key{flex:none}

/* 4. For creators, models, agencies and brands (comp d4): two reels side by side, the second a step lower, both whole
   and inside the section. */
.qh-partners{padding:clamp(56px,6vw,96px) 0}
.qh-partners__grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(28px,4vw,64px);align-items:center}
.qh-points{list-style:none;margin:30px 0 0;padding:0;max-width:46em}
.qh-points li{display:flex;align-items:baseline;gap:22px;padding:15px 0;border-top:1px solid var(--qh-rule-paper);font:400 calc(clamp(15px,1.25vw,17px) / .72)/1.18 var(--qh-mono)}
.qh-points li:last-child{border-bottom:1px solid var(--qh-rule-paper)}
.qh-partners__pics{display:grid;grid-template-columns:1fr 1fr;gap:clamp(10px,1.2vw,16px);align-items:start;padding-bottom:clamp(40px,4vw,64px)}
.qh-partners__small{margin-top:clamp(40px,4vw,64px)}

/* 5. The AI desk (comp d5, top). Its panel shows the bot's real state (creator-home.js); while the bot is off it says
   COMING SOON and its rows stay empty, never a made-up number. */
.qh-desk{padding:clamp(56px,6vw,92px) 0}
.qh-desk__grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,4vw,72px);align-items:center}
.qh-desk .qh-title{font-size:clamp(36px,3.8vw,58px)}
.qh-desk .qh-label{display:inline-block;padding:7px 11px 6px;background:var(--qh-orange);color:#1d0800}
.qh-desk .qh-body{color:var(--qh-cream)}
.qh-desk .qh-key{margin-top:30px}
.qh-panel{border:1.5px solid var(--qh-green);border-radius:6px;padding:18px 20px 22px;background:var(--qh-dark-2)}
.qh-panel__tabs{display:flex;flex-wrap:wrap;gap:4px 6px;border-bottom:1.5px solid var(--qh-green);padding-bottom:0}
.qh-panel__tabs a{padding:12px 14px 11px;color:var(--qh-cream);font:700 16px/1 var(--qh-pixel);letter-spacing:.06em;text-decoration:none}
.qh-panel__tabs a[aria-current]{background:rgba(37,220,113,.12);color:var(--qh-green)}
.qh-panel__rows{margin:0;padding:0 10px}
.qh-panel__rows>div{display:grid;grid-template-columns:minmax(170px,auto) 1fr;align-items:center;gap:20px;padding:20px 0;border-bottom:1px solid rgba(37,220,113,.35)}
.qh-panel__rows>div:last-child{border-bottom:0}
.qh-panel__rows dt{display:flex;align-items:center;gap:14px;font:700 17px/1 var(--qh-pixel);letter-spacing:.06em;color:var(--qh-cream)}
.qh-panel__rows dd{margin:0;font:700 20px/1.2 var(--qh-pixel);letter-spacing:.05em;color:var(--qh-cream)}
.qh-panel__status dd{font-size:24px;color:var(--qh-orange)}
.qh-dot{display:inline-block;width:14px;height:14px;border-radius:50%;background:var(--qh-amber)}
.qh-panel[data-state="live"] .qh-dot{background:var(--qh-green)}
.qh-panel[data-state="live"] .qh-panel__status dd{color:var(--qh-green)}

/* 6. The line (comp d5, bottom). */
.qh-line-sec{padding:clamp(48px,4.5vw,72px) 0}
.qh-line-sec__grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:clamp(28px,4vw,64px);align-items:center}
.qh-line-sec__pics{display:grid;grid-template-columns:1fr 1fr;gap:14px;max-width:520px}
.qh-line-sec .qh-title{font-size:clamp(38px,4.4vw,66px)}
.qh-line-sec .qh-title .qh-line{display:block}

/* 7. Community (comp d6, top). */
.qh-crew{padding:clamp(56px,6vw,92px) 0}
.qh-crew__grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,4vw,56px);align-items:center}
.qh-crew .qh-title{font-size:clamp(34px,3.4vw,52px)}
.qh-crew .qh-title .qh-line{display:block}
.qh-crew .qh-body{color:var(--qh-cream)}
.qh-crew__links{list-style:none;margin:34px 0 0;padding:0;max-width:28em}
.qh-crew__links a{display:flex;justify-content:space-between;gap:16px;padding:14px 2px;border-bottom:1px solid var(--qh-rule-dark);color:var(--qh-cream);font:700 18px/1.2 var(--qh-pixel);letter-spacing:.05em;text-decoration:none}
.qh-crew__links a span:last-child{font:400 calc(16px / .72)/1.2 var(--qh-mono);letter-spacing:0}
@media(hover:hover){.qh-crew__links a:hover{color:var(--qh-orange)}}
.qh-crew__pics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(8px,1vw,14px);align-items:start;padding-bottom:20px}
.qh-crew__pic--1{margin-top:44px}.qh-crew__pic--2{margin-top:66px}.qh-crew__pic--3{margin-top:0}.qh-crew__pic--4{margin-top:58px}

/* 8. The coin (comp d6, bottom). */
.qh-coin{padding:clamp(52px,5vw,84px) 0}
.qh-coin__grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(28px,4vw,64px);align-items:center}
.qh-coin__mark{display:block;width:min(100%,470px);height:auto;margin:0 0 10px -10px}
.qh-coin .qh-title{font-size:clamp(34px,3.4vw,52px)}
.qh-ca{display:flex;align-items:stretch;margin-top:26px;max-width:760px;border:2px solid var(--qh-ink)}
.qh-ca code{flex:1;min-width:0;padding:16px 18px;font:400 calc(clamp(13px,1.2vw,16px) / .72)/1.3 var(--qh-mono);overflow-wrap:anywhere;color:var(--qh-ink)}
.qh-ca__copy{flex:none;min-width:120px;border:0;background:var(--qh-orange);color:#1d0800;font:700 20px/1 var(--qh-pixel);letter-spacing:.06em;cursor:pointer}
.qh-coin__facts dl{margin:0;display:grid;grid-template-columns:1fr 1fr;border-left:1px solid var(--qh-rule-paper)}
.qh-coin__facts dl>div{padding:6px 0 18px 22px;border-bottom:1px solid var(--qh-rule-paper)}
.qh-coin__facts dl>div:nth-child(n+3){padding-top:20px}
.qh-figure{font:700 clamp(28px,2.6vw,40px)/1 var(--qh-pixel);letter-spacing:.02em}
.qh-coin__facts dd{margin:10px 0 0;font:400 calc(16px / .72)/1.18 var(--qh-mono)}
.qh-coin .qh-keys{padding-left:22px}

/* 9. The close (comp d7): the chair reel whole beside the motto and the three lines. */
.qh-close{padding:clamp(56px,5vw,88px) 0}
.qh-close__grid{display:grid;grid-template-columns:minmax(0,8fr) minmax(0,4fr);gap:clamp(28px,4vw,56px);align-items:center}
.qh-motto{margin:0 0 24px;color:var(--qh-muted)}
.qh-close__title{font-size:clamp(40px,4.6vw,72px);line-height:1}
.qh-close__title .qh-line{display:block}
.qh-close__copy .qh-key{margin-top:32px}
.qh-close__img{width:min(100%,340px);justify-self:end}
.qh-footnav{display:flex;flex-wrap:wrap;justify-content:center;gap:14px 30px;padding:26px var(--qh-gutter);background:var(--qh-dark);border-top:1px solid var(--qh-rule-dark)}
.qh-footnav a{color:var(--qh-cream);font:700 16px/1 var(--qh-pixel);letter-spacing:.06em;text-decoration:none}
@media(hover:hover){.qh-footnav a:hover{color:var(--qh-orange)}}

/* Between a phone and a wide desktop the coin's four figures take the full width under its address. */
@media(min-width:761px) and (max-width:1100px){.qh-coin__grid{grid-template-columns:minmax(0,1fr)}.qh-coin__facts dl>div:nth-child(odd){border-left:0}}
/* There the formula's copy column stands above its board. */
@media(min-width:761px) and (max-width:1100px){.qh-formula__grid{grid-template-columns:minmax(0,1fr)}.qh-formula__board{max-width:860px}}
/* There the hero's two keys stand one above the other, so the copy column never runs under the film beside it. */
@media(min-width:761px) and (max-width:1100px){
 .qh-hero__grid{grid-template-columns:minmax(0,1fr) auto}
 .qh-film{width:clamp(220px,30vw,320px)}
 .qh-hero__copy{grid-template-columns:minmax(0,1fr)}
 .qh-hero__join,.qh-hero__watch{grid-column:1;justify-self:start}
 .qh-hero__watch{grid-row:5;margin-top:14px}
 .qh-hero__copy .qh-proof{grid-row:6}
}

/* The one page under the story keeps its own design; it only gets the page's ground. */
html[data-page="/"] main.frame-main{background:var(--qh-dark)}

/* Phones (comps m1 to m4). */
@media(max-width:760px){
 .qh-title{font-size:clamp(32px,9.4vw,42px)}
 .qh-body{font-size:calc(16px / .72)}
 .qh-keys{margin-top:24px}
 .qh-keys .qh-key{flex:1 1 100%}
 .qh-key{min-height:52px;font-size:19px}
 .qh-hero{position:relative;padding:0 0 32px}
 .qh-hero__grid{display:grid;grid-template-columns:minmax(0,1fr);width:100%}
 .qh-hero__copy{display:contents}
 /* the film runs the phone's full width at its own 9:16, so none of it is cut */
 .qh-hero .qh-film{grid-area:1/1;position:relative;width:100%;height:auto;aspect-ratio:941/1672;border:0;border-radius:0;box-shadow:none;justify-self:stretch}
 .qh-hero .qh-film::after{content:"";position:absolute;inset:auto 0 0;height:66%;background:linear-gradient(to bottom,rgba(3,8,5,0),rgba(3,8,5,.9) 52%,#030805);pointer-events:none}
 .qh-hero__over{grid-area:1/1;align-self:end;position:relative;z-index:2;display:block;padding:0 20px 26px}
 .qh-hero__join{display:flex;width:100%;margin-top:20px}
 .qh-hero__copy .qh-lede,.qh-hero__copy .qh-proof,.qh-hero__watch{grid-column:1;margin-inline:20px}
 .qh-hero__copy .qh-lede{grid-row:2;margin-top:26px;font-size:calc(17px / .72)}
 .qh-hero__copy .qh-proof{grid-row:3;margin-top:22px;font-size:calc(15px / .72)}
 .qh-hero__watch{grid-row:4;margin-top:24px}
 .qh-led{font-size:18px;margin-bottom:10px}
 .qh-hero__title{font-size:clamp(32px,9vw,40px);line-height:1}
 .qh-film__caption{display:none}
 .qh-who__row{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;margin-right:calc(-1 * var(--qh-gutter));padding-right:var(--qh-gutter);scrollbar-width:none}
 .qh-who__row::-webkit-scrollbar{display:none}
 .qh-who__item{flex:0 0 78%;scroll-snap-align:start;margin-top:0!important}
 .qh-who__item p{font-size:calc(15px / .72)}
 /* the formula on a phone: the steps, the key, then one swipe row in step order (01, 02, the time card, 04) */
 .qh-formula__grid{grid-template-columns:minmax(0,1fr)}
 .qh-formula__title{font-size:clamp(36px,10.4vw,46px)}
 .qh-step{grid-template-columns:50px minmax(0,1fr);padding:14px 0}
 .qh-step .qh-num{font-size:34px}
 .qh-step__label{font-size:19px}
 .qh-step__line{font-size:calc(15px / .72)}
 .qh-formula__key{display:flex;width:100%}
 .qh-formula__board{display:flex;align-items:center;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px;margin-right:calc(-1 * var(--qh-gutter));padding:14px var(--qh-gutter) 30px 0;scrollbar-width:none}
 .qh-formula__board::-webkit-scrollbar{display:none}
 .qh-shot{flex:0 0 66%;scroll-snap-align:start;margin-top:0!important}
 .qh-shot__img{aspect-ratio:941/1672}
 .qh-shot--1{order:1}.qh-shot--2{order:2}.qh-card{order:3}.qh-shot--3{order:4}
 .qh-card{position:relative;right:auto;top:auto;flex:0 0 72%;width:auto;margin:0 10px 18px;transform:rotate(2deg);scroll-snap-align:start}
 .qh-formula__close{flex-direction:column;align-items:stretch}
 .qh-formula__side{font-size:clamp(26px,7.6vw,34px)}
 .qh-chips li{flex:1 1 auto;text-align:center}
 .qh-who__close{flex-direction:column;align-items:stretch}
 .qh-who__waited{font-size:clamp(32px,9.4vw,42px)}
 .qh-partners__grid,.qh-desk__grid,.qh-line-sec__grid,.qh-crew__grid,.qh-coin__grid,.qh-close__grid{grid-template-columns:minmax(0,1fr)}
 .qh-panel,.qh-desk__copy,.qh-partners__copy,.qh-coin__copy,.qh-coin__facts{min-width:0}
 .qh-points li{font-size:calc(15px / .72)}
 .qh-partners__pics{order:-1;padding-bottom:0}
 .qh-partners__small{margin-top:40px}
 .qh-panel{padding:12px 12px 16px}
 .qh-panel__tabs a{padding:11px 10px 10px;font-size:15px}
 .qh-panel__rows>div{grid-template-columns:130px 1fr}
 .qh-panel__rows dt{font-size:15px}
 .qh-panel__rows dd{font-size:18px}
 .qh-line-sec__pics{max-width:none}
 .qh-crew__pics{grid-template-columns:1fr 1fr}
 .qh-crew__pic{margin-top:0!important}
 .qh-crew__pic--3,.qh-crew__pic--4{display:none}
 .qh-crew__links a span:last-child{font-size:calc(15px / .72)}
 .qh-coin__facts dl{grid-template-columns:1fr;border-left:0}
 .qh-coin__facts dl>div{padding:16px 0!important}
 .qh-coin .qh-keys{padding-left:0}
 .qh-ca{flex-direction:column}
 .qh-ca__copy{min-height:48px}
 .qh-close__img{order:-1;width:72%;justify-self:center}
 .qh-footnav{gap:14px 22px}
 .qh-footnav a{font-size:15px}
}
@media(prefers-reduced-motion:reduce){.qh-key{transition:none}}