/* ============================================================
   ZELIX LABS · respond.io onboarding
   Quiet-luxury design system. Built to the canonical brief:
   5 colour tokens, 3 type families, each with one role.
   ============================================================ */

:root {
  /* Palette: Zelix Labs brand. Navy ink, teal->cyan accent, cool cream.
     Token names kept (--sage etc.) so the design system maps 1:1. */
  --ink: #0A1628;
  --cream: #FAFBFC;
  --sage: #00B4D8;
  --sage-dark: #0089A7;
  --cyan: #00D4AA;
  --whatsapp: #25D366;

  /* Signature teal->cyan gradient (the Zelix brand mark). */
  --gradient: linear-gradient(135deg, #00B4D8, #00D4AA);
  --gradient-dark: linear-gradient(135deg, #0098B8, #00B58F);

  /* Ink (navy) as alpha (never their own tokens). */
  --line: rgba(10, 22, 40, 0.12);
  --line-soft: rgba(10, 22, 40, 0.07);
  --muted: rgba(10, 22, 40, 0.60);
  --faint: rgba(10, 22, 40, 0.42);
  --sage-tint: rgba(0, 180, 216, 0.09);
  --sage-tint-2: rgba(0, 180, 216, 0.16);

  /* Type: three families, each its single assigned role. */
  --serif: 'Instrument Serif', Georgia, 'Times New Roman', serif;
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --grotesk: 'Space Grotesk', var(--sans);

  --measure: 66ch;
  --radius: 10px;
  --radius-sm: 6px;
  --ease: cubic-bezier(0.23, 1, 0.32, 1);
  --pad-section: clamp(72px, 11vw, 150px);
}

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

html { scroll-behavior: smooth; scroll-padding-top: 96px; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* Headlines: Instrument Serif, weight 400, slightly negative tracking. */
h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -0.012em;
  line-height: 1.1;
  text-wrap: balance;
}
h1 em, h2 em, h3 em { font-style: italic; color: var(--sage); }

a { color: inherit; }

::selection { background: var(--sage-tint-2); color: var(--ink); }

:focus-visible {
  outline: 2px solid var(--sage);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------- Layout ---------- */
.wrap { width: 100%; max-width: 1080px; margin: 0 auto; padding: 0 24px; }
@media (min-width: 768px) { .wrap { padding: 0 40px; } }
.doc { max-width: 760px; margin: 0 auto; }
.prose { max-width: var(--measure); }

/* ---------- Masthead ---------- */
.masthead {
  position: sticky; top: 0; z-index: 60;
  background: rgba(250, 251, 252, 0.86);
  backdrop-filter: saturate(150%) blur(10px);
  -webkit-backdrop-filter: saturate(150%) blur(10px);
  border-bottom: 1px solid var(--line);
}
.masthead-in {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  height: 60px; gap: 12px;
}
.brand {
  display: inline-flex; align-items: baseline; gap: 9px;
  text-decoration: none; color: var(--ink);
  font-family: var(--grotesk); font-weight: 600;
  font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
}
.brand .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--sage); align-self: center; }
.brand .sub { color: var(--faint); font-weight: 500; letter-spacing: 0.1em; }
@media (max-width: 600px) { .brand .sub { display: none; } }

.folio {
  font-family: var(--grotesk); font-weight: 600;
  font-size: 13px; letter-spacing: 0.18em; color: var(--ink);
  text-align: center; white-space: nowrap;
}
.folio b { color: var(--sage); font-weight: 700; }
.folio .of { color: var(--faint); }

.mast-nav { display: inline-flex; align-items: center; justify-content: flex-end; gap: 22px; }
.mast-nav a {
  font-family: var(--grotesk); font-size: 12px; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none;
  color: var(--muted); transition: color 0.18s var(--ease);
}
@media (hover: hover) and (pointer: fine) { .mast-nav a:hover { color: var(--ink); } }
.mast-nav a.next { color: var(--sage-dark); }
.mast-nav a[aria-disabled="true"] { color: var(--faint); pointer-events: none; }
@media (max-width: 480px) { .mast-nav a.contents { display: none; } }
/* Very small phones (~320-380px): tighten the masthead so brand + folio +
   prev/next don't crowd. */
@media (max-width: 380px) {
  .masthead-in { gap: 8px; }
  .brand { font-size: 11px; letter-spacing: 0.1em; gap: 7px; }
  .folio { font-size: 12px; letter-spacing: 0.12em; }
  .mast-nav { gap: 14px; }
  .mast-nav a { font-size: 11px; letter-spacing: 0.06em; }
}

/* ---------- Eyebrow / labels ---------- */
.eyebrow {
  font-family: var(--grotesk); font-weight: 600;
  font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--sage-dark); margin-bottom: 22px;
  display: inline-flex; align-items: center; gap: 12px;
}
.eyebrow::before { content: ""; width: 26px; height: 1px; background: var(--sage); }

.kicker {
  font-family: var(--grotesk); font-weight: 600;
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--faint);
}

/* ---------- Hero / page head ---------- */
.head { padding: clamp(48px, 8vw, 96px) 0 clamp(28px, 5vw, 52px); }
.head h1 { font-size: clamp(40px, 8vw, 76px); line-height: 1.02; margin-bottom: 26px; }
.head .lead {
  font-size: clamp(18px, 2.4vw, 21px); line-height: 1.6; color: var(--muted);
  max-width: 60ch;
}
.crumb {
  font-family: var(--grotesk); font-size: 12px; letter-spacing: 0.04em;
  color: var(--faint); padding-top: 30px; text-transform: uppercase; font-weight: 500;
}
.crumb a { color: var(--sage-dark); text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .crumb a:hover { text-decoration: underline; text-underline-offset: 3px; } }

.lesson-head { padding: 12px 0 8px; }
.lesson-head h1 { font-size: clamp(34px, 6.4vw, 60px); margin-bottom: 22px; }
.lesson-head .lead { font-size: clamp(17px, 2.2vw, 20px); color: var(--muted); max-width: 62ch; line-height: 1.62; }

