/* ==========================================================================
   DRP-OS — DESIGN SYSTEM v2  (drp.css)
   Single source of truth. Replaces style.css + site_fix.css + nav-final.css
   + responsive-core.css + every page's inline <style>.

   Palette is UNCHANGED from the original brand:
     paper #faf7f2 · ink #1a1714 · accent #c2410c · gradient orange→pink→violet
   Type: Fraunces (display) · Inter Tight (body) · JetBrains Mono (data)
   ========================================================================== */

:root {
  /* Paper / Ink — unchanged */
  --paper:        #faf7f2;
  --paper-pure:   #ffffff;
  --paper-soft:   #f4f0e8;
  --ink:          #1a1714;
  --ink-90:       rgba(26, 23, 20, 0.9);
  --ink-70:       rgba(26, 23, 20, 0.7);
  --ink-50:       rgba(26, 23, 20, 0.5);
  --ink-30:       rgba(26, 23, 20, 0.3);
  --ink-10:       rgba(26, 23, 20, 0.10);
  --ink-05:       rgba(26, 23, 20, 0.05);

  /* Accent — unchanged */
  --accent:       #c2410c;
  --accent-soft:  #fb923c;
  --accent-deep:  #7c2d12;
  --accent-wash:  rgba(196, 65, 12, 0.10);
  --accent-bg:    rgba(196, 65, 12, 0.08);

  /* Status */
  --positive:     #4d7c0f;
  --warning:      #ca8a04;
  --caution:      #d97706;
  --info:         #1e40af;
  --violet:       #8b5cf6;
  --pink:         #ec4899;

  /* Gradient — unchanged */
  --gradient-vivid: linear-gradient(135deg, #c2410c 0%, #ec4899 45%, #8b5cf6 100%);
  --gradient-soft:  linear-gradient(135deg, rgba(196,65,12,0.10) 0%, rgba(139,92,246,0.06) 100%);

  /* Fonts — unchanged */
  --font-display: 'Fraunces', 'Times New Roman', serif;
  --font-body:    'Inter Tight', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', 'Menlo', monospace;

  --ease-out:     cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);
  --r:            14px;
  --r-lg:         22px;
  --nav-h:        72px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  background: var(--paper);
  color: var(--ink);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img, svg, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
::selection { background: var(--accent); color: #fff; }

/* ---------- LAYOUT: text capped, shells scale (the Stripe/Linear rule) ---------- */
.container { max-width: 1240px; margin: 0 auto; padding: 0 32px; }
@media (min-width: 1440px) { .container { max-width: 1360px; padding: 0 48px; } }
@media (min-width: 1920px) { .container { max-width: 1680px; padding: 0 64px; } }
@media (min-width: 2400px) { .container { max-width: 2080px; padding: 0 80px; } }
@media (min-width: 3000px) { .container { max-width: 2400px; padding: 0 96px; } }
@media (max-width: 640px)  { .container { padding: 0 20px; } }

.section { padding: 120px 0; position: relative; }
@media (min-width: 1920px) { .section { padding: 160px 0; } }
@media (max-width: 880px)  { .section { padding: 72px 0; } }
.section-dark { background: var(--ink); color: var(--paper); }
.section-soft { background: var(--paper-soft); }

/* ---------- TYPE ---------- */
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 400; line-height: 1.08; letter-spacing: -0.02em; }
.h1 { font-size: clamp(44px, 5.2vw, 92px); text-wrap: balance; }
.h2 { font-size: clamp(34px, 3.4vw, 60px); text-wrap: balance; }
.h3 { font-size: clamp(22px, 1.6vw, 30px); }
.h4 { font-family: var(--font-body); font-weight: 600; font-size: 17px; letter-spacing: 0; }
em, .em { font-style: italic; background: var(--gradient-vivid); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.lead { font-size: clamp(17px, 1.15vw, 21px); color: var(--ink-70); max-width: 62ch; }
.section-dark .lead { color: rgba(250,247,242,0.65); }
.eyebrow {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--accent);
  display: inline-flex; align-items: center; gap: 10px;
}
.eyebrow::before { content: ""; width: 24px; height: 1px; background: currentColor; opacity: .5; }
.eyebrow.center { justify-content: center; }
.mono { font-family: var(--font-mono); }

/* ---------- BUTTONS ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 15px 30px; border-radius: 100px; font-weight: 600; font-size: 15px;
  transition: transform .2s var(--ease-out), box-shadow .2s var(--ease-out), background .2s, border-color .2s;
  white-space: nowrap; cursor: pointer;
}
.btn-gradient { background: var(--gradient-vivid); color: #fff; background-size: 150% 150%; }
.btn-gradient:hover { transform: translateY(-2px); box-shadow: 0 14px 34px -10px rgba(196,65,12,.5); background-position: 100% 0; }
.btn-secondary { background: var(--paper-pure); border: 1px solid var(--ink-10); color: var(--ink); }
.btn-secondary:hover { border-color: var(--ink-30); transform: translateY(-2px); }
.section-dark .btn-secondary { background: transparent; border-color: rgba(250,247,242,.2); color: var(--paper); }
.section-dark .btn-secondary:hover { border-color: rgba(250,247,242,.5); }
.btn-large { padding: 18px 38px; font-size: 16px; }
.btn-arrow { transition: transform .25s var(--ease-out); }
.btn:hover .btn-arrow { transform: translateX(4px); }

/* ---------- NAV ---------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100; height: var(--nav-h);
  transition: background .3s, border-color .3s, backdrop-filter .3s;
  border-bottom: 1px solid transparent;
}
.nav.scrolled {
  background: rgba(250,247,242,.85); backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px); border-bottom-color: var(--ink-10);
}
.nav .container { height: var(--nav-h); display: flex; align-items: center; gap: 40px; }
.wordmark { font-family: var(--font-display); font-size: 20px; font-weight: 500; letter-spacing: -.02em; }
.wordmark .br { color: var(--accent); }
.nav-links { display: flex; gap: 30px; margin: 0 auto; }
.nav-links a { font-size: 14.5px; color: var(--ink-70); position: relative; padding: 4px 0; transition: color .2s; }
.nav-links a:hover { color: var(--ink); }
.nav-links a.active { color: var(--ink); font-weight: 500; }
.nav-links a.active::after {
  content: ""; position: absolute; left: 50%; bottom: -4px; width: 4px; height: 4px;
  border-radius: 50%; background: var(--accent); transform: translateX(-50%);
}
.nav-cta { display: flex; align-items: center; gap: 12px; }
.nav-cta .btn { padding: 11px 22px; font-size: 14px; }
.btn-ink { background: var(--ink); color: var(--paper); }
.btn-ink:hover { transform: translateY(-2px); box-shadow: 0 12px 28px -10px rgba(26,23,20,.5); }
.nav-toggle { display: none; width: 40px; height: 40px; flex-direction: column; justify-content: center; align-items: center; gap: 5px; margin-left: auto; }
.nav-toggle span { width: 20px; height: 1.5px; background: var(--ink); transition: transform .25s, opacity .25s; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
@media (max-width: 900px) {
  .nav-links {
    position: fixed; inset: var(--nav-h) 0 auto 0; flex-direction: column; gap: 0;
    background: rgba(250,247,242,.98); backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--ink-10); padding: 8px 24px 20px; display: none;
  }
  .nav-links.open { display: flex; }
  .nav-links a { padding: 15px 0; font-size: 17px; border-bottom: 1px solid var(--ink-05); }
  .nav-cta { display: none; }
  .nav-toggle { display: flex; }
}

/* ---------- FOOTER ---------- */
.footer { background: var(--ink); color: var(--paper); padding: 90px 0 40px; }
.footer-top { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 48px; margin-bottom: 64px; }
.footer p { color: rgba(250,247,242,.45); font-size: 14px; margin-top: 18px; max-width: 300px; }
.footer h5 { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: rgba(250,247,242,.35); margin-bottom: 20px; font-weight: 500; }
.footer li { margin-bottom: 12px; }
.footer-top a { font-size: 14.5px; color: rgba(250,247,242,.7); transition: color .2s; }
.footer-top a:hover { color: var(--accent-soft); }
.footer-bottom {
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  border-top: 1px solid rgba(250,247,242,.1); padding-top: 30px;
  font-size: 13px; color: rgba(250,247,242,.4); font-family: var(--font-mono);
}
.footer-bottom a { color: rgba(250,247,242,.4); }
.footer-bottom a:hover { color: var(--accent-soft); }
@media (max-width: 900px) { .footer-top { grid-template-columns: 1fr 1fr; gap: 36px; } }
@media (max-width: 560px) { .footer-top { grid-template-columns: 1fr; } }

/* ---------- REVEAL ---------- */
[data-r] { opacity: 0; transform: translateY(26px); transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); }
[data-r].in { opacity: 1; transform: none; }
[data-r-stagger] > * { opacity: 0; transform: translateY(22px); transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); }
[data-r-stagger].in > * { opacity: 1; transform: none; }
[data-r-stagger].in > *:nth-child(1){transition-delay:.00s}
[data-r-stagger].in > *:nth-child(2){transition-delay:.07s}
[data-r-stagger].in > *:nth-child(3){transition-delay:.14s}
[data-r-stagger].in > *:nth-child(4){transition-delay:.21s}
[data-r-stagger].in > *:nth-child(5){transition-delay:.28s}
[data-r-stagger].in > *:nth-child(6){transition-delay:.35s}
[data-r-stagger].in > *:nth-child(7){transition-delay:.42s}
[data-r-stagger].in > *:nth-child(8){transition-delay:.49s}

