/* QUIT FACTORY onboarding (office-setup.js): the signed-out door, GET MY LINK's three steps and the locked creator keys.
   Approved comps: qf-signin-all-v4, qf-setup-v6, qf-connect-v6, qf-live-v7 (desktop); step1-v1, step2-v1, step3-v1 on
   the phone office c1-v1 and o4-v1. Frames and keys are the deck art; faces only through the office's tokens. */

/* ---------- the rail: GET MY LINK and the locked creator keys */
/* The lock is its own element (office.js paintRail), so it shows over any key plate the office chrome draws with the
   key's pseudo-elements. */
.qo-rail [data-locked]{position:relative;color:#8f9a90;filter:saturate(.35) brightness(.78);justify-content:flex-start;padding-left:16px;padding-right:30px}
.qo-rail [data-locked]>.qf-lock{position:absolute;right:12px;top:50%;z-index:1;width:14px;height:18px;margin-top:-10px;background:url(/runtime/go/art/office-badge-lock.webp) center/contain no-repeat;opacity:.85;pointer-events:none}
/* GET MY LINK over the twelve other keys: thirteen keys at the pitch of comp qf-setup-v6 (about 51 px) and its label
   size (GET MY LINK about 117 px wide), one line each, so the rail and its frame end with the panels, above the fold of a
   900 px screen, under any office chrome, and every label clears its plate's bevel and its lock. */
@media(min-width:761px){
 .qo-rail:has(>[data-view="get-my-link"]:not([hidden])):has(>[data-view="earnings"]:not([hidden])){gap:7px;padding-block:10px}
 .qo-rail:has(>[data-view="get-my-link"]:not([hidden])):has(>[data-view="earnings"]:not([hidden])) .qo-key{min-height:44px;padding-block:3px 4px;font-size:22px;white-space:nowrap}
 .qo-rail:has(>[data-view="get-my-link"]:not([hidden])):has(>[data-view="earnings"]:not([hidden]))>[data-view="how-it-works"]{font-size:20px}
}
@media(min-width:761px) and (max-width:1150px){
 .qo-rail:has(>[data-view="get-my-link"]:not([hidden])):has(>[data-view="earnings"]:not([hidden])) .qo-key{font-size:19px}
 .qo-rail:has(>[data-view="get-my-link"]:not([hidden])):has(>[data-view="earnings"]:not([hidden]))>[data-view="how-it-works"]{font-size:16px}
 /* a locked key keeps its whole label clear of its lock in the 155 px rail (REFERRALS, ACCOUNTS; integration, 26 Oct) */
 .qo-rail:has(>[data-view="get-my-link"]:not([hidden])):has(>[data-view="earnings"]:not([hidden]))>[data-locked]{font-size:16px;padding-left:10px;padding-right:26px}
}

/* ---------- signed out: the masthead, the name, the sign-in panel and the plan */
.qf-out__mast{margin-bottom:6px}
.qf-out__title{margin:0 0 10px 12px!important;color:var(--o-orange);font:700 clamp(64px,8vw,128px)/.92 var(--o-pixel);letter-spacing:.035em;text-shadow:5px 6px #000}
.qf-out__grid{display:grid;grid-template-columns:minmax(0,1.17fr) minmax(0,1fr);gap:12px;align-items:stretch}
.qf-out .qo-account-login{max-width:none;margin:0;padding:18px 22px}
.qf-out .qo-account-login h1{font-size:clamp(40px,4.6vw,66px);margin-bottom:8px}
.qf-out__plan{display:flex;min-width:0}
.qf-out__plan>.qf-plan{flex:1}
.qo[data-session] .qf-out{display:none}
@media(min-width:1000px){body:has(.qo:not([data-session]) .qf-out) .c-header{display:none}body:has(.qo:not([data-session]) .qf-out)>.q-ca~.frame-main{padding-top:0}}

/* ---------- THE COMPENSATION PLAN: three plates, each a step in from the one above, joined by a line */
.qf-plan{display:flex;flex-direction:column;padding:18px 18px 22px}
.qf-plan>h2{margin-bottom:22px;font-size:clamp(30px,2.7vw,44px)}
.qf-rates{display:grid;gap:30px;align-content:start}
.qf-rate{position:relative;display:grid;grid-template-columns:minmax(44px,auto) minmax(0,1fr) auto;grid-template-rows:auto auto;column-gap:12px;align-items:center;min-height:124px;padding:10px 16px;border:solid transparent;border-width:14px;border-image:url(/runtime/quit/deck-art/bay.webp) 44 50 fill/14px stretch;background:#000a05;background-clip:padding-box}
.qf-rate:nth-child(2){margin-left:30px}.qf-rate:nth-child(3){margin-left:60px}
.qf-rate+.qf-rate::before{content:"";position:absolute;left:-22px;top:-50px;width:14px;height:72px;border-left:3px solid var(--o-green);border-bottom:3px solid var(--o-green);box-shadow:-2px 0 8px #00ed8055}
.qf-rate__n{grid-row:1/3;color:var(--o-orange);font:700 92px/.9 var(--o-pixel);text-shadow:3px 4px #000}
.qf-rate__label{align-self:end;color:var(--o-green);font:700 30px/1 var(--o-display);letter-spacing:.02em;text-wrap:balance}
.qf-rate__paid{align-self:start;margin-top:6px!important;font-size:19px;color:var(--o-ink);white-space:nowrap}
.qf-rate__value{grid-column:3;grid-row:1/3;color:var(--o-green);font:700 62px/1 var(--o-display);text-shadow:0 0 14px #00ed8040}
.qf-team{padding-top:26px;font-size:17px;text-align:center}
/* On the door the plan title spans its panel as qf-signin-all-v4 draws it, and each label takes one line where the
   plate has room (CREATORS YOU BRING IN), else it wraps as balanced lines. */
.qf-out .qf-plan>h2{font-size:clamp(30px,3.8vw,55px)}
.qf-out .qf-rates{container-type:inline-size}
.qf-out .qf-rate__label{font-size:min(30px,4.4cqi);letter-spacing:0}
/* beside step 1 the plan has a narrower column: "paid in $QUIT" stays clear of the rate on the third, most indented plate */
@media(min-width:761px){.qf .qf-rate__label{font-size:27px;letter-spacing:0}.qf .qf-rate__value{font-size:52px}.qf .qf-rate__paid{font-size:17px}}
@media(min-width:1440px){.qf .qf-rate{padding-right:8px;column-gap:8px}.qf .qf-rate:nth-child(2){margin-left:24px}.qf .qf-rate:nth-child(3){margin-left:48px}}
/* From 1151 to 1439 px the plan column is narrower than at 1440: the labels and figures scale with the window so
   CREATORS and INVITES stay whole words (integration, 26 Oct). */
/* and the step chips of steps 2 and 3 keep ACCOUNT whole beside its tick */
@media(min-width:1151px) and (max-width:1439px){.qf:not([data-step="account"]):not([data-step="pick"]) .qf-step__label{font-size:clamp(16px,1.4vw,20px)}}
@media(min-width:1151px) and (max-width:1439px){.qf .qf-rate__label{font-size:clamp(21px,1.875vw,27px)}.qf .qf-rate__value{font-size:clamp(42px,3.6vw,52px)}.qf .qf-rate{column-gap:8px;padding-inline:12px}}

/* ---------- GET MY LINK: the step panel beside its side column */
.qf{display:grid;grid-template-columns:minmax(0,1.24fr) minmax(0,1fr);gap:12px;align-items:stretch}
.qf[data-step="account"],.qf[data-step="pick"]{grid-template-columns:minmax(0,1.36fr) minmax(0,1fr)}
.qf[data-step="connect"]{grid-template-columns:minmax(0,1.14fr) minmax(0,1fr)}
.qf[data-step="link"]{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)}
.qf-main{padding:8px 16px 14px;min-width:0}
.qf-side{display:flex;flex-direction:column;gap:12px;min-width:0}
.qf-side>.qo-panel{flex:1 1 auto}
.qf .qf-title{margin-bottom:10px;font-size:clamp(36px,4vw,58px);line-height:1.02}
.qf-label{display:block;margin-bottom:10px;color:var(--o-orange)!important;font:700 22px/1.1 var(--o-display);letter-spacing:.03em}
.qf-line{font-size:16px;line-height:1.38}
.qf-small{margin-top:12px!important;font-size:18px;text-align:center}
.qf-small--left{text-align:left;margin-top:8px!important;font-size:16px;line-height:1.45}
.qf-err{margin-top:8px!important;color:var(--o-red);font:700 15px/1.3 var(--o-display)}
.qf-say:empty{display:none}
.qf-say{margin:4px 0 10px!important;font:700 16px/1.35 var(--o-display);color:var(--o-green)}
.qf-say[data-tone="bad"]{color:var(--o-red)}
.qf-big{display:flex;width:100%;min-height:56px;margin-top:4px;font-size:30px;letter-spacing:.04em}
.qf-textlink{padding:0;border:0;background:none;color:var(--o-green);font:400 15px/1.4 var(--o-body);text-decoration:underline;text-underline-offset:4px}
.qf-links{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 16px;margin-top:8px!important}
.qf-body:not(.qf-body--live) .qf-textlink{font-size:14px}
/* the two links of step 2 on one row at 1440 (qf-connect-v6), each whole */
@media(min-width:1151px){.qf-body:not(.qf-body--live) .qf-textlink{font-size:13px;white-space:nowrap}}

/* the step chips: 1 ACCOUNT, 2 LOG IN, 3 YOUR LINK (done, now, next) */
.qf-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:10px!important;padding-bottom:10px!important;border-bottom:2px solid #2d3f33}
.qf-step{display:flex;align-items:center;justify-content:center;gap:14px;min-height:50px;padding:8px 10px;border:3px solid #2e3a31;background:#020805;color:#a4ada5;font:700 20px/1 var(--o-display);letter-spacing:.03em}
.qf-step__n{display:inline-grid;place-items:center;flex:none;width:40px;height:40px;border:3px solid currentColor;border-radius:50%;font:700 21px/1 var(--o-display)}
.qf-step[data-state="now"]{color:var(--o-orange);border-color:var(--o-orange);box-shadow:inset 0 0 18px #ff650033,0 0 10px #ff650055}
.qf-step[data-state="done"]{color:var(--o-green);border-color:#178a4d}
.qf .qf-step[data-state="done"] .qf-step__n{font-size:0;background:var(--o-green);border-color:var(--o-green)}
.qf-step__n{position:relative}
.qf-step[data-state="done"] .qf-step__n::before{content:"";position:absolute;left:50%;top:50%;width:15px;height:8px;border-left:4px solid #021108;border-bottom:4px solid #021108;transform:translate(-50%,-70%) rotate(-45deg)}
.qf[data-step="account"] .qf-step,.qf[data-step="pick"] .qf-step{flex-direction:column;gap:6px;min-height:86px}
.qf[data-step="account"] .qf-step__n,.qf[data-step="pick"] .qf-step__n{width:44px;height:44px;font-size:23px}
/* the network keys of the general CONNECT (a single pick) draw as step 1's */
.qf-chip input[type="radio"]+span .qf-box{border-radius:0}
@media(min-width:761px){
 /* steps 2 and 3: the chips in one row (qf-connect-v6), the step heading at the comp's cap of about 34 px */
 .qf[data-step="connect"] .qf-step,.qf[data-step="xlogin"] .qf-step,.qf[data-step="pack"] .qf-step{min-height:40px;padding-block:3px}
 .qf[data-step="connect"] .qf-how{margin-block:6px}
 .qf[data-step="connect"] .qf-title,.qf[data-step="xlogin"] .qf-title,.qf[data-step="pack"] .qf-title{font-size:clamp(32px,3.5vw,50px);margin-bottom:6px}
 .qf[data-step="connect"] .qf-big{min-height:52px}
 .qf[data-step="connect"] .qf-status{min-height:36px;padding-block:4px}
 .qf[data-step="connect"] .qf-notice__text{line-height:1.3}
 /* JOIN THE PARTNER PROGRAM on one line at 1440 (qf-setup-v6: a cap of about 36 px across the column) */
 .qf[data-step="account"] .qf-title{font-size:clamp(30px,3.75vw,54px);white-space:nowrap}
 /* X OR OTHER adds the email and its line: the step tightens so CONTINUE and the Free line stay on a 900 px screen */
 .qf:has([data-qf-email]:not([hidden])) .qf-step{min-height:76px}
 .qf-form:has([data-qf-email]:not([hidden])) .qf-title{margin-bottom:6px}
 .qf-form:has([data-qf-email]:not([hidden])) .qf-chips{row-gap:7px}
 .qf-form:has([data-qf-email]:not([hidden])) .qf-chip>span{min-height:50px}
 .qf-form:has([data-qf-email]:not([hidden])) .qf-field{margin-bottom:8px}
 .qf-form:has([data-qf-email]:not([hidden])) .qf-label{margin-bottom:6px}
 .qf-form:has([data-qf-email]:not([hidden])) .qf-input input:not([type="checkbox"]){min-height:50px;font-size:24px;padding-block:4px}
 .qf-form:has([data-qf-email]:not([hidden])) .qf-hint{margin-top:4px!important;font-size:15px;line-height:1.3}
 .qf-form:has([data-qf-email]:not([hidden])) .qf-small{margin-top:8px!important}
}

/* step 1: the networks, the handle, the email for X OR OTHER */
.qf-invite{margin-bottom:10px!important;color:var(--o-green);font:700 17px/1.3 var(--o-display)}
.qf-where{margin:0 0 12px!important}
.qf-where>legend{float:none;padding:0}
.qf-chips{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 22px}
.qf-chip{position:relative;display:block;min-width:0;margin:0!important}
.qf-chip input{position:absolute;inset:0;z-index:1;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.qf-chip>span{display:flex;align-items:center;gap:16px;min-height:60px;padding:6px 14px;border:solid transparent;border-width:9px;border-image:url(/runtime/quit/deck-art/key-dark.webp) 40 46 50 fill/9px stretch;color:var(--o-green);font:700 22px/1 var(--o-display);letter-spacing:.03em}
.qf-mark{display:inline-grid;place-items:center;flex:none;width:40px;height:40px}
.qf-mark .q-pmark{width:36px;height:36px}
.qf-chip__name{flex:1;min-width:0}
/* The network names keep whole words at any width: the chip is a container, and each name takes the size at which
   the longest one (INSTAGRAM, 9 letters, beside the mark, the box, the gaps and the frame: about 156 px) fits, up to
   the 22 px of qf-setup-v6 (integration, 26 Oct: at 1280 the names broke as INSTAGRA M). */
@media(min-width:761px){.qf-chip{container-type:inline-size}.qf-chip__name{font-size:max(14px,min(22px,calc((100cqi - 156px) / 5.6)))}}
.qf-box{flex:none;position:relative;width:34px;height:34px;border:3px solid #7b877d;background:#010604}
.qf-chip input:checked+span{box-shadow:0 0 0 3px var(--o-green),0 0 16px #00ed8070;color:var(--o-green)}
.qf-chip input:checked+span .qf-box{border-color:var(--o-green)}
.qf-chip input:checked+span .qf-box::after{content:"";position:absolute;left:8px;top:4px;width:9px;height:17px;border-right:4px solid var(--o-green);border-bottom:4px solid var(--o-green);transform:rotate(40deg)}
.qf-chip input:focus-visible+span{outline:3px solid #fff0ad;outline-offset:3px}
@media(hover:hover){.qf-chip:hover input:not(:checked)+span{color:#fff}}
.qf-field{margin-bottom:12px}
.qf-input{display:flex;align-items:center}
.qf-input--at{position:relative}
.qf-at{position:absolute;left:20px;top:50%;transform:translateY(-52%);z-index:1;color:var(--o-ink);font:400 29px/1 var(--o-body);pointer-events:none}
.qf .qf-input input:not([type="checkbox"]){font-size:27px;padding:6px 16px;min-height:58px}
.qf .qf-input--at input:not([type="checkbox"]){padding-left:33px}
.qf-hint{margin-top:8px!important;font-size:16px;line-height:1.4;color:var(--o-dim)}

/* step 2: log in on the network; the reels beside it */
.qf-how{display:grid;gap:6px;margin:8px 0!important}
.qf-how__row{display:flex;align-items:flex-start;gap:16px;min-height:78px;padding:0 14px;border:2px solid #263a2d;background:#020906}
.qf-how:not(.qf-how--plain) .qf-how__row{min-height:96px}
/* each picture whole in its row, at the row's height (the picture never sets the row's height); the frame is the
   comp's picture column, about 150 px, inside the art's own 176 px */
.qf-how__frame{position:relative;flex:none;align-self:stretch;width:150px;overflow:hidden}
.qf-how__pic{position:absolute;inset:6px 0 0;display:block;width:100%;height:calc(100% - 6px);object-fit:cover;object-position:center bottom}
/* Each phone picture fills its frame as the approved comp qf-connect-v6 draws them (wide crops of the phone screen):
   Allow and the green page keep their key (integration, 26 Oct). The login shows whole, the Instagram mark and the
   Log in key both, on its own white screen across the frame (the art's background is white). */
.qf-how__row:first-child .qf-how__pic{object-fit:contain;object-position:center;background:#fff}
.qf-how__n{flex:none;min-width:28px;color:var(--o-green);font:700 40px/1 var(--o-pixel);text-shadow:0 0 12px #00ed8055;margin-top:8px}
.qf-how__text{flex:1;min-width:0;align-self:center;padding:5px 0;font-size:16px;line-height:1.38}
.qf-how--plain .qf-how__row{height:auto;min-height:62px;padding:6px 14px}.qf-how--plain .qf-how__n{margin-top:2px}
.qf-status{display:flex;align-items:center;gap:12px;min-height:40px;margin:8px 0 0!important;padding:6px 16px;border:2px solid #29372d;background:#010604;color:var(--o-green);font:700 20px/1.2 var(--o-display);letter-spacing:.03em}
.qf-status[data-tone="bad"]{color:var(--o-red)}
.qf-status[data-tone="done"]{color:var(--o-green)}
.qf-status[data-tone="bad"] .qf-cursor,.qf-status[data-tone="done"] .qf-cursor{display:none}
.qf-cursor{flex:none;width:14px;height:24px;background:currentColor;animation:qf-blink 1.06s steps(1,end) infinite}
@keyframes qf-blink{50%{opacity:0}}
.qf-notice{margin:8px 0 0!important;padding:5px 16px 7px;border:3px solid var(--o-orange);background:#0d0602;box-shadow:inset 0 0 14px #ff650022}
.qf-notice__head{margin-bottom:3px!important;color:var(--o-orange);font:700 22px/1.15 var(--o-pixel);letter-spacing:.04em}
.qf-notice__text{font-size:16px;line-height:1.35}
.qf-wrong{margin-top:12px}
.qf-wrong .qo-key{margin-top:8px}
.qf-more{display:grid;gap:10px;margin-top:12px!important}
.qf-more__row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 12px;align-items:center;padding:10px;border:2px solid #263a2d}
.qf-more__head{display:flex;align-items:center;gap:10px;font:700 18px var(--o-display);color:var(--o-green)}
.qf-more__key{min-height:46px;font-size:16px}
.qf-more__status{grid-column:1/-1;margin:0!important;font-size:16px}
.qf-side-reels{display:flex;flex-direction:column;padding:12px 14px;container-type:inline-size}
.qf-side-reels>h2{margin-bottom:12px;font-size:clamp(26px,2.45vw,40px)}
.qf-reels{flex:0 1 auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-content:start;gap:12px;max-height:700px;overflow-y:auto;padding-right:4px;scrollbar-width:thin}
/* two whole rows of reels (comp qf-connect-v6 shows six), the rest a scroll away: a reel is its 9:16 picture inside the
   8 px frame plus the 44 px switch, its width a third of the list */
@media(min-width:761px){.qf-reels{max-height:calc(2 * (((100cqi - 28px) / 3 - 16px) * 16 / 9 + 60px) + 12px)}}
.qf-reel{min-width:0;border:solid transparent;border-width:8px;border-image:url(/runtime/quit/deck-art/bay.webp) 44 50 fill/8px stretch}
.qf-reel img{display:block;width:100%;height:auto;aspect-ratio:9/16;object-fit:cover;background:#020a05}
.qf-reel .qo-switch{height:44px}

/* the clip pack */
.qf-download{display:flex;width:100%;min-height:54px;margin:16px 0 10px;font-size:20px}

/* step 3: YOU ARE LIVE, the first reel and the keys; the link, the payouts and the invite beside them */
.qf-body--live{display:flex;flex-direction:column}
.qf .qf-title--live{margin:4px 0 12px;color:var(--o-green);text-align:center;font-size:clamp(56px,6.3vw,96px);line-height:.95;text-shadow:0 0 18px #00ed8055,4px 5px #000}
.qf-pill{display:flex;align-items:center;justify-content:center;min-height:52px;padding:8px 14px;border:0 solid transparent;border-image:url(/runtime/quit/deck-art/key-green.webp) 22 24 34 fill/10px 12px 13px stretch;color:#002411;font:700 23px/1.15 var(--o-display);letter-spacing:.08em;text-align:center;overflow-wrap:anywhere}
.qf-note{margin-top:12px!important;color:var(--o-orange);font:700 20px/1.3 var(--o-display);text-align:center}
.qf-first{margin-top:14px;padding:10px 20px 12px;border:solid transparent;border-width:14px;border-image:url(/runtime/quit/deck-art/bay.webp) 44 50 fill/14px stretch;background:#000e07;background-clip:padding-box}
.qf-first__label{color:var(--o-green);font:700 18px/1.2 var(--o-display);letter-spacing:.06em}
.qf-first__time{margin:4px 0 6px!important;color:var(--o-green);font:700 clamp(34px,3.4vw,50px)/1 var(--o-display);text-shadow:0 0 14px #00ed8055;text-wrap:balance}
.qf-first__then{font-size:16px}
.qf-pair{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px!important}
.qf-pair>.qo-key{min-height:56px;font-size:19px;letter-spacing:.04em}
.qf-body--live>.qf-big{margin-top:14px}
.qf-stop{margin-top:14px!important;font-size:17px;line-height:1.45}
.qf-stop a{color:var(--o-green)}
.qf-body--live .qf-links{margin-top:12px!important}
.qf-side>.qf-side-link,.qf-side>.qf-side-payouts,.qf-side>.qf-side-invite{padding:6px 8px 10px}
.qf-side h2{margin-bottom:10px;font-size:clamp(30px,2.75vw,44px)}
/* YOUR LINK, PAYOUTS and INVITE A CREATOR at the size of the other office panel titles (qf-live-v7: a 32 px cap at
   1440, the face's cap is .62 of its size) */
@media(min-width:1151px){.qf-side :is(.qf-side-link,.qf-side-payouts,.qf-side-invite)>h2{font-size:clamp(40px,3.54vw,51px);line-height:1}}
.qf .qf-side .qo-copy input:not([type="checkbox"]){font-size:16px;padding:8px 12px;min-height:58px}
.qf .qf-side .qf-side-invite .qo-copy input:not([type="checkbox"]){font-size:15px}
.qf .qf-side .qo-copy .qo-key{min-width:92px;font-size:24px}
.qf-side-payouts>p{font-size:17px;line-height:1.45}
.qf-wallet{display:flex;align-items:center;gap:22px;margin-top:10px!important;padding:9px 18px;border:2px solid #39463c;background:#010604;font-size:21px}
.qf-wallet b{color:var(--o-green);font:700 22px var(--o-display);letter-spacing:.04em}
.qf-wallet abbr{text-decoration:none}
.qf-wallet--pending b{color:#ffcb32}
.qf-side-payouts .qo-wallet-link{margin-top:10px;font-size:18px}
.qf-wallet-form{margin-top:12px}
.qf-copy__text{display:none;--qo-fit-min:13px;--qo-fit-wrap:15px}
/* From 1151 to 1399 px the step 3 copy field is narrower than the link: the link reads whole as wrapping text, as on a
   phone (integration, 26 Oct: at 1280 it read quityourjobfun.com/go/desk_jocke). */
@media(min-width:1151px) and (max-width:1399px){.qf-side .qf-copy__text{display:flex;align-items:center;flex:1;min-width:0;min-height:52px;margin:0!important;padding:8px 12px;border:2px solid #2f4538;border-radius:4px;background:#000a05;box-shadow:inset 0 2px 6px #000;font:400 15px/1.35 var(--o-body);color:var(--o-ink);overflow-wrap:anywhere;user-select:all}.qf .qf-side .qf-copy input:not([type="checkbox"]){display:none}}

/* ---------- phones (the phone office c1 and o4 with the phone step comps) */
@media(max-width:760px){
 .qo-rail [data-locked]{padding-left:10px;padding-right:28px}
 .qo-rail [data-locked]>.qf-lock{right:8px;width:12px;height:16px;margin-top:-8px}
 .qf-out__mast{display:none}
 .qf-out__title{margin:6px 0 10px 4px!important;font-size:clamp(40px,12.6vw,58px)}
 .qf-out__grid{grid-template-columns:minmax(0,1fr);gap:8px}
 .qf-out .qo-account-login{padding:14px 10px}
 .qf-out .qo-account-login h1{font-size:40px}
 .qf-plan{padding:12px 9px 14px}.qf-plan>h2{font-size:clamp(22px,6.6vw,30px);margin-bottom:14px}
 .qf-rates{gap:14px}
 .qf-rate{grid-template-columns:minmax(32px,auto) minmax(0,1fr) auto;column-gap:10px;min-height:86px;padding:6px 10px;border-width:10px;border-image-width:10px}
 .qf-rate:nth-child(2){margin-left:18px}.qf-rate:nth-child(3){margin-left:36px}
 .qf-rate+.qf-rate::before{left:-14px;top:-28px;width:8px;height:44px}
 .qf-rate__n{font-size:58px}.qf-rate__label{font-size:20px}.qf-rate__paid{font-size:15px}.qf-rate__value{font-size:38px}
 .qf-team{font-size:16px}
 .qf,.qf[data-step="connect"],.qf[data-step="link"]{display:flex;flex-direction:column;gap:8px}
 .qf-main{padding:10px 9px 14px}
 .qf[data-step="account"] .qf-side,.qf[data-step="pick"] .qf-side,.qf[data-step="pack"] .qf-side,.qf[data-step="xlogin"] .qf-side{display:none}
 .qf-steps{gap:6px;margin-bottom:12px!important;padding-bottom:10px!important}
 .qf-step{gap:8px;min-height:46px;padding:6px 4px;font-size:clamp(11px,3.3vw,14px);border-width:2px}
 .qf-step__n{width:28px;height:28px;border-width:2px;font-size:15px}
 .qf-step[data-state="done"] .qf-step__n::before{width:11px;height:6px;border-width:0 0 3px 3px}
 .qf[data-step="account"] .qf-step,.qf[data-step="pick"] .qf-step,.qf[data-step="link"] .qf-step{flex-direction:column;gap:6px;min-height:76px}
 .qf[data-step="account"] .qf-step__n,.qf[data-step="pick"] .qf-step__n,.qf[data-step="link"] .qf-step__n{width:36px;height:36px;font-size:19px}
 .qf .qf-title{font-size:clamp(28px,8.8vw,36px);margin-bottom:12px}
 .qf[data-step="account"] .qf-title{font-size:clamp(22px,7.2vw,30px)}
 .qf-label{font-size:16px;margin-bottom:8px}
 .qf-chips{gap:10px}
 .qf-chip>span{gap:6px;min-height:50px;padding:4px 5px;border-width:7px;border-image-width:7px;font-size:clamp(12px,3.6vw,15px)}
 .qf-mark{width:24px;height:24px}.qf-mark .q-pmark{width:22px;height:22px}
 .qf-box{width:20px;height:20px;border-width:2px}
 .qf-chip input:checked+span .qf-box::after{left:4px;top:0;width:6px;height:11px;border-width:0 3px 3px 0}
 .qf-at{left:16px;font-size:20px}
 .qf .qf-input input:not([type="checkbox"]){font-size:20px;min-height:52px}
 .qf .qf-input--at input:not([type="checkbox"]){padding-left:23px}
 .qf-big{min-height:54px;font-size:24px}
 .qf-small{font-size:16px}
 .qf-line{font-size:16px}
 .qf-how__row{gap:10px;min-height:96px;padding:0 8px}
 .qf-how__frame{width:88px}
 /* a phone frame is narrower than it is tall: each picture shows whole */
 .qf-how__pic,.qf-how__row:first-child .qf-how__pic{object-fit:contain;object-position:center}

 .qf-how__n{font-size:32px;min-width:22px;margin-top:8px}
 .qf-how__text{font-size:15px;line-height:1.38;padding:8px 0}
 .qf-status{font-size:16px;padding:6px 10px}
 .qf-notice{padding:8px 12px 10px}.qf-notice__head{font-size:18px}.qf-notice__text{font-size:16px}
 .qf-links{flex-direction:column;align-items:center;gap:10px}.qf-textlink{font-size:16px}
 .qf-reels{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:calc((100% - 20px)/2.3);max-height:none;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;padding:0 0 6px}
 .qf-reel{scroll-snap-align:start}
 .qf-side-reels>h2{font-size:clamp(20px,6vw,26px)}
 .qf .qf-title--live{font-size:clamp(38px,11vw,52px)}
 .qf-pill{font-size:clamp(14px,4.3vw,18px);min-height:46px;letter-spacing:.06em}
 .qf-first{padding:10px 12px 12px;border-width:10px;border-image-width:10px}
 .qf-first__label{font-size:15px}.qf-first__time{font-size:clamp(30px,9vw,40px)}.qf-first__then{font-size:16px}
 .qf-pair{gap:8px}.qf-pair>.qo-key{font-size:clamp(12px,3.6vw,15px);min-height:50px;padding-inline:6px}
 .qf-stop{font-size:16px}
 .qf[data-step="link"] .qf-side:empty{display:none}
 .qf-slot>.qo-panel{border:0;padding:0;margin-top:16px;background:none}
 .qf-slot>.qo-panel::before,.qf-slot>.qo-panel::after{content:none}
 .qf-slot>.qo-panel>h2{margin-bottom:8px;color:var(--o-green);font:700 17px/1.2 var(--o-display);letter-spacing:.08em;text-shadow:none}
 .qf .qf-slot .qo-copy input:not([type="checkbox"]){font-size:13px;min-height:48px;padding:6px}
 .qf-slot .qf-copy__text{--qo-fit-min:10.5px;--qo-fit-wrap:14px;display:flex;align-items:center;flex:1;min-width:0;min-height:48px;margin:0!important;padding:8px 8px;border:2px solid #2f4538;border-radius:4px;background:#000a05;box-shadow:inset 0 2px 6px #000;font:400 14px/1.35 var(--o-body);color:var(--o-ink);overflow-wrap:anywhere;user-select:all}
 .qf .qf-slot .qf-copy input:not([type="checkbox"]){display:none}
 .qf-slot .qo-copy .qo-key{flex:none;min-width:66px;padding-inline:8px;font-size:18px}
 .qf-slot .qf-side-payouts>p{font-size:16px}
 .qf-wallet{gap:12px;padding:10px 12px;font-size:17px}.qf-wallet b{font-size:17px}
 .qf-side-payouts .qo-wallet-link{font-size:16px}
}
@media(min-width:761px) and (max-width:1150px){.qf,.qf[data-step="account"],.qf[data-step="pick"],.qf[data-step="connect"],.qf[data-step="link"],.qf-out__grid{grid-template-columns:minmax(0,1fr)}}
@media(prefers-reduced-motion:reduce){.qf-cursor{animation:none}}
.qf-body--live .qf-textlink{font-size:17px}

/* ---------- OVERVIEW for a holder (approved comp b1, phone c1): YOUR $QUIT and YOUR PERKS over NFT AIRDROP and ON THE
   SHOW, at the comp's sizes (office audit, OVERVIEW (holder)) */
.qo .qo-holder-overview{grid-template-columns:minmax(0,1fr) minmax(0,1.16fr);align-items:stretch}
.qo .qo-holder-overview>.qo-panel{min-height:0;padding:4px 16px 10px}
.qo .qo-holder-overview>.qo-holder-balance,.qo .qo-holder-overview>.qo-holder-perks{min-height:0}
.qo .qo-holder-overview>.qo-holder-airdrop,.qo .qo-holder-overview>.qo-holder-show{min-height:0}
.qo .qo-holder-overview h2{margin-bottom:4px;font-size:clamp(34px,3.6vw,54px);line-height:1}
/* The figure keeps one line wherever it fits; a figure wider than its panel breaks after a thousands comma
   (office-account.js marks each with a word break), never past the panel. */
.qo .qo-holder-overview .qo-holding{margin:0;max-width:100%;font-size:clamp(56px,6.4vw,92px);line-height:.95;white-space:normal}
.qo .qo-holder-overview .qo-wallet-count{margin:2px 0 8px;font-size:19px}
/* The rank box: the dark riveted inset b1 draws (the panels' own steel, smaller), not a lit line. */
.qo .qo-holder-overview .qo-rank{margin:0 0 10px;padding:6px 10px;border-width:9px 11px;border-image:url(/runtime/quit/deck-art/bay.webp) 44 50 fill/12px 14px stretch}
.qo .qo-holder-overview .qo-rank-plate{position:relative;isolation:isolate;min-width:128px;padding:8px 10px;font:700 25px/1.1 var(--o-display);border:0;background:none;color:#171004}
.qo .qo-holder-overview .qo-rank-plate::before{content:"";position:absolute;inset:0;z-index:-1;border:solid transparent;border-width:8px 9px 11px;border-image:url(/runtime/quit/deck-art/key-orange.webp) 22 24 34 fill/8px 9px 11px stretch;filter:hue-rotate(24deg) saturate(1.05) brightness(1.18)}
.qo .qo-holder-overview .qo-rank-ends{font-size:18px}
.qo .qo-holder-overview .qo-rank>p{font:700 25px/1.1 var(--o-display);color:#ffcd36}
.qo .qo-holder-overview .qo-actions{margin-top:0;gap:14px;display:grid;grid-template-columns:1fr 1fr}
.qo .qo-holder-overview .qo-actions>.qo-key{min-height:56px;font-size:28px;white-space:normal}
/* The tags share one column, as wide as the longest tag (BREAK ROOM TV included) up to 42% of the list; a tag wider than
   that wraps inside its plate. The text sits clear of the plate's 7 px frame. */
.qo .qo-holder-overview .qo-perk-list{display:grid;grid-template-columns:fit-content(42%) minmax(0,1fr);column-gap:16px}
.qo .qo-holder-overview .qo-perk-list>div{grid-column:1/-1;grid-template-columns:128px minmax(0,1fr);grid-template-columns:subgrid;gap:16px;padding:3px 0}
.qo .qo-holder-overview .qo-perk-list dt{min-width:0;padding:7px 12px;border:0 solid transparent;border-radius:0;border-image:url(/runtime/quit/deck-art/key-dark.webp) 40 46 50 fill/7px stretch;font:700 20px/1 var(--o-display);color:var(--o-green);text-align:left;overflow-wrap:normal}
.qo .qo-holder-overview .qo-perk-list dd{font-size:16px;line-height:1.3;text-wrap:pretty}
/* each tag as wide as its own label (b1), at least 84 px, its label centred; the descriptions start after the widest */
@media(min-width:761px){.qo .qo-holder-overview .qo-perk-list dt{justify-self:start;width:max-content;max-width:100%;min-width:84px;text-align:center}}
.qo .qo-holder-overview .qo-next-perk{margin-top:8px;font:700 22px/1.2 var(--o-display)}
/* ON THE SHOW held (office-account.js SHOW_PANEL_PARKED): NFT AIRDROP takes the whole row, its three rows side by side */
.qo .qo-holder-overview>.qo-holder-airdrop:last-child{grid-column:1/-1}
/* Side by side, the three rows read as one ruled strip: a full rule above and below, a column rule between them. */
@media(min-width:1201px){
 .qo-holder-airdrop:last-child .qo-holder-rows{display:grid;grid-template-columns:repeat(3,minmax(0,auto));justify-content:stretch;border-bottom:1px solid var(--o-line)}
 .qo-holder-airdrop:last-child .qo-holder-rows>div{border-bottom:0;padding-inline:16px}
 .qo-holder-airdrop:last-child .qo-holder-rows>div:first-child{padding-left:4px}
 .qo-holder-airdrop:last-child .qo-holder-rows>div+div{border-left:1px solid var(--o-line)}
}
.qo-holder-rows{margin:0;border-top:2px solid var(--o-line)}
/* A name and its value share a line while they fit; a value that does not fit moves under its name, right-aligned. */
.qo-holder-rows>div{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 14px;min-height:50px;padding:6px 4px;border-bottom:1px solid var(--o-line)}
.qo-holder-rows dt{flex:0 1 auto;min-width:0;color:var(--o-green);font:700 25px/1.1 var(--o-display)}
.qo-holder-rows dd{margin:0 0 0 auto;display:flex;align-items:center;gap:18px;font:400 18px/1.3 var(--o-body);color:var(--o-ink);text-align:right;white-space:nowrap}
.qo-holder-rows .qo-never-yes dd,.qo-holder-rows .qo-never-no dd{font:700 25px/1.1 var(--o-display)}
.qo-holder-rows .qo-never-yes dd{color:var(--o-green)}
.qo-holder-rows .qo-never-no dd{color:var(--o-red)}
/* A value nobody can read yet: the office's dim UNKNOWN (the same word, drawn in capitals as everywhere else). */
.qo-holder-rows :is(.qo-never-unknown,.qo-row-unknown) dd{font:700 25px/1.1 var(--o-display);color:#8fb3a1;text-transform:uppercase}
.qo-holder-rows dd .qo-key{min-height:48px;min-width:150px;font-size:24px}
.qo-holder-show-rows dd b{color:var(--o-orange);font:700 25px/1.1 var(--o-display)}
.qo-holder-show-rows dd span{color:var(--o-ink)}
@media(min-width:761px) and (max-width:1200px){.qo .qo-holder-overview{grid-template-columns:minmax(0,1fr)}.qo .qo-holder-overview>.qo-panel{min-height:0}}
@media(max-width:760px){
 .qo .qo-holder-overview>.qo-panel{min-height:0;padding:10px 9px 12px}
 .qo .qo-holder-overview h2{font-size:clamp(30px,9vw,40px)}
 .qo .qo-holder-overview .qo-holding{font-size:clamp(52px,16vw,72px)}
 .qo .qo-holder-overview .qo-wallet-count{text-align:left;font-size:16px}
 .qo .qo-holder-overview .qo-rank-plate{min-width:0;font-size:20px}
 .qo .qo-holder-overview .qo-rank>p{font-size:18px}
 .qo .qo-holder-overview .qo-next-perk{font-size:18px;text-wrap:balance}
 .qo .qo-holder-overview .qo-rank-ends{font-size:12px}
 .qo .qo-holder-overview .qo-actions{grid-template-columns:1fr}
 .qo .qo-holder-overview .qo-actions>.qo-key{font-size:24px}
 .qo .qo-holder-overview .qo-perk-list{grid-template-columns:fit-content(30%) minmax(0,1fr);column-gap:10px}
 .qo .qo-holder-overview .qo-perk-list>div{grid-template-columns:106px minmax(0,1fr);grid-template-columns:subgrid;gap:10px}
 .qo .qo-holder-overview .qo-perk-list dt{padding:7px 10px 9px;font-size:15px;text-align:center;border-image:url(/runtime/quit/deck-art/key-green.webp) 22 24 34 fill/7px 8px 9px stretch;color:#002411}
 .qo .qo-holder-overview .qo-holding{text-align:left}
 .qo-holder-rows dt{font-size:19px}.qo-holder-rows dd{font-size:15px}.qo-holder-show-rows dd b,.qo-holder-rows .qo-never-yes dd,.qo-holder-rows .qo-never-no dd,.qo-holder-rows :is(.qo-never-unknown,.qo-row-unknown) dd{font-size:19px}
 .qo-holder-rows dd .qo-key{min-width:96px;font-size:18px;min-height:44px}
}