/* =====================================================================================
   LAUNCHPLATE — "The Catalogue"
   Editorial art direction layered on vendor/premium.css.
   Ink base + one warm gold accent + a book serif. Print-catalogue structure:
   mastheads, numbered sections, leader-dot contents, framed plates with captions.
   ===================================================================================== */

/* -------------------------------------------------------------------------------------
   00  TOKEN OVERRIDES — retune premium.css from violet/cool to gold/warm ink
   ------------------------------------------------------------------------------------- */
:root {
  /* warm ink */
  --pm-bg:   #0a0a09;
  --pm-bg-1: #111110;
  --pm-bg-2: #171614;
  --pm-bg-3: #1c1b18;

  /* warm text ramp */
  --pm-text:   #f6f3ec;
  --pm-text-2: #c4bfb4;
  --pm-text-3: #948e83;
  --pm-text-4: #867f74;

  /* hairlines, faintly warm */
  --pm-line:   rgba(246, 243, 236, 0.085);
  --pm-line-2: rgba(246, 243, 236, 0.14);
  --pm-line-3: rgba(246, 243, 236, 0.24);
  --pm-highlight: rgba(255, 248, 232, 0.07);

  /* THE accent — burnished gold */
  --pm-accent:   #e0a33e;
  --pm-accent-2: #d98149;
  --pm-accent-3: #f0d3a0;
  --pm-accent-4: #c96a3c;
  --pm-accent-a08: rgba(224, 163, 62, 0.08);
  --pm-accent-a16: rgba(224, 163, 62, 0.16);
  --pm-accent-a32: rgba(224, 163, 62, 0.30);
  --pm-accent-a64: rgba(224, 163, 62, 0.58);

  --pm-max: 1280px;
  --pm-gutter: clamp(20px, 4.2vw, 56px);
  --pm-section-y: clamp(64px, 8.2vw, 124px);
  --pm-grid-color: rgba(246, 243, 236, 0.05);

  /* editorial type */
  --ed-serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua",
              Georgia, ui-serif, "Times New Roman", serif;
  --ed-paper: #f6f3ec;
}

/* Repaint the library's hard-coded cool spots in the warm palette. */
.pm .pm-badge__dot { background: var(--pm-accent); box-shadow: 0 0 0 3px rgba(224,163,62,.2); }
@keyframes pm-pulse-dot {
  0%, 100% { box-shadow: 0 0 0 2px rgba(224,163,62,.24); }
  50%      { box-shadow: 0 0 0 6px rgba(224,163,62,0);   }
}
.pm .pm-bg-halo::before {
  background:
    radial-gradient(54% 48% at 50% 30%, rgba(224,163,62,.15), transparent 72%),
    radial-gradient(40% 36% at 74% 18%, rgba(217,129,73,.10), transparent 74%);
}
.pm .pm-bg-spotlight::before {
  background: radial-gradient(68.5% 68.7% at 55% 31.5%,
      hsla(40, 88%, 78%, 0.16) 0%, hsla(36, 80%, 55%, 0.06) 50%, transparent 80%);
}
.pm .pm-bg-spotlight::after {
  background: radial-gradient(68.5% 68.7% at 45% 31.5%,
      hsla(20, 80%, 70%, 0.11) 0%, hsla(18, 70%, 50%, 0.04) 50%, transparent 80%);
}

/* -------------------------------------------------------------------------------------
   01  BASE
   ------------------------------------------------------------------------------------- */
html { scroll-behavior: smooth; scroll-padding-top: 88px; overflow-x: clip; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body.pm { font-size: 16px; }

::selection { background: rgba(224,163,62,.28); }

.ed-skip {
  position: absolute; left: 12px; top: -60px; z-index: 200;
  background: var(--ed-paper); color: #0a0a09;
  padding: 10px 16px; border-radius: 8px; font-weight: 600; font-size: .875rem;
  transition: top 160ms ease;
}
.ed-skip:focus { top: 12px; }

.pm :focus-visible { outline: 2px solid #e0a33e; outline-offset: 3px; }

/* Serif display face -------------------------------------------------------------- */
.ed-serif { font-family: var(--ed-serif); font-weight: 400; letter-spacing: -0.012em; }
.ed-italic { font-style: italic; }

.ed-display {
  font-family: var(--ed-serif);
  font-weight: 400;
  font-size: clamp(2.65rem, 7.1vw, 6.1rem);
  line-height: 0.95;
  letter-spacing: -0.028em;
  color: var(--pm-text);
  text-wrap: balance;
}
.ed-h2 {
  font-family: var(--ed-serif);
  font-weight: 400;
  font-size: clamp(2rem, 4.2vw, 3.4rem);
  line-height: 1.04;
  letter-spacing: -0.024em;
  color: var(--pm-text);
  text-wrap: balance;
}
.ed-h3 {
  font-family: var(--ed-serif);
  font-weight: 400;
  font-size: clamp(1.45rem, 2.2vw, 2.05rem);
  line-height: 1.12;
  letter-spacing: -0.018em;
  color: var(--pm-text);
}
.ed-h4 {
  font-size: 1.02rem; font-weight: 600; letter-spacing: -0.014em;
  color: var(--pm-text); line-height: 1.35;
}
.ed-deck {
  font-size: clamp(1.09rem, 1.5vw, 1.33rem);
  line-height: 1.62; letter-spacing: -0.012em;
  color: var(--pm-text-2); max-width: 46ch; text-wrap: pretty;
}
.ed-body { font-size: .975rem; line-height: 1.68; color: var(--pm-text-2); max-width: 60ch; text-wrap: pretty; }
.ed-small { font-size: .8125rem; line-height: 1.55; color: var(--pm-text-3); }

/* Mono meta / eyebrows -------------------------------------------------------------- */
.ed-meta {
  font-family: var(--pm-font-mono);
  font-size: .6875rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--pm-text-3);
}
.ed-num {
  font-family: var(--pm-font-mono);
  font-size: .6875rem; letter-spacing: .1em;
  color: var(--pm-accent);
}

/* Section masthead: № 03 ——————————— THE SEVEN KITS ----------------------------------- */
.ed-marker { display: flex; align-items: center; gap: 16px; margin-bottom: clamp(24px, 3vw, 44px); }
.ed-marker__rule { flex: 1 1 auto; height: 1px; background: var(--pm-line-2); min-width: 24px; }
.ed-marker__label { white-space: nowrap; }

.ed-rule { height: 1px; border: 0; margin: 0; background: var(--pm-line); }

/* Drop cap ------------------------------------------------------------------------- */
.ed-dropcap::first-letter {
  font-family: var(--ed-serif);
  float: left;
  font-size: 3.5em;
  line-height: 0.82;
  padding-right: .09em;
  margin-top: .06em;
  color: var(--pm-accent);
}

/* -------------------------------------------------------------------------------------
   02  NAV
   ------------------------------------------------------------------------------------- */
.ed-nav {
  position: sticky; top: 0; z-index: 60;
  background: rgba(10, 10, 9, .72);
  -webkit-backdrop-filter: saturate(170%) blur(16px);
  backdrop-filter: saturate(170%) blur(16px);
  border-bottom: 1px solid var(--pm-line);
}
.ed-nav__in {
  max-width: 1280px; margin-inline: auto;
  padding: 11px var(--pm-gutter);
  display: flex; align-items: center; gap: 20px;
}
.ed-wordmark {
  font-family: var(--ed-serif); font-size: 1.24rem; letter-spacing: -0.02em;
  color: var(--pm-text); display: inline-flex; align-items: baseline; gap: 9px;
}
.ed-wordmark small {
  font-family: var(--pm-font-mono); font-size: .5625rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--pm-text-4);
}
.ed-nav__links { display: flex; gap: 4px; margin-left: auto; }
.ed-nav__links a {
  font-size: .875rem; color: var(--pm-text-3); padding: 7px 11px; border-radius: 7px;
  transition: color 140ms var(--pm-ease), background 140ms var(--pm-ease);
}
.ed-nav__links a:hover { color: var(--pm-text); background: var(--pm-surface-2); }
.ed-nav__cta { margin-left: 6px; }
@media (max-width: 900px) { .ed-nav__links { display: none; } .ed-nav__cta { margin-left: auto; } }

