/*
 * Design tokens: the single source of truth for the Nablr & Co. palette.
 *
 * Read by src/styles/global.css (parent site, @import) and prepended to
 * packages/shared-styles/base.css by scripts/sync-shared-sites.sh (nablr, Studio,
 * Invern). Declarations only: no selectors for components, no @import except the
 * fonts rule below.
 *
 * NOTE: the fonts @import must stay the first rule. Browsers ignore an @import
 * that follows any other rule, and sync-shared-sites.sh refuses to run otherwise.
 * To recolor: edit a --palette-* value, run scripts/sync-shared-sites.sh, then
 * verify with the STORY-020 capture/compare toolkit (tests/baselines/README.md).
 * Palette roles and contrast rules: docs/design/theme.md.
 */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@100..700&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

:root {
  /* ---- Palette primitives (Cyan Oud). Each value appears once. ---- */
  --palette-lagoon: #044155;
  --palette-lagoon-deep: #04232C;
  --palette-lagoon-mid: #136073;
  --palette-lagoon-lift: #0A5568;
  --palette-lagoon-night: #031B22;
  --palette-cool-mist: #F1F7F7;
  --palette-sea-mist: #9CC0C4;
  --palette-pool-glass: #C7DCE1;
  --palette-stone-slate: #34505B;
  --palette-cyan-oud: #22757B;
  --palette-fog-light: #3F7079;
  --palette-fog-dark: #8DB2B8;
  --palette-white: #FFFFFF;

  /* ---- Fixed signal colors: same value in both themes, for always-dark surfaces
     (terminal window, status dots, metric text). Not the theme-flipping status tokens. ---- */
  --palette-signal-green: #7DD996;
  --palette-signal-amber: #E8B84B;
  --palette-signal-coral: #FF7A6E;
  --palette-dot-red: #E5605A;
  --palette-dot-green: #5CB86B;
  --palette-nablr-glow: #596F7A;

  /* ---- Semantic tokens, light mode ---- */
  --page-bg: var(--palette-cool-mist);
  --card-bg: var(--palette-white);
  --border-default: var(--palette-sea-mist);
  /* NOTE: fog-dark (#8DB2B8) failed WCAG AA (2.83-3.30:1) on light surfaces, hence
     fog-light here; see STORY-056. --fog flips by theme because no single hue
     passes 4.5:1 on both page backgrounds. */
  --text-muted: var(--palette-fog-light);
  --interactive: var(--palette-stone-slate);
  --cta: var(--palette-lagoon);
  /* NOTE: text on a --cta fill. --cta flips with the theme, so a fixed text color ends up
     matching the fill in one of them (STORY-023: Studio's active tab was 1.00:1 in dark). */
  --on-cta: var(--palette-cool-mist);
  --text-primary: var(--palette-lagoon);
  --fog: var(--palette-fog-light);
  /* ---- Surface roles (FIX-BC808068 on the parent, shared by the product sites since
     FIX-6417354A). --canvas is the page plane, --band the secondary plane, --card-shadow
     lifts white cards off a white canvas. --page-bg is NOT the canvas: base.css also reads it
     as the text colour on dark fills, so it cannot become white. No brown or warm shades. ---- */
  --canvas: var(--palette-white);
  --band: var(--palette-cool-mist);
  --card-shadow: 0 1px 2px color-mix(in srgb, var(--palette-lagoon) 6%, transparent),
    0 14px 28px -16px color-mix(in srgb, var(--palette-lagoon) 18%, transparent);
  /* --text-secondary is intentionally undefined in light mode (product sites
     fall back to --text-primary where they read it). */

  /* ---- Status tokens (the dark block redefines the three fills, see STORY-023) ---- */
  --success-light: #E3F0E8;
  --success-text: #1A5C32;
  --warning-light: #FDF3E3;
  --warning-text: #92500A;
  --error-light: #FEE8E8;
  --error-text: #991B1B;

  /* ---- Shape and type ---- */
  --radius-card: 11px;
  --radius-button: 7px;
  --radius-badge: 4px;
  --border-width: 0.5px;

  --font-body: 'IBM Plex Sans', sans-serif;
  /* NOTE: Plex Sans 400 reads thinner than Inter 400 (lower x-height). */
  --font-weight-body: 450;
  --font-mono: 'JetBrains Mono', monospace;
}

