/* ============================================================
   NETWORK GLADIATORS — SALES LETTER

   The deal: the graphics are as cheesy as 1993 gets — chrome
   logo, starburst badges, halftone, confetti, cartoon clip-art,
   hard drop shadows. The words are not. Every sentence on this
   page is plain.

   Everything sits on white. The spandex palette (magenta, cyan,
   gold, purple) does all the shouting, so the page stays light
   even when the decoration doesn't.
   ============================================================ */

:root {
  --paper: #ffffff;
  --pink: #fff5fa;   /* pink-tinted white */
  --ice: #f1fbfe;    /* cyan-tinted white */
  --line: #e6e2f2;

  --ink: #1a1150;
  --ink-2: #43389a;
  --magenta: #ff1e8e;
  --magenta-dk: #cc0f6c;
  --cyan: #00b6d8;
  --gold: #ffc70a;
  --purple: #7b2dff;
  --grey: #6a6390;

  --f-mega: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --f-head: "Anton", "Arial Narrow", Impact, sans-serif;
  --f-body: "Barlow", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --f-hand: "Permanent Marker", "Comic Sans MS", cursive;

  --wrap: 1040px;
  --tight: 640px;
  --gut: clamp(1.25rem, 5vw, 2.5rem);
  --block: clamp(3.2rem, 7vw, 5.5rem);

  --halftone: radial-gradient(circle, rgba(123, 45, 255, 0.11) 1.5px, transparent 1.6px);
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
img { display: block; max-width: 100%; height: auto; }
[hidden] { display: none !important; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: clamp(1.02rem, 0.98rem + 0.25vw, 1.2rem);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.wrap { width: min(100% - var(--gut) * 2, var(--wrap)); margin-inline: auto; }
.tight { max-width: var(--tight); }

.skip { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--ink); color: #fff; padding: 0.7em 1.2em; }
.skip:focus { left: 0; }
:focus-visible { outline: 3px solid var(--magenta); outline-offset: 3px; }

/* ============================================================
   TYPE
   ============================================================ */
h1, h2, h3 { font-family: var(--f-head); font-weight: 400; line-height: 1.02; text-wrap: balance; }

.h1 { font-size: clamp(2rem, 4.2vw, 3.3rem); }
.h2 { font-size: clamp(1.85rem, 4vw, 3rem); }
.h3 { font-size: clamp(1.1rem, 2vw, 1.45rem); line-height: 1.12; }

.eyebrow {
  display: inline-block;
  margin-bottom: 0.8rem;
  padding: 0.32em 0.85em;
  background: var(--gold);
  border: 3px solid var(--ink);
  box-shadow: 4px 4px 0 var(--ink);
  transform: rotate(-1.4deg);
  font-family: var(--f-mega);
  font-weight: 900;
  font-variation-settings: "wdth" 112;
  font-size: 0.76rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
}

/* the big shouty line — outlined, offset, unapologetic */
.slam {
  font-family: var(--f-mega);
  font-weight: 900;
  font-style: italic;
  font-variation-settings: "wdth" 118;
  font-size: clamp(1.7rem, 4.6vw, 3.3rem);
  line-height: 0.98;
  text-transform: uppercase;
  color: var(--magenta);
  text-shadow:
    0.055em 0.055em 0 var(--cyan),
    0.09em 0.09em 0 var(--ink);
}

.lede { font-size: clamp(1.1rem, 1.06rem + 0.4vw, 1.35rem); line-height: 1.5; color: var(--grey); text-wrap: pretty; }
.tiny { font-size: 0.85rem; line-height: 1.5; color: var(--grey); }
p + p { margin-top: 1em; }
strong, b { font-weight: 600; color: var(--ink); }
em, i { font-style: italic; }

.block { position: relative; padding-block: var(--block); }
.block--pink { background: var(--pink); }
.block--ice { background: var(--ice); }
.block--dots { background-image: var(--halftone); background-size: 13px 13px; }
.head { margin-bottom: clamp(1.6rem, 3.5vw, 2.4rem); }
.head .lede { margin-top: 0.8rem; max-width: 52ch; }

/* ============================================================
   1993 FURNITURE
   ============================================================ */

/* starburst badge */
.burst {
  display: grid;
  place-items: center;
  width: clamp(6.5rem, 11vw, 9.5rem);
  aspect-ratio: 1;
  padding: 1.2em;
  background: var(--gold);
  clip-path: polygon(50% 0%, 61% 18%, 82% 12%, 78% 33%, 98% 40%, 82% 53%, 95% 70%, 74% 71%,
                     71% 92%, 53% 81%, 38% 96%, 32% 76%, 11% 78%, 18% 58%, 1% 47%, 20% 36%,
                     12% 16%, 33% 19%);
  transform: rotate(-13deg);
  font-family: var(--f-hand);
  font-size: clamp(0.72rem, 1.3vw, 1rem);
  line-height: 1.05;
  text-align: center;
  color: var(--ink);
}

/* confetti, scattered by hand */
.spark { position: absolute; pointer-events: none; z-index: 0; }
.spark--tri { width: 26px; height: 24px; background: var(--cyan); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.spark--dot { width: 18px; height: 18px; border-radius: 50%; background: var(--gold); }
.spark--bar { width: 40px; height: 10px; background: var(--magenta); transform: rotate(-24deg); }
.spark--ring { width: 26px; height: 26px; border: 5px solid var(--purple); border-radius: 50%; }
.spark--x {
  width: 26px; height: 26px;
  background:
    linear-gradient(45deg, transparent 43%, var(--magenta) 43% 57%, transparent 57%),
    linear-gradient(-45deg, transparent 43%, var(--magenta) 43% 57%, transparent 57%);
}

/* chrome lettering — the gradient loses its own edges on white, so four
   chained drop-shadows build the outline back before the offset lands */
.chrome {
  font-style: italic;
  background: linear-gradient(180deg,
    #2f1d78 0%, #ffffff 24%, #86e9ff 38%, #00b6d8 48%,
    #ffffff 51%, #ff1e8e 62%, #ff9ccf 82%, #ffffff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter:
    drop-shadow(1.2px 1.2px 0 var(--ink))
    drop-shadow(-1.2px -1.2px 0 var(--ink))
    drop-shadow(5px 5px 0 var(--gold));
}

/* chrome needs size to show its bands, so the headings that wear it grow */
.h2.chrome { font-size: clamp(2.3rem, 5.4vw, 4.2rem); }

/* the rays behind the logo */
.sunburst {
  position: absolute;
  left: 50%;
  top: 42%;
  translate: -50% -50%;
  width: 190%;
  aspect-ratio: 1;
  z-index: 0;
  pointer-events: none;
  background: repeating-conic-gradient(from 0deg,
    rgba(255, 30, 142, 0.16) 0deg 6deg, transparent 6deg 12deg);
  -webkit-mask-image: radial-gradient(circle, #000 0%, rgba(0,0,0,.55) 26%, transparent 46%);
  mask-image: radial-gradient(circle, #000 0%, rgba(0,0,0,.55) 26%, transparent 46%);
  animation: nx-spin 120s linear infinite;
}

@keyframes nx-spin { to { rotate: 360deg; } }

/* the laser floor */
.gridfloor {
  position: absolute;
  inset: auto 0 0;
  height: 220px;
  z-index: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(90deg, rgba(0, 182, 216, 0.5) 0 2px, transparent 2px 64px),
    repeating-linear-gradient(0deg, rgba(0, 182, 216, 0.5) 0 2px, transparent 2px 44px);
  transform: perspective(260px) rotateX(64deg);
  transform-origin: bottom center;
  -webkit-mask-image: linear-gradient(transparent, #000 70%);
  mask-image: linear-gradient(transparent, #000 70%);
}

/* chrome ticker */
.marquee {
  overflow: hidden;
  border-block: 4px solid var(--ink);
  background: linear-gradient(180deg,
    #ffffff 0%, #dfe6f4 22%, #8e9ab5 46%, #ffffff 52%,
    #7683a0 56%, #c3ccdf 78%, #ffffff 100%);
}

.marquee__track {
  display: flex;
  width: max-content;
  padding-block: 0.5rem;
  animation: nx-slide 30s linear infinite;
}

.marquee__track > span {
  display: flex;
  align-items: center;
  gap: 1.4rem;
  padding-right: 1.4rem;
  font-family: var(--f-mega);
  font-weight: 900;
  font-style: italic;
  font-variation-settings: "wdth" 110;
  font-size: 0.92rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;
}

.marquee i { font-style: normal; color: var(--magenta); }

@keyframes nx-slide { to { transform: translateX(-50%); } }

/* stick-on badge */
.sticker {
  display: grid;
  place-items: center;
  width: clamp(6rem, 9vw, 8rem);
  aspect-ratio: 1;
  padding: 1em;
  border-radius: 50%;
  background: var(--magenta);
  color: #fff;
  border: 4px dashed #fff;
  box-shadow: 0 0 0 4px var(--magenta), 6px 6px 0 rgba(26, 17, 80, 0.25);
  transform: rotate(9deg);
  font-family: var(--f-hand);
  font-size: clamp(0.7rem, 1.15vw, 0.9rem);
  line-height: 1.1;
  text-align: center;
}

/* twinkling star */
.spark--star {
  width: 30px;
  height: 30px;
  background: var(--gold);
  clip-path: polygon(50% 0, 58% 42%, 100% 50%, 58% 58%, 50% 100%, 42% 58%, 0 50%, 42% 42%);
  animation: nx-twinkle 2.6s ease-in-out infinite;
}

@keyframes nx-twinkle {
  0%, 100% { transform: scale(1) rotate(0deg); opacity: 1; }
  50% { transform: scale(0.5) rotate(30deg); opacity: 0.55; }
}

/* zigzag edge */
.zig {
  --zig: var(--cyan);
  height: 18px;
  background:
    linear-gradient(135deg, var(--zig) 25%, transparent 25%) -9px 0,
    linear-gradient(225deg, var(--zig) 25%, transparent 25%) -9px 0;
  background-size: 18px 18px;
}

.zig--magenta { --zig: var(--magenta); }
.zig--gold { --zig: var(--gold); }

.wrap > * { position: relative; z-index: 1; }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1em 2.1em;
  font-family: var(--f-mega);
  font-weight: 900;
  font-style: italic;
  font-variation-settings: "wdth" 112;
  font-size: 1.02rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  color: #fff;
  background: var(--magenta);
  border: 4px solid var(--ink);
  box-shadow: 7px 7px 0 var(--gold);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0) 52%,
                                    rgba(0, 0, 0, 0.12) 100%);
  transition: transform 0.12s, box-shadow 0.12s, background-color 0.15s;
}

.btn:hover { background-color: var(--magenta-dk); transform: translate(4px, 4px); box-shadow: 3px 3px 0 var(--gold); }
.btn:active { transform: translate(7px, 7px); box-shadow: 0 0 0 var(--gold); }
.btn--sm { padding: 0.55em 1.1em; font-size: 0.8rem; border-width: 3px; box-shadow: 4px 4px 0 var(--gold); }
.btn--sm:hover { box-shadow: 2px 2px 0 var(--gold); }
.btn--wide { width: 100%; }

/* ============================================================
   STICKY BAR
   ============================================================ */
.bar {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(8px);
  border-bottom: 3px solid var(--ink);
  transform: translateY(-105%);
  transition: transform 0.25s ease;
}

.bar.is-on { transform: none; }
.bar__in { width: min(100% - var(--gut) * 2, var(--wrap)); margin-inline: auto; display: flex; align-items: center; gap: 1rem; padding: 0.4rem 0; }
.bar__logo { height: 46px; width: auto; }
.bar .btn { margin-left: auto; }

/* ============================================================
   HERO
   ============================================================ */
.hero { position: relative; padding-block: clamp(1.8rem, 4vw, 3rem) clamp(2.6rem, 6vw, 4.5rem); overflow: hidden; }
.hero__in { position: relative; z-index: 1; }
.hero__logo { width: min(100%, 560px); margin-bottom: clamp(1rem, 2.5vw, 1.6rem); }
.hero h1 { margin-bottom: 1.1rem; max-width: 26ch; }
.hero .lede { max-width: 50ch; }
.hero__cta { margin-top: 1.8rem; }

/* the badge sits on the artwork, not in a column of its own */
.hero .burst { position: absolute; top: -0.5rem; right: 0; }

@media (max-width: 720px) {
  .hero .burst { top: auto; bottom: 0; right: 0; }
}

/* ============================================================
   CARTOONS
   ============================================================ */
.toon { width: 100%; }
.toon--tilt { transform: rotate(-2.5deg); }
.toon--tilt-r { transform: rotate(2.5deg); }

.duo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr); gap: clamp(1.5rem, 5vw, 3.5rem); align-items: center; }
@media (max-width: 820px) { .duo { grid-template-columns: 1fr; } .duo__art { max-width: 380px; margin-inline: auto; } }

/* ============================================================
   QUOTES
   ============================================================ */
.says { display: grid; gap: 0.8rem; max-width: 660px; list-style: none; padding: 0; }

.says li {
  padding: 0.7em 1.1em;
  background: var(--paper);
  border: 3px solid var(--ink);
  box-shadow: 5px 5px 0 var(--cyan);
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  font-style: italic;
}

.says li:nth-child(2) { box-shadow: 5px 5px 0 var(--magenta); }
.says li:nth-child(3) { box-shadow: 5px 5px 0 var(--gold); }

/* ============================================================
   PLAN / ACT
   ============================================================ */
.beats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 2.4vw, 1.8rem); }

.beat {
  padding: clamp(1.2rem, 2.6vw, 1.9rem);
  background: var(--paper);
  border: 4px solid var(--ink);
  box-shadow: 8px 8px 0 var(--cyan);
}

.beat--act { box-shadow: 8px 8px 0 var(--magenta); }

.beat__when { font-family: var(--f-mega); font-weight: 900; font-variation-settings: "wdth" 110; font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--magenta); }
.beat--act .beat__when { color: var(--cyan); }

.beat__what {
  display: block;
  margin: 0.1em 0 0.5em;
  font-family: var(--f-mega);
  font-weight: 900;
  font-style: italic;
  font-variation-settings: "wdth" 120;
  font-size: clamp(1.8rem, 3.6vw, 2.7rem);
  line-height: 1;
  text-transform: uppercase;
  color: var(--cyan);
  text-shadow: 0.04em 0.04em 0 var(--ink), 0.075em 0.075em 0 var(--gold);
}

.beat--act .beat__what { color: var(--magenta); }

.beat p { color: var(--grey); font-size: 1rem; }

.rule-strip {
  margin-top: clamp(1rem, 2.4vw, 1.8rem);
  padding: 1em 1.2em;
  background: var(--ink);
  color: #fff;
  border: 4px solid var(--ink);
  box-shadow: 8px 8px 0 var(--gold);
}

.rule-strip b { color: var(--gold); }

@media (max-width: 780px) { .beats { grid-template-columns: 1fr; } }

/* ============================================================
   THE SIX WEEKS
   ============================================================ */
.weeks { list-style: none; padding: 0; display: grid; gap: 0.7rem; }

.weeks li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(0.9rem, 2.2vw, 1.4rem);
  align-items: center;
  padding: clamp(0.7rem, 1.6vw, 1.1rem) clamp(0.9rem, 2vw, 1.3rem);
  background: var(--paper);
  border: 3px solid var(--ink);
  box-shadow: 5px 5px 0 var(--purple);
}

