/* ──────────────────────────────────────────────────────────────────
   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%; }

/* ── ONE BLACK GROUND (2026-10-01) ──────────────────────────────────────────────────────────────────────
   This root stylesheet loads on every page, so its tokens are what anything outside the v6 site and the
   console wears: the legal pages, the previous generation's surviving routes, the auth round-trip before
   the console layer loads. It was warm paper. The founder made the whole product black (the homepage film,
   anduril.com and palantir.com as the reference, and the console with it), so these are the console's
   black values from authenticated.css, one palette for every surface. Text steps on --bg-0: --fg-1 19:1,
   --fg-2 13:1, --fg-3 7.6:1, --fg-4 5.6:1. */
:root {
  --font-sans: var(--font-brand-sans), -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-display: var(--font-brand-sans), -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --r-xs: 8px;
  --r-sm: 11px;
  --r-md: 13px;

  /* surfaces */
  --bg-0: #0A0A0B;   /* page */
  --bg-1: #141416;   /* cards, panels */
  --bg-2: #1A1A1D;   /* recessed wells */
  --bg-3: #1F1F23;   /* hovered rows */
  --bg-elev: rgba(255,255,255,0.02);

  --fg-1: #FAFAFA;   /* headlines */
  --fg-2: #D4D4D8;   /* body */
  --fg-3: #A1A1AA;   /* secondary */
  --fg-4: #8E8E96;   /* meta and labels */
  --fg-5: #8E8E96;   /* fine print, the same measured grey */
  --fg-on-accent: #0A0A0B;

  /* the action is white on black; green is a state colour (--ok, --go-*), never an action */
  --acc: #FAFAFA;
  --acc-deep: #FAFAFA;
  --acc-deepest: #D4D4D8;
  --acc-glow: rgba(255,255,255,0.16);
  --acc-soft: rgba(255,255,255,0.07);
  --acc-line: rgba(255,255,255,0.22);
  --acc-line-2: rgba(255,255,255,0.36);

  --ok: #3DD68C;
  --warn: #F5B94D;
  --err: #FF6B5B;

  /* ── State triads: an ink, the wash it sits on, and the hairline around them ── */
  --go-ink:    #4ADE9C;  --go-wash:   rgba(61,214,140,0.12);  --go-line:   rgba(61,214,140,0.32);
  --wait-ink:  #F5B94D;  --wait-wash: rgba(245,185,77,0.12);  --wait-line: rgba(245,185,77,0.32);
  --stop-ink:  #FF7B6B;  --stop-wash: rgba(255,107,91,0.12);  --stop-line: rgba(255,107,91,0.34);
  --rec: #FF6B5B;
  --rec-glow: rgba(255,107,91,0.4);

  /* hairlines on black */
  --line-1: rgba(255,255,255,0.06);
  --line-2: rgba(255,255,255,0.10);
  --line-3: rgba(255,255,255,0.16);
  --line-strong: rgba(255,255,255,0.28);
  --focus-ring: #FAFAFA;

  /* The translucent ground under a sticky bar. */
  --chrome-veil: rgba(10,10,11,0.86);

  /* elevation on black: shadows are deep and the hairline does the edge */
  --shadow-card: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-win:  0 2px 6px rgba(0,0,0,0.5), 0 44px 80px -34px rgba(0,0,0,0.85);
}
.display {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.012em;
  line-height: 1.06;
}
.display .em { font-weight: 600; }
h1, h2, h3 { font-family: var(--font-display); letter-spacing: -0.012em; }
body { font-weight: 400; }

/* Green primary button.
   THE GROUND IS --acc-deep, NOT --acc. White on --acc (#0E9E6C) measures 3.43:1, which fails WCAG AA for
   normal text, and this rule paints the primary call to action on every public page: "Open app", "Check
   your application", "Contact sales", and the 404's "Back home". A site-wide audit of rendered pairs found
   25 instances and one cause. --acc-deep (#0A7B54) carries the same hue at 5.28:1, and hover goes a step
   deeper again rather than reaching for a colour that cannot hold white. --acc is still the right value for
   fills and marks that carry no text. */
