/* ============================================================================
   ESSENTIQA - Investor Deck
   Design system: "Maison Noir" - quiet-luxury editorial noir
   Type: Fraunces (display serif) + Hanken Grotesk (grotesque body/labels)
   Note: no em-dashes anywhere per project convention.
   ============================================================================ */

/* ---- Tokens ------------------------------------------------------------- */
:root {
  /* Ground + ink */
  --ink:        #0b0b0c;
  --ink-2:      #101012;
  --ink-3:      #16161a;
  --panel:      #131316;
  --bone:       #f4eee2;
  --bone-soft:  rgba(244, 238, 226, 0.72);
  --bone-dim:   rgba(244, 238, 226, 0.46);
  --bone-faint: rgba(244, 238, 226, 0.14);

  /* Champagne gold */
  --gold:        #c6a05c;
  --gold-bright: #e7c987;
  --gold-deep:   #8c6d33;
  --gold-line:   rgba(198, 160, 92, 0.30);
  --gold-glow:   rgba(198, 160, 92, 0.16);
  --metal:       linear-gradient(135deg, #efe2c2 0%, #c6a05c 38%, #8c6d33 72%, #d8bb7d 100%);
  --silver:      linear-gradient(135deg, #eef0f3 0%, #c7cbd1 45%, #8a8e95 100%);

  /* Scent colorways */
  --azure:   #6fa6cc;
  --rouge:   #9e2b38;
  --emeraude:#1f6b57;
  --cognac:  #a9743a;
  --ambre:   #cf9f54;

  /* Type */
  --display: "Fraunces", Georgia, "Times New Roman", serif;
  --body:    "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;

  /* Rhythm */
  --pad-x: clamp(2rem, 7vw, 8.5rem);
  --pad-y: clamp(2rem, 6vh, 5rem);
  --maxw:  1500px;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ---- Reset -------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  background: var(--ink);
  color: var(--bone);
  font-family: var(--body);
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0.01em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

::selection { background: var(--gold); color: var(--ink); }

/* Film-grain + vignette atmosphere over the whole canvas */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9000;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E");
  opacity: 0.035;
  mix-blend-mode: overlay;
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 8999;
  background: radial-gradient(120% 90% at 50% 0%, transparent 55%, rgba(0,0,0,0.55) 100%);
}

/* ---- Progress rail + nav ----------------------------------------------- */
.rail {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 0%;
  background: var(--metal);
  z-index: 9100;
  box-shadow: 0 0 12px var(--gold-glow);
}

/* ---- Slide shell -------------------------------------------------------- */
.slide {
  position: relative;
  min-height: 100vh;
  width: 100%;
  padding: calc(var(--pad-y) + 2.2rem) var(--pad-x) calc(var(--pad-y) + 2.4rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
  scroll-snap-align: start;
  border-bottom: 1px solid var(--bone-faint);
  overflow: hidden;
}
.slide__inner { width: 100%; max-width: var(--maxw); margin: 0 auto; }

/* slide chrome: eyebrow top-left, footer bottom */
.eyebrow {
  font-family: var(--body);
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--gold);
  display: inline-flex;
  align-items: center;
  margin-bottom: 1.6rem;
}

.slide__no {
  position: absolute;
  left: var(--pad-x);
  bottom: calc(var(--pad-y) - 0.2rem);
  font-size: 0.6rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--bone-dim);
}
.slide__tag {
  position: absolute;
  right: var(--pad-x);
  bottom: calc(var(--pad-y) - 0.2rem);
  font-size: 0.6rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--bone-dim);
}

/* ---- Typography --------------------------------------------------------- */
.display {
  font-family: var(--display);
  font-weight: 300;
  line-height: 1.02;
  letter-spacing: -0.015em;
  font-optical-sizing: auto;
}
h1.display { font-size: clamp(2.6rem, 6.4vw, 6.4rem); }
h2.display { font-size: clamp(2.1rem, 4.6vw, 4.4rem); }
h3.display { font-size: clamp(1.5rem, 2.6vw, 2.5rem); }

.display em { font-style: italic; color: var(--gold-bright); }
.display .thin { font-weight: 200; }

.lede {
  font-size: clamp(1.02rem, 1.45vw, 1.35rem);
  line-height: 1.62;
  color: var(--bone-soft);
  max-width: 46ch;
  font-weight: 300;
}
.fine { font-size: 0.92rem; color: var(--bone-soft); line-height: 1.6; font-weight: 300; }
.micro {
  font-size: 0.64rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--bone-dim);
}
.gold { color: var(--gold-bright); }
.serif-num { font-family: var(--display); font-weight: 300; font-feature-settings: "tnum"; }

/* hairline divider */
.hairline { height: 1px; background: var(--gold-line); border: 0; margin: 2rem 0; }
.hairline--full { background: linear-gradient(90deg, var(--gold-line), transparent); }

/* ---- Layout helpers ----------------------------------------------------- */
.grid { display: grid; gap: clamp(1.4rem, 3vw, 3rem); }
.cols-2 { grid-template-columns: repeat(2, 1fr); }
.cols-3 { grid-template-columns: repeat(3, 1fr); }
.cols-4 { grid-template-columns: repeat(4, 1fr); }
.split { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(2rem, 5vw, 5.5rem); align-items: center; }
.split--wide { grid-template-columns: 1fr 1.15fr; }
.stack > * + * { margin-top: 1.1rem; }
.mt-s { margin-top: 1.2rem; } .mt-m { margin-top: 2rem; } .mt-l { margin-top: 3rem; }

