/* The HR exit desk on /apply and /resign (owner order, 23 Oct 2026): the strip under the Partner Program's title and the
   desk above its closing line (tools/go/site/apply/hr-desk.html, added by build-go applyPage to /apply only). Every rule
   is scoped under .qp, as partners.css is, and the keys and labels reuse its .qp-key, .qp-label and .qp-kicker.

   The desk is built to design B, THE HR FILE, approved by the owner on 25 Oct 2026: the cream form clipped over the
   sunset office, the riveted console of the home page's floors and a cream ledger with the HR stamps. The art carries no
   words. The office, the form, the ledger and the clip are generated plates cut by tools/go/cut-hr-desk-art.py
   (runtime/go/art/hr-*.webp); the console, its plates and the screen are the home page's own slices
   (runtime/quit/exit-lab-art, runtime/quit/deck-art), so the desk is made of the same hardware as the HOLDER WHITELIST.

   The desk's big title is the pixel face (Jersey 20 since the owner's choice of 26 Oct 2026, already heavy, so no copy
   of the letters widens its stems as one did for Silkscreen Regular): --qh-heavy gives it a dark pixel edge and a hard
   shadow down and right, in em so it follows the title's size, and a little tracking keeps each letter's edge apart. Every other heading,
   label, readout and table head is the readable display face (QUIT Display), drawn as it is (owner order, 25 Oct 2026:
   the pixel face only for the really big primary headings). */

/* ---------------------------------------------------------------- the strip */
.qp .qh-strip{
 display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin:0 0 12px;padding:5px 8px 5px 16px;
 border:2px solid #2d3a31;background:#040a07;box-shadow:0 2px 0 #000
}
.qp .qh-strip__line{flex:1 1 auto;min-width:0;color:var(--qp-green);font:600 clamp(13px,1.05vw,16px)/1.25 var(--qp-display);letter-spacing:.03em}
.qp .qh-strip__keys{display:flex;flex-wrap:wrap;gap:8px}
.qp .qh-strip__key{min-height:50px;font-size:clamp(12px,.95vw,15px)}
.qp .qh-sent{flex-basis:100%;margin:0 0 4px;color:var(--qp-green);font:700 14px/1.2 var(--qp-display);letter-spacing:.03em;overflow-wrap:anywhere}
.qp .qh-sent b{color:var(--qp-ink)}

/* ---------------------------------------------------------------- the desk */
.qp .qh{
 --qh-paper-ink:#1b1a14;--qh-paper-green:#17602f;--qh-paper-rust:#a83c00;--qh-stamp:#a81c14;--qh-paper-dim:#5d5340;
 --qh-edge:#140801;
 --qh-heavy:-.03em 0 var(--qh-edge),0 .03em var(--qh-edge),0 -.03em var(--qh-edge),-.03em -.03em var(--qh-edge),
  -.03em .03em var(--qh-edge),.03em 0 var(--qh-edge),.03em .03em var(--qh-edge),.03em -.03em var(--qh-edge),.1em .1em 0 var(--qh-drop,var(--qh-edge));
 container:qh/inline-size;margin:26px 0 0;scroll-margin-top:calc(var(--t-header-desktop,70px) + 12px)
}
.qp .qh :where(h2,h3,p,dl,dt,dd,table,fieldset,legend){margin:0}

/* the head: the sunset office, and over its quiet left the cream form on its clipboard */
.qp .qh-head{position:relative;isolation:isolate;display:flex;align-items:center;min-height:clamp(400px,33vw,490px);margin:0 0 18px;
 padding:72px 0 26px clamp(14px,3%,44px)}