/* -------------------------------------------------------------------------------------
   03  BUTTONS (editorial variants on top of .pm-btn)
   ------------------------------------------------------------------------------------- */
.ed-btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  height: 46px; padding: 0 22px;
  border-radius: 10px;
  border: 1px solid var(--pm-line-2);
  background: var(--pm-surface-2);
  color: var(--pm-text);
  font-size: .9375rem; font-weight: 550; letter-spacing: -0.012em;
  white-space: nowrap; cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07);
  transition: background 150ms var(--pm-ease), border-color 150ms var(--pm-ease),
              transform 150ms var(--pm-ease), box-shadow 150ms var(--pm-ease), color 150ms var(--pm-ease);
}
.ed-btn:hover { background: var(--pm-surface-3); border-color: var(--pm-line-3); }
.ed-btn:active { transform: translateY(1px); }
.ed-btn svg { flex: 0 0 auto; }

.ed-btn--gold {
  background: linear-gradient(180deg, #edb75a, #d1902f);
  color: #241703; border-color: transparent; font-weight: 640;
  box-shadow: 0 1px 2px rgba(0,0,0,.5), 0 10px 30px -10px rgba(224,163,62,.55),
              inset 0 1px 0 rgba(255,255,255,.4);
}
.ed-btn--gold:hover { background: linear-gradient(180deg, #f3c268, #dd9c37); }

.ed-btn--paper {
  background: var(--ed-paper); color: #0a0a09; border-color: transparent; font-weight: 620;
  box-shadow: 0 1px 2px rgba(0,0,0,.45), inset 0 -1px 0 rgba(0,0,0,.14);
}
.ed-btn--paper:hover { background: #fffdf7; }

.ed-btn--quiet { background: transparent; border-color: var(--pm-line-2); color: var(--pm-text-2); }
.ed-btn--quiet:hover { color: var(--pm-text); background: var(--pm-surface); }

.ed-btn--sm { height: 38px; padding: 0 15px; font-size: .8438rem; border-radius: 8px; }
.ed-btn--lg { height: 54px; padding: 0 30px; font-size: 1.0125rem; border-radius: 12px; }
.ed-btn--full { width: 100%; }

/* Text link with an animated underline ---------------------------------------------- */
.ed-link {
  color: var(--pm-text); font-weight: 500;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 100% 1px; background-repeat: no-repeat; background-position: 0 100%;
  padding-bottom: 2px;
  transition: color 160ms var(--pm-ease);
}
.ed-link:hover { color: var(--pm-accent); }

/* -------------------------------------------------------------------------------------
   04  PLATES — screenshots framed like plates in an art book
   ------------------------------------------------------------------------------------- */
.plate {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  background: var(--pm-bg-2);
  border: 1px solid rgba(246,243,236,.11);
  box-shadow:
    0 2px 4px rgba(0,0,0,.5),
    0 22px 44px -18px rgba(0,0,0,.8),
    0 70px 110px -55px rgba(0,0,0,1),
    inset 0 1px 0 rgba(255,255,255,.09);
}
.plate__chrome {
  display: flex; align-items: center; gap: 7px;
  height: 30px; padding: 0 12px;
  background: linear-gradient(180deg, #201f1c, #171614);
  border-bottom: 1px solid rgba(246,243,236,.075);
}
.plate__dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(246,243,236,.16); flex: 0 0 auto; }
.plate__url {
  flex: 1 1 auto; text-align: center;
  font-family: var(--pm-font-mono); font-size: 10px; letter-spacing: .01em;
  color: var(--pm-text-4);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  padding-right: 36px;
}
.plate img { width: 100%; height: auto; display: block; background: #14130f; }
.plate--crop img { aspect-ratio: 16 / 10; object-fit: cover; object-position: top center; }

.plate-cap {
  margin-top: 4px;
  font-family: var(--pm-font-mono); font-size: .6875rem; letter-spacing: .11em;
  text-transform: uppercase; color: var(--pm-text-4);
  display: flex; align-items: center; gap: 10px;
}
.plate-cap::before { content: ""; width: 18px; height: 1px; background: var(--pm-line-2); flex: 0 0 auto; }

/* Hero fanned stack ----------------------------------------------------------------- */
.stack { position: relative; aspect-ratio: 4 / 3.15; }
.stack .plate { position: absolute; width: 90%; }
.stack .plate--3 { top: 0;     left: 10%; transform: scale(.96); opacity: .62; filter: saturate(.7) brightness(.86); }
.stack .plate--2 { top: 11%;   left: 5%;  transform: scale(.98); opacity: .88; filter: saturate(.9) brightness(.96); }
.stack .plate--1 { top: 22%;   left: 0;   z-index: 3; }
.stack__glow {
  position: absolute; inset: 8% 0 -18% 0; z-index: -1;
  background: radial-gradient(52% 50% at 50% 55%, rgba(224,163,62,.24), transparent 72%);
  filter: blur(44px);
}
@media (max-width: 900px) {
  .stack { aspect-ratio: 4 / 3.2; }
}

/* -------------------------------------------------------------------------------------
   05  HERO
   ------------------------------------------------------------------------------------- */
.hero { position: relative; padding-block: clamp(52px, 7vw, 104px) clamp(48px, 6vw, 88px); overflow: hidden; }
.hero__grid {
  display: grid; gap: clamp(40px, 5vw, 72px);
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
  align-items: center;
}
@media (max-width: 1000px) { .hero__grid { grid-template-columns: minmax(0,1fr); } }

.masthead {
  display: flex; align-items: center; gap: 14px;
  padding-bottom: 14px; margin-bottom: clamp(24px, 3vw, 38px);
  border-bottom: 1px solid var(--pm-line-2);
}
.masthead__sep { flex: 1 1 auto; height: 1px; background: var(--pm-line); min-width: 12px; }
@media (max-width: 560px) { .masthead .masthead__hide { display: none; } }

.hero__terms {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--pm-line-2);
}
.hero__terms .gold { color: var(--pm-accent); }
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.hero__assure {
  margin-top: 26px; display: flex; flex-wrap: wrap; gap: 8px 20px;
  font-size: .8125rem; color: var(--pm-text-3);
}
.hero__assure span { display: inline-flex; align-items: center; gap: 7px; }
.hero__assure svg { color: var(--pm-accent); flex: 0 0 auto; }

/* -------------------------------------------------------------------------------------
   06  CONTACT SHEET (full-bleed marquee of plates)
   ------------------------------------------------------------------------------------- */
.sheet { padding-block: 8px clamp(28px, 4vw, 44px); }
.sheet .pm-marquee { --pm-marquee-gap: 22px; }
.sheet-item {
  flex: 0 0 auto; width: clamp(210px, 24vw, 320px);
  border-radius: 9px; overflow: hidden;
  border: 1px solid rgba(246,243,236,.09);
  box-shadow: 0 1px 2px rgba(0,0,0,.5), 0 16px 32px -18px rgba(0,0,0,.9);
  opacity: .78;
  transition: opacity 300ms var(--pm-ease), transform 300ms var(--pm-ease);
}
.sheet-item:hover { opacity: 1; transform: translateY(-3px); }
.sheet-item img { width: 100%; height: auto; aspect-ratio: 16 / 11; object-fit: cover; object-position: top center; }

/* -------------------------------------------------------------------------------------
   07  ASSURANCE BAND
   ------------------------------------------------------------------------------------- */
.band { background: rgba(246,243,236,.012); }
.band__stats {
  display: grid; grid-template-columns: repeat(4, minmax(0,1fr));
  border-top: 1px solid var(--pm-line-2);
  border-bottom: 1px solid var(--pm-line);
}
.band__stat { padding: clamp(22px, 3vw, 36px) clamp(14px, 2vw, 28px); }
.band__stat + .band__stat { border-left: 1px solid var(--pm-line); }
.band__stat b {
  display: block; font-family: var(--ed-serif); font-weight: 400;
  font-size: clamp(2rem, 3.6vw, 3.1rem); line-height: 1; letter-spacing: -0.03em;
  color: var(--pm-text); font-variant-numeric: tabular-nums;
}
.band__stat b span { font: inherit; color: inherit; display: inline; margin: 0; letter-spacing: inherit; }
.band__stat > span { display: block; margin-top: 11px; font-size: .8438rem; color: var(--pm-text-3); letter-spacing: -0.005em; }
.band__grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); border-bottom: 1px solid var(--pm-line-2); }
.band__item { padding: clamp(24px, 2.8vw, 34px) clamp(14px, 2vw, 28px); }
.band__item + .band__item { border-left: 1px solid var(--pm-line); }
.band__item svg { color: var(--pm-accent); margin-bottom: 14px; }
.band__item p { margin-top: 7px; font-size: .8438rem; line-height: 1.55; color: var(--pm-text-3); }
@media (max-width: 900px) {
  .band__stats, .band__grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .band__stat:nth-child(3), .band__item:nth-child(3) { border-left: 0; }
  .band__stat:nth-child(n+3), .band__item:nth-child(n+3) { border-top: 1px solid var(--pm-line); }
}
@media (max-width: 520px) {
  .band__stats, .band__grid { grid-template-columns: minmax(0,1fr); }
  .band__stat + .band__stat, .band__item + .band__item { border-left: 0; border-top: 1px solid var(--pm-line); }
}

/* -------------------------------------------------------------------------------------
   08  CONTENTS (leader-dot table of contents)
   ------------------------------------------------------------------------------------- */
.toc { border-top: 1px solid var(--pm-line-2); }
.toc__row {
  display: flex; align-items: baseline; gap: 14px;
  padding: 17px 4px;
  border-bottom: 1px solid var(--pm-line);
  transition: background 180ms var(--pm-ease), padding-left 220ms var(--pm-ease);
}
.toc__row:hover { background: rgba(246,243,236,.028); padding-left: 12px; }
.toc__n { font-family: var(--pm-font-mono); font-size: .75rem; color: var(--pm-accent); flex: 0 0 auto; width: 34px; }
.toc__name {
  font-family: var(--ed-serif); font-size: clamp(1.05rem, 1.7vw, 1.35rem);
  letter-spacing: -0.015em; color: var(--pm-text); flex: 0 0 auto;
}
.toc__lead { flex: 1 1 auto; min-width: 18px; border-bottom: 1px dotted var(--pm-line-3); transform: translateY(-4px); }
.toc__pages { font-family: var(--pm-font-mono); font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase; color: var(--pm-text-4); flex: 0 0 auto; }
.toc__price { font-family: var(--pm-font-mono); font-size: .8125rem; color: var(--pm-text-2); flex: 0 0 auto; width: 44px; text-align: right; font-variant-numeric: tabular-nums; }
.toc__swatch { width: 9px; height: 9px; border-radius: 2px; flex: 0 0 auto; background: var(--k, var(--pm-accent)); box-shadow: 0 0 10px -1px var(--k, var(--pm-accent)); }
@media (max-width: 680px) {
  .toc__pages { display: none; }
  .toc__name { font-size: 1rem; }
}

/* -------------------------------------------------------------------------------------
   10  INSIDE EVERY KIT — bento
   ------------------------------------------------------------------------------------- */
.bento { display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap: 14px; }
.tile {
  position: relative; overflow: hidden;
  border-radius: 16px;
  border: 1px solid var(--pm-line);
  background: linear-gradient(180deg, rgba(246,243,236,.035), rgba(246,243,236,.01)), var(--pm-bg-1);
  box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 14px 32px -18px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.06);
  padding: clamp(20px, 2.2vw, 28px);
  transition: border-color 240ms var(--pm-ease), transform 240ms var(--pm-ease);
}
.tile:hover { border-color: var(--pm-line-2); }
.tile p { margin-top: 9px; font-size: .875rem; line-height: 1.6; color: var(--pm-text-3); }
.tile__ico {
  width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center;
  border: 1px solid var(--pm-line-2); background: rgba(224,163,62,.08); color: var(--pm-accent);
  margin-bottom: 16px;
}
.t-2 { grid-column: span 2; } .t-3 { grid-column: span 3; } .t-4 { grid-column: span 4; } .t-6 { grid-column: span 6; }
.t-tall { grid-row: span 2; }
@media (max-width: 900px) {
  .bento { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .t-2, .t-3, .t-4, .t-6 { grid-column: span 2; }
  .t-tall { grid-row: span 1; }
}
@media (max-width: 560px) { .bento { grid-template-columns: minmax(0,1fr); } .t-2,.t-3,.t-4,.t-6 { grid-column: span 1; } }

/* 45-page ledger inside the tall tile */
.pages-reel { position: relative; height: 320px; margin-top: 18px; }
.pages-reel .pm-marquee { --pm-marquee-gap: 0px; height: 100%; }
.pages-reel .pm-marquee__track { gap: 0; }
.pages-reel__item {
  display: flex; align-items: baseline; gap: 10px;
  padding: 6px 0; font-size: .8125rem; color: var(--pm-text-3);
  border-bottom: 1px solid rgba(246,243,236,.05);
}
.pages-reel__item i {
  font-style: normal; font-family: var(--pm-font-mono); font-size: .625rem;
  letter-spacing: .08em; text-transform: uppercase; color: var(--pm-text-4);
  margin-left: auto; white-space: nowrap;
}
.pages-reel__item b { font-weight: 500; color: var(--pm-text-2); }
@media (max-width: 900px) { .pages-reel { height: 240px; } }

/* -------------------------------------------------------------------------------------
   11  BUNDLE LEDGER
   ------------------------------------------------------------------------------------- */
.ledger__grid {
  display: grid; gap: clamp(28px, 4vw, 56px);
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
  align-items: center;
}
@media (max-width: 940px) { .ledger__grid { grid-template-columns: minmax(0,1fr); } }

.receipt {
  position: relative;
  border-radius: 16px;
  border: 1px solid rgba(224,163,62,.26);
  background: linear-gradient(180deg, rgba(224,163,62,.055), rgba(224,163,62,.012)), var(--pm-bg-1);
  box-shadow: 0 2px 4px rgba(0,0,0,.5), 0 30px 70px -30px rgba(0,0,0,.9),
              0 0 70px -30px rgba(224,163,62,.4), inset 0 1px 0 rgba(255,255,255,.08);
  padding: clamp(24px, 3vw, 38px);
  overflow: hidden;
}
.receipt__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--pm-line-2); }
.receipt__line {
  display: flex; align-items: baseline; gap: 10px;
  padding: 9px 0; font-size: .875rem; color: var(--pm-text-2);
}
.receipt__line .lead { flex: 1 1 auto; min-width: 12px; border-bottom: 1px dotted rgba(246,243,236,.16); transform: translateY(-4px); }
.receipt__line .amt { font-family: var(--pm-font-mono); font-size: .8125rem; font-variant-numeric: tabular-nums; color: var(--pm-text-3); }
.receipt__sub { display: flex; align-items: baseline; gap: 10px; padding: 14px 0 4px; margin-top: 6px; border-top: 1px solid var(--pm-line-2); font-size: .9375rem; color: var(--pm-text); }
.receipt__sub .amt { font-family: var(--pm-font-mono); font-variant-numeric: tabular-nums; color: var(--pm-text); }
.receipt__total {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 16px;
  margin-top: 18px; padding-top: 18px; border-top: 2px solid rgba(224,163,62,.4);
}
.receipt__total b {
  font-family: var(--ed-serif); font-weight: 400; font-size: clamp(2.6rem, 5vw, 3.9rem);
  line-height: .9; letter-spacing: -0.035em; color: var(--pm-text); font-variant-numeric: tabular-nums;
}
.receipt__save {
  margin-top: 16px; padding: 12px 14px; border-radius: 10px;
  background: rgba(224,163,62,.1); border: 1px solid rgba(224,163,62,.22);
  font-size: .8438rem; color: var(--pm-accent-3);
}