/* ---------- Stepper rail ---------- */
.stepper {
  display: flex; flex-wrap: nowrap; gap: 0; margin: 40px 0 8px;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  /* Horizontal scroll only — never vertical. overflow-y:hidden stops touch
     devices from drifting up/down (a lone overflow-x:auto otherwise lets
     overflow-y compute to auto). */
  overflow-x: auto; overflow-y: hidden;
  -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain;
  /* Scrollbar space is always reserved (no layout shift); the thumb only
     becomes visible on hover so 05 and 06 are reachable when needed. */
  scrollbar-width: thin; scrollbar-color: transparent transparent;
}
.stepper::-webkit-scrollbar { height: 6px; }
.stepper::-webkit-scrollbar-track { background: transparent; }
.stepper::-webkit-scrollbar-thumb {
  background: transparent; border-radius: 100px;
  transition: background 0.2s var(--ease);
}
.stepper:hover { scrollbar-color: var(--sage-tint-2) transparent; }
.stepper:hover::-webkit-scrollbar-thumb { background: var(--sage-tint-2); }
.stepper:hover::-webkit-scrollbar-thumb:hover { background: var(--sage); }
.stepper a {
  flex: 1 0 auto; min-width: 116px; text-decoration: none; color: var(--ink);
  padding: 18px 18px 16px; border-right: 1px solid var(--line-soft);
  position: relative; transition: background 0.2s var(--ease);
}
.stepper a:last-child { border-right: none; }
.stepper a .n {
  font-family: var(--grotesk); font-weight: 600; font-size: 12px;
  letter-spacing: 0.14em; color: var(--faint); display: block; margin-bottom: 7px;
}
.stepper a .t {
  font-size: 13.5px; line-height: 1.35; color: var(--muted); display: block;
  font-weight: 500;
}
.stepper a::after {
  content: ""; position: absolute; left: 0; bottom: -1px; height: 2px; width: 0;
  background: var(--sage); transition: width 0.3s var(--ease);
}
@media (hover: hover) and (pointer: fine) { .stepper a:hover { background: var(--sage-tint); } }
.stepper a.is-current { background: var(--sage-tint); }
.stepper a.is-current .n { color: var(--sage-dark); }
.stepper a.is-current .t { color: var(--ink); }
.stepper a.is-current::after { width: 100%; }
.stepper a.is-done .n::after {
  content: " ✓"; color: var(--sage); font-size: 11px;
}

/* ---------- Meta card (what you'll learn / watch time) ---------- */
.meta-card {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: #fff; padding: clamp(26px, 4vw, 36px); margin: 40px 0;
}
.meta-grid { display: grid; gap: 26px; }
@media (min-width: 620px) { .meta-grid { grid-template-columns: 1fr auto; align-items: start; gap: 40px; } }
.meta-card .label {
  font-family: var(--grotesk); font-weight: 600; font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--faint);
  margin-bottom: 14px;
}
.meta-card ul { list-style: none; display: grid; gap: 11px; }
.meta-card li { position: relative; padding-left: 26px; font-size: 15.5px; line-height: 1.5; color: var(--ink); }
.meta-card li::before {
  content: ""; position: absolute; left: 0; top: 9px; width: 8px; height: 8px;
  border: 1.5px solid var(--sage); border-radius: 50%;
}
.meta-side { white-space: nowrap; }
.meta-side .time {
  font-family: var(--grotesk); font-weight: 600; font-size: 26px;
  letter-spacing: -0.01em; color: var(--ink); line-height: 1;
}
.meta-side .time span { font-size: 13px; color: var(--faint); letter-spacing: 0.08em; }