/* One dark selector for all four sites; do not use a bare [data-theme="dark"]. */
html[data-theme="dark"] {
  --page-bg: var(--palette-lagoon-deep);
  --card-bg: var(--palette-lagoon);
  --border-default: var(--palette-lagoon-mid);
  --text-muted: var(--palette-sea-mist);
  --interactive: var(--palette-fog-dark);
  --cta: var(--palette-cool-mist);
  --on-cta: var(--palette-lagoon-deep);
  --text-primary: var(--palette-cool-mist);
  --text-secondary: var(--palette-pool-glass);
  --fog: var(--palette-fog-dark);
  /* Roles collapse to the page colour so dark mode is unchanged. */
  --canvas: var(--page-bg);
  --band: var(--page-bg);
  --card-shadow: none;

  /* Status text re-tuned for dark surfaces (>=4.5:1 against both --card-bg and
     --page-bg). Light-mode values were ~1.4-1.6:1 here. */
  --success-text: var(--palette-signal-green);
  --warning-text: var(--palette-signal-amber);
  --error-text: #FF8A7F;

  /* Dark fills: the status text mixed into the card color, so text on a fill stays >=4.5:1
     (success 4.85, warning 4.73, error 4.55). Error uses 6% because 10% measures 4.33 and
     14% measures 4.10. A light fill with dark-mode text measured 1.46:1 (TD-004). */
  --success-light: color-mix(in srgb, var(--success-text) 14%, var(--palette-lagoon));
  --warning-light: color-mix(in srgb, var(--warning-text) 14%, var(--palette-lagoon));
  --error-light: color-mix(in srgb, var(--error-text) 6%, var(--palette-lagoon));
}
/*
 * Shared shell for the parent site and the product sites (FIX-6417354A): the Nablr & Co. lockup,
 * the product-header divider and the footer, written once. Markup: shell/lockup.html and
 * shell/footer.html. The parent imports this file from src/styles/global.css; the sync script
 * concatenates it between tokens.css and base.css for every product site. Plain CSS reading
 * tokens only: no hex literal, no Tailwind, so both sides render the same pixels.
 */

/* ---------- Lockup ---------- */
/* NOTE: the folded-ribbons mark is 40px tall and 25.74px wide (40 x 482/749, the mark file's own
   aspect ratio), so the box edge is the ink edge and the ink sits on the grid edge (LOCKUP-RIBBON-FIT).
   40px is 3.2x the wordmark cap height and 1.5x the text stack; the brand sheets put it at 2.2x to 4.6x,
   and 48px would crowd the 68px header. Gap is 5.6px because the N's side bearing adds 0.9px: visible
   ink gap 6.5px, kept fixed when the mark grew from 26px so the mark stays tight to the name.
   Mark is centred on a 30px text block (17px wordmark, 3px gap, 10px tagline). The wordmark "Nablr & Co."
   is 11 characters, about 116px of ink; word-spacing -0.5em closes the two mono spaces to about 0.25em,
   the width of a proportional word space, so the & sits with its words instead of floating. "Enabling
   People" is 15 characters; matching the name would need tracking near 0.19em, nearly double the usual 0.1em
   for small uppercase and reads stretched, so tracking stays 0.1em and the tagline ends about 14px short
   of the period: left-aligned, never wider than the name. Change the wordmark size, tracking or
   word-spacing and re-check that.
   The wordmark offset aligns its ink edge with the grid (measured at 8x); the E of the tagline has no offset.
   tests/brand-lockup.test.mjs and the browser check catch drift. */
.shell-lockup {
  display: inline-flex;
  align-items: center;
  gap: 5.6px;
  line-height: 1;
}

.shell-lockup-mark {
  display: block;
  width: 25.74px;
  height: 40px;
}

.shell-lockup-mark-dark { display: none; }
html[data-theme="dark"] .shell-lockup-mark-light { display: none; }
html[data-theme="dark"] .shell-lockup-mark-dark { display: block; }