/* -------------------------------------------------------------------------------------
   12  LICENCE
   ------------------------------------------------------------------------------------- */
.licence__grid { display: grid; gap: clamp(24px, 3vw, 40px); grid-template-columns: repeat(2, minmax(0,1fr)); }
@media (max-width: 780px) { .licence__grid { grid-template-columns: minmax(0,1fr); } }
.licence__col { padding: clamp(22px, 2.6vw, 32px); border-radius: 16px; border: 1px solid var(--pm-line); background: rgba(246,243,236,.018); }
.licence__col--no { background: transparent; border-style: dashed; }
.licence__list { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-direction: column; gap: 13px; }
.licence__list li { display: flex; gap: 12px; font-size: .9062rem; line-height: 1.55; color: var(--pm-text-2); }
.licence__list svg { flex: 0 0 auto; margin-top: 3px; }
.licence__col--yes svg { color: var(--pm-accent); }
.licence__col--no svg { color: var(--pm-text-4); }
.licence__col--no li { color: var(--pm-text-3); }

/* -------------------------------------------------------------------------------------
   13  FAQ
   ------------------------------------------------------------------------------------- */
.faq { border-top: 1px solid var(--pm-line-2); }
.faq details { border-bottom: 1px solid var(--pm-line); }
.faq summary {
  display: flex; align-items: flex-start; gap: 16px;
  padding: 20px 4px; cursor: pointer; list-style: none;
  font-family: var(--ed-serif); font-size: clamp(1.05rem, 1.5vw, 1.28rem);
  letter-spacing: -0.014em; color: var(--pm-text);
  transition: color 160ms var(--pm-ease);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--pm-accent-3); }