/* ---------- Video card ---------- */
.video {
  position: relative; display: block; text-decoration: none; color: inherit;
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
  margin: 40px 0; background: #fff;
  transition: border-color 0.25s var(--ease), transform 0.25s var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .video:hover { border-color: var(--sage); transform: translateY(-2px); }
  .video:hover .play { transform: translate(-50%, -50%) scale(1.06); }
}
.video .frame {
  aspect-ratio: 16 / 8.4; position: relative; overflow: hidden;
  background: var(--ink);
}
/* When the walkthrough is playing inline, drop the facade and show full 16:9. */
.video.is-playing { cursor: default; transform: none; border-color: var(--sage); }
.video.is-playing .frame { aspect-ratio: 16 / 9; }
.video.is-playing .cap .r svg { transform: none; }
.video .frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* Real video thumbnail as the poster (play button sits on top at z-index 3). */
.video .frame .thumb {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 2; display: block;
  transition: transform 0.4s var(--ease), filter 0.25s var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .video:hover .frame .thumb { transform: scale(1.03); filter: brightness(0.92); }
}
.video .grid-bg {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(250,251,252,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(250,251,252,0.06) 1px, transparent 1px);
  background-size: 34px 34px;
}
.video .glow {
  position: absolute; width: 60%; height: 120%; left: 58%; top: -10%;
  background: radial-gradient(ellipse at center, rgba(0,180,216,0.42), rgba(0,212,170,0.10) 45%, transparent 64%);
  filter: blur(8px);
}
.video .win {
  position: absolute; left: 7%; right: 7%; top: 18%; bottom: -16%;
  background: var(--cream); border-radius: 10px 10px 0 0;
  box-shadow: 0 24px 60px rgba(0,0,0,0.4); overflow: hidden;
}
.video .win .tb { height: 26px; background: #ECEAE6; display: flex; align-items: center; gap: 6px; padding: 0 12px; }
.video .win .tb i { width: 8px; height: 8px; border-radius: 50%; background: #CFCCC6; }
.video .win .row { display: flex; height: 100%; }
.video .win .side { width: 30%; background: #F1EFEB; border-right: 1px solid #E4E1DB; padding: 12px; }
.video .win .ln { height: 7px; border-radius: 4px; background: #E0DDD6; margin-bottom: 9px; }
.video .win .ln.s { width: 58%; }
.video .win .ln.a { background: var(--sage-tint-2); width: 80%; }
.video .win .main { flex: 1; padding: 13px; }
.video .win .bub { height: 13px; border-radius: 7px; background: #ECEAE5; margin-bottom: 9px; }
.video .win .bub.r { background: var(--sage-tint-2); width: 54%; margin-left: auto; }
.video .win .bub.l { width: 70%; }
.video .play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 66px; height: 66px; border-radius: 50%; background: var(--cream);
  display: grid; place-items: center; z-index: 3;
  box-shadow: 0 14px 34px rgba(0,0,0,0.35); transition: transform 0.25s var(--ease);
}
.video .play svg { width: 22px; height: 22px; color: var(--sage-dark); margin-left: 3px; }
.video .cap {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 18px 22px;
}
.video .cap .l { font-family: var(--grotesk); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); font-weight: 500; }
.video .cap .r { font-family: var(--grotesk); font-size: 13px; font-weight: 600; color: var(--sage-dark); display: inline-flex; align-items: center; gap: 7px; }
.video .cap .r svg { width: 15px; height: 15px; transition: transform 0.25s var(--ease); }
@media (hover: hover) and (pointer: fine) { .video:hover .cap .r svg { transform: translateX(4px); } }
/* Text-bar .video variant (used on some lessons) places .l/.r directly under
   .video with no .cap wrapper, so the rules above miss its arrow. Without an
   explicit size the inline SVG balloons and wraps "Read the guide" onto
   multiple lines — size it here and keep the label on one line. */
.video > .r { white-space: nowrap; }
.video > .r svg { width: 15px; height: 15px; transition: transform 0.25s var(--ease); }
@media (hover: hover) and (pointer: fine) { .video:hover > .r svg { transform: translateX(4px); } }

/* ---------- Guide prose ---------- */
.guide { max-width: var(--measure); }
.guide h2 {
  font-size: clamp(26px, 4vw, 34px); margin: 56px 0 16px; line-height: 1.12;
}
.guide h2 .num {
  font-family: var(--grotesk); font-weight: 600; font-size: 0.5em;
  color: var(--sage); letter-spacing: 0.04em; margin-right: 0.5em;
  vertical-align: 0.12em;
}
.guide h3 { font-size: clamp(20px, 3vw, 24px); margin: 34px 0 12px; }
.guide p { font-size: 17px; line-height: 1.75; margin-bottom: 18px; color: var(--ink); }
.guide p .lede { }
.guide a {
  color: var(--sage-dark); text-decoration: underline; text-underline-offset: 3px;
  text-decoration-thickness: 1px; text-decoration-color: var(--sage-tint-2);
  transition: text-decoration-color 0.2s var(--ease);
}
@media (hover: hover) and (pointer: fine) { .guide a:hover { text-decoration-color: var(--sage); } }
.guide b, .guide strong { font-weight: 600; }
.guide ul, .guide ol { list-style: none; margin: 0 0 22px; }
.guide ul li {
  position: relative; padding-left: 26px; font-size: 16.5px; line-height: 1.62;
  margin-bottom: 12px; color: var(--ink);
}
.guide ul li::before {
  content: ""; position: absolute; left: 2px; top: 11px; width: 6px; height: 6px;
  border-radius: 50%; background: var(--sage);
}
.guide ol { counter-reset: s; }
.guide ol li {
  position: relative; padding-left: 46px; font-size: 16.5px; line-height: 1.62;
  margin-bottom: 16px; color: var(--ink);
}
.guide ol li::before {
  counter-increment: s; content: counter(s, decimal-leading-zero);
  position: absolute; left: 0; top: 1px;
  font-family: var(--grotesk); font-weight: 600; font-size: 13px;
  color: var(--sage-dark); letter-spacing: 0.04em;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  width: 30px; height: 26px; display: grid; place-items: center; background: #fff;
}

/* ---------- Callouts ---------- */
.note {
  border-left: 2px solid var(--sage); background: var(--sage-tint);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 20px 24px; margin: 26px 0; font-size: 16px; line-height: 1.62;
}
.note .t {
  font-family: var(--grotesk); font-weight: 600; font-size: 11px;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--sage-dark);
  margin-bottom: 8px; display: flex; align-items: center; gap: 9px;
}
.note .t svg { width: 15px; height: 15px; }
.note b { font-weight: 600; }

/* Dark "hard standard" emphasis box */
.hard {
  background: var(--ink); color: var(--cream); border-radius: var(--radius);
  padding: clamp(26px, 4vw, 34px); margin: 36px 0;
}
.hard .t {
  font-family: var(--grotesk); font-weight: 600; font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--sage);
  margin-bottom: 16px;
}
.hard ul { list-style: none; display: grid; gap: 12px; }
/* Scoped under .hard ul to out-specify .guide ul li (which forces dark --ink
   text); otherwise this light text turns invisible on the dark card. */
.hard ul li { position: relative; padding-left: 24px; font-size: 15.5px; line-height: 1.55; color: rgba(250,251,252,0.86); margin-bottom: 0; }
.hard ul li::before { content: ""; position: absolute; left: 0; top: 9px; width: 7px; height: 7px; border-radius: 50%; background: var(--sage); }
.hard ul li b, .hard b { color: #fff; font-weight: 600; }

/* ---------- Table ---------- */
.tbl { width: 100%; border-collapse: collapse; margin: 24px 0 28px; font-size: 15.5px; }
.tbl th {
  text-align: left; font-family: var(--grotesk); font-weight: 600; font-size: 11px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint);
  padding: 12px 16px; border-bottom: 1px solid var(--line); white-space: nowrap;
}
.tbl td { padding: 14px 16px; border-bottom: 1px solid var(--line-soft); vertical-align: top; line-height: 1.5; }
.tbl tr:last-child td { border-bottom: none; }
.tbl td b { font-weight: 600; }
.tbl .term { font-family: var(--grotesk); font-weight: 600; color: var(--ink); white-space: nowrap; }

/* ---------- Mark complete ---------- */
.mark-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin: 44px 0 8px; padding-top: 28px; border-top: 1px solid var(--line); }
.mark-btn {
  display: inline-flex; align-items: center; gap: 10px; cursor: pointer;
  font-family: var(--grotesk); font-weight: 600; font-size: 12.5px;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 11px 18px; border-radius: var(--radius-sm);
  border: 1px solid var(--line); background: #fff; color: var(--muted);
  transition: all 0.2s var(--ease);
}
.mark-btn svg { width: 15px; height: 15px; }
.mark-btn:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .mark-btn:hover { border-color: var(--sage); color: var(--ink); } }
.mark-btn.done { background: var(--sage-tint); border-color: var(--sage); color: var(--sage-dark); }
.mark-note { font-size: 13.5px; color: var(--faint); }