.product-object-wrap {
  display: grid;
  place-items: center;
  min-height: min(55vh, 520px);
  position: relative;
}
.product-object {
  width: min(92%, 720px);
  margin: 0;
  position: relative;
  isolation: isolate;
}
.product-object::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 1%;
  width: 76%;
  height: 20%;
  transform: translateX(-50%) rotate(-2deg);
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.82), transparent 72%);
  filter: blur(20px);
  opacity: 0.92;
  z-index: -2;
}
.product-object::after {
  content: "";
  position: absolute;
  inset: 8% 0 12%;
  background:
    radial-gradient(circle at 24% 42%, rgba(218, 178, 104, 0.24), transparent 22%),
    radial-gradient(circle at 60% 26%, rgba(255, 255, 255, 0.14), transparent 28%),
    radial-gradient(ellipse at center, rgba(178, 131, 65, 0.14), transparent 58%);
  filter: blur(22px);
  opacity: 0.78;
  z-index: -1;
}
.product-object img {
  width: 100%;
  display: block;
  filter: drop-shadow(0 30px 36px rgba(0, 0, 0, 0.62));
}
.product-object--car-box {
  width: min(88%, 660px);
  transform: translateY(1vh);
}

.status-products {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  align-items: start;
  gap: clamp(0.65rem, 1.5vh, 1rem);
  min-height: min(50vh, 455px);
}
.status-products__top {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
  justify-items: center;
  gap: clamp(0.35rem, 1.1vw, 0.85rem);
  width: min(100%, 430px);
  justify-self: center;
}
.status-product,
.status-swatches {
  position: relative;
  margin: 0;
  display: grid;
  place-items: center;
}
.status-product::before,
.status-swatches::before {
  content: "";
  position: absolute;
  inset: auto 13% 4%;
  height: 18%;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.78), transparent 72%);
  filter: blur(18px);
  z-index: -1;
}
.status-product::after {
  content: "";
  position: absolute;
  inset: 8% 4% 16%;
  background: radial-gradient(circle at 50% 42%, rgba(231, 201, 135, 0.16), transparent 58%);
  filter: blur(22px);
  z-index: -1;
}
.status-product img {
  width: min(100%, 214px);
  display: block;
  filter: drop-shadow(0 28px 30px rgba(0, 0, 0, 0.62));
}
.status-product--rounded img { transform: translateY(-0.35rem); }
.status-product--octagon img { width: min(100%, 218px); transform: translateY(-0.35rem); }
.status-swatches { transform: translateY(0.45rem); }
.status-swatches img {
  width: min(100%, 500px);
  display: block;
  filter: drop-shadow(0 22px 24px rgba(0, 0, 0, 0.56));
}

/* ---- Metrics ------------------------------------------------------------ */
.metric { display: flex; flex-direction: column; gap: 0.35rem; }
.metric__val {
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(2.4rem, 4.4vw, 4rem);
  line-height: 0.98;
  letter-spacing: -0.02em;
  color: var(--bone);
}
.metric__val sup { font-size: 0.42em; color: var(--gold); vertical-align: super; }
.metric__label {
  font-size: 0.66rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--bone-dim);
  max-width: 22ch;
}
.metric--gold .metric__val { color: var(--gold-bright); }

.metric-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
.metric-row .metric { padding-left: 1.4rem; border-left: 1px solid var(--gold-line); }

/* ---- Cards / panels ----------------------------------------------------- */
.card {
  background: linear-gradient(165deg, var(--panel), var(--ink-2));
  border: 1px solid var(--bone-faint);
  border-radius: 2px;
  padding: clamp(1.4rem, 2vw, 2.1rem);
  position: relative;
  transition: border-color 0.5s var(--ease), transform 0.5s var(--ease);
}
.card:hover { border-color: var(--gold-line); transform: translateY(-3px); }
.card__k { font-family: var(--display); font-size: 1.5rem; font-weight: 300; color: var(--gold-bright); }
.card h3 { font-size: 0.96rem; font-weight: 600; letter-spacing: 0.01em; margin-bottom: 0.5rem; }
.card p { font-size: 0.86rem; color: var(--bone-soft); font-weight: 300; line-height: 1.55; }

.tile-no {
  font-family: var(--display);
  font-size: 0.95rem;
  color: var(--gold);
  font-weight: 400;
}

/* ---- Data tables -------------------------------------------------------- */
.dtable { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.dtable th, .dtable td { text-align: left; padding: 0.72rem 0.4rem; border-bottom: 1px solid var(--bone-faint); }
.dtable th {
  font-size: 0.6rem; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--bone-dim); font-weight: 600;
}
.dtable td { color: var(--bone-soft); font-weight: 300; }
.dtable .num { text-align: right; font-variant-numeric: tabular-nums; color: var(--bone); }
.dtable tr.total td { border-top: 1px solid var(--gold-line); border-bottom: none; color: var(--bone); font-weight: 500; padding-top: 0.95rem; }
.dtable tr.total .num { color: var(--gold-bright); font-family: var(--display); font-size: 1.2rem; }

/* ---- Scent swatches ----------------------------------------------------- */
.scent { position: relative; padding-top: 1.5rem; }
.scent::before {
  content: ""; position: absolute; top: 0; left: 0;
  width: 46px; height: 3px; border-radius: 2px;
  background: var(--c, var(--gold));
  box-shadow: 0 0 16px var(--c, var(--gold));
}
.scent__name { font-family: var(--display); font-size: 1.35rem; font-weight: 400; line-height: 1.1; }
.scent__ru { font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--bone-dim); margin-top: 0.25rem; }
.scent__notes { font-size: 0.8rem; color: var(--bone-soft); font-weight: 300; margin-top: 0.7rem; line-height: 1.5; }