/* ---------- CARD ---------- */
.card {
  background: var(--paper-pure); border: 1px solid var(--ink-10); border-radius: var(--r-lg);
  padding: 32px; transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out), border-color .3s;
}
.card:hover { transform: translateY(-5px); border-color: rgba(196,65,12,.3); box-shadow: 0 22px 50px -16px rgba(26,23,20,.16); }

/* ---------- PAGE HERO (inner pages) ---------- */
.page-hero { padding: calc(var(--nav-h) + 80px) 0 60px; position: relative; overflow: hidden; }
.page-hero .h1 { margin-bottom: 22px; }
.orb { position: absolute; border-radius: 50%; pointer-events: none; z-index: 0; }
.hero, .page-hero, .section { overflow: hidden; }   /* orbs must never create a scrollbar */
.orb-a { top: -260px; right: -220px; width: 760px; height: 760px; background: radial-gradient(circle, rgba(251,146,60,.20), rgba(236,72,153,.08) 45%, transparent 70%); }
.orb-b { bottom: -280px; left: -200px; width: 620px; height: 620px; background: radial-gradient(circle, rgba(139,92,246,.13), transparent 70%); }
.page-hero .container { position: relative; z-index: 1; }

/* ---------- PROSE (legal) ---------- */
.prose { max-width: 72ch; }
.prose h2 {
  font-size: 26px; margin: 52px 0 16px; padding-left: 18px; position: relative;
}
.prose h2::before {
  content: ""; position: absolute; left: 0; top: .18em; bottom: .18em; width: 3px;
  border-radius: 2px; background: var(--gradient-vivid);
  transform: scaleY(0); transform-origin: top; transition: transform .6s var(--ease-out) .1s;
}
.prose h2.in::before { transform: scaleY(1); }
.prose p, .prose li { color: var(--ink-70); margin-bottom: 15px; font-size: 16px; }
.prose ul { list-style: disc; padding-left: 22px; margin-bottom: 20px; }
.prose a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.read-rail { position: fixed; top: 0; left: 0; height: 3px; z-index: 200; width: var(--pct, 0%); background: var(--gradient-vivid); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  [data-r], [data-r-stagger] > * { opacity: 1 !important; transform: none !important; }
  html { scroll-behavior: auto; }
}
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

/* ==========================================================================
   HOME
   ========================================================================== */
.hero { padding: calc(var(--nav-h) + 90px) 0 100px; position: relative; overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: 1.02fr .98fr; gap: 64px; align-items: center; position: relative; z-index: 1; }
.hero-copy .eyebrow { margin-bottom: 26px; }
.hero-copy .h1 { margin-bottom: 24px; }
.hero-copy .lead { margin-bottom: 36px; }
.hero-cta { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 32px; }
.hero-meta { display: flex; gap: 24px; flex-wrap: wrap; font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-30); }
.hero-meta span { display: inline-flex; align-items: center; gap: 7px; }
.hero-meta span::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--accent-soft); }

/* --- Oja chat window: mirrors app/clinic/includes/_remy.php --- */
.oja-win {
  background: var(--paper-pure); border-radius: 20px; overflow: hidden;
  border: 1px solid var(--ink-10);
  box-shadow: 0 40px 100px -28px rgba(26,23,20,.35);
  display: flex; flex-direction: column; height: 460px;
}
.oja-head { display: flex; align-items: center; gap: 9px; padding: 15px 18px; border-bottom: 1px solid var(--ink-05); background: var(--paper); }
.oja-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--positive); box-shadow: 0 0 0 3px rgba(77,124,15,.15); }
.oja-head strong { font-family: var(--font-display); font-size: 16px; }
.oja-sub { font-size: 12px; color: var(--ink-30); }
.oja-acts { margin-left: auto; display: flex; gap: 12px; color: var(--ink-30); font-size: 13px; font-style: normal; }
.oja-acts i { font-style: normal; cursor: default; }
.oja-log { flex: 1; padding: 18px; overflow: hidden; display: flex; flex-direction: column; gap: 12px; }
.oja-msg { display: flex; }
.oja-msg.you { justify-content: flex-end; }
.oja-bub {
  max-width: 82%; padding: 11px 15px; border-radius: 16px; font-size: 13.5px; line-height: 1.55;
  animation: bub .35s var(--ease-out) both;
}
@keyframes bub { from { opacity: 0; transform: translateY(8px) scale(.96); } to { opacity: 1; transform: none; } }
.oja-msg.bot .oja-bub { background: var(--paper-soft); color: var(--ink-70); border-bottom-left-radius: 5px; }
.oja-msg.you .oja-bub { background: var(--gradient-vivid); color: #fff; border-bottom-right-radius: 5px; }
.oja-bub em { font-style: italic; -webkit-text-fill-color: currentColor; background: none; }
/* Confirm card — mirrors .remy-confirm in app/clinic/includes/_remy.php */
.oja-cfm {
  background: var(--paper-pure); border: 1px solid rgba(194,65,12,.35);
  border-radius: 14px; border-bottom-left-radius: 5px; padding: 12px 13px; max-width: 92%;
  animation: bub .35s var(--ease-out) both;
}
.oja-cfm-a { font-size: 9px; letter-spacing: .1em; color: var(--accent); margin-bottom: 7px; opacity: .8; }
.oja-cfm-t { font-size: 13.5px; color: var(--ink); line-height: 1.5; margin-bottom: 10px; }
.oja-cfm-b { display: flex; gap: 8px; }
.oja-yes, .oja-no {
  flex: 1; border: 0; border-radius: 9px; padding: 8px 10px;
  font-size: 12.5px; font-weight: 600; font-family: inherit; cursor: default;
  -webkit-text-fill-color: currentColor;
}
.oja-yes { background: var(--gradient-vivid); color: #fff; }
.oja-yes:disabled { opacity: .7; }
.oja-no { background: var(--paper-soft); color: var(--ink); }
.oja-cfm-done { margin-top: 10px; font-size: 12.5px; font-weight: 500; color: var(--positive); }
.oja-typing { display: flex; gap: 4px; padding: 13px 15px; background: var(--paper-soft); border-radius: 16px; border-bottom-left-radius: 5px; width: fit-content; }
.oja-typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-30); animation: td 1.2s infinite; }
.oja-typing i:nth-child(2){animation-delay:.15s} .oja-typing i:nth-child(3){animation-delay:.3s}
@keyframes td { 0%,60%,100%{opacity:.3;transform:translateY(0)} 30%{opacity:1;transform:translateY(-3px)} }
.oja-in { padding: 14px 18px; border-top: 1px solid var(--ink-05); display: flex; align-items: center; gap: 3px; font-size: 13.5px; color: var(--ink-70); background: var(--paper); min-height: 50px; }
.oja-cur { width: 1.5px; height: 15px; background: var(--accent); animation: blink 1s step-end infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* --- proof --- */
.proof { border-top: 1px solid var(--ink-10); border-bottom: 1px solid var(--ink-10); background: var(--paper-pure); padding: 56px 0; }
.proof-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; }
.proof-item { display: flex; align-items: baseline; gap: 14px; }
.proof-item b { font-size: 44px; font-weight: 500; background: var(--gradient-vivid); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; line-height: 1; }
.proof-item span { font-size: 14px; color: var(--ink-50); }

/* --- the day --- */
.day-head { max-width: 760px; margin-bottom: 80px; }
.day-head .eyebrow { margin-bottom: 20px; }
.day-head .h2 { margin-bottom: 22px; }
.section-dark .day-head .eyebrow { color: var(--accent-soft); }
.day-rail { display: flex; flex-direction: column; gap: 140px; }
.day-step {
  display: grid; grid-template-columns: 64px minmax(0,1fr) minmax(320px,1fr); gap: 44px; align-items: center;
  opacity: 0; transform: translateY(40px);
  transition: opacity .9s var(--ease-out), transform .9s var(--ease-out);
}
.day-step.in { opacity: 1; transform: none; }
/* alternate: even steps put the visual on the LEFT.
   Grid is [num | text | vis]; for reverse we swap the explicit columns
   rather than using order (which fought the 64px num column). */