.shell-lockup-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  line-height: 1;
}

.shell-lockup-word {
  transform: translateX(-0.4px);
  font-family: var(--font-mono);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.15em;
  word-spacing: -0.5em;
  color: var(--text-primary);
}

.shell-lockup-tag {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--fog);
}

/* ---------- Product header: lockup link, divider, product name ---------- */
.shell-lockup-link {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.shell-divider {
  display: inline-block;
  align-self: center;
  width: 1px;
  height: 24px;
  margin: 0 1rem;
  background: var(--border-default);
}

/* ---------- Footer ---------- */
.shell-footer {
  border-top: 1px solid color-mix(in srgb, var(--palette-sea-mist) 50%, transparent);
  background: var(--band);
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: var(--font-weight-body);
  text-align: left;
}

html[data-theme="dark"] .shell-footer { border-top-color: var(--palette-lagoon); }

.shell-footer-inner {
  max-width: var(--shell-width, 72rem);
  margin: 0 auto;
  padding: 3.5rem 1.5rem;
}

.shell-footer-grid {
  display: grid;
  gap: 2.5rem;
}

@media (min-width: 768px) {
  .shell-footer-grid { grid-template-columns: 1.4fr 1fr; }
}

.shell-footer-blurb {
  margin-top: 1rem;
  max-width: 24rem;
  line-height: 1.625;
  color: var(--palette-stone-slate);
}

.shell-footer-cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2rem;
}

.shell-footer-head {
  font-weight: 500;
  color: var(--fog);
}

.shell-footer-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.75rem;
  list-style: none;
}

.shell-footer a {
  color: var(--palette-stone-slate);
  text-decoration: none;
  transition: color 0.15s ease;
}

.shell-footer a:hover { color: var(--palette-lagoon); }

.shell-footer-legal {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid color-mix(in srgb, var(--palette-sea-mist) 50%, transparent);
  font-size: 0.75rem;
  line-height: 1rem;
  color: var(--fog);
}

html[data-theme="dark"] .shell-footer-legal { border-top-color: var(--palette-lagoon); }

@media (min-width: 640px) {
  .shell-footer-legal {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

html[data-theme="dark"] .shell-footer-blurb,
html[data-theme="dark"] .shell-footer a { color: var(--fog); }
html[data-theme="dark"] .shell-footer a:hover { color: var(--palette-cool-mist); }
/* NOTE: product pages lay their content out in 1080px, so the header and the shared footer use
   the same width and line up with the page; the parent leaves --shell-width unset and gets
   shell.css's 72rem (max-w-6xl). */
:root { --shell-width: 1080px; }

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

body {
  font-family: var(--font-body);
  font-weight: var(--font-weight-body);
  background: var(--canvas);
  color: var(--text-primary);
  font-size: 15px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

/* ---------- Topbar ---------- */
.topbar {
  background: var(--canvas);
  border-bottom: var(--border-width) solid var(--border-default);
}

.topbar-inner {
  max-width: var(--shell-width);
  min-height: 68px; /* parent header is 69px with its 1px border; tests/shell-invariants checks the pair */
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.topbar-brand {
  display: flex;
  align-items: center;
  min-width: 0;
}

.brand {
  display: flex;
  align-items: center;
  text-decoration: none;
}

.brand-name {
  font-family: var(--font-mono);
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}

.brand-tag { color: var(--interactive); font-weight: 500; }

.logo { height: 28px; }

.topbar nav {
  display: flex;
  align-items: center;
  gap: 1.75rem;
  font-size: 0.9rem;
  font-weight: 500;
}

.topbar nav a { text-decoration: none; color: var(--text-primary); }
.topbar nav a:hover { color: var(--interactive); }

/* NOTE: lockup (134px) + divider + product name + anchors do not fit one row below ~720px, so
   the anchors drop to their own row. Checked at 375 and 768 on all three product pages. */
@media (max-width: 720px) {
  .topbar-inner { flex-wrap: wrap; row-gap: 0.25rem; padding-top: 0.75rem; padding-bottom: 0.5rem; }
  .topbar .shell-divider { margin: 0 0.75rem; }
  .topbar nav { flex: 1 1 100%; flex-wrap: wrap; gap: 0.25rem 1.25rem; }
  .topbar nav .theme-toggle { margin-left: auto; }
}

.nav-stamp {
  background: var(--cta);
  color: var(--page-bg) !important;
  padding: 0.45rem 1rem;
  border-radius: var(--radius-button);
}

.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius-button);
  background: transparent;
  color: var(--text-primary);
  cursor: pointer;
  transition: border-color 0.15s ease;
}

.theme-toggle:hover { border-color: var(--interactive); }

.theme-toggle svg { width: 16px; height: 16px; }

.icon-moon { display: none; }
html[data-theme="dark"] .icon-sun { display: none; }
html[data-theme="dark"] .icon-moon { display: block; }

main { max-width: 1080px; margin: 0 auto; padding: 0 24px; }

/* ---------- Hero ---------- */
.hero { padding: 4.5rem 0 3.5rem; }

.hero-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 3rem;
  align-items: center;
}

.eyebrow {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--interactive);
  margin-bottom: 1.25rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.eyebrow-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--success-text);
  display: inline-block;
}