/* ---------- Pager (prev/next) ---------- */
.pager { display: grid; grid-template-columns: 1fr; gap: 14px; margin: 52px 0 0; }
@media (min-width: 600px) { .pager { grid-template-columns: 1fr 1fr; } }
.pager a {
  display: flex; flex-direction: column; gap: 7px; text-decoration: none;
  border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 24px;
  color: var(--ink); transition: border-color 0.25s var(--ease), background 0.25s var(--ease);
  background: #fff;
}
@media (hover: hover) and (pointer: fine) { .pager a:hover { border-color: var(--sage); background: var(--sage-tint); } }
.pager a.next { text-align: right; align-items: flex-end; }
.pager .k { font-family: var(--grotesk); font-weight: 600; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); }
.pager .v { font-family: var(--serif); font-size: 22px; line-height: 1.1; color: var(--ink); }
.pager a.next .v { color: var(--sage-dark); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px; text-decoration: none;
  font-family: var(--grotesk); font-weight: 600; font-size: 13.5px;
  letter-spacing: 0.06em; padding: 14px 26px; border-radius: var(--radius-sm);
  cursor: pointer; border: 1px solid transparent; line-height: 1;
  transition: all 0.2s var(--ease);
}
.btn svg { width: 16px; height: 16px; }
.btn:active { transform: scale(0.97); }
.btn-primary { background: var(--gradient); color: #fff; }
@media (hover: hover) and (pointer: fine) { .btn-primary:hover { background: var(--gradient-dark); } }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); }
@media (hover: hover) and (pointer: fine) { .btn-ghost:hover { border-color: var(--ink); } }
.btn-line { background: var(--cream); color: var(--ink); border-color: var(--ink); }
@media (hover: hover) and (pointer: fine) { .btn-line:hover { background: var(--ink); color: var(--cream); } }
.actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 36px; }

/* ---------- Index: contents grid ---------- */
.section { padding: var(--pad-section) 0; }
.section.tight { padding: clamp(48px, 7vw, 88px) 0; }
.rule { height: 1px; background: var(--line); border: none; }

.section-intro { max-width: 64ch; }
.section-intro h2 { font-size: clamp(28px, 5vw, 44px); margin-bottom: 18px; line-height: 1.08; }
.section-intro p { font-size: 18px; color: var(--muted); line-height: 1.65; }

.body-copy { max-width: var(--measure); }
.body-copy p { font-size: 17px; line-height: 1.75; margin-bottom: 18px; color: var(--ink); }
.body-copy p strong { font-weight: 600; }

.howto { list-style: none; max-width: var(--measure); display: grid; gap: 16px; margin-top: 8px; }
.howto li { position: relative; padding-left: 26px; font-size: 16.5px; line-height: 1.62; }
.howto li::before { content: ""; position: absolute; left: 2px; top: 11px; width: 6px; height: 6px; border-radius: 50%; background: var(--sage); }
.howto li b { font-weight: 600; }

.contents-grid { display: grid; grid-template-columns: 1fr; gap: 0; margin-top: 14px; border-top: 1px solid var(--line); }
@media (min-width: 680px) { .contents-grid { grid-template-columns: 1fr 1fr; } }
.entry {
  display: block; text-decoration: none; color: var(--ink);
  padding: 30px clamp(24px, 3vw, 36px) 34px; position: relative;
  border-bottom: 1px solid var(--line); transition: background 0.22s var(--ease);
}
@media (min-width: 680px) { .entry:nth-child(odd) { border-right: 1px solid var(--line); } }
@media (hover: hover) and (pointer: fine) { .entry:hover { background: var(--sage-tint); } }
.entry .e-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.entry .e-n { font-family: var(--grotesk); font-weight: 700; font-size: 14px; letter-spacing: 0.1em; color: var(--sage-dark); }
.entry .e-tag { font-family: var(--grotesk); font-weight: 500; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); }
.entry h3 {
  font-size: 23px; line-height: 1.14; margin-bottom: 10px;
  text-decoration: underline; text-underline-offset: 4px;
  text-decoration-thickness: 1px; text-decoration-color: var(--line);
  transition: text-decoration-color 0.22s var(--ease);
}
@media (hover: hover) and (pointer: fine) { .entry:hover h3 { text-decoration-color: var(--sage); } }
.entry p { font-size: 15px; color: var(--muted); line-height: 1.55; max-width: 42ch; }
.entry .e-done {
  position: absolute; top: 30px; right: clamp(24px, 3vw, 36px);
  width: 18px; height: 18px; border: 1.5px solid var(--line); border-radius: 50%;
  display: none; place-items: center;
}
.entry.is-done .e-done { display: grid; border-color: var(--sage); background: var(--sage); }
.entry.is-done .e-done svg { width: 10px; height: 10px; color: #fff; }
.entry.is-done .e-tag { display: none; }

/* Progress meter */
.meter { border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 26px; background: #fff; margin-bottom: 30px; }
.meter-top { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; margin-bottom: 14px; }
.meter-top .lbl { font-family: var(--grotesk); font-weight: 600; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink); }
.meter-top .pct { font-family: var(--grotesk); font-weight: 700; font-size: 14px; color: var(--sage-dark); }
.meter-bar { height: 4px; background: var(--sage-tint-2); border-radius: 100px; overflow: hidden; }
.meter-bar i { display: block; height: 100%; width: 0; background: var(--gradient); border-radius: 100px; transition: width 0.6s var(--ease); }

/* Module heading */
.module { display: flex; align-items: baseline; gap: 16px; margin: 0 0 4px; padding-top: 8px; }
.module .m-n { font-family: var(--grotesk); font-weight: 600; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sage-dark); }
.module h2 { font-size: clamp(24px, 4vw, 32px); }
.module-sub { font-size: 15px; color: var(--muted); max-width: 56ch; margin: 6px 0 18px; }

