/* The page /backed-by (tools/quit-site/backed-by.mjs), built to the approved comps K1 to K3 (the owner's J1, 2 Nov 2026) in
   the formula section's style: it loads creator-home.css for the shared qh- tokens, keys, tags and bezels, and adds its
   own bb- layout here. Photographs and the coming-next art sit in the site's bezel plate (deck-art/bay.webp), live
   figures in green-on-black plates, the movement's facts on cream plates with orange figures. Plex Mono is declared at
   72% of its size (body.css), so reading sizes are written as calc(N / .72). */
html[data-page="/backed-by"] main.frame-main{background:var(--qh-dark)}
.bb-hero,.bb-desk,.bb-pays,.bb-viral,.bb-move,.bb-crew,.bb-next,.bb-close{padding:clamp(48px,5vw,84px) 0}
.bb-desk,.bb-pays,.bb-viral,.bb-move,.bb-crew,.bb-next,.bb-close{border-top:1px solid var(--qh-rule-dark)}

/* the bezels */
.bb-plate,.bb-panel,.bb-calc,.bb-next__card>a,.bb-next__card>div{border:0 solid transparent;border-image:url(/runtime/quit/deck-art/bay.webp) 44 50 fill/12px 14px stretch}
.bb-shot{margin:0;padding:15px 17px}
.bb-shot__img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:3px;background:#121512}

/* 1. The lock */
.bb-hero__grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:clamp(28px,4vw,64px);align-items:center}
.bb-title{font-size:clamp(40px,3.7vw,62px);line-height:1}
.bb-title .qh-line{white-space:nowrap}
.bb-title .qh-line{display:block}
.bb-lede{margin:24px 0 30px;max-width:34em;font:400 calc(clamp(17px,1.4vw,20px) / .72)/1.18 var(--qh-mono);color:var(--qh-cream)}
.bb-plates{list-style:none;margin:clamp(24px,3vw,40px) 0 0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}
.bb-plates--two{grid-template-columns:repeat(2,minmax(0,1fr));margin:24px 0 0}
.bb-plate{display:flex;flex-direction:column;justify-content:center;min-height:96px;padding:14px 16px;text-align:center}
.bb-plate>a{display:flex;flex-direction:column;justify-content:center;height:100%;color:inherit;text-decoration:none}
@media(hover:hover){.bb-plate>a:hover .bb-plate__label{color:var(--qh-orange)}}
.bb-plate__fig{font:700 clamp(22px,2vw,32px)/1 var(--qh-pixel);letter-spacing:.02em;color:var(--qh-green)}
.bb-plate__label{margin-top:8px;font:700 13px/1.15 var(--qh-pixel);letter-spacing:.06em;color:var(--qh-green)}

/* After the lock, why QUIT is not a pyramid scheme (comp T, the owner's approval of 2 Nov 2026): the canonical
   Pyramid-Q in a square bezel at the title's left, and the comparison on the site's bezel plate, the pyramid's column
   headed in orange, QUIT's in green with the comp's green square before each answer. On a phone each row stacks, each
   cell under its column's name (data-label). */