/* ---- Home diffuser figure + signature list ----------------------------- */
.diffuser-figure { position: relative; margin: 0; display: flex; justify-content: center; align-items: center; }
.diffuser-figure::before {
  content: ""; position: absolute; left: 50%; top: 52%; transform: translate(-50%, -50%);
  width: 86%; height: 72%;
  background: radial-gradient(ellipse at center, rgba(31, 107, 87, 0.22), rgba(198, 160, 92, 0.06) 45%, transparent 72%);
  filter: blur(28px); z-index: 0;
}
.diffuser-figure img { position: relative; z-index: 1; max-height: 64vh; width: auto; max-width: 100%; display: block; filter: drop-shadow(0 34px 48px rgba(0, 0, 0, 0.62)); }

.scentlist { display: grid; }
.scentrow { display: grid; grid-template-columns: auto 1fr; gap: 0.95rem; align-items: start; padding: 0.62rem 0; border-top: 1px solid var(--bone-faint); }
.scentrow:first-child { border-top: 0; }
.scentrow__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--c, var(--gold)); box-shadow: 0 0 10px var(--c, var(--gold)); margin-top: 0.5rem; }
.scentrow__txt { display: flex; flex-direction: column; gap: 0.12rem; }
.scentrow__name { font-family: var(--display); font-weight: 400; font-size: 1.08rem; color: var(--bone); line-height: 1.1; }
.scentrow__notes { font-size: 0.76rem; color: var(--bone-soft); font-weight: 300; line-height: 1.4; }

.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.chip {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: 0.66rem; letter-spacing: 0.06em;
  padding: 0.4rem 0.8rem 0.4rem 0.6rem;
  border: 1px solid var(--bone-faint); border-radius: 999px;
  color: var(--bone-soft);
}
.chip i { width: 9px; height: 9px; border-radius: 50%; background: var(--c, var(--gold)); display: inline-block; }

/* ---- Positioning map ---------------------------------------------------- */
.posmap {
  position: relative;
  aspect-ratio: 1 / 0.82;
  border-left: 1px solid var(--gold-line);
  border-bottom: 1px solid var(--gold-line);
  margin: 1.5rem 0 0.5rem;
}
.posmap__yl, .posmap__xl {
  position: absolute; font-size: 0.58rem; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--bone-dim);
}
.posmap__yl { top: -0.2rem; left: -0.6rem; transform: rotate(-90deg); transform-origin: left; white-space: nowrap; }
.posmap__yl.end { top: auto; bottom: 0.4rem; }
.posmap__xl { bottom: -1.5rem; }
.posmap__xl.start { left: 0; }
.posmap__xl.end { right: 0; }
.dot {
  position: absolute; transform: translate(-50%, 50%);
  display: flex; flex-direction: column; align-items: center; gap: 0.3rem;
}
.dot i { width: 8px; height: 8px; border-radius: 50%; background: var(--bone-dim); }
.dot span { font-size: 0.62rem; color: var(--bone-dim); white-space: nowrap; letter-spacing: 0.04em; }
.dot--us i { width: 14px; height: 14px; background: var(--metal); box-shadow: 0 0 22px var(--gold); }
.dot--us span { color: var(--gold-bright); font-weight: 600; letter-spacing: 0.12em; }

/* ---- Margin bars -------------------------------------------------------- */
.bar { margin: 1.1rem 0; }
.bar__top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 0.45rem; }
.bar__name { font-size: 0.82rem; color: var(--bone); }
.bar__pct { font-family: var(--display); font-size: 1.25rem; color: var(--gold-bright); font-weight: 300; }
.bar__track { height: 6px; background: var(--ink-3); border-radius: 3px; overflow: hidden; }
.bar__fill { height: 100%; width: 0; background: var(--metal); border-radius: 3px; transition: width 1.1s var(--ease); }
.slide.in .bar__fill { width: var(--w, 0%); }

/* ---- Image grid (brand world) ------------------------------------------- */
.brand-hero {
  min-height: 100vh; display: grid; place-items: center; text-align: center;
  background:
    radial-gradient(60% 60% at 50% 42%, rgba(198,160,92,0.10), transparent 70%),
    var(--ink);
}
.brand-hero .wordmark {
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(3rem, 11vw, 10rem);
  letter-spacing: 0.18em;
  text-indent: 0.18em;
  background: var(--metal);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1;
}
.brand-hero .estab { margin-top: 1.4rem; font-size: 0.7rem; letter-spacing: 0.5em; text-transform: uppercase; color: var(--bone-dim); text-indent: 0.5em; }

/* ---- Brand-world mosaic (full-bleed luxury product grid) ---------------- */
.slide--mosaic { height: 100vh; padding: 16px 16px 42px; }
.mosaic {
  flex: 1; min-height: 0; width: 100%;
  display: flex;
  gap: 8px;
}
.mcol { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.mcol .tile { min-height: 0; flex-basis: 0; }
.mosaic .tile {
  position: relative; overflow: hidden; border-radius: 6px; margin: 0;
  border: 1px solid var(--bone-faint);
  background:
    radial-gradient(150% 130% at 28% 16%, rgba(198,160,92,0.07), transparent 58%),
    linear-gradient(155deg, var(--ink-3), var(--ink-2));
  transition: border-color 0.5s var(--ease), transform 0.5s var(--ease);
}
.mosaic .tile:hover { border-color: var(--gold-line); transform: translateY(-2px); }
.mosaic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mosaic .tile--mini-grid {
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  gap: 6px;
  padding: 6px;
}
.mosaic .tile--mini-grid img {
  min-height: 0;
  border-radius: 4px;
  border: 1px solid rgba(245, 238, 220, 0.08);
}
/* keep the corner chrome visible, tucked into the thin frame */
.slide--mosaic .slide__no { left: 18px; bottom: 16px; }
.slide--mosaic .slide__tag { right: 18px; bottom: 16px; }
/* elegant wordmark overlaid over the grid, images behind */
.mosaic__center { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; z-index: 4; }
.mosaic__center::before {
  content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(58%, 700px); height: min(46%, 360px);
  background: radial-gradient(ellipse at center, rgba(11,11,12,0.60) 0%, rgba(11,11,12,0.26) 46%, transparent 72%);
}
.mosaic__word {
  position: relative;
  font-family: var(--display); font-weight: 300; line-height: 1;
  font-size: clamp(1.5rem, 2.5vw, 2.4rem);
  letter-spacing: 0.24em; text-indent: 0.24em;
  background: var(--metal); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 22px rgba(0, 0, 0, 0.55));
}

