/* 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)}

/* 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}
}