/* ──────────────────────────────────────────────────────────────────
   Vraelis — lead follow-up site. Supplementary styles on top of
   tokens.css. Money/revenue moments use --warn (warm gold) sparingly.
   ────────────────────────────────────────────────────────────────── */

* { box-sizing: border-box; }
/* overflow-x: clip (not hidden) on both — clips horizontal overflow on mobile
   WITHOUT turning html/body into a scroll container, which would break the sticky
   header/topbar (position: sticky needs no scroll-container ancestor). */
html { scroll-behavior: smooth; overflow-x: clip; }
body { margin: 0; overflow-x: clip; max-width: 100%; }

/* ── LIGHT THEME — warm paper, green primary, soft depth ─────────── */
:root {
  --font-sans: var(--font-geist-sans), -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-display: var(--font-geist-sans), -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --r-xs: 8px;
  --r-sm: 11px;

  /* surfaces */
  --bg-0: #FAF8F4;   /* warm paper floor */
  --bg-1: #FFFFFF;   /* cards, panels */
  --bg-2: #F1EEE7;   /* recessed wells, alt sections */
  --bg-3: #F4F1EA;   /* hovered rows */
  --bg-elev: rgba(0,0,0,0.015);

  /* warm ink foregrounds — tuned for contrast on cream */
  --fg-1: #1B1A16;   /* headlines */
  --fg-2: #35322B;   /* body — ~10:1 */
  --fg-3: #565249;   /* secondary — ~6:1 */
  --fg-4: #54504A;   /* meta / labels — darkened for legibility (~7:1) */
  --fg-5: #6B645A;   /* fine print — darkened from decorative-only (~5:1) */
  --fg-on-accent: #FFFFFF;

  /* primary — emerald (growth / money) */
  --acc: #0E9E6C;
  --acc-deep: #0A7B54;
  --acc-glow: rgba(14,158,108,0.26);
  --acc-soft: rgba(14,158,108,0.09);
  --acc-line: rgba(14,158,108,0.28);
  --acc-line-2: rgba(14,158,108,0.50);

  --ok: #0E9E6C;
  --warn: #C2680C;
  --err: #DC2626;
  --rec: #DC2626;
  --rec-glow: rgba(220,38,38,0.4);

  /* hairlines on light */
  --line-1: rgba(28,27,24,0.08);
  --line-2: rgba(28,27,24,0.12);
  --line-3: rgba(28,27,24,0.20);
  --line-strong: rgba(28,27,24,0.32);
  --focus-ring: var(--acc);

  /* soft elevation */
  --shadow-card: 0 1px 2px rgba(28,27,24,0.04), 0 10px 28px -14px rgba(28,27,24,0.12);
  --shadow-win:  0 2px 6px rgba(28,27,24,0.05), 0 44px 80px -34px rgba(28,27,24,0.22);
}
.display {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.022em;
  line-height: 1.06;
}
.display .em { font-weight: 500; }
h1, h2, h3 { font-family: var(--font-display); letter-spacing: -0.02em; }
body { font-weight: 400; }

/* green primary button */
.btn {
  background: var(--acc);
  border-color: var(--acc);
  color: var(--fg-on-accent);
  border-radius: var(--r-sm);
}
.btn:hover  { background: var(--acc-deep); border-color: var(--acc-deep); color: var(--fg-on-accent); }
.btn:active { background: var(--acc-deep); }
.btn--ghost {
  background: var(--bg-1);
  border: 1px solid var(--line-3);
  color: var(--fg-1);
}
.btn--ghost:hover { background: var(--bg-3); border-color: var(--fg-1); color: var(--fg-1); }

/* money / revenue accent — burnt orange */
:root { --money: #C2540C; }

/* ─── layout helpers ─────────────────────────────────────────────── */
.wrap { max-width: var(--max-content); margin: 0 auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section-y); border-bottom: 1px solid var(--line-1); position: relative; }
/* App pages (account, lead detail) — dashboard density, not landing-page
   scale: content starts near the nav and cards stay compact. */
.section--app { padding-block: clamp(18px, 2.6vw, 30px) clamp(48px, 6vw, 80px); }
/* The account app styles its <summary> rows itself (inline listStyle:none);
   older Safari needs the vendor marker hidden too. */
summary::-webkit-details-marker { display: none; }

.eyebrow {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--acc-deep);
  display: inline-flex; align-items: center;
  margin: 0 0 18px;
}
.eyebrow--mut { color: var(--fg-4); }

.lead-copy {
  font-size: clamp(1.02rem, 1.25vw, 1.18rem);
  color: var(--fg-2); line-height: 1.55; max-width: 560px;
}