.btn {
  background: var(--acc-deep);
  border-color: var(--acc-deep);
  color: var(--fg-on-accent);
  border-radius: var(--r-sm);
}
.btn:hover  { background: var(--acc-deepest); border-color: var(--acc-deepest); color: var(--fg-on-accent); }
.btn:active { background: var(--acc-deepest); }
.btn:disabled, .btn[disabled], .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
.btn:disabled:hover, .btn[disabled]:hover, .btn[aria-disabled="true"]:hover { background: var(--acc-deep); border-color: 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; }

/* Hero: asymmetric two-column (copy | live demo) so the proof-object sits beside the claim,
   above the fold. Copy takes the larger share; the demo column can shrink (min-width:0) so its
   card never forces overflow. Columns are top-aligned (the demo is taller than the copy, so
   centering would strand the copy in the middle and leave a dead zone below it). The demo caps
   its own width so it never runs flush to the viewport edge. Stacks to one centered column below
   960px. */
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(28px, 4vw, 56px); align-items: start; }
/* Top-aligned so the copy NEVER reflows when the demo animates (a centered copy re-centers every
   time the demo's height changes, which reads as a jump). A fixed top-nudge sits the copy pleasantly
   below the demo's header rather than dead-flush to it. */
.hero-copy { min-width: 0; padding-top: clamp(16px, 3.5vw, 52px); }
.hero-demo { min-width: 0; max-width: 460px; justify-self: end; width: 100%; }
@media (max-width: 960px) {
  .hero-grid { grid-template-columns: 1fr; text-align: center; }
  .hero-copy p, .hero-copy .eyebrow { margin-inline: auto; }
  .hero-copy .eyebrow { justify-content: center; }
  .hero-copy > div[data-d="4"] { justify-content: center; }
  .hero-demo { max-width: 520px; justify-self: center; margin: clamp(20px, 4vw, 32px) auto 0; }
  /* On the narrow single column the scenario toggle wraps instead of scroll-clipping. */
  .pd-seg { flex-wrap: wrap; }
}
/* 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(0,0,0,0.45), 0 18px 40px -16px rgba(0,0,0,0.8); }
.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(10,10,11,0.10);
  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(0,0,0,0.45), 0 18px 40px -16px rgba(0,0,0,0.8); }
.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-deep) 0%, var(--acc-deepest) 100%); border-color: transparent; color: #0A0A0B; }
.tile--accent h3, .tile--accent p { color: rgba(10,10,11,0.94); }
.bento .tile--ink { background: var(--fg-1); border-color: transparent; }
.tile--ink h3 { color: #0A0A0B; } .tile--ink p { color: rgba(10,10,11,0.66); }

/* 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(10,10,11,0); } 100% { box-shadow: 0 0 0 0 rgba(10,10,11,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); } }
/* Honour a reduced-motion preference for the two remaining infinite loops (live ring + typing dots). */
@media (prefers-reduced-motion: reduce) { .pulse { animation: none; } .typing i { animation: none; } }

/* 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; }
}
/* Signed-in app top bar on phones: the row (logo + plan pill + credits pill + Connect app + avatar) is
   wider than a ~390px screen, so it used to overflow and cut off. Drop the at-a-glance pills (both are one
   tap away in the sidebar: Plans / Credits) and shrink the Connect button to its "+" so the bar always fits
   with the account menu reachable. */
.vra-app-connect { display: inline-flex; align-items: center; gap: 7px; padding: 9px 16px; }
.vra-app-connect__i { display: inline-flex; }
@media (max-width: 640px) {
  .vra-app-pills { display: none !important; }
  /* An icon square matching the burger, not a pill squeezed around a "+" glyph. */
  .vra-app-connect { width: 38px; height: 38px; padding: 0 !important; justify-content: center; border-radius: 10px; }
  .vra-app-connect__label { display: none; }
}
@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(0,0,0,0.45);
  --shadow-md: 0 1px 2px rgba(0,0,0,0.45), 0 14px 32px -18px rgba(0,0,0,0.75);
  --shadow-lg: 0 2px 8px rgba(0,0,0,0.5), 0 44px 84px -40px rgba(0,0,0,0.9);
  --paper-grad: radial-gradient(120% 90% at 50% -8%, #18181B 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(255,255,255,0.10);
  --line-3: rgba(255,255,255,0.16);
}