.faq summary .q { flex: 1 1 auto; }
.faq summary .n { font-family: var(--pm-font-mono); font-size: .6875rem; color: var(--pm-accent); flex: 0 0 auto; width: 30px; padding-top: 8px; }
.faq summary .plus { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 6px; position: relative; }
.faq summary .plus::before, .faq summary .plus::after {
  content: ""; position: absolute; inset: 50% 0 auto 0; height: 1.5px; background: var(--pm-text-3);
  transform: translateY(-50%); transition: transform 240ms var(--pm-ease), background 240ms var(--pm-ease);
}
.faq summary .plus::after { transform: translateY(-50%) rotate(90deg); }
.faq details[open] summary .plus::after { transform: translateY(-50%) rotate(0deg); }
.faq details[open] summary .plus::before, .faq details[open] summary .plus::after { background: var(--pm-accent); }
.faq__a { padding: 0 4px 24px 46px; font-size: .9375rem; line-height: 1.68; color: var(--pm-text-3); max-width: 68ch; }
.faq__a a { color: var(--pm-accent); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 560px) { .faq__a { padding-left: 4px; } .faq summary .n { display: none; } }

/* -------------------------------------------------------------------------------------
   14  FINAL CTA
   ------------------------------------------------------------------------------------- */
.finale { position: relative; overflow: hidden; text-align: center; }
.finale__inner { position: relative; z-index: 2; }
.finale__rule { width: 64px; height: 2px; background: var(--pm-accent); margin: 0 auto 28px; border-radius: 2px; box-shadow: 0 0 22px 1px rgba(224,163,62,.7); }
.finale__cta { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 36px; }
.finale__note { margin-top: 22px; font-size: .8125rem; color: var(--pm-text-4); }

/* -------------------------------------------------------------------------------------
   15  FOOTER
   ------------------------------------------------------------------------------------- */
.foot { border-top: 1px solid var(--pm-line); padding-block: clamp(48px, 6vw, 76px) 32px; }
.foot__grid { display: grid; gap: 40px; grid-template-columns: 1.5fr repeat(3, 1fr); }
@media (max-width: 860px) { .foot__grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 480px) { .foot__grid { grid-template-columns: minmax(0,1fr); } }
.foot h3 { font-family: var(--pm-font-mono); font-size: .6875rem; letter-spacing: .15em; text-transform: uppercase; color: var(--pm-text-4); font-weight: 400; margin-bottom: 16px; }
.foot ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.foot ul a { font-size: .875rem; color: var(--pm-text-3); transition: color 150ms var(--pm-ease); }
.foot ul a:hover { color: var(--pm-text); }
.foot__bottom {
  margin-top: clamp(40px, 5vw, 64px); padding-top: 22px; border-top: 1px solid var(--pm-line);
  display: flex; flex-wrap: wrap; gap: 12px 24px; justify-content: space-between;
  font-size: .75rem; color: var(--pm-text-4);
}