.day-step:nth-child(even) .day-text { grid-column: 3; }
.day-step:nth-child(even) .day-vis  { grid-column: 2; grid-row: 1; }
.day-num {
  font-size: 12px; color: var(--accent); letter-spacing: .14em; position: relative;
  padding-top: 6px;
}
.day-num::after { content: ""; position: absolute; left: 11px; top: 34px; bottom: -150px; width: 1px; background: linear-gradient(var(--ink-10), transparent); }
.day-step:last-child .day-num::after { display: none; }
.day-text .h3 { margin-bottom: 16px; }
.day-text p { color: var(--ink-70); font-size: 16.5px; margin-bottom: 20px; }
.day-text b { color: var(--ink); font-weight: 600; }
.day-tags { display: flex; gap: 8px; flex-wrap: wrap; }
.day-tags span {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .06em;
  padding: 5px 11px; border-radius: 100px; border: 1px solid var(--ink-10); color: var(--ink-50);
}
.day-tags .prem { background: var(--gradient-vivid); color: #fff; border-color: transparent; }

/* --- mini visuals --- */
.day-vis { display: flex; justify-content: center; }
.mini {
  background: var(--paper-pure); border: 1px solid var(--ink-10); border-radius: 18px;
  padding: 22px; width: 100%; max-width: 340px; font-size: 13px;
  box-shadow: 0 26px 60px -20px rgba(26,23,20,.2);
}
.mini-h, .rx-h, .wal-h { font-size: 10px; letter-spacing: .14em; color: var(--ink-30); margin-bottom: 16px; }
.slot { display: flex; justify-content: space-between; padding: 10px 12px; border-radius: 9px; margin-bottom: 6px; background: var(--paper-soft); color: var(--ink-50); }
.slot i { font-style: normal; font-family: var(--font-mono); font-size: 10px; }
.slot.pick { background: var(--accent-wash); color: var(--accent); border: 1px solid rgba(196,65,12,.3); font-weight: 600; }
.mini-pay { display: flex; justify-content: space-between; align-items: center; margin-top: 16px; padding-top: 16px; border-top: 1px dashed var(--ink-10); }
.mini-pay span { font-size: 9.5px; letter-spacing: .12em; color: var(--positive); }
.mini-pay b { font-size: 22px; font-family: var(--font-display); }
.mini-call { text-align: center; padding: 32px 22px; }
.call-av { width: 60px; height: 60px; border-radius: 50%; background: var(--gradient-vivid); color: #fff; display: grid; place-items: center; font-size: 24px; font-family: var(--font-display); margin: 0 auto 14px; }
.mini-call b { display: block; font-size: 16px; margin-bottom: 4px; }
.mini-call > span { font-size: 10px; letter-spacing: .1em; color: var(--ink-30); }
.call-btns { display: flex; justify-content: center; gap: 40px; margin-top: 24px; }
.call-btns i { width: 44px; height: 44px; border-radius: 50%; display: block; }
.call-btns .dec { background: #ff5f57; }
.call-btns .acc { background: var(--positive); animation: ring 1.4s ease-in-out infinite; }
@keyframes ring { 0%,100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(77,124,15,.5); } 50% { transform: scale(1.08); box-shadow: 0 0 0 12px rgba(77,124,15,0); } }
.ext-row { display: flex; justify-content: space-between; padding: 9px 0; color: var(--ink-50); }
.ext-row b { color: var(--ink); font-family: var(--font-mono); }
.ext-row.add b { color: var(--accent); }
.ext-line { height: 1px; background: var(--ink-10); margin: 8px 0; }
.ext-row.tot b { font-size: 20px; font-family: var(--font-display); background: var(--gradient-vivid); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.rx-h { display: flex; justify-content: space-between; align-items: center; }
.rx-lang { background: var(--accent-wash); color: var(--accent); padding: 3px 9px; border-radius: 100px; font-size: 10px; letter-spacing: 0; }
.rx-grp { font-size: 9.5px; letter-spacing: .12em; color: var(--accent); margin: 14px 0 7px; }
.rx-i { display: flex; justify-content: space-between; padding: 7px 0; border-bottom: 1px solid var(--ink-05); }
.rx-i b { font-family: var(--font-mono); font-size: 11px; color: var(--ink-50); font-weight: 400; }
.rx-f { font-size: 9.5px; color: var(--positive); margin-top: 16px; letter-spacing: .08em; }
.wal-amt { font-family: var(--font-display); font-size: 40px; margin-bottom: 18px; background: var(--gradient-vivid); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.wal-r { display: flex; justify-content: space-between; padding: 8px 0; font-size: 12px; color: var(--ink-50); border-bottom: 1px solid var(--ink-05); }
.wal-r b { font-family: var(--font-mono); font-size: 11.5px; }
.wal-r .in { color: var(--positive); }
.wal-r .out { color: var(--ink-30); }
.wal-btn { margin-top: 18px; text-align: center; padding: 11px; border-radius: 100px; background: var(--ink); color: var(--paper); font-size: 10.5px; letter-spacing: .1em; }
.fup-r { display: flex; align-items: center; gap: 11px; padding: 11px 0; border-bottom: 1px solid var(--ink-05); font-size: 13px; }
.fup-r i { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-10); }
.fup-r b { margin-left: auto; font-size: 10px; color: var(--ink-30); letter-spacing: .08em; }
.fup-r.due i { background: var(--accent); animation: blink 1.6s infinite; }
.fup-r.due b { color: var(--accent); }
.fup-f { font-size: 9.5px; color: var(--ink-30); margin-top: 14px; letter-spacing: .08em; }

/* --- surfaces --- */
.surf-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.surf { border: 1px solid rgba(250,247,242,.12); border-radius: var(--r-lg); padding: 34px; transition: border-color .3s, transform .3s var(--ease-out); }
.surf:hover { border-color: rgba(251,146,60,.4); transform: translateY(-5px); }
.surf-icon { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center;
  background: rgba(251,146,60,.12); border: 1px solid rgba(251,146,60,.25); margin-bottom: 18px; }
.surf-icon svg { width: 22px; height: 22px; color: var(--accent-soft); }
.surf h4 { margin-bottom: 12px; color: var(--paper); }
.surf p { color: rgba(250,247,242,.55); font-size: 14.5px; margin-bottom: 18px; }
.surf-tag { font-size: 9.5px; letter-spacing: .14em; color: rgba(250,247,242,.3); }

/* --- ladder --- */
.lad-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: stretch; }
.lad { border: 1px solid var(--ink-10); border-radius: var(--r-lg); padding: 36px; background: var(--paper-pure); display: flex; flex-direction: column; transition: transform .35s var(--ease-out), box-shadow .35s; }
.lad:hover { transform: translateY(-6px); box-shadow: 0 26px 60px -20px rgba(26,23,20,.16); }
.lad-n { font-size: 10.5px; letter-spacing: .14em; color: var(--ink-30); margin-bottom: 18px; }
.lad .h3 { margin-bottom: 14px; }
.lad p { color: var(--ink-70); font-size: 15px; flex: 1; margin-bottom: 22px; }
.lad b { color: var(--ink); font-weight: 600; }
.lad-for { font-size: 10px; letter-spacing: .1em; color: var(--ink-30); padding-top: 18px; border-top: 1px solid var(--ink-05); }
.lad.feat { background: var(--ink); color: var(--paper); border-color: var(--ink); position: relative; overflow: hidden; }
.lad.feat::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 100% 0%, rgba(196,65,12,.28), transparent 60%); pointer-events: none; }
.lad.feat > * { position: relative; }
.lad.feat p { color: rgba(250,247,242,.6); }
.lad.feat b { color: var(--paper); }
.lad.feat .lad-n { color: var(--accent-soft); }
.lad.feat .lad-for { color: rgba(250,247,242,.35); border-top-color: rgba(250,247,242,.1); }
.lad-cta { text-align: center; margin-top: 56px; }

/* --- wall --- */
.wall-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--ink-10); border: 1px solid var(--ink-10); border-radius: var(--r-lg); overflow: hidden; }
.wall-i { background: var(--paper); padding: 22px; transition: background .25s; }
.wall-i:hover { background: var(--paper-pure); }
.wall-i b { display: block; font-size: 14px; font-weight: 600; margin-bottom: 6px; }
.wall-i span { font-size: 12.5px; color: var(--ink-50); line-height: 1.5; }

/* --- cta --- */
.cta { text-align: center; position: relative; overflow: hidden; background: var(--paper-pure); }
.cta::before { content: ""; position: absolute; left: 50%; bottom: -50%; width: 900px; height: 600px; transform: translateX(-50%); background: radial-gradient(circle, rgba(196,65,12,.12), transparent 65%); pointer-events: none; }
.cta .container { position: relative; }
.cta-row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

@media (max-width: 1100px) {
  .hero-grid { grid-template-columns: 1fr; gap: 48px; }
  .proof-grid { grid-template-columns: repeat(2, 1fr); gap: 28px; }
  .surf-grid, .lad-grid { grid-template-columns: 1fr; }
  .wall-grid { grid-template-columns: repeat(2, 1fr); }
  /* single text column + the visual beneath it — the 320px min column was
     squeezing .day-text to ~100px and pushing the page sideways */
  .day-step { grid-template-columns: 44px minmax(0, 1fr) !important; gap: 20px; }
  .day-step .day-text { grid-column: 2 !important; }
  .day-step .day-vis  { grid-column: 2 !important; grid-row: auto !important; order: 0 !important; margin-top: 26px; justify-content: flex-start; }
  .day-num::after { display: none; }
  .day-rail { gap: 90px; }
}
@media (max-width: 640px) {
  .proof-grid { grid-template-columns: 1fr; gap: 20px; }
  .wall-grid { grid-template-columns: 1fr; }
  .hero-cta .btn, .cta-row .btn { width: 100%; }
}