/* ---- Cover -------------------------------------------------------------- */
.cover { justify-content: space-between; }
/* cover fits exactly one viewport - modest symmetric padding, no overflow */
.slide.cover { padding-top: clamp(2rem, 4.5vh, 3.4rem); padding-bottom: clamp(2rem, 4.5vh, 3.4rem); }
.slide.cover .slide__no, .slide.cover .slide__tag { display: none; }
.cover__top { display: flex; justify-content: space-between; align-items: flex-start; }
.cover__chev img { height: 26px; }
.cover__mid { margin: auto 0; }
.cover__title {
  font-family: var(--display); font-weight: 200;
  font-size: clamp(3.2rem, 9vw, 9rem); line-height: 0.96; letter-spacing: 0.02em;
}
.cover__title strong { font-weight: 400; font-style: italic; color: var(--gold-bright); }
.cover__sub { margin-top: 1.8rem; font-size: clamp(1rem, 1.7vw, 1.5rem); color: var(--bone-soft); font-weight: 300; max-width: 40ch; }
.cover__bottom { display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem; }
/* investor name on the cover */
.cover__for { margin-top: 2.6rem; display: flex; flex-direction: column; align-items: center; gap: 0.6rem; }
.cover__for::before { content: ""; width: 36px; height: 1px; background: var(--gold-line); margin-bottom: 0.3rem; }
.cover__for-name { font-family: var(--display); font-weight: 300; font-size: clamp(1.25rem, 2vw, 1.75rem); letter-spacing: 0.01em; color: var(--gold-bright); }

/* centred cover variant */
.cover__mid--center { text-align: center; display: flex; flex-direction: column; align-items: center; }
.cover__mid--center .cover__sub { max-width: 48ch; }
.wordmark-metal {
  font-family: var(--display); font-weight: 300; line-height: 1;
  font-size: clamp(3rem, 10vw, 8.5rem);
  letter-spacing: 0.16em; text-indent: 0.16em;
  background: var(--metal);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ---- Operator / why-us step list --------------------------------------- */
.steps { counter-reset: s; display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.2rem 3rem; }
.step { display: grid; grid-template-columns: auto 1fr; gap: 1rem; padding: 0.85rem 0; border-bottom: 1px solid var(--bone-faint); align-items: baseline; }
.step::before {
  counter-increment: s; content: counter(s, decimal-leading-zero);
  font-family: var(--display); font-size: 0.95rem; color: var(--gold); min-width: 1.8rem;
}
.step b { font-weight: 600; font-size: 0.92rem; }
.step span { display: block; font-size: 0.78rem; color: var(--bone-dim); font-weight: 300; margin-top: 0.15rem; }

.versus { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 1px solid var(--bone-faint); }
.versus > div { padding: clamp(1.2rem, 2vw, 2rem); }
.versus > div + div { border-left: 1px solid var(--gold-line); }
.versus h4 { font-size: 0.64rem; letter-spacing: 0.24em; text-transform: uppercase; margin-bottom: 1rem; }
.versus .them h4 { color: var(--bone-dim); }
.versus .us h4 { color: var(--gold); }
.versus li { list-style: none; font-size: 0.84rem; padding: 0.5rem 0; color: var(--bone-soft); font-weight: 300; border-bottom: 1px solid var(--bone-faint); }
.versus li:last-child { border-bottom: 0; }
.versus .us li { color: var(--bone); }

/* credibility grid (2x2 bordered) */
.proofgrid { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--bone-faint); }
.proofgrid > div { padding: clamp(1.5rem, 2.6vw, 2.8rem); }
.proofgrid > div:nth-child(odd) { border-right: 1px solid var(--gold-line); }
.proofgrid > div:nth-child(1), .proofgrid > div:nth-child(2) { border-bottom: 1px solid var(--gold-line); }
.proofgrid h4 { font-family: var(--display); font-weight: 400; font-size: clamp(1.2rem, 1.7vw, 1.5rem); color: var(--gold-bright); margin-bottom: 0.6rem; }
.proofgrid p { font-size: 0.9rem; color: var(--bone-soft); font-weight: 300; line-height: 1.55; }

/* about-us: capability list + stat column */
.caplist { display: grid; }
.cap { padding: 0.7rem 0; border-top: 1px solid var(--bone-faint); }
.cap b { display: block; font-weight: 600; font-size: 0.9rem; color: var(--bone); }
.cap span { display: block; font-size: 0.78rem; color: var(--bone-dim); font-weight: 300; margin-top: 0.15rem; }
.statcards { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 14px; height: 100%; }
.statcard {
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(1.15rem, 1.9vw, 1.9rem);
  border: 1px solid var(--bone-faint); border-radius: 8px;
  background: linear-gradient(165deg, var(--ink-3), var(--ink-2));
  transition: border-color 0.4s ease, transform 0.4s ease;
}
.statcard:hover { border-color: var(--gold-line); transform: translateY(-3px); }
.statcard .metric__val { display: block; font-size: clamp(1.9rem, 2.8vw, 2.7rem); line-height: 1; }
.statcard .metric__label { display: block; margin-top: 0.5rem; }