.weeks li:nth-child(2n) { box-shadow: 5px 5px 0 var(--cyan); }
.weeks li:nth-child(3n) { box-shadow: 5px 5px 0 var(--magenta); }

.weeks b {
  display: grid;
  place-items: center;
  width: 2.1em;
  height: 2.1em;
  background: var(--gold);
  border: 3px solid var(--ink);
  border-radius: 50%;
  font-family: var(--f-mega);
  font-weight: 900;
  font-variation-settings: "wdth" 112;
  font-size: clamp(1rem, 1.7vw, 1.3rem);
  color: var(--ink);
}

.weeks span { font-size: clamp(1rem, 1.7vw, 1.25rem); font-weight: 600; }

/* ============================================================
   POLAROID
   ============================================================ */
.polaroid {
  width: min(100%, 330px);
  margin: 0;
  padding: 14px 14px 16px;
  background: #fff;
  border: 1px solid #e3e0ee;
  box-shadow: 10px 10px 0 var(--cyan), 0 24px 46px rgba(26, 17, 80, 0.16);
  transform: rotate(-3deg);
}

.polaroid { position: relative; }
.polaroid img { width: 100%; }

/* two bits of tape, because of course */
.polaroid::before, .polaroid::after {
  content: "";
  position: absolute;
  top: -12px;
  width: 76px;
  height: 26px;
  background: rgba(255, 236, 150, 0.72);
  box-shadow: 0 1px 2px rgba(26, 17, 80, 0.18);
}