h1 {
  font-size: 2.85rem;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.08;
  margin-bottom: 1.5rem;
}

.hero-strike {
  text-decoration: line-through;
  text-decoration-color: var(--error-text);
  text-decoration-thickness: 2px;
  opacity: 0.55;
}

h1 em { font-style: normal; color: var(--interactive); }

.subhead {
  font-size: 1.05rem;
  color: var(--text-primary);
  opacity: 0.8;
  max-width: 460px;
}

.subhead strong { font-weight: 700; }
.pron { font-size: 0.9em; opacity: 0.7; }

/* ---------- Terminal card ---------- */
.hero-terminal { position: relative; }

.terminal-tag {
  position: absolute;
  top: -0.6rem;
  right: 1.25rem;
  background: var(--success-light);
  color: var(--success-text);
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  padding: 0.2rem 0.55rem;
  border-radius: var(--radius-badge);
  z-index: 2;
}

.terminal {
  background: var(--palette-lagoon);
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.terminal-head {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.7rem 1rem;
  border-bottom: var(--border-width) solid color-mix(in srgb, var(--palette-cool-mist) 15%, transparent);
}

.dot { width: 9px; height: 9px; border-radius: 50%; }
.dot-r { background: var(--palette-dot-red); }
.dot-y { background: var(--palette-signal-amber); }
.dot-g { background: var(--palette-dot-green); }

.terminal-title {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: color-mix(in srgb, var(--palette-cool-mist) 70%, transparent);
  margin-left: 0.5rem;
}

.terminal-body {
  padding: 1.25rem 1.4rem 1.4rem;
  font-family: var(--font-mono);
  font-size: 0.88rem;
  color: var(--palette-cool-mist);
}

.terminal-body p { margin-bottom: 0.6rem; }
.terminal-body p:last-child { margin-bottom: 0; }

/* NOTE: terminal is dark in both themes, so the light-mode --interactive
   (dark slate) would vanish on it; pin a light value instead. */
.prompt { color: var(--palette-fog-dark); margin-right: 0.4rem; }
.dim { opacity: 0.4; font-size: 0.8rem; }
.ok { color: var(--palette-signal-green); }

.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--cta);
  color: var(--page-bg);
  text-decoration: none;
  padding: 0.8rem 1.6rem;
  border-radius: var(--radius-button);
  font-weight: 600;
  font-size: 0.95rem;
  margin-top: 1.25rem;
  transition: opacity 0.15s ease;
}

.btn-primary:hover { opacity: 0.85; }
.arrow { transition: transform 0.15s ease; }
.btn-primary:hover .arrow { transform: translateX(3px); }

.cta-note {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-top: 0.7rem;
}

/* ---------- Sections ---------- */
section:not(.hero) { padding: 3.5rem 0; border-top: var(--border-width) solid var(--border-default); }

.section-head { max-width: 560px; margin-bottom: 2rem; }

.section-kicker {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--interactive);
}

