*{box-sizing:border-box}
:root{color-scheme:dark;background:#020806;--qfd-pixel:var(--t-font-pixel,"QUIT Pixel",monospace);--qfd-display:var(--t-font-display,"QUIT Display",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}
.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. */
.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:0 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}
.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);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)}
/* 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.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);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-other-link,.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}
.qfd-other-link{margin:8px 0 0 3px;color:#8fb3a0;font:400 16px/1.2 var(--qfd-body);text-underline-offset:3px}
.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 input{flex:1;min-width:0;border:0;background:transparent;color:#fff;font:400 22px/1 var(--qfd-body);outline:0}
/* 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);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);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:nowrap}
[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:nowrap}
.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}
.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)}
.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)}
[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-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}
@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}
}
/* 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--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}
@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}