/* =====================================================================
   02 · PAIN (modules/pain/) — "Producers check your site before they call."
   Six pains, each with a concrete "before" visual presented like an art
   director's slide: the bad example is rendered faithfully, then matted
   on a soft lit plate with a few First Light pins.

   Namespaced: #pain and .pn-*. Uses the site's :root tokens with fallbacks.
   Every final state is the CSS state; pain.js only animates *into* it.
   Inside each plate, sizes are in cqw (1cqw = 1% of the plate, or of the
   nested mock window), so every visual scales as one illustration.
   Pins and captions stay in px so they're always readable (≥ 13px).
   ===================================================================== */

#pain {
  --pn-display: var(--display, 'Big Shoulders Display', 'Big Shoulders Display Variable', Impact, sans-serif);
  --pn-sans: var(--sans, 'Archivo', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif);
  --pn-margin: var(--margin, max(clamp(20px, 8.34vw, 160px), calc((100vw - 1760px) / 2)));
  --pn-gutter: var(--gutter, clamp(14px, 1.4vw, 24px));
  --pn-bone: var(--bone, #ECE7DF);
  --pn-first: var(--first, #F3D9B1);
  --pn-plate-r: var(--r3, 24px);
  /* the generic faces the bad examples are set in (deliberately not ours) */
  --pn-generic: Inter, 'SF Pro Display', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --pn-arial: Arial, 'Helvetica Neue', Helvetica, sans-serif;
  --pn-times: 'Times New Roman', Times, Georgia, serif;
}

.pn { padding: clamp(120px, 17vh, 210px) 0 clamp(130px, 18vh, 220px); }
.pn-wrap { padding-left: var(--pn-margin); padding-right: var(--pn-margin); }
.pn-vh {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ---------- display type (Big Shoulders caps) ---------- */
.pn-h, .pn-title, .pn-num, .pn-stat__fig, .pn-missing__h, .pn-missing__list b, .pn-close {
  font-family: var(--pn-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .008em;
  font-synthesis: none;
}

/* =====================================================================
   HEAD
   ===================================================================== */
.pn-head {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--pn-gutter); row-gap: 30px;
  margin-bottom: clamp(100px, 15vh, 170px);
}
.pn-kicker { grid-column: 1 / -1; margin: 0; }
.pn-h {
  grid-column: 1 / span 7;
  font-size: clamp(48px, 6.4vw, 112px); line-height: .89;
  max-width: 8.6em; text-wrap: balance;
}
.pn-lead { grid-column: 9 / span 4; align-self: end; margin: 0; max-width: 24em; }

/* =====================================================================
   THE SIX PAINS — alternating rows
   ===================================================================== */
.pn-list { list-style: none; margin: 0; display: grid; row-gap: clamp(110px, 17vh, 190px); }
.pn-item {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--pn-gutter); align-items: center;
}
.pn-fig { grid-column: 1 / span 7; grid-row: 1; position: relative; margin: 0; isolation: isolate; }
.pn-text { grid-column: 9 / span 4; grid-row: 1; }
.pn-item:nth-child(even) .pn-fig { grid-column: 6 / span 7; }
.pn-item:nth-child(even) .pn-text { grid-column: 1 / span 4; }

.pn-num {
  margin: 0 0 18px;
  font-size: 22px; font-weight: 700; line-height: 1; letter-spacing: .06em;
  color: var(--pn-first); opacity: .9;
}
.pn-title {
  margin: 0 0 22px;
  font-size: clamp(36px, 3.5vw, 60px); line-height: .9;
  color: var(--pn-bone);
  text-wrap: balance;
}
.pn-body {
  margin: 0; max-width: 25em;
  font-size: clamp(17px, 1.3vw, 19.5px); line-height: 1.56;
  color: rgba(236, 231, 223, .78);
  text-wrap: pretty;
}

/* the stat lives with pain 3 */
.pn-stat { margin: clamp(40px, 6vh, 64px) 0 0; display: grid; gap: 14px; }
.pn-stat__fig { display: flex; align-items: baseline; gap: .16em; line-height: .8; color: var(--pn-bone); }
.pn-stat__fig b { font-weight: 800; font-size: clamp(110px, 10.6vw, 190px); letter-spacing: -.005em; }
.pn-stat__fig span { font-size: clamp(34px, 3.2vw, 58px); color: var(--pn-first); letter-spacing: .02em; }
.pn-stat__text { max-width: 21em; font-size: clamp(16px, 1.2vw, 18px); line-height: 1.5; color: rgba(236, 231, 223, .66); text-wrap: pretty; }

/* =====================================================================
   THE PLATE — a soft, lit mat that presents each bad example
   ===================================================================== */
.pn-plate {
  position: relative; z-index: 1;
  container-type: inline-size;
  aspect-ratio: 16 / 10;
  border-radius: var(--pn-plate-r);
  overflow: hidden; isolation: isolate;
  background:
    radial-gradient(120% 90% at 12% -10%, rgba(236, 231, 223, .085), rgba(236, 231, 223, 0) 58%),
    radial-gradient(90% 80% at 100% 110%, rgba(23, 34, 48, .55), rgba(23, 34, 48, 0) 70%),
    linear-gradient(180deg, #15171D, #0E1015);
  box-shadow: var(--shadow-long, 0 40px 120px -30px rgba(0, 0, 0, .65));
  user-select: none;
}
/* ambient spill: the plate lights the dark around it */
.pn-fig::before {
  content: ''; position: absolute; z-index: -1; pointer-events: none;
  left: 8%; right: 8%; top: 12%; bottom: -7%;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--pn-spill, rgba(236, 231, 223, .2)), rgba(0, 0, 0, 0));
  filter: blur(40px);
  opacity: .55;
}
.pn-fig--step  { --pn-spill: rgba(232, 160, 80, .34); }
.pn-fig--embed { --pn-spill: rgba(120, 150, 190, .26); }
.pn-fig--wall  { --pn-spill: rgba(236, 233, 226, .2); }
.pn-fig--ai    { --pn-spill: rgba(130, 92, 246, .3); }
.pn-fig--stale { --pn-spill: rgba(150, 160, 175, .16); }
.pn-fig--drift { --pn-spill: rgba(236, 231, 223, .16); }