/* "Further" cards */
.cards { display: grid; grid-template-columns: 1fr; gap: 0; margin-top: 12px; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
@media (min-width: 760px) { .cards { grid-template-columns: repeat(3, 1fr); } }
.card { display: block; text-decoration: none; color: var(--ink); padding: 28px clamp(22px, 2.6vw, 30px); border-bottom: 1px solid var(--line); transition: background 0.2s var(--ease); }
@media (min-width: 760px) { .card { border-bottom: none; border-right: 1px solid var(--line); } .card:last-child { border-right: none; } }
@media (max-width: 759px) { .card:last-child { border-bottom: none; } }
@media (hover: hover) and (pointer: fine) { .card:hover { background: var(--sage-tint); } }
.card .c-k { font-family: var(--grotesk); font-weight: 500; font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--faint); margin-bottom: 14px; }
.card h4 { font-family: var(--serif); font-weight: 400; font-size: 22px; margin-bottom: 8px; }
.card p { font-size: 14.5px; color: var(--muted); line-height: 1.55; }

/* Closing CTA band */
.band { background: var(--ink); color: var(--cream); border-radius: var(--radius); padding: clamp(44px, 7vw, 76px) clamp(28px, 5vw, 60px); text-align: center; }
.band h2 { font-size: clamp(28px, 5vw, 42px); color: var(--cream); margin-bottom: 16px; }
.band h2 em { color: var(--sage); }
.band p { color: rgba(250,251,252,0.74); font-size: 17px; max-width: 52ch; margin: 0 auto 30px; line-height: 1.6; }
.band .actions { justify-content: center; }
.band .btn-line { background: transparent; color: var(--cream); border-color: rgba(250,251,252,0.34); }
@media (hover: hover) and (pointer: fine) { .band .btn-line:hover { background: var(--cream); color: var(--ink); border-color: var(--cream); } }

/* ---------- Cheat sheet ---------- */
.sheet-grid { display: grid; grid-template-columns: 1fr; gap: 0; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
@media (min-width: 720px) { .sheet-grid { grid-template-columns: 1fr 1fr; } }
.sheet { padding: clamp(24px, 3vw, 32px); border-bottom: 1px solid var(--line); }
@media (min-width: 720px) { .sheet:nth-child(odd) { border-right: 1px solid var(--line); } }
.sheet h3 { font-family: var(--grotesk); font-weight: 600; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sage-dark); margin-bottom: 18px; }
.sheet dl { display: grid; gap: 13px; }
.sheet .pair { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: baseline; }
.sheet .key { font-family: var(--grotesk); font-weight: 600; font-size: 13px; color: var(--ink); background: var(--sage-tint); border: 1px solid var(--sage-tint-2); border-radius: 5px; padding: 3px 10px; white-space: nowrap; justify-self: start; }
.sheet .val { font-size: 15px; line-height: 1.45; color: var(--muted); }

/* ---------- Footer ---------- */
.foot { background: var(--ink); color: rgba(250,251,252,0.62); padding: clamp(48px, 7vw, 72px) 0 40px; margin-top: var(--pad-section); }
.foot-in { display: flex; flex-direction: column; gap: 30px; }
@media (min-width: 760px) { .foot-in { flex-direction: row; justify-content: space-between; align-items: flex-start; } }
.foot .brand { color: var(--cream); align-items: center; }
.foot .brand .sub { color: rgba(250,251,252,0.5); }
/* Footer brand uses the actual Zelix logo. The asset has a baked-in light
   background (not transparent), so show it as-is — a tidy rounded tile reads
   cleanly on the dark footer. (Inverting would white-out the wordmark.) */
.foot .brand .brand-logo { height: 30px; width: auto; display: block; border-radius: 7px; }
.foot .desc { font-size: 14px; line-height: 1.6; max-width: 320px; margin-top: 16px; color: rgba(250,251,252,0.62); }
.foot-links { display: flex; flex-wrap: wrap; gap: 32px 56px; }
.foot-col { display: flex; flex-direction: column; gap: 11px; }
.foot-h {
  font-family: var(--grotesk); font-weight: 600; font-size: 10.5px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(250,251,252,0.4); margin-bottom: 3px;
}
.foot-links a { color: rgba(250,251,252,0.7); text-decoration: none; font-size: 14px; transition: color 0.18s var(--ease); }
@media (hover: hover) and (pointer: fine) { .foot-links a:hover { color: var(--cream); } }
.foot .fine { font-size: 12.5px; color: rgba(250,251,252,0.4); margin-top: 34px; line-height: 1.6; max-width: 720px; }

