*{box-sizing:border-box}
/* The display and pixel stacks are the site theme's (coins/quit/ui/theme.json): each face's metric-matched stand-in
   (display.css) sits before the plain monospace, so a line set before Jersey 20 arrives is close to its final width. */
:root{color-scheme:dark;background:#020806;--qfd-pixel:var(--t-font-pixel,"QUIT Pixel","QUIT Pixel Fallback",monospace);--qfd-display:var(--t-font-display,"QUIT Display","QUIT Display Fallback",monospace);--qfd-display-large:var(--t-font-display-large,var(--t-font-display,"QUIT Display Large","QUIT Display Fallback",monospace));--qfd-body:var(--t-font-body,"IBM Plex Mono","QUIT Body Fallback",monospace);--qfd-bg:#020906;--qfd-screen:#00180e;--qfd-green:#00f89a;--qfd-orange:#ff5900;--qfd-metal:#1d2a23;--qfd-white:#f4f2e9;--qfd-muted:#a9b3ab}
html,body{margin:0;min-height:100%;background:radial-gradient(ellipse at 50% 0,#101911 0,#020806 54rem);color:var(--qfd-white)}
body.qfd{font:400 20px/1.22 var(--qfd-body);-webkit-font-smoothing:antialiased}
button,input{font:inherit}
button,a{color:inherit}
[hidden]{display:none!important}
.qfd-skip:not(:focus){position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.qfd-skip:focus{position:fixed;z-index:100;top:8px;left:8px;padding:10px;background:#fff;color:#000}
/* The funnel as the approved comps f1 to f6 draw it (owner order, 25 Oct 2026): one 390 px phone design, the same column
   on every screen. Plates, keys and the frame are the site's own deck plates (runtime/quit/deck-art), laid as 9-slices the
   way /apply and the site header lay them: bay.webp is the riveted gunmetal plate (four screws, a dark well), key-orange,
   key-green and key-dark the arcade keys with their pressed plates, elevator-art/menu.webp the MENU plate. The header's
   $QUIT is the canonical wordmark file. Big titles and figures keep every character: go-door.js steps their size down
   until the line fits its box (fitAll), so a long amount or a wider face never leaves the plate. */
:root{--qfd-green:#01f982;--qfd-orange:var(--t-orange,#ff610b);--qfd-cream:#faf3e3;--qfd-well:#011309;--qfd-col:min(100% - 8px,520px);
 --qfd-bay:url(/runtime/quit/deck-art/bay.webp) 44 50 fill;--qfd-key-orange:url(/runtime/quit/deck-art/key-orange.webp) 22 24 34 fill;
 --qfd-key-green:url(/runtime/quit/deck-art/key-green.webp) 22 24 34 fill;--qfd-key-dark:url(/runtime/quit/deck-art/key-dark.webp) 40 46 50 fill}
html,body{background:#000705}
.qfd-vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
/* The header band, about 48 px: the wordmark, the MENU plate, the speaker key and BUY $QUIT. Each key keeps the comp's
   size and reaches a 44 px touch target through its ::after. */
/* The band's ground is the wordmark plate's own (rgb 6 12 11, as the site header sets it), so the plate sits in it without
   a box; the band runs the full width of the screen. */
.qfd-head{width:var(--qfd-col);min-height:48px;margin:0 auto;padding:4px 9px 0;display:flex;align-items:center;justify-content:space-between;gap:10px;
 background:#060c0b;box-shadow:0 0 0 100vmax #060c0b;clip-path:inset(0 -100vmax)}
.qfd-brand{display:flex;align-items:center;flex:none;min-height:44px;text-decoration:none}
.qfd-brand img{display:block;width:86px;height:auto;aspect-ratio:298/102}
.qfd-nav{display:flex;align-items:center;gap:13px}
.qfd-key{position:relative;box-sizing:border-box;flex:none;display:inline-flex;align-items:center;justify-content:center;height:31px;padding:0 8px 4px;border:0 solid transparent;border-radius:0;background:none;box-shadow:none;color:var(--qfd-green);font:400 15px/1 var(--qfd-display);letter-spacing:.1em;text-decoration:none;text-shadow:none;white-space:nowrap;cursor:pointer}
.qfd-key::after{content:"";position:absolute;inset:-7px 0}
.qfd-key--menu{width:84px;height:31.5px;padding:0}
.qfd-key--menu img{display:block;width:100%;height:100%}
/* The speaker with its mute mark, drawn as the site header's SOUND key draws it (runtime/quit/frames.css): a pixel speaker
   on a 14 x 12 grid in the key's green, on the dark key plate. */
.qfd-key--sound{--qfd-speaker-off:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 12' shape-rendering='crispEdges'%3E%3Cpath d='M1 4h3v4H1zM4 3h1v6H4zM5 2h1v8H5zM6 1h1v10H6zM9 4h1v1H9zM10 5h1v1h-1zM11 6h1v1h-1zM12 7h1v1h-1zM12 4h1v1h-1zM11 5h1v1h-1zM10 6h1v1h-1zM9 7h1v1H9z'/%3E%3C/svg%3E");
 width:35px;height:33px;padding:0 0 2px;border-image:var(--qfd-key-dark)/8px 9px 10px stretch;cursor:default}
.qfd-key--sound::before{content:"";width:21px;height:18px;background:currentColor;-webkit-mask:var(--qfd-speaker-off) center/contain no-repeat;mask:var(--qfd-speaker-off) center/contain no-repeat}
.qfd-key--sound::after{content:none}
.qfd-key--buy{width:109px;height:34px;padding:0 9px 7px;border-image:var(--qfd-key-orange)/8px 9px 12px stretch;color:#1d0800;font-size:15px;letter-spacing:.1em}
.qfd-key--buy:active{border-image-source:url(/runtime/quit/deck-art/key-orange-down.webp);transform:translateY(2px)}
.qfd-key:focus-visible,.qfd-brand:focus-visible{outline:3px solid #fff0ad;outline-offset:2px}
.qfd-main{width:var(--qfd-col);margin:3px auto 0;padding:0 0 24px}
/* Every plate: the riveted bay plate as a 9-slice, its screws in the corners. The outer card takes it at 18 x 20 px. */
.qfd-metal{position:relative;border:solid transparent;border-width:18px 20px;border-image:var(--qfd-bay)/18px 20px stretch;background:none;box-shadow:none}
.qfd-landing{display:grid;grid-template-columns:minmax(0,1fr)}
/* f1: the live strip, one line in a short plate. It wraps by default, so it never runs past the screen; go-door.js
   steps its size down until its three items share one line (fitAll), and leaves it wrapped at its own size when they
   cannot. */
.qfd-live{min-height:37px;margin:0;padding:0 8px;border-width:13px 16px;border-image-width:13px 16px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:2px 10px;color:var(--qfd-green);font:400 14px/11px var(--qfd-display);letter-spacing:.07em;text-shadow:0 0 6px #01f98255}
/* Until go-door.js fits the strip in Jersey 20 (it sets data-fit then, and not while the face is still loading), the
   strip keeps its one line: set in a stand-in face before Jersey 20 lands it could wrap to two lines on a narrow phone
   and then drop back to one when the face arrives, moving everything under it (the funnel audit's 0.205 layout shift,
   27 Oct 2026). From that fit on it wraps by default, as above. */
.qfd-live:not([data-fit]){flex-wrap:nowrap}
.qfd-live:not([data-fit]) span{white-space:nowrap}
.qfd-live span{white-space:nowrap}
.qfd-live b{color:inherit;font-weight:inherit}
/* f1: the hero, a near square photo window in the plate, the heading over the desk. The photo sits 16% in, so the desk
   badge stays whole behind the heading's last line (27 Oct 2026). */
.qfd-hero{margin:5px 0 0;padding:0;border-width:13px 16px 9px;border-image-width:13px 16px 9px;overflow:hidden;container-type:inline-size}
.qfd-hero img{width:100%;height:auto;aspect-ratio:350/343;display:block;object-fit:cover;object-position:16% 50%;filter:saturate(.95)}
.qfd-hero figcaption{position:absolute;inset:0;display:flex;align-items:flex-end;padding:0 8px 4px 9px;background:linear-gradient(180deg,transparent 52%,#0000 60%,#0009 100%)}
/* The heading keeps the comp's share of the photo window at every width (46 px on a 350 px window). */
.qfd-hero h1{flex:1 1 auto;min-width:0;margin:0;color:var(--qfd-orange);font:400 46px/38px var(--qfd-pixel);font-size:13.1cqw;line-height:10.85cqw;letter-spacing:0;white-space:nowrap;text-shadow:3px 4px 0 #3a1400}
/* INVITED BY on a creator's link (the owner's approval, 27 Oct 2026: the creator's handle in capitals, as the office
   shows it): the live strip's short plate, laid over the photo just above the heading, so it moves nothing on the page
   when the creator lookup answers. The heading is four lines of 10.85cqw over a 4 px pad, its capitals a little taller than their lines. */
.qfd-invited{position:absolute;z-index:1;left:9px;bottom:calc(43.4cqw + 20px);max-width:calc(100% - 18px);margin:0;padding:0 8px;border-width:13px 16px;border-image-width:13px 16px;color:var(--qfd-green);font:400 14px/11px var(--qfd-display);letter-spacing:.07em;text-shadow:0 0 6px #01f98255;white-space:nowrap}
.qfd-invited b{color:inherit;font-weight:inherit}
.qfd-deck{margin:7px 4px 0 16px;color:#eeeee9;font:400 16px/1.1 var(--qfd-body);letter-spacing:0}
/* f1: WATCH, a plate holding the play key and its caption on one line. */
.qfd-watch{min-height:76px;margin:6px 0 0;padding:0 4px 0 0;border-width:13px 16px;border-image-width:13px 16px;display:flex;align-items:center;gap:12px;color:var(--qfd-green);font:400 22px/1.05 var(--qfd-display);letter-spacing:.05em;text-align:left;text-decoration:none;text-shadow:0 0 8px #01f98266}
.qfd-watch>span:not(.qfd-play){flex:1 1 auto;min-width:0}
.qfd-play{flex:none;width:60px;height:50px;margin:0 0 0 -4px;display:grid;place-items:center;padding:0 0 2px;border:0 solid transparent;border-image:var(--qfd-key-dark)/8px 9px 10px stretch}
.qfd-play span{width:34px;height:34px;display:grid;place-items:center;border-radius:50%;background:var(--qfd-green);box-shadow:0 0 8px #01f98288}
.qfd-play span::before{content:"";width:0;height:0;margin-left:4px;border-top:8px solid transparent;border-bottom:8px solid transparent;border-left:13px solid #03160c}
/* The arcade keys. Orange BUY, CONTINUE, PAY and GET MY LINK; green BUY MORE; four rivets in the face, and the words
   kept clear of them by the side padding. */
.qfd-button{position:relative;width:100%;min-height:58px;display:flex;align-items:center;justify-content:center;padding:4px 20px 12px;border:0 solid transparent;border-radius:0;border-image:var(--qfd-key-orange)/8px 9px 12px stretch;background:none;box-shadow:none;color:#140700;font:400 37px/1 var(--qfd-display-large);letter-spacing:.1em;text-align:center;text-decoration:none;text-shadow:none;cursor:pointer}
.qfd-button::before{content:"";position:absolute;inset:6px 8px 14px;pointer-events:none;
 --qfd-rivet:radial-gradient(circle,var(--qfd-rivet-in,#2a1204) 0 1.6px,var(--qfd-rivet-rim,#ffc68f) 2.2px 2.8px,#0000 3.4px);
 background:var(--qfd-rivet) 0 0/8px 8px no-repeat,var(--qfd-rivet) 100% 0/8px 8px no-repeat,var(--qfd-rivet) 0 100%/8px 8px no-repeat,var(--qfd-rivet) 100% 100%/8px 8px no-repeat}
.qfd-send::before,.qfd-address .qfd-button::before,.qfd-button--retry::before{content:none}
/* Each key's words stay on one line; go-door.js fits a long one to its key (fitAll). */
:is([data-stage="1"],[data-stage="2"],[data-stage="4"],[data-stage="5"],[data-stage="6"]) .qfd-button{white-space:nowrap}
.qfd-button:disabled{opacity:.52;cursor:default}
.qfd-button:active:not(:disabled){border-image-source:url(/runtime/quit/deck-art/key-orange-down.webp);transform:translateY(2px)}
.qfd-button:focus-visible{outline:3px solid #fff0ad;outline-offset:2px}
.qfd-button--orange:hover:not(:disabled){filter:brightness(1.08)}
.qfd-button--green{min-height:52px;border-image-source:url(/runtime/quit/deck-art/key-green.webp);color:#03200f;--qfd-rivet-in:#013a1d;--qfd-rivet-rim:#c9ffe5}
.qfd-button--green:active:not(:disabled){border-image-source:url(/runtime/quit/deck-art/key-green-down.webp)}
.qfd-landing .qfd-button{min-height:60px;margin-top:3px}
.qfd-underbuy{margin:11px 0 0;text-align:center;color:#ecece8;font:400 13.5px/1.2 var(--qfd-body)}
.qfd-via{margin:12px 0 0;text-align:center;color:#6d766f;font:400 13px/1.2 var(--qfd-body)}
/* A creator's link (door-kind.js marks the page qfd-creator-door before its first frame) keeps the via line's room from
   the start: the line is there, empty and unseen, until the lookup fills it, so the plates under it never move (30 Oct
   2026: they moved 27 px when the lookup answered). The house funnel, /go/quit, keeps its page as it is. */
.qfd-creator-door .qfd-via[hidden]{display:block!important;visibility:hidden;min-height:1.2em}
/* f2 to f6: the card. */
.qfd-panel{margin:0;padding:0 0 6px}
/* The step meter: a badge on each tab. Done: a green disc with a dark check, and the number beside the label. Current:
   an orange ring with the number. Ahead: a grey ring. */
.qfd-steps{position:relative;z-index:1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;margin:0;padding:0 0 4px;border-bottom:3px solid #1b2620}
.qfd-steps>span{min-width:0;min-height:60px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:4px 5px 5px;border:2px solid #3b4640;background:#010b06;color:#83847e;font:400 15px/1 var(--qfd-display);letter-spacing:.08em;text-align:center}
.qfd-steps b{min-width:0;max-width:100%;font-weight:inherit;white-space:nowrap}
.qfd-step-n{flex:none;width:29px;height:29px;display:grid;place-items:center;border:3px solid currentColor;border-radius:50%;font:400 19px/1 var(--qfd-display);font-style:normal;letter-spacing:0}
.qfd-step-k{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.qfd-steps>span:not(.is-done) .qfd-step-done{display:none}
.qfd-steps>span.is-done{border-color:#127a4a;color:var(--qfd-green)}
.qfd-steps>span.is-done .qfd-step-n{border-color:var(--qfd-green);background:var(--qfd-green);font-size:0}
.qfd-steps>span.is-done .qfd-step-n::before{content:"";width:11px;height:6px;margin-top:-3px;border-left:4px solid #021a0d;border-bottom:4px solid #021a0d;transform:rotate(-45deg)}
.qfd-steps>span.is-done .qfd-step-k{position:static;width:auto;height:auto;overflow:visible;clip-path:none;margin-right:.3em;font-size:1.4em;line-height:15px;letter-spacing:0}
.qfd-steps b{line-height:15px}
.qfd-steps>span[role="button"]{cursor:pointer;-webkit-tap-highlight-color:transparent}
.qfd-steps>span[role="button"]:focus-visible{outline:2px solid var(--qfd-green);outline-offset:2px}
.qfd-steps>span.is-current{border-color:var(--qfd-orange);background:#0c0602;box-shadow:inset 0 0 12px #ff610b33;color:var(--qfd-orange)}
[data-stage="2"] .qfd-steps>span{min-height:37px;flex-direction:row;gap:10px;font-size:13px}
[data-stage="2"] .qfd-step-n{width:25px;height:25px;font-size:17px}
[data-stage="6"] .qfd-steps>span{min-height:50px;gap:1px;padding:1px 5px 2px}
.qfd-title{margin:9px 0 8px;padding-left:4px;color:var(--qfd-orange);font:400 54px/44px var(--qfd-pixel);letter-spacing:0;text-align:left;white-space:nowrap}
[data-stage="5"].qfd-panel{padding-bottom:30px}
[data-stage="2"] .qfd-title{margin:6px 0 7px;font-size:40px;line-height:32px}
[data-stage="4"] .qfd-title,[data-stage="5"] .qfd-title{margin:8px 0 10px;font-size:60px;line-height:46px}
/* f2: the presets. Each row is a price key and a dark well with the rank and its perk; the chosen one is outlined. */
.qfd-presets{display:grid;gap:6px}
.qfd-preset{position:relative;min-height:48px;display:grid;grid-template-columns:145px minmax(0,1fr);grid-template-rows:auto auto;align-items:center;column-gap:11px;padding:0 10px 0 0;border:2px solid #24332b;border-radius:0;background:#010d07;color:var(--qfd-green);text-align:left;cursor:pointer;box-shadow:none}
.qfd-price-box{grid-column:1;grid-row:1/3;align-self:stretch;min-width:0;min-height:48px;margin:-2px 0 -2px -2px;display:flex;align-items:center;justify-content:center;gap:.29em;padding:2px 10px 6px;font-size:31px;border:0 solid transparent;border-image:var(--qfd-key-dark)/8px 9px 10px stretch;background:none}
.qfd-preset .qfd-price-box strong{color:var(--qfd-green);font:400 1em/1 var(--qfd-display-large);letter-spacing:.02em;text-shadow:0 0 9px #01f98266;white-space:nowrap}
.qfd-preset [data-rank]{grid-column:2;grid-row:1;align-self:end;font:400 17px/1.1 var(--qfd-display);letter-spacing:.09em}
.qfd-preset [data-perk]{grid-column:2;grid-row:2;align-self:start;margin-top:3px;color:#f2f1ea;font:400 14px/1.15 var(--qfd-body)}
.qfd-preset .qfd-tag{flex:none;width:min-content;margin:0;padding:3px 5px;border:2px solid #0a3d24;background:#04140c;color:var(--qfd-green);font:400 max(11px,.484em)/.95 var(--qfd-display);letter-spacing:.04em;text-align:center}
.qfd-preset.is-selected{min-height:59px;border-color:var(--qfd-green);background:#010d07;box-shadow:0 0 12px #01f98255,inset 0 0 0 1px #01f98255}
.qfd-preset.is-selected .qfd-price-box{border-image-source:url(/runtime/quit/deck-art/key-green.webp);border-image-slice:22 24 34 fill;border-image-width:8px 9px 12px}
.qfd-preset.is-selected .qfd-price-box strong{color:#021a0d;text-shadow:none}
.qfd-preset:focus-visible{outline:3px solid #fff0ad;outline-offset:2px}
.qfd-small-link{display:inline-block;margin:13px 0;color:#9ab9a7;font-size:22px;text-decoration:underline;text-underline-offset:4px;background:none;border:0;cursor:pointer}
/* The buyer's own amount (the owner, 27 Oct 2026): always open under the presets, which only recommend; typing one
   unpicks them. Under $10 the field's border and its one line turn orange and CONTINUE waits. */
.qfd-other{display:flex;align-items:center;gap:8px;margin:8px 0 4px;padding:8px 12px;border:2px solid #315244;background:#00150c;color:var(--qfd-green);font:400 16px/1.2 var(--qfd-display)}
.qfd-other:focus-within{border-color:var(--qfd-green)}
.qfd-other:has([aria-invalid="true"]){border-color:var(--qfd-orange)}
.qfd-other input{flex:1;min-width:0;border:0;background:transparent;color:#fff;font:400 22px/1 var(--qfd-body);outline:0}
.qfd-other-floor{margin:0 0 4px 3px;color:var(--qfd-orange);font:400 16px/1.2 var(--qfd-body)}
/* The inner plates: YOU PAY, YOU GET ABOUT, IF $QUIT GETS THERE, YOUR WALLET, the amount, YOUR PERKS, NEXT and EARN. */
.qfd-screen,.qfd-perks,.qfd-next,.qfd-link-screen{position:relative;margin:4px -3px;padding:4px 10px 6px;border:solid transparent;border-width:13px 14px;border-image:var(--qfd-bay)/13px 14px stretch;background:none;box-shadow:none}
.qfd-screen>strong,.qfd-perks>strong,.qfd-next>strong,.qfd-link-screen>strong{display:block;color:var(--qfd-green);font:400 17px/20px var(--qfd-display);letter-spacing:.1em;white-space:nowrap;text-shadow:0 0 6px #01f98244}
.qfd-result{text-align:left}
.qfd-result output,.qfd-done-result output{display:block;margin:4px 0 0;color:var(--qfd-green);font:400 38px/36px var(--qfd-display-large);letter-spacing:.01em;white-space:nowrap;text-shadow:0 0 10px #01f98266}
/* The rank: an outlined chamfered tag in the estimate (f2); on the buy (f5) a lit plate holding the rank and its perk. */
.qfd-rank-pill{position:relative;isolation:isolate;width:fit-content;max-width:100%;min-width:165px;min-height:23px;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:2px 16px;margin:6px auto 0;padding:3px 18px;border:0;border-radius:0;background:var(--qfd-green);color:var(--qfd-green);font:400 15px/1.05 var(--qfd-display);letter-spacing:.1em;text-align:center;
 clip-path:polygon(6px 0,calc(100% - 6px) 0,100% 6px,100% calc(100% - 6px),calc(100% - 6px) 100%,6px 100%,0 calc(100% - 6px),0 6px)}
.qfd-rank-pill::before{content:"";position:absolute;inset:2px;z-index:-1;background:var(--qfd-well);clip-path:polygon(5px 0,calc(100% - 5px) 0,100% 5px,100% calc(100% - 5px),calc(100% - 5px) 100%,5px 100%,0 calc(100% - 5px),0 5px)}
/* The perk's parentheses and comma fall further below the line than its capitals rise, so the lit plate keeps 2 px more
   room under its words than over them, and they stay on its lit face (inset 5 px) in every face. */
.qfd-rank-pill--lit{width:auto;min-height:45px;margin:11px 6px 0;padding:5px 14px 7px;row-gap:0;color:#032212;font-size:17px;line-height:1;letter-spacing:.04em}
.qfd-rank-pill--lit::before{inset:3px;background:#0b6d3d}
.qfd-rank-pill--lit::after{content:"";position:absolute;inset:5px;z-index:-1;background:#01f57c;clip-path:polygon(4px 0,calc(100% - 4px) 0,100% 4px,100% calc(100% - 4px),calc(100% - 4px) 100%,4px 100%,0 calc(100% - 4px),0 4px)}
.qfd-rank-pill span{min-width:0;max-width:100%;white-space:nowrap}
.qfd-rank-pill span:empty{display:none}
.qfd-future{padding:2px 10px 4px}
.qfd-future>strong{margin-bottom:2px;line-height:17px}
.qfd-future p{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin:0;color:#fff;font:400 20px/22px var(--qfd-body)}
.qfd-future p b{color:var(--qfd-green);font:400 23px/1 var(--qfd-display-large);letter-spacing:.02em}
.qfd-future small{display:block;margin-top:5px;padding-top:4px;border-top:2px solid #8d938a;color:#dcdcd6;font:400 14px/1.1 var(--qfd-body);white-space:normal}
[data-stage="2"] [data-continue]{min-height:51px;margin-top:2px}
.qfd-footnote{margin:8px 0 0;text-align:center;color:#e3e3dd;font:400 13.4px/1.2 var(--qfd-body);white-space:normal}
.qfd-order-pill{width:max-content;max-width:100%;margin:0 auto 12px;padding:8px 15px;border:3px solid #008b53;border-radius:6px;color:var(--qfd-green);font:700 clamp(12px,2.1vw,18px)/1.2 var(--qfd-display);text-align:center}
.qfd-tabs{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0 0 18px}
.qfd-tabs button{min-height:58px;border:3px solid #174b36;background:#00140b;color:var(--qfd-green);font:700 20px/1 var(--qfd-display);cursor:pointer}
.qfd-tabs button[aria-selected="true"]{border-color:var(--qfd-green);box-shadow:0 0 9px #00d88270}
.qfd-contact-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:stretch;gap:10px;margin:10px 0}
.qfd-contact{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px;margin:10px 0;padding:10px 14px;border:3px solid #49554a;background:#000b07;color:var(--qfd-muted)}
.qfd-contact span{grid-column:1/-1;color:var(--qfd-green);font:700 14px/1 var(--qfd-display)}
.qfd-contact input{width:100%;min-width:0;border:0;background:transparent;color:var(--qfd-white);font:400 25px/1 var(--qfd-body);outline:0}
.qfd-send{width:auto;min-width:145px;min-height:70px;padding:8px 13px;font-size:clamp(12px,2vw,18px)}
.qfd-code-wrap{margin:20px 0}
.qfd-code-wrap h2{margin:0 0 10px;color:var(--qfd-green);font:700 clamp(16px,2.5vw,23px)/1.2 var(--qfd-display)}
.qfd-code{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
.qfd-code input{width:100%;height:80px;min-width:0;border:3px solid #08794a;background:#00150c;color:#fff;font:700 35px/1 var(--qfd-display);text-align:center;outline:0}
.qfd-code input:focus{border-color:var(--qfd-green);box-shadow:0 0 12px #00d87e}
.qfd-message{min-height:1.1em;margin:4px 0 9px;color:var(--qfd-orange);font-size:21px;text-align:center}
.qfd-wallet-note{margin:16px 16px 4px;color:#e7e8e4;font-size:19px;text-align:center}
/* Inside Instagram's and TikTok's browsers (F07, the owner's approval, 27 Oct 2026): the bio page's open-in-browser helper
   in its words, under the SIGN IN title, drawn as this step's own wallet key and in the wallet line's colour. */
.qfd-browser-helper{margin:0 0 18px}
.qfd-browser-helper .qfd-open-browser{min-height:58px;font-size:20px}
.qfd-browser-note{margin:10px 8px 0;color:#e7e8e4;font-size:16px;text-align:center}
.qfd-wallet-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.qfd-wallet-list button,.qfd-wallet-option{min-height:76px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:8px 4px;border:2px solid var(--qfd-green);background:#00150c;color:var(--qfd-green);font:700 13px/1 var(--qfd-display);text-decoration:none;cursor:pointer}
.qfd-wallet-list img{width:34px;height:34px;object-fit:contain}
.qfd-wallet-heading{margin:0 0 10px;color:#e7e8e4;font:700 14px/1.2 var(--qfd-display);text-align:center}
/* Google and X (the owner, 26 Oct 2026): Google's dark button as published (#131314, a 1 px #8E918F line, its own G on a
   white tile, #E3E3E3 label); X's key black with X's white mark. */
.qfd-social{display:grid;gap:10px;margin:0 0 16px}
.qfd-google{position:relative;display:flex;align-items:center;justify-content:center;width:100%;min-height:52px;padding:0 12px 0 60px;border:1px solid #8e918f;border-radius:4px;background:#131314;color:#e3e3e3;font:500 18px/1.2 Roboto,"Google Sans",Arial,sans-serif;letter-spacing:.25px;cursor:pointer}
.qfd-google-g{position:absolute;left:4px;top:4px;bottom:4px;width:44px;display:grid;place-items:center;border-radius:3px;background:#fff}
.qfd-google-g img{width:22px;height:22px}
.qfd-google:disabled{opacity:.6}
.qfd-x{min-height:52px;display:flex;align-items:center;justify-content:center;gap:12px;border:2px solid #3b3b3b;background:#000;color:#fff;font:700 16px/1 var(--qfd-display);cursor:pointer}
.qfd-x img{width:24px;height:22px;object-fit:contain}
/* An empty status line holds no room: the key sits right under the line above it. */
.qfd-message:empty{min-height:0;margin:0}
/* f4: ADD $X. */
.qfd-copy{margin:-2px 0 12px 4px;color:#fff;font:400 14.5px/1.2 var(--qfd-body);text-align:left}
[data-stage="4"] .qfd-button{min-height:51px;padding:2px 20px 11px;font-size:22px;letter-spacing:.06em}
.qfd-or{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:14px;margin:16px 0 18px;color:#8d958e;font:400 16px/1 var(--qfd-display);letter-spacing:.08em}
.qfd-or span{height:2px;background:#6f786f}
.qfd-subtitle{margin:0 0 12px 3px;color:var(--qfd-orange);font:400 22px/24px var(--qfd-display);letter-spacing:.1em;text-align:left;white-space:nowrap}
.qfd-exchange{display:grid;grid-template-columns:135px minmax(0,1fr);align-items:center;gap:12px;margin:0 0 6px}
.qfd-qr-frame{padding:1px;border:solid transparent;border-width:13px 14px;border-image:var(--qfd-bay)/13px 14px stretch;background:none;box-shadow:none}
.qfd-qr-frame img{width:100%;height:auto;display:block;background:#fff;border-radius:3px;image-rendering:pixelated}
.qfd-address{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px;min-height:52px;padding:5px 6px 5px 12px;border:2px solid #333e37;border-radius:3px;background:#010805}
.qfd-address code{overflow:hidden;color:#f3f0e6;font:400 17px/1.1 var(--qfd-body);text-overflow:ellipsis;white-space:nowrap}
.qfd-address .qfd-button{width:auto;min-height:35px;padding:2px 12px 5px;border-image:var(--qfd-key-dark)/8px 9px 10px stretch;color:var(--qfd-green);font-size:17px;letter-spacing:.1em}
.qfd-address .qfd-button:active:not(:disabled){border-image-source:url(/runtime/quit/deck-art/key-dark.webp)}
/* Touch targets (the owner's approval, 30 Oct 2026): a key drawn under 44 px tall keeps its comp size and takes a 44 px
   press through an invisible ::after, as the header keys do: COPY here, BUY MORE and GET MY LINK on WELCOME, and the
   Watch the live show line. Nothing on the screen moves. */
.qfd-address .qfd-button::after{content:"";position:absolute;inset:-5px 0}
.qfd-address-col>p{margin:10px 0 0;color:#eeeee9;font:400 16.5px/1.2 var(--qfd-body)}
.qfd-wallet-balance{margin-top:6px;padding:9px 18px 9px}
.qfd-wallet-balance>strong{color:var(--qfd-orange);font-size:22px;line-height:25px}
.qfd-wallet-balance output{display:block;margin:6px 0 4px;color:var(--qfd-green);font:400 57px/52px var(--qfd-display);letter-spacing:.01em;white-space:nowrap;text-shadow:0 0 10px #01f98266}
.qfd-wallet-balance>b{display:block;color:#f9c31b;font:400 21px/24px var(--qfd-display);letter-spacing:.1em;white-space:nowrap}
/* f5: BUY $QUIT. YOU PAY and YOU GET ABOUT are two plates; the dollar figure sits on the amount's baseline, right. */
.qfd-pay-screen,.qfd-confirm-result{min-height:121px;padding:5px 12px 6px}
.qfd-pay-screen{margin-bottom:5px}
.qfd-pay-screen>strong,.qfd-confirm-result>strong{font-size:23px;line-height:26px}
.qfd-pay-screen>strong{color:var(--qfd-orange);text-shadow:none}
.qfd-pay-screen p{display:flex;flex-wrap:nowrap;align-items:baseline;justify-content:space-between;gap:10px;margin:10px 0 0}
.qfd-pay-screen output{color:var(--qfd-cream);font:400 58px/52px var(--qfd-display);letter-spacing:.01em;white-space:nowrap;text-shadow:0 0 8px #faf3e333}
.qfd-pay-screen p span{flex:none;margin-left:auto;color:#f4f2e9;font:400 37px/52px var(--qfd-body)}
.qfd-confirm-result output{margin-top:10px;font-size:53px;line-height:50px}
.qfd-fee{margin:16px 4px 0;color:#e8e8e2;font:400 16.5px/1.2 var(--qfd-body)}
.qfd-fee--blank{visibility:hidden}
[data-stage="5"] [data-buy]{min-height:62px;margin-top:12px;font-size:39px}
.qfd-button--retry{margin-top:10px;border-image-source:url(/runtime/quit/deck-art/key-dark.webp);border-image-slice:40 46 50 fill;border-image-width:9px 10px 11px;color:var(--qfd-green);font-size:30px}
.qfd-button--retry:active:not(:disabled){border-image-source:url(/runtime/quit/deck-art/key-dark.webp)}
/* f6: WELCOME. */
.qfd-done-title{margin:0 0 2px 4px;color:var(--qfd-green);font:400 46px/.8em var(--qfd-pixel);letter-spacing:0;white-space:nowrap;text-shadow:0 0 6px #01f98266}
.qfd-done-result{min-height:90px;padding:2px 8px 3px}
.qfd-done-result output{margin:0;font-size:44px;line-height:38px}
.qfd-done-result p{margin:3px 0 0;color:#f1f1ec;font:400 19px/1.1 var(--qfd-body)}
[data-stage="6"] .qfd-screen,[data-stage="6"] .qfd-perks,[data-stage="6"] .qfd-next,[data-stage="6"] .qfd-link-screen{margin-block:2px}
.qfd-perks{padding:4px 8px 6px}
.qfd-perks>strong{font-size:19px;line-height:22px}
.qfd-perks ul{display:grid;gap:3px;margin:5px 0 0;padding:0;list-style:none}
.qfd-perks li{position:relative;display:flex;align-items:center;gap:12px;color:#eeeee9;font:400 15px/1.15 var(--qfd-body)}
.qfd-perks li::before{content:"";flex:none;width:17px;height:17px;border-radius:50%;background:var(--qfd-green)}
.qfd-perks li::after{content:"";position:absolute;left:4.5px;top:50%;width:8px;height:4px;margin-top:-4px;border-left:3px solid #021a0d;border-bottom:3px solid #021a0d;transform:rotate(-45deg)}
.qfd-next,.qfd-link-screen{padding:4px 6px 6px}
.qfd-next>strong,.qfd-link-screen>strong{font-size:20px;line-height:23px}
.qfd-next p,.qfd-link-screen p{margin:4px 0 6px;color:#eeeee9;font:400 14px/1.2 var(--qfd-body)}
.qfd-next .qfd-button{min-height:33px;padding:0 18px 6px;font-size:22px;letter-spacing:.14em}
.qfd-next .qfd-button::before,.qfd-link-screen .qfd-button::before{inset:4px 6px 9px}
.qfd-next .qfd-button::after,.qfd-link-screen .qfd-button::after{content:"";position:absolute;inset:-6px 0}
.qfd-link-screen .qfd-button{min-height:36px;padding:0 18px 7px;font-size:22px;letter-spacing:.14em}
.qfd-show-link{display:block;margin:4px 0 0;color:var(--qfd-green);font:400 15px/1.2 var(--qfd-body);text-align:center;text-decoration:underline;text-underline-offset:3px}
.qfd-show-link{position:relative}
.qfd-show-link::after{content:"";position:absolute;inset:-14px 0}
@media(max-width:600px){
  .qfd-order-pill{font-size:11px}
  .qfd-contact-row{grid-template-columns:minmax(0,1fr) auto;gap:6px}
  .qfd-contact{grid-template-columns:minmax(0,1fr) auto;padding:8px}
  .qfd-contact input{font-size:21px}
  .qfd-send{min-width:102px;min-height:58px;padding:7px;font-size:11px}
  .qfd-code{gap:5px}
  .qfd-code input{height:62px;border-width:2px;font-size:26px}
  .qfd-wallet-note{margin:14px 4px 2px;font-size:17px}
}
/* The 6-digit code at 340 px and under (touch targets, 30 Oct 2026): the boxes stand 1 px apart, inside the plate, so
   each is 44 px wide; from 341 px they are that wide 5 px apart. */
@media(max-width:340px){.qfd-code{gap:1px}}
/* SIGN IN under 360 px (CV-07, mobile audit 31 Oct 2026): SEND CODE stands under the field at full width, so the field
   is the plate wide, and Continue with Google keeps one line. */
@media(max-width:359.98px){
  .qfd-contact-row{grid-template-columns:minmax(0,1fr)}
  .qfd-send{width:100%;min-width:0;min-height:52px}
  .qfd-google{font-size:16px;white-space:nowrap}
}
/* Narrow phones, 374 px and under: the header keys keep their order and words at a smaller size, and the lines that are
   one line at 390 px may wrap (25 Oct 2026 production preflight: nothing may run past the screen at 320 px). */
@media(max-width:374px){
  .qfd-head{padding-inline:4px;gap:6px}
  .qfd-brand img{width:72px}
  .qfd-nav{gap:5px}
  .qfd-key--menu{width:70px;height:26.25px}
  .qfd-key--menu::after{inset:-11px 0}
  .qfd-key--sound{width:31px;height:30px}
  .qfd-key--sound::before{width:18px;height:15px}
  .qfd-key--buy{width:92px;height:31px;font-size:13px;letter-spacing:.06em}
  .qfd-preset{grid-template-columns:118px minmax(0,1fr);column-gap:8px}
  [data-stage="2"] .qfd-steps>span{gap:6px}
  [data-stage="2"] .qfd-step-n{width:22px;height:22px;border-width:2px;font-size:15px}
  .qfd-exchange{grid-template-columns:118px minmax(0,1fr);gap:8px}
  .qfd-footnote,.qfd-future small,.qfd-subtitle,.qfd-live span{white-space:normal}
  .qfd-rank-pill--lit{padding-block:5px 9px}
}
/* ADD SOL: the OR between the card key and the exchange shows only with the card key (26 Oct 2026: with no card top-up
   link the key is hidden, and every buyer saw an OR with nothing above it). */
[data-card-link][hidden] + .qfd-or{display:none}
/* ADD SOL by card (the money design set, approved 26 Oct 2026: addsol-phone, addsol-desktop). PAY BY CARD in the pixel face
   and the card line sit over the card key, and show and hide with it (go-door.js updateFundingLinks); on a phone a rule
   parts them from the line above, as the phone comp draws it (the computer's column has none). */
.qfd-card-title{margin:14px 0 0;padding-left:4px;color:var(--qfd-orange);font:400 40px/32px var(--qfd-pixel);letter-spacing:0;text-align:left;white-space:nowrap}
.qfd-card-copy{margin:7px 0 12px 4px}
.qfd-card-min{margin:0 0 12px 4px}
@media(max-width:600px){.qfd-card-title{margin-top:12px;padding-top:17px;border-top:2px solid #59625a}}
/* After the card payment (addsol-convert): the USDC the card bought sits in the fan's email wallet. CARD PAYMENT DONE takes
   the place of the line under ADD $X, the wallet plate shows the USDC over the SOL, and CONVERT TO SOL with its fee line
   follow the plate; the card key, the OR and the exchange step aside until the USDC is SOL. */
.qfd-card-done{margin:2px 0 16px;color:var(--qfd-green);font:400 28px/30px var(--qfd-display);letter-spacing:.1em;text-align:center;white-space:nowrap;text-shadow:0 0 8px #01f98255}
[data-stage="4"]:not(.is-convert) :is([data-convert-part],[data-convert],[data-wallet-usdc]){display:none}
[data-stage="4"].is-convert :is([data-funding-copy],[data-card-part],[data-wallet-state]){display:none}
[data-stage="4"].is-convert:not(.is-small) :is([data-card-link],.qfd-or,.qfd-subtitle,.qfd-exchange){display:none}
[data-stage="4"].is-convert .qfd-wallet-balance{padding-block:12px 14px}
[data-stage="4"].is-convert [data-wallet-balance]{margin:4px 0 0;font-size:32px;line-height:32px}
[data-stage="4"] .qfd-convert{min-height:72px;margin-top:14px;padding:4px 20px 13px;font-size:34px;letter-spacing:.08em}
.qfd-convert-fee{margin:14px 4px 0;color:#eeeee9;font:400 18px/1.15 var(--qfd-body);text-align:left}
/* USDC too little to swap (reason small; the owner's line, 26 Oct 2026): the plate and CONVERT TO SOL stay, the line sits
   right under the key in place of the fee line, and the card key, the OR and the exchange open again under it, so the fan
   can add more by card or send SOL. The step is a column here so those parts can follow the key. */
[data-stage="4"].is-small{display:flex;flex-direction:column}
[data-stage="4"].is-small>.qfd-steps{order:1}
[data-stage="4"].is-small>.qfd-title{order:2}
[data-stage="4"].is-small>.qfd-card-done{order:3}
[data-stage="4"].is-small>.qfd-wallet-balance{order:4;margin-top:0}
[data-stage="4"].is-small>[data-convert]{order:5;margin-top:10px}
[data-stage="4"].is-small>[data-message]{order:6;margin:12px 4px 16px}
[data-stage="4"].is-small>[data-card-link]{order:7}
[data-stage="4"].is-small>.qfd-or{order:8}
[data-stage="4"].is-small>.qfd-subtitle{order:9}
[data-stage="4"].is-small>.qfd-exchange{order:10}
[data-stage="4"].is-small .qfd-convert-fee{display:none}
/* SEND SOL FROM AN EXCHANGE first ([data-exchange-first], set by runtime/quit/exchange-first.js for the languages whose
   buyers fund that way, Russian since 30 Oct 2026): the exchange, the OR, then the card. The OR still goes with the card
   key, the small-USDC column keeps the same order, and on a phone the OR alone parts the card from the exchange. */
[data-stage="4"]>.qfd-exchange+.qfd-or:has(~[data-card-link][hidden]){display:none}
[data-stage="4"][data-exchange-first].is-small>.qfd-subtitle{order:7}
[data-stage="4"][data-exchange-first].is-small>.qfd-exchange{order:8}
[data-stage="4"][data-exchange-first].is-small>.qfd-or{order:9}
[data-stage="4"][data-exchange-first].is-small>[data-card-link]{order:10}
@media(max-width:600px){[data-stage="4"][data-exchange-first]>.qfd-card-title{margin-top:0;padding-top:0;border-top:0}}
/* SIGNING YOU IN (the owner, 28 Oct 2026: "a better signing you in skin ... gary on the rocket chair"). While a sign-in
   runs, the SIGN IN step shows one of the funnel's screen plates (.qfd-screen), its label on top in the type of CARD
   PAYMENT DONE and Gary on his rocket chair under it, in the place of the status line and the keys under it, which step
   aside until it ends: nothing above it moves as it comes and goes, and the fields above it stay usable. The panel's box
   (a live status) is always there, empty until then. Gary hovers on a transform alone (a bob and a slight tilt, 1.2 s a
   cycle) and holds still for a visitor who asks for less motion. The art is the site's own full scene (desktop-game/
   gary-chair: the city, the office and the smoke trails), resized for phones, framed so its edges never show as it moves
   (the owner chose the full scene over the cutout, 28 Oct 2026). */
.qfd-signing-plate{display:none}
[data-stage="3"].is-signing .qfd-signing-plate{display:flex;flex-direction:column;align-items:center;gap:8px;padding:8px 10px 10px}
[data-stage="3"].is-signing .qfd-signing~*{display:none}
.qfd-signing-art{display:block;width:min(58%,204px);aspect-ratio:480/786;overflow:hidden;border:2px solid #0b0d0c;box-shadow:0 0 0 1px #01f98233,inset 0 0 18px #000a}
.qfd-signing-art img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 0;transform:scale(1.08);transform-origin:50% 40%;animation:qfd-hover 1.2s ease-in-out infinite}
.qfd-signing-plate>strong{font-size:28px;line-height:30px;text-align:center;text-shadow:0 0 8px #01f98255}
@keyframes qfd-hover{0%,100%{transform:scale(1.08) translateY(0) rotate(-1deg)}50%{transform:scale(1.08) translateY(-6px) rotate(1deg)}}
@media (prefers-reduced-motion:reduce){.qfd-signing-art img{animation:none}}
/* Tablets and computers (the owner, 30 Oct 2026: "reponsive and adaptive to desktop and not just mobile"). Everything
   above is the phone funnel and is untouched under 768 px wide, and on a phone on its side (under 500 px tall, as every
   phone is lying down): these rules only add to it from 768 px wide and 500 px tall. From 768 px the column is 600 px.
   From 1024 px the page lays out side by side within a wider frame: on the first screen the photo with the opening line
   on the left, and the market strip, the deck line, WATCH and BUY $QUIT on the right. Every word is the phone page's
   own. */
/* On every buy step from 1024 px, Gary's rocket chair (the funnel's own scene, .qfd-side) on the left and the step's
   plate on the right, in the phone column's order, so each step reads and works as it does on a phone. */
.qfd-side{display:none}
@media (min-width:768px) and (min-height:500px){
  :root{--qfd-col:min(100% - 48px,600px)}
  /* The email or phone field shows where the typing goes, as the amount field does. */
  .qfd-contact:focus-within{border-color:var(--qfd-green)}
  /* The amount field without the browser's step arrows, as on a phone (the arrow keys still step it). */
  .qfd-other input{-moz-appearance:textfield;appearance:textfield}
  .qfd-other input::-webkit-inner-spin-button,.qfd-other input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
}
@media (min-width:1024px) and (min-height:500px){
  :root{--qfd-wide:min(100% - 64px,1320px)}
  /* The header band: the wordmark at the frame's left edge, the keys at its right, each a little larger. */
  .qfd-head{width:var(--qfd-wide);min-height:64px;padding:8px 0 4px}
  .qfd-brand img{width:112px}
  .qfd-nav{gap:16px}
  .qfd-key--menu{width:104px;height:39px}
  .qfd-key--sound{width:42px;height:40px}
  .qfd-key--sound::before{width:24px;height:20px}
  .qfd-key--buy{width:140px;height:42px;padding:0 11px 8px;font-size:18px}
  /* The frame: the first screen and the plates take its whole width; a buy step and Gary's plate share one row, centred. */
  .qfd-main{width:var(--qfd-wide);margin-top:18px;padding-bottom:40px;display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start;column-gap:40px}
  .qfd-main>.qfd-landing,.qfd-main>.qfl{flex:0 0 100%;min-width:0}
  .qfd-main>.qfd-panel{flex:1 1 480px;max-width:600px;min-width:0}
  /* The first screen: the photo window on the left, shown whole (850 x 575), with the opening line over it at the phone
     comp's share of the window; the strip, the deck line, WATCH and BUY $QUIT in a column on the right, centred on the
     photo's height (the empty rows above and below take the difference). */
  .qfd-landing{grid-template-columns:minmax(0,1.36fr) minmax(0,1fr);grid-template-rows:1fr repeat(6,auto) 1fr;column-gap:40px}
  .qfd-landing>*{grid-column:2}
  .qfd-landing>.qfd-hero{grid-column:1;grid-row:1/-1;align-self:start;margin:0}
  .qfd-landing>.qfd-live{grid-row:2;min-height:44px;font-size:15px}
  .qfd-landing>.qfd-deck{grid-row:3;margin:20px 4px 0;font-size:18px;line-height:1.3}
  .qfd-landing>.qfd-watch{grid-row:4;margin-top:20px}
  .qfd-landing>.qfd-button{grid-row:5;min-height:74px;margin-top:20px;font-size:44px}
  .qfd-landing>.qfd-underbuy{grid-row:6;margin-top:14px;font-size:15px}
  .qfd-landing>.qfd-via{grid-row:7;margin-top:10px;font-size:14px}
  .qfd-hero img{aspect-ratio:850/575;object-position:50% 50%}
  .qfd-hero h1{font-size:9.6cqw;line-height:7.95cqw}
  .qfd-invited{bottom:calc(31.8cqw + 22px);font-size:16px}
  /* A buy step: Gary on his rocket chair in a riveted plate, as tall as the screen allows (at most 760 px), held in view
     while a long step scrolls. The image loads only when the plate shows (loading lazy, never on a phone). */
  .qfd-landing[hidden]~.qfd-side{display:block;flex:none;position:sticky;top:16px;padding:0;border-width:18px 20px}
  .qfd-side img{display:block;width:auto;height:min(100vh - 150px,760px);min-height:420px;aspect-ratio:480/786;object-fit:cover}
  /* While SIGNING YOU IN shows Gary in the step's own plate, the big scene steps back, so the two never compete. */
  .qfd-side{transition:opacity .25s ease-out}
  .qfd-main:has(>[data-stage="3"].is-signing:not([hidden]))>.qfd-side{opacity:.25}
  /* The steps' smaller lines, a size up for reading at a desk; the keys, fields and figures keep the phone comps' sizes. */
  .qfd-copy{font-size:16px}
  .qfd-footnote{font-size:15px}
  .qfd-preset [data-perk]{font-size:15px}
  .qfd-future small{font-size:15px}
  .qfd-next p,.qfd-link-screen p{font-size:15.5px}
  .qfd-perks li{font-size:16px}
  .qfd-show-link{margin-top:10px;font-size:16px}
  .qfd-exchange{grid-template-columns:168px minmax(0,1fr)}
}
/* Big screens: from 1800 px the frame is 1520 px, so the office photo shows at its own 850 px and Gary's plate and
   the step a little larger. */
@media (min-width:1800px) and (min-height:500px){
  :root{--qfd-wide:min(100% - 96px,1520px)}
  .qfd-main>.qfd-panel{max-width:640px}
  .qfd-side img{height:min(100vh - 150px,860px)}
}
/* A mouse: the keys that pick (the amount rows, EMAIL and PHONE, the wallet keys) answer the pointer as the plates' rank
   keys do. */
@media (min-width:1024px) and (min-height:500px) and (hover:hover) and (pointer:fine){
  .qfd-preset:not(.is-selected):hover,.qfd-tabs button[aria-selected="false"]:hover{border-color:#3d6b52}
  .qfd-wallet-list button:hover,.qfd-wallet-option:hover{background:#012a17}
}