.section-head h2 {
  font-size: 1.9rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0.5rem 0 0.4rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.h2-icon {
  width: 1.4rem;
  height: 1.4rem;
  flex-shrink: 0;
  color: var(--interactive);
}

.section-lede { color: var(--text-primary); opacity: 0.7; font-size: 0.98rem; }

/* ---------- Problem: promise grid ---------- */
.promise-grid {
  background: var(--card-bg);
  box-shadow: var(--card-shadow);
  border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius-card);
  overflow: hidden;
  margin-bottom: 2rem;
}

.promise-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 0.9rem 1.4rem;
  border-bottom: var(--border-width) solid var(--border-default);
  font-size: 0.95rem;
}

.promise-row:last-child { border-bottom: none; }

.promise-header {
  background: var(--band);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

.bad { color: var(--error-text); }

.promise-label { display: flex; align-items: center; gap: 0.6rem; }

.promise-icon {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: color-mix(in srgb, var(--palette-lagoon) 6%, transparent);
  color: var(--interactive);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.promise-icon svg { width: 1rem; height: 1rem; }

.band-dark .promise-icon { background: color-mix(in srgb, var(--palette-cool-mist) 10%, transparent); color: var(--palette-pool-glass); }

/* ---------- Promise grid: highlighted "actually takes" column + pill values ----------
   Modifier on .promise-grid. Layout (header bar treatment, column band, pill
   padding) took the idea from lyzr.ai/cognis's "How Cognis Stacks Up" table, but
   radius/shadow/border-width are Nablr's own — see docs/design/theme.md. Cards
   here are flat: no shadow, 10-12px radius, 0.5px borders throughout.

   Header right cell is a deliberate color-mix() of error-text into text-primary
   (approved as-is after a side-by-side comparison against a no-blend "solid bar"
   alternative — this version was preferred). Row wash and pill styling stay
   blend-free (plain card-bg + full-strength error-text border/text) since those
   weren't part of the objection. */
.promise-grid.promise-grid-highlight {
  border-radius: var(--radius-card);
  border-color: var(--border-default);
}

.promise-grid-highlight .promise-row { padding: 0; }
.promise-grid-highlight .promise-row > * { padding: 1.1rem 1.25rem; }
.promise-grid-highlight .promise-row > *:last-child {
  border-left: var(--border-width) solid var(--border-default);
}

.promise-grid-highlight .promise-header {
  background: var(--text-primary);
  border-bottom: none;
}
.promise-grid-highlight .promise-header > * { padding: 1.1rem 1.25rem; }
.promise-grid-highlight .promise-header > *:first-child { color: color-mix(in srgb, var(--page-bg) 75%, transparent); }
.promise-grid-highlight .promise-header > *:last-child {
  background: color-mix(in srgb, var(--error-text) 14%, transparent);
  color: var(--page-bg);
}

/* Tone modifier: use when the highlighted column is the *good* answer (e.g.
   "generic tool" vs "our product"), not a warning. Swaps error-text for
   success-text throughout — same structure, different semantic color. */
.promise-grid-highlight.tone-good .promise-header > *:last-child {
  background: color-mix(in srgb, var(--success-text) 14%, transparent);
}
.promise-grid-highlight.tone-good .promise-tag {
  border-color: var(--success-text);
  color: var(--success-text);
}

.promise-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }

.promise-tag {
  display: inline-flex;
  align-items: center;
  background: var(--card-bg);
  border: var(--border-width) solid var(--error-text);
  color: var(--error-text);
  border-radius: 9999px;
  padding: 0.28rem 0.7rem;
  font-size: 0.72rem;
  font-weight: 500;
  white-space: nowrap;
}

/* ---------- Stat quad (4 equal-weight cards, replaces mismatched pairings
   like "one dense multi-row box next to one sparse single-number box").
   Icon-topped, colored by semantic tone. Shared across studio + invern. ---------- */
.stat-quad { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-bottom: 0.5rem; }

.stat-quad-card {
  background: var(--card-bg);
  box-shadow: var(--card-shadow);
  border: var(--border-width) solid var(--border-default);
  border-top: 2px solid var(--border-default);
  border-radius: var(--radius-card);
  padding: 1.25rem 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.stat-quad-icon {
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 50%;
  background: color-mix(in srgb, var(--palette-lagoon) 6%, transparent);
  color: var(--interactive);
  display: flex;
  align-items: center;
  justify-content: center;
}
.stat-quad-icon svg { width: 1.15rem; height: 1.15rem; }

.stat-quad-value { font-family: var(--font-mono); font-size: 1.5rem; font-weight: 700; color: var(--text-primary); margin-top: 0.1rem; }
.stat-quad-label { font-size: 0.75rem; color: var(--text-muted); line-height: 1.35; flex: 1; }

.stat-quad-bar { height: 5px; border-radius: 3px; background: var(--border-default); opacity: 0.4; overflow: hidden; margin-top: 0.2rem; }
.stat-quad-bar-fill { height: 100%; border-radius: 3px; background: var(--interactive); }

.stat-quad-warn { border-top-color: var(--error-text); }
.stat-quad-warn .stat-quad-icon { background: color-mix(in srgb, var(--error-text) 12%, transparent); color: var(--error-text); }
.stat-quad-warn .stat-quad-bar-fill { background: var(--error-text); }

.stat-quad-good { border-top-color: var(--success-text); }
.stat-quad-good .stat-quad-icon { background: color-mix(in srgb, var(--success-text) 12%, transparent); color: var(--success-text); }
.stat-quad-good .stat-quad-bar-fill { background: var(--success-text); }

.stat-quad-highlight { border-top-color: var(--interactive); text-align: center; }
.stat-quad-highlight .stat-quad-icon { margin: 0 auto; }
.stat-quad-highlight .stat-quad-value { font-size: 1.75rem; }

@media (max-width: 720px) {
  .stat-quad { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .stat-quad { grid-template-columns: 1fr; }
}

.metric-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}

.metric {
  background: var(--card-bg);
  box-shadow: var(--card-shadow);
  border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius-card);
  padding: 1.1rem 1rem;
  text-align: center;
}

.metric-before {
  font-family: var(--font-mono);
  font-size: 1rem;
  color: var(--text-muted);
  text-decoration: line-through;
}

.metric-arrow { color: var(--text-muted); margin: 0 0.3rem; }

.metric-after {
  font-family: var(--font-mono);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--success-text);
}