/* ---------- Confirm modal ---------- */
.modal-overlay {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: center; padding: 24px;
  background: rgba(10, 22, 40, 0.55);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  animation: modalFade 0.2s var(--ease);
}
.modal-overlay[hidden] { display: none; }
.modal {
  background: var(--cream); border: 1px solid var(--line);
  border-radius: var(--radius); padding: clamp(28px, 4vw, 40px);
  width: 100%; max-width: 440px; text-align: center;
  box-shadow: 0 30px 80px rgba(10, 22, 40, 0.28);
  animation: modalPop 0.25s var(--ease);
}
.modal h2 { font-size: clamp(26px, 4vw, 32px); margin-bottom: 12px; }
.modal p { color: var(--muted); font-size: 16px; line-height: 1.6; margin-bottom: 26px; }
.modal-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
@keyframes modalFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes modalPop { from { opacity: 0; transform: translateY(10px) scale(0.98); } to { opacity: 1; transform: none; } }

/* ---------- Reveal ---------- */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.stagger > .reveal:nth-child(2) { transition-delay: 0.06s; }
.stagger > .reveal:nth-child(3) { transition-delay: 0.12s; }
.stagger > .reveal:nth-child(4) { transition-delay: 0.18s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .meter-bar i, .stepper a::after { transition: none; }
  .modal-overlay, .modal { animation: none; }
}

/* ============================================================
   FIGURES — self-contained UI mockups + diagrams
   Illustrative only, fictional brands, no external assets.
   Matches the quiet-luxury system: navy ink, teal->cyan, cream.
   ============================================================ */

.fig { margin: 44px 0; }
.fig figcaption {
  font-family: var(--grotesk); font-size: 12.5px; letter-spacing: 0.01em;
  color: var(--faint); margin-top: 15px; line-height: 1.5;
  display: flex; gap: 10px; align-items: baseline;
}
.fig figcaption::before {
  content: "Illustration"; flex: none;
  font-weight: 600; font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--sage-dark); background: var(--sage-tint); border: 1px solid var(--sage-tint-2);
  border-radius: 4px; padding: 3px 7px; transform: translateY(-1px);
}
.fig figcaption b { color: var(--ink); font-weight: 600; }

/* Horizontal-scroll wrapper for wide mockups on small screens (never vertical) */
.fig-scroll { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; }
.fig-scroll::-webkit-scrollbar { height: 6px; }
.fig-scroll::-webkit-scrollbar-thumb { background: var(--sage-tint-2); border-radius: 100px; }

/* ---- App-window chrome ("screenshot" frame) ---- */
.shot {
  border: 1px solid var(--line); border-radius: var(--radius); background: #fff;
  overflow: hidden; box-shadow: 0 24px 56px -32px rgba(10, 22, 40, 0.42);
}
.shot-bar {
  display: flex; align-items: center; gap: 7px;
  padding: 11px 15px; border-bottom: 1px solid var(--line-soft);
  background: linear-gradient(#fbfcfd, #f6f8fa);
}
.shot-bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--line); flex: none; }
.shot-bar i:nth-child(2) { background: rgba(10,22,40,0.18); }
.shot-bar i:nth-child(3) { background: rgba(10,22,40,0.24); }
.shot-bar .addr {
  margin-left: 12px; font-family: var(--grotesk); font-weight: 500; font-size: 11px;
  letter-spacing: 0.02em; color: var(--faint);
  background: var(--cream); border: 1px solid var(--line-soft); border-radius: 6px;
  padding: 4px 13px;
}