/* evidence slots - drop-in analysis screenshots */
.evidence { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; flex: 1; min-height: 0; }
.evidence--6 { grid-template-columns: repeat(3, 1fr); grid-template-rows: 1fr 1fr; }
.evtile {
  min-height: 0; margin: 0; border-radius: 6px; overflow: hidden;
  border: 1px solid var(--bone-faint);
  background:
    repeating-linear-gradient(45deg, rgba(198,160,92,0.035) 0 14px, transparent 14px 28px),
    linear-gradient(155deg, var(--ink-3), var(--ink-2));
  display: grid; place-items: center; text-align: center; padding: 0.8rem;
}
.evtile span { font-size: 0.62rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--bone-dim); }
.evtile img { width: 100%; height: 100%; object-fit: cover; }

/* ---- Competitor breakdown ---------------------------------------------- */
.compgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; flex: 1; min-height: 0; }
.compcard {
  display: flex; flex-direction: column; min-height: 0;
  border: 1px solid var(--bone-faint); border-radius: 8px;
  padding: clamp(0.85rem, 1.4vw, 1.35rem);
  background: linear-gradient(165deg, var(--ink-3), var(--ink-2));
}
.compcard--filled {
  border-color: var(--gold-line);
  background: linear-gradient(165deg, rgba(198, 160, 92, 0.07), var(--ink-2));
  box-shadow: 0 0 34px rgba(0, 0, 0, 0.4);
}
.compcard--empty { opacity: 0.42; }
.compcard--us-rival { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold-line), 0 0 40px rgba(198, 160, 92, 0.12); }
.compcard--us-rival .compcard__tier { color: var(--gold-bright); }
.compcard__tier { font-size: 0.56rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); }
.compcard__brand { font-family: var(--display); font-weight: 400; font-size: clamp(1.35rem, 2vw, 1.85rem); color: var(--bone); margin: 0.25rem 0 0.15rem; line-height: 1; }
.compcard__sub { font-size: 0.7rem; color: var(--bone-dim); font-weight: 300; }
.compcard__hero { margin: 0.75rem 0; padding: 0.7rem 0; border-top: 1px solid var(--gold-line); border-bottom: 1px solid var(--bone-faint); }
.compcard__heroval {
  display: block; font-family: var(--display); font-weight: 300; line-height: 1;
  font-size: clamp(1.8rem, 2.9vw, 2.6rem);
  background: var(--metal); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.compcard--empty .compcard__heroval { background: none; -webkit-text-fill-color: var(--bone-dim); color: var(--bone-dim); }
.compcard__herolab { display: block; margin-top: 0.35rem; font-size: 0.58rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--bone-dim); }
.compstats { margin: 0; display: grid; }
.compstats > div { display: flex; justify-content: space-between; align-items: baseline; gap: 0.6rem; padding: 0.4rem 0; border-top: 1px solid var(--bone-faint); }
.compstats > div:first-child { border-top: 0; }
.compstats dt { font-size: 0.7rem; color: var(--bone-dim); font-weight: 300; white-space: nowrap; }
.compstats dd { margin: 0; font-size: 0.86rem; color: var(--bone); font-weight: 400; text-align: right; font-variant-numeric: tabular-nums; }
.compstats dd span { color: var(--bone-dim); font-size: 0.78em; }
.compcard__take { margin: auto 0 0; padding-top: 0.7rem; font-size: 0.74rem; line-height: 1.45; color: var(--bone-soft); font-weight: 300; font-style: italic; }
.compcard--filled .compcard__take { color: var(--gold-bright); }

/* ---- The partnership: convergence + capital-flow timeline -------------- */
/* This slide is given room to breathe: the inner column fills the canvas, the
   editorial header puts the lede beside the headline, and the two diagrams
   stretch to equal height so neither side strands empty space. */
.slide--partner .slide__inner { display: flex; flex-direction: column; gap: clamp(1.8rem, 4.5vh, 4rem); }

/* editorial header: headline left, intro bottom-right, hairline beneath */
.jvhead {
  display: grid; grid-template-columns: 1.12fr 0.88fr;
  gap: clamp(2rem, 5vw, 5.5rem); align-items: end;
  padding-bottom: clamp(1.5rem, 3.2vh, 2.6rem);
  border-bottom: 1px solid var(--bone-faint);
}
.jvhead__title .eyebrow { margin-bottom: clamp(1rem, 2vh, 1.6rem); }
.jvhead__lede { margin: 0; max-width: 50ch; }

/* body: two matched diagrams, equal height, split by a hairline */
.jvgrid {
  display: grid; grid-template-columns: 1fr 1fr;
  align-items: start;
}
.jvcol { display: flex; flex-direction: column; min-height: 0; }
.jvcol--structure { padding-right: clamp(2.2rem, 5vw, 6rem); }
.jvcol--flow { padding-left: clamp(2.2rem, 5vw, 6rem); border-left: 1px solid var(--bone-faint); }
.jvgrid__label { margin-bottom: clamp(1.1rem, 2.6vh, 2rem); }

/* the structure: two equal halves, then the company they form (no connectors) */
.jvflow { display: flex; flex-direction: column; align-items: stretch; gap: clamp(0.9rem, 1.4vw, 1.5rem); }
.jvflow__pair { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(0.9rem, 1.4vw, 1.5rem); }