.metric-label {
  display: block;
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: 0.4rem;
}

.metric-solo { display: block; }

.metric-cite {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-top: 1rem;
}

.metric-cite a { color: var(--interactive); }

/* ---------- Fit: personas + use cases ---------- */
/* Compact row-list, not a card grid — persona-row only ever holds a
   handful of items (roles/profiles), and matching the same icon-top card
   shape as the 9-item usecase-grid right below it made two adjacent
   sections read as one repeated idiom. A single bordered list with
   icon-left/text-right rows borrows the table-row language used elsewhere
   in this redesign (promise-grid, tier-table) instead. */
.persona-row {
  display: flex;
  flex-direction: column;
  border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius-card);
  overflow: hidden;
  margin-bottom: 0.5rem;
}

.persona-card {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.1rem 1.25rem;
  background: var(--card-bg);
  box-shadow: var(--card-shadow);
  border-bottom: var(--border-width) solid var(--border-default);
}
.persona-card:last-child { border-bottom: none; }

.persona-copy { display: flex; flex-direction: column; min-width: 0; }

.persona-role {
  display: block;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--interactive);
  margin-bottom: 0.3rem;
}

.persona-card p { font-size: 1rem; opacity: 0.85; margin: 0; }

@media (max-width: 640px) {
  .persona-card { flex-direction: column; gap: 0.5rem; }
}

.usecase-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.usecase-card {
  display: block;
  background: var(--card-bg);
  box-shadow: var(--card-shadow);
  border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius-card);
  padding: 1.1rem 1.25rem;
  text-decoration: none;
  transition: border-color 0.15s ease;
}

.usecase-card:hover { border-color: var(--interactive); }

.usecase-icon {
  display: block;
  width: 1.3rem;
  height: 1.3rem;
  color: var(--interactive);
  margin-bottom: 0.6rem;
}