/* ==========================================================================
   OJA PAGE
   ========================================================================== */
.oja-hero { padding-bottom: 80px; }
.oja-hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.vs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.vs { border: 1px solid var(--ink-10); border-radius: var(--r-lg); padding: 32px; }
.vs-h { font-size: 10px; letter-spacing: .16em; margin-bottom: 18px; color: var(--ink-30); }
.vs p { font-size: 15px; color: var(--ink-50); line-height: 1.7; }
.vs-f { font-size: 10px; letter-spacing: .1em; margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--ink-05); color: var(--ink-30); }
.vs.bad { background: var(--paper-soft); }
.vs.good { border-color: rgba(196,65,12,.3); background: linear-gradient(180deg, var(--accent-bg), var(--paper-pure)); }
.vs.good .vs-h { color: var(--accent); }
.vs .cmd { color: var(--ink); font-size: 14px; background: var(--paper-soft); padding: 10px 14px; border-radius: 8px; display: inline-block; border: 1px solid var(--ink-10); }
.vs-done { margin-top: 16px; font-family: var(--font-mono); font-size: 12px; color: var(--positive); }
.vs.good .vs-f { color: var(--accent); border-top-color: rgba(196,65,12,.15); }

.act-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.act { background: var(--paper-pure); border: 1px solid var(--ink-10); border-radius: var(--r); padding: 26px; transition: border-color .3s, transform .3s var(--ease-out); }
.act:hover { border-color: rgba(196,65,12,.35); transform: translateY(-4px); }
.act-k { font-size: 12px; color: var(--accent); margin-bottom: 14px; }
.act-say { font-size: 16px; font-weight: 500; margin-bottom: 10px; color: var(--ink); }
.act-do { font-size: 13.5px; color: var(--ink-50); line-height: 1.65; }
.act-do b { color: var(--ink); font-weight: 600; }

.safe-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.safe { padding: 26px; border-left: 2px solid var(--accent); background: var(--paper-pure); border-radius: 0 var(--r) var(--r) 0; }
.safe b { display: block; font-size: 15px; margin-bottom: 8px; }
.safe span { font-size: 13.5px; color: var(--ink-50); line-height: 1.6; }

/* ==========================================================================
   PRICING
   ========================================================================== */
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: stretch; }
.plan { background: var(--paper-pure); border: 1px solid var(--ink-10); border-radius: var(--r-lg); padding: 36px 32px; display: flex; flex-direction: column; position: relative; transition: transform .35s var(--ease-out), box-shadow .35s; }
.plan:hover { transform: translateY(-6px); box-shadow: 0 26px 60px -20px rgba(26,23,20,.16); }
.plan-hero { background: var(--ink); color: var(--paper); border-color: var(--ink); overflow: hidden; }
.plan-hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 100% 0%, rgba(196,65,12,.3), transparent 55%); pointer-events: none; }
.plan-hero > * { position: relative; }
.plan-badge { position: absolute; top: 18px; right: 18px; background: var(--gradient-vivid); color: #fff; padding: 5px 12px; border-radius: 100px; font-size: 9px; letter-spacing: .14em; z-index: 2; }
.plan-n { font-size: 10px; letter-spacing: .14em; color: var(--ink-30); margin-bottom: 16px; }
.plan-hero .plan-n { color: var(--accent-soft); }
.plan .h3 { margin-bottom: 14px; }
.plan-story { font-size: 14px; color: var(--ink-50); line-height: 1.65; margin-bottom: 26px; min-height: 96px; }
.plan-hero .plan-story { color: rgba(250,247,242,.6); }
.plan-price { display: flex; align-items: baseline; gap: 3px; margin-bottom: 6px; }
.plan-price .cur { font-family: var(--font-display); font-size: 22px; color: var(--accent); }
.plan-price .amt { font-family: var(--font-display); font-style: italic; font-size: 52px; background: var(--gradient-vivid); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; line-height: 1; }
.plan-price .per { font-size: 13px; color: var(--ink-30); }
.plan-hero .plan-price .per { color: rgba(250,247,242,.4); }
.plan-yr { font-size: 11px; color: var(--ink-30); margin-bottom: 24px; }
.plan-hero .plan-yr { color: rgba(250,247,242,.4); }
.plan-cta { width: 100%; margin-bottom: 20px; }
.plan-hero .btn-secondary { background: transparent; border-color: rgba(250,247,242,.25); color: var(--paper); }
.plan-for { font-size: 9.5px; letter-spacing: .1em; color: var(--ink-30); padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px solid var(--ink-05); }
.plan-hero .plan-for { color: rgba(250,247,242,.35); border-bottom-color: rgba(250,247,242,.1); }
.plan-feats { flex: 1; }
.pf { display: flex; align-items: flex-start; gap: 10px; padding: 6px 0; font-size: 13.5px; color: var(--ink-70); }
.pf i { color: var(--positive); font-style: normal; flex: 0 0 14px; }
.pf span { min-width: 0; }
.plan-hero .pf { color: rgba(250,247,242,.7); }
.plan-hero .pf i { color: var(--accent-soft); }
.pr-note { text-align: center; margin-top: 40px; font-size: 11px; color: var(--ink-30); letter-spacing: .08em; }
.p7 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.p7-i { padding: 24px; border: 1px solid rgba(250,247,242,.12); border-radius: var(--r); transition: border-color .3s, transform .3s; }
.p7-i:hover { border-color: rgba(251,146,60,.4); transform: translateY(-4px); }
.p7-i b { display: block; font-size: 15px; margin-bottom: 8px; color: var(--paper); }
.p7-i span { font-size: 13px; color: rgba(250,247,242,.55); line-height: 1.6; }
.p7-i span b { display: inline; color: var(--accent-soft); }
.faq { max-width: 820px; }
.fq { border-bottom: 1px solid var(--ink-10); }
.fq summary { padding: 22px 0; font-weight: 600; font-size: 16.5px; cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.fq summary::-webkit-details-marker { display: none; }
.fq summary::after { content: "+"; color: var(--accent); font-size: 22px; transition: transform .25s; }
.fq[open] summary::after { transform: rotate(45deg); }
.fq p { padding: 0 0 24px; color: var(--ink-70); font-size: 15px; max-width: 70ch; }
.fq a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

/* ==========================================================================
   FEATURES
   ========================================================================== */
.f-count { display: inline-flex; align-items: center; gap: 9px; padding: 9px 18px; border: 1px solid var(--ink-10); border-radius: 100px; background: var(--paper-pure); font-size: 10.5px; letter-spacing: .12em; color: var(--ink-50); }
.f-count .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--positive); }
.mod-switch { border-bottom: 1px solid var(--ink-10); }
.mod-switch .container { display: flex; gap: 6px; padding-top: 12px; }
.mod-tab { padding: 12px 20px; font-size: 14px; color: var(--ink-50); border-bottom: 2px solid transparent; }
.mod-tab.on { color: var(--ink); font-weight: 600; border-bottom-color: var(--accent); }
.mod-tab.soon { color: var(--ink-30); }
.mod-tab.soon i { font-size: 9px; letter-spacing: .1em; text-transform: uppercase; opacity: .6; }
.f-cat { margin-bottom: 64px; }
.f-cat-h { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; padding-bottom: 14px; margin-bottom: 24px; border-bottom: 1px solid var(--ink-10); position: relative; }
.f-cat-h::after { content: ""; position: absolute; left: 0; bottom: -1px; height: 2px; width: 0; background: var(--gradient-vivid); transition: width .9s var(--ease-out); }
.f-cat.in .f-cat-h::after { width: 110px; }
.f-cat-n { font-size: 10px; letter-spacing: .12em; color: var(--ink-30); }
.f-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.f-card { background: var(--paper-pure); border: 1px solid var(--ink-10); border-radius: var(--r); padding: 22px; position: relative; transition: transform .3s var(--ease-out), border-color .3s, box-shadow .3s; }
.f-card:hover { transform: translateY(-5px); border-color: rgba(196,65,12,.35); box-shadow: 0 18px 44px -14px rgba(196,65,12,.2); }
.f-card b { display: block; font-size: 14.5px; margin-bottom: 7px; }
.f-card span { font-size: 12.5px; color: var(--ink-50); line-height: 1.55; }
.f-core, .f-badge { position: absolute; top: 14px; right: 14px; font-family: var(--font-mono); font-size: 8.5px; letter-spacing: .1em; padding: 3px 8px; border-radius: 100px; }
.f-core { background: var(--accent-bg); color: var(--accent); }
.f-badge { color: #fff; }
.f-b-popular { background: var(--accent); }
.f-b-premium { background: var(--violet); }
.f-b-timesaver { background: var(--positive); }
.f-b-new { background: var(--gradient-vivid); }

/* ==========================================================================
   MODULES
   ========================================================================== */
.voc { display: grid; grid-template-columns: 1fr auto 1fr 1fr 1fr; gap: 20px; align-items: start; }
.voc-col { }
.voc-h { font-size: 9.5px; letter-spacing: .12em; color: var(--ink-30); margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid var(--ink-10); }
.voc-i { padding: 11px 0; font-size: 14.5px; color: var(--ink-50); border-bottom: 1px solid var(--ink-05); }
.voc-col.live .voc-h { color: var(--accent); border-bottom-color: rgba(196,65,12,.3); }
.voc-col.live .voc-i { color: var(--ink); font-weight: 500; }
.voc-col.dim { opacity: .45; }
.voc-arrow { color: var(--ink-30); font-size: 20px; padding-top: 34px; }
.voc-note { margin-top: 44px; font-size: 15px; color: var(--ink-50); max-width: 70ch; }
.mod-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.mod-card { background: var(--paper-pure); border: 1px solid var(--ink-10); border-radius: var(--r-lg); padding: 30px; transition: transform .35s var(--ease-out), border-color .3s; }
.mod-card:hover { transform: translateY(-5px); border-color: rgba(196,65,12,.3); }
.mod-card.soon { opacity: .6; }
.mod-card.yours { border-style: dashed; background: transparent; }
.mod-top { display: flex; justify-content: space-between; margin-bottom: 18px; }
.mod-st { font-size: 9px; letter-spacing: .14em; color: var(--positive); }
.mod-card.soon .mod-st, .mod-card.yours .mod-st { color: var(--ink-30); }
.mod-fc { font-size: 9px; letter-spacing: .1em; color: var(--ink-30); }
.mod-card .h3 { margin-bottom: 12px; }
.mod-card p { font-size: 14px; color: var(--ink-50); line-height: 1.65; margin-bottom: 20px; }
.mod-link { font-size: 13.5px; font-weight: 600; color: var(--accent); display: inline-flex; gap: 6px; }
.mod-link.dim { color: var(--ink-30); }
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.stp { padding-top: 24px; border-top: 1px solid var(--ink-10); position: relative; }
.stp::before { content: ""; position: absolute; top: -1px; left: 0; width: 0; height: 2px; background: var(--gradient-vivid); transition: width .8s var(--ease-out); }
.steps.in .stp::before { width: 40px; }
.stp-n { font-size: 11px; color: var(--accent); letter-spacing: .12em; margin-bottom: 14px; }
.stp h4 { margin-bottom: 8px; }
.stp p { font-size: 13.5px; color: var(--ink-50); line-height: 1.6; }

/* ==========================================================================
   ABOUT
   ========================================================================== */
.story { display: grid; grid-template-columns: 1fr 1.3fr; gap: 70px; align-items: start; }
.story-side { position: sticky; top: 120px; }
.story-body p { font-size: 17px; color: var(--ink-70); margin-bottom: 22px; line-height: 1.75; opacity: 0; transform: translateY(20px); transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); }
.story-body p.in { opacity: 1; transform: none; }
.story-body b { color: var(--ink); font-weight: 600; }
.prin { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.prin-i { background: var(--paper-pure); border: 1px solid var(--ink-10); border-radius: var(--r-lg); padding: 32px; }
.prin-n { font-size: 11px; color: var(--accent); letter-spacing: .14em; margin-bottom: 16px; }
.prin-i .h3 { margin-bottom: 12px; }
.prin-i p { font-size: 14.5px; color: var(--ink-50); line-height: 1.7; }
.ab-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
.ab-s b { display: block; font-size: 52px; font-weight: 500; background: var(--gradient-vivid); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; line-height: 1; margin-bottom: 10px; }
.ab-s span { font-size: 13.5px; color: rgba(250,247,242,.5); }
.co { display: grid; grid-template-columns: 1.2fr 1fr; gap: 56px; align-items: center; }
.co-card { background: var(--paper-pure); border: 1px solid var(--ink-10); border-radius: var(--r-lg); padding: 30px; }
.co-r { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--ink-05); }
.co-r:last-child { border: 0; }
.co-r span { font-size: 9.5px; letter-spacing: .12em; color: var(--ink-30); }
.co-r b { font-size: 14px; font-weight: 500; }