/* -------------------------------------------------------------------------------------
   16  UTIL
   ------------------------------------------------------------------------------------- */
.wrap { width: 100%; max-width: var(--pm-max); margin-inline: auto; padding-inline: var(--pm-gutter); }
.wrap--wide { max-width: 1280px; }
.wrap--tight { max-width: 820px; }
.sec { position: relative; padding-block: var(--pm-section-y); }
.sec--tight { padding-block: clamp(52px, 6vw, 88px); }
.mt-0 { margin-top: 0; } .mt-1 { margin-top: 10px; } .mt-2 { margin-top: 18px; }
.mt-3 { margin-top: 26px; } .mt-4 { margin-top: 38px; } .mt-5 { margin-top: 54px; }
.gold { color: var(--pm-accent); }
.ink { color: var(--pm-text); }
.vis-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.nowrap { white-space: nowrap; }

/* A statement pull-quote (not a testimonial — a claim we stand behind) */
.pull {
  font-family: var(--ed-serif); font-size: clamp(1.5rem, 3vw, 2.35rem);
  line-height: 1.18; letter-spacing: -0.022em; color: var(--pm-text);
  border-left: 2px solid var(--pm-accent); padding-left: clamp(20px, 3vw, 34px);
  max-width: 22ch;
}

/* Safety: nothing on this page may be permanently invisible. */
.pm-js [data-pm-reveal] { transition-duration: 700ms; }
@media (prefers-reduced-motion: reduce) {
  .pm-js [data-pm-reveal] { opacity: 1 !important; transform: none !important; filter: none !important; }
}

/* =====================================================================================
   17  SPECIFICITY REPAIR
   -------------------------------------------------------------------------------------
   premium.css zeroes margins with `.pm h1, .pm h2, .pm h3, .pm h4, .pm p, .pm figure`
   — a (0,1,1) selector that silently beats every single-class utility below. Anything
   that sets a margin on a <p> or heading has to match or exceed that weight, so the
   whole margin system is restated here with the `.pm` scope prefix.
   ===================================================================================== */
.pm .mt-0 { margin-top: 0; }
.pm .mt-1 { margin-top: 10px; }
.pm .mt-2 { margin-top: 18px; }
.pm .mt-3 { margin-top: 26px; }
.pm .mt-4 { margin-top: 38px; }
.pm .mt-5 { margin-top: 54px; }

.pm .masthead      { margin-bottom: clamp(24px, 3vw, 38px); }
.pm .ed-marker     { margin-bottom: clamp(24px, 3vw, 44px); }
.pm .hero__terms   { margin-top: 28px; }
.pm .hero__assure  { margin-top: 26px; }
.pm .receipt__save     { margin-top: 18px; }
.pm .finale__note      { margin-top: 22px; }
.pm .licence__col p + .licence__list { margin-top: 18px; }

/* The finale hairline is a <span>: it needs a box before width/height mean anything. */
.pm .finale__rule { display: block; }

/* Vertical marquee tracks centre their children by default — the page ledger must
   fill the tile so the "45 pages" list reads as a column, not a centred stack. */
.pages-reel .pm-marquee__track { align-items: stretch; width: 100%; }
.pages-reel .pm-marquee { width: 100%; }

/* Leader dots on the subtotal row too. */
.receipt__sub .lead {
  flex: 1 1 auto; min-width: 12px;
  border-bottom: 1px dotted rgba(246,243,236,.22);
  transform: translateY(-4px);
}
.receipt__total > div { display: flex; flex-direction: column; gap: 4px; }

/* =====================================================================================
   18  SMALL SCREENS (320 → 680)
   ===================================================================================== */
@media (max-width: 680px) {
  .ed-nav__in { gap: 12px; }
  .ed-wordmark { font-size: 1.08rem; }
  .ed-wordmark small { display: none; }
  .ed-nav__cta { padding: 0 12px; font-size: .8125rem; }

  /* Contents: let long kit names wrap, drop the leader rule. */
  .toc__row { flex-wrap: wrap; gap: 6px 12px; padding: 15px 2px; }
  .toc__row:hover { padding-left: 2px; }
  .toc__n { width: 26px; }
  .toc__name { flex: 1 1 auto; min-width: 0; }
  .toc__lead { display: none; }
  .toc__price { margin-left: auto; width: auto; }

  .plate__url { font-size: 9px; padding-right: 24px; }
  .plate-cap { font-size: .625rem; letter-spacing: .08em; }
  .ed-btn { width: 100%; }
  .ed-btn--sm, .ed-nav__cta { width: auto; }
  .receipt__line { font-size: .8125rem; }
}
@media (max-width: 400px) {
  .ed-nav__links { display: none; }
  .hero__terms { font-size: .625rem; gap: 7px; }
  .ed-display { font-size: clamp(2.3rem, 11.5vw, 3rem); }
}
@media (max-width: 480px) { .toc__name { font-size: .92rem; } }

/* -------------------------------------------------------------------------------------
   19  BENTO TILE ORNAMENTS
   ------------------------------------------------------------------------------------- */