/* a blurred duplicate of the hero image, lighting the plate from inside */
.pn-spillimg {
  position: absolute; z-index: 0; pointer-events: none;
  left: 10%; top: 14%; width: 80%; height: 76%; max-width: none;
  object-fit: cover; border-radius: 30%;
  filter: blur(42px) saturate(1.5);
  opacity: .32;
}

.pn-cap {
  position: absolute; z-index: 3;
  font-family: var(--pn-sans); font-size: 13px; font-weight: 500; line-height: 1.2; letter-spacing: .005em;
  color: rgba(236, 231, 223, .62); white-space: nowrap;
}

/* pins: an art director's notes, lit like the CTA. The outer span places, the inner animates. */
.pn-pin {
  position: absolute; z-index: 6;
  left: calc(var(--px) * 1cqw); top: calc(var(--py) * 1cqw);
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.pn-pin > span {
  display: block;
  padding: 7px 12px;
  border-radius: 999px;
  background: radial-gradient(140% 170% at 50% 0%, #FDEDD3 0%, #F3D9B1 50%, #EBCB9F 100%);
  color: #17120B;
  font-family: var(--pn-sans); font-size: 13px; font-weight: 600; line-height: 1; letter-spacing: .004em;
  white-space: nowrap;
  box-shadow: 0 0 30px -6px rgba(243, 217, 177, .55), 0 12px 26px -12px rgba(0, 0, 0, .85);
}

/* the mock windows: their own containers, so their content scales with them */
.pn-win, .pn-tw {
  position: absolute; z-index: 2;
  container-type: inline-size;
  display: block; overflow: hidden;
  box-shadow: 0 30px 70px -26px rgba(0, 0, 0, .85), 0 8px 18px -10px rgba(0, 0, 0, .5);
}
.pn-win__bar, .pn-tw__bar {
  position: absolute; left: 0; right: 0; top: 0;
  display: flex; align-items: center; gap: 1.6cqw;
  padding: 0 3cqw;
}
.pn-win__bar i, .pn-tw__bar i { flex: none; border-radius: 50%; }
.pn-win__bar > span, .pn-tw__bar > span { margin-left: 2cqw; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

/* =====================================================================
   1 · A STEP BEHIND
   ===================================================================== */
.pn-step__frame {
  position: absolute; z-index: 2;
  left: 4.5cqw; top: 17.5cqw; width: 62cqw; height: 25.9cqw;   /* 2.39:1 */
  border-radius: 1.3cqw; overflow: hidden;
  box-shadow: 0 2.4cqw 6cqw -2cqw rgba(0, 0, 0, .8);
}
.pn-step__frame img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.pn-step__cap1 { left: 4.5cqw; top: 46.3cqw; }
.pn-step__cap2 { left: 59cqw; top: 52.7cqw; }

/* the stock template (light, dated, generic) */
.pn-tw {
  box-shadow: 0 3cqw 7cqw -2cqw rgba(0, 0, 0, .9), 0 .8cqw 2cqw -.6cqw rgba(0, 0, 0, .6);
  left: 59cqw; top: 9.5cqw; width: 36cqw; aspect-ratio: 100 / 112;
  border-radius: .9cqw;
  background: #F4F3F0;
  font-family: var(--pn-arial); color: #333;
}
.pn-tw__bar { height: 7cqw; background: #DCDBD7; font-size: 2.5cqw; color: #8C8B86; }
.pn-tw__bar i { width: 2.2cqw; height: 2.2cqw; background: #B9B8B3; }
.pn-tw__head {
  position: absolute; left: 0; right: 0; top: 7cqw; height: 12cqw;
  display: flex; align-items: center; justify-content: space-between; gap: 2cqw;
  padding: 0 4.5cqw;
  background: linear-gradient(#333, #222);
}
.pn-tw__head b { font-size: 3.5cqw; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #fff; white-space: nowrap; }
.pn-tw__head span { font-size: 2.05cqw; letter-spacing: .06em; text-transform: uppercase; color: #B5B5B5; white-space: nowrap; }
.pn-tw__h, .pn-tw__sub, .pn-tw__cap, .pn-tw__foot { position: absolute; left: 0; right: 0; text-align: center; white-space: nowrap; }
.pn-tw__h { top: 22.5cqw; font-size: 5.4cqw; font-weight: 700; color: #2B2B2B; letter-spacing: -.01em; }
.pn-tw__sub { top: 29.6cqw; font-size: 2.6cqw; color: #8E8E8E; }
.pn-tw__img {
  position: absolute; left: 28cqw; top: 35cqw; width: 44cqw; height: 52cqw;   /* a portrait box: the 2.39 frame gets squeezed ~3.3× */
  border: 1.6cqw solid #fff;
  box-shadow: 0 1.4cqw 3cqw rgba(0, 0, 0, .28);
  overflow: hidden; background: #ddd;
}
.pn-tw__img img { width: 100%; height: 100%; object-fit: fill; transform-origin: 50% 50%; }   /* squeezed: the template forces its own box */
.pn-tw__cap { top: 89.6cqw; font-size: 2.9cqw; color: #666; font-style: italic; }
.pn-tw__btn {
  position: absolute; left: 50%; top: 94.6cqw; transform: translateX(-50%);
  padding: 2.1cqw 5.2cqw;
  border-radius: .9cqw;
  background: linear-gradient(#5597E6, #2D64B7);
  box-shadow: inset 0 -.6cqw 0 #1F4C8E, 0 .6cqw 1.4cqw rgba(0, 0, 0, .25);
  font-size: 2.6cqw; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #fff;
  text-shadow: 0 -.2cqw 0 rgba(0, 0, 0, .3); white-space: nowrap;
}
.pn-tw__foot { top: 103cqw; height: 9cqw; padding-top: 3cqw; background: #E9E8E4; font-size: 2.2cqw; color: #9A9A96; }

.pn-pin--squeeze { --px: 77; --py: 39.2; }
.pn-pin--stock   { --px: 89.5; --py: 10.2; }

/* =====================================================================
   2 · THE EMBED (Agent C's frame, presented as the problem)
   ===================================================================== */
.pn-embed__shot {
  position: absolute; z-index: 2;
  left: 7cqw; top: 4.375cqw; width: 86cqw; height: 53.75cqw;
  border-radius: 1.2cqw; overflow: hidden;
  box-shadow: 0 2.6cqw 6.4cqw -2.2cqw rgba(0, 0, 0, .85);
}
.pn-embed__shot img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.9) brightness(.93); }
.pn-plate--embed .pn-spillimg { filter: blur(46px) saturate(1.2); opacity: .22; }
.pn-pin--bar  { --px: 44; --py: 15.1; }
.pn-pin--soft { --px: 70; --py: 27; }
.pn-pin--wall { --px: 33.5; --py: 39.6; }

/* =====================================================================
   3 · TEMPLATES — a receding wall of sameness
   ===================================================================== */
.pn-plate--wall {
  background:
    radial-gradient(90% 80% at 50% 40%, rgba(236, 231, 223, .07), rgba(236, 231, 223, 0) 70%),
    linear-gradient(180deg, #14161B, #0D0F13);
}
.pn-wallview {
  position: absolute; inset: 0; z-index: 1;
  perspective: 150cqw; perspective-origin: 40% 35%;
  -webkit-mask-image:
    linear-gradient(to bottom, rgba(0, 0, 0, 0) 2%, #000 24%, #000 74%, rgba(0, 0, 0, 0) 98%),
    linear-gradient(to right, rgba(0, 0, 0, 0) 1%, #000 18%, #000 80%, rgba(0, 0, 0, 0) 99%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to bottom, rgba(0, 0, 0, 0) 2%, #000 24%, #000 74%, rgba(0, 0, 0, 0) 98%),
    linear-gradient(to right, rgba(0, 0, 0, 0) 1%, #000 18%, #000 80%, rgba(0, 0, 0, 0) 99%);
  mask-composite: intersect;
}
.pn-wall {
  position: absolute; left: -12cqw; top: -9cqw;
  width: 124cqw;
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1.7cqw;
  transform: translateX(calc(var(--pan, 0) * 1cqw)) rotateX(14deg) rotateY(-17deg) rotateZ(3.5deg);
  transform-origin: 40% 40%;
  transform-style: flat;
}
.pn-tpl {
  position: relative; display: block;
  container-type: inline-size;
  aspect-ratio: 16 / 10;
  border-radius: .5cqw;   /* plate units: a container's own cqw resolve against its ancestor */
  overflow: hidden;
  background:
    /* header: name + three nav links */
    linear-gradient(#2B2B2B, #2B2B2B) 7% 6.5% / 22% 4% no-repeat,
    linear-gradient(#A3A29E, #A3A29E) 70% 7% / 8% 3% no-repeat,
    linear-gradient(#A3A29E, #A3A29E) 81% 7% / 8% 3% no-repeat,
    linear-gradient(#A3A29E, #A3A29E) 92% 7% / 8% 3% no-repeat,
    /* two lines of body text under the thumbnails */
    linear-gradient(#CFCDC8, #CFCDC8) 7% 93% / 44% 2.6% no-repeat,
    linear-gradient(#DDDBD6, #DDDBD6) 7% 98.5% / 30% 2.6% no-repeat,
    #F6F5F2;
  box-shadow: 0 .9cqw 2.2cqw -.8cqw rgba(0, 0, 0, .7);
  font-style: normal;
}
/* the hero photo */
.pn-tpl::before {
  content: ''; position: absolute; left: 0; right: 0; top: 16%; height: 46%;
  background: #8C8C88 center / cover no-repeat;
  filter: saturate(.7) contrast(.95);
}
/* three thumbnails */
.pn-tpl::after {
  content: ''; position: absolute; left: 7%; right: 7%; top: 66.5%; height: 19%;
  background:
    linear-gradient(#C9C7C1, #C9C7C1) 0 0 / 30.6% 100% no-repeat,
    linear-gradient(#BEBCB6, #BEBCB6) 50% 0 / 30.6% 100% no-repeat,
    linear-gradient(#C9C7C1, #C9C7C1) 100% 0 / 30.6% 100% no-repeat;
}
.pn-tpl b {
  position: absolute; z-index: 1; left: 0; right: 0; top: 16%; height: 46%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--pn-arial); font-size: 7.6cqw; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: #fff; text-shadow: 0 .5cqw 1.6cqw rgba(0, 0, 0, .4);
  white-space: nowrap;
}
.pn-tpl:nth-child(5n+1)::before { background-image: url('media/ridge.webp'); }
.pn-tpl:nth-child(5n+2)::before { background-image: url('media/road.webp'); }
.pn-tpl:nth-child(5n+3)::before { background-image: url('media/blue-hour.webp'); }
.pn-tpl:nth-child(5n+4)::before { background-image: url('media/redrock.webp'); }
.pn-tpl:nth-child(5n+5)::before { background-image: url('media/sky.webp'); }
.pn-tpl:nth-child(3n+2)::after {
  background:
    linear-gradient(#BEBCB6, #BEBCB6) 0 0 / 30.6% 100% no-repeat,
    linear-gradient(#C9C7C1, #C9C7C1) 50% 0 / 30.6% 100% no-repeat,
    linear-gradient(#B3B1AB, #B3B1AB) 100% 0 / 30.6% 100% no-repeat;
}
.pn-tpl--yours {
  overflow: visible;
  box-shadow: 0 0 0 .32cqw rgba(243, 217, 177, .95), 0 0 3.4cqw .6cqw rgba(243, 217, 177, .45), 0 .9cqw 2.2cqw -.8cqw rgba(0, 0, 0, .7);
}
.pn-tpl--yours::before { border-radius: 0; }
.pn-pin--yours { --px: 50; --py: 50; }
.pn-pin--yours > span { font-size: 13px; }

/* =====================================================================
   4 · AI — four tropes, side by side, specimen-style
   ===================================================================== */
.pn-plate--ai {
  display: flex; align-items: center; column-gap: 2.7%;   /* % here: a container's own cqw resolve against its ancestor, not itself */
  padding: 0 6%;
  background:
    radial-gradient(70% 60% at 50% 30%, rgba(124, 92, 255, .1), rgba(124, 92, 255, 0) 70%),
    linear-gradient(180deg, #14151C, #0D0E13);
}
.pn-ai { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 1.7cqw; }
.pn-ai__card {
  position: relative; display: block;
  container-type: inline-size;   /* cqw = the card's content box, so the card itself never takes cqw padding */
  aspect-ratio: 100 / 200;
  border-radius: 1.4cqw; overflow: hidden;
  background: #06060A;
  font-family: var(--pn-generic); color: #fff; text-align: center;
  box-shadow: 0 2.4cqw 5cqw -2cqw rgba(0, 0, 0, .85);
}
.pn-ai__in {
  position: absolute; inset: 0; z-index: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.pn-ai__lbl {
  font-family: var(--pn-sans); font-size: 13px; font-weight: 500; line-height: 1.25;
  color: rgba(236, 231, 223, .62);
}

/* a · the blob */
.pn-ai--blob .pn-ai__in { justify-content: flex-end; padding-bottom: 16cqw; }
.pn-ai__b1, .pn-ai__b2, .pn-ai__b3 { position: absolute; border-radius: 50%; filter: blur(9cqw); }
.pn-ai__b1 { left: -12cqw; top: 26cqw; width: 100cqw; height: 100cqw; background: radial-gradient(circle, #7C5CFF 0%, rgba(124, 92, 255, .65) 40%, rgba(124, 92, 255, 0) 70%); }
.pn-ai__b2 { left: 28cqw; top: 66cqw; width: 86cqw; height: 86cqw; background: radial-gradient(circle, #FF4FA3 0%, rgba(255, 79, 163, .55) 42%, rgba(255, 79, 163, 0) 70%); }
.pn-ai__b3 { left: 4cqw; top: 104cqw; width: 80cqw; height: 80cqw; background: radial-gradient(circle, #36C5FF 0%, rgba(54, 197, 255, .5) 40%, rgba(54, 197, 255, 0) 70%); }
.pn-ai__tiny { position: relative; z-index: 1; padding: 0 8cqw; font-size: 7cqw; font-weight: 500; letter-spacing: -.01em; color: rgba(255, 255, 255, .86); }

/* b · the glowing button */
.pn-ai--btn .pn-ai__in { gap: 7cqw; }
.pn-ai--btn .pn-ai__card {
  background:
    radial-gradient(90% 40% at 50% 0%, rgba(99, 102, 241, .3), rgba(99, 102, 241, 0) 75%),
    #07070B;
}
.pn-ai__glowbtn {
  display: inline-flex; align-items: center; gap: 3cqw;
  padding: 5.6cqw 9cqw;
  border-radius: 99cqw;
  background: linear-gradient(135deg, #9B6BFF, #5B5CF0);
  font-size: 7.4cqw; font-weight: 600; letter-spacing: -.01em;
  box-shadow:
    0 0 0 .7cqw rgba(255, 255, 255, .16) inset,
    0 0 5cqw rgba(167, 139, 250, .95),
    0 0 18cqw 2cqw rgba(139, 92, 246, .7);
  white-space: nowrap;
}
.pn-ai__glowbtn i { font-style: normal; }
.pn-ai__ghost {
  padding: 4.6cqw 8cqw;
  border-radius: 99cqw;
  box-shadow: inset 0 0 0 .6cqw rgba(255, 255, 255, .2);
  font-size: 6.4cqw; color: rgba(255, 255, 255, .72); white-space: nowrap;
}

/* c · the headline */
.pn-ai--head .pn-ai__in { gap: 6cqw; padding: 0 9cqw; }
.pn-ai--head .pn-ai__card {
  background:
    radial-gradient(100% 50% at 50% 100%, rgba(124, 92, 255, .22), rgba(124, 92, 255, 0) 70%),
    #08080C;
}
.pn-ai__chip {
  padding: 2.4cqw 5cqw; border-radius: 99cqw;
  background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 .5cqw rgba(255, 255, 255, .14);
  font-size: 5.4cqw; color: rgba(255, 255, 255, .8);
}
.pn-ai__h {
  font-size: 15cqw; font-weight: 650; line-height: 1.02; letter-spacing: -.035em;
  background: linear-gradient(180deg, #FFFFFF 30%, #B4A4FF);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.pn-ai__sub { font-size: 5.8cqw; line-height: 1.35; color: rgba(255, 255, 255, .55); }

/* d · the sparkles */
.pn-ai--spark .pn-ai__in { justify-content: flex-end; padding-bottom: 20cqw; }
.pn-ai--spark .pn-ai__card {
  background:
    radial-gradient(70% 40% at 50% 40%, rgba(139, 92, 246, .2), rgba(139, 92, 246, 0) 75%),
    #07070B;
}
.pn-ai__star { position: absolute; fill: #fff; filter: drop-shadow(0 0 3cqw rgba(196, 181, 253, .95)) drop-shadow(0 0 9cqw rgba(139, 92, 246, .8)); }
.pn-ai__star--1 { left: 18cqw; top: 40cqw; width: 40cqw; height: 40cqw; }
.pn-ai__star--2 { left: 62cqw; top: 70cqw; width: 20cqw; height: 20cqw; fill: #D9CCFF; }
.pn-ai__star--3 { left: 30cqw; top: 98cqw; width: 13cqw; height: 13cqw; fill: #C4B5FD; }
.pn-ai__badge {
  display: inline-flex; align-items: center; gap: 2.4cqw;
  padding: 3.2cqw 6cqw; border-radius: 99cqw;
  background: rgba(139, 92, 246, .16);
  box-shadow: inset 0 0 0 .6cqw rgba(167, 139, 250, .55), 0 0 8cqw rgba(139, 92, 246, .35);
  font-size: 6.2cqw; font-weight: 600; color: #E4DCFF; white-space: nowrap;
}
.pn-ai__badge svg { width: 6cqw; height: 6cqw; fill: #E4DCFF; }

/* =====================================================================
   5 · KEEPING IT ALIVE — the stale site
   ===================================================================== */
.pn-win { border-radius: 1.4cqw; background: #0C0D10; font-family: var(--pn-sans); color: #EDE9E2; }
.pn-win__bar { background: #1A1C21; }
.pn-win__bar i { background: #3A3D44; }

.pn-stale__win { left: 6cqw; top: 4.5cqw; width: 88cqw; aspect-ratio: 100 / 61.4; }
.pn-stale__win .pn-win__bar { height: 4.5cqw; gap: .9cqw; padding: 0 1.8cqw; font-size: 1.15cqw; color: rgba(237, 233, 226, .5); }
.pn-stale__win .pn-win__bar i { width: 1.1cqw; height: 1.1cqw; }
.pn-stale__win .pn-win__bar > span { margin-left: 1.6cqw; padding: .55cqw 1.8cqw; border-radius: 99cqw; background: rgba(255, 255, 255, .06); }
.pn-st { position: absolute; left: 0; right: 0; top: 4.5cqw; bottom: 0; filter: saturate(.62) contrast(.94) brightness(.9); }
.pn-st__nav { position: absolute; left: 3.5cqw; right: 3.5cqw; top: 2.1cqw; display: flex; align-items: center; gap: 2.4cqw; font-size: 1.1cqw; color: rgba(237, 233, 226, .62); }
.pn-st__nav b { margin-right: auto; font-size: 1.15cqw; font-weight: 600; letter-spacing: .34em; text-transform: uppercase; color: #EDE9E2; }
.pn-st__hero { position: absolute; left: 3.5cqw; top: 6.4cqw; width: 93cqw; height: 26.5cqw; border-radius: .7cqw; overflow: hidden; }
.pn-st__hero img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; filter: brightness(.78); }
.pn-st__hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(8, 8, 10, .72), rgba(8, 8, 10, 0) 60%); }
.pn-st__ttl { position: absolute; left: 6cqw; top: 20.2cqw; display: flex; flex-direction: column; gap: .5cqw; }
.pn-st__ttl i { font-style: normal; font-size: 1.05cqw; letter-spacing: .02em; color: rgba(237, 233, 226, .62); }
.pn-st__ttl b { font-size: 3.6cqw; font-weight: 300; line-height: 1; letter-spacing: -.02em; }
.pn-st__ttl em { font-style: normal; font-size: 1.1cqw; color: rgba(237, 233, 226, .62); }
.pn-st__tile { position: absolute; top: 35.6cqw; width: 30cqw; height: 16.9cqw; border-radius: .6cqw; overflow: hidden; background: #17181C; }
.pn-st__tile--1 { left: 3.5cqw; }
.pn-st__tile--2 { left: 35cqw; }
.pn-st__tile--3 { left: 66.5cqw; }
.pn-st__tile img { width: 100%; height: 100%; object-fit: cover; }
.pn-st__tile::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(8, 8, 10, .6), rgba(8, 8, 10, 0) 45%); }
.pn-st__tile > b { position: absolute; z-index: 1; left: 1.2cqw; bottom: 1cqw; font-size: 1.2cqw; font-weight: 500; }
.pn-st__tile--2::after { display: none; }
.pn-st__err { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .7cqw; text-align: center; }
.pn-st__erricon {
  position: relative; width: 3.4cqw; height: 3.4cqw; margin-bottom: .4cqw; border-radius: 50%;
  box-shadow: inset 0 0 0 .32cqw rgba(237, 233, 226, .45);
}
.pn-st__erricon::after { content: ''; position: absolute; left: 50%; top: 12%; width: .32cqw; height: 76%; margin-left: -.16cqw; background: rgba(237, 233, 226, .45); transform: rotate(45deg); }
.pn-st__err b { font-size: 1.45cqw; font-weight: 500; color: rgba(237, 233, 226, .82); }
.pn-st__err span { font-size: 1.1cqw; color: rgba(237, 233, 226, .45); }
.pn-st__foot { position: absolute; left: 3.5cqw; top: 54.8cqw; font-size: 1.05cqw; color: rgba(237, 233, 226, .4); }

.pn-pin--updated  { --px: 80; --py: 6.6; }
.pn-pin--lastyear { --px: 46; --py: 26.6; }
.pn-pin--broken   { --px: 50; --py: 40.2; }

/* =====================================================================
   6 · LAUNCH DAY vs THREE MONTHS LATER
   ===================================================================== */
.pn-tag {
  position: absolute; z-index: 4;
  padding: 7px 13px; border-radius: 999px;
  background: rgba(236, 231, 223, .09);
  font-family: var(--pn-sans); font-size: 13px; font-weight: 500; line-height: 1; color: rgba(236, 231, 223, .82);
  white-space: nowrap;
}
.pn-tag__short { display: none; }
.pn-tag--a { left: 6cqw; top: 5.4cqw; }
.pn-tag--b { left: 53cqw; top: 5.4cqw; }

.pn-drift__win { top: 12cqw; width: 41cqw; aspect-ratio: 100 / 106.5; border-radius: 1.6cqw; }
.pn-drift__win--a { left: 6cqw; }
.pn-drift__win--b { left: 53cqw; }
.pn-drift__win .pn-win__bar { height: 6.5cqw; gap: 1.6cqw; padding: 0 3.4cqw; font-size: 2.2cqw; color: rgba(237, 233, 226, .5); }
.pn-drift__win .pn-win__bar i { width: 1.9cqw; height: 1.9cqw; }
.pn-drift__win .pn-win__bar > span { margin-left: 2.6cqw; padding: .8cqw 3cqw; border-radius: 99cqw; background: rgba(255, 255, 255, .06); }

.pn-ds { position: absolute; left: 0; right: 0; top: 6.5cqw; bottom: 0; }
.pn-ds__nav { position: absolute; left: 5cqw; right: 5cqw; top: 3.2cqw; display: flex; align-items: center; gap: 4cqw; font-size: 2.1cqw; color: rgba(237, 233, 226, .62); }
.pn-ds__nav b { margin-right: auto; font-size: 2.3cqw; font-weight: 600; letter-spacing: .34em; text-transform: uppercase; color: #EDE9E2; }
.pn-ds__hero { position: absolute; left: 5cqw; top: 9.5cqw; width: 90cqw; height: 36cqw; border-radius: 1.2cqw; overflow: hidden; }
.pn-ds__hero img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; }
.pn-ds__hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(8, 8, 10, .7), rgba(8, 8, 10, 0) 55%); }
.pn-ds__ttl { position: absolute; z-index: 2; left: 9cqw; top: 31cqw; display: flex; flex-direction: column; gap: 1.2cqw; }
.pn-ds__ttl b { font-size: 6.6cqw; font-weight: 300; line-height: 1; letter-spacing: -.025em; white-space: nowrap; }
.pn-ds__ttl i { font-style: normal; font-size: 2.1cqw; color: rgba(237, 233, 226, .62); }
.pn-ds__hd { position: absolute; left: 5cqw; top: 50.5cqw; font-size: 2.6cqw; font-weight: 500; letter-spacing: -.005em; white-space: nowrap; }
.pn-ds__t {
  position: absolute; width: 28.67cqw; height: 16.13cqw;
  border-radius: .9cqw; overflow: hidden; background: #17181C;
  transform-origin: 50% 0;
}
.pn-ds__t img { width: 100%; height: 100%; object-fit: cover; }
.pn-ds__t::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(8, 8, 10, .62), rgba(8, 8, 10, 0) 50%); }
.pn-ds__t > b { position: absolute; z-index: 1; left: 2cqw; bottom: 1.6cqw; font-size: 2cqw; font-weight: 500; white-space: nowrap; }
.pn-ds__t--1, .pn-ds__t--4 { left: 5cqw; }
.pn-ds__t--2, .pn-ds__t--5 { left: 35.67cqw; }
.pn-ds__t--3, .pn-ds__t--6 { left: 66.33cqw; }
.pn-ds__t--1, .pn-ds__t--2, .pn-ds__t--3 { top: 55.5cqw; }
.pn-ds__t--4, .pn-ds__t--5, .pn-ds__t--6 { top: 75.1cqw; }

/* three months later: what small edits did */
.pn-ovf { overflow: visible; }
.pn-ovf__more { display: inline-block; }
.pn-ds__hd--was { opacity: 0; }
.pn-ds__hd--bad {
  top: 49.4cqw;
  font-family: var(--pn-times); font-size: 4.4cqw; font-weight: 700; font-style: italic; letter-spacing: 0;
  color: #F2EEE6;
}
.pn-ds__t--stretch { height: 26cqw; }
.pn-ds__t--stretch img { object-fit: fill; }
.pn-mv { transform: translate(calc(var(--dx, 0) * 1cqw), calc(var(--dy, 0) * 1cqw)); }
.pn-ds--broken .pn-ds__t--4 { --dx: 0; --dy: 10.6; }
.pn-ds--broken .pn-ds__t--5 { --dx: 4.6; --dy: 13.2; }
.pn-ds--broken .pn-ds__t--6 { --dx: 0; --dy: 0; }

.pn-pin--ovf     { --px: 84.5; --py: 23.4; }
.pn-pin--font    { --px: 74.5; --py: 35.6; }
.pn-pin--stretch { --px: 73.5; --py: 48.4; }
.pn-pin--grid    { --px: 60.4; --py: 53.4; }

/* =====================================================================
   WHAT'S MISSING
   ===================================================================== */
.pn-missing {
  margin-top: clamp(150px, 22vh, 250px);
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--pn-gutter); row-gap: 48px;
  align-items: start;
}
.pn-missing__h {
  grid-column: 1 / span 4;
  margin: 0;
  font-size: clamp(44px, 4.8vw, 84px); line-height: .9;
  color: var(--pn-first);
}
.pn-missing__list {
  grid-column: 5 / span 8;
  list-style: none; margin: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(32px, 4vw, 72px); row-gap: clamp(40px, 6vh, 64px);
}
.pn-missing__list li { display: grid; gap: 12px; align-content: start; }
.pn-missing__list b { display: block; font-size: clamp(28px, 2.5vw, 42px); line-height: .92; color: var(--pn-bone); text-wrap: balance; }
.pn-missing__list span { max-width: 22em; font-size: clamp(16px, 1.2vw, 18px); line-height: 1.5; color: rgba(236, 231, 223, .66); text-wrap: pretty; }

/* =====================================================================
   THE CLOSE — set huge
   ===================================================================== */
.pn-closew { margin-top: clamp(150px, 22vh, 260px); }
.pn-close {
  margin: 0; max-width: 14em;
  font-size: clamp(54px, 7.4vw, 136px); line-height: .88;
  color: var(--pn-bone);
  text-wrap: balance;
}
.pn-close em { font-style: normal; color: var(--pn-first); }
.pn-close__b { display: block; color: rgba(236, 231, 223, .52); }

/* =====================================================================
   MOTION HOOKS (pain.js sets .pn-live while motion is on)
   ===================================================================== */
.pn-live .pn-ai__b1 { animation: pn-drift-a 9s ease-in-out infinite alternate; }
.pn-live .pn-ai__b2 { animation: pn-drift-b 11s ease-in-out infinite alternate; }
.pn-live .pn-ai__b3 { animation: pn-drift-c 13s ease-in-out infinite alternate; }
@keyframes pn-drift-a { to { transform: translate(14cqw, 10cqw) scale(1.12); } }
@keyframes pn-drift-b { to { transform: translate(-16cqw, -8cqw) scale(.9); } }
@keyframes pn-drift-c { to { transform: translate(10cqw, -14cqw) scale(1.1); } }

/* =====================================================================
   TABLET (≤ 1199px): the text column widens
   ===================================================================== */
@media (max-width: 1199px) {
  .pn-fig { grid-column: 1 / span 7; }
  .pn-text { grid-column: 8 / span 5; }
  .pn-item:nth-child(even) .pn-fig { grid-column: 6 / span 7; }
  .pn-item:nth-child(even) .pn-text { grid-column: 1 / span 5; }
  .pn-lead { grid-column: 8 / span 5; }
  .pn-missing__h { grid-column: 1 / -1; }
  .pn-missing__list { grid-column: 1 / -1; }
}

/* =====================================================================
   ONE COLUMN (≤ 899px): visual, then the words
   ===================================================================== */
@media (max-width: 899px) {
  .pn-head { display: block; margin-bottom: 84px; }
  .pn-kicker { margin-bottom: 22px; }
  .pn-h { max-width: 7.6em; }
  .pn-lead { margin-top: 26px; }
  .pn-list { row-gap: 96px; }
  .pn-item { display: flex; flex-direction: column; align-items: stretch; gap: 30px; }
  .pn-text { order: -1; } /* headline first, then its example, so each pain reads as one unit on a phone */
  .pn-fig { width: 100%; }
  .pn-text { max-width: 34em; }
  .pn-num { margin-bottom: 14px; }
  .pn-title { font-size: clamp(38px, 8.6vw, 60px); margin-bottom: 16px; }
  .pn-missing { display: block; margin-top: 130px; }
  .pn-missing__h { margin-bottom: 40px; }
  .pn-closew { margin-top: 130px; }
}

/* =====================================================================
   PHONE (≤ 599px): each plate is re-composed for a narrow frame
   ===================================================================== */
@media (max-width: 599px) {
  #pain { --pn-plate-r: 18px; }
  .pn { padding-top: 110px; padding-bottom: 120px; }
  .pn-h { font-size: clamp(50px, 14.4vw, 72px); }
  .pn-list { row-gap: 88px; }
  .pn-item { gap: 26px; }
  .pn-fig { margin: 0 -4px; width: calc(100% + 8px); }
  .pn-pin > span { padding: 6px 10px; font-size: 13px; }
  .pn-stat__fig b { font-size: 112px; }
  .pn-stat__fig span { font-size: 36px; }
  .pn-missing__list { grid-template-columns: minmax(0, 1fr); row-gap: 34px; }
  .pn-missing__list b { font-size: 32px; }
  .pn-close { font-size: clamp(46px, 12.6vw, 64px); line-height: .9; }

  /* 1 · frame on top, the template below it */
  .pn-plate--step { aspect-ratio: 100 / 120; }
  .pn-step__frame { left: 5cqw; top: 5cqw; width: 90cqw; height: 37.7cqw; border-radius: 2.4cqw; }
  .pn-step__cap1 { left: 5cqw; top: 46cqw; }
  .pn-tw { left: 40cqw; top: 51cqw; width: 55cqw; border-radius: 1.8cqw; }
  .pn-step__cap2 { left: 5cqw; top: auto; bottom: 6cqw; width: 25cqw; white-space: normal; }
  .pn-pin--squeeze { --px: 67.5; --py: 95.6; }
  .pn-pin--stock { --px: 80; --py: 52; }

  /* 2 · the embed fills the plate */
  .pn-embed__shot { left: 3.5cqw; top: 2.2cqw; width: 93cqw; height: 58.1cqw; border-radius: 2cqw; }
  .pn-pin--bar  { --px: 47; --py: 13.6; }
  .pn-pin--soft { display: none; }
  .pn-pin--wall { --px: 34; --py: 40.4; }

  /* 3 · a taller wall */
  .pn-plate--wall { aspect-ratio: 100 / 100; }
  .pn-wall { left: -38cqw; top: -4cqw; width: 172cqw; gap: 2.6cqw; }
  .pn-wallview { perspective: 220cqw; }

  /* 4 · the four tropes, two by two */
  .pn-plate--ai {
    aspect-ratio: auto;
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 4.5%; padding: 6% 5% 7%;
  }
  .pn-ai { gap: 2.6cqw; }
  .pn-ai__card { aspect-ratio: 100 / 112; border-radius: 3cqw; }
  .pn-ai--blob .pn-ai__card { padding-bottom: 10cqw; }
  .pn-ai__b1 { top: -6cqw; }
  .pn-ai__b2 { top: 30cqw; }
  .pn-ai__b3 { top: 56cqw; }
  .pn-ai--btn .pn-ai__card { gap: 6cqw; }
  .pn-ai__glowbtn { padding: 5cqw 8cqw; }
  .pn-ai--head .pn-ai__card { gap: 4cqw; padding: 0 7cqw; }
  .pn-ai__h { font-size: 13cqw; }
  .pn-ai__sub { display: none; }
  .pn-ai--spark .pn-ai__card { padding-bottom: 10cqw; }
  .pn-ai__star--1 { left: 20cqw; top: 8cqw; width: 34cqw; height: 34cqw; }
  .pn-ai__star--2 { left: 64cqw; top: 34cqw; width: 16cqw; height: 16cqw; }
  .pn-ai__star--3 { left: 14cqw; top: 50cqw; width: 11cqw; height: 11cqw; }
  .pn-ai__in {
  position: absolute; inset: 0; z-index: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.pn-ai__lbl { font-size: 13px; }

  /* 5 · the stale site, bigger in its mat */
  .pn-stale__win { left: 3cqw; top: 3cqw; width: 94cqw; }
  .pn-pin--updated  { --px: 72; --py: 5.2; }
  .pn-pin--lastyear { --px: 50; --py: 29; }
  .pn-pin--broken   { --px: 50; --py: 43.5; }
  .pn-pin__more { display: none; }

  /* 6 · the two sites as stacked cards: launch day behind, three months later in front */
  .pn-plate--drift { aspect-ratio: 100 / 123; }
  .pn-drift__win { width: 60cqw; }
  .pn-drift__win--a { left: 4cqw; top: 11cqw; }
  .pn-drift__win--b { left: 36cqw; top: 55cqw; box-shadow: 0 40px 70px -24px rgba(0, 0, 0, .9), 0 10px 24px -12px rgba(0, 0, 0, .6); }
  .pn-tag--a { left: 4cqw; top: 3.6cqw; }
  .pn-tag--b { left: 4cqw; top: 86cqw; }   /* in the free corner, beside its window */
  .pn-tag__long { display: none; }
  .pn-tag__short { display: inline; }
  .pn-pin--ovf     { --px: 77; --py: 73.5; }
  .pn-pin--font    { --px: 69; --py: 89.6; }
  .pn-pin--stretch { --px: 66; --py: 107.4; }
  .pn-pin--grid    { display: none; }
}

/* =====================================================================
   5 · THE SECOND LOOK — a texted link with no picture, and a Google result
   written from menu words. (Replaced "Keeping it alive", 2026-10-13; that
   copy now lives in 06.) Illustration only: a fictional director.
   ===================================================================== */
.pn-fig--link { --pn-spill: rgba(150, 175, 205, .2); }
.pn-msg {
  position: absolute; z-index: 2;
  left: 6cqw; top: 9cqw; width: 42cqw; height: 42cqw;
  display: block; overflow: hidden;
  border-radius: 2.2cqw; background: #0C0D10;
  font-family: var(--pn-sans); color: #EDE9E2;
  box-shadow: 0 30px 70px -26px rgba(0, 0, 0, .85), 0 8px 18px -10px rgba(0, 0, 0, .5);
}
.pn-msg__bar {
  position: absolute; left: 0; right: 0; top: 0; height: 6cqw;
  display: flex; align-items: center; justify-content: center;
  background: #16181D; font-size: 1.5cqw; font-weight: 600; color: rgba(237, 233, 226, .8);
}
.pn-msg__in, .pn-msg__out {
  position: absolute; max-width: 30cqw;
  padding: 1.3cqw 2cqw; border-radius: 2.4cqw;
  font-size: 1.55cqw; line-height: 1.3;
}
.pn-msg__in { left: 3cqw; top: 9.5cqw; background: #2A2C32; }
.pn-msg__link {
  position: absolute; left: 3cqw; top: 16cqw; width: 27cqw;
  display: flex; flex-direction: column; gap: .6cqw;
  padding: 2cqw 2.2cqw; border-radius: 2.4cqw; background: #2A2C32;
}
.pn-msg__link b { font-size: 1.5cqw; font-weight: 600; letter-spacing: .06em; }
.pn-msg__link span { font-size: 1.25cqw; color: rgba(237, 233, 226, .55); }
.pn-msg__out { right: 3cqw; top: 27cqw; background: #2F6FEB; color: #FFFFFF; }

.pn-serp {
  position: absolute; z-index: 2;
  left: 52cqw; top: 16.5cqw; width: 42cqw;
  display: flex; flex-direction: column; gap: 1cqw;
  padding: 2.6cqw 2.8cqw 3cqw; border-radius: 1.8cqw;
  background: #ECE9E3; color: #202124;
  font-family: Arial, Helvetica, sans-serif;
  box-shadow: 0 30px 70px -26px rgba(0, 0, 0, .85), 0 8px 18px -10px rgba(0, 0, 0, .5);
  filter: saturate(.8);
}
.pn-serp__site { display: flex; align-items: center; gap: 1.2cqw; }
.pn-serp__site > span { display: flex; flex-direction: column; gap: .2cqw; }
.pn-serp__site b { font-size: 1.3cqw; font-weight: 400; color: #202124; }
.pn-serp__site > span > span { font-size: 1.1cqw; color: #4D5156; }
.pn-serp__icon { position: relative; flex: none; width: 2.8cqw; height: 2.8cqw; border-radius: 50%; background: #DAD7D1; }
.pn-serp__icon::after {
  content: ''; position: absolute; left: 31%; top: 31%; width: 38%; height: 38%;
  background: #2B2B2B; border-radius: .15cqw; transform: rotate(45deg);
}
.pn-serp__title { font-size: 2.1cqw; line-height: 1.2; color: #2A3FA8; }
.pn-serp__snip { font-size: 1.3cqw; line-height: 1.45; color: #4D5156; }

.pn-pin--nopic  { --px: 33; --py: 24.5; }
.pn-pin--icon   { --px: 66; --py: 14; }
.pn-pin--nodesc { --px: 80; --py: 34.5; }

@media (max-width: 599px) {
  .pn-plate--link { aspect-ratio: 100 / 132; }
  .pn-msg { left: 4cqw; top: 4cqw; width: 92cqw; height: 64cqw; border-radius: 4cqw; }
  .pn-msg__bar { height: 11cqw; font-size: 3.4cqw; }
  .pn-msg__in, .pn-msg__out { max-width: 66cqw; padding: 2.6cqw 4cqw; border-radius: 5cqw; font-size: 3.4cqw; }
  .pn-msg__in { left: 5cqw; top: 15cqw; }
  .pn-msg__link { left: 5cqw; top: 26cqw; width: 60cqw; gap: 1.2cqw; padding: 4cqw 4.4cqw; border-radius: 5cqw; }
  .pn-msg__link b { font-size: 3.3cqw; }
  .pn-msg__link span { font-size: 2.8cqw; }
  .pn-msg__out { right: 5cqw; top: 49cqw; }
  .pn-serp { left: 4cqw; top: 74cqw; width: 92cqw; gap: 2cqw; padding: 5cqw 5cqw 5.5cqw; border-radius: 4cqw; }
  .pn-serp__site { gap: 2.4cqw; }
  .pn-serp__site b { font-size: 2.9cqw; }
  .pn-serp__site > span > span { font-size: 2.5cqw; }
  .pn-serp__icon { width: 6cqw; height: 6cqw; }
  .pn-serp__title { font-size: 4.6cqw; }
  .pn-serp__snip { font-size: 2.9cqw; }
  .pn-pin--nopic  { --px: 62; --py: 29; }
  .pn-pin--icon   { --px: 30; --py: 75; }
  .pn-pin--nodesc { --px: 68; --py: 113; }
}


/* =====================================================================
   CALLOUTS → MONITOR OSD (2026-10-13, Colin's pick from _review/callout-lab.html, option 3)
   A thin outline on the offender and a monospaced on-screen readout, in tally red.
   No pills, no glow: the warm colour is kept for things you can click.
   ===================================================================== */
#pain { --pn-mark: #FF4438; }
.pn-pin > span, .pn-osd > span {
  display: block; padding: 5px 8px 4px; border-radius: 2px;
  background: rgba(8, 9, 12, .84); color: var(--pn-mark);
  box-shadow: 0 0 0 1px var(--pn-mark);
  font: 600 12px/1.15 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: .04em; text-transform: uppercase; white-space: nowrap;
}
.pn-pin > span::before, .pn-osd > span::before { content: '▲ '; }
.pn-osd { position: absolute; z-index: 3; box-shadow: 0 0 0 1px var(--pn-mark); pointer-events: none; }
.pn-osd > span { position: absolute; left: -1px; bottom: calc(100% + 4px); font-size: clamp(8px, 1.05cqw, 12px); padding: 3px 6px; box-shadow: none; background: rgba(0, 0, 0, .8); }
.pn-osd--r > span { left: auto; right: -1px; }
.pn-osd--d > span { bottom: auto; top: calc(100% + 4px); }
@media (max-width: 599px) {
  .pn-pin > span { padding: 4px 7px 3px; font-size: 10.5px; }
  .pn-osd > span { font-size: 8.5px; padding: 2px 4px; }
}