.jvparty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: 0.45rem;
  padding: clamp(1.2rem, 1.9vw, 1.9rem) clamp(1rem, 1.6vw, 1.6rem);
  border: 1px solid var(--gold-line); border-radius: 14px;
  background: linear-gradient(155deg, var(--ink-3), var(--ink-2));
}
.jvparty--a { background: linear-gradient(155deg, rgba(198, 160, 92, 0.20), rgba(198, 160, 92, 0.035)); }
.jvparty__name { font-size: 0.66rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--bone-dim); }
.jvparty__pct { font-family: var(--display); font-weight: 300; font-size: clamp(2.3rem, 3.2vw, 3.3rem); line-height: 1; color: var(--bone); }
.jvparty--a .jvparty__pct { color: var(--gold-bright); }
.jvparty__role { font-size: clamp(0.76rem, 0.95vw, 0.86rem); color: var(--bone-soft); font-weight: 300; line-height: 1.45; max-width: 24ch; }

/* the unified company */
.jvparty--whole {
  position: relative; gap: 0.4rem; padding: clamp(1.4rem, 2.3vw, 2.3rem) clamp(1.2rem, 1.9vw, 2rem);
  border-color: rgba(198, 160, 92, 0.45);
  background: linear-gradient(160deg, rgba(198, 160, 92, 0.12), var(--ink-2) 70%);
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.4), inset 0 0 0 1px rgba(231, 201, 135, 0.06);
}
.jvparty__tag { font-size: 0.58rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); }
.jvparty__name--lg { font-family: var(--display); font-weight: 400; font-size: clamp(1.5rem, 2.1vw, 2.05rem); text-transform: none; letter-spacing: 0; color: var(--bone); line-height: 1.1; }
.jvparty__pct--lg { font-size: clamp(2.7rem, 3.8vw, 3.9rem); color: var(--gold-bright); }
.jvparty--whole .jvparty__role { max-width: 32ch; font-size: clamp(0.78rem, 0.98vw, 0.88rem); }

/* capital-flow timeline */
.flowline { list-style: none; margin: 0; padding: 0; }
.flowline__step { position: relative; display: grid; grid-template-columns: auto 1fr; gap: clamp(1.1rem, 1.5vw, 1.7rem); padding-bottom: clamp(1.3rem, 2.4vh, 1.9rem); }
.flowline__step:last-child { padding-bottom: 0; }
.flowline__step::before {
  content: ""; position: absolute; left: 16px; top: 38px; bottom: 0; width: 1px;
  background: linear-gradient(var(--gold-line), var(--bone-faint));
}
.flowline__step:last-child::before { display: none; }
.flowline__no {
  position: relative; z-index: 1; align-self: start;
  width: 33px; height: 33px; flex: none;
  display: grid; place-items: center;
  border: 1px solid var(--gold-line); border-radius: 50%; background: var(--ink);
  font-family: var(--display); font-size: 0.88rem; color: var(--gold-bright);
}
.flowline__body { padding-top: 0.3rem; max-width: 42ch; }
.flowline__body b { font-weight: 600; font-size: clamp(0.95rem, 1.15vw, 1.08rem); color: var(--bone); }
.flowline__body span { display: block; font-size: clamp(0.82rem, 1vw, 0.92rem); color: var(--bone-dim); font-weight: 300; line-height: 1.5; margin-top: 0.3rem; }

/* partnership: stack cleanly on narrow screens */
@media screen and (max-width: 880px) {
  .jvhead { grid-template-columns: 1fr; gap: 1.3rem; align-items: start; }
  .jvgrid { grid-template-columns: 1fr; gap: 2.2rem; }
  .jvcol--structure { padding-right: 0; }
  .jvcol--flow { padding-left: 0; border-left: 0; border-top: 1px solid var(--bone-faint); padding-top: 2.2rem; }
}

/* ---- The numbers: light, full-width data sheet (slide 21) ------------- */
.slide--sheet {
  --s-bg:       #f5f2ea;
  --s-ink:      #16161a;
  --s-ink-2:    #4c4840;
  --s-muted:    #857d6f;
  --s-line:     rgba(20, 20, 22, 0.10);
  --s-line-mid: rgba(20, 20, 22, 0.28);
  --s-acc:      #8c6d33;
  background: var(--s-bg);
  color: var(--s-ink);
  justify-content: flex-start;
  height: auto;
  overflow: visible;
  position: relative;
  z-index: 9050;                 /* sit above the global grain + vignette overlays */
}
.slide--sheet .slide__inner { display: flex; flex-direction: column; }
.slide--sheet .slide__no, .slide--sheet .slide__tag { color: rgba(20, 20, 22, 0.4); }

.sheet__head { margin-bottom: 2rem; }
.sheet__logo { display: block; height: 22px; filter: brightness(0); opacity: 0.86; }

.sheet { display: flex; flex-direction: column; gap: 2.6rem; }
.sheet__row { display: grid; grid-template-columns: 1.32fr 0.68fr; gap: 3rem; align-items: start; }

.numblock__head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: 0.6rem; }
.numblock__title { font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 700; color: var(--s-ink); }
.numblock__note { font-size: 0.8rem; color: var(--s-muted); font-weight: 400; text-align: right; }