.polaroid::before { left: -16px; transform: rotate(-32deg); }
.polaroid::after { right: -16px; transform: rotate(32deg); }

.polaroid figcaption {
  margin-top: 14px;
  font-family: var(--f-hand);
  font-size: 1.15rem;
  line-height: 1.15;
  text-align: center;
  color: var(--ink);
}

.bio dl { margin-top: 1.3rem; display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 0.6rem 1.4rem; align-items: baseline; }
.bio dt { font-family: var(--f-mega); font-weight: 900; font-variation-settings: "wdth" 110; font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--magenta); white-space: nowrap; }
.bio dd { margin: 0; font-size: 1rem; line-height: 1.4; }
@media (max-width: 620px) { .bio dl { grid-template-columns: 1fr; gap: 0.15rem 0; } .bio dd { margin-bottom: 0.5rem; } }

/* ============================================================
   PRICE
   ============================================================ */
.price { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(1.4rem, 4vw, 3rem); align-items: center; }

.price__tag {
  display: grid;
  place-items: center;
  padding: clamp(1.4rem, 3vw, 2.2rem) clamp(1.8rem, 4vw, 3rem);
  background: var(--gold);
  border: 5px solid var(--ink);
  box-shadow: 10px 10px 0 var(--magenta);
  transform: rotate(-2deg);
}