/* ---- Shared primitives: avatars, chips, messages ---- */
.av {
  width: 34px; height: 34px; border-radius: 50%; flex: none;
  display: grid; place-items: center; color: #fff;
  font-family: var(--grotesk); font-weight: 600; font-size: 12.5px; letter-spacing: 0.02em;
  background: var(--gradient);
}
.av.sm { width: 28px; height: 28px; font-size: 11px; }
.av.b { background: linear-gradient(135deg, #51728F, #80A0B8); }
.av.c { background: linear-gradient(135deg, #D98A4E, #E0B14E); }
.av.ai { background: var(--ink); }

.chip {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  font-family: var(--grotesk); font-weight: 600; font-size: 10px; letter-spacing: 0.1em;
  text-transform: uppercase; padding: 3px 9px; border-radius: 100px;
  border: 1px solid var(--line); color: var(--muted); background: #fff;
}
.chip svg { width: 11px; height: 11px; }
.chip .led { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.chip.ai { color: var(--sage-dark); border-color: var(--sage-tint-2); background: var(--sage-tint); }
.chip.live { color: #0E8050; border-color: rgba(37,211,102,0.32); background: rgba(37,211,102,0.10); }
.chip.wa { color: #0E8050; border-color: rgba(37,211,102,0.32); background: rgba(37,211,102,0.10); }

.thread { display: flex; flex-direction: column; gap: 11px; padding: 20px; background: var(--cream); }
.msg {
  max-width: 78%; padding: 9px 13px; font-size: 13px; line-height: 1.46; color: var(--ink);
  border-radius: 14px; position: relative;
}
.msg .who {
  font-family: var(--grotesk); font-weight: 600; font-size: 9.5px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--faint); margin-bottom: 4px;
  display: flex; align-items: center; gap: 6px;
}
.msg.in { align-self: flex-start; background: #fff; border: 1px solid var(--line-soft); border-bottom-left-radius: 5px; }
.msg.out { align-self: flex-end; background: var(--sage-tint); border: 1px solid var(--sage-tint-2); border-bottom-right-radius: 5px; }
.msg.ai .who { color: var(--sage-dark); }
.msg .tm { font-family: var(--grotesk); font-size: 9.5px; color: var(--faint); display: block; margin-top: 5px; text-align: right; }
.var { font-family: var(--grotesk); font-weight: 600; font-size: 0.92em; color: var(--sage-dark); background: var(--sage-tint); border: 1px solid var(--sage-tint-2); border-radius: 5px; padding: 0 5px; }

/* In-thread handover divider */
.handoff { display: flex; align-items: center; gap: 12px; margin: 4px 2px; }
.handoff::before, .handoff::after { content: ""; height: 1px; flex: 1; background: var(--line); }
.handoff span {
  font-family: var(--grotesk); font-weight: 600; font-size: 9.5px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--faint); display: inline-flex; align-items: center; gap: 7px;
  white-space: nowrap;
}
.handoff span svg { width: 13px; height: 13px; color: var(--sage); }

/* ---- Numbered annotation pins + legend ---- */
.pin {
  display: inline-grid; place-items: center; width: 19px; height: 19px; border-radius: 50%;
  background: var(--ink); color: #fff; flex: none;
  font-family: var(--grotesk); font-weight: 700; font-size: 11px;
  box-shadow: 0 0 0 3px rgba(250,251,252,0.95);
}
.pin.s { background: var(--gradient); box-shadow: 0 0 0 3px rgba(250,251,252,0.95); }
.fig-legend { list-style: none; display: grid; gap: 16px; margin: 40px 0 0; padding: 0; }
@media (min-width: 580px) { .fig-legend { grid-template-columns: 1fr 1fr; gap: 20px 30px; margin-top: 48px; } }
.fig-legend li { display: flex; gap: 11px; align-items: flex-start; font-size: 14.5px; line-height: 1.5; color: var(--muted); }
.fig-legend .pin { margin-top: 1px; }
.fig-legend b { color: var(--ink); font-weight: 600; }

/* ---- Inbox mockup ---- */
.inbox { display: grid; grid-template-columns: 54px 232px 1fr; min-width: 660px; }
.ib-rail { background: var(--ink); display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 16px 0; }
.ib-rail .lg { width: 22px; height: 22px; border-radius: 7px; background: var(--gradient); margin-bottom: 6px; }
.ib-rail .ic { width: 20px; height: 20px; border-radius: 6px; background: rgba(250,251,252,0.16); display: grid; place-items: center; color: rgba(250,251,252,0.7); }
.ib-rail .ic svg { width: 14px; height: 14px; }
.ib-rail .ic.on { background: rgba(0,180,216,0.22); color: #fff; box-shadow: inset 0 0 0 1px rgba(0,180,216,0.5); }
.ib-list { border-right: 1px solid var(--line-soft); display: flex; flex-direction: column; background: #fff; }
.ib-list .lh { padding: 14px 16px 12px; border-bottom: 1px solid var(--line-soft); }
.ib-list .lh h5 { font-family: var(--serif); font-weight: 400; font-size: 19px; margin-bottom: 11px; letter-spacing: -0.01em; }
.ib-tabs { display: flex; gap: 7px; }
.ib-tabs .t { font-family: var(--grotesk); font-weight: 600; font-size: 10.5px; letter-spacing: 0.04em; padding: 4px 10px; border-radius: 100px; color: var(--muted); border: 1px solid var(--line); background: #fff; display: inline-flex; align-items: center; gap: 6px; }
.ib-tabs .t.on { color: var(--sage-dark); background: var(--sage-tint); border-color: var(--sage-tint-2); }
.ib-tabs .t .led { width: 6px; height: 6px; border-radius: 50%; background: var(--sage); }
.conv { display: flex; gap: 11px; padding: 13px 16px; border-bottom: 1px solid var(--line-soft); align-items: center; }
.conv.on { background: var(--sage-tint); }
.conv .cc { flex: 1; min-width: 0; }
.conv .nm { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; font-weight: 600; font-size: 13px; color: var(--ink); }
.conv .nm .tm { font-family: var(--grotesk); font-weight: 500; font-size: 10.5px; color: var(--faint); flex: none; }
.conv .pv { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.conv .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--sage); flex: none; }
.ib-main { display: flex; flex-direction: column; background: var(--cream); min-width: 0; }
.ib-main .thread { flex: 1 1 auto; }
.ib-top { display: flex; align-items: center; gap: 11px; padding: 13px 18px; border-bottom: 1px solid var(--line-soft); background: #fff; }
.ib-top .who { flex: 1; min-width: 0; }
.ib-top .who .n { font-weight: 600; font-size: 14px; }
.ib-top .who .s { font-family: var(--grotesk); font-size: 11px; color: var(--faint); }
.ib-top .stage { font-family: var(--grotesk); font-weight: 600; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sage-dark); background: var(--sage-tint); border: 1px solid var(--sage-tint-2); border-radius: 100px; padding: 4px 10px; }
.ib-compose { border-top: 1px solid var(--line-soft); background: #fff; padding: 12px 16px; }

/* ---- Generic composer ---- */
.composer { background: #fff; }
.composer .field {
  border: 1px solid var(--line); border-radius: 10px; padding: 11px 13px;
  font-size: 13px; color: var(--muted); display: flex; align-items: center; min-height: 42px; line-height: 1.4;
}
.composer .field .ph { color: var(--faint); }
.composer .cur { display: inline-block; width: 1.5px; height: 16px; background: var(--sage); margin-left: 1px; vertical-align: middle; animation: caret 1.05s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.composer .tools { display: flex; align-items: center; gap: 16px; margin-top: 11px; color: var(--faint); }
.composer .tools svg { width: 17px; height: 17px; }
.composer .tools .gap { flex: 1; }
.composer .tools .send { width: 30px; height: 30px; border-radius: 50%; background: var(--gradient); display: grid; place-items: center; color: #fff; }
.composer .tools .send svg { width: 14px; height: 14px; }
.composer .tk { display: inline-flex; align-items: center; gap: 5px; font-family: var(--grotesk); font-weight: 600; font-size: 11px; color: var(--sage-dark); }

/* Slash / snippet popover */
.popover {
  border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff;
  box-shadow: 0 18px 40px -22px rgba(10,22,40,0.4); overflow: hidden;
}
.popover .ph { padding: 9px 14px; border-bottom: 1px solid var(--line-soft); font-family: var(--grotesk); font-weight: 600; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); }
.popover .opt { display: flex; gap: 12px; align-items: baseline; padding: 10px 14px; border-bottom: 1px solid var(--line-soft); }
.popover .opt:last-child { border-bottom: none; }
.popover .opt.on { background: var(--sage-tint); }
.popover .opt .cmd { font-family: var(--grotesk); font-weight: 600; font-size: 12.5px; color: var(--sage-dark); white-space: nowrap; }
.popover .opt .txt { font-size: 12.5px; color: var(--muted); line-height: 1.4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- Settings hierarchy (Lesson 01) ---- */
.levels { display: grid; gap: 16px; }
@media (min-width: 720px) { .levels { grid-template-columns: repeat(3, 1fr); align-items: start; } }
.level { border: 1px solid var(--line); border-radius: var(--radius); background: #fff; padding: 24px 22px; position: relative; }
.level .ln { font-family: var(--grotesk); font-weight: 600; font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sage-dark); display: flex; align-items: center; gap: 9px; }
.level .ln .step { width: 22px; height: 22px; border-radius: 6px; background: var(--sage-tint); border: 1px solid var(--sage-tint-2); display: grid; place-items: center; color: var(--sage-dark); font-weight: 700; }
.level h4 { font-family: var(--serif); font-weight: 400; font-size: 23px; margin: 14px 0 4px; letter-spacing: -0.01em; }
.level .sc { font-family: var(--grotesk); font-size: 11.5px; letter-spacing: 0.02em; color: var(--faint); margin-bottom: 8px; }
.level .rows { display: grid; }
.level .row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line-soft); font-size: 13.5px; color: var(--ink); }
.level .row svg { width: 15px; height: 15px; color: var(--sage); flex: none; }
.level .scope-arrow { display: none; }
@media (min-width: 720px) {
  .level:not(:last-child) .scope-arrow {
    display: grid; place-items: center; position: absolute; right: -14px; top: 38px; z-index: 2;
    width: 24px; height: 24px; border-radius: 50%; background: #fff; border: 1px solid var(--line); color: var(--sage-dark);
  }
  .level .scope-arrow svg { width: 13px; height: 13px; }
}

/* ---- Phone mockup (Lesson 03) ---- */
.phone {
  width: 280px; max-width: 100%; margin: 0 auto; flex: none;
  border-radius: 34px; background: var(--ink); padding: 9px;
  box-shadow: 0 30px 70px -34px rgba(10,22,40,0.55);
}
.phone .scr { background: var(--cream); border-radius: 27px; overflow: hidden; position: relative; }
.phone .notch { height: 26px; background: #fff; display: flex; align-items: center; justify-content: center; }
.phone .notch::after { content: ""; width: 64px; height: 5px; border-radius: 100px; background: rgba(10,22,40,0.18); }
.phone .ph-top { display: flex; align-items: center; gap: 10px; padding: 11px 15px; background: #fff; border-bottom: 1px solid var(--line-soft); }
.phone .ph-top .bk { color: var(--faint); }
.phone .ph-top .bk svg { width: 16px; height: 16px; }
.phone .ph-top .n { font-weight: 600; font-size: 13.5px; }
.phone .ph-top .s { font-family: var(--grotesk); font-size: 10.5px; color: var(--faint); }
.phone .thread { padding: 14px; gap: 9px; }
.phone .msg { font-size: 12.5px; max-width: 82%; }
.phone-pair { display: flex; gap: 28px; flex-wrap: wrap; justify-content: center; align-items: flex-start; }

/* ---- Reports dashboard (Lesson 06) ---- */
.dash { padding: 18px; display: grid; gap: 14px; background: var(--cream); }
.kpis { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (min-width: 560px) { .kpis { grid-template-columns: repeat(4, 1fr); } }
.kpi { border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff; padding: 15px 16px; }
.kpi .k { font-family: var(--grotesk); font-weight: 600; font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); line-height: 1.3; }
.kpi .v { font-family: var(--grotesk); font-weight: 600; font-size: 25px; letter-spacing: -0.01em; color: var(--ink); margin-top: 10px; line-height: 1; }
.kpi .v small { font-size: 13px; color: var(--faint); font-weight: 500; }
.kpi .d { font-family: var(--grotesk); font-weight: 600; font-size: 11px; margin-top: 7px; color: #0E8050; display: flex; align-items: center; gap: 4px; }
.kpi .d.down { color: #C0392B; }
.dash-cols { display: grid; gap: 14px; }
@media (min-width: 560px) { .dash-cols { grid-template-columns: 1.3fr 1fr; align-items: start; } }
.panelcard { border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff; padding: 16px; }
.panelcard .ph { font-family: var(--grotesk); font-weight: 600; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); margin-bottom: 16px; display: flex; justify-content: space-between; }
.bars { display: flex; align-items: flex-end; gap: 9px; height: 116px; margin-bottom: 20px; }
.bars .bar { flex: 1; background: var(--sage-tint); border-radius: 5px 5px 0 0; position: relative; display: flex; flex-direction: column; justify-content: flex-end; }
.bars .bar i { display: block; background: var(--gradient); border-radius: 5px 5px 0 0; }
.bars .bar .bl { position: absolute; top: 100%; left: 0; right: 0; text-align: center; font-family: var(--grotesk); font-size: 9.5px; color: var(--faint); margin-top: 6px; }
.funnel { display: grid; gap: 8px; }
.funnel .fr { background: var(--sage-tint); border: 1px solid var(--sage-tint-2); border-radius: 6px; padding: 9px 13px; display: flex; justify-content: space-between; align-items: center; font-size: 12.5px; color: var(--ink); margin: 0 auto; width: 100%; }
.funnel .fr .lab { font-weight: 500; }
.funnel .fr .vv { font-family: var(--grotesk); font-weight: 600; color: var(--sage-dark); }

/* ---------- Print (cheat sheet) ---------- */
@media print {
  .masthead, .foot, .no-print, .pager { display: none !important; }
  body { background: #fff; font-size: 12px; }
  .section { padding: 8px 0; }
  .sheet-grid { border-color: #ccc; }
  .sheet { break-inside: avoid; }
  a { text-decoration: none !important; color: #000 !important; }
}