.numtable { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.numtable th, .numtable td { padding: 0.62rem 0.85rem; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.numtable th:first-child, .numtable td:first-child { text-align: left; padding-left: 0.2rem; white-space: normal; }
.numtable th:last-child, .numtable td:last-child { padding-right: 0.2rem; }
.numtable thead th { font-size: 0.7rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--s-muted); font-weight: 600; border-bottom: 1.5px solid var(--s-line-mid); padding-top: 0; padding-bottom: 0.55rem; }
.numtable tbody td { color: var(--s-ink); border-bottom: 1px solid var(--s-line); }
.numtable tbody td:first-child { color: var(--s-ink-2); }
.numtable tbody tr:last-child td { border-bottom: 0; }
.numtable .neg { color: var(--s-muted); }
.numtable .pos { color: var(--s-acc); font-weight: 600; }
.numtable .grp td { font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--s-muted); font-weight: 700; padding: 1.05rem 1rem 0.3rem 0.2rem; border-bottom: 0; }
.numtable .row-sub td { font-weight: 600; color: var(--s-ink); border-bottom: 1.5px solid var(--s-line-mid); }
.numtable .row-total td { font-weight: 700; color: var(--s-ink); border-top: 1.5px solid var(--s-line-mid); border-bottom: 0; padding-top: 0.7rem; }

.sheet__foot { margin-top: 2.2rem; padding-top: 1.2rem; border-top: 1px solid var(--s-line); font-size: 0.74rem; line-height: 1.6; color: var(--s-muted); font-weight: 400; max-width: 160ch; }
.sheet__foot b { color: var(--s-acc); font-weight: 700; }