/* 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(0,0,0,0.4); 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(10,10,11,0.05), rgba(10,10,11,0.02) 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(255,255,255,0.08), 0 0 6px -1px rgba(0,0,0,0.5); }
/* 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-deep), var(--acc-deepest)); color: #0A0A0B;
  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; }
/* The pinned foot (Back to site + Sign out). In the SIDEBAR it is sticky at the bottom of the sidebar's own
   scroll. In the DRAWER it is not sticky at all: it renders as a sibling BELOW the scroll region (see
   rank-ui.tsx), so nothing can scroll visibly beneath it, and it carries the phone's safe-area inset. */
.app-side__foot { margin-top: auto; position: sticky; bottom: 0; background: var(--bg-0); padding: 12px 0 4px; border-top: 1px solid var(--line-1); }
.app-side__foot--drawer { position: static; margin-top: 0; flex: none; padding: 10px 14px calc(12px + env(safe-area-inset-bottom, 0px)); }
.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 ───
   Desktop + tablet keep the full fixed sidebar (dense enough for real work; the locked design has a single
   breakpoint). Mobile (<=860) hides the sidebar and moves navigation into an accessible drawer opened from
   the topbar hamburger — a deliberate mobile layout, not a shrunk desktop strip. */
.app-burger { display: none; }
.slink:focus-visible, .app-burger:focus-visible, .app-drawer-x:focus-visible {
  outline: 2px solid var(--acc-deep); outline-offset: 2px;
}
@media (max-width: 860px) {
  .app-shell { grid-template-columns: 1fr; }
  .app-side { display: none; }
  .app-burger {
    display: inline-grid; place-items: center; width: 38px; height: 38px; margin-left: 4px;
    border: 1px solid var(--line-2); border-radius: 10px; background: var(--bg-1);
    color: var(--fg-2); cursor: pointer; flex: none;
  }
}
/* The mobile drawer: fixed overlay, focus-trapped and Escape-closable in JS. The scrim blocks pointer
   interaction with the page behind; body scroll is locked while it is open. */
.app-drawer-root { position: fixed; inset: 0; z-index: 200; }
.app-drawer-scrim { position: absolute; inset: 0; background: rgba(20,20,15,0.34); backdrop-filter: blur(2px); animation: drawerFade 170ms ease both; }
/* The panel itself never scrolls: the head and the foot are pinned rows, and only .app-drawer-body between
   them scrolls. The old shape (the whole panel scrolls, foot sticky inside it) left the panel's bottom
   padding plus the safe-area inset as a strip BELOW the pinned foot with nav items visibly sliding past. */
.app-drawer {
  position: absolute; top: 0; left: 0; bottom: 0; width: min(300px, 86vw);
  background: var(--bg-0); border-right: 1px solid var(--line-2); box-shadow: var(--shadow-lg);
  padding: 14px 0 0; overflow: hidden;
  display: flex; flex-direction: column;
  animation: drawerIn 200ms cubic-bezier(0.22,1,0.36,1) both;
}
.app-drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 2px 20px 12px; flex: none; }
.app-drawer-body { flex: 1; overflow-y: auto; padding: 0 14px 12px; display: flex; flex-direction: column; gap: 4px; }
.app-drawer-x { display: inline-grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--line-2); border-radius: 9px; background: var(--bg-1); color: var(--fg-3); cursor: pointer; }
@keyframes drawerFade { from { opacity: 0 } to { opacity: 1 } }
@keyframes drawerIn { from { transform: translateX(-100%) } to { transform: none } }
@media (prefers-reduced-motion: reduce) { .app-drawer, .app-drawer-scrim { animation: none } }

/* 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 desktop scale: the density each shell was judged best at, expressed so a visitor at their normal
   100% browser zoom sees exactly what the founder saw. The two shells differ on purpose.

   Marketing site: 0.99, essentially 1:1. Judged at a 0.9 shell viewed at ~110% browser zoom.
   App: 0.89. Judged at the 0.99 shell viewed at 90% browser zoom, so 0.99 x 0.90 = 0.891. The app is dense
   (sidebar, top bar, tables) and wants more on screen at once; the marketing page wants presence.

   Phones stay 1:1 so touch targets and text stay readable. */
@media (min-width: 768px) {
  .rank-root { zoom: 0.89; --shell-zoom: 0.89; }
  .rank-root--site { zoom: 0.99; --shell-zoom: 0.99; }
}