/* ─── card recipe ────────────────────────────────────────────────── */
.card {
  background: var(--bg-1);
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  padding: clamp(20px, 2.4vw, 28px);
  box-shadow: var(--shadow-card);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.card--hover:hover { border-color: var(--line-3); transform: translateY(-2px); box-shadow: 0 2px 4px rgba(28,27,24,0.05), 0 18px 40px -16px rgba(28,27,24,0.18); }
.card--acc { background: var(--acc-soft); border-color: var(--acc-line); box-shadow: none; }

/* hairline grid background block */
.gridbg {
  position: absolute; inset: 0; pointer-events: none; opacity: 0.6;
  background-image:
    linear-gradient(to right, var(--line-1) 1px, transparent 1px),
    linear-gradient(to bottom, var(--line-1) 1px, transparent 1px);
  background-size: 72px 72px;
  -webkit-mask-image: radial-gradient(ellipse 75% 60% at 50% 30%, #000 0%, transparent 78%);
  mask-image: radial-gradient(ellipse 75% 60% at 50% 30%, #000 0%, transparent 78%);
}

/* ─── pill / tag ─────────────────────────────────────────────────── */
.pill {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-mono); font-size: var(--fs-micro);
  letter-spacing: 0.06em; text-transform: uppercase;
  padding: 5px 10px; border-radius: var(--r-circle);
  border: 1px solid var(--line-2); color: var(--fg-3);
  background: var(--bg-2); white-space: nowrap;
}
.pill .dot { width: 6px; height: 6px; }

/* status colors for lead stages */
.st-new      { color: #2563EB; } .st-new .dot      { background:#2563EB; }
.st-contacted{ color: #0D9488; } .st-contacted .dot{ background:#0D9488; }
.st-qualified{ color: #7C3AED; } .st-qualified .dot{ background:#7C3AED; }
.st-booked   { color: var(--money); } .st-booked .dot { background:var(--money); }
.st-won      { color: #15803D; } .st-won .dot      { background:#15803D; }

/* ─── motion: reveal on scroll ───────────────────────────────────── */
/* Gentler travel + duration so scroll reveals read as a soft settle, not
   a long slide. */
.reveal { opacity: 0; transform: translateY(12px); transition: opacity 520ms var(--ease-out), transform 520ms var(--ease-out); }
.reveal.in { opacity: 1; transform: none; }
.reveal[data-d="1"] { transition-delay: 60ms; }
.reveal[data-d="2"] { transition-delay: 120ms; }
.reveal[data-d="3"] { transition-delay: 180ms; }
.reveal[data-d="4"] { transition-delay: 240ms; }
.reveal[data-d="5"] { transition-delay: 300ms; }

/* hero entrance — fires on every page load, so it must settle *under* the
   320ms page cross-fade, not compete with it. Shorter, smaller lift,
   tighter stagger. */
@keyframes rise { from { opacity:0; transform: translateY(10px);} to {opacity:1; transform:none;} }
.rise { opacity: 0; animation: rise 450ms var(--ease-out) forwards; }
.rise[data-d="1"]{ animation-delay: 40ms;} .rise[data-d="2"]{ animation-delay:100ms;}
.rise[data-d="3"]{ animation-delay:160ms;} .rise[data-d="4"]{ animation-delay:220ms;}
.rise[data-d="5"]{ animation-delay:280ms;} .rise[data-d="6"]{ animation-delay:340ms;}

@media (prefers-reduced-motion: reduce) {
  .reveal, .rise { opacity: 1 !important; transform: none !important; animation: none !important; }
  html { scroll-behavior: auto; }
}

/* ─── dashboard window chrome ─────────────────────────────────────── */
.win {
  border: 1px solid var(--line-2);
  border-radius: 14px;
  background: var(--bg-1);
  overflow: hidden;
  box-shadow: var(--shadow-win);
}
.win__bar {
  display: flex; align-items: center; gap: 14px;
  padding: 11px 16px; border-bottom: 1px solid var(--line-1);
  background: var(--bg-2);
}
.win__dots { display: flex; gap: 7px; }
.win__dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--line-3); display: block; }
.win__addr {
  font-family: var(--font-code); font-size: 11px; color: var(--fg-4);
  letter-spacing: 0.03em; display: inline-flex; align-items: center; gap: 7px;
}

/* metric strip */
.metric { padding: 16px 18px; border-right: 1px solid var(--line-1); }
.metric:last-child { border-right: none; }
.metric__label { font-family: var(--font-mono); font-size: 10px; letter-spacing:0.08em; text-transform: uppercase; color: var(--fg-4); margin-bottom: 9px; display:flex; align-items:center; gap:6px;}
.metric__val { font-family: var(--font-mono); font-weight: 500; letter-spacing: -0.02em; color: var(--fg-1); font-size: clamp(20px, 2vw, 27px); line-height: 1; }
.metric__delta { font-family: var(--font-mono); font-size: 11px; margin-top: 7px; color: var(--fg-4); }
.metric__delta b { color: var(--acc); font-weight: 500; }

/* pipeline lead row */
.leadrow {
  text-align: left; width: 100%; display: block; cursor: pointer;
  padding: 12px 14px; border: 1px solid transparent; border-bottom: 1px solid var(--line-1);
  background: transparent; color: inherit; font-family: inherit;
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.leadrow:hover { background: var(--bg-3); }
.leadrow.sel { background: var(--acc-soft); border-color: var(--acc-line); border-left: 2px solid var(--acc); }

/* conversation bubbles */
.bub { max-width: 84%; padding: 10px 13px; border-radius: 12px; font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; word-break: break-word; }
.bub a { color: var(--acc-deep); overflow-wrap: anywhere; }
.bub--in  { background: var(--bg-2); border: 1px solid var(--line-2); color: var(--fg-2); align-self: flex-start; border-bottom-left-radius: 4px; }
.bub--out { background: var(--acc-soft); border: 1px solid var(--acc-line); color: var(--fg-1); align-self: flex-end; border-bottom-right-radius: 4px; }
.bub__who { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--fg-4); margin-bottom: 5px; }

/* timeline */
.tl { position: relative; padding-left: 22px; }
.tl::before { content:""; position:absolute; left:5px; top:4px; bottom:4px; width:1px; background: var(--line-2); }
.tl__item { position: relative; padding-bottom: 16px; }
.tl__item:last-child { padding-bottom: 0; }
.tl__item::before {
  content:""; position:absolute; left:-21px; top:3px; width:11px; height:11px; border-radius:50%;
  background: var(--bg-1); border: 1px solid var(--line-3);
}
.tl__item.done::before { background: var(--acc); border-color: var(--acc); box-shadow: 0 0 8px var(--acc-glow); }
.tl__item.now::before { background: var(--money); border-color: var(--money); }

/* generic responsive grids */
.grid { display: grid; gap: var(--s-5); }
.cols-2 { grid-template-columns: repeat(2, 1fr); }
.cols-3 { grid-template-columns: repeat(3, 1fr); }
.cols-4 { grid-template-columns: repeat(4, 1fr); }

.btn--lg { padding: 14px 26px; font-size: 15px; }

/* number ticker stays monospace stable */
.tnum { font-variant-numeric: tabular-nums; }

/* ════════════════════════════════════════════════════════════════
   EDITORIAL TOOLKIT — marker highlight, big numerals, bento,
   avatars, sparkline, live pulse, typing, alternating rows
   ════════════════════════════════════════════════════════════════ */

/* marker swipe behind a word — hand-made feel */
.mark { position: relative; display: inline-block; }
.mark > span { position: relative; z-index: 1; }
.mark::after {
  content: ""; position: absolute; z-index: 0;
  left: -0.06em; right: -0.06em; bottom: 0.08em; height: 0.36em;
  background: rgba(14,158,108,0.22);
  transform: rotate(-1.4deg);
  border-radius: 2px;
}

/* oversized editorial numeral */
.bignum {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.6rem, 6vw, 5rem);
  line-height: 0.86;
  letter-spacing: -0.045em;
  color: var(--acc);
}
.bignum--ghost { color: transparent; -webkit-text-stroke: 1.4px var(--line-3); }

/* section kicker number, e.g. 02 / */
.kicker {
  font-family: var(--font-mono); font-size: 12px; color: var(--fg-4);
  letter-spacing: 0.04em;
}

/* bento grid */
.bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.bento .tile {
  background: var(--bg-1); border: 1px solid var(--line-2); border-radius: var(--r-sm);
  box-shadow: var(--shadow-card); padding: clamp(20px, 2.2vw, 26px);
  display: flex; flex-direction: column; gap: 12px;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.bento .tile:hover { transform: translateY(-2px); border-color: var(--line-3); box-shadow: 0 2px 4px rgba(28,27,24,0.05), 0 18px 40px -16px rgba(28,27,24,0.18); }
.tile.span3 { grid-column: span 3; } .tile.span2 { grid-column: span 2; } .tile.span4 { grid-column: span 4; }
.tile.span6 { grid-column: span 6; }
.bento .tile--accent { background: linear-gradient(150deg, var(--acc) 0%, var(--acc-deep) 100%); border-color: transparent; color: #fff; }
.tile--accent h3, .tile--accent p { color: rgba(255,255,255,0.94); }
.bento .tile--ink { background: var(--fg-1); border-color: transparent; }
.tile--ink h3 { color: #fff; } .tile--ink p { color: rgba(255,255,255,0.62); }

/* avatar initials */
.av {
  width: 32px; height: 32px; border-radius: 9px; flex: none;
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 600; font-size: 12px; color: #fff;
}

/* sparkline */
.spark { display: flex; align-items: flex-end; gap: 3px; height: 26px; }
.spark i { width: 5px; background: var(--acc-line); border-radius: 2px 2px 0 0; }
.spark i.hi { background: var(--acc); }

/* live pulse ring */
@keyframes pulsering { 0% { box-shadow: 0 0 0 0 var(--acc-glow); } 70% { box-shadow: 0 0 0 7px rgba(14,158,108,0); } 100% { box-shadow: 0 0 0 0 rgba(14,158,108,0); } }
.pulse { animation: pulsering 2.2s ease-out infinite; }

/* typing indicator */
.typing { display: inline-flex; gap: 4px; align-items: center; }
.typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--acc); opacity: 0.4; animation: typedot 1.2s infinite; }
.typing i:nth-child(2) { animation-delay: 0.18s; } .typing i:nth-child(3) { animation-delay: 0.36s; }
@keyframes typedot { 0%, 60%, 100% { opacity: 0.3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-2px); } }

/* editorial alternating row */
.erow { display: grid; grid-template-columns: 90px minmax(0,1fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.erow + .erow { border-top: 1px solid var(--line-1); }

/* cooling timeline */
.cool { position: relative; }
.cool__track { height: 4px; border-radius: 99px; background: linear-gradient(90deg, var(--acc) 0%, #7FBF5A 28%, var(--warn) 58%, var(--money) 80%, #B23A3A 100%); }

@media (max-width: 880px) {
  .bento { grid-template-columns: repeat(2, 1fr); }
  .tile.span3, .tile.span2, .tile.span4, .tile.span6 { grid-column: span 2; }
  .erow { grid-template-columns: 1fr; gap: 14px; }
  .cols-stack { grid-template-columns: 1fr !important; }
  .cool-nodes { grid-template-columns: repeat(2, 1fr) !important; row-gap: 24px !important; }
}

/* ─── responsive ─────────────────────────────────────────────────── */
@media (max-width: 1000px) {
  .cols-4 { grid-template-columns: repeat(2, 1fr); }
  .cols-3 { grid-template-columns: repeat(2, 1fr); }
}
/* Nav collapses to a hamburger early enough that tablets (incl. iPad
   portrait, 768px) get the clean menu instead of a cramped full nav. */
@media (max-width: 880px) {
  .vra-nav-links { display: none !important; }
  .vra-nav-secondary { display: none !important; }
  .vra-nav-burger { display: inline-flex !important; }
}
@media (max-width: 720px) {
  .cols-2, .cols-3, .cols-4 { grid-template-columns: 1fr; }
  .metric { border-right: none; border-bottom: 1px solid var(--line-1); }
  /* Dashboard mock screenshots: stack their panels so they don't overflow
     the phone screen. Each panel goes full width, one above the next. */
  .metric-strip { grid-template-columns: repeat(2, 1fr) !important; }
  .dash-body, .detail-body, .deep-body { grid-template-columns: 1fr !important; }
}

/* ── Article prose (vraelis articles) ──────────────────────────────── */
.vra-prose { color: var(--fg-2); font-size: 16.5px; line-height: 1.72; }
.vra-prose > * + * { margin-top: 1.1em; }
.vra-prose h2 {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.4vw, 1.9rem);
  letter-spacing: -0.02em;
  color: var(--fg-1);
  margin-top: 1.9em;
  line-height: 1.2;
}
.vra-prose h3 {
  font-family: var(--font-display);
  font-size: 1.25rem;
  color: var(--fg-1);
  margin-top: 1.5em;
}
.vra-prose p { color: var(--fg-2); }
.vra-prose strong { color: var(--fg-1); font-weight: 600; }
.vra-prose a { color: var(--acc-deep); text-decoration: underline; text-underline-offset: 2px; }
.vra-prose ul, .vra-prose ol { padding-left: 1.4em; display: flex; flex-direction: column; gap: 0.5em; }
.vra-prose li { color: var(--fg-2); }
.vra-prose ul li::marker { color: var(--acc); }
.vra-prose ol li::marker { color: var(--fg-4); font-family: var(--font-mono); font-size: 0.85em; }
.vra-prose blockquote {
  border-left: 2px solid var(--acc-line);
  padding-left: 16px;
  color: var(--fg-3);
  font-style: italic;
}
.vra-prose code {
  font-family: var(--font-code);
  font-size: 0.88em;
  background: var(--bg-2);
  border: 1px solid var(--line-1);
  border-radius: 5px;
  padding: 1px 5px;
}

/* ════════════════════════════════════════════════════════════════════
   v10 — PREMIUM OVERHAUL
   Cohesion layer: real display/body type, calmer light + elevation, and
   the shared recipes the redesigned pages compose from. The recurring
   device is the "verdict bar" — lifted straight from the report.
   ════════════════════════════════════════════════════════════════════ */

:root {
  --r-lg: 16px;
  --r-xl: 22px;
  --shadow-sm: 0 1px 2px rgba(28,27,24,0.05);
  --shadow-md: 0 1px 2px rgba(28,27,24,0.04), 0 14px 32px -18px rgba(28,27,24,0.18);
  --shadow-lg: 0 2px 8px rgba(28,27,24,0.05), 0 44px 84px -40px rgba(28,27,24,0.26);
  --paper-grad: radial-gradient(120% 90% at 50% -8%, #FFFFFF 0%, var(--bg-0) 46%);
  /* tighter vertical rhythm — was clamp(80,11vw,144), which left big dead gaps */
  --section-y: clamp(60px, 7.5vw, 104px);
  /* app topbar height — the sidebar sticks exactly below it so it never slides */
  --app-topbar-h: 64px;
  /* slightly stronger hairlines so cards read as substantial, not flimsy */
  --line-2: rgba(28,27,24,0.13);
  --line-3: rgba(28,27,24,0.22);
}

/* the redesigned faces actually load now (see app/layout.tsx font link) */
.display, h1, h2, h3, .eyebrow { font-family: var(--font-display); }

/* a primary control should feel like a real, slightly-raised object */
.btn { box-shadow: 0 1px 1.5px rgba(10,123,84,0.22), inset 0 1px 0 rgba(255,255,255,0.14); font-weight: 500; }
.btn--ghost, .btn--quiet { box-shadow: none; }
.btn--ghost { box-shadow: var(--shadow-sm); }

/* ─── Ambient bloom — soft, masked, no hard cutoff ─── */
.glow { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.glow::before {
  content: ""; position: absolute; left: 50%; top: -42%;
  width: 150%; height: 130%; transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(14,158,108,0.18), rgba(14,158,108,0.06) 54%, transparent 76%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 86%);
          mask-image: linear-gradient(180deg, #000 0%, transparent 86%);
}
.glow--soft::before { background: radial-gradient(closest-side, rgba(14,158,108,0.12), rgba(14,158,108,0.04) 52%, transparent 74%); }
/* hero bloom that bleeds up behind the (transparent) sticky nav so the header
   reads as part of the hero atmosphere. body has overflow-x:hidden, so the wide
   gradient can't create a horizontal scrollbar. */
.glow--bleed { overflow: visible; }
.glow--bleed::before { top: -68%; height: 150%; }

/* a quieter, edge-faded hairline grid — larger cells, carried further down the hero
   (solid through 38%, then a long fade) so it doesn't cut off near the top */
.grid-faint {
  position: absolute; inset: 0; pointer-events: none; z-index: 0; opacity: 0.55;
  background-image: linear-gradient(var(--line-1) 1px, transparent 1px), linear-gradient(90deg, var(--line-1) 1px, transparent 1px);
  background-size: 94px 94px;
  -webkit-mask-image: radial-gradient(ellipse 96% 120% at 50% 0%, #000 0%, #000 38%, transparent 94%);
          mask-image: radial-gradient(ellipse 96% 120% at 50% 0%, #000 0%, #000 38%, transparent 94%);
}

/* ─── Section header — one consistent rhythm everywhere ─── */
.sec-head { max-width: 640px; margin-bottom: clamp(28px, 4vw, 46px); }
.sec-head--center { margin-inline: auto; text-align: center; }
.sec-head--center .eyebrow { justify-content: center; }
.sec-head .display { font-size: clamp(1.85rem, 3.3vw, 2.7rem); }
.sec-head p { margin-top: 14px; font-size: clamp(1rem, 1.2vw, 1.12rem); color: var(--fg-2); line-height: 1.55; }
.sec-head--center p { margin-inline: auto; }

/* ─── Designed audience / value cards ─── */
.tile-grid { display: grid; gap: 14px; }
.acard {
  background: var(--bg-1); border: 1px solid var(--line-2); border-radius: var(--r-lg);
  padding: clamp(20px, 2.2vw, 26px); box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column; gap: 10px; position: relative;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.acard:hover { transform: translateY(-3px); border-color: var(--acc-line); box-shadow: var(--shadow-md); }
.acard__icon {
  width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center;
  background: var(--acc-soft); color: var(--acc-deep); border: 1px solid var(--acc-line);
  font-size: 18px; flex: none;
}
.acard__t { font-family: var(--font-display); font-weight: 600; font-size: 16.5px; color: var(--fg-1); letter-spacing: -0.01em; }
.acard__d { font-size: 13.5px; color: var(--fg-3); line-height: 1.55; }

/* chip row (testable surfaces, feature tags) */
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip {
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 15px;
  border-radius: var(--r-circle); border: 1px solid var(--line-2); background: var(--bg-1);
  font-family: var(--font-display); font-weight: 500; font-size: 14px; color: var(--fg-2);
  box-shadow: var(--shadow-sm);
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.chip:hover { border-color: var(--acc-line); color: var(--fg-1); transform: translateY(-2px); }

/* ─── The signature: a verdict bar (reused across site) ─── */
.verdict { display: flex; flex-direction: column; gap: 11px; }
.vrow { display: flex; align-items: center; gap: 12px; }
.vrow__k { width: 16px; font-family: var(--font-code); font-size: 12px; color: var(--fg-4); flex: none; }
.vrow__track { flex: 1; height: 12px; border-radius: 99px; background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--line-1); overflow: hidden; }
.vrow__fill { display: block; height: 100%; min-width: 4px; border-radius: 99px; background: #B7B1A6; transition: width 700ms var(--ease-out); }
.vrow__fill.win { background: linear-gradient(90deg, var(--acc), var(--acc-deep)); }
.vrow__p { width: 38px; text-align: right; font-family: var(--font-code); font-size: 12.5px; color: var(--fg-3); flex: none; }

/* ─── CTA band ─── */
.cta-band { position: relative; overflow: hidden; text-align: center; }
.cta-band .wrap { position: relative; z-index: 1; }

/* ─── Empty state ─── */
.empty {
  border: 1px dashed var(--line-3); border-radius: var(--r-lg); background: var(--bg-1);
  padding: clamp(28px, 4vw, 48px); text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.empty__icon { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; background: var(--acc-soft); color: var(--acc-deep); border: 1px solid var(--acc-line); font-size: 22px; }
.empty h3 { font-size: 1.2rem; }
.empty p { max-width: 380px; font-size: 14px; }

/* ─── Skeleton shimmer (loading states) ─── */
.skel { position: relative; overflow: hidden; background: var(--bg-2); border-radius: 8px; }
.skel::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255,255,255,0.6), transparent); animation: shimmer 1.4s infinite; }
@keyframes shimmer { 100% { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .skel::after { animation: none; } }

/* ─── Code block ─── the ONLY surface that keeps true monospace (real code needs
   character alignment); every other --font-code usage renders in the sans. */
.codeblock {
  margin: 0; padding: 18px 20px; border-radius: var(--r-lg); border: 1px solid rgba(255,255,255,0.08);
  background: #16202B; color: #E7ECF3; overflow-x: auto; box-shadow: var(--shadow-lg);
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 13px; line-height: 1.7;
}
.codeblock code, .codeblock kbd { font-family: inherit; }
/* the global `code` rule sets a dark ink color; inside the dark panel the inner
   <code> must inherit the panel's light foreground, not the dark page color */
.codeblock code, .codeblock kbd { color: inherit; background: none; border: none; padding: 0; font-size: inherit; }
.codeblock .tk-key { color: #8CE0B4; } .codeblock .tk-str { color: #F0CE8E; } .codeblock .tk-com { color: #8B97A8; }
.codebar { display: flex; align-items: center; gap: 8px; padding: 11px 14px; border-radius: var(--r-lg) var(--r-lg) 0 0; border: 1px solid rgba(255,255,255,0.08); border-bottom: 1px solid rgba(255,255,255,0.06); background: #1C2733; }
.codebar i { width: 10px; height: 10px; border-radius: 50%; display: block; }
.codebar i:nth-child(1) { background: #ED6A5E; } .codebar i:nth-child(2) { background: #F4BF4F; } .codebar i:nth-child(3) { background: #61C554; }
.codebar span { margin-left: auto; font-family: var(--font-code); font-size: 11.5px; color: #94A1B2; }
.codebar + .codeblock { border-radius: 0 0 var(--r-lg) var(--r-lg); }

/* ─── Segmented toggle (monthly / yearly) ─── */
.seg { display: inline-flex; padding: 4px; border-radius: var(--r-circle); border: 1px solid var(--line-2); background: var(--bg-2); gap: 2px; }
.seg button {
  border: none; background: transparent; cursor: pointer; border-radius: var(--r-circle);
  font-family: var(--font-display); font-weight: 500; font-size: 14px; color: var(--fg-3);
  /* Center the label in its own box: the display face has tall internal leading, so without an explicit
     line-height + flex centering the text sits low in the pill and the focus ring reads as offset. */
  display: inline-flex; align-items: center; justify-content: center; line-height: 1;
  padding: 8px 18px; min-height: 24px; box-sizing: border-box;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
/* The active pill is geometrically centred in the track (equal gap above/below). Its shadow must radiate
   EVENLY — a downward y-offset throws the soft blur out the bottom edge, darkening the lower gap so the
   pill reads as sitting low with clean grey above it. Keep y-offset 0 so it lifts without looking bottom-heavy. */
.seg button.on { background: var(--bg-1); color: var(--fg-1); box-shadow: 0 0 0 1px rgba(28,27,24,0.05), 0 0 6px -1px rgba(28,27,24,0.14); }
/* Keep the focus ring hugging the rounded pill instead of a low, offset square. */
.seg button:focus-visible { outline-offset: -2px; }
.seg__save { font-family: var(--font-code); font-size: 11px; color: var(--acc-deep); margin-left: 6px; }
/* The pass-demo scenario toggle carries long labels ("All requirements passed", "Critical behavior failed",
   "New build under review"). As a fixed inline-flex pill these overflow and clip on a phone. On narrow screens
   the .pd-seg variant becomes a full-width vertical stack (rounded rectangle, not a circle) so every label fits;
   at wider widths it keeps the inherited horizontal pill. The generic .seg (short Monthly/Yearly labels) is
   untouched. */
.pd-seg { max-width: 100%; }
@media (max-width: 640px) {
  .pd-seg { display: flex; flex-direction: column; width: 100%; align-items: stretch; border-radius: var(--r-lg); gap: 4px; }
  .pd-seg button { width: 100%; justify-content: flex-start; border-radius: var(--r-md); padding: 11px 14px; white-space: normal; text-align: left; }
}

/* ─── Pricing card ─── */
.price {
  background: var(--bg-1); border: 1px solid var(--line-2); border-radius: var(--r-xl);
  padding: clamp(22px, 2.4vw, 30px); box-shadow: var(--shadow-md);
  display: flex; flex-direction: column; gap: 16px; position: relative;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.price:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.price--hot { border-color: var(--acc-line-2); box-shadow: 0 2px 8px rgba(14,158,108,0.08), 0 44px 84px -40px rgba(14,158,108,0.3); }
.price--hot::before {
  content: "Most popular"; position: absolute; top: -11px; left: clamp(22px,2.4vw,30px);
  background: linear-gradient(90deg, var(--acc), var(--acc-deep)); color: #fff;
  font-family: var(--font-code); font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 4px 11px; border-radius: 99px;
}
.price__name { font-family: var(--font-display); font-weight: 600; font-size: 18px; color: var(--fg-1); }
.price__amt { font-family: var(--font-display); font-weight: 600; font-size: clamp(2.1rem, 3.4vw, 2.7rem); color: var(--fg-1); letter-spacing: -0.03em; line-height: 1; }
.price__amt small { font-family: var(--font-sans); font-weight: 400; font-size: 15px; color: var(--fg-4); letter-spacing: 0; }
.price__feat { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.price__feat li { display: flex; gap: 10px; font-size: 13.5px; color: var(--fg-2); line-height: 1.4; }
.price__feat li::before { content: ""; width: 16px; height: 16px; flex: none; margin-top: 1px; border-radius: 50%; background: var(--acc-soft); border: 1px solid var(--acc-line); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A7B54' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E"); background-size: 11px; background-position: center; background-repeat: no-repeat; }
.badge-now { font-family: var(--font-code); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--acc-deep); background: var(--acc-soft); border: 1px solid var(--acc-line); padding: 3px 9px; border-radius: 99px; }

/* ─── App shell — sidebar that connects the product to the brand ─── */
/* Viewport units are NOT scaled by the desktop zoom (100svh inside a 0.8-zoomed root
   renders at only 80% of the screen, leaving the sidebar hanging above the bottom),
   so every svh here is divided by --shell-zoom (1 on phones, set with the zoom below). */
.app-shell { display: grid; grid-template-columns: 232px minmax(0,1fr); min-height: calc(100svh / var(--shell-zoom, 1) - 1px); }
.app-side {
  border-right: 1px solid var(--line-2); background: var(--bg-0);
  padding: 18px 14px; display: flex; flex-direction: column; gap: 4px;
  /* sit below the sticky topbar and fill exactly the remaining viewport, so the
     pinned foot (Back to site + Sign out) is visible without scrolling */
  position: sticky; top: var(--app-topbar-h, 66px); align-self: start;
  height: calc(100svh / var(--shell-zoom, 1) - var(--app-topbar-h, 66px)); overflow-y: auto;
}
.app-side__group { font-family: var(--font-code); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-5); padding: 14px 12px 6px; }
.slink {
  display: flex; align-items: center; gap: 11px; padding: 9px 12px; border-radius: 10px;
  color: var(--fg-2); text-decoration: none; font-size: 15.5px; font-weight: 500;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.slink:hover { background: var(--bg-3); color: var(--fg-1); }
.slink.on { background: var(--bg-1); color: var(--fg-1); box-shadow: inset 0 0 0 1px var(--line-2); }
.slink.on .slink__i { color: var(--acc-deep); }
.slink__i { width: 19px; height: 19px; flex: none; color: var(--fg-4); display: grid; place-items: center; }
.app-main { min-width: 0; }

/* Stripe Embedded Checkout: the iframe sets its own height. Never clip it or cap
   its height — let the wrapper (and the page) grow so the whole panel is visible. */
.checkout-pay { overflow: visible; max-height: none; }
.checkout-pay iframe { width: 100% !important; max-height: none !important; }

/* page header inside the app */
.phead { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: clamp(18px, 2.4vw, 28px); }
.phead h1 { font-size: clamp(1.5rem, 2.6vw, 2rem); }
.phead p { margin-top: 6px; font-size: 14.5px; color: var(--fg-3); }

/* stat / metric card for dashboards */
.stat { background: var(--bg-1); border: 1px solid var(--line-2); border-radius: var(--r-lg); padding: 18px 20px; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: 7px; }
.stat__l { font-family: var(--font-code); font-size: 10.5px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--fg-4); display: flex; align-items: center; gap: 7px; }
.stat__v { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.5rem, 2.2vw, 1.9rem); color: var(--fg-1); letter-spacing: -0.02em; line-height: 1; }
.stat__s { font-size: 12.5px; color: var(--fg-4); }

/* form field recipe */
.field { display: flex; flex-direction: column; gap: 7px; }
.lbl { font-family: var(--font-display); font-weight: 500; font-size: 13.5px; color: var(--fg-2); }
.hint { font-size: 12.5px; color: var(--fg-4); }

/* ─── App nav responsive: sidebar collapses to a top strip ─── */
@media (max-width: 860px) {
  .app-shell { grid-template-columns: 1fr; }
  .app-side {
    position: static; height: auto; flex-direction: row; overflow-x: auto; gap: 4px;
    border-right: none; border-bottom: 1px solid var(--line-1); padding: 10px var(--gutter);
    scrollbar-width: none; /* hide the forced green strip scrollbar on mobile */
  }
  .app-side::-webkit-scrollbar { display: none; }
  .app-side__group, .app-side__foot { display: none; }
  .slink { white-space: nowrap; padding: 8px 12px; }
}

/* tighten generic grid gaps used by the redesigned pages */
.tile-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
.tile-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.tile-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 1000px) { .tile-grid.cols-4 { grid-template-columns: repeat(2,1fr); } .tile-grid.cols-3 { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 640px) { .tile-grid.cols-4, .tile-grid.cols-3, .tile-grid.cols-2 { grid-template-columns: 1fr; } }

/* sticky side panel — desktop only; flows normally once the layout stacks so a
   tall summary can't hover over content on mobile */
.sticky-side { position: sticky; top: 84px; }
@media (max-width: 880px) { .sticky-side { position: static; top: auto; } }

/* horizontal-scroll wrapper for anything that can get wide (logs, tables).
   Hide the scrollbar — the global light theme forces a chunky green bar that
   reads as an off-center slider on mobile; the strip still scrolls by touch. */
.scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.scroll-x::-webkit-scrollbar { display: none; }

/* responsive footer grid: brand + link columns, collapses cleanly on small screens */
.foot-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr; gap: 30px; }
@media (max-width: 900px) { .foot-grid { grid-template-columns: 1.4fr 1fr 1fr; row-gap: 32px; } }
@media (max-width: 560px) { .foot-grid { grid-template-columns: 1fr 1fr; } }

/* ─── Global scale ─── the whole Vraelis surface (marketing + app) renders ~20%
   smaller on desktop: the density the design was judged best at (the "75% zoom
   looks right" note). The signed-out marketing shell (.rank-root--site) goes a
   further 10% (0.8 x 0.9 = 0.72) so the front page hero + live demo land in one
   viewport for every visitor (the "90% should be global" note). Phones keep 1:1
   so touch targets and text stay readable. */
@media (min-width: 768px) {
  .rank-root { zoom: 0.8; --shell-zoom: 0.8; }
  .rank-root--site { zoom: 0.72; --shell-zoom: 0.72; }
}