.usecase-name {
  display: block;
  font-weight: 700;
  font-size: 0.98rem;
  margin-bottom: 0.35rem;
}

.usecase-pain { font-size: 1rem; color: var(--text-muted); }

/* ---------- Trust ---------- */
.trust-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.trust-card {
  background: var(--card-bg);
  box-shadow: var(--card-shadow);
  border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius-card);
  padding: 1.1rem 1.25rem;
}

.trust-point {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 0.5rem;
}

.trust-card p { font-size: 1rem; color: var(--text-muted); }
.trust-card code { font-family: var(--font-mono); font-size: 0.85em; }

/* ---------- Pricing ---------- */
.tier-table {
  background: var(--card-bg);
  box-shadow: var(--card-shadow);
  border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius-card);
  overflow: hidden;
  margin-bottom: 1.5rem;
}

.tier-row {
  display: grid;
  grid-template-columns: 1fr 90px 90px;
  align-items: center;
  padding: 0.85rem 1.4rem;
  border-bottom: var(--border-width) solid var(--border-default);
  font-size: 0.95rem;
}

.tier-row:last-child { border-bottom: none; }

.tier-head {
  background: var(--band);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

.tier-row .yes, .tier-row .no { text-align: center; font-family: var(--font-mono); }
.yes { color: var(--success-text); font-weight: 600; }
/* NOTE: --border-default is a line color; as text it measured 1.95:1 (light) and 1.56:1 (dark). */
.no { color: var(--text-muted); }

/* ---------- Tier table highlight: same idea as .promise-grid-highlight
   (dark continuous header bar, last column tinted as "the upgrade"), adapted
   for a 3-column boolean capability matrix instead of a 2-column comparison.
   Reuses .promise-label/.promise-icon for the row-label icon. ---------- */
.tier-table.tier-table-highlight { border-radius: var(--radius-card); border-color: var(--border-default); }

.tier-table-highlight .tier-head {
  background: var(--text-primary);
  border-bottom: none;
}
.tier-table-highlight .tier-head > *:not(:last-child) { color: color-mix(in srgb, var(--page-bg) 75%, transparent); }
.tier-table-highlight .tier-head > *:last-child {
  background: color-mix(in srgb, var(--success-text) 14%, transparent);
  color: var(--page-bg);
}

.tier-table-highlight .tier-row:not(.tier-head) > *:last-child {
  border-left: var(--border-width) solid var(--border-default);
}

/* ---------- Clients ---------- */
.client-row {
  display: flex;
  gap: 1rem;
  margin-bottom: 1rem;
}

.client-tag {
  background: var(--card-bg);
  border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius-button);
  padding: 0.6rem 1.1rem;
  font-weight: 600;
  font-size: 0.92rem;
}

.client-note { font-size: 0.85rem; color: var(--text-muted); }

/* ---------- Product badges (nablr), above the shared footer ---------- */
.badge-row {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin: 2rem 0 1.5rem;
}

.badge-row img { height: 20px; }