.price__fig {
  font-family: var(--f-mega);
  font-weight: 900;
  font-style: italic;
  font-variation-settings: "wdth" 118;
  font-size: clamp(3rem, 8vw, 5rem);
  line-height: 0.9;
  color: var(--ink);
}

.price__note { margin-top: 0.4rem; font-family: var(--f-hand); font-size: 0.95rem; color: var(--ink); }

.price ul { list-style: none; padding: 0; display: grid; gap: 0.6rem; }
.price li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.8em; font-size: 1rem; }
.price li::before { content: ""; width: 1em; height: 1em; margin-top: 0.35em; background: var(--cyan); border: 2px solid var(--ink); border-radius: 50%; }

@media (max-width: 760px) { .price { grid-template-columns: 1fr; justify-items: start; } }

/* ============================================================
   FAQ
   ============================================================ */
.faq { display: grid; gap: 1.3rem; max-width: 700px; }
.faq h3 { font-family: var(--f-body); font-weight: 700; font-size: 1.1rem; line-height: 1.3; margin-bottom: 0.25rem; }
.faq p { color: var(--grey); font-size: 1rem; }

/* ============================================================
   APPLY
   ============================================================ */
.apply { background: var(--ink); color: #fff; }
.apply .h2 { color: #fff; }
.apply .lede { color: #b8b0e4; }
.apply .eyebrow { background: var(--cyan); border-color: #fff; box-shadow: 4px 4px 0 var(--magenta); }

.form {
  margin-top: clamp(1.6rem, 4vw, 2.4rem);
  padding: clamp(1.4rem, 3.5vw, 2.4rem);
  background: var(--paper);
  border: 5px solid var(--gold);
  box-shadow: 10px 10px 0 var(--magenta);
  color: var(--ink);
}

.field { margin-bottom: 1.3rem; }
.field > label, .field__legend { display: block; margin-bottom: 0.35rem; font-weight: 600; font-size: 1rem; }
.field__hint { margin-bottom: 0.45rem; font-size: 0.88rem; color: var(--grey); }

.field input[type="text"], .field input[type="email"], .field textarea {
  width: 100%;
  padding: 0.7em 0.85em;
  background: var(--paper);
  border: 3px solid var(--line);
  border-radius: 0;
  font-size: 1rem;
}

.field input:focus, .field textarea:focus { outline: none; border-color: var(--purple); }
.field textarea { resize: vertical; min-height: 6.5em; }

.radios { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.radios label { display: inline-flex; align-items: center; gap: 0.45em; padding: 0.45em 0.85em; border: 3px solid var(--line); font-size: 0.94rem; cursor: pointer; }
.radios label:has(input:checked) { border-color: var(--purple); background: #f6f1ff; font-weight: 600; }
.radios input { accent-color: var(--purple); }

.contract { padding: 1em 1.2em; background: var(--pink); border: 3px solid var(--ink); margin-bottom: 1.2rem; }
.contract p { font-weight: 600; margin-bottom: 0.4em; }
.contract ul { margin: 0; padding-left: 1.1em; font-size: 0.95rem; color: var(--grey); }

.check { display: flex; align-items: flex-start; gap: 0.6em; font-size: 1rem; cursor: pointer; }
.check input { margin-top: 0.35em; accent-color: var(--magenta); width: 1.1em; height: 1.1em; }

.err { margin-top: 0.3rem; font-size: 0.87rem; font-weight: 600; color: var(--magenta-dk); }
.hp { position: absolute; left: -9999px; }
.status { margin-top: 1rem; font-size: 0.95rem; font-weight: 600; }

.done { padding: clamp(1.6rem, 4vw, 2.6rem); background: var(--paper); border: 5px solid var(--gold); box-shadow: 10px 10px 0 var(--cyan); color: var(--ink); }
.done h3 { margin-bottom: 0.6rem; }

/* ============================================================
   FOOTER
   ============================================================ */
.foot { padding-block: 2.2rem; border-top: 3px solid var(--ink); }
.foot__in { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between; }
.foot img { height: 52px; width: auto; }
.foot p { font-size: 0.85rem; color: var(--grey); }

/* ============================================================
   MOTION
   ============================================================ */
.js .rise { opacity: 0; transform: translateY(14px); transition: opacity 0.5s ease, transform 0.5s ease; }
.js .rise.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .rise { opacity: 1; transform: none; transition: none; }
  .bar { transition: none; }
  .sunburst, .marquee__track, .spark--star { animation: none !important; }
}

/* ============================================================
   PLACEMENT FOR THE EXTRA CLIP-ART
   ============================================================ */
.hand {
  margin-top: 0.6rem;
  font-family: var(--f-hand);
  font-size: 1.05rem;
  text-align: center;
  color: var(--ink);
  transform: rotate(-2deg);
}

/* the sticker hangs off the corner of the belt */
.duo__art { position: relative; }
.duo__art .sticker { position: absolute; right: -0.5rem; bottom: -1.2rem; }

.applytoon {
  width: min(100%, 230px);
  margin: 0 auto clamp(1rem, 2.5vw, 1.6rem);
}

@media (max-width: 820px) {
  .duo__art .sticker { right: 0; bottom: -2rem; }
}

/* the price block stacks once it shares a row with the belt */
.duo .price { grid-template-columns: 1fr; justify-items: start; align-items: start; gap: clamp(1.2rem, 2.5vw, 1.8rem); }
.duo .price__tag { justify-self: start; }

/* ============================================================
   V4 COMPONENTS
   ============================================================ */

/* the offer terms, right under the hero promise */
.facts { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.6rem; list-style: none; padding: 0; }

.facts li {
  padding: 0.4em 0.85em;
  background: var(--paper);
  border: 3px solid var(--ink);
  box-shadow: 4px 4px 0 var(--cyan);
  font-family: var(--f-mega);
  font-weight: 900;
  font-variation-settings: "wdth" 110;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.facts li:nth-child(2n) { box-shadow: 4px 4px 0 var(--magenta); }
.facts li:nth-child(3n) { box-shadow: 4px 4px 0 var(--gold); }
.facts li.is-hot { background: var(--magenta); color: #fff; box-shadow: 4px 4px 0 var(--ink); }

/* numbered how-it-works cards */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2.2vw, 1.6rem); }

.step {
  position: relative;
  padding: clamp(1.2rem, 2.4vw, 1.8rem);
  background: var(--paper);
  border: 4px solid var(--ink);
  box-shadow: 8px 8px 0 var(--cyan);
}

.step:nth-child(2) { box-shadow: 8px 8px 0 var(--magenta); }
.step:nth-child(3) { box-shadow: 8px 8px 0 var(--gold); }

.step__n {
  display: grid;
  place-items: center;
  width: 2.2em;
  height: 2.2em;
  margin-bottom: 0.7rem;
  background: var(--gold);
  border: 3px solid var(--ink);
  border-radius: 50%;
  font-family: var(--f-mega);
  font-weight: 900;
  font-variation-settings: "wdth" 112;
  font-size: 1.1rem;
  color: var(--ink);
}

.step h3 {
  font-family: var(--f-mega);
  font-weight: 900;
  font-style: italic;
  font-variation-settings: "wdth" 118;
  font-size: clamp(1.3rem, 2.4vw, 1.9rem);
  text-transform: uppercase;
  color: var(--cyan);
  text-shadow: 0.04em 0.04em 0 var(--ink);
  margin-bottom: 0.2rem;
}

.step:nth-child(2) h3 { color: var(--magenta); }
.step:nth-child(3) h3 { color: var(--purple); }
.step__when { font-weight: 700; font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--grey); margin-bottom: 0.6rem; }
.step p { font-size: 0.98rem; color: var(--grey); }

@media (max-width: 860px) { .steps { grid-template-columns: 1fr; } }

/* yes / no */
.fit { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 2.4vw, 1.8rem); }
.fit__col { padding: clamp(1.2rem, 2.4vw, 1.8rem); background: var(--paper); border: 4px solid var(--ink); box-shadow: 8px 8px 0 var(--cyan); }
.fit__col--no { box-shadow: 8px 8px 0 var(--magenta); }

.fit h3 {
  font-family: var(--f-mega);
  font-weight: 900;
  font-style: italic;
  font-variation-settings: "wdth" 118;
  font-size: clamp(1.5rem, 2.8vw, 2.1rem);
  text-transform: uppercase;
  color: var(--cyan);
  text-shadow: 0.04em 0.04em 0 var(--ink);
  margin-bottom: 0.9rem;
}

.fit__col--no h3 { color: var(--magenta); }
.fit ul { list-style: none; padding: 0; display: grid; gap: 0.65rem; }
.fit li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.7em; font-size: 1rem; }
.fit li::before { content: ""; width: 0.9em; height: 0.65em; margin-top: 0.45em; background: var(--cyan); clip-path: polygon(0 0, 100% 0, 50% 100%); }
.fit__col--no li::before { background: var(--magenta); clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); height: 0.2em; margin-top: 0.6em; }
@media (max-width: 760px) { .fit { grid-template-columns: 1fr; } }

/* what you'll get good at */
.skills { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.9rem clamp(1.2rem, 3vw, 2.4rem); }
.skills li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.8em; font-size: 1rem; color: var(--grey); }
.skills li::before { content: ""; width: 1.05em; height: 1.05em; margin-top: 0.32em; background: var(--gold); border: 3px solid var(--ink); border-radius: 50%; }
.skills li:nth-child(2n)::before { background: var(--cyan); }
.skills li:nth-child(3n)::before { background: var(--magenta); }
.skills b { display: block; color: var(--ink); font-weight: 600; }
@media (max-width: 760px) { .skills { grid-template-columns: 1fr; } }