/* ---- Close slide: letterhead framing ---------------------------------- */
.close__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 2rem; }
.close__motto { color: var(--bone-soft); }
.close__mail { color: var(--gold); text-decoration: none; transition: color 0.3s var(--ease); }
.close__mail:hover { color: var(--gold-bright); }
.close__mid { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
/* pin the wordmark's right edge to --pad-x so it lines up with the bottom-right
   slide tag ("The investment"); .slide__inner is maxw-capped + centred and would
   otherwise fall short of the tag on wide screens. */
.close__bottom { position: absolute; right: calc(var(--pad-x) + 0.2rem); bottom: calc(var(--pad-y) + 1.5rem); display: flex; }
.close__logo { display: block; height: 26px; opacity: 0.3; }

/* ---- Investment options ------------------------------------------------ */
.opts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; flex: 1; min-height: 0; }
.optcard {
  display: flex; flex-direction: column; min-height: 0;
  border: 1px solid var(--bone-faint); border-radius: 10px;
  padding: clamp(1rem, 1.5vw, 1.5rem);
  background: linear-gradient(165deg, var(--ink-3), var(--ink-2));
}
.optcard--rec { border-color: var(--gold); background: linear-gradient(165deg, rgba(198, 160, 92, 0.08), var(--ink-2)); box-shadow: 0 0 40px rgba(198, 160, 92, 0.12); }
.optcard__badge { font-size: 0.56rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--bone-dim); }
.optcard--rec .optcard__badge { color: var(--gold-bright); }
.optcard__name { font-family: var(--display); font-weight: 400; font-size: clamp(1.3rem, 1.9vw, 1.7rem); color: var(--bone); margin: 0.2rem 0 0.1rem; line-height: 1; }
.optcard__sub { font-size: 0.74rem; color: var(--bone-dim); font-weight: 300; }
.optcard__total { margin: 0.85rem 0; padding: 0.7rem 0; border-top: 1px solid var(--gold-line); border-bottom: 1px solid var(--bone-faint); }
.optcard__totval { display: block; font-family: var(--display); font-weight: 300; font-size: clamp(1.9rem, 3vw, 2.7rem); line-height: 1; background: var(--metal); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.optcard__totlab { display: block; margin-top: 0.35rem; font-size: 0.58rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--bone-dim); }
.optcard__lines { margin: 0; display: grid; }
.optcard__lines > div { display: flex; justify-content: space-between; align-items: baseline; gap: 0.6rem; padding: 0.42rem 0; border-top: 1px solid var(--bone-faint); }
.optcard__lines > div:first-child { border-top: 0; }
.optcard__lines dt { font-size: 0.71rem; color: var(--bone-dim); font-weight: 300; }
.optcard__lines dd { margin: 0; font-size: 0.86rem; color: var(--bone); font-weight: 400; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.optcard__get { margin: auto 0 0; padding-top: 0.8rem; font-size: 0.76rem; line-height: 1.45; color: var(--bone-soft); font-weight: 300; }
.optcard--rec .optcard__get { color: var(--gold-bright); }

/* ---- Reveal animation --------------------------------------------------- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); }
.slide.in .reveal { opacity: 1; transform: none; }
.slide.in .reveal:nth-child(2) { transition-delay: 0.08s; }
.slide.in .reveal:nth-child(3) { transition-delay: 0.16s; }
.slide.in .reveal:nth-child(4) { transition-delay: 0.24s; }
.slide.in .reveal:nth-child(5) { transition-delay: 0.32s; }
.r-d1 { transition-delay: 0.12s; } .r-d2 { transition-delay: 0.22s; } .r-d3 { transition-delay: 0.32s; }
.r-d4 { transition-delay: 0.42s; } .r-d5 { transition-delay: 0.52s; } .r-d6 { transition-delay: 0.62s; }

/* ---- Responsive --------------------------------------------------------- */
@media screen and (max-width: 880px) {
  .split, .split--wide, .cols-2, .cols-3, .cols-4, .metric-row, .steps, .versus, .proofgrid { grid-template-columns: 1fr; }
  .evidence--6 { grid-template-columns: 1fr 1fr; }
  .proofgrid > div:nth-child(odd) { border-right: 0; }
  .proofgrid > div:nth-child(3) { border-bottom: 1px solid var(--gold-line); }
  .imgrid { grid-template-columns: repeat(2, 1fr); }
  .metric-row .metric { border-left: 0; padding-left: 0; }
  .slide { padding-left: 1.4rem; padding-right: 1.4rem; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
  .bar__fill { width: var(--w, 0%); }
}

/* ---- Print / PDF -------------------------------------------------------- */
@media print {
  @page { size: 1280px 720px; margin: 0; }
  html, body { background: var(--ink) !important; }
  body::after { display: none; }
  .rail, .hint { display: none !important; }
  .slide {
    width: 1280px; height: 720px; min-height: 0;
    page-break-after: always; break-after: page;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
    padding: 56px 84px;
    border-bottom: 0 !important;   /* kill the faint hairline that printed between pages */
  }
  /* no forced break after the final slide -> avoids a trailing blank page */
  .slide:last-of-type { page-break-after: auto; break-after: auto; }
  /* restore the on-screen atmosphere: the website lays a radial vignette + grain over the
     whole canvas (body::before/::after), which print stripped, leaving a flat black that
     reads lighter than the site. Re-apply the same vignette per dark page so the PDF black
     has the site's depth. (Child images on cover/mosaic sit on top, so this is invisible there.) */
  .slide:not(.slide--sheet) {
    background-color: var(--ink);
    background-image: radial-gradient(120% 90% at 50% 0%, transparent 55%, rgba(0,0,0,0.55) 100%);
  }
  .slide--mosaic { padding: 16px 16px 42px !important; }
  /* the numbers sheet runs over one page: page 1 = unit econ + launch capital (the
     side-by-side row), page 2 = the first-launch-cycle P&L. Clean 2-page split. */
  .slide--sheet { height: auto !important; min-height: 1440px; z-index: auto; background: #f5f2ea !important; }
  .slide--sheet .numblock { break-inside: avoid; }
  .slide--sheet .sheet > .numblock { break-before: page; page-break-before: always; }
  /* the absolute bottom chrome on the flowing sheet spills onto a 3rd page; drop it in print */
  .slide--sheet .slide__no, .slide--sheet .slide__tag { display: none !important; }
  /* compact the sheet tables a touch so the P&L + its padding fits one page (no spill) */
  .slide--sheet .numtable { font-size: 0.84rem; }
  .slide--sheet .numtable th, .slide--sheet .numtable td { padding: 0.46rem 0.85rem; }
  .slide--sheet .numtable .grp td { padding-top: 0.6rem; }
  /* gradient-clipped metal text (background-clip:text) does not clip reliably in the
     print engine and renders as a solid block; fall back to solid gold for PDF. */
  .wordmark-metal, .brand-hero .wordmark, .mosaic__word, .compcard__heroval, .optcard__totval {
    background: none !important;
    -webkit-text-fill-color: var(--gold-bright) !important;
    color: var(--gold-bright) !important;
  }
  .reveal { opacity: 1 !important; transform: none !important; }
  .bar__fill { width: var(--w, 0%) !important; }
  /* Chrome exports every box-shadow blur as a soft-mask gradient, and Preview re-renders those
     as blocky banded halos: the gold card glow became a tan diagonal band (page 12/18), and the
     scent dots' coloured glow turned the little circles into ugly coloured SQUARES (page 7).
     Box-shadows are purely decorative here, so kill them all in print - borders/fills/round
     shapes carry the design, exactly like the screen version minus the (banded) glow.
     drop-shadow() filters (e.g. the diffuser product shadow) are unaffected and render cleanly. */
  * { box-shadow: none !important; }
  .compcard--us-rival, .optcard--rec { border-color: var(--gold) !important; }   /* keep the emphasis ring as a crisp border */
  /* Dense slides are authored for a tall (100vh) viewport and overflow a 720px page,
     clipping the eyebrow at the top and the footnote at the bottom. Scale the whole inner
     down uniformly so everything stays - same layout, just smaller - and stays centred.
     (The page-number/tag chrome sits on .slide, outside .slide__inner, so it is unaffected.) */
  [data-name="Proven market"] .slide__inner { transform: scale(0.80); transform-origin: center center; }   /* inner ~735px -> ~588px */
  [data-name="The model"] .slide__inner       { transform: scale(0.90); transform-origin: center center; }   /* lift the cramped footnote off the chrome */
  [data-name="Unit economics"] .slide__inner  { transform: scale(0.95); transform-origin: center center; }
  [data-name="Why launch with us"] .slide__inner { transform: scale(0.90); transform-origin: center center; }  /* compact the bento, per client */
  /* page 9 disclaimer: was a sprawling full-width strip - shrink it and centre it on the page */
  [data-name="Unit economics"] p.micro.mt-m {
    font-size: 0.58rem;
    text-align: center;
    max-width: 80ch;
    margin-left: auto; margin-right: auto;
    opacity: 0.6;
  }
  /* page 12 disclaimer: centre it (same spot, just centred) so the short 2nd line sits centred */
  [data-name="Proven market"] p.micro {
    text-align: center;
    max-width: 108ch;
    margin-left: auto; margin-right: auto;
  }
  /* Preview posterises the subtle dark-on-dark card gradients (linear-gradient(165deg, ink-3,
     ink-2)) into a near-vertical banding seam - the "stripe" through the page-15 statcards.
     Flatten the card backgrounds to a solid fill in print: no gradient, no banding. The film
     grain that dithers these on screen is print-stripped, so solid is the clean equivalent. */
  .statcard, .compcard, .optcard { background: #131317 !important; }
  .compcard--filled, .optcard--rec { background: #181410 !important; }   /* keep the faint warm cast */
}