.swatches { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: auto; padding-top: 26px; }
.swatch {
  position: relative; border-radius: 10px; padding: 12px 12px 34px;
  border: 1px solid var(--pm-line); overflow: hidden;
}
.swatch--light { background: #f4f1ea; }
.swatch--dark  { background: #131211; }
.swatch__bar { display: block; height: 7px; border-radius: 3px; margin-bottom: 9px; width: 46%; }
.swatch__line { display: block; height: 4px; border-radius: 3px; margin-bottom: 6px; }
.swatch__line--short { width: 62%; }
.swatch--light .swatch__bar  { background: #16150f; }
.swatch--light .swatch__line { background: rgba(20,19,14,.24); }
.swatch--dark  .swatch__bar  { background: #f4f1ea; }
.swatch--dark  .swatch__line { background: rgba(244,241,234,.24); }
.swatch__tag {
  position: absolute; left: 12px; bottom: 10px;
  font-family: var(--pm-font-mono); font-size: 9px; letter-spacing: .14em; text-transform: uppercase;
}
.swatch--light .swatch__tag { color: rgba(20,19,14,.62); }
.swatch--dark  .swatch__tag { color: var(--pm-text-4); }

.bps { display: flex; flex-direction: column; gap: 9px; margin-top: auto; padding-top: 26px; }
.bp {
  display: block; width: var(--w); height: 22px; position: relative;
  border: 1px solid var(--pm-line-2); border-radius: 4px;
  background: linear-gradient(180deg, rgba(224,163,62,.10), rgba(224,163,62,.02));
}
.bp i {
  position: absolute; left: calc(100% + 9px); top: 50%; transform: translateY(-50%);
  font-style: normal; font-family: var(--pm-font-mono); font-size: 9px;
  letter-spacing: .1em; color: var(--pm-text-4); white-space: nowrap;
}
.bp:last-child i { left: auto; right: 8px; }
.tile { display: flex; flex-direction: column; }
.tile.t-tall .pages-reel { flex: 0 0 auto; height: 452px; margin-top: 22px; }
@media (max-width: 900px) { .tile.t-tall .pages-reel { height: 250px; } }

/* -------------------------------------------------------------------------------------
   20  ULTRAWIDE — widen the measure a step so the page doesn't island at 2560+
   ------------------------------------------------------------------------------------- */
@media (min-width: 1700px) {
  :root { --pm-max: 1420px; --pm-gutter: 64px; }
  .wrap--wide { max-width: 1420px; }
  .ed-nav__in { max-width: 1420px; }
  .ed-display { font-size: clamp(2.65rem, 6.6vw, 7.1rem); }
  .ed-h2 { font-size: clamp(2rem, 4vw, 3.9rem); }
}

/* =====================================================================================
   21  THE ARITHMETIC — invoice ticket + hours ledger
   -------------------------------------------------------------------------------------
   Grafted from variant C and re-cut in the catalogue's gold-on-ink language: the
   docket is a printed ticket, the ledger is a set table with leader rules.
   ===================================================================================== */
.maths__grid {
  display: grid; gap: clamp(28px, 4vw, 56px);
  grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr);
  align-items: start;
}
@media (max-width: 940px) { .maths__grid { grid-template-columns: minmax(0,1fr); } }

/* --- the ticket ------------------------------------------------------------------- */
.ticket {
  position: relative;
  border-radius: 14px;
  border: 1px solid rgba(224,163,62,.26);
  background: linear-gradient(180deg, rgba(224,163,62,.07), rgba(224,163,62,.012)), var(--pm-bg-1);
  box-shadow: 0 2px 4px rgba(0,0,0,.5), 0 26px 60px -30px rgba(0,0,0,.9),
              0 0 60px -30px rgba(224,163,62,.34), inset 0 1px 0 rgba(255,255,255,.07);
  padding: clamp(20px, 2.6vw, 30px);
  overflow: hidden;
}
/* perforation, like a torn docket */
.ticket::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px;
  background: repeating-linear-gradient(90deg,
      rgba(224,163,62,.5) 0 5px, transparent 5px 11px);
  opacity: .55;
}
.ticket__head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding-bottom: 14px; margin-bottom: 4px; border-bottom: 1px solid var(--pm-line-2);
}
.ticket__row {
  display: flex; align-items: baseline; gap: 10px;
  padding: 11px 0; font-size: .9062rem; color: var(--pm-text-2);
  border-bottom: 1px solid var(--pm-line);
}
.ticket__row .lead {
  flex: 1 1 auto; min-width: 12px;
  border-bottom: 1px dotted rgba(246,243,236,.18); transform: translateY(-4px);
}
.ticket__row b {
  font-family: var(--pm-font-mono); font-weight: 500; font-size: .875rem;
  font-variant-numeric: tabular-nums; color: var(--pm-text);
}
.ticket__row--pct b { color: var(--pm-accent); }
.ticket__row--total {
  border-bottom: 0; border-top: 2px solid rgba(224,163,62,.42);
  margin-top: 8px; padding-top: 16px; align-items: baseline;
}
.ticket__row--total > span:first-child { color: var(--pm-text); font-size: 1rem; }
.ticket__row--total b {
  font-family: var(--ed-serif); font-weight: 400; font-size: clamp(1.3rem, 2.4vw, 1.75rem);
  letter-spacing: -0.025em; color: var(--pm-accent-3);
}
.ticket__foot { margin-top: 16px; font-size: .75rem; line-height: 1.55; color: var(--pm-text-4); }

/* --- the big number ---------------------------------------------------------------- */
.bignum {
  display: flex; align-items: baseline; gap: 4px;
  font-family: var(--ed-serif); font-weight: 400;
  font-size: clamp(3.4rem, 8vw, 5.6rem); line-height: .88; letter-spacing: -0.04em;
  color: var(--pm-accent); font-variant-numeric: tabular-nums;
}
.bignum span { font: inherit; color: inherit; letter-spacing: inherit; }
.bignum__suffix { font-size: .48em; letter-spacing: -0.02em; }

.callout {
  border-left: 2px solid var(--pm-accent);
  padding: 2px 0 2px clamp(18px, 2.4vw, 26px);
}

/* --- the hours ledger --------------------------------------------------------------- */
.ledger {
  border: 1px solid var(--pm-line-2); border-radius: 14px;
  background: linear-gradient(180deg, rgba(246,243,236,.028), rgba(246,243,236,.006)), var(--pm-bg-1);
  box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 22px 50px -28px rgba(0,0,0,.8);
  overflow: hidden;
}
.ledger table { width: 100%; border-collapse: collapse; }
.ledger th, .ledger td { text-align: left; padding: 11px clamp(14px, 1.8vw, 22px); }
.ledger thead th {
  font-family: var(--pm-font-mono); font-size: .625rem; letter-spacing: .13em;
  text-transform: uppercase; color: var(--pm-text-4); font-weight: 400;
  border-bottom: 1px solid var(--pm-line-2);
  background: rgba(246,243,236,.022);
  padding-top: 14px; padding-bottom: 14px;
}
.ledger tbody th {
  font-weight: 400; font-size: .875rem; color: var(--pm-text-2);
  border-bottom: 1px solid var(--pm-line);
}
.ledger tbody td {
  border-bottom: 1px solid var(--pm-line);
  font-family: var(--pm-font-mono); font-size: .8125rem;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.ledger .was { color: var(--pm-text-4); }
.ledger .now { color: var(--pm-accent); }
.ledger tbody tr:last-child th, .ledger tbody tr:last-child td { border-bottom: 0; }
.ledger tr.is-total th {
  color: var(--pm-text); font-size: .9375rem;
  border-top: 2px solid rgba(224,163,62,.4); border-bottom: 0;
  padding-top: 15px; padding-bottom: 15px;
}
.ledger tr.is-total td {
  border-top: 2px solid rgba(224,163,62,.4); border-bottom: 0;
  font-size: .9375rem; padding-top: 15px; padding-bottom: 15px;
}
.ledger tr.is-total .was { color: var(--pm-text-3); }
.ledger tr.is-total .now { color: var(--pm-accent-3); font-weight: 600; }
.ledger__foot {
  padding: 16px clamp(14px, 1.8vw, 22px) 18px;
  border-top: 1px solid var(--pm-line);
  background: rgba(246,243,236,.018);
}
.ledger__foot p { font-size: .75rem; line-height: 1.62; color: var(--pm-text-4); max-width: 62ch; }
.ledger__foot strong { color: var(--pm-text-2); font-weight: 600; }
@media (max-width: 620px) {
  .ledger th, .ledger td { padding-inline: 12px; }
  .ledger tbody th { font-size: .8125rem; }
  .ledger tbody td { font-size: .75rem; }
}
@media (max-width: 380px) {
  .ledger th, .ledger td { padding-inline: 9px; }
  .ledger tbody td { font-size: .6875rem; }
}

/* =====================================================================================
   22  THE KIT BROWSER — variant B's explorer, re-cut as a catalogue reading desk
   ===================================================================================== */
.kb {
  --kc: var(--pm-accent);
  position: relative;
  border: 1px solid var(--pm-line-2);
  border-radius: 16px;
  background:
      radial-gradient(120% 100% at 50% -12%, rgba(246,243,236,.045), transparent 62%),
      var(--pm-bg-1);
  box-shadow: 0 2px 4px rgba(0,0,0,.45), 0 40px 90px -46px rgba(0,0,0,.95),
              inset 0 1px 0 rgba(255,255,255,.06);
  overflow: hidden;
}
.kb__top {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  padding: 12px clamp(12px, 1.6vw, 18px);
  border-bottom: 1px solid var(--pm-line);
  background: linear-gradient(180deg, rgba(246,243,236,.03), transparent);
}
.kb__lab { flex: 0 0 auto; }
.kb__filters { display: flex; flex-wrap: wrap; gap: 6px; }
.kb__chip {
  appearance: none; cursor: pointer; font: inherit;
  font-size: .8125rem; font-weight: 500; letter-spacing: -0.01em;
  color: var(--pm-text-3);
  background: transparent; border: 1px solid var(--pm-line-2);
  border-radius: 999px; padding: 5px 13px;
  transition: color 150ms var(--pm-ease), background 150ms var(--pm-ease), border-color 150ms var(--pm-ease);
}
.kb__chip:hover { color: var(--pm-text); background: var(--pm-surface-2); border-color: var(--pm-line-3); }
.kb__chip[aria-pressed="true"] {
  color: #241703; font-weight: 620; border-color: transparent;
  background: linear-gradient(180deg, #edb75a, #d1902f);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4);
}
.kb__count { margin-left: auto; font-variant-numeric: tabular-nums; }

.kb__body { display: grid; grid-template-columns: minmax(0,1fr); }
@media (min-width: 960px) { .kb__body { grid-template-columns: 274px minmax(0, 1fr); } }

/* --- the rail reads like the contents page ---------------------------------------- */
.kb__rail {
  padding: 10px; display: flex; flex-direction: column; gap: 1px;
  border-bottom: 1px solid var(--pm-line);
}
@media (min-width: 960px) { .kb__rail { border-bottom: 0; border-right: 1px solid var(--pm-line); } }
.kb__kit {
  display: flex; align-items: baseline; gap: 10px;
  padding: 10px 12px; border-radius: 9px;
  border: 1px solid transparent; background: transparent;
  cursor: pointer; text-align: left; font: inherit; appearance: none;
  color: var(--pm-text-3);
  transition: color 150ms var(--pm-ease), background 150ms var(--pm-ease), border-color 150ms var(--pm-ease);
}
.kb__kit:hover { color: var(--pm-text); background: rgba(246,243,236,.035); }
.kb__kit-n {
  flex: 0 0 auto; width: 22px;
  font-family: var(--pm-font-mono); font-size: .6875rem; color: var(--pm-text-4);
}
.kb__kit-name {
  flex: 1 1 auto; min-width: 0;
  font-family: var(--ed-serif); font-size: 1.02rem; letter-spacing: -0.015em;
  color: inherit; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.kb__kit-p {
  flex: 0 0 auto; font-family: var(--pm-font-mono); font-size: .625rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--pm-text-4);
}
.kb__kit[aria-selected="true"] {
  color: var(--pm-text);
  background: linear-gradient(90deg, rgba(224,163,62,.14), rgba(224,163,62,.03));
  border-color: rgba(224,163,62,.3);
}
.kb__kit[aria-selected="true"] .kb__kit-n { color: var(--pm-accent); }
.kb__kit[aria-selected="true"] .kb__kit-p { color: var(--pm-text-3); }
.kb__kit[hidden] { display: none; }
.kb__note {
  margin-top: 10px; padding: 12px 12px 2px;
  border-top: 1px solid var(--pm-line);
  font-size: .75rem; line-height: 1.55; color: var(--pm-text-4);
}

/* --- the stage --------------------------------------------------------------------- */
.kb__stage { padding: clamp(16px, 2.2vw, 26px); min-width: 0; }
.kb-panel { display: grid; gap: clamp(20px, 2.4vw, 30px); grid-template-columns: minmax(0,1fr); }
@media (min-width: 1140px) {
  .kb-panel { grid-template-columns: minmax(0, 1.5fr) minmax(250px, 1fr); align-items: start; }
}
.kb-panel[hidden] { display: none; }
/* With JS off every panel stays on the page, ruled apart like catalogue entries. */
.kb-panel + .kb-panel { margin-top: 30px; padding-top: 30px; border-top: 1px solid var(--pm-line-2); }
html.js-on .kb-panel + .kb-panel { margin-top: 0; padding-top: 0; border-top: 0; }

.kb-view { position: relative; min-width: 0; }
.kb-view__halo {
  position: absolute; inset: auto 6% -16% 6%; height: 44%; z-index: 0; pointer-events: none;
  background: radial-gradient(50% 60% at 50% 50%, var(--kc), transparent 72%);
  filter: blur(52px); opacity: .3;
}
.kb-view .plate { position: relative; z-index: 1; }
.kb-shot {
  display: block; width: 100%; height: auto;
  aspect-ratio: 4 / 3; object-fit: cover; object-position: top center;
  background: #14130f;
}
.kb-pages { margin-top: 18px; }
.kb-pages__h {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  margin-bottom: 10px;
}
.kb-pages__h em {
  font-style: normal; font-family: var(--pm-font-mono); font-size: .625rem;
  letter-spacing: .06em; text-transform: none; color: var(--pm-text-4);
}
.kb-pagelist { display: flex; flex-wrap: wrap; gap: 6px; }
.kb-page {
  appearance: none; cursor: pointer; font: inherit;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .8125rem; letter-spacing: -0.008em;
  color: var(--pm-text-2); text-decoration: none;
  background: rgba(246,243,236,.03); border: 1px solid var(--pm-line);
  border-radius: 8px; padding: 5px 11px;
  transition: color 150ms var(--pm-ease), background 150ms var(--pm-ease), border-color 150ms var(--pm-ease);
}
.kb-page:hover { color: var(--pm-text); background: rgba(246,243,236,.06); border-color: var(--pm-line-2); }
.kb-page[aria-pressed="true"] {
  color: var(--pm-text); border-color: rgba(224,163,62,.55);
  background: rgba(224,163,62,.13);
}
.kb-page--link { color: var(--pm-text-3); }
.kb-page--link svg { opacity: .75; }

/* --- the meta column ---------------------------------------------------------------- */
.kb-meta { min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.kb-meta__eyebrow { display: flex; align-items: center; gap: 12px; }
.kb-meta__bar { width: 34px; height: 2px; border-radius: 2px; background: var(--kc); }
.kb-meta__price { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.kb-meta__eur {
  font-family: var(--ed-serif); font-size: 2rem; line-height: 1;
  letter-spacing: -0.032em; color: var(--pm-text);
}
.kb-feats { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.kb-feats li { display: flex; gap: 10px; font-size: .8438rem; line-height: 1.55; color: var(--pm-text-2); }
.kb-feats svg { flex: 0 0 auto; margin-top: 3px; color: var(--kc); }
.kb-meta__buttons { display: flex; flex-wrap: wrap; gap: 10px; }
.kb-meta__fine { font-size: .75rem; line-height: 1.6; color: var(--pm-text-4); }

/* live status for assistive tech when the preview swaps */
.kb-status { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Controls that need JS are suppressed only when JS is absent — the .js-on class is
   written by a synchronous inline script in <head>, and the panels themselves are
   never hidden by CSS. */
html:not(.js-on) .kb__top { display: none; }
html:not(.js-on) .kb__rail { display: none; }
/* the "click to preview" hint only makes sense while the switcher is live */
html:not(.js-on) .kb-pages__h em { display: none; }
/* With the rail gone the two-track grid would squeeze every panel into the 274px
   column, so collapse the browser to one column whenever the rail is not there. */
@media (min-width: 960px) {
  html:not(.js-on) .kb__body { grid-template-columns: minmax(0, 1fr); }
}

/* =====================================================================================
   23  THE SIX-VARIABLE REBRAND — variant B's live demo, re-cut
   ===================================================================================== */
.rb { display: grid; gap: clamp(20px, 2.6vw, 32px); grid-template-columns: minmax(0,1fr); align-items: start; }
@media (min-width: 860px) { .rb { grid-template-columns: minmax(0,1fr) minmax(0,1fr); } }
.rb__swatches { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 20px; }
.rb__sw {
  width: 34px; height: 34px; border-radius: 9px; cursor: pointer; padding: 0;
  border: 1px solid rgba(246,243,236,.2); background: var(--c);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28);
  transition: transform 150ms var(--pm-ease), box-shadow 150ms var(--pm-ease);
}
.rb__sw:hover { transform: translateY(-2px); }
.rb__sw[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--pm-bg-1), 0 0 0 4px var(--pm-accent); }

.rb__code {
  margin: 18px 0 0; overflow-x: auto;
  font-family: var(--pm-font-mono); font-size: .6875rem; line-height: 1.85;
  background: #08080699; border: 1px solid var(--pm-line-2);
  border-radius: 11px; padding: 15px 16px;
  color: var(--pm-text-3);
  -webkit-overflow-scrolling: touch;
}
.rb__code b { color: var(--pm-text-2); font-weight: 400; }
.rb__code .v { color: var(--pm-accent-3); font-weight: 600; }
.rb__code .v i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; vertical-align: -1px; margin-right: 5px; border: 1px solid rgba(246,243,236,.3); }
.rb__code .c { color: var(--pm-text-4); }

/* the client mock — deliberately light: it is a client's site, not ours */
.rb__mock {
  --m-brand: #0f7a68; --m-soft: #e7f2ef; --m-acc: #b0541f; --m-r: 12px;
  background: #fbfaf6; color: #14161a;
}
.rb__mock * { transition: background-color 340ms var(--pm-ease), color 340ms var(--pm-ease), border-color 340ms var(--pm-ease), border-radius 340ms var(--pm-ease); }
@media (prefers-reduced-motion: reduce) { .rb__mock * { transition: none; } }
.rb__bar {
  display: flex; align-items: center; gap: 9px;
  padding: 11px 13px; border-bottom: 1px solid rgba(0,0,0,.09); background: #fff;
}
.rb__logo { display: flex; align-items: center; gap: 7px; font-size: .75rem; font-weight: 700; letter-spacing: -0.02em; }
.rb__logo i { width: 15px; height: 15px; border-radius: 4px; background: var(--m-brand); display: block; }
.rb__nav { margin-left: auto; display: flex; gap: 11px; font-size: .625rem; color: #5b6169; }
.rb__navbtn { font-size: .625rem; font-weight: 700; color: #fff; background: var(--m-brand); border-radius: calc(var(--m-r) - 6px); padding: 5px 11px; }
.rb__body { padding: 22px 20px 24px; }
.rb__pill {
  display: inline-block; font-size: .5625rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--m-brand); background: var(--m-soft); border-radius: 999px; padding: 4px 10px; margin-bottom: 12px;
}
.rb__mock h4 { margin: 0 0 7px; font-size: 1.2rem; letter-spacing: -0.03em; line-height: 1.14; color: #14161a; }
.rb__mock p { margin: 0 0 15px; font-size: .75rem; line-height: 1.55; color: #5b6169; }
.rb__row { display: flex; gap: 9px; align-items: center; flex-wrap: wrap; }
.rb__cta { font-size: .7188rem; font-weight: 700; color: #fff; background: var(--m-brand); border-radius: var(--m-r); padding: 9px 15px; }
.rb__ghost { font-size: .7188rem; font-weight: 600; color: var(--m-brand); border: 1px solid currentColor; border-radius: var(--m-r); padding: 8px 14px; }
.rb__badge { font-size: .625rem; font-weight: 700; color: var(--m-acc); }
.rb__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin-top: 17px; }
.rb__card { border: 1px solid rgba(0,0,0,.09); border-radius: var(--m-r); background: #fff; padding: 10px; }
.rb__card i { display: block; width: 18px; height: 18px; border-radius: 5px; background: var(--m-brand); opacity: .9; margin-bottom: 9px; }
.rb__card b { display: block; height: 5px; border-radius: 3px; background: rgba(0,0,0,.16); margin-bottom: 6px; width: 78%; }
.rb__card span { display: block; height: 5px; border-radius: 3px; background: rgba(0,0,0,.08); }

/* the mock lives inside a plate, so give the plate a light body */
.rb__plate { background: #fbfaf6; }

/* =====================================================================================
   24  MARGIN REPAIR for the new blocks (premium.css's .pm p rule outranks classes)
   ===================================================================================== */
.pm .ticket__foot { margin-top: 16px; }
.pm .ledger__foot p { margin: 0; }
.pm .kb__note { margin-top: 10px; }
.pm .kb-meta p { margin: 0; }
.pm .kb-meta__fine { margin: 0; }
.pm .rb__swatches { margin-top: 20px; }
.pm .rb__code { margin: 18px 0 0; }
.pm .rb__mock h4 { margin: 0 0 7px; }
.pm .rb__mock p { margin: 0 0 15px; }
.pm .callout p { margin: 0; }
.pm .maths__lead { margin-top: 22px; }
.pm .ledger-note { margin-top: 18px; }

/* =====================================================================================
   25  CONTRAST + BALANCE PASS (measured, not eyeballed)
   -------------------------------------------------------------------------------------
   --pm-text-4 on the plate chrome gradient lands at 4.39:1 and on the gold-tinted
   docket at 4.23:1 — both under AA for text this small. Both move up one step on the
   ramp, which measures 5.35:1 and 5.15:1 respectively.
   ===================================================================================== */
.plate__url  { color: var(--pm-text-3); }
.ticket__foot { color: var(--pm-text-3); }

/* Push the rail's footnote to the foot of the column so the sidebar reads as a
   deliberate block rather than a short list with a hole under it. */
.kb__rail { justify-content: flex-start; }
.pm .kb__note { margin-top: auto; }
.kb__note a { color: var(--pm-accent); text-decoration: underline; text-underline-offset: 2px; }