/* the six weeks, in detail */
.season { display: grid; gap: clamp(1.2rem, 2.6vw, 2rem); }

.week {
  padding: clamp(1.2rem, 2.6vw, 2rem);
  background: var(--paper);
  border: 4px solid var(--ink);
  box-shadow: 8px 8px 0 var(--purple);
}

.week:nth-child(2n) { box-shadow: 8px 8px 0 var(--cyan); }
.week:nth-child(3n) { box-shadow: 8px 8px 0 var(--magenta); }

.week__no {
  display: inline-block;
  margin-bottom: 0.5rem;
  padding: 0.3em 0.8em;
  background: var(--ink);
  color: #fff;
  font-family: var(--f-mega);
  font-weight: 900;
  font-variation-settings: "wdth" 110;
  font-size: 0.76rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.week h3 { font-size: clamp(1.25rem, 2.4vw, 1.8rem); margin-bottom: 0.7rem; }
.week p { font-size: 1rem; color: var(--grey); }
.week p + p { margin-top: 0.8em; }

.week__send {
  margin-top: 1.1rem;
  padding: 0.8em 1.1em;
  background: var(--gold);
  border: 3px solid var(--ink);
  font-size: 0.98rem;
  color: var(--ink);
}

.week__send b { font-family: var(--f-mega); font-weight: 900; font-variation-settings: "wdth" 110; text-transform: uppercase; font-size: 0.86rem; letter-spacing: 0.1em; }

/* day 43 */
.day43 { list-style: none; padding: 0; display: grid; gap: 0.8rem; max-width: 780px; }
.day43 li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.9em; align-items: start; font-size: clamp(1rem, 1.6vw, 1.15rem); }
.day43 li::before {
  content: "";
  width: 1.5em; height: 1.5em;
  background: var(--cyan);
  border: 3px solid var(--ink);
  clip-path: polygon(50% 0, 58% 42%, 100% 50%, 58% 58%, 50% 100%, 42% 58%, 0 50%, 42% 42%);
  border-radius: 0;
}
.day43 li:nth-child(2n)::before { background: var(--magenta); }
.day43 li:nth-child(3n)::before { background: var(--gold); }

