/* The Partner Program page (/partners, also /apply and /resign): the call into the QUIT FACTORY, where the application
   lives since 26 Oct 2026 (owner order S06 to S09, comp apply-cta-v5), and the studio's reels on a wall under it. Real
   HTML in the site's own materials: the riveted gunmetal bay, the green phosphor glass and the arcade keys are the
   site's deck plates (runtime/quit/deck-art, laid as 9-slice border-images, as the header and the lobby deck lay them),
   every word is live text in the site's faces, only through the theme's tokens: the pixel face for the page's title, the
   call's heading and figures and the calculator's title, the display face for every other heading, key, label and
   counter (both Jersey 20 since the owner's choice of 26 Oct 2026), IBM Plex Mono for the body. Nothing here is a
   picture of a control.
   The page is wrapped in the site shell, whose stylesheets load after this one, so every rule is scoped under .qp. */

.qp{
 --qp-green:var(--t-green,#25dc71);--qp-orange:var(--t-orange,#ff610b);--qp-ink:var(--t-ink,#f4e7cb);
 --qp-black:var(--t-black,#030805);--qp-screen:var(--t-screen,#040c09);--qp-red:var(--t-red,#ff6860);
 --qp-focus:var(--t-focus,#fff0ad);--qp-dim:#7c857a;--qp-rule:#2a342d;--qp-well:#050a07;
 --qp-display:var(--t-font-display,"QUIT Display",monospace);--qp-pixel:var(--t-font-pixel,"QUIT Pixel",monospace);
 --qp-body:var(--t-font-body,"IBM Plex Mono",monospace);--qp-count:var(--t-font-display,"QUIT Display",monospace);
 --qp-pad:clamp(12px,1.6vw,24px);
 --qp-bay:url(/runtime/quit/deck-art/bay.webp) 44 50 fill/18px 20px stretch;
 box-sizing:border-box;width:100%;max-width:1880px;margin:0 auto;padding:16px var(--qp-pad) 40px;
 color:var(--qp-ink);font:400 22px/1.35 var(--qp-body);text-align:left;overflow-wrap:break-word
}
.qp *,.qp *::before,.qp *::after{box-sizing:border-box}
.qp :where(h1,h2,h3,p,ol,ul,fieldset,legend,figure){margin:0;padding:0}
.qp :focus-visible{outline:3px solid var(--qp-focus);outline-offset:3px}
.qp-vh{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* The shell's lobby deck (contract address, NOW HIRING) is left off this page: the approved comps go from the header
   straight to the page, and its APPLY AT HR key would lead back here. The deck kept the fixed header's room; main
   takes it back. */
body:has(.qp)>.q-ca{display:none}
body:has(.qp)>.q-ca~.frame-main{padding-top:var(--c-header-height,var(--t-header-desktop,70px))}
/* The shell's loader is styled by a <style> in the shell's head, which the utility wrapper does not carry, so here its
   markup would show raw (a 720 px wordmark that widens a phone's layout to 720 px on every page after the first in a
   tab). This page has no scene for it to wait on. */
body:has(.qp)>.q-boot{display:none}

/* ---------------------------------------------------------------- the title: the billboard over the city (owner, 25 Oct
   2026, design top B). The scene is one wordless plate with the studio's reel stills on the billboard
   (runtime/go/art/partner-billboard-*.webp); the words sit on a black plate over its open sky, below it on narrow screens. */
.qp-top{position:relative;margin:0 0 14px;border:solid transparent;border-width:14px 16px;border-image:url(/runtime/quit/deck-art/bay.webp) 44 50/14px 16px stretch;background:var(--qp-black)}
.qp-top__art{line-height:0}
.qp-top__art img{display:block;width:100%;height:auto}
.qp-top__plate{position:absolute;z-index:1;left:clamp(14px,2vw,36px);top:50%;transform:translateY(-50%);width:min(37%,640px);padding:clamp(14px,1.3vw,22px) clamp(16px,1.6vw,28px) clamp(16px,1.5vw,24px);border:2px solid var(--qp-green);border-radius:4px;background:rgba(3,8,5,.94);box-shadow:0 0 0 3px #000,0 12px 30px rgba(0,0,0,.45)}
.qp-kicker{margin:0 0 10px;color:var(--qp-green);font:700 clamp(13px,1.1vw,17px)/1 var(--qp-display);letter-spacing:.04em}
.qp-top .qp-kicker{display:inline-block;margin-bottom:12px;padding:6px 9px 5px;border:2px solid var(--qp-green)}
/* The billboard's title is the approved top band's two-line plate (top-b-c1): POST OUR REELS. over GET PAID IN $QUIT.,
   the second line its own block so the break holds in any face, with the band's capitals at 1440 (32.7 px, measured on
   the comp; 52.2 px of the pixel face). From 1181 px the plate sits on the art, where the lead under the title takes
   more lines as the plate narrows, so the title steps down faster than the width and the plate keeps clear of the art's
   edges (tests/go/partners-billboard-box.test.mjs). */
.qp-h1{color:var(--qp-orange);font:700 clamp(28px,calc(9vw - 77.4px),56px)/1.1 var(--qp-pixel);letter-spacing:0;text-wrap:balance;text-shadow:3px 3px 0 #6b2200,4px 4px 0 #000}
.qp-h1__line{display:block}
.qp-sub{margin-top:12px;color:var(--qp-ink);font:400 clamp(20px,1.45vw,25px)/1.4 var(--qp-body)}
@media(max-width:1180px){
 .qp-top__plate{position:static;transform:none;width:auto;border-width:2px 0 0;border-radius:0;box-shadow:none;background:var(--qp-black)}
}

/* ---------------------------------------------------------------- the stage: the call, then the wall, each full width */
.qp-stage{display:grid;gap:16px;align-items:start}

/* ---------------------------------------------------------------- the call into the QUIT FACTORY (comp apply-cta-v5)
   The riveted bay with a thin lit orange line inside it; the heading and its line on the left, GET MY LINK beside them,
   and the three steps under both, each on its own riveted bay. Sizes are the comp's at 1440 (x 1440/1672); the body
   face draws at 72% of its font-size (body.css), so its sizes here are the comp's divided by .72. */
.qp-cta{position:relative;display:grid;grid-template-columns:minmax(0,1fr);gap:16px;padding:16px 12px 12px;
 border:solid transparent;border-width:16px 16px;border-image:url(/runtime/quit/deck-art/bay.webp) 44 50 fill/16px 16px stretch}
.qp-cta::before{content:"";position:absolute;inset:-2px;border:3px solid var(--qp-orange);border-radius:6px;
 box-shadow:0 0 12px #ff610b8c,inset 0 0 14px #ff610b40;pointer-events:none}
.qp-cta__head{min-width:0;padding:0 4px}
/* The heading's rows sit close, as drawn; its margin is in its own em, so the clear space under the Q's tail (the comp's
   6 px at 1440) grows and shrinks with the heading (tests/go/apply-call.browser.mjs measures it at every width). */
.qp-cta__title{margin-bottom:.11em;color:var(--qp-orange);font:700 min(80px,calc((100vw - 104px) / 6.3))/.8 var(--qp-pixel);letter-spacing:.07em}
.qp-cta__row{display:block}
/* Wrapped lines share the words evenly, so a narrow column never leaves one word alone on a line. */
.qp-cta__line .qp-cta__row,.qp-cta__free,.qp-cta__text{text-wrap:balance}
.qp-cta__line{margin-top:0;color:var(--qp-ink);font:400 22px/1.15 var(--qp-body)}
.qp-cta__line .qp-cta__row+.qp-cta__row{margin-top:4px}
.qp-cta__go{display:flex;flex-direction:column;align-items:stretch;min-width:0}
.qp-cta .qp-cta__key{position:relative;width:100%;min-height:72px;padding:6px 16px 16px;border-image-width:12px 14px 18px;font-size:min(34px,9vw);letter-spacing:.2em;text-indent:.2em}
/* GET MY LINK's four screws, as the comp draws them: the funnel's riveted keys (go-door.css, .qfd-button) at this key's
   size, a dark head in a pale rim in each corner of the face, clear of the bevel, the lip and the words. */
.qp-cta .qp-cta__key::before{content:"";position:absolute;inset:13.5px 13.5px 17px 14.5px;pointer-events:none;--qp-rv:9px;
 --qp-rivet:radial-gradient(circle closest-side,#2a1204 0 40%,#ffc68f 55% 70%,#0000 85%);
 background:var(--qp-rivet) 0 0/var(--qp-rv) var(--qp-rv) no-repeat,var(--qp-rivet) 100% 0/var(--qp-rv) var(--qp-rv) no-repeat,
  var(--qp-rivet) 0 100%/var(--qp-rv) var(--qp-rv) no-repeat,var(--qp-rivet) 100% 100%/var(--qp-rv) var(--qp-rv) no-repeat}
.qp-cta__free{margin:12px 0 0;color:var(--qp-ink);font:400 21px/1.15 var(--qp-body);text-align:center}
.qp-cta__steps{list-style:none;display:grid;grid-template-columns:minmax(0,1fr);gap:10px;margin:0;padding:0}
.qp-cta__step{display:grid;grid-template-columns:44px minmax(0,1fr);grid-template-rows:auto auto;align-content:center;column-gap:14px;row-gap:6px;
 min-height:100px;padding:6px 12px 6px 10px;border:solid transparent;border-width:13px 14px;border-image:url(/runtime/quit/deck-art/bay.webp) 44 50 fill/13px 14px stretch}
.qp-cta__n{grid-row:1/3;align-self:center;justify-self:start;color:var(--qp-orange);font:700 68px/.8 var(--qp-pixel)}
.qp-cta__label{align-self:end;color:var(--qp-green);font:700 28px/.8 var(--qp-display);letter-spacing:.06em}
.qp-cta__text{align-self:start;color:var(--qp-ink);font:400 21px/1.1 var(--qp-body)}
.qp-cta .qp-invite{text-align:center}
@media(min-width:900px){
 .qp-cta{grid-template-columns:minmax(0,1fr) 42%;grid-template-areas:"head go" "steps steps";column-gap:24px;row-gap:13px;padding:7px 18px 14px;
  border-width:18px 20px;border-image-width:18px 20px}
 .qp-cta__head{grid-area:head;padding:0 0 0 22px}
 .qp-cta__title{font-size:min(90px,6.25vw);line-height:.77;letter-spacing:.08em}
 .qp-cta__line{font-size:25px;line-height:.93}
 .qp-cta__line .qp-cta__row+.qp-cta__row{margin-top:0}
 .qp-cta__go{grid-area:go;align-self:start;margin:34px 11px 0 0}
 .qp-cta .qp-cta__key{min-height:95px;padding:8px 24px 20px;border-image-width:14px 16px 20px;font-size:min(42px,2.92vw)}
 .qp-cta .qp-cta__key::before{inset:15.5px 15.5px 19.5px 16.5px;--qp-rv:13px}
 .qp-cta__free{font-size:25px;line-height:.93}
 /* The three tiles side by side from 900 px. Each tile is sized in the strip's own width (cqi), the comp's sizes at 1440
    and in proportion below, so a label or a word never breaks inside itself as the tiles narrow toward 900 px. */
 .qp-cta__steps{grid-area:steps;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;container-type:inline-size}
 .qp-cta__step{grid-template-columns:clamp(46px,6.1cqi,80px) minmax(0,1fr);column-gap:clamp(12px,1.67cqi,22px);row-gap:3px;min-height:117px;padding:0 6px 0 clamp(14px,1.22cqi,16px)}
 .qp-cta__n{font-size:clamp(64px,8.2cqi,108px)}
 .qp-cta__label{font-size:clamp(24px,2.5cqi,33px)}
 .qp-cta__text{font-size:clamp(18px,1.71cqi,22.5px);line-height:.9}
}

/* The wall. --qp-w is one reel's column: --qp-per to a view, as wide as the wall allows between its two keys and no
   taller than the window, so a reel is seen whole. The wall is the size container: the sums read its width (cqi), and
   the track is exactly --qp-per reels wide, so nothing past them shows. partners.js reads --qp-per for its counter.
   Beyond a phone partners.js sets --qp-fit, the number of whole reels that fill the wall at the height the window
   allows, so the wall stays packed as the comp's is (three, two on a narrow wall, until it has measured), and never so
   many that a reel falls under --qp-wmin, the width at which its SOUND OFF and FULL SCREEN keep one row at the 12 px
   floor (the narrow reel's rule below). */
.qp-wall{position:relative;container-type:inline-size;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;column-gap:8px;min-width:0;padding:26px 0 12px;
 border:solid transparent;border-width:18px 20px;border-image:var(--qp-bay)}
.qp-track{
 --qp-per:var(--qp-fit,3);--qp-g:12px;--qp-gmin:24px;--qp-side:62px;--qp-chrome:390px;--qp-wmin:210px;
 --qp-w:min(calc((100cqi - 2 * var(--qp-side) - (var(--qp-per) - 1) * var(--qp-g)) / var(--qp-per)),calc((100svh - var(--qp-chrome)) * 9 / 16 + 26px));
 display:grid;grid-auto-flow:column;grid-auto-columns:var(--qp-w);gap:var(--qp-g);
 flex:none;width:calc(var(--qp-per) * var(--qp-w) + (var(--qp-per) - 1) * var(--qp-g));margin:0;padding:0;
 list-style:none;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch
}
/* below 860 px of wall (a portrait tablet) two reels to a view are bigger than three */
@container (max-width:859px){.qp-track{--qp-per:var(--qp-fit,2)}}
/* Beyond a phone the reels spread across the whole wall (comp apply-cta-v5), each still a whole 9:16 reel no taller
   than the window: the reel's width comes first, the gaps (at least --qp-gmin) take the rest of the wall. */
@media(min-width:768px){
 .qp-track{--qp-wmax:calc((100cqi - 2 * var(--qp-side) - (var(--qp-per) - 1) * var(--qp-gmin)) / var(--qp-per));
  --qp-w:min(var(--qp-wmax),max(var(--qp-wmin),calc((100svh - var(--qp-chrome)) * 9 / 16 + 26px)));
  --qp-g:max(var(--qp-gmin),calc((100cqi - 2 * var(--qp-side) - var(--qp-per) * var(--qp-w)) / (var(--qp-per) - 1)))}
}
.qp-track::-webkit-scrollbar{display:none}
.qp-track:focus-visible{outline-offset:-3px}

.qp-reel{position:relative;display:flex;flex-direction:column;min-width:0;scroll-snap-align:start;container:qp-reel/inline-size;
 border:solid transparent;border-width:13px 13px 10px;border-image:url(/runtime/quit/deck-art/bay.webp) 44 50 fill/13px 13px 10px stretch}
.qp-reel__screen{position:relative;container-type:inline-size;aspect-ratio:9/16;overflow:hidden;background:#000;border:2px solid #0b120e;border-radius:3px}
.qp-reel__screen video{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;background:#000}
/* the whole screen plays and pauses; its badge shows only when the reel waits for a press */
.qp-reel__play{position:absolute;inset:0;z-index:1;display:grid;place-items:center;width:100%;height:100%;margin:0;padding:0;border:0;background:transparent;cursor:pointer;-webkit-tap-highlight-color:transparent}
.qp-reel__play span{visibility:hidden;min-width:96px;padding:12px 18px 13px;border:2px solid var(--qp-green);background:#030805d9;color:var(--qp-green);font:700 18px/1 var(--qp-display);letter-spacing:.04em}
.qp-reel[data-state="wait"] .qp-reel__play span,.qp-reel[data-state="paused"] .qp-reel__play span{visibility:visible}
.qp-reel__play:focus-visible{outline-offset:-5px}
.qp-reel__ctl{position:absolute;z-index:2;top:6px;left:6px;right:6px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px;pointer-events:none}
.qp-mini{pointer-events:auto;display:inline-flex;align-items:center;justify-content:center;min-height:44px;margin:0;padding:3px 12px 5px;
 border:0 solid transparent;border-radius:0;border-image:url(/runtime/quit/deck-art/key-dark.webp) 40 46 50 fill/8px 9px 10px stretch;background:none;
 color:var(--qp-green);font:700 14px/1 var(--qp-display);letter-spacing:.02em;white-space:nowrap;cursor:pointer;touch-action:manipulation}
.qp-mini[aria-pressed="true"]{border-image-source:url(/runtime/quit/deck-art/key-green.webp);border-image-slice:22 24 34 fill;color:#03200f}
/* A narrow reel (a picture up to 240 px wide) keeps SOUND OFF and FULL SCREEN on one row along the picture's top edge,
   clear of the face: the labels at the 12 px floor, their words inside the key's green frame (9 px in). One row needs
   177 px inside the picture's frame, which the wall's floor (--qp-wmin, 210 px a reel) leaves at every width from
   320 px. */
@container (max-width:240px){.qp-reel__ctl{gap:6px}.qp-reel__ctl .qp-mini{padding-inline:9px;font-size:12px;letter-spacing:0}}
.qp-reel__fail{position:absolute;z-index:2;left:8px;right:8px;bottom:12px;padding:10px 12px;border:2px solid var(--qp-red);background:#030805e6;color:var(--qp-ink);
 font:700 13px/1.25 var(--qp-display);letter-spacing:.02em;text-align:center}
/* every reel in a row is as tall as the tallest: the title takes the difference, so the keys line up along the wall */
.qp-reel__foot{flex:1 0 auto;display:grid;grid-template-rows:1fr;gap:8px;padding:10px 0 0}
.qp-reel__title{display:flex;align-items:center;min-height:52px;padding:3px 10px;background:var(--qp-black);border:1px solid #1d2620;color:var(--qp-ink);
 font:600 14px/1.15 var(--qp-count);letter-spacing:0}
/* the rotation toggle: a lit key with a check while the reel is in, a dark one when skipped */
.qp-keep{display:inline-flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:46px;margin:0;padding:4px 12px 7px;
 border:0 solid transparent;border-radius:0;border-image:url(/runtime/quit/deck-art/key-dark.webp) 40 46 50 fill/9px 10px 11px stretch;background:none;
 color:var(--qp-green);font:700 12px/1.1 var(--qp-display);letter-spacing:.02em;text-align:center;cursor:pointer;touch-action:manipulation;transition:transform .12s ease-out,filter .12s linear}
.qp-keep[aria-pressed="true"]::before{content:"";flex:none;width:14px;height:8px;margin-top:-4px;border-left:3px solid currentColor;border-bottom:3px solid currentColor;transform:rotate(-45deg)}
.qp-keep[aria-pressed="false"]{color:var(--qp-dim);filter:grayscale(1) brightness(.75)}
.qp-keep:active{transform:translateY(2px)}
.qp-keep:disabled{cursor:default}
.qp-only{display:flex;align-items:center;justify-content:center;min-height:46px;padding:4px 10px;border:2px dashed #3b463e;color:var(--qp-dim);
 font:700 12px/1.25 var(--qp-display);letter-spacing:.02em;text-align:center}
/* DOWNLOAD on every reel (design A, the owner's approval): the site's orange key, full width under the rotation key; it
   saves the full-quality master (the CDN sends masters as attachments, runtime/edge/package.mjs) */
.qp-dl{display:flex;align-items:center;justify-content:center;width:100%;min-height:46px;padding:4px 12px 9px;border:0 solid transparent;
 border-image:url(/runtime/quit/deck-art/key-orange.webp) 22 24 34 fill/8px 9px 12px stretch;color:#1d0800;font:700 13px/1 var(--qp-display);
 letter-spacing:.04em;text-decoration:none;touch-action:manipulation}
.qp-dl[hidden]{display:none}
.qp-dl:active{border-image-source:url(/runtime/quit/deck-art/key-orange-down.webp);transform:translateY(2px)}
.qp-dl:focus-visible{outline:3px solid var(--qp-focus);outline-offset:3px}

/* the wall's counter, on a tab over its top edge, and the two keys at its sides */
.qp-count{margin:0;color:var(--qp-green);font:600 16px/26px var(--qp-count);letter-spacing:.03em;white-space:nowrap}
.qp-count--wide{position:absolute;z-index:3;top:-17px;left:50%;translate:-50% 0;padding:4px 16px 3px;font-size:22px;background:#040a07;border:2px solid #2d3a31;box-shadow:0 2px 0 #000}
.qp-step-key{flex:none;display:inline-flex;align-items:center;justify-content:center;
 width:54px;min-height:72px;margin:0;padding:3px 0 6px;border:0 solid transparent;border-radius:0;
 border-image:url(/runtime/quit/deck-art/key-dark.webp) 40 46 50 fill/9px 10px 11px stretch;background:none;color:var(--qp-green);
 font:700 12px/1 var(--qp-display);letter-spacing:0;cursor:pointer;touch-action:manipulation}
.qp-step-key:disabled{color:#5a685d;cursor:default;filter:grayscale(1) brightness(.75)}
.qp-step-key:active:not(:disabled){transform:translateY(2px)}
.qp-dots-row{display:none;flex-basis:100%;align-items:center;justify-content:center;gap:16px;min-height:34px;margin:10px 0 0;padding:0 12px}
.qp-dots{display:flex;align-items:center;gap:8px}
.qp-dots i{display:block;width:9px;height:9px;border-radius:50%;background:#2c3830}
.qp-dots i[data-on]{background:var(--qp-green);box-shadow:0 0 7px #25dc71aa}

/* the reel in full screen where the browser has no full screen for a video: a fixed theater outside the wall */
.qp-theater{position:fixed;inset:0;z-index:2000;display:grid;place-items:center;background:#000}
.qp-theater video{width:100%;height:100%;object-fit:contain;background:#000}
.qp-theater .qp-mini{position:absolute;top:max(12px,env(safe-area-inset-top));right:12px}

/* ---------------------------------------------------------------- shared: the invite, labels, the calculator's field, the keys */
.qp-invite{margin:0 0 10px;padding:8px 14px;border:2px solid #1f7a45;background:#04100a;color:var(--qp-green);font:700 14px/1.2 var(--qp-display);letter-spacing:.03em;overflow-wrap:anywhere}
.qp-invite[hidden]{display:none}
.qp-invite b{font-weight:700;color:var(--qp-ink)}
.qp-label{display:block;margin:0 0 7px;color:var(--qp-green);font:700 14px/1.1 var(--qp-display);letter-spacing:.03em}
.qp-input{display:flex;align-items:center;min-width:0;min-height:54px;border:2px solid #46524a;background:var(--qp-screen);box-shadow:inset 0 2px 7px #000c}
.qp-input:focus-within{border-color:var(--qp-green);outline:3px solid var(--qp-focus);outline-offset:2px}
.qp-input:has(input[aria-invalid="true"]){border-color:var(--qp-red)}
.qp-input input{flex:1;min-width:0;width:100%;height:50px;margin:0;padding:0 14px;border:0;border-radius:0;background:transparent;box-shadow:none;
 color:var(--qp-ink);font:400 26px/1 var(--qp-body);outline:none;-webkit-appearance:none;appearance:none}
.qp-input input::placeholder{color:#6d786e;opacity:1}

/* the keys */
.qp-key{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;margin:0;padding:4px 18px 12px;border:0 solid transparent;border-radius:0;
 background:none;box-shadow:none;text-align:center;text-decoration:none;text-shadow:none;font:700 15px/1.1 var(--qp-display);letter-spacing:.04em;cursor:pointer;
 touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:transform .12s ease-out,filter .12s linear}
.qp-key--orange{border-image:url(/runtime/quit/deck-art/key-orange.webp) 22 24 34 fill/8px 9px 12px stretch;color:#1d0800}
.qp-key--green{border-image:url(/runtime/quit/deck-art/key-green.webp) 22 24 34 fill/8px 9px 12px stretch;color:#03200f}
.qp-key--dark{padding:4px 16px 6px;border-image:url(/runtime/quit/deck-art/key-dark.webp) 40 46 50 fill/9px 10px 11px stretch;color:var(--qp-green)}
.qp-key--big{width:100%;min-height:72px;margin-top:14px;padding:6px 20px 18px;border-image-width:12px 14px 18px;font-size:clamp(22px,2vw,30px);letter-spacing:.04em;overflow-wrap:anywhere}
.qp-key--big.qp-key--long{font-size:clamp(15px,1.25vw,19px);line-height:1.2}
.qp-key--orange:active:not(:disabled):not([aria-disabled="true"]){border-image-source:url(/runtime/quit/deck-art/key-orange-down.webp);transform:translateY(2px)}
.qp-key--green:active:not(:disabled):not([aria-disabled="true"]){border-image-source:url(/runtime/quit/deck-art/key-green-down.webp);transform:translateY(2px)}
.qp-key--dark:active{transform:translateY(2px)}
.qp-key:disabled,.qp-key[aria-disabled="true"]{cursor:not-allowed;filter:saturate(.35) brightness(.7)}
.qp-key[aria-busy="true"]{cursor:progress}
@media(hover:hover){.qp-key:hover:not(:disabled):not([aria-disabled="true"]){transform:translateY(-1px);filter:brightness(1.08)}}

.qp-small{margin:12px 0 0;color:var(--qp-green);font:400 18px/1.35 var(--qp-body)}
.qp-small a,.qp-legal a{color:inherit;text-underline-offset:3px}

/* ---------------------------------------------------------------- under the stage */
.qp-facts{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:18px 0 0;padding:8px 6px;
 border:solid transparent;border-width:16px 18px;border-image:url(/runtime/quit/deck-art/bay.webp) 44 50 fill/16px 18px stretch}
.qp-facts li{display:flex;align-items:center;justify-content:center;min-height:46px;padding:4px 16px;color:var(--qp-green);font:400 22px/1.25 var(--qp-body);
 letter-spacing:.04em;text-align:center}
.qp-facts li+li{border-left:2px solid #25dc7159}
.qp-faq{display:grid;gap:8px;max-width:1000px;margin:26px auto 0}
.qp-q{border:2px solid #29332b;background:var(--qp-well)}
.qp-q summary{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:54px;padding:8px 16px;color:var(--qp-orange);
 font:600 22px/1.3 var(--qp-body);cursor:pointer;list-style:none}
.qp-q summary::-webkit-details-marker{display:none}
.qp-q summary::after{content:"+";flex:none;color:var(--qp-green);font:700 20px/1 var(--qp-display)}
.qp-q[open] summary::after{content:"-"}
.qp-q summary:focus-visible{outline-offset:-3px}
@media(hover:hover){.qp-q summary:hover{color:#ff8a45}}
.qp-q p{padding:0 16px 14px;color:var(--qp-ink);font:400 21px/1.45 var(--qp-body)}
.qp-kit{display:flex;flex-wrap:wrap;gap:10px}
.qp-kit .qp-key{min-height:48px}
.qp-legal{max-width:1000px;margin:22px auto 0;color:var(--qp-dim);font:400 18px/1.4 var(--qp-body);text-align:center}

/* the phone's pinned key, shown by partners.js until the call is in view; it opens the office */
.qp-pin{position:fixed;z-index:90;left:0;right:0;bottom:0;padding:6px 8px calc(6px + env(safe-area-inset-bottom));
 border:solid transparent;border-width:12px 14px;border-image:url(/runtime/quit/deck-art/bay.webp) 44 50 fill/12px 14px stretch}
.qp-pin .qp-key{margin:0;min-height:64px}

/* ---------------------------------------------------------------- phones: one whole reel, swiped. The reel and its keys
   fit the window between the header and the pinned key's room (--qp-chrome), down to the floor: a window under about
   650 px keeps a reel --qp-wmin (210 px) wide, so its picture stays readable and its SOUND OFF and FULL SCREEN keep one
   row. The pinned key steps aside while any of the wall is in view (partners.js), so it never covers a reel, its keys,
   the dots or the counter; the whole wall, its dots and counter included, fits under the header in a 568 px window. */
@media(max-width:767px){
 .qp{padding:10px 12px 112px}
 .qp-top{border-width:10px 12px;border-image-width:10px 12px;margin-bottom:12px}
 .qp-top__art img{aspect-ratio:1311/540;object-fit:cover;object-position:96% 50%}
 .qp-top__plate{padding:12px 10px 12px}
 .qp-kicker{font-size:14px;margin-bottom:6px}
 .qp-h1{font-size:min(8vw,36px)}
 .qp-sub{font-size:20px}
 .qp-wall{display:block;margin:0 -12px;padding:0;border:0;border-image:none}
 .qp-track{--qp-per:1;--qp-g:8px;--qp-chrome:320px;--qp-w:min(calc(100cqi - 50px),max(var(--qp-wmin),calc((100svh - var(--qp-chrome)) * 9 / 16 + 26px)));
  width:auto;margin:0;padding:0 calc(100cqi - 12px - var(--qp-w)) 0 12px;scroll-padding-inline:12px 0}
 .qp-step-key,.qp-count--wide{display:none}
 .qp-dots-row{display:flex}
 .qp-reel__title{font-size:14px;min-height:48px}
 .qp-facts{grid-template-columns:1fr;padding:4px 4px}
 .qp-facts li{min-height:44px;font-size:20px}
 .qp-facts li+li{border-left:0;border-top:2px solid #25dc7133}
 .qp-q summary{font-size:20px;padding:8px 12px}
 .qp-q p{padding:0 12px 12px;font-size:20px}
 .qp-key--big{font-size:clamp(17px,5.1vw,22px)}
 .qp-key--big.qp-key--long{font-size:15px}
}
@media(max-width:359px){
 .qp{padding-inline:8px}
 .qp-wall{margin:0 -8px}
}
@media(min-width:768px){.qp-pin{display:none!important}}

@media(prefers-reduced-motion:reduce){
 .qp-track{scroll-behavior:auto}
 .qp-key,.qp-keep{transition:none}
}

/* ---------------------------------------------------------------- the calculator (owner order, 22 Oct 2026) */
.qp-calc{display:grid;gap:18px;margin:18px 0 0;padding:18px 20px 16px;border:solid transparent;border-width:18px 20px;border-image:var(--qp-bay);
 scroll-margin-top:calc(var(--t-header-desktop,70px) + 12px)}
@media(min-width:1024px){.qp-calc{grid-template-columns:minmax(0,45fr) minmax(0,55fr);gap:30px;align-items:start}}
.qp-calc__title{margin:0 0 12px;color:var(--qp-ink);font:700 clamp(26px,2.7vw,42px)/1.08 var(--qp-pixel);letter-spacing:.02em}
.qp-calc__lead{margin:0 0 20px;color:var(--qp-green);font:400 clamp(19px,1.45vw,23px)/1.35 var(--qp-body)}
.qp-calc__keys{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:0 0 18px}
.qp-calc__key{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;min-height:66px;margin:0;padding:6px 6px 12px;
 border:0 solid transparent;border-radius:0;border-image:url(/runtime/quit/deck-art/key-dark.webp) 40 46 50 fill/9px 10px 11px stretch;background:none;
 color:var(--qp-green);cursor:pointer;touch-action:manipulation;transition:transform .12s ease-out}
.qp-calc__key b{font:700 clamp(16px,1.45vw,22px)/1 var(--qp-display);letter-spacing:.02em;white-space:nowrap}
.qp-calc__key small{font:700 11px/1 var(--qp-display);letter-spacing:.03em;white-space:nowrap}
.qp-calc__key[aria-pressed="true"]{border-image:url(/runtime/quit/deck-art/key-orange.webp) 22 24 34 fill/8px 9px 12px stretch;color:#1d0800}
.qp-calc__key:active{transform:translateY(2px)}
.qp-calc__keys--small .qp-calc__key{min-height:54px}
.qp-calc__screen{min-width:0;padding:14px 16px 12px;border:solid transparent;border-width:10px 12px;
 border-image:url(/runtime/quit/deck-art/lcd.webp) 44 56 fill/10px 12px stretch;text-align:center}
.qp-calc__screen--month{margin:0 0 16px}
.qp-calc__label{margin:0 0 6px;color:var(--qp-green);font:700 13px/1.1 var(--qp-display);letter-spacing:.04em;text-align:left}
.qp-calc__big{margin:6px 0 4px;color:var(--qp-green);font:600 clamp(36px,4.2vw,60px)/1 var(--qp-count);letter-spacing:0;text-shadow:0 0 14px #25dc7166}
.qp-calc__usd{margin:0;color:var(--qp-ink);font:400 clamp(19px,1.5vw,24px)/1.2 var(--qp-body)}
.qp-calc__years{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.45fr);gap:8px;margin:0 0 4px}
/* each year screen sizes its number to its own width, so $21,800,000 stays on one line (the readable face's figures are
   .6em wide, half as wide again as the old pixel counter's, so the widths here are two thirds of what they were) */
.qp-calc__years .qp-calc__screen{container-type:inline-size}
.qp-calc__num{margin:10px 0 4px;color:var(--qp-green);font:600 min(37px,13.3cqi)/1 var(--qp-count);letter-spacing:0;text-shadow:0 0 10px #25dc7155;white-space:nowrap}
.qp-calc__screen--top .qp-calc__num{color:var(--qp-orange);font-size:min(54px,13.6cqi);text-shadow:0 0 16px #ff610b99}
.qp-calc__note{margin:10px 0 0}
@media(max-width:767px){
 .qp-calc{padding:12px 6px 10px;border-width:14px 16px;border-image-width:14px 16px}
 .qp-calc__keys{grid-template-columns:repeat(2,minmax(0,1fr))}
 .qp-calc__keys--small{grid-template-columns:repeat(4,minmax(0,1fr))}
 .qp-calc__years{grid-template-columns:1fr}
 .qp-calc__years .qp-calc__screen{display:flex;align-items:center;justify-content:space-between;gap:10px}
 .qp-calc__years .qp-calc__label,.qp-calc__years .qp-calc__num{margin:0}
 .qp-calc__years .qp-calc__num{font-size:min(28px,9.5cqi)}
 .qp-calc__years .qp-calc__screen--top .qp-calc__num{font-size:min(32px,10cqi)}
 .qp-calc .qp-label{font-size:12px;letter-spacing:.03em}
}
/* the 5X TO 100X calculator /go links to: the visitor's own amount at five multiples, across the section's foot */
.qp-calc__own{display:grid;gap:14px;padding-top:16px;border-top:2px solid var(--qp-rule)}
@media(min-width:1024px){.qp-calc__own{grid-column:1/-1;grid-template-columns:minmax(0,45fr) minmax(0,55fr);gap:30px;align-items:end}}
.qp-calc__own-title{margin:0 0 12px;color:var(--qp-orange);font:700 clamp(19px,1.6vw,26px)/1.15 var(--qp-display);letter-spacing:.02em}
.qp-calc__amount b{flex:none;padding:0 14px;color:var(--qp-green);font:700 16px/1 var(--qp-display);letter-spacing:.04em}
.qp-calc__multi{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.qp-calc__multi .qp-calc__screen{container-type:inline-size;padding-inline:10px}
.qp-calc__multi .qp-calc__num{font-size:min(32px,20cqi)}
.qp-calc__multi .qp-calc__screen--top .qp-calc__num{font-size:min(35px,20cqi)}
/* a long figure ($10,400,000) gets the size that keeps it on one line */
.qp-calc__multi .qp-calc__num[data-len="long"]{font-size:min(32px,12.7cqi)}
@media(max-width:767px){
 .qp-calc__multi{grid-template-columns:1fr}
 .qp-calc__multi .qp-calc__screen{display:flex;align-items:center;justify-content:space-between;gap:10px}
 .qp-calc__multi .qp-calc__label,.qp-calc__multi .qp-calc__num{margin:0}
 .qp-calc__multi .qp-calc__num{font-size:min(28px,9.5cqi)}
 .qp-calc__multi .qp-calc__screen--top .qp-calc__num{font-size:min(32px,10cqi)}
}
@media(prefers-reduced-motion:reduce){.qp-calc__key{transition:none}}

/* ---------------------------------------------------------------- phones: the first screen as the approved comp has it */
/* The title without its paragraph (the calculator says it). The wall's reels stay whole 9:16 pictures, never cut (owner,
   S05, and the apply-cta comp's wall, 26 Oct 2026), each with its title and its rotation key on one row. A reel sized
   to a short window (under 290 px inside its frame) gives its title the whole row and puts its two keys side by side
   under it, so every word of the title shows and the foot is no taller. */
@media(max-width:767px){
 /* The owner's automatic-posting line stays on the first screen (23 Oct 2026); the rest of the paragraph waits for
    the calculator. */
 .qp-top .qp-sub{margin-top:8px;font-size:20px;line-height:1.35}
 .qp-top .qp-sub__rest{display:none}
 .qp-reel__foot{grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:6px}
 .qp-reel__title{font-size:13px;min-height:46px;line-height:1.15}
 .qp-reel__foot .qp-keep,.qp-reel__foot .qp-only,.qp-reel__foot .qp-dl{width:auto;min-width:0;padding-inline:10px;font-size:11px}
 .qp-reel__foot .qp-dl{grid-column:1/-1;width:100%;font-size:13px}
 @container qp-reel (max-width:289.98px){
  .qp-reel__title{grid-column:1/-1}
  .qp-reel__foot .qp-keep,.qp-reel__foot .qp-only{gap:6px;padding-inline:8px}
  .qp-reel__foot .qp-dl{grid-column:auto;width:auto;padding-inline:8px;font-size:11px}
 }
}

/* The compensation and content screens use the full page width. */
.qp { max-width: none; }
.qp .qp-creator-network { margin-bottom: 16px; }
.qp #qp-card { scroll-margin-top: calc(var(--c-header-height, 70px) + 12px); }