.qp .qh-scene{position:absolute;inset:0;z-index:-1;display:block;overflow:hidden;border:3px solid #000;border-radius:6px;background:#160b05;
 box-shadow:0 3px 0 #000,inset 0 0 0 2px #2a2016}
.qp .qh-scene img{display:block;width:100%;height:100%;object-fit:cover;object-position:68% 36%}
.qp .qh-scene::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 70px #000c;pointer-events:none}
.qp .qh-form{position:relative;z-index:1;box-sizing:border-box;width:min(60%,860px);
 border:30px solid transparent;border-image:url(/runtime/go/art/hr-form.webp) 56 fill/56px stretch;
 padding:12px 18px 8px;color:var(--qh-paper-ink);transform:rotate(-.7deg);filter:drop-shadow(0 10px 0 #0009)}
.qp .qh-form::before{content:"";position:absolute;left:50%;top:-82px;z-index:2;width:62px;height:76px;margin-left:-31px;
 background:url(/runtime/go/art/hr-clip.webp) 50% 0/contain no-repeat;pointer-events:none}
.qp .qh-form .qh-form__req{margin:0 0 6px;color:var(--qh-paper-green);font:600 clamp(12px,.92vw,15px)/1.35 var(--qp-display);letter-spacing:.02em}
.qp .qh-title{margin:0 0 14px;padding:0 0 12px;border-bottom:5px solid var(--qp-orange);box-shadow:0 2px 0 #7a2a00;
 font:400 clamp(30px,3.55vw,54px)/1.02 var(--qp-pixel);letter-spacing:.03em;text-wrap:balance}
.qp .qh-title__pre{display:block;margin:0 0 8px;color:var(--qh-paper-rust);font:600 clamp(14px,1.18vw,19px)/1.2 var(--qp-display);letter-spacing:.03em}
.qp .qh-title__main{display:block;color:var(--qp-orange);text-shadow:var(--qh-heavy)}
.qp .qh-lead{color:var(--qh-paper-ink);font:400 clamp(19px,1.45vw,23px)/1.4 var(--qp-body)}
.qp .qh-sub{margin-top:10px;color:var(--qh-paper-ink);font:400 clamp(19px,1.45vw,23px)/1.4 var(--qp-body)}
.qp .qh-sub strong{color:var(--qh-paper-rust);font-weight:600}

/* the retirement math: the riveted console of the home page's floors */
.qp .qh-bay{container-type:inline-size;min-width:0;scroll-margin-top:calc(var(--t-header-desktop,70px) + 12px)}
.qp .qh-math{--qh-drop:#6b2200;box-sizing:border-box;margin:0;padding:6px 14px 18px;
 border:58px solid transparent;border-image:url(/runtime/quit/exit-lab-art/crt.webp) 130/58px round;background:#06110b padding-box}
.qp .qh-file{margin:0 0 6px;color:var(--qp-green);font:600 clamp(13px,1.05vw,16px)/1.2 var(--qp-display);letter-spacing:.04em}
.qp .qh-h3{margin:0 0 12px;color:var(--qp-orange);font:700 clamp(24px,2.8vw,42px)/1.1 var(--qp-pixel,"QUIT Pixel",monospace);letter-spacing:0;overflow-wrap:anywhere;
 text-shadow:.05em .05em 0 var(--qh-drop,var(--qh-edge))}
.qp .qh-lead--math{margin:0 0 18px;color:var(--qp-ink);font-size:clamp(18px,1.35vw,22px)}
.qp .qh-lead--math strong{color:var(--qp-orange);font-weight:600}

/* the two control plates: the salary on its green screen, the years as four keys */
.qp .qh-calc{display:grid;gap:14px;margin:0 0 14px}
@container (min-width:860px){.qp .qh-calc{grid-template-columns:repeat(2,minmax(0,1fr))}}
.qp .qh-panel{box-sizing:border-box;min-width:0;padding:4px 10px 10px;border:20px solid transparent;
 border-image:url(/runtime/quit/exit-lab-art/step.webp) 26 40 fill/20px 30px stretch;background:#030a06 padding-box}
.qp .qh-panel--salary{display:flex;flex-direction:column}
.qp .qh-panel--salary .qh-lcd{flex:1;display:flex;flex-direction:column;justify-content:center}
.qp .qh-panel__title{margin:0 0 10px;color:var(--qp-green);font:600 clamp(13px,1vw,15px)/1.2 var(--qp-display);letter-spacing:.04em}
.qp .qh-lcd{padding:12px 16px 8px;border:12px solid transparent;border-image:url(/runtime/quit/deck-art/lcd.webp) 44 56 fill/12px 14px stretch}
.qp .qh-lcd .qp-label{margin:0 0 6px;letter-spacing:.04em}
.qp .qh-control__value{display:block;margin:0 0 6px;color:#ff7a22;font:600 clamp(32px,3.35vw,48px)/1 var(--qp-count);letter-spacing:0;text-shadow:0 0 12px #ff610b66,.04em .04em 0 #4a1500}
.qp .qh-range{--fill:12%;width:100%;height:44px;margin:0;background:transparent;-webkit-appearance:none;appearance:none;cursor:pointer}
.qp .qh-range::-webkit-slider-runnable-track{height:14px;border:2px solid #000;box-shadow:inset 0 2px 0 #0008,0 1px 0 #2e4a37;
 background:linear-gradient(90deg,var(--qp-green) var(--fill),#07110b var(--fill))}
.qp .qh-range::-moz-range-track{height:14px;border:2px solid #000;box-shadow:inset 0 2px 0 #0008,0 1px 0 #2e4a37;
 background:linear-gradient(90deg,var(--qp-green) var(--fill),#07110b var(--fill))}
.qp .qh-range::-webkit-slider-thumb{width:30px;height:34px;margin-top:-12px;border:2px solid #1d0800;border-radius:0;background:var(--qp-orange);
 box-shadow:inset 0 3px 0 #ffb07a,inset 0 -4px 0 #a33a00,0 2px 0 #000;-webkit-appearance:none;appearance:none}
.qp .qh-range::-moz-range-thumb{width:26px;height:32px;border:2px solid #1d0800;border-radius:0;background:var(--qp-orange);
 box-shadow:inset 0 3px 0 #ffb07a,inset 0 -4px 0 #a33a00,0 2px 0 #000}
.qp .qh-range:focus-visible{outline:3px solid var(--qp-focus);outline-offset:2px}

.qp .qh-panel--years{display:grid;gap:8px;align-content:start}
.qp .qh-panel--years legend{float:left;width:100%;padding:0}
.qp .qh-years__out{display:block;margin:-2px 0 2px;color:var(--qp-green);font:600 16px/22px var(--qp-count)}
.qp .qh-year{position:relative;display:flex;align-items:center;min-height:46px;padding:8px 14px;border:2px solid #1d6e40;background:#020805;
 box-shadow:inset 0 0 0 1px #000,0 2px 0 #000;color:var(--qp-ink);font:400 clamp(17px,1.25vw,20px)/1.25 var(--qp-body);cursor:pointer}
.qp .qh-year input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.qp .qh-year input:checked+span{color:#ff8a3c}
.qp .qh-year:has(input:checked){border-color:var(--qp-orange);background:#170902;color:#ff8a3c;box-shadow:inset 0 0 0 1px #000,inset 0 0 18px #ff610b33,0 0 10px #ff610b55}
.qp .qh-year:has(input:focus-visible){outline:3px solid var(--qp-focus);outline-offset:2px}
@media(hover:hover){.qp .qh-year:hover{border-color:var(--qp-green)}.qp .qh-year:has(input:checked):hover{border-color:var(--qp-orange)}}

/* the live readouts: four data plates */
.qp .qh-live{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:0 0 18px}
.qp .qh-live__cell{min-width:0;padding:4px 8px 6px;border:16px solid transparent;border-image:url(/runtime/quit/exit-lab-art/chip.webp) 16 fill/16px stretch;background:#030a06 padding-box}
.qp .qh-live dt{margin:0 0 6px;color:var(--qp-green);font:600 12px/1.1 var(--qp-display);letter-spacing:.04em}
.qp .qh-live dd{color:var(--qp-ink);font:600 clamp(18px,1.4vw,22px)/1.15 var(--qp-count);overflow-wrap:anywhere}
.qp .qh-live dd small{display:block;margin-top:4px;color:#c9bf9f;font:400 15px/1.25 var(--qp-body)}

/* the ledger: the bag at each market cap, typed on cream paper, each HR status a rubber stamp */
.qp .qh-ledger{margin:0 0 16px;padding:6px 8px 10px;border:28px solid transparent;border-image:url(/runtime/go/art/hr-ledger.webp) 46 fill/46px stretch;
 overflow-x:auto;filter:drop-shadow(0 6px 0 #000a)}
.qp .qh-table{width:100%;border-collapse:collapse;color:var(--qh-paper-ink);font:400 clamp(17px,1.3vw,20px)/1.3 var(--qp-body)}
.qp .qh-table caption{caption-side:top;padding:0 0 10px;color:var(--qh-paper-green);font:600 clamp(14px,1.15vw,18px)/1.1 var(--qp-display);letter-spacing:.03em;
 text-align:left}
.qp .qh-table th,.qp .qh-table td{padding:9px 10px;border-bottom:1px solid #c7b384;text-align:left;vertical-align:middle}
.qp .qh-table thead th{padding-top:4px;border-bottom:2px solid #3b3222;color:var(--qh-paper-green);font:600 12px/1.25 var(--qp-display);letter-spacing:.03em;
 vertical-align:bottom}
.qp .qh-table tbody th{color:var(--qh-paper-ink);font:600 clamp(16px,1.3vw,20px)/1.1 var(--qp-display);letter-spacing:.02em;white-space:nowrap}
.qp .qh-table td small{display:block;margin-top:2px;color:var(--qh-paper-dim);font-size:14px}
.qp .qh-table .qh-bag{color:var(--qh-paper-green);font-weight:600;font-size:clamp(19px,1.45vw,23px);white-space:nowrap}
.qp .qh-table .qh-status-cell{padding-block:6px}
.qp .qh-stamp{display:inline-block;padding:4px 10px 5px;border:3px solid var(--qh-stamp);outline:1px solid var(--qh-stamp);outline-offset:-7px;
 color:var(--qh-stamp);font:600 clamp(14px,1.05vw,16px)/1.2 var(--qp-body);letter-spacing:.01em;transform:rotate(-2.5deg);mix-blend-mode:multiply;opacity:.9}
.qp .qh-table tbody tr:nth-child(2n) .qh-stamp{transform:rotate(1.8deg)}
.qp .qh-table tbody tr:nth-child(3n) .qh-stamp{transform:rotate(-1.2deg)}
.qp .qh-table tbody tr:nth-child(5n) .qh-stamp{transform:rotate(2.6deg)}
.qp .qh-table tr.qh-past{opacity:.55}

.qp .qh-buyrow{display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px;margin:0}
.qp .qh-buy{min-height:62px;padding-inline:26px;font-size:clamp(16px,1.35vw,22px)}
.qp .qh-note{margin:0;color:#c9bf9f}

/* ---------------------------------------------------------------- tablets: the office above, the form over its foot */
@container qh (max-width:999px){
 .qp .qh-head{display:block;min-height:0;padding:0}
 .qp .qh-scene{position:relative;inset:auto;z-index:0;aspect-ratio:16/7}
 .qp .qh-scene img{object-position:70% 34%}
 .qp .qh-form{width:auto;margin:-64px 10px 0;transform:none}
 .qp .qh-form::before{top:-80px}
 .qp .qh-live{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ---------------------------------------------------------------- phones */
@media(max-width:767px){
 .qp .qh-strip{margin-bottom:10px;padding:5px;gap:6px}
 .qp .qh-strip__line,.qp .qh-strip__key--math{display:none}
 .qp .qh-strip__keys{flex:1 1 100%}
 .qp .qh-strip__key{width:100%;min-height:56px;padding-inline:10px;font-size:13px;line-height:1.25;letter-spacing:.03em}
 /* The phone's reel is cut to the room above the pinned key (partners.css, through --qp-auto-h): the strip's height
    (its key, padding, border and margin, 80 px) comes off it too, so nothing of the reel sits under BECOME A PARTNER. */
 .qp .qh-strip~.qp-stage{--qp-auto-h:calc(46px + 80px)}
 .qp .qh{margin-top:20px}
 .qp .qh-scene{aspect-ratio:1254/965;border-width:2px}
 .qp .qh-scene img{object-position:50% 40%}
 .qp .qh-form{margin:-58px 6px 0;border-width:22px;border-image-width:40px;padding:10px 6px 6px}
 .qp .qh-form::before{top:-62px;width:46px;height:56px;margin-left:-23px}
 .qp .qh-title{font-size:clamp(28px,8.6vw,38px);border-bottom-width:4px}
 .qp .qh-lead,.qp .qh-sub{font-size:18px}
 .qp .qh-math{padding:4px 2px 12px;border-width:34px;border-image-width:34px}
 .qp .qh-h3{font-size:clamp(22px,6.4vw,28px)}
 .qp .qh-lead--math{font-size:18px}
 .qp .qh-panel{padding:2px 4px 8px;border-width:16px 18px;border-image-width:16px 24px}
 .qp .qh-lcd{padding:10px 10px 6px}
 .qp .qh-control__value{font-size:clamp(20px,7vw,28px);white-space:nowrap}
 .qp .qh-year{font-size:17px}
 .qp .qh-live{gap:8px}
 .qp .qh-live__cell{padding:2px 4px 4px;border-width:12px;border-image-width:12px}
 .qp .qh-live dd{font-size:16px}
 .qp .qh-ledger{padding:2px 0 6px;border-width:20px 16px;border-image-width:32px}
 .qp .qh-buy{width:100%}
 /* the ledger becomes one card per market cap: the cap and its stamp on top, the bag under them, then the facts */
 .qp .qh-table,.qp .qh-table tbody{display:block}
 .qp .qh-table caption{display:block;padding-right:34px;font-size:15px}
 .qp .qh-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
 .qp .qh-table tr{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-areas:"cap cap stamp" "bag bag bag" "imp pct cost";gap:6px 10px;
  padding:12px 2px;border-bottom:2px solid #c7b384}
 .qp .qh-table tr:last-child{border-bottom:0}
 .qp .qh-table th,.qp .qh-table td{padding:0;border:0}
 .qp .qh-table tbody th{grid-area:cap;align-self:center;font-size:20px}
 .qp .qh-table .qh-status-cell{grid-area:stamp;justify-self:end;align-self:center;padding:0}
 .qp .qh-stamp{font-size:13px;padding:3px 7px 4px;text-align:center}
 .qp .qh-table .qh-bag{grid-area:bag;font-size:24px}
 .qp .qh-table .qh-implied{grid-area:imp}.qp .qh-table .qh-pct{grid-area:pct}.qp .qh-table .qh-cost{grid-area:cost}
 .qp .qh-table td:not(.qh-status-cell)::before{content:attr(data-label);display:block;margin:0 0 2px;color:var(--qh-paper-green);
  font:600 11px/1.25 var(--qp-display);letter-spacing:.03em}
 /* the three facts' labels wrap to three lines in a phone's columns; each keeps three, so the values line up */
 .qp .qh-table :is(.qh-implied,.qh-pct,.qh-cost)::before{min-height:3.75em}
 .qp .qh-table td{font-size:16px}
 .qp .qh-table td small{font-size:13px}
}