/* THE NEW ORG CHART and THE SIGN ON THE DOOR, between SEND IT and BUY $QUIT IN 3 STEPS (tools/quit-site/org-chart.mjs).
   THE WAR ROOM (B1) and THE CLIPPER ARMY (B2 on a desktop, PB2 on a phone), approved by the owner on 23 Oct 2026; the
   ladder (A2) and the sign (B1, PB1) as approved on 22 Oct 2026. The words are live HTML over text-free plates
   (runtime/quit/org-chart-art/), placed in the plates' own proportions so the composition holds at every width.

   Sizes are in the frames' own pixels through the section's width (container units): --w is one pixel of the 1672-wide
   war room and army plates, --u one pixel of the 1536-wide ladder and sign frames, --v one pixel of the 853-wide phone
   frames, --p one pixel of the 941-wide war room phone plate and --q one pixel of the 887-wide PB2 phone frame. The pixel
   face sets only the big titles (YOU QUIT, THE INTERNET IS OUR BILLBOARD, the ladder's two, the sign's), the readable
   display face the labels, chips, keys and figures, the body face the lines (owner order, 25 Oct 2026). Colours are the
   frames': near-black, forest, mint, safety orange, cream, tan, brass. */
.q-oc,.q-sign{--oc-black:#0b0f0c;--oc-panel:#0d1a12;--oc-forest:#13261a;--oc-mint:#3ceb86;--oc-orange:#ff6a13;--oc-cream:#efe3c4;--oc-ink:#f4e7cb;--oc-dark:#140b04;--oc-tan:#d69a55;--oc-gold:#c9a24b;--oc-grey:#7e8a80;
 --u:calc(100cqw / 1536);--v:calc(100cqw / 853);--w:calc(100cqw / 1672);--p:calc(100cqw / 941);--q:calc(100cqw / 887);
 position:relative;container-type:inline-size;color:var(--oc-ink);background:#030805;scroll-margin-top:var(--t-header-desktop,72px)}
.q-oc *,.q-sign *{box-sizing:border-box}
:where(.q-oc,.q-sign) :is(h2,h3,p,ul,ol,dl,dt,dd,figure){margin:0;padding:0}
:where(.q-oc,.q-sign) :is(ul,ol){list-style:none}
.q-oc picture,.q-sign picture{display:block}
.q-oc picture img,.q-sign picture img{display:block;width:100%;height:auto}
/* Rivets at a panel's four corners, the frames' small brass and mint screw heads. */
.q-oc-next,.q-oc-sign,.q-sign__panel{--rivet:var(--oc-mint);--rivet-size:calc(9 * var(--u));--rivet-at:calc(8 * var(--u));background-image:radial-gradient(circle,var(--rivet) 0 32%,var(--oc-black) 34% 52%,transparent 54%),radial-gradient(circle,var(--rivet) 0 32%,var(--oc-black) 34% 52%,transparent 54%),radial-gradient(circle,var(--rivet) 0 32%,var(--oc-black) 34% 52%,transparent 54%),radial-gradient(circle,var(--rivet) 0 32%,var(--oc-black) 34% 52%,transparent 54%);background-repeat:no-repeat;background-size:var(--rivet-size) var(--rivet-size);background-position:var(--rivet-at) var(--rivet-at),calc(100% - var(--rivet-at)) var(--rivet-at),var(--rivet-at) calc(100% - var(--rivet-at)),calc(100% - var(--rivet-at)) calc(100% - var(--rivet-at))}

/* B1, THE WAR ROOM: one plate (1672 x 941) carries the windows, the map wall, the platform with the empty chair and its
   blank plaque, the four stations and the empty steel panel under each; the headline sits over the map's calm corner, YOU
   on the plaque, each sign on its station's panel, and Gary's cutout flies out over the section's top edge. A sign
   taller than its panel grows the war room rather than leaving it. */
.q-oc-tower{position:relative;display:grid;grid-template-columns:minmax(0,1fr);background:#07090a}
.q-oc-tower>*{grid-area:1/1}
.q-oc-head{position:absolute;inset:0 0 auto;z-index:2;padding:calc(30 * var(--w)) calc(40 * var(--w)) 0;pointer-events:none}
.q-oc-head>*{pointer-events:auto}
.q-oc-memo{display:inline-block;padding:calc(8 * var(--w)) calc(14 * var(--w)) calc(7 * var(--w));border:calc(3 * var(--w)) solid var(--oc-orange);background:var(--oc-black);color:var(--oc-orange);font:400 calc(19 * var(--w))/1 var(--t-font-display);letter-spacing:.04em}
.q-oc-title{margin-top:calc(6 * var(--w));font:700 calc(64 * var(--w))/1 var(--t-font-pixel, "QUIT Pixel", monospace);letter-spacing:0}
.q-oc-title>span{display:table;padding:calc(4 * var(--w)) calc(14 * var(--w)) calc(3 * var(--w)) calc(9 * var(--w));margin-left:calc(-9 * var(--w));background:var(--oc-black)}
.q-oc-title__quit{color:var(--oc-cream)}
.q-oc-title__ai{color:var(--oc-orange)}
.q-oc-lede{display:inline-block;margin:0 0 0 calc(-9 * var(--w));padding:calc(5 * var(--w)) calc(12 * var(--w)) calc(6 * var(--w)) calc(9 * var(--w));background:var(--oc-black);color:var(--oc-ink);font:400 calc(19 * var(--w))/1.2 var(--t-font-body);white-space:nowrap}
.q-oc-lastbuy{position:absolute;top:calc(34 * var(--w));right:calc(34 * var(--w));display:flex;align-items:center;gap:calc(12 * var(--w));padding:calc(12 * var(--w)) calc(16 * var(--w));border:calc(3 * var(--w)) solid #2a3a30;outline:calc(2 * var(--w)) solid #050806;background:var(--oc-black);color:var(--oc-mint);font:400 calc(20 * var(--w))/1 var(--t-font-display);letter-spacing:.04em;white-space:nowrap}
.q-oc-lastbuy__dot{flex:none;width:calc(15 * var(--w));height:calc(15 * var(--w));border-radius:50%;background:var(--oc-mint);box-shadow:0 0 calc(6 * var(--w)) var(--oc-mint)}
/* YOU on the plate's blank cream plaque, on the platform under the empty chair. */
.q-oc-boss{position:absolute;left:calc(748 * var(--w));top:calc(413 * var(--w));z-index:1;width:calc(170 * var(--w));height:calc(79 * var(--w));display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#16120b}
.q-oc-boss__you{font:700 calc(38 * var(--w))/.95 var(--t-font-display);letter-spacing:.02em}
.q-oc-boss__line{margin-top:calc(4 * var(--w));font:600 max(12px,calc(14.5 * var(--w)))/1 var(--t-font-body);letter-spacing:.03em;white-space:nowrap}
/* Gary, cut out, rockets out of the war room over the section's top edge (B1). Decorative and click-through. */
.q-oc .q-oc-gary{position:absolute;left:calc(1078 * var(--w));top:calc(-92 * var(--w));z-index:3;width:calc(340 * var(--w));height:auto;pointer-events:none;filter:drop-shadow(0 calc(12 * var(--w)) calc(10 * var(--w)) rgba(0,0,0,.55));animation:q-oc-fly 3.2s ease-in-out infinite alternate}
@keyframes q-oc-fly{from{transform:translate(0,0) rotate(0deg)}to{transform:translate(calc(10 * var(--w)),calc(-14 * var(--w))) rotate(-2deg)}}
/* The stations: each list item spans its station on the plate (from its top at 508) and the steel panel under it (736
   to 906); its sign fills the panel. Hovering or focusing a station outlines it in mint (B1's live station). */
.q-oc-staff{align-self:start;z-index:1;display:grid;grid-template-columns:calc(32 * var(--w)) calc(382 * var(--w)) calc(20 * var(--w)) calc(390 * var(--w)) calc(22 * var(--w)) calc(392 * var(--w)) calc(18 * var(--w)) calc(386 * var(--w)) minmax(0,1fr);margin-top:calc(508 * var(--w))}
.q-oc-room{grid-row:1;position:relative;display:flex;flex-direction:column;min-height:calc(398 * var(--w));padding:calc(228 * var(--w)) calc(9 * var(--w)) 0}
.q-oc-room[data-oc-room="trader"]{grid-column:2}
.q-oc-room[data-oc-room="quitters"]{grid-column:4}
.q-oc-room[data-oc-room="stage"]{grid-column:6}
.q-oc-room[data-oc-room="treasury"]{grid-column:8}
.q-oc-room::before{content:"";position:absolute;inset:0;z-index:1;border:calc(4 * var(--w)) solid transparent;pointer-events:none;transition:border-color .18s ease-out,box-shadow .18s ease-out}
.q-oc-room:is(:hover,:focus-within)::before{border-color:var(--oc-mint);box-shadow:0 0 calc(20 * var(--w)) rgba(60,235,134,.55),inset 0 0 calc(22 * var(--w)) rgba(60,235,134,.28)}
.q-oc-room__art{display:none}
.q-oc-room__go{position:absolute;inset:0;z-index:2}
.q-oc-room__go:focus-visible{outline:3px solid var(--oc-cream);outline-offset:2px}
.q-oc-sign{flex:1;display:flex;flex-direction:column;align-items:flex-start;min-height:calc(170 * var(--w));padding:calc(13 * var(--w)) calc(15 * var(--w)) calc(12 * var(--w));border:calc(3 * var(--w)) solid var(--oc-mint);background-color:rgba(5,10,7,.94);--rivet:#c98a2e;--rivet-size:calc(8 * var(--w));--rivet-at:calc(3 * var(--w));transition:transform .18s ease-out}
.q-oc-room:is(:hover,:focus-within) .q-oc-sign{transform:translateY(calc(-6 * var(--w)))}
.q-oc-sign__title{margin-bottom:calc(8 * var(--w));color:var(--oc-cream);font:700 calc(21 * var(--w))/1 var(--t-font-display);letter-spacing:.04em;white-space:nowrap}
.q-oc-sign__line{color:var(--oc-ink);font:400 calc(16 * var(--w))/1.2 var(--t-font-body)}
.q-oc-chip{margin-top:auto;padding:calc(6 * var(--w)) calc(14 * var(--w)) calc(5 * var(--w));background:var(--oc-mint);color:var(--oc-black);font:700 max(12px,calc(14 * var(--w)))/1 var(--t-font-display);letter-spacing:.04em;white-space:nowrap}
.q-oc-chip[data-chip-state="soon"]{background:#d6a23d}
.q-oc-chip:is([data-chip-state="off"],[data-chip-state="reading"],[data-chip-state="unknown"],[data-chip-state="unavailable"]){background:#3a463e;color:#c9d2c6}
.q-oc-sign__line+.q-oc-sign__line{margin-top:calc(3 * var(--w))}
.q-oc-sign__line:last-of-type{margin-bottom:calc(9 * var(--w))}

/* B2, THE CLIPPER ARMY: one plate (1672 x 941) carries the steel wall, the empty map screen and the console; the words
   stand on the wall, the pins, marks and reels on the map's box (540, 80; 1120 x 552), the dial on the console's empty
   screen (962, 654). The words and the dial grow the floor if they ever need more height than the plate. */
.q-oc-army{position:relative;display:grid;grid-template-columns:minmax(0,1fr);background:#050806;scroll-margin-top:var(--t-header-desktop,72px)}
.q-oc-army>.q-oc-army__plate,.q-oc-army>.q-oc-army__copy,.q-oc-army>.q-oc-dial{grid-area:1/1}
.q-oc-army__copy{align-self:start;justify-self:start;z-index:1;display:flex;flex-direction:column;align-items:flex-start;width:calc(468 * var(--w));margin:calc(100 * var(--w)) 0 calc(30 * var(--w)) calc(32 * var(--w))}
.q-oc-army__memo{padding:calc(8 * var(--w)) calc(12 * var(--w)) calc(7 * var(--w));border:calc(3 * var(--w)) solid var(--oc-orange);background:var(--oc-black);color:var(--oc-orange);font:400 max(12px,calc(16 * var(--w)))/1 var(--t-font-display);letter-spacing:.04em;white-space:nowrap}
.q-oc-army__title{margin-top:calc(14 * var(--w));color:var(--oc-cream);font:700 calc(48 * var(--w))/1.06 var(--t-font-pixel, "QUIT Pixel", monospace);letter-spacing:0}
.q-oc-army__line{display:block}
.q-oc-army__line--hot{color:var(--oc-orange)}
.q-oc-army__lede{margin-top:calc(12 * var(--w));color:var(--oc-ink);font:400 max(12px,calc(17 * var(--w)))/1.3 var(--t-font-body)}
.q-oc-army__steps{display:flex;flex-direction:column;gap:calc(10 * var(--w));width:100%;margin-top:calc(20 * var(--w))}
.q-oc-army__step{display:grid;grid-template-columns:calc(86 * var(--w)) minmax(0,1fr);align-items:center;min-height:calc(60 * var(--w));border:calc(3 * var(--w)) solid #26332b;outline:calc(2 * var(--w)) solid #050806;background:#0b100d}
.q-oc-army__thumb{display:none}
.q-oc-army__num{display:grid;place-items:center;align-self:stretch;border-right:calc(2 * var(--w)) solid #26332b;color:var(--oc-orange);font:700 calc(34 * var(--w))/1 var(--t-font-display)}
.q-oc-army__label{padding:calc(6 * var(--w)) calc(14 * var(--w));color:var(--oc-cream);font:700 max(12px,calc(16 * var(--w)))/1.15 var(--t-font-display);letter-spacing:.04em}
.q-oc-army__keys{display:grid;grid-template-columns:minmax(0,1.75fr) minmax(0,1fr);gap:calc(12 * var(--w));width:100%;margin-top:calc(16 * var(--w))}
.q-oc .c-btn.q-oc-army__join,.q-oc .c-btn.q-oc-army__buy{display:flex;min-height:max(44px,calc(58 * var(--w)));padding:0 calc(10 * var(--w));border-radius:0;font:700 max(12px,calc(15 * var(--w)))/1 var(--t-font-display);letter-spacing:.03em;white-space:nowrap}
.q-oc .c-btn.q-oc-army__buy{border:calc(3 * var(--w)) solid var(--oc-mint);background:transparent;color:var(--oc-mint)}
.q-oc-army__pay{margin-top:calc(10 * var(--w));color:var(--oc-mint);font:400 max(12px,calc(13.5 * var(--w)))/1.3 var(--t-font-body)}
.q-oc-army__map{position:absolute;left:calc(540 * var(--w));top:calc(80 * var(--w));z-index:1;width:calc(1120 * var(--w));height:calc(552 * var(--w));pointer-events:none}
.q-oc .q-oc-army__mapplate{display:none}
/* The pins: small phones on the map's land, each one of the eight reel stills, lit by the dial in their order. */
.q-oc-pins{position:absolute;inset:0}
.q-oc-pin{position:absolute;width:calc(12 * var(--w));height:calc(21 * var(--w));margin:calc(-10.5 * var(--w)) 0 0 calc(-6 * var(--w));border:calc(1.5 * var(--w)) solid #d8f5e2;border-radius:calc(2 * var(--w));background:#0b0f0c var(--sprite) calc(var(--face) * 100% / (var(--tiles) - 1)) 0/calc(var(--tiles) * 100%) 100% no-repeat;box-shadow:0 0 calc(5 * var(--w)) rgba(60,235,134,.75);opacity:0;transform:scale(.3);transition:opacity .25s ease-out,transform .3s cubic-bezier(.2,1.6,.4,1)}
.q-oc-pin[data-on]{opacity:1;transform:none}
/* The official platform marks float over the map. */
.q-oc-mark{position:absolute;z-index:1;display:grid;place-items:center;width:calc(56 * var(--w));height:calc(56 * var(--w));margin:calc(-28 * var(--w)) 0 0 calc(-28 * var(--w));border:calc(2 * var(--w)) solid rgba(239,227,196,.3);border-radius:calc(12 * var(--w));background:#0b0f0c;box-shadow:0 0 0 calc(2 * var(--w)) #050806,0 0 calc(16 * var(--w)) rgba(60,235,134,.35);animation:q-oc-bob 3.6s ease-in-out infinite alternate}
.q-oc-mark:nth-of-type(even){animation-delay:-1.8s}
.q-oc-mark .q-pmark{width:calc(32 * var(--w));height:calc(32 * var(--w))}
@keyframes q-oc-bob{from{transform:translateY(0)}to{transform:translateY(calc(-6 * var(--w)))}}
/* The reels: the still in a phone from cut down, its cutout climbing out over the phone's top. */
.q-oc-phone{position:absolute;z-index:2;aspect-ratio:var(--ar)}
.q-oc-phone__body{position:absolute;left:-7%;right:-7%;top:calc(var(--cut) * 100% - 5%);bottom:-6%;border:calc(3 * var(--w)) solid #3b4a41;border-radius:calc(16 * var(--w));background:#050807;box-shadow:0 0 0 calc(2 * var(--w)) #0b0f0c,0 calc(10 * var(--w)) calc(22 * var(--w)) rgba(0,0,0,.6),0 0 calc(22 * var(--w)) rgba(60,235,134,.4)}
.q-oc .q-oc-phone__reel,.q-oc .q-oc-phone__pop{position:absolute;inset:0;display:block;width:100%;height:100%}
.q-oc-phone__reel{clip-path:inset(calc(var(--cut) * 100%) 0 0 0 round calc(8 * var(--w)))}
.q-oc-phone__pop{clip-path:inset(0 0 calc((1 - var(--cut)) * 100% - 3%) 0);filter:drop-shadow(0 calc(6 * var(--w)) calc(6 * var(--w)) rgba(0,0,0,.45));animation:q-oc-peek 2.8s ease-in-out infinite alternate}
.q-oc-phone:nth-child(odd) .q-oc-phone__pop{animation-delay:-1.4s}
@keyframes q-oc-peek{from{transform:translateY(0)}to{transform:translateY(calc(-5 * var(--w)))}}
.q-oc-phone--lead{display:none}
/* SCALE THE ARMY on the console's empty screen. */
.q-oc-dial{align-self:start;justify-self:start;z-index:1;display:flex;flex-direction:column;width:calc(516 * var(--w));min-height:calc(238 * var(--w));margin:calc(652 * var(--w)) 0 calc(36 * var(--w)) calc(962 * var(--w));color:var(--oc-ink)}
.q-oc-dial__title{color:var(--oc-cream);font:700 calc(24 * var(--w))/1 var(--t-font-display);letter-spacing:.04em;text-align:center}
.q-oc-dial__range{--fill:50%;width:100%;height:max(44px,calc(36 * var(--w)));margin:calc(8 * var(--w)) 0 0;background:transparent;cursor:pointer;-webkit-appearance:none;appearance:none}
.q-oc-dial__range::-webkit-slider-runnable-track{height:calc(16 * var(--w));border:calc(2 * var(--w)) solid #3a463e;border-radius:calc(8 * var(--w));background:linear-gradient(90deg,var(--oc-orange) var(--fill),#101612 var(--fill))}
.q-oc-dial__range::-moz-range-track{height:calc(16 * var(--w));border:calc(2 * var(--w)) solid #3a463e;border-radius:calc(8 * var(--w));background:linear-gradient(90deg,var(--oc-orange) var(--fill),#101612 var(--fill))}
.q-oc-dial__range::-webkit-slider-thumb{width:max(24px,calc(34 * var(--w)));height:max(24px,calc(34 * var(--w)));margin-top:calc(-11 * var(--w));border:calc(3 * var(--w)) solid #ffb27a;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ffc59b,var(--oc-orange) 55%,#a83c00);box-shadow:0 0 calc(12 * var(--w)) rgba(255,106,19,.7);-webkit-appearance:none;appearance:none}
.q-oc-dial__range::-moz-range-thumb{width:max(24px,calc(34 * var(--w)));height:max(24px,calc(34 * var(--w)));border:calc(3 * var(--w)) solid #ffb27a;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ffc59b,var(--oc-orange) 55%,#a83c00);box-shadow:0 0 calc(12 * var(--w)) rgba(255,106,19,.7)}
.q-oc-dial__range:focus-visible{outline:3px solid var(--oc-cream);outline-offset:4px}
.q-oc-dial__ticks{display:flex;justify-content:space-between;margin-top:calc(2 * var(--w));color:var(--oc-cream);font:700 max(12px,calc(13 * var(--w)))/1 var(--t-font-display)}
.q-oc-dial__label{margin-top:calc(10 * var(--w));color:var(--oc-cream);font:700 max(12px,calc(14 * var(--w)))/1 var(--t-font-display);letter-spacing:.04em;text-align:center}
.q-oc-dial__label span{color:var(--oc-orange)}
.q-oc-dial__readouts{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr) minmax(0,1.25fr);gap:calc(10 * var(--w));margin-top:calc(12 * var(--w))}
.q-oc-dial__cell{display:flex;flex-direction:column;align-items:center;gap:calc(8 * var(--w));min-width:0;padding:calc(9 * var(--w)) calc(4 * var(--w));border:calc(2 * var(--w)) solid var(--oc-mint);background:#050a07}
.q-oc-dial__cell dt{color:var(--oc-mint);font:700 max(12px,calc(11.5 * var(--w)))/1 var(--t-font-display);letter-spacing:.04em;white-space:nowrap}
.q-oc-dial__cell dd{color:var(--oc-mint);font:700 calc(18 * var(--w))/1 var(--t-font-display);font-variant-numeric:tabular-nums;white-space:nowrap;text-shadow:0 0 calc(8 * var(--w)) rgba(60,235,134,.6)}
.q-oc-dial__note{margin-top:calc(9 * var(--w));color:var(--oc-ink);font:400 max(12px,calc(13 * var(--w)))/1.2 var(--t-font-body);text-align:center}
@media (prefers-reduced-motion:reduce){.q-oc .q-oc-gary,.q-oc-mark,.q-oc-phone__pop{animation:none}.q-oc-pin{transition:none}}

/* A2, the ladder: the live strip in the site's riveted bezel, then the climb on the left and NEXT FOR HOLDERS on the right. */
.q-oc-ladder{display:grid;grid-template-columns:minmax(0,920fr) minmax(0,575fr);column-gap:calc(20 * var(--u));padding:calc(14 * var(--u)) calc(11 * var(--u)) calc(54 * var(--u));background:#050806}
.q-oc-strip{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-items:center;min-height:calc(132 * var(--u));margin-bottom:calc(42 * var(--u));border-style:solid;border-width:calc(18 * var(--u)) calc(34 * var(--u));border-image:url(/runtime/quit/pages-art/strip.png) 26 46 fill / calc(18 * var(--u)) calc(34 * var(--u)) stretch;background:#020504 padding-box}
.q-oc-strip__cell{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(18 * var(--u));min-width:0;padding:calc(4 * var(--u)) calc(8 * var(--u));border-left:calc(2 * var(--u)) solid var(--oc-mint);text-align:center}
.q-oc-strip__cell:first-child{border-left:0}
/* LAST BUY is hidden while the newest buy is ten minutes old or more (runtime/quit/org-chart.js): the strip closes up
   to its three other cells. */
.q-oc-lastbuy[hidden],.q-oc-strip__cell[hidden]{display:none}
.q-oc-strip:has(>.q-oc-strip__cell[hidden]){grid-template-columns:repeat(3,minmax(0,1fr))}
.q-oc-strip__cell[hidden]+.q-oc-strip__cell{border-left:0}
.q-oc-strip dt{color:var(--oc-mint);font:700 max(10px,calc(15 * var(--u)))/1 var(--t-font-display);letter-spacing:.04em}
.q-oc-strip dd{color:var(--oc-cream);font:700 calc(25 * var(--u))/1 var(--t-font-display);letter-spacing:0;white-space:nowrap}
.q-oc-climb{min-width:0;padding-left:calc(14 * var(--u))}
.q-oc-climb__title{margin:calc(4 * var(--u)) 0 calc(18 * var(--u)) calc(14 * var(--u));color:var(--oc-cream);font:700 calc(56 * var(--u))/1.08 var(--t-font-pixel, "QUIT Pixel", monospace);letter-spacing:.02em}
.q-oc-stairs{position:relative;width:calc(905 * var(--u))}
.q-oc-faces{display:none;position:absolute;inset:0;pointer-events:none}
.q-oc-steps{position:absolute;inset:0;pointer-events:none}
.q-oc-step{position:absolute;display:flex;flex-direction:column;padding:calc(24 * var(--u)) calc(12 * var(--u)) 0 calc(22 * var(--u));color:#17130c}
.q-oc-step[data-oc-step="1"]{left:3.4%;top:78.6%;width:30.5%;height:19.4%;padding-top:calc(13 * var(--u))}
.q-oc-step[data-oc-step="2"]{left:34.4%;top:63.8%;width:29.7%;height:34.2%}
.q-oc-step[data-oc-step="3"]{left:64.6%;top:49.4%;width:34.8%;height:48.6%}
.q-oc-step__amount{font:700 calc(21 * var(--u))/1 var(--t-font-display);letter-spacing:0;white-space:nowrap}
.q-oc-step__line{font:400 calc(20 * var(--u))/1.2 var(--t-font-body)}
.q-oc-step__amount+.q-oc-step__line{margin-top:calc(10 * var(--u))}
.q-oc-step__line+.q-oc-step__line{margin-top:calc(14 * var(--u))}
.q-oc-next{display:flex;flex-direction:column;align-items:stretch;align-self:start;margin-top:calc(-4 * var(--u));padding:calc(40 * var(--u)) calc(38 * var(--u)) calc(30 * var(--u));border:calc(3 * var(--u)) solid #2f6b45;outline:calc(2 * var(--u)) solid var(--oc-mint);outline-offset:calc(-12 * var(--u));background-color:var(--oc-panel);--rivet:#3d5a46;--rivet-at:calc(5 * var(--u))}
.q-oc-next__title{color:var(--oc-mint);font:700 calc(35 * var(--u))/1 var(--t-font-pixel, "QUIT Pixel", monospace);letter-spacing:.06em}
.q-oc-next__line{margin-top:calc(20 * var(--u));color:var(--oc-ink);font:400 calc(25 * var(--u))/1.25 var(--t-font-body)}
.q-oc-clock{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:calc(10 * var(--u));margin-top:calc(36 * var(--u))}
.q-oc-clock[hidden],.q-oc-next [hidden]{display:none}
.q-oc-clock__cell{display:grid;justify-items:center;gap:calc(13 * var(--u))}
.q-oc-clock__digits{display:grid;place-items:center;width:100%;aspect-ratio:113/100;border:calc(2 * var(--u)) solid #2e3d33;background:#060a07;color:var(--oc-orange);font:700 calc(54 * var(--u))/1 var(--t-font-display);font-variant-numeric:tabular-nums}
.q-oc-clock__unit{color:var(--oc-mint);font:700 max(12px,calc(14 * var(--u)))/1 var(--t-font-display);letter-spacing:.04em}
.q-oc-next__when{margin-top:calc(34 * var(--u));color:var(--oc-ink);font:400 calc(25 * var(--u))/1.2 var(--t-font-body)}
.q-oc .c-btn.q-oc-cta,.q-sign .c-btn.q-sign__cta{display:flex;width:100%;min-height:calc(80 * var(--u));margin-top:calc(34 * var(--u));padding:0 calc(12 * var(--u));border-radius:0;font-size:calc(25 * var(--u));letter-spacing:.04em;white-space:nowrap}
.q-oc .c-btn.q-oc-watch{display:flex;width:100%;min-height:calc(74 * var(--u));margin-top:calc(22 * var(--u));padding:0 calc(16 * var(--u));border:calc(3 * var(--u)) solid var(--oc-mint);border-radius:0;background:transparent;color:var(--oc-mint);font:700 calc(25 * var(--u))/1 var(--t-font-display);letter-spacing:.04em;white-space:nowrap}
.q-oc .c-btn.q-oc-watch--narrow{display:none}
/* WATCH THE STAFF WORK opens the stream the footer's WATCH THE STREAM opens at this width (runtime/quit/stream-links.js
   STREAM_PHONE: the vertical stream on a phone or a portrait tablet), with or without JavaScript. */
@media (max-width:767px),(max-width:1199px) and (max-aspect-ratio:3/4){.q-oc .c-btn.q-oc-watch--wide{display:none}.q-oc .c-btn.q-oc-watch--narrow{display:flex}}
/* The phone frame breaks each title line once (tools/quit-site/org-chart.json title_phone); the desktop frame does not. */
@media (min-width:768px) and (not ((max-width:1199px) and (max-aspect-ratio:3/4))) and (not ((pointer:coarse) and (max-height:500px))){.q-oc-br{display:none}}

/* B1, THE SIGN ON THE DOOR: the faded cubicle pyramid on the left with the canonical Pyramid-Q mounted on its wall. */
.q-sign{padding:.85% .65% .9%;background:#050806}
.q-sign__panel{display:grid;grid-template-columns:calc(686 * var(--u)) minmax(0,1fr);column-gap:calc(40 * var(--u));min-height:calc(786 * var(--u));padding:calc(5 * var(--u));border:calc(3 * var(--u)) solid var(--oc-gold);outline:calc(2 * var(--u)) solid #3b2f14;outline-offset:calc(-9 * var(--u));background-color:#0e0c08;--rivet:var(--oc-gold);--rivet-size:calc(12 * var(--u));--rivet-at:calc(6 * var(--u))}
.q-sign__art{position:relative;overflow:hidden;min-height:100%;background:#0b0906}
.q-sign__plate{position:absolute;inset:0}
/* The plate keeps its own proportions at the bottom of the panel; its wall fades into the panel's above it, so the
   sign hangs on a bare wall over the pyramid, as in B1. */
.q-sign .q-sign__plate{inset:auto 0 0}
.q-sign .q-sign__plate img{width:100%;height:auto;-webkit-mask-image:linear-gradient(transparent,#000 22%);mask-image:linear-gradient(transparent,#000 22%)}
.q-sign__mark{position:absolute;left:15.5%;top:4.6%;width:69%;height:auto;filter:drop-shadow(calc(6 * var(--u)) calc(10 * var(--u)) calc(6 * var(--u)) rgba(0,0,0,.75)) drop-shadow(0 0 calc(18 * var(--u)) rgba(201,162,75,.18))}
.q-sign__copy{display:flex;flex-direction:column;align-items:flex-start;padding:calc(53 * var(--u)) calc(36 * var(--u)) calc(40 * var(--u)) 0}
.q-sign__memo{padding:calc(11 * var(--u)) calc(15 * var(--u)) calc(10 * var(--u));border:calc(3 * var(--u)) solid var(--oc-gold);color:#d9b45c;font:700 calc(17 * var(--u))/1 var(--t-font-display);letter-spacing:.04em}
.q-sign__title{margin-top:calc(28 * var(--u));color:var(--oc-cream);font:700 calc(72 * var(--u))/1.04 var(--t-font-pixel, "QUIT Pixel", monospace);letter-spacing:0}
.q-sign__body{margin-top:calc(26 * var(--u));color:var(--oc-ink);font:400 calc(27 * var(--u))/1.14 var(--t-font-body)}
.q-sign__rows{width:100%;margin-top:calc(24 * var(--u));border:calc(2 * var(--u)) solid var(--oc-gold)}
.q-sign__row{display:grid;grid-template-columns:calc(266 * var(--u)) minmax(0,1fr);align-items:center;min-height:calc(54 * var(--u))}
.q-sign__row+.q-sign__row{border-top:calc(2 * var(--u)) solid var(--oc-gold)}
.q-sign__row dt{align-self:stretch;display:flex;align-items:center;padding:0 calc(16 * var(--u));border-right:calc(2 * var(--u)) solid var(--oc-gold);color:var(--oc-cream);font:700 calc(17 * var(--u))/1 var(--t-font-display);letter-spacing:.04em;white-space:nowrap}
.q-sign__row[data-sign-q] dt{color:#e0b450}
.q-sign__row dd{padding:calc(10 * var(--u)) calc(16 * var(--u));color:var(--oc-ink);font:400 calc(21 * var(--u))/1.2 var(--t-font-body)}
.q-sign .c-btn.q-sign__cta{margin-top:calc(22 * var(--u));min-height:calc(72 * var(--u));font-size:calc(29 * var(--u))}
.q-sign__note{margin-top:calc(30 * var(--u));color:var(--oc-ink);font:400 calc(23 * var(--u))/1.2 var(--t-font-body)}

/* Narrow desktops: the signs' lines, the chips and the small labels keep 12 px; a sign may then grow the war room below
   its plate. */
@media (min-width:768px) and (max-width:1279px){
 .q-oc-sign__line{font-size:max(12px,calc(16 * var(--w)))}
 .q-oc-chip,.q-oc-strip dt,.q-oc-clock__unit,.q-oc-dial__cell dt{font-size:max(12px,calc(14 * var(--w)))}
}

/* The phone composition (THE WAR ROOM stacked, PB2, A2 stacked, PB1), in the site's phone column. */
@media (max-width:767px),(max-width:1199px) and (max-aspect-ratio:3/4),(pointer:coarse) and (max-height:500px){
 .q-oc,.q-sign{scroll-margin-top:var(--t-header-phone,62px)}
 /* THE WAR ROOM on a phone: the head box over the windows, Gary flying out at its side, YOU on the plaque, then each
    station's own plate with its sign. */
 .q-oc-head{inset:auto;left:calc(34 * var(--p));top:calc(28 * var(--p));width:calc(640 * var(--p));padding:calc(24 * var(--p)) calc(24 * var(--p)) calc(20 * var(--p));border:calc(4 * var(--p)) solid #2b3a31;background:var(--oc-black);box-shadow:0 0 0 calc(2 * var(--p)) #070b08}
 .q-oc-memo{padding:calc(9 * var(--p)) calc(12 * var(--p)) calc(8 * var(--p));border-width:calc(3 * var(--p));font-size:max(12px,calc(22 * var(--p)));font-weight:700;letter-spacing:.04em;text-wrap:balance}
 .q-oc-title{margin-top:calc(18 * var(--p));font-size:calc(66 * var(--p));line-height:1.08}
 .q-oc-title>span{display:block;padding:0;margin:0;background:none}
 .q-oc-lede{display:block;margin:calc(16 * var(--p)) 0 0;padding:0;background:none;font-size:max(13px,calc(30 * var(--p)));line-height:1.36;white-space:normal}
 .q-oc-lastbuy{position:static;margin-top:calc(12 * var(--p));padding:0;border:0;outline:0;background:none;gap:calc(14 * var(--p));font:700 max(12px,calc(24 * var(--p)))/1 var(--t-font-display);letter-spacing:.04em}
 .q-oc-lastbuy__dot{width:calc(24 * var(--p));height:calc(24 * var(--p))}
 .q-oc .q-oc-gary{left:auto;right:calc(-30 * var(--p));top:calc(70 * var(--p));width:calc(360 * var(--p))}
 .q-oc-boss{left:calc(348 * var(--p));top:calc(1204 * var(--p));width:calc(247 * var(--p));height:calc(106 * var(--p))}
 .q-oc-boss__you{font-size:calc(42 * var(--p))}
 .q-oc-boss__line{margin-top:calc(3 * var(--p));font-size:max(12px,calc(20 * var(--p)));letter-spacing:.04em}
 .q-oc-tower{display:block}
 .q-oc-staff{display:flex;flex-direction:column;margin-top:0;background:#0a0d0b}
 .q-oc-room{display:block;min-height:0;padding:0 0 calc(22 * var(--v))}
 .q-oc-room::before{inset:0 0 calc(22 * var(--v))}
 .q-oc-room__art{display:block;width:100%;height:auto}
 .q-oc-sign{position:relative;z-index:1;min-height:0;margin:calc(-104 * var(--v)) calc(150 * var(--v)) 0 calc(20 * var(--v));padding:calc(20 * var(--v)) calc(22 * var(--v)) calc(18 * var(--v));border-width:calc(4 * var(--v));--rivet-size:calc(10 * var(--v));--rivet-at:calc(4 * var(--v))}
 .q-oc-room:nth-child(even) .q-oc-sign{margin:calc(-104 * var(--v)) calc(20 * var(--v)) 0 calc(150 * var(--v))}
 .q-oc-room:is(:hover,:focus-within) .q-oc-sign{transform:none}
 .q-oc-sign__title{font-size:calc(34 * var(--v));margin-bottom:calc(10 * var(--v))}
 .q-oc-sign__line{font-size:max(12px,calc(25 * var(--v)));line-height:1.3}
 .q-oc-chip{margin-top:calc(8 * var(--v));padding:calc(8 * var(--v)) calc(16 * var(--v)) calc(7 * var(--v));font-size:max(12px,calc(19 * var(--v)))}

 /* THE CLIPPER ARMY on a phone (PB2): the words, the map with its pins, marks and reels, the steps with a reel each, the
    dial, the keys; the first reel climbs out at the top right beside the headline. */
 .q-oc-army{display:flex;flex-direction:column;padding:calc(30 * var(--q)) calc(22 * var(--q)) calc(44 * var(--q));background:#070b08;scroll-margin-top:var(--t-header-phone,62px)}
 .q-oc .q-oc-army__plate{display:none}
 .q-oc-army__copy{display:contents}
 .q-oc-army__memo{order:1;align-self:flex-start;max-width:calc(560 * var(--q));padding:calc(10 * var(--q)) calc(12 * var(--q));border-width:calc(3 * var(--q));font-size:max(12px,calc(20 * var(--q)));white-space:normal}
 .q-oc-army__title{order:2;margin-top:calc(18 * var(--q));padding-right:calc(262 * var(--q));font-size:calc(52 * var(--q));line-height:1.06}
 .q-oc-army__lede{order:3;margin-top:calc(16 * var(--q));padding-right:calc(262 * var(--q));font-size:max(13px,calc(26 * var(--q)));line-height:1.4}
 .q-oc-army__map{order:4;position:relative;left:auto;top:auto;width:100%;height:auto;aspect-ratio:1120/552;margin-top:calc(26 * var(--q));border:calc(4 * var(--q)) solid #26332b;outline:calc(2 * var(--q)) solid #050806}
 .q-oc .q-oc-army__mapplate{display:block;position:absolute;inset:0}
 .q-oc .q-oc-army__mapplate img{width:100%;height:100%;object-fit:cover}
 .q-oc-pin{width:2%;height:auto;aspect-ratio:64/114;margin:-1.8% 0 0 -1%;border-width:1px;border-radius:1px;box-shadow:0 0 3px rgba(60,235,134,.75)}
 .q-oc-mark{width:7.5%;height:auto;aspect-ratio:1;margin:-3.75% 0 0 -3.75%;border-width:1px;border-radius:18%}
 .q-oc-mark .q-pmark{width:58%;height:58%}
 .q-oc-army__map .q-oc-phone[data-oc-phone="bambi"]{display:none}
 .q-oc-phone__body{border-width:2px;border-radius:10px}
 .q-oc-phone--lead{display:block;position:absolute;top:calc(40 * var(--q));right:calc(26 * var(--q));width:calc(220 * var(--q))}
 .q-oc-army__steps{order:5;gap:calc(14 * var(--q));margin-top:calc(26 * var(--q))}
 .q-oc-army__step{grid-template-columns:calc(250 * var(--q)) calc(108 * var(--q)) minmax(0,1fr);min-height:calc(96 * var(--q));border-width:calc(3 * var(--q))}
 .q-oc .q-oc-army__thumb{display:block;width:100%;height:calc(96 * var(--q));object-fit:cover;object-position:50% 30%}
 .q-oc-army__num{font-size:calc(52 * var(--q));border-right-width:calc(3 * var(--q))}
 .q-oc-army__label{padding:calc(10 * var(--q)) calc(16 * var(--q));font-size:max(12px,calc(24 * var(--q)))}
 .q-oc-dial{order:6;align-self:stretch;width:auto;min-height:0;margin:calc(26 * var(--q)) 0 0;padding:calc(26 * var(--q)) calc(24 * var(--q)) calc(22 * var(--q));border:calc(4 * var(--q)) solid #26332b;outline:calc(2 * var(--q)) solid #050806;background:#0b100d}
 .q-oc-dial__title{font-size:calc(36 * var(--q));text-align:left}
 .q-oc-dial__range{margin-top:calc(14 * var(--q))}
 .q-oc-dial__range::-webkit-slider-runnable-track{height:calc(24 * var(--q));border-width:2px;border-radius:calc(12 * var(--q))}
 .q-oc-dial__range::-moz-range-track{height:calc(24 * var(--q));border-width:2px;border-radius:calc(12 * var(--q))}
 .q-oc-dial__range::-webkit-slider-thumb{width:28px;height:28px;margin-top:calc(12 * var(--q) - 14px);border-width:2px}
 .q-oc-dial__range::-moz-range-thumb{width:28px;height:28px;border-width:2px}
 .q-oc-dial__ticks{font-size:max(12px,calc(22 * var(--q)))}
 .q-oc-dial__label{margin-top:calc(16 * var(--q));font-size:max(12px,calc(22 * var(--q)));text-align:left}
 .q-oc-dial__readouts{grid-template-columns:minmax(0,1fr);gap:calc(10 * var(--q));margin-top:calc(16 * var(--q))}
 .q-oc-dial__cell{flex-direction:row;justify-content:space-between;padding:calc(14 * var(--q)) calc(20 * var(--q))}
 .q-oc-dial__cell dt{font-size:max(12px,calc(20 * var(--q)))}
 .q-oc-dial__cell dd{font-size:calc(34 * var(--q))}
 .q-oc-dial__note{margin-top:calc(14 * var(--q));font-size:max(12px,calc(22 * var(--q)))}
 .q-oc-army__keys{order:7;grid-template-columns:minmax(0,1fr);gap:calc(16 * var(--q));margin-top:calc(26 * var(--q))}
 .q-oc .c-btn.q-oc-army__join,.q-oc .c-btn.q-oc-army__buy{min-height:calc(100 * var(--q));font-size:calc(30 * var(--q))}
 .q-oc .c-btn.q-oc-army__buy{border-width:calc(4 * var(--q))}
 .q-oc-army__pay{order:8;margin-top:calc(18 * var(--q));font-size:max(12px,calc(23 * var(--q)));text-align:center}

 .q-oc-ladder{display:flex;flex-direction:column;padding:calc(30 * var(--v)) calc(20 * var(--v)) calc(48 * var(--v))}
 .q-oc-strip{grid-template-columns:minmax(0,1fr);min-height:0;margin-bottom:calc(40 * var(--v));padding:calc(4 * var(--v)) calc(6 * var(--v));border-width:calc(18 * var(--v)) calc(26 * var(--v));border-image-width:calc(18 * var(--v)) calc(26 * var(--v))}
 .q-oc-strip__cell{flex-direction:row;justify-content:space-between;gap:calc(16 * var(--v));padding:calc(16 * var(--v)) calc(6 * var(--v));border-left:0;border-top:calc(3 * var(--v)) solid rgba(60,235,134,.55);text-align:left}
 .q-oc-strip__cell:first-child{border-top:0}
 .q-oc-strip:has(>.q-oc-strip__cell[hidden]){grid-template-columns:minmax(0,1fr)}
 .q-oc-strip__cell[hidden]+.q-oc-strip__cell{border-top:0}
 .q-oc-strip dt{font-size:max(12px,calc(21 * var(--v)));line-height:1.2}
 .q-oc-strip dd{font-size:calc(31 * var(--v));text-align:right}
 .q-oc-climb{padding:0}
 .q-oc-climb__title{margin:0 0 calc(26 * var(--v));font-size:calc(46 * var(--v));line-height:1.14}
 .q-oc-stairs{width:100%}
 /* Each block of the phone plate (stairs-phone, measured faces in % of the plate) carries its amount (the 250,000 block
    in its upper band, clear of the head of the man below); the tiers follow the plate as cream cards in the blocks'
    own colour, lowest first. */
 .q-oc-faces{display:block;inset:0 0 auto;aspect-ratio:941/1672}
 .q-oc-face{position:absolute;display:flex;align-items:center;justify-content:center;color:#17130c;font:700 max(13px,calc(32 * var(--v)))/1 var(--t-font-display);white-space:nowrap}
 .q-oc-face[data-oc-step="1"]{left:5.1%;top:84.9%;width:68.1%;height:15.1%}
 .q-oc-face[data-oc-step="2"]{left:18.3%;top:62.9%;width:67.7%;height:7.2%}
 .q-oc-face[data-oc-step="3"]{left:49.4%;top:42.6%;width:49.8%;height:10.8%}
 .q-oc-steps{position:static;display:flex;flex-direction:column;gap:calc(16 * var(--v));margin-top:calc(22 * var(--v));pointer-events:auto}
 .q-oc-steps .q-oc-step[data-oc-step]{position:static;width:auto;height:auto;padding:calc(22 * var(--v)) calc(24 * var(--v)) calc(20 * var(--v));border-top:calc(8 * var(--v)) solid var(--oc-orange);background:#eeddb9}
 .q-oc-step__amount{font-size:max(14px,calc(32 * var(--v)))}
 .q-oc-step__line{font-size:max(13px,calc(27 * var(--v)));line-height:1.3}
 .q-oc-step__amount+.q-oc-step__line{margin-top:calc(12 * var(--v))}
 .q-oc-step__line+.q-oc-step__line{margin-top:calc(6 * var(--v))}
 .q-oc-next{align-self:stretch;margin-top:calc(34 * var(--v));padding:calc(40 * var(--v)) calc(30 * var(--v)) calc(36 * var(--v));border-width:calc(4 * var(--v));outline-width:calc(3 * var(--v));outline-offset:calc(-14 * var(--v));--rivet-size:calc(12 * var(--v))}
 .q-oc-next__title{font-size:calc(42 * var(--v))}
 .q-oc-next__line,.q-oc-next__when{font-size:calc(30 * var(--v));margin-top:calc(22 * var(--v))}
 .q-oc-clock{gap:calc(14 * var(--v));margin-top:calc(30 * var(--v))}
 .q-oc-clock__cell{gap:calc(14 * var(--v))}
 .q-oc-clock__digits{border-width:calc(3 * var(--v));font-size:calc(72 * var(--v))}
 .q-oc-clock__unit{font-size:max(12px,calc(19 * var(--v)))}
 .q-oc .c-btn.q-oc-cta{min-height:calc(108 * var(--v));margin-top:calc(34 * var(--v));font-size:calc(31 * var(--v))}
 .q-oc .c-btn.q-oc-watch{min-height:calc(100 * var(--v));margin-top:calc(22 * var(--v));border-width:calc(4 * var(--v));font-size:calc(31 * var(--v))}

 .q-sign{padding:4.2% 2.35%}
 .q-sign__panel{display:flex;flex-direction:column;min-height:0;padding:calc(30 * var(--v)) calc(28 * var(--v)) calc(36 * var(--v));border-width:calc(4 * var(--v));outline-width:calc(3 * var(--v));outline-offset:calc(-12 * var(--v));--rivet-size:calc(13 * var(--v))}
 .q-sign__copy{display:contents}
 .q-sign__memo{order:1;align-self:stretch;padding:calc(14 * var(--v)) calc(16 * var(--v)) calc(12 * var(--v));border-width:calc(4 * var(--v));text-align:center;font-size:max(12px,calc(26 * var(--v)));letter-spacing:.04em}
 .q-sign__art{order:2;width:100%;aspect-ratio:755/645;margin-top:calc(22 * var(--v))}
 .q-sign__plate img{object-position:50% 74%}
 .q-sign__mark{left:13%;top:13%;width:74%}
 .q-sign__title{order:3;margin-top:calc(26 * var(--v));font-size:calc(76 * var(--v));line-height:1.06}
 .q-sign__body{order:4;margin-top:calc(22 * var(--v));font-size:calc(30 * var(--v));line-height:1.5}
 .q-sign__rows{order:5;display:flex;flex-direction:column;gap:calc(20 * var(--v));margin-top:calc(28 * var(--v));border:0}
 .q-sign__row{display:block;min-height:0;padding:calc(18 * var(--v)) calc(20 * var(--v));border:calc(3 * var(--v)) solid var(--oc-gold)}
 .q-sign__row+.q-sign__row{border-top:calc(3 * var(--v)) solid var(--oc-gold)}
 .q-sign__row dt{display:block;padding:0;border:0;font-size:max(12px,calc(27 * var(--v)))}
 .q-sign__row[data-sign-q] dt{display:inline-block;padding:calc(8 * var(--v)) calc(26 * var(--v)) calc(6 * var(--v));background:#c9a24b;color:#14100a}
 .q-sign__row dd{padding:calc(10 * var(--v)) 0 0;font-size:max(12px,calc(27 * var(--v)))}
 .q-sign .c-btn.q-sign__cta{order:6;margin-top:calc(26 * var(--v));min-height:calc(98 * var(--v));font-size:calc(33 * var(--v))}
 .q-sign__note{order:7;margin-top:calc(22 * var(--v));font-size:max(12px,calc(26 * var(--v)));line-height:1.35}
}
/* A phone turned sideways keeps the phone composition in the site's centred column. */
@media (orientation:landscape) and (max-width:767px),(pointer:coarse) and (max-height:500px){
 .q-oc,.q-sign{width:min(100%,var(--quit-column,480px));margin-inline:auto}
}