/* ---------- Reveal animation ---------- */
.reveal {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.reveal.in { opacity: 1; transform: translateY(0); }

/* ---------- Responsive ---------- */
@media (max-width: 800px) {
  .hero-grid { grid-template-columns: 1fr; gap: 2rem; }
  .metric-strip { grid-template-columns: repeat(2, 1fr); }
  .persona-row, .usecase-grid, .trust-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 480px) {
  h1 { font-size: 2.1rem; }
  .topbar-inner { padding: 1rem 16px; }
  .topbar nav { gap: 1rem; font-size: 0.82rem; }
  main { padding: 0 16px; }
  .promise-row, .tier-row { padding: 0.75rem 1rem; font-size: 0.85rem; }
  .tier-row { grid-template-columns: 1fr 60px 60px; }
  .client-row { flex-wrap: wrap; }
  .persona-row, .usecase-grid, .trust-grid { grid-template-columns: 1fr; }
  .badge-row { flex-wrap: wrap; }
  section:not(.hero) { padding: 2.5rem 0; }
}

/* ============================================================
   Everything below this line was confirmed byte-identical across
   sites/studio, sites/invern and sites/nablr (diff/shasum) and was
   extracted out of each site's own styles.css during the
   packages/shared-styles split. See sites/{site}/custom.css for
   the CSS that stayed page-specific.
   ============================================================ */

/* ---------- Icon badge (trust / fit / industry cards) ---------- */
.icon-badge {
  width: 2.6rem;
  height: 2.6rem;
  margin: 0 auto 0.65rem;
  border-radius: 50%;
  background: color-mix(in srgb, var(--palette-lagoon) 6%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--interactive);
  flex-shrink: 0;
}

.icon-badge svg { width: 1.35rem; height: 1.35rem; }

.trust-card .icon-badge { margin: 0 0 0.75rem; }

/* ---------- Card micro-interaction: raised + shadow on hover (info + link cards alike) ---------- */
.usecase-card, .persona-card, .trust-card, .industry-card {
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.usecase-card:hover, .persona-card:hover, .trust-card:hover, .industry-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 28px -14px color-mix(in srgb, var(--palette-lagoon-deep) 22%, transparent);
  border-color: var(--interactive);
}
.band-dark .usecase-card:hover,
.band-dark .persona-card:hover,
.band-dark .trust-card:hover,
.band-dark .industry-card:hover {
  box-shadow: 0 14px 28px -14px rgba(0, 0, 0, 0.4);
  border-color: color-mix(in srgb, var(--palette-cool-mist) 40%, transparent);
}

/* ---------- Dark band (architecture / compliance / get-access / get-involved / trust) ---------- */
section:not(.hero).band-dark {
  position: relative;
  overflow: hidden;
  background: linear-gradient(155deg, var(--palette-lagoon-lift) 0%, var(--palette-lagoon-deep) 100%);
  color: var(--palette-cool-mist);
  border-top: none;
  border-radius: calc(var(--radius-card) * 2);
  padding: 3rem 2rem;
  margin: 3.5rem 0;
}

/* shine variants, assigned per-section by how central the content is:
   spotlight = the section's core selling point, sheen = secondary proof,
   plain band-dark (no modifier) = closing CTA, kept calm so the button leads.
   Both use a blurred circular blob (same technique as the hero glow), not a
   bare radial-gradient box — a gradient stretched into a non-square box reads
   as a hard diagonal seam instead of a soft glow. */
.band-dark.shine-spotlight::before {
  content: '';
  position: absolute;
  top: -18%;
  right: -10%;
  width: 480px;
  height: 480px;
  max-width: 60%;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, var(--palette-cool-mist), transparent 72%);
  filter: blur(70px);
  opacity: 0.22;
  pointer-events: none;
}

.band-dark.shine-sheen::before {
  content: '';
  position: absolute;
  top: -30%;
  left: 20%;
  width: 60%;
  height: 160%;
  border-radius: 50%;
  background: radial-gradient(circle, var(--palette-cool-mist), transparent 70%);
  filter: blur(90px);
  opacity: 0.1;
  pointer-events: none;
}

.band-dark .icon-badge {
  background: color-mix(in srgb, var(--palette-cool-mist) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--palette-cool-mist) 12%, transparent);
  color: var(--palette-pool-glass);
}

html[data-theme="dark"] section:not(.hero).band-dark {
  border: var(--border-width) solid color-mix(in srgb, var(--palette-cool-mist) 10%, transparent);
}

.band-dark .section-kicker { color: var(--palette-sea-mist); }
.band-dark .section-head h2 { color: var(--palette-cool-mist); }
.band-dark .section-lede { color: color-mix(in srgb, var(--palette-cool-mist) 70%, transparent); }
.band-dark .h2-icon { color: var(--palette-sea-mist); }

.band-dark .trust-card {
  background: color-mix(in srgb, var(--palette-cool-mist) 5%, transparent);
  border-color: color-mix(in srgb, var(--palette-cool-mist) 18%, transparent);
}
.band-dark .trust-point { color: var(--palette-cool-mist); }
.band-dark .trust-card p { color: color-mix(in srgb, var(--palette-cool-mist) 75%, transparent); }

.band-dark .btn-primary {
  background: var(--palette-cool-mist);
  color: var(--palette-lagoon);
}