.bb-pyramid{padding:clamp(48px,5vw,84px) 0;border-top:1px solid var(--qh-rule-dark)}
.bb-pyramid__head{display:grid;grid-template-columns:clamp(120px,11vw,164px) minmax(0,1fr);gap:clamp(20px,2.6vw,40px);align-items:center}
.bb-pyramid__mark{box-sizing:border-box;display:grid;place-items:center;aspect-ratio:1;padding:22px 24px;border:0 solid transparent;border-image:url(/runtime/quit/deck-art/bay.webp) 44 50 fill/12px 14px stretch}
.bb-pyramid__mark img{display:block;width:100%;height:auto}
.bb-pyramid__title{font-size:clamp(38px,4.4vw,66px);line-height:1}
.bb-pyramid__title .qh-line{display:block}
.bb-pyramid__lede{margin:16px 0 0;font:400 calc(clamp(15px,1.2vw,18px) / .72)/1.18 var(--qh-mono);color:var(--qh-cream);text-wrap:balance}
.bb-pyramid__panel{margin-top:clamp(24px,3vw,40px);padding:16px 18px;border:0 solid transparent;border-image:url(/runtime/quit/deck-art/bay.webp) 44 50 fill/12px 14px stretch}
.bb-pyramid__table{width:100%;border-collapse:collapse;border:2px solid rgba(37,220,113,.55);background:#030805}
.bb-pyramid__table :is(th,td){padding:14px clamp(16px,2vw,30px);text-align:left;vertical-align:middle}
.bb-pyramid__table :is(th,td)+:is(th,td){border-left:2px solid rgba(37,220,113,.55)}
.bb-pyramid__table th{padding-block:18px;font:700 clamp(28px,3vw,48px)/1 var(--qh-serif);letter-spacing:.01em;text-transform:uppercase}
.bb-pyramid__table th.bb-pyramid__them{color:var(--qh-orange)}
.bb-pyramid__table th.bb-pyramid__us{color:var(--qh-green)}
.bb-pyramid__table td{border-top:1px solid rgba(37,220,113,.38);font:400 calc(clamp(16px,1.4vw,21px) / .72)/1.18 var(--qh-mono);color:var(--qh-cream)}
.bb-pyramid__us .bb-pyramid__words{display:block;padding-left:1.4em;text-indent:-1.4em}
.bb-pyramid__us .bb-pyramid__words::before{content:"";display:inline-block;width:.5em;height:.5em;margin-right:.9em;background:var(--qh-green);vertical-align:.02em}
.bb-pyramid__table a{color:inherit;text-decoration:underline;text-decoration-color:var(--qh-green);text-decoration-thickness:2px;text-underline-offset:4px}
.bb-pyramid__table a:focus-visible{outline:3px solid #fff0ad;outline-offset:2px}

/* 2. The desk */
.bb-desk__grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,4vw,64px);align-items:start}
.bb-rules{list-style:none;margin:22px 0 0;padding:0}
.bb-rules li{padding:12px 0;border-top:1px solid var(--qh-rule-dark);font:400 calc(16px / .72)/1.18 var(--qh-mono);color:var(--qh-muted)}
.bb-rules li:last-child{border-bottom:1px solid var(--qh-rule-dark)}
/* the desk video (the owner's L1): a 9:16 player in the site's bezel, under the desk's rules */
.bb-video{margin:28px 0 0;max-width:340px}
.bb-video__label{margin-bottom:12px}
.bb-video__el{display:block;box-sizing:border-box;width:100%;height:auto;aspect-ratio:9/16;padding:12px 14px;border:0 solid transparent;border-image:url(/runtime/quit/deck-art/bay.webp) 44 50 fill/12px 14px stretch;background:#000}
.bb-panels{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.bb-panel{min-height:220px;padding:18px 20px}
.bb-panel__title{margin:0 0 12px;padding-bottom:10px;border-bottom:1px solid rgba(37,220,113,.4);font:700 19px/1 var(--qh-pixel);letter-spacing:.05em;color:var(--qh-green)}
.bb-panel__line{margin:14px 0 0;font:700 15px/1.3 var(--qh-pixel);letter-spacing:.05em;color:var(--qh-green)}
.bb-panel__fig{margin:4px 0 0;font:700 44px/1 var(--qh-pixel);color:var(--qh-green)}
.bb-calls{list-style:none;margin:0;padding:0 4px 0 0;max-height:250px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(37,220,113,.5) transparent}
.bb-calls li{display:flex;justify-content:space-between;gap:10px;padding:7px 0;border-bottom:1px solid rgba(37,220,113,.22);font:700 17px/1 var(--qh-pixel);letter-spacing:.04em;color:var(--qh-cream)}
.bb-calls li b{color:var(--qh-green)}
.bb-calls li[data-tone="down"] b{color:var(--qh-orange)}
.bb-calls li[data-tone="open"] b{color:var(--qh-amber)}
.bb-panel[data-state="reading"] .bb-calls:empty::before{content:"...";font:700 17px/1 var(--qh-pixel);color:var(--qh-green)}

/* 3. How it pays and the calculator */
.bb-pays__grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,4vw,64px);align-items:start}
.bb-lead{margin:0;font:700 clamp(26px,2.4vw,36px)/1.05 var(--qh-serif);text-transform:uppercase;color:var(--qh-cream)}
.bb-waves{list-style:none;margin:18px 0 6px;padding:0}
.bb-waves li{display:flex;align-items:baseline;gap:16px;padding:12px 0;border-bottom:1px solid var(--qh-rule-dark)}
.bb-waves b{min-width:5.2em;font:700 clamp(26px,2.4vw,38px)/1 var(--qh-pixel);color:var(--qh-orange)}
.bb-waves span{font:400 calc(17px / .72)/1.1 var(--qh-mono);color:var(--qh-cream)}
.bb-calc{padding:24px 26px 26px}
.bb-calc__title{margin:0 0 18px;font-size:clamp(24px,2.2vw,34px);line-height:1}
.bb-calc__row{display:grid;grid-template-columns:minmax(120px,auto) 1fr;align-items:center;gap:14px;margin-top:10px}
.bb-calc__label{padding:12px 14px;border:2px solid var(--qh-green);border-radius:var(--qh-key-radius);font:700 17px/1 var(--qh-pixel);letter-spacing:.05em;color:var(--qh-green)}
.bb-calc__input{box-sizing:border-box;width:100%;min-height:46px;padding:0 14px;border:2px solid var(--qh-green);border-radius:var(--qh-key-radius);background:#04100a;color:var(--qh-green);font:700 22px/1 var(--qh-pixel);letter-spacing:.04em}
.bb-calc__input:focus-visible,.bb-calc__size:focus-visible{outline:3px solid #fff0ad;outline-offset:2px}
.bb-calc__sizes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.bb-calc__size{min-height:46px;border:2px solid var(--qh-green);border-radius:var(--qh-key-radius);background:none;color:var(--qh-green);font:700 20px/1 var(--qh-pixel);cursor:pointer}
.bb-calc__size[aria-checked="true"]{background:var(--qh-orange);border-color:var(--qh-orange);color:#1d0800}
.bb-calc__wave{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 16px;margin:18px 0 0;padding:12px 14px;border:2px solid var(--qh-green);border-radius:var(--qh-key-radius);font:700 20px/1 var(--qh-pixel);letter-spacing:.04em;color:var(--qh-green)}
.bb-calc__wave b{color:var(--qh-orange)}
.bb-calc__lines{list-style:none;margin:14px 0 0;padding:0}
.bb-calc__lines li{padding:11px 2px;border-bottom:1px solid rgba(37,220,113,.25);font:400 calc(15.5px / .72)/1.18 var(--qh-mono);color:var(--qh-cream)}
.bb-calc__lines li[data-bb-line]{font:700 18px/1.25 var(--qh-pixel);letter-spacing:.03em;color:var(--qh-green)}
.bb-calc__note{margin:14px 0 0;font:400 calc(14px / .72)/1.2 var(--qh-mono);color:var(--qh-muted)}

/* 4. The formula */
.bb-viral__grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,4vw,64px);align-items:center}
.bb-figure{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 16px;margin:18px 0 6px}
.bb-figure b{font:700 clamp(40px,4.4vw,68px)/1 var(--qh-pixel);color:var(--qh-green)}
.bb-figure span{font:700 18px/1 var(--qh-pixel);letter-spacing:.06em;color:var(--qh-cream)}
.bb-viral .qh-body a{color:var(--qh-orange);text-underline-offset:4px}
.bb-viral__key{margin-top:28px}

/* 5. The movement */
.bb-move__head{max-width:46em}
.bb-facts{list-style:none;margin:28px 0 0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.bb-fact{display:flex;flex-direction:column;padding:20px 20px 18px;border:0 solid transparent;border-image:url(/runtime/quit/deck-art/bay.webp) 44 50/12px 14px stretch;background:var(--qh-paper);color:var(--qh-ink);background-clip:padding-box}
.bb-fact__fig{font:700 clamp(34px,3vw,48px)/1 var(--qh-pixel);color:var(--qh-orange)}
.bb-fact__text{flex:1;margin:12px 0 0;font:400 calc(15px / .72)/1.18 var(--qh-mono)}
.bb-fact__src{margin:14px 0 0;padding-top:10px;border-top:1px solid var(--qh-rule-paper);font:700 13px/1.25 var(--qh-pixel);letter-spacing:.04em}
.bb-fact__src a{color:inherit;text-underline-offset:3px}
.bb-move__close{margin:28px 0 0;font:700 clamp(22px,2vw,30px)/1.1 var(--qh-serif);text-transform:uppercase;color:var(--qh-cream)}

/* 6. The community */
.bb-crew__grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(28px,4vw,64px);align-items:center}

/* 7. Coming next */
.bb-next__row{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.bb-next__card>a,.bb-next__card>div{position:relative;display:flex;flex-direction:column;height:100%;box-sizing:border-box;padding:14px 16px 18px;color:var(--qh-cream);text-decoration:none}
.bb-next__img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;border-radius:3px}
.bb-next__title{margin:16px 0 0;font:700 clamp(24px,2.2vw,34px)/1 var(--qh-pixel);letter-spacing:.03em;color:var(--qh-orange)}
.bb-next__line{margin:10px 0 0;font:400 calc(15px / .72)/1.18 var(--qh-mono)}
.bb-next__soon{align-self:flex-start;margin-top:14px;padding:7px 10px 6px;border:2px solid var(--qh-green);border-radius:var(--qh-key-radius);font:700 15px/1 var(--qh-pixel);letter-spacing:.06em;color:var(--qh-green)}
@media(hover:hover){.bb-next__card>a:hover .bb-next__title{color:var(--qh-cream)}}

/* 8. The close */
.bb-close__grid{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px 40px;padding-top:24px;border-top:2px solid var(--qh-orange)}
.bb-close__title{margin:0;font-size:clamp(28px,2.8vw,44px);line-height:1.05;max-width:22em}
.bb-close .qh-keys{margin-top:0}

/* Between a phone and a wide desktop */
@media(min-width:761px) and (max-width:1100px){
 .bb-hero__grid,.bb-desk__grid,.bb-pays__grid,.bb-viral__grid,.bb-crew__grid{grid-template-columns:minmax(0,1fr)}
 .bb-plates{grid-template-columns:repeat(3,minmax(0,1fr))}
 .bb-facts{grid-template-columns:repeat(3,minmax(0,1fr))}
}
/* Phones */
@media(max-width:760px){
 .bb-hero__grid,.bb-desk__grid,.bb-pays__grid,.bb-viral__grid,.bb-crew__grid{grid-template-columns:minmax(0,1fr)}
 .bb-title{font-size:clamp(30px,8.6vw,42px)}
 .bb-lede{font-size:calc(16px / .72)}
 .bb-shot{padding:10px 12px}
 .bb-plates{grid-template-columns:repeat(2,minmax(0,1fr))}
 .bb-panels{grid-template-columns:minmax(0,1fr)}
 .bb-video{max-width:none}
 .bb-panel{min-height:0}
 .bb-calc{padding:18px 16px 20px}
 .bb-calc__row{grid-template-columns:minmax(0,1fr)}
 .bb-calc__lines li[data-bb-line]{font-size:16px}
 .bb-facts{grid-template-columns:minmax(0,1fr)}
 .bb-crew__grid .bb-shot{order:-1}
 .bb-next__row{grid-template-columns:minmax(0,1fr)}
 .bb-close__grid{flex-direction:column;align-items:stretch}
 .bb-close .qh-keys .qh-key{flex:1 1 100%}
 /* the hero's and the formula's keys take the column's width and may wrap, so CHECK THE LOCK YOURSELF fits a 320 px phone */
 .bb-hero__copy .qh-key,.bb-viral__key{display:flex;width:100%;padding:12px 16px;white-space:normal;text-align:center}
 /* why QUIT is not a pyramid scheme: the mark over the title, and each row a block, its two cells under their names */
 .bb-pyramid__head{grid-template-columns:minmax(0,1fr);gap:18px}
 .bb-pyramid__mark{width:96px;padding:14px 16px}
 .bb-pyramid__title{font-size:clamp(26px,7.4vw,36px)}
 .bb-pyramid__lede{font-size:calc(16px / .72)}
 .bb-pyramid__panel{padding:10px 12px}
 .bb-pyramid__table,.bb-pyramid__table tbody,.bb-pyramid__table tr,.bb-pyramid__table td{display:block}
 .bb-pyramid__table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
 .bb-pyramid__table tr+tr{border-top:2px solid rgba(37,220,113,.55)}
 .bb-pyramid__table td{padding:12px 14px;border-top:0;font-size:calc(16px / .72)}
 .bb-pyramid__table td+td{border-left:0;padding-top:0}
 .bb-pyramid__table td::before{content:attr(data-label);display:block;margin-bottom:6px;font:700 15px/1 var(--qh-pixel);letter-spacing:.06em}
 .bb-pyramid__table td.bb-pyramid__them::before{color:var(--qh-orange)}
 .bb-pyramid__table td.bb-pyramid__us::before{color:var(--qh-green)}
}