/* testimonial wall */
.quotes { columns: 2; column-gap: clamp(1rem, 2.4vw, 1.6rem); }

.quotes blockquote {
  break-inside: avoid;
  margin: 0 0 clamp(1rem, 2.4vw, 1.6rem);
  padding: 1em 1.2em;
  background: var(--paper);
  border: 3px solid var(--ink);
  box-shadow: 6px 6px 0 var(--cyan);
  font-size: 1rem;
  font-style: italic;
  line-height: 1.45;
}

.quotes blockquote:nth-child(2n) { box-shadow: 6px 6px 0 var(--magenta); }
.quotes blockquote:nth-child(3n) { box-shadow: 6px 6px 0 var(--gold); }
@media (max-width: 760px) { .quotes { columns: 1; } }

/* how to apply, 1-2-3 */
.howto { list-style: none; padding: 0; display: grid; gap: 1rem; counter-reset: ht; }
.howto li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1.1em; align-items: start; }
.howto li::before {
  counter-increment: ht;
  content: counter(ht);
  display: grid;
  place-items: center;
  width: 2.4em; height: 2.4em;
  background: var(--magenta);
  color: #fff;
  border: 3px solid var(--ink);
  border-radius: 50%;
  font-family: var(--f-mega);
  font-weight: 900;
  font-variation-settings: "wdth" 112;
  font-size: 1.05rem;
}
.howto p { font-size: 1rem; }

/* mid-page call to action */
.cta-band { text-align: center; padding-block: clamp(1.6rem, 4vw, 2.6rem); }
.cta-band .btn { font-size: clamp(1rem, 1.6vw, 1.2rem); }
.cta-band p { margin-top: 0.9rem; font-family: var(--f-hand); font-size: 1.05rem; color: var(--ink); }

.closer { text-align: center; }
.closer .h2 { max-width: 22ch; margin-inline: auto; }

/* the tagline above the promise */
/* The thesis. Magenta lost the fight against the pink rays behind it, so
   this is purple on gold-then-ink — and it breaks the text column, because
   the one line the whole page rests on shouldn't sit in a tidy measure. */
.hero__tag {
  width: 94vw;
  max-width: none;
  margin: clamp(0.6rem, 2vw, 1.4rem) 0 clamp(1.4rem, 3.5vw, 2.4rem) 50%;
  translate: -50% 0;
  rotate: -1.5deg;
  font-family: var(--f-mega);
  font-weight: 900;
  font-style: italic;
  font-variation-settings: "wdth" 118;
  font-size: clamp(2.1rem, 6.4vw, 5.6rem);
  line-height: 0.92;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--purple);
  text-shadow:
    0.045em 0.045em 0 var(--gold),
    0.08em 0.08em 0 var(--ink);
}

/* skills lay out as label + explanation on one flow */
.skills b { margin-bottom: 0.1em; }
.skills b + * { display: inline; }

.cta-note { margin-top: 0.9rem; font-size: 0.92rem; color: var(--grey); }

/* ============================================================
   ROUND 2 — centred hero, plates, bots, collage quotes
   ============================================================ */

/* ---------- hero, centred and much louder ---------- */
.hero__in { text-align: center; }
.hero__logo { margin-inline: auto; width: min(100%, 720px); }

.hero h1 { max-width: 24ch; margin-inline: auto; font-size: clamp(1.9rem, 4.4vw, 3.8rem); }
.hero .lede { max-width: 46ch; margin-inline: auto; font-size: clamp(1.15rem, 1.9vw, 1.6rem); }
.hero .facts { justify-content: center; }
.hero__cta { margin-top: 2rem; }
.hero .btn { font-size: clamp(1.05rem, 1.9vw, 1.5rem); padding: 1.05em 2.4em; }
.hero .burst { top: -1rem; }

/* the two pulls that matter */
.facts li { font-size: clamp(0.82rem, 1.25vw, 1.05rem); padding: 0.5em 1.05em; }

/* ---------- a plate to sit copy on ---------- */
.plate {
  padding: clamp(1.4rem, 3.5vw, 2.6rem);
  background: var(--paper);
  border: 5px solid var(--ink);
  box-shadow: 0 0 0 7px var(--gold), 14px 14px 0 var(--cyan);
  transform: rotate(-0.5deg);
}

.plate > * { transform: rotate(0.5deg); }
.plate p { font-size: clamp(1.02rem, 1.35vw, 1.2rem); }

/* ---------- the bot army ---------- */
.botfield { position: relative; width: 100%; aspect-ratio: 1 / 0.95; }
.botfield img { position: absolute; }
.botfield .anchor { left: 22%; top: 16%; width: 56%; z-index: 2; }

.botfield .bot { width: 27%; z-index: 1; }
.botfield .bot--1 { left: 0; top: 2%; animation: nx-bob-a 7.5s ease-in-out infinite; }
.botfield .bot--2 { right: 1%; top: 0; width: 24%; animation: nx-bob-b 9s ease-in-out infinite; }
.botfield .bot--3 { left: 2%; bottom: 2%; width: 22%; animation: nx-bob-b 8s ease-in-out infinite .6s; }
.botfield .bot--4 { right: 0; bottom: 6%; width: 26%; animation: nx-bob-a 10.5s ease-in-out infinite 1.2s; }
.botfield .bot--5 { left: 34%; bottom: -4%; width: 30%; animation: nx-bob-a 8.8s ease-in-out infinite .3s; }

