/* The creator network on the home page and /apply (owner order, 25 Oct 2026; designs top B and player select B).
   Faces (the owner's choice of 26 Oct 2026, option B: the face of the approved designs, Jersey 20, on headings, keys,
   labels and figures; body text stays monospace): the pixel role (--t-font-pixel) for THE CREATOR NETWORK, WHAT YOU GET
   and the plan's headline; the display role (--t-font-display) for every other heading, key, tag and label, the plan's
   bold labels included; QUIT Figures for every figure and percent sign (all three are Jersey 20, /theme/fonts/display.css);
   Creator Plex for sentences. Frames are the site's deck plates, laid as 9-slice border-images. */
@font-face { font-family: "Creator Plex"; src: url(/theme/fonts/body-1.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Creator Plex"; src: url(/theme/fonts/body-3.woff2) format("woff2"); font-weight: 600 700; font-style: normal; font-display: swap; }
.qcn {
  --cn-green: #00ee83;
  --cn-orange: #ff610b;
  --cn-cream: #f4e7cb;
  --cn-yellow: #ffd43b;
  --cn-red: #ff6b5e;
  --cn-display: var(--t-font-display, "QUIT Display", monospace);
  --cn-pixel: var(--t-font-pixel, "QUIT Pixel", monospace);
  --cn-body: "Creator Plex", "IBM Plex Mono", monospace;
  --cn-fig: "QUIT Figures", "QUIT Figures Fallback", monospace;
  --cn-deck: url(/runtime/quit/community-art/deck.webp) 66 76 72 76 / 20px stretch;
  --cn-bay: url(/runtime/quit/deck-art/bay.webp) 44 50 fill / 14px 16px stretch;
  --cn-shadow: 3px 3px 0 #6b2200, 4px 4px 0 #000;
  min-width: 0;
  color: var(--cn-cream);
  background: #030805;
  font: 400 16px/1.35 var(--cn-body);
}
.qcn *, .qcn *::before, .qcn *::after { box-sizing: border-box; }
.qcn :where(h2,h3,h4,p,figure,dl,dd,ol) { margin: 0; padding: 0; }
.qcn :where(button,a,input):focus-visible { outline: 3px solid #fff0ad; outline-offset: 3px; }
.qcn .cn-plate { min-width: 0; border: 12px solid transparent; border-image: var(--cn-deck); background: #001009; }
.qcn .cn-fig { font-family: var(--cn-fig); font-weight: 400; letter-spacing: .01em; }

/* ---------------------------------------------------------------- keys */
.qcn .cn-key {
  display: flex; justify-content: center; align-items: center; min-width: 0; min-height: 44px; margin: 0;
  padding: 8px 10px 12px; border: 0 solid transparent; border-radius: 0;
  border-image: url(/runtime/quit/deck-art/key-dark.webp) 40 46 50 fill / 9px 10px 12px stretch;
  background: none; color: #b9c7bd; font: 700 clamp(13px, 1.15vw, 19px)/1.15 var(--cn-display); letter-spacing: .03em;
  text-align: center; text-decoration: none; cursor: pointer; touch-action: manipulation;
}
.qcn .cn-key[aria-pressed="true"], .qcn .cn-key--green { border-image-source: url(/runtime/quit/deck-art/key-green.webp); color: #030805; }
.qcn .cn-key--orange { border-image-source: url(/runtime/quit/deck-art/key-orange.webp); color: #030805; }
.qcn .cn-key:hover { filter: brightness(1.12); }
.qcn .cn-key:active { transform: translateY(1px); }
.qcn .cn-mini { min-height: 26px; padding: 4px 4px 6px; color: var(--cn-green); font: 700 clamp(10px, .74vw, 12px)/1.1 var(--cn-display); letter-spacing: .02em; white-space: nowrap; border-image-width: 5px 6px 7px; }
.qcn .cn-mini.cn-key--green { color: #030805; }

/* ---------------------------------------------------------------- the plan: headline, pay ladder, calculator */
.qcn .cn-plan { padding: 8px clamp(10px, 1.2vw, 18px) 16px; container: plan / inline-size; }
.qcn .cn-kicker { color: var(--cn-orange); text-transform: uppercase; }
.qcn .cn-kicker__words { display: block; font: 700 clamp(20px, 2.1vw, 38px)/1.1 var(--cn-pixel); letter-spacing: .01em; text-shadow: var(--cn-shadow); }
.qcn .cn-kicker__fig { display: block; margin-top: 4px; color: var(--cn-green); font: 400 clamp(64px, 7.6vw, 128px)/.9 var(--cn-fig); letter-spacing: .01em; text-shadow: 0 0 24px rgba(0, 238, 131, .32), 5px 5px 0 #000; }
.qcn .cn-plan h2 { margin: 12px 0 14px; color: var(--cn-orange); font: 700 clamp(18px, 1.9vw, 32px)/1.1 var(--cn-display); letter-spacing: .01em; text-shadow: var(--cn-shadow); }
.qcn .cn-rates { display: grid; gap: 16px; }
.qcn .cn-rate {
  position: relative; display: grid; grid-template-columns: clamp(42px, 4vw, 68px) minmax(0, 1fr) auto; align-items: center;
  column-gap: clamp(12px, 1.4vw, 24px); min-height: clamp(70px, 5.8vw, 92px); padding: 2px clamp(14px, 1.8vw, 30px) 6px clamp(8px, 1vw, 16px);
  border: 0 solid transparent; border-width: 14px 16px; border-image: var(--cn-bay);
}
.qcn .cn-rate:nth-child(2) { margin-left: 4%; }
.qcn .cn-rate:nth-child(3) { margin-left: 8%; }
.qcn .cn-rate + .cn-rate::before { content: ""; position: absolute; top: -30px; left: calc(clamp(8px, 1vw, 16px) + clamp(42px, 4vw, 68px) / 2 - 2px); width: 4px; height: 30px; background: var(--cn-green); box-shadow: 0 0 8px rgba(0, 238, 131, .55); }
.qcn .cn-rate__n { grid-row: 1 / span 2; color: var(--cn-orange); font: 400 clamp(38px, 3.6vw, 62px)/1 var(--cn-fig); text-align: center; text-shadow: var(--cn-shadow); }
.qcn .cn-rate__label { grid-column: 2; align-self: end; color: var(--cn-green); font: 600 clamp(15px, 1.35vw, 23px)/1.15 var(--cn-display); letter-spacing: .02em; }
.qcn .cn-rate__paid { grid-column: 2; align-self: start; margin-top: 3px; color: var(--cn-cream); font: 400 clamp(13px, 1.05vw, 17px)/1.3 var(--cn-body); }
.qcn .cn-rate__value { grid-column: 3; grid-row: 1 / span 2; color: var(--cn-green); font: 400 clamp(42px, 4.3vw, 74px)/.95 var(--cn-fig); letter-spacing: .01em; text-shadow: 0 0 16px rgba(0, 238, 131, .28), 3px 3px 0 #000; white-space: nowrap; }
.qcn .cn-team { margin: 0 0 0 8%; padding: 2px 6px; color: var(--cn-cream); font: 400 clamp(13px, 1.05vw, 17px)/1.4 var(--cn-body); }

.qcn .cn-plan--calculator { display: grid; grid-template-columns: minmax(0, 1.85fr) minmax(300px, 1fr); gap: clamp(14px, 1.8vw, 28px); align-items: start; }
.qcn .cn-plan__side { display: grid; gap: 14px; min-width: 0; }
.qcn .cn-calculator { container: calculator / inline-size; display: grid; gap: 8px; min-width: 0; padding: 6px 12px 12px; border: 12px solid transparent; border-image: var(--cn-deck); background: #001009; text-align: center; }
.qcn .cn-calculator h3 { color: var(--cn-green); font: 700 clamp(15px, 1.3vw, 21px)/1.1 var(--cn-display); letter-spacing: .03em; }
.qcn .cn-sales, .qcn .cn-today { min-width: 0; padding: 8px 10px; border: 1px solid #2f4a39; background: #020a06; }
.qcn .cn-sales { text-align: left; }
.qcn .cn-sales label, .qcn .cn-today p { display: block; color: var(--cn-cream); font: 600 clamp(11px, .88vw, 14px)/1.2 var(--cn-body); letter-spacing: .04em; }
.qcn .cn-input { display: flex; align-items: center; gap: 6px; margin-top: 6px; padding: 0 10px; min-width: 0; border: 2px solid var(--cn-green); border-radius: 3px; background: #010604; color: var(--cn-cream); font: 600 20px/1 var(--cn-body); }
.qcn .cn-input input { display: block; width: 100%; min-width: 0; min-height: 38px; border: 0; padding: 2px 0; background: none; color: var(--cn-cream); font: 600 20px/1.2 var(--cn-body); }
.qcn .cn-input:has([aria-invalid="true"]) { border-color: #ff6860; }
.qcn [data-cn-today] { display: block; margin-top: 4px; overflow-wrap: anywhere; color: var(--cn-green); font: 400 min(10cqi, 38px)/1.05 var(--cn-fig); letter-spacing: .02em; }
.qcn .cn-switch { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.qcn .cn-result { min-width: 0; margin-top: 4px; color: var(--cn-green); text-align: center; }
.qcn .cn-amount { display: block; font: 400 min(19cqi, calc(185cqi / var(--cn-chars, 10)), 84px)/1.12 var(--cn-fig); letter-spacing: .01em; text-shadow: 0 0 20px rgba(0, 238, 131, .3), 3px 3px 0 #000; white-space: nowrap; }
.qcn [data-cn-at] { margin-top: 2px; font: 600 clamp(14px, 1.15vw, 19px)/1.2 var(--cn-display); letter-spacing: .04em; }
.qcn .cn-callout { display: grid; gap: 10px; min-width: 0; padding: 16px 14px 14px; border: 3px solid var(--cn-orange); border-radius: 6px; background: #020805; box-shadow: inset 0 0 0 2px #000, 0 0 18px rgba(255, 97, 11, .16); text-align: center; }
.qcn .cn-projection { color: var(--cn-cream); font: 700 clamp(15px, 1.25vw, 21px)/1.35 var(--cn-display); letter-spacing: .02em; text-transform: uppercase; overflow-wrap: anywhere; text-wrap: balance; }
.qcn .cn-projection .cn-fig { color: var(--cn-orange); font-size: 1.5em; line-height: 1; }
.qcn .cn-condition { color: var(--cn-green); font: 700 clamp(13px, 1vw, 16px)/1.2 var(--cn-display); letter-spacing: .06em; }
.qcn .cn-link { min-height: 56px; color: #030805; font-size: clamp(15px, 1.3vw, 22px); }
.qcn .cn-percent { display: block; margin-top: 6px; color: var(--cn-green); font: 400 min(26cqi, 112px)/1.12 var(--cn-fig); text-align: center; letter-spacing: .01em; text-shadow: 0 0 22px rgba(0, 238, 131, .32), 4px 4px 0 #000; }

/* the home page's plan: one low console under the two offers */
.qcn .cn-plan:not(.cn-plan--calculator) { display: grid; grid-template-columns: minmax(0, 1.8fr) minmax(280px, 1fr); grid-template-rows: auto 1fr; grid-template-areas: "head switch" "rates switch"; gap: 8px clamp(14px, 1.8vw, 28px); align-items: start; }
.qcn .cn-plan__head { grid-area: head; min-width: 0; }
.qcn .cn-plan:not(.cn-plan--calculator) .cn-kicker__words, .qcn .cn-plan:not(.cn-plan--calculator) .cn-kicker__fig { display: inline; }
.qcn .cn-plan:not(.cn-plan--calculator) .cn-kicker__words { font-size: clamp(18px, 1.75vw, 31px); }
.qcn .cn-plan:not(.cn-plan--calculator) .cn-kicker__fig { margin-left: .15em; font-size: clamp(34px, 3.5vw, 62px); vertical-align: -.06em; white-space: nowrap; }
.qcn .cn-plan:not(.cn-plan--calculator) h2 { margin: 6px 0 4px; font-size: clamp(16px, 1.6vw, 27px); }
.qcn .cn-plan:not(.cn-plan--calculator) .cn-rates { grid-area: rates; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(110px, .75fr); gap: 10px; align-items: stretch; }
.qcn .cn-plan:not(.cn-plan--calculator) .cn-rate { margin: 0; grid-template-columns: minmax(0, 1fr); align-content: center; row-gap: 2px; min-height: 0; padding: 4px 10px 6px; }
.qcn .cn-plan:not(.cn-plan--calculator) .cn-rate::before, .qcn .cn-plan:not(.cn-plan--calculator) .cn-rate__n { display: none; }
.qcn .cn-plan:not(.cn-plan--calculator) .cn-rate__label { grid-column: 1; grid-row: 1; font-size: clamp(11px, .9vw, 15px); letter-spacing: 0; }
.qcn .cn-plan:not(.cn-plan--calculator) .cn-rate__value { grid-column: 1; grid-row: 2; font-size: clamp(40px, 4vw, 68px); }
.qcn .cn-plan:not(.cn-plan--calculator) .cn-rate__paid { grid-column: 1; grid-row: 3; margin: 0; }
.qcn .cn-plan:not(.cn-plan--calculator) .cn-team { align-self: center; margin: 0; }
.qcn .cn-plan__switch { grid-area: switch; container: switch / inline-size; display: grid; gap: 8px; align-content: start; min-width: 0; }
.qcn .cn-plan__switch .cn-callout { padding: 10px 12px 12px; border: 0; background: none; box-shadow: none; }

/* ---------------------------------------------------------------- what you get: two offers, picked like players */
.qcn .cn-content--apply { margin-top: 14px; padding: 6px clamp(8px, 1vw, 16px) 16px; }
.qcn .cn-benefits { margin: 0 0 12px; color: var(--cn-orange); font: 700 clamp(30px, 3.4vw, 58px)/1 var(--cn-pixel); letter-spacing: .01em; text-shadow: 4px 4px 0 #6b2200, 5px 5px 0 #000; }
.qcn .cn-select { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: stretch; }
.qcn .cn-slot {
  --slot: var(--cn-green); display: flex; flex-direction: column; gap: 12px; min-width: 0;
  padding: 12px clamp(10px, 1.1vw, 18px) 14px; border: 12px solid transparent; border-image: var(--cn-deck); background: #001009;
  box-shadow: inset 0 0 0 3px var(--slot), inset 0 0 0 5px #000, inset 0 0 26px rgba(0, 0, 0, .55);
}
.qcn .cn-slot--made { --slot: var(--cn-orange); }
.qcn .cn-slot__tags { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.qcn .cn-option { padding: 8px 12px 7px; background: var(--slot); color: #030805; font: 700 clamp(14px, 1.3vw, 22px)/1 var(--cn-display); letter-spacing: .04em; box-shadow: 0 3px 0 #000; }
.qcn .cn-chip { padding: 7px 10px 6px; border: 2px solid var(--slot); color: var(--slot); background: #020a06; font: 700 clamp(12px, 1.05vw, 18px)/1 var(--cn-display); letter-spacing: .04em; }
.qcn .cn-slot h3 { color: var(--cn-orange); font: 700 clamp(18px, 1.8vw, 32px)/1.1 var(--cn-display); letter-spacing: .01em; text-shadow: var(--cn-shadow); }
.qcn .cn-lead { color: var(--cn-cream); font: 400 clamp(14px, 1.1vw, 18px)/1.45 var(--cn-body); }
.qcn .cn-stats { display: grid; gap: 6px; }
.qcn .cn-stats div { display: grid; grid-template-columns: minmax(104px, .36fr) minmax(0, 1fr); align-items: center; gap: 12px; padding: 7px 12px; border: 1px solid #2c4636; background: #03100a; }
.qcn .cn-stats dt { color: var(--cn-green); font: 700 clamp(12px, 1vw, 16px)/1.15 var(--cn-display); letter-spacing: .04em; }
.qcn .cn-stats dd { color: var(--cn-cream); font: 400 clamp(14px, 1.05vw, 17px)/1.3 var(--cn-body); }

/* option 1: the studio's lineup; one reel at a time carries the keys */
.qcn .cn-lineup { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 8px; }
.qcn .cn-reel { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.qcn .cn-tag { padding: 4px 3px 3px; border: 2px solid var(--cn-green); background: #020a06; color: var(--cn-green); font: 700 clamp(10px, .8vw, 13px)/1 var(--cn-display); letter-spacing: .06em; text-align: center; }
.qcn .cn-tag--next { color: var(--cn-yellow); border-color: #b89d24; }
.qcn .cn-reel__screen { position: relative; aspect-ratio: 9 / 16; min-width: 0; overflow: hidden; border: 2px solid #26372c; background: #030805; }
.qcn .cn-reel[data-cn-active] .cn-reel__screen { border-color: var(--cn-green); box-shadow: 0 0 12px rgba(0, 238, 131, .35); }
.qcn .cn-reel__screen img, .qcn .cn-reel__screen video { display: block; width: 100%; height: 100%; object-fit: cover; }
.qcn .cn-reel__screen video { position: absolute; inset: 0; z-index: 1; }
.qcn .cn-reel__pick { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; background: none; cursor: pointer; }
.qcn .cn-reel__pick:focus-visible { outline-offset: -4px; }
.qcn .cn-reel[data-cn-active] .cn-reel__pick { display: none; }
.qcn .cn-reel__controls { display: none; position: absolute; z-index: 3; inset-inline: 4px; bottom: 4px; gap: 3px; grid-template-columns: minmax(0, 1fr); }
.qcn .cn-reel[data-cn-active] .cn-reel__controls { display: grid; }
.qcn .cn-reel__title { color: var(--cn-cream); font: 600 clamp(10px, .78vw, 13px)/1.22 var(--cn-body); overflow-wrap: anywhere; }
.qcn .cn-reel__controls { grid-template-columns: repeat(2, minmax(0, 1fr)); inset-inline: 6px; bottom: 6px; }
.qcn .cn-reel__title { font-size: clamp(11px, .85vw, 14px); }

/* option 2: the creator's own photos and story, made into a before and after */
.qcn .cn-made__show { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; align-items: start; }
.qcn .cn-made__inputs { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 14px; align-items: center; min-width: 0; padding-inline: 4px; }
.qcn .cn-photos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; padding: 7px 7px 9px; background: #efe4c6; border-radius: 2px; box-shadow: 0 0 0 1px #b9a576, 3px 4px 0 rgba(0, 0, 0, .6); transform: rotate(-1.2deg); }
.qcn .cn-photos img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; object-position: 50% 50%; border: 1px solid #3a3020; }
.qcn .cn-story { padding: 10px 10px 12px; background: url(/runtime/go/art/hr-ledger.webp) center / 100% 100% no-repeat, #efe4c6; color: #1d2a1f; box-shadow: 3px 4px 0 rgba(0, 0, 0, .6); transform: rotate(.8deg); }
.qcn .cn-story__head { margin-bottom: 4px; color: #0b5a34; font: 400 clamp(17px, 1.5vw, 27px)/1 var(--cn-fig); letter-spacing: .02em; white-space: nowrap; }
.qcn .cn-story p:not(.cn-story__head) { font: 600 clamp(10px, .76vw, 13px)/1.3 var(--cn-body); letter-spacing: 0; }
.qcn .cn-made__split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 4px; min-width: 0; margin: 0; border: 3px solid #000; background: var(--cn-orange); }
.qcn .cn-made__half { position: relative; aspect-ratio: 9 / 16; min-width: 0; overflow: hidden; background: #050302; }
.qcn .cn-made__half img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.qcn .cn-made__half .cn-tag { position: absolute; z-index: 1; top: 8px; left: 8px; padding: 6px 10px 5px; background: rgba(2, 10, 6, .88); font-size: clamp(11px, .9vw, 15px); }
.qcn .cn-made__half .cn-tag--before { color: var(--cn-red); border-color: var(--cn-red); }
.qcn .cn-made__split figcaption { grid-column: 1 / -1; padding: 9px 8px 8px; background: #050302; color: var(--cn-cream); font: 600 clamp(12px, 1vw, 16px)/1.2 var(--cn-body); letter-spacing: .03em; text-align: center; }
.qcn .cn-made__steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; list-style: none; }
.qcn .cn-made__steps li { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 6px; min-width: 0; min-height: 132px; padding: 10px 4px 8px; border: 0 solid transparent; border-width: 12px 13px; border-image: var(--cn-bay); text-align: center; }
.qcn .cn-made__n { color: var(--cn-orange); font: 400 clamp(34px, 2.7vw, 48px)/.9 var(--cn-fig); text-shadow: 3px 3px 0 #000; }
.qcn .cn-made__body { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; width: 100%; }
.qcn .cn-made__label { color: var(--cn-green); font: 700 clamp(12px, .95vw, 16px)/1.2 var(--cn-display); letter-spacing: .02em; overflow-wrap: normal; word-break: normal; hyphens: none; }
.qcn .cn-made__keys { display: flex; flex-direction: column; gap: 4px; width: 100%; min-width: 0; }
.qcn .cn-made__keys .cn-mini { padding-inline: 4px; white-space: normal; }
.qcn .cn-made__managed { display: flex; align-items: center; justify-content: center; gap: 6px; color: var(--cn-cream); font: 600 clamp(11px, .85vw, 14px)/1.2 var(--cn-body); }
.qcn .cn-lamp { flex: none; width: 13px; height: 13px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #d9ffe9, #00ee83 45%, #006a3a); box-shadow: 0 0 10px #00ee83; }
.qcn .cn-followers { color: var(--cn-green); font: 600 clamp(13px, 1vw, 16px)/1.35 var(--cn-body); text-align: center; }

/* the home page's OPTION 1 carries the three approved steps and BECOME A PARTNER */
.qcn .q-partner__steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; list-style: none; }
.qcn .q-partner__steps li { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 10px; min-width: 0; }
.qcn .q-partner__number { color: var(--cn-green); font: 400 clamp(38px, 3.2vw, 58px)/.9 var(--cn-fig); text-shadow: 3px 3px 0 #000; }
.qcn .q-partner__steps p { color: var(--cn-cream); font: 400 clamp(13px, 1vw, 16px)/1.4 var(--cn-body); }
.qcn .cn-cta { min-height: 58px; margin-top: auto; color: #030805; font-size: clamp(15px, 1.4vw, 24px); }

/* ---------------------------------------------------------------- narrower screens */
@media (max-width: 1180px) {
  .qcn .cn-select { grid-template-columns: minmax(0, 1fr); }
  .qcn .cn-kicker__words { font-size: clamp(18px, 1.95vw, 30px); }
  .qcn .cn-lineup { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px 6px; }
  .qcn .cn-reel__controls { grid-template-columns: minmax(0, 1fr); inset-inline: 4px; bottom: 4px; }
  .qcn .cn-plan--calculator { grid-template-columns: minmax(0, 1.4fr) minmax(280px, 1fr); }
  .qcn .cn-plan:not(.cn-plan--calculator) { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "rates" "switch"; }
}
@media (max-width: 900px) {
  .qcn .cn-plan { padding: 6px 6px 10px; border-width: 10px; border-image-width: 16px; }
  .qcn .cn-plan--calculator { grid-template-columns: minmax(0, 1fr); }
  .qcn .cn-kicker__words { font-size: clamp(20px, 5.4vw, 34px); }
  .qcn .cn-kicker__fig { font-size: clamp(64px, 19vw, 120px); }
  .qcn .cn-plan:not(.cn-plan--calculator) .cn-kicker__words, .qcn .cn-plan:not(.cn-plan--calculator) .cn-kicker__fig { display: block; }
  .qcn .cn-plan:not(.cn-plan--calculator) .cn-kicker__fig { margin: 4px 0 0; font-size: clamp(56px, 16vw, 100px); }
  .qcn .cn-plan h2, .qcn .cn-plan:not(.cn-plan--calculator) h2 { margin: 10px 0 12px; font-size: clamp(16px, 4.4vw, 26px); }
  .qcn .cn-rates { gap: 14px; }
  .qcn .cn-rate { grid-template-columns: clamp(30px, 8vw, 48px) minmax(0, 1fr) auto; column-gap: 10px; min-height: 72px; padding: 2px 10px 4px 4px; border-width: 12px 14px; }
  .qcn .cn-rate:nth-child(2) { margin-left: 3%; }
  .qcn .cn-rate:nth-child(3) { margin-left: 6%; }
  .qcn .cn-rate + .cn-rate::before { top: -26px; height: 26px; left: calc(4px + clamp(30px, 8vw, 48px) / 2 - 2px); }
  .qcn .cn-rate__n { font-size: clamp(28px, 7.4vw, 44px); }
  .qcn .cn-rate__label { font-size: clamp(13px, 3.6vw, 19px); }
  .qcn .cn-rate__paid { font-size: clamp(12px, 3.2vw, 16px); }
  .qcn .cn-rate__value { font-size: clamp(38px, 11vw, 64px); }
  .qcn .cn-team { margin-left: 6%; font-size: clamp(12px, 3.3vw, 16px); }
  .qcn .cn-plan:not(.cn-plan--calculator) .cn-rates { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .qcn .cn-plan:not(.cn-plan--calculator) .cn-rate { grid-template-columns: minmax(0, 1fr) auto; column-gap: 10px; padding: 2px 8px 4px; border-width: 12px 14px; }
  .qcn .cn-plan:not(.cn-plan--calculator) .cn-rate__value { grid-column: 2; grid-row: 1 / span 2; }
  .qcn .cn-plan:not(.cn-plan--calculator) .cn-rate__paid { grid-row: 2; }
  .qcn .cn-plan:not(.cn-plan--calculator) .cn-rate__label { font-size: clamp(13px, 3.6vw, 17px); }
  .qcn .cn-plan:not(.cn-plan--calculator) .cn-rate__value { font-size: clamp(36px, 10vw, 56px); }
  .qcn .cn-plan:not(.cn-plan--calculator) .cn-rate__paid { font-size: clamp(12px, 3.2vw, 15px); }
  .qcn .cn-plan:not(.cn-plan--calculator) .cn-team { grid-column: 1 / -1; }
  .qcn .cn-switch { gap: 4px; }
  .qcn .cn-switch .cn-key { padding-inline: 3px; font-size: clamp(11px, 3.2vw, 18px); }
  .qcn .cn-projection { font-size: clamp(14px, 4vw, 20px); }
  .qcn .cn-link { min-height: 52px; font-size: clamp(15px, 4.2vw, 22px); }
  .qcn .cn-content--apply { padding: 4px 4px 10px; border-width: 10px; border-image-width: 16px; }
  .qcn .cn-benefits { font-size: clamp(26px, 8vw, 44px); }
  .qcn .cn-slot { gap: 10px; padding: 10px 8px 12px; border-width: 10px; border-image-width: 16px; }
  .qcn .cn-option { font-size: clamp(13px, 3.6vw, 18px); }
  .qcn .cn-chip { font-size: clamp(11px, 3vw, 15px); }
  .qcn .cn-slot h3 { font-size: clamp(18px, 5.2vw, 30px); }
  .qcn .cn-lead { font-size: clamp(14px, 3.8vw, 17px); }
  .qcn .cn-stats div { grid-template-columns: minmax(0, 1fr); gap: 3px; padding: 7px 10px 8px; }
  .qcn .cn-stats dt { font-size: clamp(11px, 3vw, 14px); white-space: nowrap; }
  .qcn .cn-stats dd { font-size: clamp(13px, 3.6vw, 16px); }
  .qcn .cn-lineup, .qcn .cn-content--apply .cn-lineup { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 6px; }

  .qcn .cn-content--apply .cn-reel__controls, .qcn .cn-reel__controls { grid-template-columns: minmax(0, 1fr); inset-inline: 3px; bottom: 3px; }
  .qcn .cn-tag { font-size: clamp(10px, 2.8vw, 13px); }
  .qcn .cn-reel__title { font-size: clamp(10px, 2.7vw, 13px); }
  .qcn .cn-mini { min-height: 28px; font-size: clamp(9px, 2.5vw, 12px); }
  /* YOUR STORY on one line in the note: Jersey 20 sets it 5.25 em wide (Anton, its face until 26 Oct 2026, 4.6 em), and
     the note's text box grows with the window, so the size follows it (measured 320 to 767 px, 26 Oct 2026). */
  .qcn .cn-story__head { font-size: clamp(14px, calc(8.1vw - 11.8px), 30px); }
  .qcn .cn-story p:not(.cn-story__head) { font-size: clamp(11px, 3vw, 14px); }
  .qcn .cn-made__half .cn-tag { font-size: clamp(11px, 3vw, 14px); }
  .qcn .cn-made__split figcaption { font-size: clamp(12px, 3.4vw, 16px); }
  .qcn .cn-made__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .qcn .cn-made__steps li { min-height: 112px; border-width: 12px 14px; }
  .qcn .cn-made__n { font-size: clamp(30px, 8.4vw, 46px); }
  .qcn .cn-made__label { font-size: clamp(12px, 3.3vw, 15px); }
  .qcn .cn-followers { font-size: clamp(12px, 3.4vw, 15px); }
  .qcn .q-partner__steps { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .qcn .q-partner__steps li { align-items: center; padding: 8px 2px; border-top: 1px solid #2c4636; }
  .qcn .q-partner__number { width: 1.2em; font-size: clamp(30px, 8vw, 44px); text-align: center; }
  .qcn .q-partner__steps p { font-size: clamp(14px, 3.8vw, 18px); }
  .qcn .cn-cta { min-height: 54px; font-size: clamp(16px, 4.4vw, 24px); }
}
@media (max-width: 420px) {
  .qcn .cn-made__steps li { min-height: 104px; padding-inline: 2px; }
  .qcn .cn-story__head { white-space: normal; }
}

/* ---------------------------------------------------------------- /apply: the plan as the approved top B draws it
   (owner, 26 Oct 2026). Every rule is scoped to .cn-plan--calculator, so the home floor's plan does not move. One
   console: the headline and the pay ladder on a CRT glass at the left, one riveted cabinet at the right holding the
   calculator and the callout. Sizes are the design's ink at 1440 in CSS px, each multiplied by its column's unit:
   --cn-u in the left column and --cn-v in the cabinet are 1px when the column is as wide as the design's and shrink
   with it below that, so the whole composition holds, one line per heading and label, from 901 px up. Phones (900 px
   and narrower) set both units to 1px and size by their own rules. Labels and lines keep a 13 px floor (the
   cabinet's two small labels 12 px, the design's 13.5 at 1440). font-size-adjust holds each heading and figure at
   the design's cap height in whichever face the theme tokens name. */
.qcn .cn-plan--calculator { grid-template-columns: minmax(0, 1fr) clamp(330px, 32.3%, 440px); gap: 7px; align-items: stretch; padding: 14px 6px 11px 14px; }
.qcn .cn-plan--calculator .cn-plan__main {
  container: cn-main / inline-size; --cn-u: min(1px, 100cqi / 836.9);
  min-width: 0; padding: 1px min(36px, 2.667cqi) 3px min(34px, 2.519cqi); border-radius: 18px;
  background: repeating-linear-gradient(180deg, rgba(0, 238, 131, .045) 0 1px, transparent 1px 3px), radial-gradient(130% 95% at 50% 42%, #05190f 0%, #03120a 58%, #020a06 100%);
  box-shadow: inset 0 0 0 2px #22342a, inset 0 0 0 4px #050b08, inset 0 0 38px rgba(0, 238, 131, .1), 0 0 0 1px #000;
}
.qcn .cn-plan--calculator .cn-kicker__words { font-size: calc(43 * var(--cn-u)); line-height: 1; letter-spacing: .17em; font-size-adjust: cap-height .5882; text-wrap: balance; }
.qcn .cn-plan--calculator .cn-kicker__fig { margin-top: calc(1.5 * var(--cn-u)); font-size: calc(124 * var(--cn-u)); line-height: .7; letter-spacing: .03em; font-size-adjust: cap-height .5882; text-shadow: 0 0 22px rgba(0, 238, 131, .34), 5px 5px 0 #000; }
.qcn .cn-plan--calculator h2 { margin: calc(9 * var(--cn-u)) 0 calc(7 * var(--cn-u)); font-size: calc(37 * var(--cn-u)); line-height: 1; letter-spacing: .2em; font-size-adjust: cap-height .5882; text-wrap: balance; }
.qcn .cn-plan--calculator .cn-rates { gap: calc(13 * var(--cn-u)); }
.qcn .cn-plan--calculator .cn-rate { grid-template-columns: calc(100 * var(--cn-u)) minmax(0, 1fr) calc(150 * var(--cn-u)); column-gap: calc(36 * var(--cn-u)); min-height: calc(75 * var(--cn-u)); padding: 0 calc(62 * var(--cn-u)) 0 calc(14 * var(--cn-u)); border-width: 14px 16px; }
.qcn .cn-plan--calculator .cn-rate:nth-child(2) { margin-inline: calc(29 * var(--cn-u)); padding-right: calc(33 * var(--cn-u)); }
.qcn .cn-plan--calculator .cn-rate:nth-child(3) { margin-inline: calc(58 * var(--cn-u)); padding-right: calc(4 * var(--cn-u)); }
.qcn .cn-plan--calculator .cn-rate + .cn-rate::before { top: calc(-14px - 13 * var(--cn-u)); left: calc(64 * var(--cn-u) - 16px); width: 3px; height: calc(2px + 13 * var(--cn-u)); box-shadow: none; opacity: .8; }
.qcn .cn-plan--calculator .cn-rate__n { font-size: calc(65 * var(--cn-u)); line-height: calc(40 * var(--cn-u)); font-size-adjust: cap-height .5882; }
.qcn .cn-plan--calculator .cn-rate__label { font-size: max(13px, calc(21 * var(--cn-u))); letter-spacing: .03em; font-size-adjust: cap-height .698; text-wrap: balance; }
.qcn .cn-plan--calculator .cn-rate__paid { margin-top: 2px; font-size: max(13px, calc(15.5 * var(--cn-u))); }
.qcn .cn-plan--calculator .cn-rate__value { justify-self: center; font-size: calc(76 * var(--cn-u)); line-height: calc(46 * var(--cn-u)); letter-spacing: .03em; margin-right: -.03em; font-size-adjust: cap-height .5882; }
.qcn .cn-plan--calculator .cn-team { margin: -3px 0 0 calc(79 * var(--cn-u)); padding: 0; font-size: max(13px, calc(15.6 * var(--cn-u))); text-wrap: balance; }

/* the cabinet: the console's deck plate with its four screws round a glass, the calculator and the callout inside */
.qcn .cn-plan--calculator .cn-plan__side {
  container: cn-side / inline-size; --cn-v: min(1px, 100cqi / 388);
  gap: 9px; align-content: start; padding: 0 12px; border: 12px solid transparent; border-radius: 20px; border-image: var(--cn-deck);
  background: repeating-linear-gradient(180deg, rgba(0, 238, 131, .04) 0 1px, transparent 1px 3px) padding-box, radial-gradient(130% 90% at 50% 40%, #04170e 0%, #02100a 60%, #020a06 100%) padding-box;
}
.qcn .cn-plan--calculator .cn-calculator { gap: 0; padding: 0; border: 0; border-image: none; background: none; }
.qcn .cn-plan--calculator .cn-calculator h3 { margin: -5px 0 calc(8 * var(--cn-v)); padding-left: .24em; font-size: calc(20 * var(--cn-v)); line-height: 1.1; letter-spacing: .24em; font-size-adjust: cap-height .5882; }
.qcn .cn-plan--calculator .cn-sales, .qcn .cn-plan--calculator .cn-today { border-color: #2c4536; background: rgba(1, 7, 4, .72); }
.qcn .cn-plan--calculator .cn-sales { padding: calc(7 * var(--cn-v)) calc(11 * var(--cn-v)) calc(6 * var(--cn-v)); }
.qcn .cn-plan--calculator .cn-today { margin-top: -1px; padding: calc(8 * var(--cn-v)) calc(11 * var(--cn-v)) calc(5 * var(--cn-v)); }
.qcn .cn-plan--calculator .cn-sales label, .qcn .cn-plan--calculator .cn-today p { font-size: max(12px, calc(13.5 * var(--cn-v))); letter-spacing: .04em; font-size-adjust: cap-height .698; text-wrap: balance; }
.qcn .cn-plan--calculator .cn-input { margin-top: calc(7.5 * var(--cn-v)); }
.qcn .cn-plan--calculator .cn-input input { min-height: 30px; }
.qcn .cn-plan--calculator [data-cn-today] { margin-top: calc(3 * var(--cn-v)); font-size: calc(38 * var(--cn-v)); line-height: .8; letter-spacing: .09em; font-size-adjust: cap-height .5882; }
.qcn .cn-plan--calculator .cn-switch { margin-top: calc(9.5 * var(--cn-v)); gap: calc(8 * var(--cn-v)); }
.qcn .cn-plan--calculator .cn-switch .cn-key { min-height: 34px; padding: 5px 6px 8px calc(6px + .2em); font-size: calc(16.5 * var(--cn-v)); line-height: 1; letter-spacing: .2em; font-size-adjust: cap-height .5882; }
.qcn .cn-plan--calculator .cn-result { margin-top: calc(8.5 * var(--cn-v)); }
.qcn .cn-plan--calculator .cn-amount { font-size: min(73px, 19cqi, calc(190cqi / var(--cn-chars, 10))); line-height: .72; letter-spacing: .01em; font-size-adjust: cap-height .5882; }
.qcn .cn-plan--calculator [data-cn-at] { margin-top: 3px; font-size: max(13px, calc(15.5 * var(--cn-v))); letter-spacing: .04em; font-size-adjust: cap-height .698; }
.qcn .cn-plan--calculator .cn-callout { gap: calc(6 * var(--cn-v)); margin: 0 -6px; padding: calc(7 * var(--cn-v)) calc(10 * var(--cn-v)) calc(6 * var(--cn-v)); border-radius: 8px; background: rgba(2, 8, 5, .9); }
.qcn .cn-plan--calculator .cn-projection { font-size: max(12px, calc(18 * var(--cn-v))); line-height: 1.2; text-wrap: balance; overflow-wrap: normal; font-size-adjust: cap-height .698; }
.qcn .cn-plan--calculator .cn-projection b:not([data-cn-x]):not([data-cn-pct]) { color: inherit; font: inherit; letter-spacing: inherit; }
/* the figures sit tight, as the design draws them: the multiple's tracking stops at its X, so the comma follows it */
.qcn .cn-plan--calculator .cn-projection [data-cn-x] { font-size: 1em; font-size-adjust: cap-height .698; letter-spacing: .06em; margin-right: -.06em; }
/* the doubled figure always opens the callout's second line, whatever the width and whether or not the browser balances:
   a line break before it, silent to screen readers. The figure itself takes no line height, so its empty start on the
   first line leaves that line as it was; a zero-width mark after it holds the second line at the figure's own height. */
.qcn .cn-plan--calculator .cn-projection [data-cn-pct] { font-size: 2em; line-height: 0; letter-spacing: .04em; font-size-adjust: cap-height .5882; white-space: nowrap; }
.qcn .cn-plan--calculator .cn-projection [data-cn-pct]::before { content: "\A"; content: "\A" / ""; white-space: pre; }
.qcn .cn-plan--calculator .cn-projection [data-cn-pct]::after { content: "\200B"; content: "\200B" / ""; display: inline-block; line-height: .8; }
.qcn .cn-plan--calculator .cn-condition { font-size: max(13px, calc(15 * var(--cn-v))); font-size-adjust: cap-height .698; }
.qcn .cn-plan--calculator .cn-link { min-height: 52px; padding-left: calc(10px + .3em); font-size: calc(20 * var(--cn-v)); letter-spacing: .3em; font-size-adjust: cap-height .5882; }
@media (pointer: coarse) {
  .qcn .cn-plan--calculator .cn-switch .cn-key { min-height: 44px; }
}
/* below 1180 px the cabinet sets the console's height; the glass centres its content in it */
@media (min-width: 901px) and (max-width: 1179px) {
  .qcn .cn-plan--calculator .cn-plan__main { display: grid; grid-template-columns: minmax(0, 1fr); align-content: center; }
}
@media (max-width: 900px) {
  .qcn .cn-plan--calculator { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 6px; border-width: 10px; border-image-width: 16px; }
  .qcn .cn-plan--calculator .cn-plan__main { --cn-u: 1px; padding: 8px 12px 12px; border-radius: 14px; }
  .qcn .cn-plan--calculator .cn-kicker__words { font-size: clamp(22px, 6.6vw, 40px); line-height: 1.05; letter-spacing: .08em; }
  .qcn .cn-plan--calculator .cn-kicker__fig { margin-top: 8px; font-size: clamp(64px, 20.5vw, 124px); letter-spacing: .03em; }
  .qcn .cn-plan--calculator h2 { margin: 12px 0 10px; font-size: clamp(20px, 6.2vw, 34px); letter-spacing: .07em; }
  .qcn .cn-plan--calculator .cn-rates { gap: 12px; }
  .qcn .cn-plan--calculator .cn-rate { grid-template-columns: clamp(28px, 8vw, 54px) minmax(0, 1fr) clamp(70px, 19vw, 132px); column-gap: 8px; min-height: 66px; padding: 0 clamp(8px, 3.6vw, 30px) 0 4px; border-width: 12px 14px; }
  .qcn .cn-plan--calculator .cn-rate:nth-child(2) { margin-inline: 2%; padding-right: max(0px, calc(clamp(8px, 3.6vw, 30px) - 2%)); }
  .qcn .cn-plan--calculator .cn-rate:nth-child(3) { margin-inline: 4%; padding-right: max(0px, calc(clamp(8px, 3.6vw, 30px) - 4%)); }
  .qcn .cn-plan--calculator .cn-rate + .cn-rate::before { top: -24px; height: 13px; left: calc(4px + clamp(28px, 8vw, 54px) / 2 - 8px); }
  .qcn .cn-plan--calculator .cn-rate__n { font-size: clamp(36px, 11vw, 60px); line-height: 1; }
  .qcn .cn-plan--calculator .cn-rate__label { font-size: clamp(14px, 3.75vw, 20px); letter-spacing: .02em; }
  .qcn .cn-plan--calculator .cn-rate__paid { font-size: clamp(14px, 3.6vw, 16px); }
  .qcn .cn-plan--calculator .cn-rate__value { font-size: clamp(38px, 10.4vw, 64px); line-height: 1; letter-spacing: 0; margin-right: 0; }
  .qcn .cn-plan--calculator .cn-team { margin: -2px 0 0 calc(4% + 14px); font-size: clamp(14px, 3.6vw, 16px); }
  .qcn .cn-plan--calculator .cn-plan__side { --cn-v: 1px; padding: 0 8px; border-width: 10px; border-image-width: 16px; border-radius: 16px; }
  .qcn .cn-plan--calculator .cn-calculator h3 { margin-top: 2px; font-size: clamp(18px, 5.4vw, 22px); letter-spacing: .16em; padding-left: .16em; }
  .qcn .cn-plan--calculator .cn-sales { padding-inline: 4px; }
  .qcn .cn-plan--calculator .cn-sales label, .qcn .cn-plan--calculator .cn-today p { font-size: 14px; letter-spacing: 0; }
  .qcn .cn-plan--calculator [data-cn-today] { font-size: clamp(28px, 8.6vw, 38px); }
  .qcn .cn-plan--calculator .cn-switch .cn-key { min-height: 44px; font-size: clamp(14px, 4.1vw, 18px); letter-spacing: .1em; padding-left: calc(3px + .1em); }
  .qcn .cn-plan--calculator .cn-amount { line-height: .9; }
  .qcn .cn-plan--calculator .cn-callout { margin: 0 -4px 8px; }
  .qcn .cn-plan--calculator .cn-projection { font-size: clamp(14px, 4vw, 18px); }
  .qcn .cn-plan--calculator .cn-projection [data-cn-pct] { font-size: 1.7em; }
  .qcn .cn-plan--calculator .cn-condition { font-size: clamp(14px, 3.8vw, 15px); }
  .qcn .cn-plan--calculator .cn-link { min-height: 52px; font-size: clamp(17px, 5vw, 21px); letter-spacing: .24em; padding-left: calc(10px + .24em); }
}
/* narrow phones: the ladder's plates give their label column the room for each label on one line */
@media (max-width: 420px) {
  .qcn .cn-plan--calculator .cn-plan__main { padding-inline: 8px; }
  .qcn .cn-plan--calculator .cn-rate { column-gap: 6px; padding-right: 8px; }
  .qcn .cn-plan--calculator .cn-rate:nth-child(2) { margin-inline: 1.5%; padding-right: max(0px, calc(8px - 1.5%)); }
  .qcn .cn-plan--calculator .cn-rate:nth-child(3) { margin-inline: 3%; padding-right: max(0px, calc(8px - 3%)); }
}
/* where a line cannot sit whole it breaks evenly, with or without balancing: the team line after build, the sales
   label after YOUR, and in a browser that does not balance, CREATORS YOU BRING IN after YOU */
@media (max-width: 559px) {
  .qcn .cn-plan--calculator .cn-team { max-width: 26ch; }
}
@media (max-width: 389px) {
  .qcn .cn-plan--calculator .cn-sales label { max-width: 19ch; }
}
@supports not (text-wrap: balance) {
  @media (max-width: 589px) {
    .qcn .cn-plan--calculator .cn-rate__label { max-width: 13.5ch; }
  }
}
@media (max-width: 359px) {
  .qcn .cn-plan--calculator .cn-rate { grid-template-columns: 26px minmax(0, 1fr) 64px; }
  .qcn .cn-plan--calculator .cn-rate + .cn-rate::before { left: calc(4px + 13px - 8px); }
  .qcn .cn-plan--calculator .cn-rate__label, .qcn .cn-plan--calculator .cn-rate__paid { font-size: 13px; letter-spacing: 0; }
  .qcn .cn-plan--calculator .cn-rate__value { font-size: 36px; }
}