/* ==========================================================================
   CONTACT
   ========================================================================== */
.ct-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
.ct-ch { margin-top: 40px; display: flex; flex-direction: column; gap: 12px; }
.ch { display: flex; gap: 16px; padding: 20px; border: 1px solid var(--ink-10); border-radius: var(--r); background: var(--paper-pure); transition: border-color .3s, transform .3s var(--ease-out); }
.ch:hover { border-color: rgba(196,65,12,.4); transform: translateX(5px); }
.ch-i { width: 40px; height: 40px; border-radius: 11px; background: var(--accent-bg); color: var(--accent); display: grid; place-items: center; font-family: var(--font-display); font-size: 16px; flex-shrink: 0; transition: transform .3s var(--ease-out); }
.ch:hover .ch-i { transform: scale(1.1) rotate(-8deg); }
.ch b { display: block; font-size: 15px; margin-bottom: 3px; }
.ch-v { display: block; font-size: 13.5px; color: var(--accent); margin-bottom: 3px; }
.ch small { font-size: 12.5px; color: var(--ink-30); }
.ct-form { background: var(--paper-pure); border: 1px solid var(--ink-10); border-radius: var(--r-lg); padding: 36px; }
.ct-sub { font-size: 13.5px; color: var(--ink-50); margin: 8px 0 24px; }
.fg { margin-bottom: 16px; }
.fg-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.fg label { display: block; font-size: 12.5px; font-weight: 500; margin-bottom: 6px; color: var(--ink-70); }
.fi { width: 100%; padding: 12px 14px; border: 1px solid var(--ink-10); border-radius: 10px; font: inherit; font-size: 14px; background: var(--paper); transition: border-color .25s, box-shadow .25s; }
.fi:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px rgba(196,65,12,.1); background: var(--paper-pure); }
textarea.fi { resize: vertical; min-height: 100px; }
.ct-fine { font-size: 10.5px; color: var(--ink-30); text-align: center; margin-top: 14px; }
.ct-err { background: rgba(214,69,69,.08); border: 1px solid rgba(214,69,69,.3); color: #a33; padding: 12px 14px; border-radius: 10px; font-size: 13.5px; margin-bottom: 18px; }
.ct-ok { text-align: center; padding: 20px 0; }
.ct-ok-i { width: 56px; height: 56px; border-radius: 50%; background: var(--gradient-vivid); color: #fff; display: grid; place-items: center; font-size: 26px; margin: 0 auto 20px; }
.ct-ok p { color: var(--ink-50); font-size: 14.5px; max-width: 44ch; margin: 12px auto 0; }

@media (max-width: 1100px) {
  .oja-hero-grid, .vs-grid, .act-grid, .story, .co, .ct-grid { grid-template-columns: 1fr; gap: 40px; }
  .story-side { position: static; }
  .safe-grid, .plans, .p7, .mod-grid, .prin, .steps { grid-template-columns: repeat(2, 1fr); }
  .f-grid { grid-template-columns: repeat(2, 1fr); }
  .ab-stats { grid-template-columns: repeat(2, 1fr); gap: 24px; }
  .voc { grid-template-columns: 1fr 1fr; }
  .voc-arrow { display: none; }
}
@media (max-width: 640px) {
  .safe-grid, .plans, .p7, .mod-grid, .prin, .steps, .f-grid, .ab-stats, .voc, .fg-row { grid-template-columns: 1fr; }
  .ct-form { padding: 24px; }
}

/* ---------- PRICING: periods + feature badges ---------- */
.pr-modhead { text-align: center; margin-bottom: 44px; }
.pr-modtag { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border: 1px solid var(--ink-10); border-radius: 100px; background: var(--paper-pure); font-size: 10.5px; letter-spacing: .12em; color: var(--ink-50); }
.pr-modtag .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--positive); }
.plan-periods { display: flex; flex-direction: column; gap: 6px; margin: 14px 0 18px; }
.pp { display: flex; align-items: center; gap: 10px; font-size: 12px; }
.pp-l { font-size: 9.5px; letter-spacing: .1em; color: var(--ink-30); min-width: 74px; }
.pp-p { color: var(--ink-70); font-weight: 500; }
.pp-s { font-size: 8.5px; letter-spacing: .08em; color: var(--positive); background: rgba(77,124,15,.1); padding: 2px 7px; border-radius: 100px; }
.plan-hero .pp-l { color: rgba(250,247,242,.35); }
.plan-hero .pp-p { color: rgba(250,247,242,.75); }
.plan-hero .pp-s { color: #9ae6a4; background: rgba(154,230,164,.12); }
.plan-setup { font-size: 10px; color: var(--ink-30); margin-bottom: 16px; letter-spacing: .06em; }
.plan-hero .plan-setup { color: rgba(250,247,242,.4); }
.pf-n { flex: 1 1 auto; min-width: 0; }
.pf-b { flex: 0 0 auto; font-family: var(--font-mono); font-size: 8px; letter-spacing: .06em; padding: 2px 7px; border-radius: 100px; color: #fff; white-space: nowrap; }
.pf-b-popular { background: var(--accent); }
.pf-b-premium { background: var(--violet); }
.pf-b-timesaver { background: var(--positive); }
.pf-b-new { background: var(--gradient-vivid); }
.pf-more { display: inline-block; margin-top: 12px; font-size: 10px; letter-spacing: .1em; color: var(--accent); }
.plan-hero .pf-more { color: var(--accent-soft); }
.p7-i a { color: var(--accent-soft); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- MODULES: scale, rbac, tenant, custom ---------- */
.scale { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.sc { background: var(--paper-pure); border: 1px solid var(--ink-10); border-radius: var(--r-lg); padding: 32px; transition: transform .35s var(--ease-out), border-color .3s; }
.sc:hover { transform: translateY(-5px); border-color: rgba(196,65,12,.3); }
.sc-n { font-size: 10px; letter-spacing: .16em; color: var(--accent); margin-bottom: 16px; }
.sc .h3 { margin-bottom: 12px; }
.sc p { font-size: 14.5px; color: var(--ink-50); line-height: 1.7; }
.rbac-grid { display: grid; grid-template-columns: 1.4fr repeat(5, 1fr); gap: 1px; background: rgba(250,247,242,.1); border: 1px solid rgba(250,247,242,.1); border-radius: var(--r); overflow: hidden; }
.rb-h { background: var(--ink); padding: 14px 12px; font-size: 9px; letter-spacing: .1em; color: rgba(250,247,242,.35); }
.rb-r { background: var(--ink); padding: 15px 14px; font-size: 14px; font-weight: 500; color: var(--paper); }
.rb-c { background: var(--ink); padding: 15px 12px; font-family: var(--font-mono); font-size: 11px; }
.rb-c.on { color: #9ae6a4; }
.rb-c.part { color: var(--accent-soft); }
.rb-c.off { color: rgba(250,247,242,.2); }
.rb-c.q { color: var(--violet); font-weight: 700; }
.rb-r.yours { color: var(--accent-soft); font-style: italic; }
.rbac-note { margin-top: 24px; font-size: 14px; color: rgba(250,247,242,.5); max-width: 76ch; }
.rbac-note b { color: var(--paper); }
.tenant { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.ten-vis { display: flex; flex-direction: column; gap: 10px; }
.ten-box { background: var(--paper-pure); border: 1px solid var(--ink-10); border-radius: var(--r); padding: 16px 18px; display: flex; align-items: center; gap: 7px; }
.ten-box span { font-size: 9.5px; letter-spacing: .1em; color: var(--ink-30); margin-right: auto; }
.ten-box i { width: 7px; height: 7px; border-radius: 50%; background: var(--accent-soft); opacity: .5; }
.ten-wall { text-align: center; font-size: 9px; letter-spacing: .14em; color: var(--ink-30); padding: 8px; border-top: 1px dashed var(--ink-10); border-bottom: 1px dashed var(--ink-10); }
.cust { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.cu { padding-top: 22px; border-top: 1px solid var(--ink-10); position: relative; }
.cu::before { content: ""; position: absolute; top: -1px; left: 0; width: 0; height: 2px; background: var(--gradient-vivid); transition: width .8s var(--ease-out); }
.cust.in .cu::before { width: 42px; }
.cu-n { font-size: 11px; color: var(--accent); letter-spacing: .12em; margin-bottom: 12px; }
.cu h4 { margin-bottom: 8px; }
.cu p { font-size: 13.5px; color: var(--ink-50); line-height: 1.6; }
.cust-note { margin-top: 44px; padding: 22px 26px; border-left: 3px solid var(--violet); background: var(--paper-pure); border-radius: 0 var(--r) var(--r) 0; font-size: 14.5px; color: var(--ink-50); line-height: 1.7; }
.cust-note b { color: var(--ink); }

/* ---------- FEATURES: filter + tier ---------- */
.f-filter { border-bottom: 1px solid var(--ink-10); background: var(--paper-pure); position: sticky; top: var(--nav-h); z-index: 40; }
.f-filter .container { display: flex; align-items: center; gap: 8px; padding-top: 14px; padding-bottom: 14px; flex-wrap: wrap; }
.f-filter-l { font-size: 9.5px; letter-spacing: .14em; color: var(--ink-30); margin-right: 4px; }
.f-chip { padding: 8px 15px; border: 1px solid var(--ink-10); border-radius: 100px; font-size: 13px; color: var(--ink-50); display: inline-flex; align-items: center; gap: 7px; transition: all .25s; }
.f-chip i { font-size: 10px; opacity: .5; font-style: normal; }
.f-chip:hover { border-color: var(--ink-30); }
.f-chip.on { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.f-chip.on i { opacity: .6; }
.f-card { display: flex; flex-direction: column; }
.f-card-top { display: flex; gap: 5px; margin-bottom: 10px; min-height: 16px; }
.f-core, .f-badge { position: static; font-family: var(--font-mono); font-size: 8.5px; letter-spacing: .1em; padding: 3px 8px; border-radius: 100px; }
.f-tier { margin-top: auto; padding-top: 12px; font-size: 8.5px; letter-spacing: .1em; color: var(--ink-30); }
.f-empty { text-align: center; padding: 60px; color: var(--ink-30); font-size: 15px; }

@media (max-width: 1100px) {
  .scale, .cust, .tenant { grid-template-columns: 1fr; gap: 24px; }
  .rbac-grid { grid-template-columns: 1fr; }
  .rb-h { display: none; }
  .rb-c::before { content: attr(class); }
}
@media (max-width: 640px) { .cust { grid-template-columns: 1fr; } }


/* ==========================================================================
   AUDIT FIXES — verified with a contrast probe across all 13 pages
   ========================================================================== */

/* 1. White-on-white: elements that carry their OWN gradient/solid background
   were inheriting -webkit-text-fill-color:transparent from the `em` rule.
   Force the fill back so the label is visible. */
.plan-badge, .call-av, .day-tags .prem, .pf-b, .f-badge, .grad-badge,
.btn-gradient, .btn-ink, .f-chip.on, .wal-btn, .ct-ok-i {
  -webkit-text-fill-color: currentColor;
}

/* 2. The gradient text rule was too greedy — scope it to real emphasis only,
   never to buttons, badges or chips that set their own colour. */
.btn em, .badge em, .plan-badge em, .f-badge em, .pf-b em {
  background: none;
  -webkit-text-fill-color: currentColor;
  color: inherit;
}

/* 3. Icon squares: bump the tint so the glyph reads at a glance. */
.ch-i { background: rgba(196,65,12,.14); }
.pill-ico, .surf-icon { color: var(--accent-soft); }

/* 4. "SAVE x%" chips: raise contrast on both light and dark cards. */
.pp-s { background: rgba(77,124,15,.14); color: #3f6a0c; }
.plan-hero .pp-s { background: rgba(154,230,164,.16); color: #b6f0c0; }

/* 5. Arrow inside solid buttons must inherit the button's colour. */
.btn .btn-arrow { color: currentColor; -webkit-text-fill-color: currentColor; }


/* call card icon */
.call-ico { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center;
  background: rgba(77,124,15,.12); border: 1px solid rgba(77,124,15,.25); margin: 0 auto 14px; }
.call-ico svg { width: 17px; height: 17px; color: var(--positive); }

/* ==========================================================================
   FIX: CTA text colour on dark sections. .cta sets background:var(--paper-pure)
   which was overriding .section-dark, leaving dark text on a dark band.
   ========================================================================== */
.section-dark.cta { background: var(--ink); color: var(--paper); }
.section-dark.cta::before { background: radial-gradient(circle, rgba(196,65,12,.22), transparent 65%); }
.section-dark.cta .h2 { color: var(--paper); }
.section-dark.cta .lead { color: rgba(250,247,242,.6); }
.section-soft.cta { background: var(--paper-soft); }
.cta .h2 em { -webkit-text-fill-color: transparent; }

/* ==========================================================================
   APP SHOWCASE — real 589×1280 screenshots in device frames
   ========================================================================== */
.apps { background: var(--paper-soft); overflow: hidden; }
.app-tabs { display: flex; gap: 8px; justify-content: center; margin-bottom: 56px; }
.app-tab { padding: 11px 24px; border: 1px solid var(--ink-10); border-radius: 100px; font-size: 14px; font-weight: 500; color: var(--ink-50); background: var(--paper-pure); transition: all .25s; }
.app-tab:hover { border-color: var(--ink-30); }
.app-tab.on { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.app-stage { display: flex; justify-content: center; align-items: flex-end; gap: 22px; perspective: 2000px; }
.app-stage[hidden] { display: none; }   /* [hidden] must beat display:flex */
.ph { flex: 0 0 auto; text-align: center; transition: transform .45s var(--ease-out); }
.ph-scr {
  width: 178px; border-radius: 24px; overflow: hidden; background: #14100d;
  padding: 6px; border: 1px solid rgba(26,23,20,.14);
  box-shadow: 0 28px 60px -20px rgba(26,23,20,.35);
}
.ph-scr img { width: 100%; border-radius: 19px; display: block; }
.ph-cap { display: block; margin-top: 14px; font-size: 9px; letter-spacing: .12em; color: var(--ink-30); }
/* fan the phones — centre one leads */
.app-stage .ph:nth-child(1) { transform: rotate(-4deg) translateY(26px) scale(.9); }
.app-stage .ph:nth-child(2) { transform: rotate(-2deg) translateY(10px) scale(.96); }
.app-stage .ph.lead-ph { transform: none; z-index: 3; }
.app-stage .ph.lead-ph .ph-scr { width: 210px; box-shadow: 0 40px 80px -20px rgba(26,23,20,.45); }
.app-stage .ph:nth-child(4) { transform: rotate(2deg) translateY(10px) scale(.96); }
.app-stage .ph:nth-child(5) { transform: rotate(4deg) translateY(26px) scale(.9); }
.app-stage .ph:hover { transform: translateY(-10px) rotate(0) scale(1); z-index: 5; }
.app-foot { text-align: center; margin-top: 60px; }
.app-badges { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-bottom: 18px; }
.sb { display: inline-flex; align-items: center; gap: 11px; padding: 11px 22px; border: 1px solid var(--ink-10); border-radius: 12px; background: var(--paper-pure); transition: border-color .25s, transform .25s; }
.sb:hover { border-color: var(--ink-30); transform: translateY(-2px); }
.sb svg { width: 22px; height: 22px; color: var(--ink); }
.sb small { display: block; font-size: 9px; color: var(--ink-30); line-height: 1.2; }
.sb b { font-size: 14px; }
.app-note { font-size: 9.5px; letter-spacing: .12em; color: var(--ink-30); }
@media (max-width: 1100px) {
  .app-stage { flex-wrap: wrap; gap: 16px; }
  .app-stage .ph { transform: none !important; }
  .app-stage .ph.lead-ph .ph-scr { width: 178px; }
}
@media (max-width: 640px) { .ph-scr, .app-stage .ph.lead-ph .ph-scr { width: 144px; } }

/* ---------- ABOUT: who it's for ---------- */
.who { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.who-i { padding: 22px; border: 1px solid rgba(250,247,242,.12); border-radius: var(--r); transition: border-color .3s, transform .3s var(--ease-out); }
.who-i:hover { border-color: rgba(251,146,60,.4); transform: translateY(-4px); }
.who-i b { display: block; font-size: 14.5px; color: var(--paper); margin-bottom: 7px; }
.who-i span { font-size: 12.5px; color: rgba(250,247,242,.5); line-height: 1.6; }
.who-note { margin-top: 36px; font-size: 14px; color: rgba(250,247,242,.5); max-width: 76ch; }
.who-note a { color: var(--accent-soft); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- OJA: ask-first + flow ---------- */
.act-ask { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--ink-10); font-size: 12.5px; color: var(--ink-50); line-height: 1.6; }
.act-ask i { font-style: normal; font-family: var(--font-mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); background: var(--accent-bg); padding: 2px 7px; border-radius: 100px; margin-right: 7px; }
.flow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.fl { padding-top: 22px; border-top: 1px solid var(--ink-10); position: relative; }
.fl::before { content: ""; position: absolute; top: -1px; left: 0; width: 0; height: 2px; background: var(--gradient-vivid); transition: width .8s var(--ease-out); }
.flow.in .fl::before { width: 44px; }
.fl-n { font-size: 9.5px; letter-spacing: .12em; color: var(--accent); margin-bottom: 12px; }
.fl h4 { margin-bottom: 8px; }
.fl p { font-size: 13.5px; color: var(--ink-50); line-height: 1.65; }
@media (max-width: 1100px) { .who, .flow { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .who, .flow { grid-template-columns: 1fr; } }

/* ==========================================================================
   BLOG — left-aligned, magazine layout (was centred + old palette)
   ========================================================================== */
.bl-feat {
  display: grid; grid-template-columns: 1fr 220px; gap: 40px; align-items: center;
  background: var(--ink); color: var(--paper); border-radius: var(--r-lg);
  padding: 48px; margin-bottom: 40px; position: relative; overflow: hidden;
  transition: transform .4s var(--ease-out);
}
.bl-feat::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 100% 0%, rgba(196,65,12,.3), transparent 55%); pointer-events: none; }
.bl-feat > * { position: relative; }
.bl-feat:hover { transform: translateY(-5px); }
.bl-feat-t { margin: 16px 0; font-size: clamp(28px, 2.6vw, 44px); }
.bl-feat .lead { color: rgba(250,247,242,.6); margin-bottom: 22px; }
.bl-feat-r { display: flex; justify-content: flex-end; }
.bl-latest { font-size: 9px; letter-spacing: .18em; color: var(--accent-soft); border: 1px solid rgba(251,146,60,.35); padding: 7px 14px; border-radius: 100px; }
.bl-meta { display: flex; gap: 9px; align-items: center; font-size: 10px; letter-spacing: .1em; color: var(--ink-30); }
.bl-feat .bl-meta { color: rgba(250,247,242,.4); }
.bl-meta .sep { opacity: .4; }
.bl-kw { color: var(--accent); font-weight: 500; }
.bl-feat .bl-kw { color: var(--accent-soft); }
.bl-read { font-size: 13.5px; font-weight: 600; color: var(--accent); display: inline-flex; gap: 6px; align-items: center; }
.bl-feat .bl-read { color: var(--accent-soft); }
.bl-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.bl-card {
  background: var(--paper-pure); border: 1px solid var(--ink-10); border-radius: var(--r-lg);
  padding: 32px; display: flex; flex-direction: column;
  transition: transform .35s var(--ease-out), border-color .3s, box-shadow .35s;
}
.bl-card:hover { transform: translateY(-5px); border-color: rgba(196,65,12,.3); box-shadow: 0 24px 55px -18px rgba(26,23,20,.16); }
.bl-t { font-family: var(--font-display); font-size: 24px; line-height: 1.2; margin: 14px 0 12px; letter-spacing: -.01em; }
.bl-x { font-size: 14.5px; color: var(--ink-50); line-height: 1.65; flex: 1; margin-bottom: 20px; }
.bl-foot { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding-top: 18px; border-top: 1px solid var(--ink-05); font-size: 12px; }
.bl-empty { text-align: center; padding: 100px 20px; }
.bl-empty p { font-family: var(--font-display); font-size: 26px; margin-bottom: 10px; }
.bl-empty span { color: var(--ink-50); font-size: 15px; }
@media (max-width: 900px) {
  .bl-feat { grid-template-columns: 1fr; padding: 32px; }
  .bl-feat-r { display: none; }
  .bl-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   DEVICE FRAMES — real iOS + Android chrome
   ========================================================================== */
.call-pair { display: flex; gap: 22px; justify-content: center; align-items: flex-start; }
.dev { text-align: center; }
.dev-frame {
  position: relative; width: 176px; padding: 8px;
  background: linear-gradient(160deg, #2a2622, #14100d);
  box-shadow: 0 30px 70px -18px rgba(26,23,20,.5), inset 0 0 0 1px rgba(255,255,255,.08);
}
.dev-ios .dev-frame { border-radius: 32px; }
.dev-and .dev-frame { border-radius: 24px; }
/* side buttons */
.dev-frame::before, .dev-frame::after {
  content: ""; position: absolute; width: 2px; border-radius: 2px; background: #3a342e;
}
.dev-frame::before { left: -2px; top: 76px; height: 26px; }
.dev-frame::after  { right: -2px; top: 92px; height: 44px; }
.dev-island {
  position: absolute; top: 15px; left: 50%; transform: translateX(-50%);
  width: 54px; height: 15px; background: #000; border-radius: 100px; z-index: 3;
}
.dev-punch {
  position: absolute; top: 16px; left: 50%; transform: translateX(-50%);
  width: 7px; height: 7px; background: #000; border-radius: 50%; z-index: 3;
}
.dev-scr { border-radius: 26px; overflow: hidden; aspect-ratio: 9/19.5; position: relative; }
.dev-and .dev-scr { border-radius: 18px; }
.dev-cap { display: block; margin-top: 12px; font-size: 8.5px; letter-spacing: .12em; color: var(--ink-30); }

/* ---- iOS CallKit ---- */
.call-ios {
  background: linear-gradient(170deg, #3a3430, #1c1815 60%);
  display: flex; flex-direction: column; padding: 14px 12px;
}
.ios-bar { display: flex; justify-content: space-between; font-size: 8px; color: rgba(255,255,255,.9); padding: 4px 6px 0; }
.ios-sig { letter-spacing: -1px; }
.ios-top { text-align: center; padding-top: 26px; }
.ios-app { font-size: 7.5px; letter-spacing: .1em; color: rgba(255,255,255,.5); text-transform: uppercase; }
.ios-av {
  width: 52px; height: 52px; border-radius: 50%; margin: 14px auto 12px;
  background: var(--gradient-vivid); color: #fff; display: grid; place-items: center;
  font-family: var(--font-display); font-size: 18px; -webkit-text-fill-color: #fff;
}
.ios-name { display: block; font-size: 15px; color: #fff; font-weight: 500; margin-bottom: 3px; font-family: var(--font-body); }
.ios-sub { font-size: 9px; color: rgba(255,255,255,.5); }
.ios-acts { margin-top: auto; display: flex; justify-content: space-around; padding-bottom: 10px; }
.ios-act { text-align: center; }
.ios-act i { display: block; font-style: normal; font-size: 7.5px; color: rgba(255,255,255,.6); margin-top: 5px; }
.ios-btn { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; font-size: 15px; color: #fff; }
.ios-btn.dec { background: #ff453a; }
.ios-btn.acc { background: #32d74b; }

/* ---- Android full-screen intent ---- */
.call-and { background: linear-gradient(175deg, #1f1b18, #100d0b); display: flex; flex-direction: column; padding: 12px 10px; }
.and-bar { display: flex; justify-content: space-between; font-size: 7.5px; color: rgba(255,255,255,.85); padding: 4px 4px 0; }
.and-top { text-align: center; padding-top: 30px; }
.and-app { font-size: 8px; color: rgba(255,255,255,.55); }
.and-av {
  width: 50px; height: 50px; border-radius: 50%; margin: 16px auto 12px;
  background: var(--gradient-vivid); color: #fff; display: grid; place-items: center;
  font-family: var(--font-display); font-size: 17px; -webkit-text-fill-color: #fff;
}
.and-name { display: block; font-size: 14px; color: #fff; font-weight: 500; font-family: var(--font-body); }
.and-sub { font-size: 8.5px; color: rgba(255,255,255,.45); }
.and-acts { margin-top: auto; display: flex; justify-content: space-around; padding-bottom: 14px; }
.and-btn { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-size: 14px; color: #fff; }
.and-btn.dec { background: #e5484d; }
.and-btn.acc { background: #30a46c; }

/* ---- the ring ---- */
.ringing .ios-btn.acc, .ringing .and-btn.acc { animation: ring-pulse 1.5s ease-in-out infinite; }
@keyframes ring-pulse {
  0%,100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(50,215,75,.55); }
  50%     { transform: scale(1.07); box-shadow: 0 0 0 11px rgba(50,215,75,0); }
}
.ringing .ios-av, .ringing .and-av { animation: av-pulse 1.5s ease-in-out infinite; }
@keyframes av-pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.04); } }
.dev-and { margin-top: 26px; }
@media (max-width: 640px) { .call-pair { gap: 12px; } .dev-frame { width: 132px; } }

/* real chrome on the app showcase phones too */
.ph-scr { position: relative; }
.ph-scr::before {
  content: ""; position: absolute; top: 10px; left: 50%; transform: translateX(-50%);
  width: 40px; height: 11px; background: #000; border-radius: 100px; z-index: 2;
}

/* ==========================================================================
   LEDGER — the money story
   ========================================================================== */
.ldg { display: grid; grid-template-columns: 1.35fr .65fr; gap: 48px; align-items: start; }
.ldg-rail { display: flex; flex-direction: column; }
.ldg-step {
  display: grid; grid-template-columns: 92px 1fr auto; gap: 20px; align-items: center;
  padding: 20px 0; border-bottom: 1px solid rgba(250,247,242,.08);
  opacity: 0; transform: translateX(-24px);
  transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
}
.ldg.in .ldg-step { opacity: 1; transform: none; }
.ldg.in .ldg-step:nth-child(1){transition-delay:.05s} .ldg.in .ldg-step:nth-child(2){transition-delay:.15s}
.ldg.in .ldg-step:nth-child(3){transition-delay:.25s} .ldg.in .ldg-step:nth-child(4){transition-delay:.35s}
.ldg.in .ldg-step:nth-child(5){transition-delay:.45s} .ldg.in .ldg-step:nth-child(6){transition-delay:.55s}
.ldg-t { font-size: 9.5px; letter-spacing: .1em; color: rgba(250,247,242,.35); }
.ldg-b b { display: block; font-size: 15.5px; color: var(--paper); margin-bottom: 4px; font-weight: 500; }
.ldg-b span { font-size: 12.5px; color: rgba(250,247,242,.45); }
.ldg-v { font-family: var(--font-mono); font-size: 15px; color: rgba(250,247,242,.25); white-space: nowrap; }
.ldg-v.in { color: #9ae6a4; }
.ldg-v.out { color: var(--accent-soft); }
.ldg-panel { background: rgba(250,247,242,.04); border: 1px solid rgba(250,247,242,.12); border-radius: var(--r-lg); padding: 28px; position: sticky; top: 110px; }
.ldg-p-h { font-size: 9px; letter-spacing: .14em; color: rgba(250,247,242,.35); margin-bottom: 14px; }
.ldg-amt { font-family: var(--font-display); font-size: 44px; background: var(--gradient-vivid); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; line-height: 1; margin-bottom: 8px; }
.ldg-meta { font-size: 9px; letter-spacing: .1em; color: rgba(250,247,242,.3); margin-bottom: 26px; }
.ldg-bar { margin-bottom: 16px; font-size: 11.5px; color: rgba(250,247,242,.5); }
.ldg-bar span { display: block; margin-bottom: 6px; }
.ldg-bar i { display: block; height: 4px; border-radius: 4px; background: var(--gradient-vivid); width: 0; margin-bottom: 5px; transition: width 1.2s var(--ease-out) .3s; }
.ldg.in .ldg-bar i { width: var(--w); }
.ldg-bar b { font-family: var(--font-mono); font-size: 12px; color: var(--paper); }
.ldg-note { margin-top: 24px; padding-top: 20px; border-top: 1px solid rgba(250,247,242,.08); font-size: 12.5px; color: rgba(250,247,242,.45); line-height: 1.6; }
.ldg-note i { color: var(--accent-soft); font-style: italic; }
.ldg-kill { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 72px; padding-top: 48px; border-top: 1px solid rgba(250,247,242,.1); }
.kill b { display: block; font-size: 15px; color: var(--paper); margin-bottom: 8px; }
.kill span { font-size: 13px; color: rgba(250,247,242,.5); line-height: 1.6; }
@media (max-width: 1100px) {
  .ldg { grid-template-columns: 1fr; gap: 32px; }
  .ldg-panel { position: static; }
  .ldg-kill { grid-template-columns: repeat(2, 1fr); }
  .ldg-step { grid-template-columns: 72px 1fr auto; gap: 12px; }
}
@media (max-width: 640px) { .ldg-kill { grid-template-columns: 1fr; } }

/* ---------- SUPPORT / DOCS layout ---------- */
.sup-grid { display: grid; grid-template-columns: 1fr 320px; gap: 56px; align-items: start; }
.sup-side { position: sticky; top: 110px; display: flex; flex-direction: column; gap: 14px; }
.sup-card { background: var(--paper-pure); border: 1px solid var(--ink-10); border-radius: var(--r-lg); padding: 22px; }
.sup-h { font-size: 9px; letter-spacing: .14em; color: var(--ink-30); margin-bottom: 14px; }
.sup-r { display: block; padding: 12px 0; border-bottom: 1px solid var(--ink-05); transition: padding-left .25s; }
.sup-r:last-child { border: 0; }
.sup-r:hover { padding-left: 6px; }
.sup-r b { display: block; font-size: 14px; margin-bottom: 2px; }
.sup-r span { display: block; font-size: 13px; color: var(--accent); margin-bottom: 3px; }
.sup-r i { font-style: normal; font-size: 8.5px; letter-spacing: .1em; color: var(--ink-30); }
.sup-list li { font-size: 13px; color: var(--ink-50); padding: 7px 0 7px 16px; position: relative; }
.sup-list li::before { content: ""; position: absolute; left: 0; top: 14px; width: 5px; height: 5px; border-radius: 50%; background: var(--accent-soft); }
.sup-hrs b { display: block; font-size: 14px; margin-bottom: 8px; }
.sup-hrs span { font-size: 12.5px; color: var(--ink-50); line-height: 1.6; }
@media (max-width: 1000px) { .sup-grid { grid-template-columns: 1fr; } .sup-side { position: static; } }

/* ---------- DOCS ---------- */
.doc-grid { display: grid; grid-template-columns: 220px 1fr; gap: 56px; align-items: start; }
.doc-nav { position: sticky; top: 110px; }
.doc-nav a {
  display: block; padding: 8px 0 8px 14px; font-size: 13.5px; color: var(--ink-50);
  border-left: 2px solid var(--ink-10); transition: color .2s, border-color .2s;
}
.doc-nav a:hover { color: var(--ink); }
.doc-nav a.on { color: var(--accent); border-left-color: var(--accent); font-weight: 500; }
.doc-body { max-width: 72ch; }
@media (max-width: 1000px) { .doc-grid { grid-template-columns: 1fr; } .doc-nav { display: none; } }