@keyframes nx-bob-a {
  0%, 100% { transform: translate(0, 0) rotate(-5deg); }
  50% { transform: translate(12px, -18px) rotate(4deg); }
}

@keyframes nx-bob-b {
  0%, 100% { transform: translate(0, 0) rotate(5deg); }
  50% { transform: translate(-14px, -14px) rotate(-4deg); }
}

/* ---------- clip-art that breaks the section edge ---------- */
.popout { position: relative; z-index: 3; margin-bottom: clamp(-9rem, -11vw, -5rem); }
.block--spill { overflow: visible; padding-bottom: 0; }

/* ---------- nine colour plates ---------- */
.skills {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(0.9rem, 2vw, 1.4rem);
  list-style: none;
  padding: 0;
}

.skills li {
  display: block;
  padding: clamp(1rem, 2.2vw, 1.5rem);
  background: var(--paper);
  border: 4px solid var(--ink);
  box-shadow: 8px 8px 0 var(--cyan);
  font-size: 1rem;
  color: var(--grey);
}

.skills li::before { content: none; }
.skills li:nth-child(3n+2) { box-shadow: 8px 8px 0 var(--magenta); background: #fff9e6; }
.skills li:nth-child(3n) { box-shadow: 8px 8px 0 var(--gold); background: #eefaff; }
.skills li:nth-child(3n+1) { background: #fff2f8; }
.skills li:nth-child(4n) { transform: rotate(-1.2deg); }
.skills li:nth-child(5n) { transform: rotate(1.2deg); }

.skills b {
  display: block;
  margin-bottom: 0.35em;
  font-family: var(--f-head);
  font-weight: 400;
  font-size: clamp(1.15rem, 1.9vw, 1.5rem);
  line-height: 1.08;
  color: var(--ink);
}

@media (max-width: 900px) { .skills { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .skills { grid-template-columns: 1fr; } }

/* ---------- week six gets its party ---------- */
.week--art {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 320px);
  gap: clamp(1.4rem, 3.5vw, 2.8rem);
  align-items: center;
}

.week__art { margin: 0; }
.week__art img { width: 100%; mix-blend-mode: multiply; }
.week__art p { margin-top: 0.5rem; font-family: var(--f-hand); font-size: 1rem; text-align: center; color: var(--ink); }

@media (max-width: 820px) {
  .week--art { grid-template-columns: 1fr; }
  .week__art { width: min(100%, 320px); margin-inline: auto; }
}

/* ============================================================
   TESTIMONIAL COLLAGE
   Big, angled, notched, and deliberately not a tidy column.
   ============================================================ */
.quotes {
  columns: auto;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(1.4rem, 3vw, 2.4rem);
  align-items: start;
}

.quotes blockquote {
  margin: 0;
  padding: clamp(1.2rem, 2.6vw, 2rem) clamp(1.3rem, 3vw, 2.3rem);
  background: var(--paper);
  border: 5px solid var(--cyan);
  box-shadow: 12px 12px 0 var(--ink);
  font-size: clamp(1.1rem, 1.75vw, 1.6rem);
  line-height: 1.32;
  font-style: italic;
  color: var(--ink);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 1.6rem), calc(100% - 1.6rem) 100%, 0 100%);
}

/* the shapes, hand-placed so nothing lines up */
.quotes blockquote:nth-child(1) { grid-column: 1 / span 7; transform: rotate(-1.1deg); }
.quotes blockquote:nth-child(2) { grid-column: 8 / span 5; transform: rotate(1.4deg); border-color: var(--magenta); }
.quotes blockquote:nth-child(3) { grid-column: 2 / span 5; transform: rotate(1deg); border-color: var(--gold); }
.quotes blockquote:nth-child(4) { grid-column: 7 / span 6; transform: rotate(-1.5deg); border-color: var(--purple); }
.quotes blockquote:nth-child(5) { grid-column: 1 / span 5; transform: rotate(-2deg); border-color: var(--magenta); }
.quotes blockquote:nth-child(6) { grid-column: 6 / span 7; transform: rotate(0.8deg); }
.quotes blockquote:nth-child(7) { grid-column: 3 / span 8; transform: rotate(-0.7deg); border-color: var(--gold); }
.quotes blockquote:nth-child(8) { grid-column: 1 / span 6; transform: rotate(1.6deg); border-color: var(--magenta); }
.quotes blockquote:nth-child(9) { grid-column: 7 / span 6; transform: rotate(-1.2deg); border-color: var(--purple); }
.quotes blockquote:nth-child(10) { grid-column: 2 / span 6; transform: rotate(-1.6deg); }
.quotes blockquote:nth-child(11) { grid-column: 8 / span 5; transform: rotate(1.2deg); border-color: var(--gold); }
.quotes blockquote:nth-child(12) { grid-column: 3 / span 8; transform: rotate(0.9deg); border-color: var(--magenta); }

/* the loudest ones get scale as well as angle */
.quotes blockquote.is-big { font-size: clamp(1.3rem, 2.4vw, 2.2rem); box-shadow: 16px 16px 0 var(--ink); }

@media (max-width: 820px) {
  .quotes { grid-template-columns: 1fr; }
  .quotes blockquote { grid-column: 1 / -1 !important; }
}

/* ---------- the closing call ---------- */
.finale { text-align: center; }
.finale .h2 { font-size: clamp(2.2rem, 5.5vw, 4.4rem); max-width: 20ch; margin-inline: auto; color: #fff; }
.finale .lede { max-width: 46ch; margin-inline: auto; }
.finale .btn { font-size: clamp(1.05rem, 1.9vw, 1.5rem); padding: 1.05em 2.4em; margin-top: 1.8rem; }
.finale .terms { margin-top: 1.2rem; font-family: var(--f-hand); font-size: 1.05rem; color: var(--gold); }

@media (prefers-reduced-motion: reduce) {
  .botfield .bot { animation: none !important; }
}

/* the one qualification leads the box; the bullets describe it */
.fit__big {
  font-family: var(--f-head);
  font-weight: 400;
  font-size: clamp(1.35rem, 2.4vw, 2rem);
  line-height: 1.08;
  color: var(--ink);
  margin-bottom: 1.1rem;
}

.fit__lead {
  margin-bottom: 0.7rem;
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--grey);
}

/* ============================================================
   WHICH RELATIONSHIPS
   Four you'll get good at, and one we're no use for.

   The labels are long ("COLLABORATORS") and the columns are narrow, so
   these use the condensed face, not the expanded italic — that one runs
   straight out of the card and over its neighbour.
   ============================================================ */
.rels {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(0.9rem, 2vw, 1.4rem);
  align-items: stretch;
}

.rels li {
  min-width: 0;
  padding: clamp(1rem, 2.2vw, 1.5rem);
  background: var(--paper);
  border: 4px solid var(--ink);
  box-shadow: 8px 8px 0 var(--cyan);
}

.rels li:nth-child(2) { box-shadow: 8px 8px 0 var(--magenta); transform: rotate(-1deg); }
.rels li:nth-child(3) { box-shadow: 8px 8px 0 var(--gold); transform: rotate(1deg); }
.rels li:nth-child(4) { box-shadow: 8px 8px 0 var(--purple); }

.rels b {
  display: block;
  margin-bottom: 0.5em;
  font-family: var(--f-head);
  font-weight: 400;
  font-size: clamp(1.1rem, 2.1vw, 1.75rem);
  line-height: 1;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  overflow-wrap: break-word;
  color: var(--cyan);
  text-shadow: 0.035em 0.035em 0 var(--ink);
}

.rels li:nth-child(2) b { color: var(--magenta); }
.rels li:nth-child(3) b { color: var(--gold); }
.rels li:nth-child(4) b { color: var(--purple); }
.rels span { display: block; font-size: 0.96rem; line-height: 1.4; color: var(--grey); }

/* the one we're no use for */
.rels--not { grid-template-columns: 1fr; margin-top: clamp(1.2rem, 3vw, 2rem); }

.rels--not li {
  background: #f6f4ef;
  border: 4px dashed var(--grey-2);
  box-shadow: none;
  transform: rotate(-0.5deg);
  padding: clamp(1.1rem, 2.6vw, 1.8rem) clamp(1.2rem, 3vw, 2rem);
}

.rels--not b {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6em;
  color: var(--grey-2);
  text-shadow: none;
  font-size: clamp(1.3rem, 2.6vw, 2rem);
}

.rels--not b span { text-decoration: line-through; display: inline; font: inherit; color: inherit; }

/* the badge rides inline, so it can't collide with the card above */
.rels--not b::after {
  content: "NOPE";
  padding: 0.28em 0.75em;
  background: var(--magenta);
  color: #fff;
  border: 3px solid var(--ink);
  font-family: var(--f-mega);
  font-weight: 900;
  font-variation-settings: "wdth" 112;
  font-size: 0.62em;
  letter-spacing: 0.14em;
  text-decoration: none;
  rotate: -3deg;
}

.rels--not > li > span { max-width: 64ch; }

@media (max-width: 900px) { .rels { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 540px) { .rels { grid-template-columns: 1fr; } }

/* ============================================================
   PIXEL ART
   Every sprite is drawn on a grid, so the browser must not
   smooth it when it scales — nearest-neighbour or it turns to mush.
   ============================================================ */
img[src*="/px/"] { image-rendering: pixelated; image-rendering: crisp-edges; }

/* a sprite that runs across the column */
.pxwide { margin: clamp(1.6rem, 4vw, 2.6rem) 0 0; text-align: center; }
.pxwide img { width: min(100%, 560px); margin-inline: auto; }

/* a sprite parked beside a block of content */
.pxfloat {
  float: right;
  width: min(30%, 210px);
  margin: 0 0 1rem 1.6rem;
  shape-outside: margin-box;
}

.px.pxsm { width: min(38%, 170px); margin-bottom: 0.8rem; }

@media (max-width: 720px) {
  .pxfloat { float: none; width: min(60%, 200px); margin: 0 auto 1.2rem; }
  .px.pxsm { width: min(50%, 150px); }
}

/* the bots are sprites now; keep them from smoothing as they float */
.botfield img { image-rendering: pixelated; }

/* a sprite tucked against the right edge, overlapping what follows */
.pxright {
  position: relative;
  z-index: 2;
  width: min(44%, 300px);
  margin: clamp(0.8rem, 2vw, 1.4rem) 0 clamp(-3.5rem, -5vw, -2rem) auto;
}

.pxright img { width: 100%; }

@media (max-width: 720px) {
  .pxright { width: min(70%, 260px); margin-inline: auto; margin-bottom: 1rem; }
}

/* the No box carries fewer lines than the Yes box, so the sprite fills it out */
.fit__col { display: flex; flex-direction: column; }
.fit__col ul { margin-bottom: 0; }

.fit__art {
  width: min(70%, 210px);
  margin: auto auto 0;
  padding-top: clamp(1rem, 2.5vw, 1.6rem);
  image-rendering: pixelated;
}

/* a section header with a sprite parked in the empty right-hand space */
.headrow { display: flex; align-items: flex-end; justify-content: space-between; gap: clamp(1.2rem, 4vw, 3rem); }
.headrow > div { min-width: 0; }
.headrow__art { flex: none; width: min(32%, 280px); image-rendering: pixelated; }

@media (max-width: 760px) {
  .headrow { flex-direction: column; align-items: flex-start; }
  .headrow__art { width: min(58%, 200px); align-self: center; }
}