/* ==========================================================================
   Gradien — Fonts
   Primary typeface: Satoshi (Fontshare, self-hosted under Fontshare's free
   commercial license — see fontshare.com/licenses/free-font-license).
   Technical addition: IBM Plex Mono (SIL Open Font License), used ONLY for
   technical metadata (source IDs, timestamps, governance tags, data
   labels). See readme.md.

   Both families are self-hosted from /fonts/ (woff2, latin subset
   only) instead of Fontshare's/Google Fonts' CDNs: it removes two
   render-blocking cross-origin stylesheet round trips and lets the browser
   start the font fetch alongside this stylesheet. Only the weights actually
   used in the design system are shipped — Satoshi 400/500/700 and IBM Plex
   Mono 400/500; unused Satoshi 900 was dropped.

   Filenames carry an 8-char sha256 content hash (e.g. satoshi-500.af02a722.
   woff2), so /fonts/* can serve `Cache-Control: public, max-age=
   31536000, immutable` (see public/_headers) safely: a future file-content
   change ships under a new hash/URL rather than overwriting bytes an
   immutably-cached client already has. Regenerate a hash with
   `shasum -a 256 <file> | cut -c1-8` and update it everywhere the filename
   appears (design-system/tokens/fonts.css, this file, and every page's
   <link rel="preload"> — the preload href MUST match the @font-face src
   exactly, or the browser fetches the font twice). See LICENSES.md in
   public/fonts/ for provenance and redistribution terms.
   ========================================================================== */

@font-face {
  font-family: 'Satoshi';
  src: url('/fonts/satoshi-400.50dca57f.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Satoshi';
  src: url('/fonts/satoshi-500.af02a722.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Satoshi';
  src: url('/fonts/satoshi-700.353a7fbf.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('/fonts/ibm-plex-mono-400.08949f72.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('/fonts/ibm-plex-mono-500.01d28544.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
/* ==========================================================================
   Gradien — Color tokens
   Strategy: ~80–85% white / off-white / charcoal / black, 10–15% imagery,
   ≤5% signal color. The blue→cyan→green gradient belongs to the color logo
   and occasional brand moments — never a default background.
   ========================================================================== */

:root {
  /* --- Base neutrals (non-negotiable brand palette) --- */
  --black: #050505;          /* Primary dark surface, high-impact UI      */
  --ink: #111111;            /* Primary text + logos on light surfaces    */
  --text-muted: #5F5F5F;     /* Supporting copy                           */
  --text-soft: #6E6E6E;      /* Metadata + quiet UI                       */
  --white: #FFFFFF;          /* Light canvas + inverse text               */
  --surface-soft: #F4F2F2;   /* Subtle section / card background          */
  --surface-card: #F0EEEE;   /* Cards + contained UI                      */
  --surface-hover: #EAE7E7;  /* Hover / selected light state              */
  --line: #E4E1E1;           /* Borders + dividers                        */

  /* Body copy sits between ink and muted (per type spec) */
  --ink-body: #3F3F3F;

  /* --- Signal accents (≤5% usage) --- */
  --signal-green: #93F33D;   /* Active / success / highlight              */
  --signal-blue: #3D7BFF;    /* Links, directional accents, product signal*/
  --signal-cyan: #45D9D1;    /* Data / context accent                     */
  /* AA-safe blue for link TEXT on white (color is never the sole cue)    */
  --signal-blue-ink: #2A5FD6;

  /* Functional (non-brand) — states the neutral+signal palette can't cover.
     Always paired with an icon or text; never color alone.                */
  --danger: #C4362A;
  --danger-ink: #A22C22;
  --danger-soft: #FBEEEC;

  /* Brand gradient — color logo + rare hero moments only */
  --brand-gradient: linear-gradient(90deg, #3D7BFF 0%, #45D9D1 50%, #93F33D 100%); /* @kind color */

  /* --- Semantic: text --- */
  --text-primary: var(--ink);
  --text-secondary: var(--text-muted);
  --text-tertiary: var(--text-soft);
  --text-inverse: var(--white);
  --text-inverse-secondary: rgba(255, 255, 255, 0.66);
  --text-inverse-tertiary: rgba(255, 255, 255, 0.62);
  --text-link: var(--signal-blue-ink);

  /* --- Semantic: surfaces --- */
  --surface-page: var(--white);
  --surface-subtle: var(--surface-soft);
  --surface-raised: var(--surface-card);
  --surface-inverse: var(--black);
  --surface-inverse-raised: var(--ink);
  --surface-inverse-card: #1A1A1A;

  /* --- Semantic: borders --- */
  --border-subtle: var(--line);
  --border-strong: #D6D3D3;
  --border-inverse: rgba(255, 255, 255, 0.14);
  --border-inverse-strong: rgba(255, 255, 255, 0.24);

  /* --- Focus --- */
  --focus-ring: var(--signal-blue);
  --focus-ring-shadow: 0 0 0 3px rgba(61, 123, 255, 0.35);
}
/* ==========================================================================
   Gradien — Typography tokens
   Satoshi throughout. Editorial confidence via a MEDIUM display weight (500),
   tight tracking, and generous whitespace — restraint over spectacle.
   (This refines the supplied 900 display weight toward the next-gen
   Wonderful×Cohere editorial direction; see readme.md.)
   ========================================================================== */

:root {
  /* Families */
  --font-sans: 'Satoshi', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Weights */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-bold: 700;
  --weight-black: 900;

  /* Fluid sizes — mobile min → desktop max */
  --text-display: clamp(2.5rem, 5.5vw, 6rem);      /* 40 → 96  Hero            */
  --text-h1: clamp(2.25rem, 4vw, 4rem);            /* 36 → 64  Section heading */
  --text-h2: clamp(1.75rem, 3vw, 2.75rem);         /* 28 → 44  Sub-section     */
  --text-h3: clamp(1.5rem, 2vw, 2rem);             /* 24 → 32  Card title      */
  --text-title: 1.375rem;                          /* 22       Small heading   */
  --text-lead: clamp(1.25rem, 1.6vw, 1.5rem);      /* 20 → 24  Lead paragraph  */
  --text-body-lg: 1.25rem;                         /* 20       Large body      */
  --text-body: 1.125rem;                           /* 18       Body            */
  --text-ui: 1rem;                                 /* 16       UI              */
  --text-sm: 0.875rem;                             /* 14       Meta / UI small  */
  --text-xs: 0.75rem;                              /* 12       Mono labels      */

  /* Line-heights */
  --leading-display: 0.98;
  --leading-tight: 1.05;
  --leading-heading: 1.12;
  --leading-snug: 1.25;
  --leading-body: 1.45;
  --leading-relaxed: 1.6;

  /* Letter-spacing */
  --tracking-display: -0.03em;
  --tracking-tight: -0.02em;
  --tracking-normal: -0.006em;
  --tracking-wide: 0.02em;
  --tracking-caps: 0.09em;   /* uppercase eyebrows / mono labels */

  /* Reading measure (45–65ch) */
  --measure: 60ch;
  --measure-narrow: 46ch;
}
/* ==========================================================================
   Gradien — Spacing, layout & geometry tokens
   8px spacing base. Whitespace is part of the brand — protect it around
   heroes, proof, and major transitions.
   ========================================================================== */

:root {
  /* Spacing scale (8px base) */
  --space-0: 0;
  --space-xs: 4px;
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 48px;
  --space-6: 64px;
  --space-7: 80px;
  --space-8: 96px;
  --space-9: 120px;
  --space-10: 160px;
  --space-11: 192px;

  /* Layout */
  --container-max: 1440px;
  --container-narrow: 960px;      /* editorial / case-study body */
  --container-text: 720px;        /* long-form reading column     */
  --gutter: clamp(20px, 4vw, 64px); /* @kind spacing */
  --grid-columns: 12;                 /* @kind other */
  --grid-gap: 24px;

  /* Section rhythm — 64 (mobile) → 160 (desktop) */
  --section-y: clamp(64px, 10vw, 160px);       /* @kind spacing */
  --section-y-tight: clamp(48px, 7vw, 112px);  /* @kind spacing */

  /* Corner radii */
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-2xl: 24px;
  --radius-3xl: 32px;    /* large feature / problem cards */
  --radius-pill: 999px;

  /* Component sizing */
  --control-h-sm: 40px;
  --control-h: 48px;      /* buttons / inputs (44–52 range) */
  --control-h-lg: 52px;
  --tap-min: 44px;        /* minimum tap target */
}
/* ==========================================================================
   Gradien — Motion & elevation tokens
   Motion reinforces hierarchy: gentle reveals, subtle hover, count-ups,
   short scroll transitions. 180–400ms, soft confident easing. No loud glow.
   Elevation is quiet — prefer borders, tonal surfaces, and space over shadow.
   ========================================================================== */

:root {
  /* Durations */
  --duration-fast: 180ms;   /* @kind other */
  --duration-base: 240ms;   /* @kind other */
  --duration-slow: 400ms;   /* @kind other */

  /* Easing — soft, confident */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);    /* @kind other */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */

  /* Shadows — restrained */
  --shadow-none: none;
  --shadow-sm: 0 1px 2px rgba(5, 5, 5, 0.04);
  --shadow-md: 0 6px 20px rgba(5, 5, 5, 0.06);
  --shadow-lg: 0 20px 56px rgba(5, 5, 5, 0.10);
  --shadow-dark: 0 24px 64px rgba(0, 0, 0, 0.40);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}
/* ==========================================================================
   Gradien — Base layer
   Resets, element defaults, link + focus states, and a few brand utilities.
   Everything is token-driven so consumers inherit the system automatically.
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-body);
  font-weight: var(--weight-regular);
  line-height: var(--leading-body);
  letter-spacing: var(--tracking-normal);
  color: var(--ink-body);
  background-color: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Headings default to ink + medium + tight — consumers override sizes via tokens */
h1, h2, h3, h4, h5, h6 {
  margin: 0;
  color: var(--text-primary);
  font-weight: var(--weight-medium);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
}

p {
  margin: 0;
  text-wrap: pretty;
}

/* Links — always defined so editor-added links never fall back to browser blue */
a {
  color: var(--text-link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  text-decoration-color: color-mix(in srgb, var(--text-link) 40%, transparent);
  transition: color var(--duration-fast) var(--ease-out),
              text-decoration-color var(--duration-fast) var(--ease-out);
}
a:not([class*="gr-btn"]):hover {
  color: var(--signal-blue);
  text-decoration-color: currentColor;
}

img, svg, video {
  display: block;
  max-width: 100%;
}

button {
  font-family: inherit;
}

::selection {
  background: var(--signal-blue);
  color: var(--white);
}

:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

/* --- Brand utilities (optional, prefixed to avoid collisions) --- */

.gr-container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.gr-grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), 1fr);
  gap: var(--grid-gap);
}

/* Eyebrow / kicker — mono, uppercase, quiet. The system's technical voice. */
.gr-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-secondary);
}

.gr-mono {
  font-family: var(--font-mono);
  font-feature-settings: 'tnum' 1;
}
/* ==========================================================================
   Gradien components — Brand (Logo, LogoStrip)
   ========================================================================== */

.gr-logo { display: block; flex: none; }

/* --- LogoStrip --- */
.gr-logostrip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
}
.gr-logostrip__label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-tertiary);
}
.gr-logostrip__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(28px, 5vw, 64px);
}
.gr-logostrip__item { display: inline-flex; align-items: center; }
.gr-logostrip__item img {
  height: 26px;
  width: auto;
  filter: grayscale(1);
  opacity: 0.5;
  transition: opacity var(--duration-base) var(--ease-out);
}
.gr-logostrip__item:hover img { opacity: 0.8; }
.gr-logostrip__word {
  font-size: var(--text-title);
  font-weight: var(--weight-medium);
  letter-spacing: -0.02em;
  color: var(--text-tertiary);
  transition: color var(--duration-base) var(--ease-out);
  white-space: nowrap;
}
.gr-logostrip__item:hover .gr-logostrip__word { color: var(--text-secondary); }
.gr-logostrip--dark .gr-logostrip__label { color: var(--text-inverse-tertiary); }
.gr-logostrip--dark .gr-logostrip__word { color: var(--text-inverse-tertiary); }
.gr-logostrip--dark .gr-logostrip__item:hover .gr-logostrip__word { color: var(--text-inverse-secondary); }
.gr-logostrip--dark .gr-logostrip__item img { filter: grayscale(1) brightness(0) invert(1); opacity: 0.4; }
.gr-logostrip--dark .gr-logostrip__item:hover img { opacity: 0.7; }
/* ==========================================================================
   Gradien components — Actions (Button, Link)
   ========================================================================== */

/* --- Button --- */
.gr-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  font-family: var(--font-sans);
  font-weight: var(--weight-medium);
  letter-spacing: -0.01em;
  line-height: 1;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  user-select: none;
  transition: background-color var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-base) var(--ease-out),
              transform var(--duration-base) var(--ease-out);
}
.gr-btn__icon { display: inline-flex; align-items: center; }
.gr-btn__icon svg { width: 1.15em; height: 1.15em; display: block; }
.gr-btn:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

/* Sizes */
.gr-btn--sm { height: var(--control-h-sm); padding: 0 var(--space-2); font-size: var(--text-sm); }
.gr-btn--md { height: var(--control-h);    padding: 0 22px;          font-size: var(--text-ui); }
.gr-btn--lg { height: var(--control-h-lg); padding: 0 var(--space-4); font-size: var(--text-ui); }
.gr-btn--full { width: 100%; }

/* Primary — black */
.gr-btn--primary { background: var(--black); color: var(--white); }
.gr-btn--primary:hover { background: #262626; transform: translateY(-1px); box-shadow: var(--shadow-md); }
.gr-btn--primary:active { background: var(--black); transform: translateY(0); box-shadow: none; }

/* Secondary — white with ink border */
.gr-btn--secondary { background: var(--white); color: var(--ink); border-color: var(--border-strong); }
.gr-btn--secondary:hover { background: var(--surface-soft); border-color: var(--ink); }
.gr-btn--secondary:active { background: var(--surface-hover); }

/* Ghost — text only */
.gr-btn--ghost { background: transparent; color: var(--ink); }
.gr-btn--ghost:hover { background: var(--surface-soft); }
.gr-btn--ghost:active { background: var(--surface-hover); }

/* Explicit hover text colors: a :hover pseudo-class carries higher
   specificity than a plain class selector, so without these, the global
   a:hover rule above could still tint button text on hover. */
.gr-btn--primary:hover { color: var(--white); }
.gr-btn--secondary:hover, .gr-btn--ghost:hover { color: var(--ink); }
.gr-on-dark .gr-btn--secondary:hover, .gr-on-dark .gr-btn--ghost:hover { color: var(--white); }

/* Disabled */
.gr-btn:disabled,
.gr-btn[aria-disabled="true"] {
  background: var(--surface-hover);
  color: var(--text-soft);
  border-color: transparent;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
  pointer-events: none;
}

/* Inverse context (buttons on dark sections) */
.gr-on-dark .gr-btn--primary { background: var(--white); color: var(--ink); }
.gr-on-dark .gr-btn--primary:hover { background: #E7E7E7; }
.gr-on-dark .gr-btn--secondary { background: transparent; color: var(--white); border-color: var(--border-inverse-strong); }
.gr-on-dark .gr-btn--secondary:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.5); }
.gr-on-dark .gr-btn--ghost { color: var(--white); }
.gr-on-dark .gr-btn--ghost:hover { background: rgba(255,255,255,0.08); }

/* --- Link --- */
.gr-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: var(--weight-medium);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-out);
}
.gr-link__label {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  text-decoration-color: color-mix(in srgb, currentColor 38%, transparent);
  transition: text-decoration-color var(--duration-fast) var(--ease-out);
}
.gr-link--default { color: var(--text-link); }
.gr-link--default:hover { color: var(--signal-blue); }
.gr-link--quiet { color: var(--ink); }
.gr-link--quiet:hover { color: var(--text-muted); }
.gr-link:hover .gr-link__label { text-decoration-color: currentColor; }
.gr-link:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; border-radius: var(--radius-xs); }

/* Arrow variant — no underline, arrow advances on hover */
.gr-link--arrow .gr-link__label { text-decoration: none; }
.gr-link__arrow { flex: none; transition: transform var(--duration-base) var(--ease-out); }
.gr-link--arrow:hover .gr-link__arrow { transform: translateX(4px); }

.gr-on-dark .gr-link--default { color: var(--signal-cyan); }
.gr-on-dark .gr-link--quiet { color: var(--white); }
.gr-on-dark .gr-link--quiet:hover { color: var(--text-inverse-secondary); }
/* ==========================================================================
   Gradien components — Forms (Input, Select, Textarea)
   ========================================================================== */

.gr-field { display: flex; flex-direction: column; gap: var(--space-1); }
.gr-field__label {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--text-primary);
  letter-spacing: -0.005em;
}
.gr-field__msg { font-size: var(--text-sm); color: var(--text-muted); }
.gr-field__msg--error { color: var(--danger-ink); }

/* Field box (wrapper carries the border + focus ring) */
.gr-input {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  background: var(--white);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  padding-inline: var(--space-2);
  transition: border-color var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out);
}
.gr-input--md { height: var(--control-h); }
.gr-input--lg { height: var(--control-h-lg); }
.gr-input--area { height: auto; padding-block: 12px; align-items: stretch; }

.gr-input__icon { display: inline-flex; color: var(--text-soft); flex: none; }
.gr-input__icon svg { width: 18px; height: 18px; }

.gr-input__control {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  font-family: var(--font-sans);
  font-size: var(--text-ui);
  color: var(--text-primary);
  letter-spacing: -0.005em;
}
.gr-input__control::placeholder { color: var(--text-soft); }
.gr-textarea__control { resize: vertical; line-height: var(--leading-snug); padding: 0; min-height: 88px; }

/* Focus */
.gr-input:focus-within {
  border-color: var(--signal-blue);
  box-shadow: var(--focus-ring-shadow);
}

/* Error */
.gr-field.is-error .gr-input { border-color: var(--danger); }
.gr-field.is-error .gr-input:focus-within { box-shadow: 0 0 0 3px rgba(196,54,42,0.22); }

/* Disabled */
.gr-input:has(.gr-input__control:disabled) { background: var(--surface-soft); border-color: var(--line); }
.gr-input__control:disabled { color: var(--text-soft); cursor: not-allowed; }

/* Select */
.gr-select { position: relative; padding-right: 0; }
.gr-select__control {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 40px;
  cursor: pointer;
  color: var(--text-primary);
}
.gr-select__control:invalid { color: var(--text-soft); }
.gr-select__chevron {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  pointer-events: none;
}

/* On dark surfaces */
.gr-on-dark .gr-field__label { color: var(--white); }
.gr-on-dark .gr-input { background: rgba(255,255,255,0.05); border-color: var(--border-inverse-strong); }
.gr-on-dark .gr-input__control { color: var(--white); }
.gr-on-dark .gr-input__control::placeholder { color: var(--text-inverse-tertiary); }
/* ==========================================================================
   Gradien components — Feedback (Icon, IconBadge, Badge)
   ========================================================================== */

.gr-icon { display: inline-block; flex: none; vertical-align: middle; }

/* --- IconBadge --- */
.gr-iconbadge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
  flex: none;
}
.gr-iconbadge--sm { width: 36px; height: 36px; }
.gr-iconbadge--sm .gr-icon { width: 18px; height: 18px; }
.gr-iconbadge--md { width: 44px; height: 44px; }
.gr-iconbadge--md .gr-icon { width: 20px; height: 20px; }
.gr-iconbadge--lg { width: 56px; height: 56px; }
.gr-iconbadge--lg .gr-icon { width: 24px; height: 24px; }

.gr-iconbadge--neutral { background: var(--surface-card); color: var(--ink); }
.gr-iconbadge--dark    { background: var(--ink); color: var(--white); }
.gr-iconbadge--blue    { background: color-mix(in srgb, var(--signal-blue) 14%, white); color: var(--signal-blue-ink); }
.gr-iconbadge--cyan    { background: color-mix(in srgb, var(--signal-cyan) 20%, white); color: #0E7C77; }
.gr-iconbadge--green   { background: color-mix(in srgb, var(--signal-green) 28%, white); color: #3B6B14; }

.gr-on-dark .gr-iconbadge--neutral { background: rgba(255,255,255,0.08); color: var(--white); }
.gr-on-dark .gr-iconbadge--dark    { background: rgba(255,255,255,0.10); color: var(--white); }

/* --- Badge --- */
.gr-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-sans);
  font-weight: var(--weight-medium);
  letter-spacing: -0.005em;
  border-radius: var(--radius-pill);
  white-space: nowrap;
  line-height: 1;
}
.gr-badge--sm { font-size: var(--text-xs); padding: 4px 9px; }
.gr-badge--md { font-size: var(--text-sm); padding: 5px 12px; }
.gr-badge__dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }

.gr-badge--neutral { background: var(--surface-card); color: var(--text-secondary); }
.gr-badge--outline { background: transparent; color: var(--text-secondary); box-shadow: inset 0 0 0 1px var(--border-strong); }
.gr-badge--dark    { background: var(--ink); color: var(--white); }
.gr-badge--blue    { background: color-mix(in srgb, var(--signal-blue) 12%, white); color: var(--signal-blue-ink); }
.gr-badge--cyan    { background: color-mix(in srgb, var(--signal-cyan) 18%, white); color: #0E7C77; }
.gr-badge--green   { background: color-mix(in srgb, var(--signal-green) 24%, white); color: #3B6B14; }
/* Signal dots read as pure accent for live status */
.gr-badge--green .gr-badge__dot { background: #6DC61F; }
.gr-badge--cyan  .gr-badge__dot { background: var(--signal-cyan); }
.gr-badge--blue  .gr-badge__dot { background: var(--signal-blue); }

.gr-on-dark .gr-badge--neutral { background: rgba(255,255,255,0.10); color: var(--text-inverse-secondary); }
.gr-on-dark .gr-badge--outline { color: var(--text-inverse-secondary); box-shadow: inset 0 0 0 1px var(--border-inverse-strong); }
.gr-on-dark .gr-badge--green { background: rgba(147,243,61,0.16); color: #B6F778; }
.gr-on-dark .gr-badge--cyan  { background: rgba(69,217,209,0.16); color: #7FEAE4; }
.gr-on-dark .gr-badge--blue  { background: rgba(61,123,255,0.20); color: #9DBBFF; }
/* ==========================================================================
   Gradien components — Navigation (Header, Footer, Tabs)
   ========================================================================== */

/* --- Skip link (canonical copy; per-page stylesheets must not redefine this) --- */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--black);
  color: var(--white);
  padding: 10px 18px;
  border-radius: var(--radius-sm);
  text-decoration: none;
}
.skip-link:focus {
  left: 12px;
  top: 12px;
}

/* --- Header --- */
.gr-header { position: relative; z-index: 50; width: 100%; }

.gr-header__announce {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  background: var(--ink);
  color: var(--white);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  padding: 9px var(--space-3);
  text-decoration: none;
  transition: background var(--duration-fast) var(--ease-out);
}
.gr-header__announce:hover { background: #1E1E1E; }
.gr-header__announce-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--signal-green); flex: none; }
.gr-header__announce svg { transition: transform var(--duration-base) var(--ease-out); }
.gr-header__announce:hover svg { transform: translateX(3px); }

.gr-header__bar { width: 100%; }
.gr-header--sticky { position: sticky; top: 0; }
.gr-header--sticky .gr-header__bar {
  background: color-mix(in srgb, var(--white) 82%, transparent);
  backdrop-filter: saturate(1.2) blur(14px);
  -webkit-backdrop-filter: saturate(1.2) blur(14px);
  border-bottom: 1px solid var(--line);
}
.gr-header--dark.gr-header--sticky .gr-header__bar {
  background: color-mix(in srgb, var(--black) 68%, transparent);
  border-bottom-color: var(--border-inverse);
}

.gr-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  height: 72px;
}
.gr-header__logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; flex: none; }
.gr-header__logo-text { display: flex; flex-direction: column; line-height: 1.15; }
.gr-header__logo-name { font-size: 19px; font-weight: var(--weight-medium); color: var(--ink); letter-spacing: -0.01em; }
.gr-header__logo-by { font-size: 11px; color: var(--text-tertiary); letter-spacing: 0.01em; }

.gr-header__nav { display: flex; align-items: center; gap: clamp(20px, 2.2vw, 34px); }
.gr-header__menu { position: relative; display: inline-flex; align-items: center; }
.gr-header__menu-trigger {
  display: inline-flex;
  align-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  font: inherit;
}
/* CSS-drawn chevron (border corner rotated 45deg) instead of a Unicode
   glyph: a font's "⌄" character is rarely centered within its own em box,
   so no amount of line-height/flex centering on the box keeps the visible
   ink centered on the label across fonts. A drawn shape has no such
   metrics to fight — its box IS its ink, so flex centering just works. */
.gr-header__menu-trigger::after {
  content: "";
  width: 6px;
  height: 6px;
  margin-left: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  flex: none;
}
.gr-header__submenu {
  position: absolute;
  top: calc(100% + 12px);
  left: 0;
  z-index: 20;
  min-width: 320px;
  padding: var(--space-2);
  background: var(--white);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}
.gr-header__submenu--resources { left: auto; right: 0; min-width: 370px; }
.gr-header__submenu[hidden] { display: none; }
/* Invisible hover bridge spanning the 12px gap above the panel. It's a
   generated child of .gr-header__submenu, so hovering it still counts as
   hovering the menu/panel (hover state bubbles to ancestors by DOM
   ancestry, not visual box containment) — without it, the pointer crosses
   dead space between the trigger and the panel, :hover briefly goes false,
   and the panel disappears before the pointer arrives. */
.gr-header__submenu::before {
  content: "";
  position: absolute;
  top: -12px;
  left: 0;
  right: 0;
  height: 12px;
}
/* Open on hover/keyboard-focus in addition to the click-driven state below,
   so the menu appears as soon as the pointer arrives, not only after a click.
   This no-JS-safe pair ([hidden] hides, :hover/:focus-within shows) stays the
   fallback for visitors without JS; once html.js is present, the fade rules
   below take over (higher specificity) and keep the panel present in the
   layout so it can cross-fade instead of snapping in and out. */
.gr-header__menu:hover .gr-header__submenu,
.gr-header__menu:focus-within .gr-header__submenu {
  display: block;
}
/* Fade: the [hidden] attribute remains the state carrier (toggled by
   site-v3.js), but under html.js the panel cross-fades in/out instead of
   snapping, and stays hoverable-open via opacity/visibility rather than
   display so the transition can run. */
html.js .gr-header__submenu {
  display: block;
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 180ms var(--ease-out), transform 180ms var(--ease-out),
              visibility 0s linear 0s;
}
html.js .gr-header__submenu[hidden] {
  display: block;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  pointer-events: none;
  transition: opacity 160ms var(--ease-out), transform 160ms var(--ease-out),
              visibility 0s linear 160ms;
}
html.js .gr-header__menu:hover .gr-header__submenu {
  opacity: 1;
  visibility: visible;
  transform: none;
  pointer-events: auto;
  transition-delay: 0s;
}
.gr-header__submenu a {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  text-decoration: none;
}
.gr-header__submenu a:hover, .gr-header__submenu a:focus-visible { background: var(--surface-subtle); }
html.js .gr-header__submenu a:hover { background: transparent; }
/* Moving hover highlight: a single glide element (created by site-v3.js)
   slides between submenu items on mouseenter instead of each link drawing
   its own background, so the highlight appears to travel rather than jump.
   Kept out of the shared header markup (see nav-parity) — it's a runtime
   child, not authored HTML. */
.gr-header__submenu-glide {
  position: absolute;
  left: var(--space-2);
  right: var(--space-2);
  top: 0;
  height: 0;
  background: var(--surface-subtle);
  border-radius: var(--radius-md);
  opacity: 0;
  pointer-events: none;
  transition: top 200ms var(--ease-out), height 200ms var(--ease-out), opacity 140ms var(--ease-out);
}
.gr-header__submenu-glide.is-on { opacity: 1; }
.gr-header__submenu-text { display: flex; flex-direction: column; min-width: 0; }
.gr-header__submenu-text strong, .gr-header__submenu-text span { display: block; }
.gr-header__submenu-text span { margin-top: 4px; color: var(--text-secondary); font-size: var(--text-sm); line-height: var(--leading-snug); }
.gr-header__submenu-icon {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.gr-header__submenu-icon svg, .gr-header__submenu-icon img { width: 18px; height: 18px; }
.gr-header__submenu-icon--core { background: color-mix(in srgb, var(--signal-blue) 16%, white); }
.gr-header__submenu-icon--fincore { background: color-mix(in srgb, var(--signal-cyan) 20%, white); }
.gr-header__submenu-icon--enterprise { background: color-mix(in srgb, var(--signal-green) 24%, white); }
.gr-header__submenu-icon--blog,
.gr-header__submenu-icon--docs,
.gr-header__submenu-icon--guides,
.gr-header__submenu-icon--security {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: var(--weight-medium);
  color: var(--text-primary);
  background: var(--surface-soft);
  border: 1px solid var(--line);
}
.gr-header__mobile-group { border-bottom: 1px solid var(--border-subtle); }
/* Disclosure trigger: same muted-caption look the old plain <span> label
   had, but a real full-width button so the group's links stay collapsed
   until tapped. The chevron rotates open/closed with aria-expanded. */
.gr-header__mobile-group-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--space-2) 0;
  font: inherit;
  font-size: var(--text-h3);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-tight);
  color: var(--ink);
  background: transparent;
  border: 0;
  cursor: pointer;
  text-align: left;
}
.gr-header__mobile-group-trigger::after {
  content: "";
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--text-muted);
  border-bottom: 2px solid var(--text-muted);
  transform: rotate(45deg);
  flex: none;
  transition: transform var(--duration-fast) var(--ease-out);
}
.gr-header__mobile-group-trigger[aria-expanded="true"]::after { transform: rotate(225deg); }
/* Same no-JS-safe convention used throughout this site: panels are visible
   by default (so the Core/FinCore links stay reachable with no JS at all)
   and only collapse once html.js is present, matching the "only show the
   submenu after tapping" ask for the JS-enhanced case. */
html.js .gr-header__mobile-group-panel { display: none; }
html.js .gr-header__mobile-group-panel.is-open { display: block; }
/* Distinct background marks these as nested sub-items of the trigger above,
   rather than relying on font-size to signal hierarchy (every nav item,
   top-level or nested, shares one size). */
.gr-header__mobile-group-panel {
  background: var(--surface-soft);
  border-radius: var(--radius-md);
  padding: 0 var(--space-3);
  margin-bottom: var(--space-2);
}
.gr-header__mobile-group-panel a { display: block; padding: var(--space-2) 0; }
.gr-header__mobile-group-panel a:last-child { border-bottom: 0; }
.gr-header__link {
  display: inline-flex;
  align-items: center;
  line-height: 1.2;
  font-size: 15px;
  font-weight: var(--weight-medium);
  color: var(--text-secondary);
  text-decoration: none;
  letter-spacing: -0.01em;
  transition: color var(--duration-fast) var(--ease-out);
}
.gr-header__link:hover { color: var(--ink); }
.gr-header--dark .gr-header__link { color: var(--text-inverse-secondary); }
.gr-header--dark .gr-header__link:hover { color: var(--white); }

.gr-header__actions { display: flex; align-items: center; gap: var(--space-3); }
.gr-header__signin {
  font-size: 15px; font-weight: var(--weight-medium); color: var(--ink); text-decoration: none;
}
.gr-header__signin:hover { color: var(--text-muted); }
.gr-header--dark .gr-header__signin { color: var(--white); }

/* Utility link (such as Sign in): quieter than a .gr-btn, always shown
   alongside whichever [data-cta] buttons a route exposes — see the
   contextual-CTA show/hide system below. Base display is inline-flex so
   the show-rule below can restore it without changing box type. */
.gr-header__utility {
  display: inline-flex;
  align-items: center;
  font-size: 15px;
  font-weight: var(--weight-medium);
  color: var(--text-secondary);
  text-decoration: none;
}
.gr-header__utility:hover { color: var(--ink); }
.gr-header--dark .gr-header__utility { color: var(--text-inverse-secondary); }
.gr-header--dark .gr-header__utility:hover { color: var(--white); }

.gr-header__toggle {
  display: none;
  width: var(--tap-min); height: var(--tap-min);
  align-items: center; justify-content: center;
  background: transparent; border: 0; cursor: pointer;
  color: var(--ink); border-radius: var(--radius-sm);
}
.gr-header--dark .gr-header__toggle { color: var(--white); }

.gr-header__mobile { display: none; }
.gr-header__mobile-nav { display: flex; flex-direction: column; }
.gr-header__mobile-nav a {
  padding: var(--space-2) 0;
  font-size: var(--text-h3);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-tight);
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
}
.gr-header__mobile-actions { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-3); }

@media (max-width: 1200px) {
  .gr-header__nav, .gr-header__actions { display: none; }
  .gr-header__toggle { display: inline-flex; }
  .gr-header.is-open .gr-header__mobile {
    display: block;
    padding: var(--space-2) var(--gutter) var(--space-5);
    background: var(--surface-page);
    border-bottom: 1px solid var(--line);
  }
  .gr-header--dark.is-open .gr-header__mobile { background: var(--black); border-bottom-color: var(--border-inverse); }
  .gr-header--dark.is-open .gr-header__mobile-nav a { color: var(--white); border-bottom-color: var(--border-inverse); }
}

/* --- Footer --- */
.gr-footer { background: var(--black); color: var(--text-inverse-secondary); padding-top: var(--section-y-tight); }
.gr-footer__inner {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) 2fr;
  gap: clamp(40px, 6vw, 96px);
  padding-bottom: var(--space-7);
}
.gr-footer__brand { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); }
.gr-footer__mission { font-size: var(--text-body); line-height: var(--leading-snug); color: var(--text-inverse-secondary); max-width: 30ch; }
.gr-footer__cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); }
.gr-footer__col-title {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-inverse-tertiary);
  margin-bottom: var(--space-2);
}
.gr-footer__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.gr-footer__endpoint-note { text-align: center; color: var(--text-inverse-tertiary); font-size: 13px; padding: 16px 0 0; }
.gr-footer__list a {
  font-size: 15px; color: var(--text-inverse-secondary); text-decoration: none;
  transition: color var(--duration-fast) var(--ease-out);
}
.gr-footer__list a:hover { color: var(--white); }

.gr-footer__band { border-top: 1px solid var(--border-inverse); }
.gr-footer__band-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding-block: var(--space-3); }
.gr-footer__taglines { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(16px, 4vw, 48px); }
.gr-footer__tagline { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--text-inverse-tertiary); }

.gr-footer__legal { display: flex; align-items: center; justify-content: center; gap: var(--space-3); padding-block: var(--space-3) var(--space-5); flex-wrap: wrap; }
.gr-footer__copyright { font-size: var(--text-sm); color: var(--text-inverse-tertiary); }

@media (max-width: 860px) {
  .gr-footer__inner { grid-template-columns: 1fr; gap: var(--space-6); }
  .gr-footer__cols { grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }
  .gr-footer__band-inner { flex-direction: column; gap: var(--space-2); }
}

/* --- Tabs --- */
.gr-tabs { display: flex; align-items: center; }
.gr-tab {
  display: inline-flex; align-items: center; gap: var(--space-1);
  background: transparent; border: 0; cursor: pointer;
  font-family: var(--font-sans); font-weight: var(--weight-medium);
  color: var(--text-secondary); letter-spacing: -0.01em;
  transition: color var(--duration-fast) var(--ease-out),
              background var(--duration-fast) var(--ease-out);
}
.gr-tab:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-radius: var(--radius-sm); }
.gr-tab__icon { display: inline-flex; }
.gr-tab__count { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-tertiary); }

/* underline */
.gr-tabs--underline { gap: var(--space-4); border-bottom: 1px solid var(--line); }
.gr-tabs--underline .gr-tab { padding: 14px 2px; margin-bottom: -1px; border-bottom: 2px solid transparent; }
.gr-tabs--underline .gr-tab:hover { color: var(--ink); }
.gr-tabs--underline .gr-tab.is-active { color: var(--ink); border-bottom-color: var(--ink); }
.gr-tabs--underline.gr-tabs--sm .gr-tab { font-size: var(--text-sm); padding: 10px 2px; }

/* pill */
.gr-tabs--pill { gap: var(--space-1); flex-wrap: wrap; }
.gr-tabs--pill .gr-tab { padding: 10px 18px; border-radius: var(--radius-pill); background: var(--surface-card); }
.gr-tabs--pill .gr-tab:hover:not(.is-active) { background: var(--surface-hover); color: var(--ink); }
.gr-tabs--pill .gr-tab.is-active { background: var(--ink); color: var(--white); }
.gr-tabs--pill .gr-tab.is-active .gr-tab__count { color: var(--text-inverse-tertiary); }

.gr-on-dark .gr-tabs--underline { border-bottom-color: var(--border-inverse); }
.gr-on-dark .gr-tabs--underline .gr-tab { color: var(--text-inverse-secondary); }
.gr-on-dark .gr-tabs--underline .gr-tab.is-active { color: var(--white); border-bottom-color: var(--white); }
.gr-on-dark .gr-tabs--pill .gr-tab { background: rgba(255,255,255,0.08); color: var(--text-inverse-secondary); }
.gr-on-dark .gr-tabs--pill .gr-tab.is-active { background: var(--white); color: var(--ink); }
/* ==========================================================================
   Gradien components — Cards
   Card · ProblemCard · FeatureCard · ImageCard · CaseStudyCard · ProductUICard
   ========================================================================== */

/* --- Shared media --- */
.gr-media { position: relative; overflow: hidden; border-radius: var(--radius-2xl); background: var(--surface-soft); }
.gr-media__img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--duration-slow) var(--ease-out); }
.gr-media__ph {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  background: linear-gradient(150deg, var(--surface-soft), var(--surface-hover));
  color: var(--text-soft);
}
.gr-media__ph span { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.02em; color: var(--text-soft); }

/* --- Card base --- */
.gr-card { position: relative; display: block; background: var(--surface-card); border-radius: var(--radius-xl); text-decoration: none; color: inherit; }
.gr-card--card  { background: var(--surface-card); }
.gr-card--white { background: var(--white); border: 1px solid var(--line); }
.gr-card--soft  { background: var(--surface-soft); }
.gr-card--pad-sm { padding: var(--space-3); }
.gr-card--pad-md { padding: var(--space-4); }
.gr-card--pad-lg { padding: var(--space-5); }
.gr-card--r-lg  { border-radius: var(--radius-lg); }
.gr-card--r-xl  { border-radius: var(--radius-xl); }
.gr-card--r-2xl { border-radius: var(--radius-2xl); }
.gr-card--r-3xl { border-radius: var(--radius-3xl); }
.gr-card--interactive {
  cursor: pointer;
  transition: transform var(--duration-base) var(--ease-out),
              box-shadow var(--duration-base) var(--ease-out),
              border-color var(--duration-base) var(--ease-out);
}
.gr-card--interactive:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }

/* --- ProblemCard --- */
.gr-problemcard {
  display: flex; flex-direction: column; gap: var(--space-4);
  background: var(--surface-card);
  border-radius: var(--radius-3xl);
  padding: var(--space-5);
}
.gr-problemcard__text { display: flex; flex-direction: column; gap: var(--space-2); }
.gr-problemcard__title {
  font-size: var(--text-h3); font-weight: var(--weight-medium);
  color: var(--text-primary); letter-spacing: var(--tracking-tight); line-height: var(--leading-tight);
}
.gr-problemcard__body { font-size: var(--text-body); line-height: var(--leading-body); color: var(--ink-body); max-width: 34ch; }

/* --- FeatureCard --- */
.gr-featurecard {
  display: flex; flex-direction: column; gap: var(--space-3);
  background: var(--surface-card);
  border-radius: var(--radius-2xl);
  padding: var(--space-4);
  text-decoration: none; color: inherit;
}
.gr-featurecard__text { display: flex; flex-direction: column; gap: var(--space-1); flex: 1; }
.gr-featurecard__title { font-size: var(--text-title); font-weight: var(--weight-medium); color: var(--text-primary); letter-spacing: -0.015em; line-height: var(--leading-tight); }
.gr-featurecard__body { font-size: var(--text-body); line-height: var(--leading-snug); color: var(--text-muted); }
.gr-featurecard__link { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--text-link); margin-top: auto; }
.gr-featurecard__link svg { transition: transform var(--duration-base) var(--ease-out); }
.gr-featurecard:hover .gr-featurecard__link svg { transform: translateX(3px); }

/* --- ImageCard --- */
.gr-imagecard {
  display: flex; flex-direction: column; gap: var(--space-1);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-2xl);
  padding: var(--space-1);
  text-decoration: none; color: inherit;
}
.gr-imagecard .gr-media { border-radius: var(--radius-lg); }
.gr-imagecard__cap { display: flex; flex-direction: column; gap: 6px; padding: 6px var(--space-1) 12px; }
.gr-imagecard__eyebrow { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-muted); }
.gr-imagecard__title { font-size: var(--text-title); font-weight: var(--weight-medium); color: var(--text-primary); letter-spacing: -0.015em; }
.gr-imagecard__caption { font-size: var(--text-body); line-height: var(--leading-snug); color: var(--text-muted); }
.gr-imagecard.gr-card--interactive:hover .gr-media__img { transform: scale(1.04); }

/* --- CaseStudyCard --- */
.gr-casecard {
  display: flex; flex-direction: column; gap: var(--space-1);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-2xl);
  padding: var(--space-1);
  text-decoration: none; color: inherit;
}
.gr-casecard .gr-media { border-radius: var(--radius-lg); }
.gr-casecard__eyebrow {
  position: absolute; top: 14px; left: 14px;
  background: rgba(5,5,5,0.68); color: var(--white);
  font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.06em;
  padding: 5px 10px; border-radius: var(--radius-pill);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.gr-casecard__body { display: flex; flex-direction: column; gap: var(--space-2); padding: 6px var(--space-1) 12px; }
.gr-casecard__metric { display: flex; align-items: baseline; gap: 8px; }
.gr-casecard__metric-value { font-size: var(--text-h2); font-weight: var(--weight-medium); color: var(--text-primary); letter-spacing: var(--tracking-tight); line-height: 1; }
.gr-casecard__metric-label { font-size: var(--text-sm); color: var(--text-muted); }
.gr-casecard__title { font-size: var(--text-title); font-weight: var(--weight-medium); color: var(--text-primary); line-height: var(--leading-snug); letter-spacing: -0.015em; }
.gr-casecard__cta { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--text-link); margin-top: 2px; }
.gr-casecard__cta svg { transition: transform var(--duration-base) var(--ease-out); }
.gr-casecard:hover .gr-casecard__cta svg { transform: translateX(3px); }
.gr-casecard:hover .gr-media__img { transform: scale(1.04); }

/* --- ProductUICard --- */
.gr-productui {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-2xl);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  color: var(--ink);
}
.gr-productui__chrome {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-2);
  padding: 13px 16px;
  border-bottom: 1px solid var(--line);
  background: var(--surface-soft);
}
.gr-productui__brand { display: inline-flex; align-items: center; gap: 9px; }
.gr-productui__title { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.06em; color: var(--text-muted); text-transform: uppercase; }
.gr-productui__body { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); }
.gr-productui__block { display: flex; flex-direction: column; gap: 8px; }
.gr-productui__label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-soft); }
.gr-productui__question { font-size: var(--text-body-lg); font-weight: var(--weight-medium); color: var(--text-primary); line-height: var(--leading-snug); letter-spacing: -0.01em; }
.gr-productui__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.gr-productui__chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--text-sm); color: var(--ink-body);
  background: var(--surface-soft); border: 1px solid var(--line);
  border-radius: var(--radius-pill); padding: 5px 11px;
}
.gr-productui__chip svg { color: var(--signal-blue-ink); flex: none; }
.gr-productui__answer { background: var(--surface-soft); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 14px 16px; }
.gr-productui__answer-text { font-size: var(--text-body); line-height: var(--leading-body); color: var(--ink-body); }
.gr-productui__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); flex-wrap: wrap; }
.gr-productui__action {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--white);
  background: var(--black); border-radius: var(--radius-pill); padding: 9px 15px;
}
.gr-productui__action svg { color: var(--signal-green); }
.gr-productui__trace { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-soft); }
.gr-productui__trace svg { color: var(--signal-blue-ink); flex: none; }

/* --- Conversation replay: shared by every ChatGPT/Claude/Cursor mockup
   (.cgpt/.claudeui/.cursorui on the Core page, .sol-cgpt/.sol-claude on
   solutions pages). Any element marked [data-convo-step] inside a
   [data-convo] container is hidden and revealed in DOM order (site-v3.js)
   each time that container becomes the visible/active frame — "user just
   sent this, Core is searching, sources found, here's the answer" playing
   out rather than appearing all at once. No-JS and prefers-reduced-motion
   both fall back to everything visible immediately (site-v3.js skips the
   staged reveal in that case, so this base rule must default to visible). */
[data-convo-step] { transition: opacity 360ms ease, transform 360ms ease; }
html.js [data-convo-step] { opacity: 0; transform: translateY(6px); }
html.js [data-convo-step].is-shown { opacity: 1; transform: none; }

@media (max-width: 600px) {
  .gr-problemcard { padding: var(--space-4); border-radius: var(--radius-2xl); }
}
/* ==========================================================================
   Gradien components — Modules (Metric, Quote)
   ========================================================================== */

/* --- Metric --- */
.gr-metric { display: flex; flex-direction: column; gap: 8px; }
.gr-metric--center { align-items: center; text-align: center; }
.gr-metric__value {
  display: inline-flex; align-items: baseline;
  font-size: clamp(2.75rem, 5vw, 4.5rem);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-display);
  line-height: 0.95;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
.gr-metric__affix { color: var(--text-muted); }
.gr-metric__label { font-size: var(--text-body); line-height: var(--leading-snug); color: var(--ink-body); max-width: 28ch; }
.gr-metric--center .gr-metric__label { margin-inline: auto; }
.gr-metric__sub { font-size: var(--text-sm); color: var(--text-muted); }

.gr-on-dark .gr-metric__value { color: var(--white); }
.gr-on-dark .gr-metric__affix { color: var(--text-inverse-tertiary); }
.gr-on-dark .gr-metric__label { color: var(--text-inverse-secondary); }
.gr-on-dark .gr-metric__sub { color: var(--text-inverse-tertiary); }

/* --- Quote --- */
.gr-quote { display: flex; flex-direction: column; gap: var(--space-4); margin: 0; }
.gr-quote__text {
  margin: 0;
  font-weight: var(--weight-medium);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-tight);
  color: var(--text-primary);
  text-wrap: balance;
}
.gr-quote--sm .gr-quote__text { font-size: var(--text-title); }
.gr-quote--md .gr-quote__text { font-size: var(--text-h2); }
.gr-quote--lg .gr-quote__text { font-size: var(--text-h1); line-height: var(--leading-tight); }
.gr-quote__cite { display: flex; align-items: center; gap: var(--space-2); }
.gr-quote__avatar { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; flex: none; background: var(--surface-card); }
.gr-quote__avatar--ph {
  display: inline-flex; align-items: center; justify-content: center;
  font-size: var(--text-sm); font-weight: var(--weight-medium); letter-spacing: 0.02em;
  color: var(--ink); background: var(--surface-card);
}
.gr-quote__meta { display: flex; flex-direction: column; }
.gr-quote__author { font-size: var(--text-body); font-weight: var(--weight-medium); color: var(--text-primary); }
.gr-quote__role { font-size: var(--text-sm); color: var(--text-muted); }

.gr-on-dark .gr-quote__text { color: var(--white); }
.gr-on-dark .gr-quote__author { color: var(--white); }
.gr-on-dark .gr-quote__role { color: var(--text-inverse-secondary); }
.gr-on-dark .gr-quote__avatar--ph { color: var(--white); background: rgba(255,255,255,0.12); }
/* ==========================================================================
   Gradien — Website UI kit layout
   Homepage + template section scaffolding. Token-driven; pairs with the DS
   component styles shipped in styles.css.
   ========================================================================== */

.kit-page { background: var(--surface-page); overflow-x: clip; }

/* Containers & sections */
.kit-container { width: 100%; max-width: var(--container-max); margin-inline: auto; padding-inline: var(--gutter); }
.kit-container--narrow { max-width: var(--container-narrow); }
.kit-section { padding-block: var(--section-y); }
.kit-section--tight { padding-block: var(--section-y-tight); }
.kit-section--soft { background: var(--surface-subtle); }
.kit-section--dark { background: var(--black); color: var(--text-inverse-secondary); }

/* Section head */
.kit-head { display: flex; flex-direction: column; gap: var(--space-3); }
.kit-head--center { align-items: center; text-align: center; margin-inline: auto; }
.kit-head__eyebrow { color: var(--text-secondary); }
.kit-head__title {
  font-size: var(--text-h2); font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-tight); line-height: var(--leading-tight);
  color: var(--text-primary); max-width: 28ch;
}
.kit-head--center .kit-head__title { max-width: 32ch; }
.kit-head__lead { font-size: var(--text-lead); line-height: var(--leading-snug); color: var(--text-muted); max-width: 52ch; }
.kit-section--dark .kit-head__title { color: var(--white); }
.kit-section--dark .kit-head__eyebrow { color: var(--text-inverse-tertiary); }
.kit-section--dark .kit-head__lead { color: var(--text-inverse-secondary); }

/* --- Hero --- */
.kit-hero { padding-top: clamp(48px, 7vw, 104px); padding-bottom: var(--section-y); }
.kit-hero__grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.kit-hero__text { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); }
.kit-hero__eyebrow { color: var(--text-secondary); }
.kit-hero__title {
  font-size: var(--text-display); font-weight: var(--weight-medium);
  line-height: var(--leading-display); letter-spacing: var(--tracking-display);
  color: var(--text-primary); max-width: 15ch; margin: 0;
}
.kit-hero__lead { font-size: var(--text-lead); line-height: var(--leading-snug); color: var(--text-muted); max-width: 46ch; }
.kit-hero__ctas { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.kit-hero__proof { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-1); }
.kit-hero__proof-item { display: inline-flex; align-items: center; gap: 7px; font-size: var(--text-sm); color: var(--text-muted); }
.kit-hero__proof-item svg { color: #3B6B14; flex: none; }
.kit-hero__visual { position: relative; }
.kit-hero__visual .gr-productui { transform: translateY(0); }

/* Entrance */
@media (prefers-reduced-motion: no-preference) {
  html.js .kit-reveal { opacity: 0; transform: translateY(18px); transition: opacity 640ms var(--ease-out), transform 640ms var(--ease-out); }
  html.js .kit-reveal.is-in { opacity: 1; transform: none; }
}

/* --- Trust strip --- */
.kit-trust { border-block: 1px solid var(--line); padding-block: var(--space-6); }

/* --- Problem cards --- */
.kit-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }
.kit-problem { margin-top: var(--space-6); }

/* --- Product proof --- */
.kit-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.kit-split--top { align-items: flex-start; }
.kit-split__text { display: flex; flex-direction: column; gap: var(--space-3); align-items: flex-start; }
.kit-checklist { list-style: none; margin: var(--space-2) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.kit-checklist li { display: flex; gap: var(--space-2); align-items: flex-start; font-size: var(--text-body); color: var(--ink-body); }
.kit-checklist svg { color: #3B6B14; flex: none; margin-top: 3px; }

/* --- Context panel (product-proof visual) --- */
.kit-context { background: var(--black); border: 1px solid rgba(255,255,255,0.09); border-radius: var(--radius-2xl); overflow: hidden; box-shadow: var(--shadow-lg); }
.kit-context__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding: 13px 16px; border-bottom: 1px solid rgba(255,255,255,0.08); background: rgba(255,255,255,0.02); }
.kit-context__title { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-inverse-secondary); display: inline-flex; align-items: center; gap: 9px; }
.kit-context__body { padding: var(--space-4); display: flex; flex-direction: column; gap: 10px; }
.kit-source { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.07); border-radius: var(--radius-md); }
.kit-source__icon { display: inline-flex; color: var(--signal-cyan); flex: none; }
.kit-source__name { font-size: var(--text-sm); color: var(--white); font-weight: var(--weight-medium); flex: 1; }
.kit-source__meta { font-family: var(--font-mono); font-size: 11px; color: var(--text-inverse-tertiary); }
.kit-context__foot { display: flex; align-items: center; gap: 8px; margin-top: 2px; font-size: var(--text-sm); color: var(--text-inverse-secondary); }
.kit-context__foot svg { color: var(--signal-green); flex: none; }

/* --- App frame (macOS-style window chrome) — wraps a product view so it
   reads as a real screenshot rather than a floating card. Generic and
   product-agnostic; the title text names whichever product is framed.

   .gr-window is the page-agnostic name for this same chrome (see the
   STAGE/WINDOW/RECEIPT/DIFF/OUTCOME section below for the full contract);
   it shares every rule below via the combined selectors rather than a
   duplicated block, since only FinCore (10 call sites in
   public/fincore/index.html) currently uses .gr-appframe and none of its
   markup changes. Only the corner radius differs: .gr-appframe keeps its
   existing --radius-2xl so FinCore's rendering is untouched; .gr-window
   gets the tighter --radius-lg the design brief calls for on new
   call sites (see the override pair directly below the shared block). --- */
.gr-appframe, .gr-window { background: var(--white); border: 1px solid var(--line); overflow: hidden; box-shadow: var(--shadow-lg); }
.gr-appframe { border-radius: var(--radius-2xl); }
.gr-window { border-radius: var(--radius-lg); }
.gr-appframe__bar, .gr-window__bar { display: flex; align-items: center; gap: 7px; padding: 12px 16px; background: var(--surface-soft); border-bottom: 1px solid var(--line); }
.gr-appframe__dot, .gr-window__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--line); flex: none; }
.gr-appframe__dot:nth-child(1), .gr-window__dot:nth-child(1) { background: #ED6A5E; }
.gr-appframe__dot:nth-child(2), .gr-window__dot:nth-child(2) { background: #F4BF4F; }
.gr-appframe__dot:nth-child(3), .gr-window__dot:nth-child(3) { background: #61C454; }
.gr-appframe__title, .gr-window__title { margin-left: 7px; font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-soft); }
.gr-appframe__body, .gr-window__body { padding: clamp(18px, 2.5vw, 26px); }

/* --- How it works --- */
.kit-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); margin-top: var(--space-6); counter-reset: step; }
.kit-step { position: relative; display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-5); background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-2xl); }
.kit-step__num { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--text-soft); }
.kit-step__title { font-size: var(--text-h3); font-weight: var(--weight-medium); letter-spacing: var(--tracking-tight); color: var(--text-primary); }
.kit-step__body { font-size: var(--text-body); line-height: var(--leading-snug); color: var(--text-muted); }

/* --- Customer proof --- */
.kit-cases { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); margin-top: var(--space-6); }
.kit-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); align-items: start; }
.kit-quoteband { display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(32px, 5vw, 80px); align-items: center; }
.kit-metrics-col { display: flex; flex-direction: column; gap: var(--space-5); }

/* --- Industries --- */
.kit-ind { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(32px, 5vw, 72px); align-items: center; margin-top: var(--space-5); }
.kit-ind__panel { background: var(--surface-card); border-radius: var(--radius-3xl); padding: clamp(28px, 4vw, 56px); min-height: 280px; display: flex; flex-direction: column; gap: var(--space-3); justify-content: center; }
.kit-ind__tabs { margin-bottom: var(--space-2); }
.kit-ind__title { font-size: var(--text-h2); font-weight: var(--weight-medium); letter-spacing: var(--tracking-tight); color: var(--text-primary); }
.kit-ind__body { font-size: var(--text-lead); line-height: var(--leading-snug); color: var(--text-muted); max-width: 44ch; }
.kit-ind__stat { display: inline-flex; align-items: baseline; gap: 8px; margin-top: var(--space-1); }

/* --- Closing CTA --- */
.kit-closing { text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--space-4); }
.kit-closing__logo { margin-bottom: var(--space-2); }
.kit-closing__title { font-size: var(--text-h1); font-weight: var(--weight-medium); letter-spacing: var(--tracking-tight); line-height: var(--leading-tight); color: var(--white); max-width: 18ch; }
.kit-closing__ctas { display: flex; gap: var(--space-2); flex-wrap: wrap; justify-content: center; margin-top: var(--space-2); }

/* --- Responsive --- */
@media (max-width: 1000px) {
  .kit-hero__grid, .kit-split, .kit-quoteband, .kit-ind { grid-template-columns: minmax(0, 1fr); }
  .kit-hero__grid { gap: var(--space-6); }
  .kit-hero__visual { order: 2; }
  .kit-grid-3, .kit-steps, .kit-cases { grid-template-columns: repeat(2, 1fr); }
  .kit-metrics { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
  .kit-grid-3, .kit-steps, .kit-cases, .kit-metrics { grid-template-columns: 1fr; }
  .kit-hero__title { font-size: clamp(2.5rem, 11vw, 3.25rem); }
}

/* ==========================================================================
   Site layer — page-level refinements from the V3 design (Gradien.dc.html)
   ========================================================================== */

a:not([class*="gr-btn"]):hover { color: var(--ink); }
.gr-on-dark .gr-btn.gr-btn--primary:hover { background: #EDEDED; color: var(--ink); box-shadow: none; transform: translateY(-1px); }
.gr-on-dark .gr-btn.gr-btn--secondary:hover { transform: translateY(-1px); }

.gr-header .icon-close { display: none; }
.gr-header.is-open .icon-close { display: block; }
.gr-header.is-open .icon-menu { display: none; }

/* ==========================================================================
   MOTIFS — product-scene primitives shared by Core, FinCore, How it works
   Source markers, status markers, timestamps, connectors, scene frames,
   and the [data-scene] step mechanics used by /scripts/scenes-v1.js.
   ========================================================================== */

/* Source marker: src://email/founder-update */
.gr-src {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.01em;
  color: var(--text-muted);
  white-space: nowrap;
}
.gr-src--dim { color: var(--text-soft); }
.gr-src--chip {
  padding: 3px 8px;
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius-xs);
}
.gr-on-dark .gr-src, .gr-dark-panel .gr-src { color: var(--text-inverse-tertiary); }

/* Source chip: a small card carrying a source-type icon or tool logo + label,
   used in place of literal src://... strings. Two variants share one shape:
   .gr-source-chip (generic source type, inline monochrome icon) and
   .gr-logo-chip (named external tool, real logo image). */
.gr-source-chip, .gr-logo-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 10px 5px 7px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  font-size: var(--text-sm);
  color: var(--text-primary);
  white-space: nowrap;
}
.gr-source-chip__icon {
  display: inline-flex;
  flex: none;
  color: var(--text-soft);
}
.gr-logo-chip__icon {
  display: inline-flex;
  flex: none;
  width: 16px;
  height: 16px;
  object-fit: contain;
}
.gr-source-chip--sm, .gr-logo-chip--sm {
  padding: 3px 8px 3px 6px;
  font-size: var(--text-xs);
  gap: 5px;
}
.gr-source-chip--sm .gr-source-chip__icon svg,
.gr-logo-chip--sm .gr-logo-chip__icon { width: 13px; height: 13px; }
.gr-on-dark .gr-source-chip, .gr-dark-panel .gr-source-chip,
.gr-on-dark .gr-logo-chip, .gr-dark-panel .gr-logo-chip {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.14);
  color: var(--text-inverse-secondary);
}
.gr-on-dark .gr-source-chip__icon, .gr-dark-panel .gr-source-chip__icon { color: var(--text-inverse-tertiary); }

/* Logo wall: a row/grid of tool logos, each in its own neutral tile so mixed
   monochrome and full-color brand marks read consistently. */
.gr-logo-wall {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}
.gr-logo-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 96px;
  padding: 18px 10px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
.gr-logo-tile__mark {
  width: 28px;
  height: 28px;
  object-fit: contain;
}
.gr-logo-tile__name {
  font-size: var(--text-xs);
  color: var(--text-muted);
  text-align: center;
  line-height: var(--leading-snug);
}
.gr-logo-tile--mono .gr-logo-tile__mark { color: var(--text-primary); }
.gr-monogram {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--surface-soft);
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: var(--weight-medium);
}

/* Generic click-to-select panels: [data-select-tab] triggers inside a
   [data-select-group] toggle which sibling [data-select-panel] is shown.
   Default (no-JS) state shows every panel — full content, nothing is
   JS-only — the site-v3.js behavior scopes hiding to html.js so once JS
   runs only the active panel remains visible. The show-when-active display
   value is set per component (core-v3.css / fincore-v3.css) since panels
   have different native layouts (flex/block/grid) — this shared rule only
   owns the "hide when inactive" half. */
html.js [data-select-panel] { display: none; }

/* Timestamp */
.gr-ts {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-soft);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.gr-on-dark .gr-ts, .gr-dark-panel .gr-ts { color: var(--text-inverse-tertiary); }

/* Status marker: neutral mono label, signal color confined to the dot */
.gr-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.02em;
  color: var(--text-secondary);
  white-space: nowrap;
}
.gr-status::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text-soft);
  flex: none;
}
.gr-status--current::before,
.gr-status--done::before     { background: #6DC61F; }
.gr-status--updated::before,
.gr-status--prepared::before { background: var(--signal-cyan); }
.gr-status--carried::before,
.gr-status--linked::before   { background: var(--signal-blue); }
.gr-status--needs-you        { color: var(--text-primary); font-weight: var(--weight-medium); }
.gr-status--needs-you::before { background: var(--ink); }
.gr-on-dark .gr-status, .gr-dark-panel .gr-status { color: var(--text-inverse-secondary); }

/* Connector lines: drawn on reveal (scale transition, no layout shift) */
.gr-conn {
  position: relative;
  background: var(--border-strong);
  transform-origin: left center;
}
.gr-conn--h { height: 1px; width: 100%; }
.gr-conn--v { width: 1px; height: 100%; min-height: 20px; transform-origin: center top; }
.gr-conn--signal { background: var(--signal-cyan); }
.gr-conn--soft { background: var(--line); }
@media (prefers-reduced-motion: no-preference) {
  html.js .gr-conn--h { transform: scaleX(0); transition: transform 600ms var(--ease-out) 120ms; }
  html.js .gr-conn--v { transform: scaleY(0); transition: transform 600ms var(--ease-out) 120ms; }
  html.js .is-in .gr-conn--h, html.js .gr-conn--h.is-on { transform: scaleX(1); }
  html.js .is-in .gr-conn--v, html.js .gr-conn--v.is-on { transform: scaleY(1); }
}

/* Scene frame: lightweight tool/product card used inside compositions */
.gr-scenecard {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.gr-scenecard__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--line);
  background: var(--surface-soft);
}
.gr-scenecard__name {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-secondary);
}
.gr-scenecard__body {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.gr-scenecard--dark {
  background: var(--black);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: var(--shadow-lg);
}
.gr-scenecard--dark .gr-scenecard__bar {
  background: rgba(255, 255, 255, 0.03);
  border-bottom-color: rgba(255, 255, 255, 0.08);
}
.gr-scenecard--dark .gr-scenecard__name { color: var(--text-inverse-secondary); }

/* Scene step mechanics: steps are hidden only when JS runs and motion is
   allowed, so no-JS and reduced-motion visitors see the full composition. */
@media (prefers-reduced-motion: no-preference) {
  html.js [data-scene] [data-step-in] {
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 480ms var(--ease-out), transform 480ms var(--ease-out);
  }
  html.js [data-scene] [data-step-in].is-on { opacity: 1; transform: none; }
}

/* ==========================================================================
   STAGE / WINDOW / RECEIPT / DIFF / OUTCOME
   Shared visual-stage system for later phases (Homepage, Core, FinCore,
   supporting pages). This is a static site, so "components" means CSS
   classes + a documented markup contract, not JS. Everything here composes
   the MOTIFS primitives above (.gr-src, .gr-source-chip, .gr-logo-chip,
   .gr-ts, .gr-status, .gr-conn, .gr-scenecard, .gr-badge) — build inside
   them, don't redefine them.

   .gr-stage — wide rounded color-field container a window/receipt/diff
   composition sits inside (generalizes the color-field context
   .gr-appframe already sits in on /fincore/). Color variants:
     .gr-stage--gradien   soft brand-gradient wash (rare hero moments;
                           swap in var(--brand-gradient) at full strength
                           for a truly rare top-of-page moment instead)
     .gr-stage--core      blue/cyan-tinted field
     .gr-stage--fincore    ink/neutral field (restrained: --surface-soft)
   Composition modifiers (layout/positioning context only — exact visual
   tuning is a per-page job for whichever later phase uses these):
     .gr-stage--overlap    extra bottom padding so a child (e.g. a
                           .gr-window) can sit partly outside the field
     .gr-stage--sticky     stage pins in the viewport while sibling copy
                           scrolls past (pairs with a two-column layout)
     .gr-stage--cascade    flex column of stacked/layered children
     .gr-stage--landscape  wide fixed-aspect field (16:9)
     .gr-stage--mosaic     grid of multiple tiles
   Example:
     <div class="gr-stage gr-stage--core gr-stage--overlap">
       <div class="gr-window"> ... </div>
     </div>

   .gr-window — page-agnostic name for the .gr-appframe Mac-like window
   chrome (see .gr-appframe above, which .gr-window shares its rules with
   via combined selectors — that comment explains why .gr-appframe itself
   is untouched). Title bar + optional decorative dots + a body area; host
   real interface content at roughly 65-75% of the parent .gr-stage's
   width per the design brief (a per-page layout choice, not enforced
   here). Radius is intentionally tighter than .gr-appframe's
   (--radius-lg, ~16px, vs. --radius-2xl).
     <div class="gr-window">
       <div class="gr-window__bar">
         <span class="gr-window__dot" aria-hidden="true"></span>
         <span class="gr-window__dot" aria-hidden="true"></span>
         <span class="gr-window__dot" aria-hidden="true"></span>
         <span class="gr-window__title">Core &middot; Morning brief</span>
       </div>
       <div class="gr-window__body"> ...real interface content... </div>
     </div>
   The dots are decorative only — plain <span>/<div>, aria-hidden="true",
   never a <button> and never given a tabindex, so they stay out of both
   the accessibility tree and the tab order (matches every existing
   .gr-appframe call site).

   .gr-receipt — compact evidence/status card. Extends .gr-scenecard (its
   __bar/__body/__name keep working unchanged) and composes .gr-src,
   .gr-ts, .gr-status, and .gr-badge to show a project/label, source
   count, freshness timestamp, a decision/commitment line, and a
   privacy/Space boundary badge:
     <div class="gr-scenecard gr-receipt">
       <div class="gr-scenecard__bar">
         <span class="gr-scenecard__name">Northwind Robotics &middot; portfolio</span>
         <span class="gr-badge gr-badge--outline gr-badge--sm">Deal Room space</span>
       </div>
       <div class="gr-scenecard__body">
         <div class="gr-receipt__meta">
           <span class="gr-src gr-src--chip">3 sources</span>
           <span class="gr-ts">Updated 2m ago</span>
         </div>
         <p class="gr-receipt__line">Prepared the quarterly update for review.</p>
         <span class="gr-status gr-status--current">Ready for approval</span>
       </div>
     </div>

   .gr-diff + [data-approval-group] — generalized, page-agnostic version of
   FinCore's .fincore-rec__old/__new "proposed becomes approved" pattern
   (public/styles/fincore-v3.css ~L289-338), reusing the identical
   [data-approval-group]:has([data-approval="approved"].is-on) CSS :has()
   technique (duplicated as a single rule below so any page that links
   only design-system.css — not fincore-v3.css — can use .gr-diff; keep
   both copies in sync if this mechanic ever changes). FinCore's own
   .fincore-rec__* classes and markup are untouched.
     <div class="gr-diff">
       <span class="gr-diff__key">Valuation</span>
       <span class="gr-diff__vals" data-approval-group>
         <span class="gr-diff__old">1.8M</span>
         <span class="gr-diff__new" data-step-in="2" data-approval="proposed">2.1M <span class="gr-status gr-status--proposed">Proposed</span></span>
         <span class="gr-diff__new" data-step-in="5" data-approval="approved">2.1M <span class="gr-status gr-status--updated">Applied</span></span>
       </span>
     </div>
   Stack multiple .gr-diff rows for a full record; each gets a top divider
   automatically. Steps/approval states are optional — a static (non-scene)
   diff can drop data-step-in/data-approval entirely and just show old +
   new.

   .gr-outcome — not a new class. .gr-status (MOTIFS, above) already is
   the Outcome primitive: green (--current/--done), cyan
   (--updated/--prepared), blue (--carried/--linked), ink (--needs-you)
   cover every state the brief lists ("Ready for approval" / "Applied
   within rule" / "Prepared" / "Needs review"). Use it directly:
     <span class="gr-status gr-status--current">Ready for approval</span>
   ========================================================================== */
.gr-stage {
  position: relative;
  isolation: isolate;
  border-radius: var(--radius-3xl);
  overflow: hidden;
  padding: clamp(28px, 4vw, 56px);
}
.gr-stage--gradien {
  background: linear-gradient(140deg,
    color-mix(in srgb, var(--signal-blue) 16%, var(--surface-soft)) 0%,
    color-mix(in srgb, var(--signal-cyan) 14%, var(--surface-soft)) 55%,
    color-mix(in srgb, var(--signal-green) 14%, var(--surface-soft)) 100%);
}
.gr-stage--core {
  background: linear-gradient(140deg,
    color-mix(in srgb, var(--signal-blue) 14%, var(--white)) 0%,
    color-mix(in srgb, var(--signal-cyan) 12%, var(--white)) 100%);
}
.gr-stage--fincore { background: var(--surface-soft); }

.gr-stage--overlap { padding-bottom: calc(clamp(28px, 4vw, 56px) + var(--space-6)); }
.gr-stage--sticky { position: sticky; top: clamp(24px, 4vw, 64px); }
.gr-stage--cascade { display: flex; flex-direction: column; gap: var(--space-4); }
.gr-stage--landscape { aspect-ratio: 16 / 9; display: flex; align-items: center; }
.gr-stage--mosaic { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-3); }

.gr-receipt__meta { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.gr-receipt__line { font-size: var(--text-sm); color: var(--ink-body); line-height: var(--leading-snug); margin: 0; }

.gr-diff { display: flex; flex-direction: column; gap: 3px; padding: 10px 0; }
.gr-diff + .gr-diff { border-top: 1px solid var(--line); }
.gr-diff__key {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-soft);
}
.gr-diff__vals { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; }
.gr-diff__old {
  font-size: var(--text-sm);
  color: var(--text-soft);
  text-decoration: line-through;
  text-decoration-color: var(--text-soft);
}
@media (prefers-reduced-motion: no-preference) {
  html.js .gr-diff:not(:has(.gr-diff__new.is-on)) .gr-diff__old {
    text-decoration: none;
    color: var(--text-primary);
  }
}
.gr-diff__new {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--text-primary);
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
}
/* Shared with fincore-v3.css ~L337 — same one-line mechanic, duplicated
   here so .gr-diff works on pages that never load fincore-v3.css. */
[data-approval-group]:has([data-approval="approved"].is-on) [data-approval="proposed"] { display: none; }

/* ==========================================================================
   Shared AI-tool interfaces
   Core is shown inside the tools it connects rather than as a separate app.
   ========================================================================== */

/* --- Hero cycler: the same Core consultation recreated inside ChatGPT,
   Claude, and Cursor in turn, looping. The tab row above the stage is both
   the "which tool is this" label (each tab carries that tool's logo) and
   the interactive control — clicking a tab or a foot dot jumps straight to
   that frame and pauses autoplay (site-v3.js). Falls back to all three
   frames shown statically, stacked, under prefers-reduced-motion and
   without JS — the tabs/dots are hidden in that fallback since every frame
   is already visible and they'd have nothing to do. --- */
.core-hero-cycle__tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 10px;
}
.core-hero-cycle__tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 11px;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  background: transparent;
  font: inherit;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-soft);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.core-hero-cycle__tab img { width: 14px; height: 14px; object-fit: contain; opacity: 0.65; }
.core-hero-cycle__tab:hover { color: var(--text-primary); }
.core-hero-cycle__tab.is-active {
  background: var(--surface-card);
  border-color: var(--line);
  color: var(--text-primary);
}
.core-hero-cycle__tab.is-active img { opacity: 1; }
.core-hero-cycle__stage { position: relative; }
.core-cycle-frame {
  border: 1px solid var(--line);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  margin-bottom: 16px;
}
.core-cycle-frame:last-child { margin-bottom: 0; }
html.js .core-hero-cycle:not(.is-static) .core-hero-cycle__stage { min-height: 480px; }
html.js .core-hero-cycle:not(.is-static) .core-cycle-frame {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 480ms var(--ease-out), visibility 0s 480ms;
}
html.js .core-hero-cycle:not(.is-static) .core-cycle-frame.is-active {
  opacity: 1;
  visibility: visible;
  transition: opacity 480ms var(--ease-out);
}
html:not(.js) .core-hero-cycle__tabs,
.core-hero-cycle.is-static .core-hero-cycle__tabs,
html:not(.js) .core-hero-cycle__foot-dots,
.core-hero-cycle.is-static .core-hero-cycle__foot-dots { display: none; }
.core-hero-cycle__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
}
.core-hero-cycle__foot-controls { display: flex; align-items: center; gap: 10px; }

/* Autoplay pause/resume control, shared by every [data-cycle] cycler
   (hero cyclers and the solution-page tool cyclers). JS toggles .is-paused
   and swaps which inline icon is visible. */
.gr-cycle-pause {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex: none;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line);
  background: var(--white);
  color: var(--text-soft);
  cursor: pointer;
}
.gr-cycle-pause:hover { color: var(--text-primary); border-color: var(--border-strong); }
.gr-cycle-pause:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.gr-cycle-pause__icon-play { display: none; }
.gr-cycle-pause.is-paused .gr-cycle-pause__icon-pause { display: none; }
.gr-cycle-pause.is-paused .gr-cycle-pause__icon-play { display: block; }
.sol-tool-tabsrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.core-hero-cycle__foot-label {
  font-size: var(--text-sm);
  color: var(--text-soft);
}
.core-hero-cycle__foot-dots { display: flex; gap: 4px; }
.core-hero-cycle__foot-dots button {
  position: relative;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.core-hero-cycle__foot-dots button::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--line);
  transition: background 300ms var(--ease-out), transform 0.15s ease;
}
.core-hero-cycle__foot-dots button:hover::before { transform: scale(1.4); }
.core-hero-cycle__foot-dots button.is-active::before { background: var(--text-primary); }

/* Shared message-flow skeleton reused by all three tool skins */
.cgpt, .claudeui, .cursorui {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 22px 22px 20px;
}
.cgpt__assistant, .claudeui__assistant, .cursorui__assistant {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cgpt__text, .claudeui__text, .cursorui__text {
  margin: 0;
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
  max-width: 46ch;
}

/* ChatGPT skin */
.cgpt { background: var(--white); gap: 16px; }
.cgpt__user {
  align-self: flex-end;
  max-width: 82%;
  background: var(--surface-card);
  border-radius: var(--radius-lg);
  padding: 10px 15px;
  font-size: var(--text-sm);
  color: var(--text-primary);
  margin: 0;
}
.cgpt__working {
  display: block;
  font-size: var(--text-xs);
  color: var(--text-soft);
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}
.cgpt__toolcall {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 7px;
  padding: 7px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  color: var(--text-muted);
}
.cgpt__toolcall img { width: 14px; height: 14px; }
.cgpt__toolcall strong { color: var(--text-primary); font-weight: var(--weight-medium); }
.cgpt__toolcall svg { color: var(--text-soft); }
.cgpt__text { color: var(--text-primary); }
.cgpt__reactions { display: flex; gap: 14px; color: var(--text-soft); padding-top: 2px; }
.cgpt__composer {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
}
.cgpt__composer-plus { font-size: 18px; line-height: 1; color: var(--text-soft); }
.cgpt__composer-placeholder { flex: 1; font-size: var(--text-sm); color: var(--text-soft); }
.cgpt__composer-toggle {
  font-size: 11px;
  color: var(--text-muted);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  padding: 4px 10px;
  white-space: nowrap;
}
.cgpt__composer-model {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--text-sm);
  color: var(--text-muted);
  white-space: nowrap;
}
.cgpt__composer-send {
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Claude skin: warm near-white background, Claude's terracotta accent.
   Modeled on reference screenshots of an active Claude conversation: a
   muted two-step reasoning trace (each step tagged with a small "Result"
   pill) ahead of the tool call, then the answer; the composer includes a
   compact model selector and send control. */
.claudeui { background: #FAF9F5; gap: 16px; }
.claudeui__user {
  align-self: flex-end;
  max-width: 82%;
  background: #ECE5D3;
  border-radius: var(--radius-lg);
  padding: 10px 15px;
  font-size: var(--text-sm);
  color: #2b2926;
  margin: 0;
}
.claudeui__trace {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-left: 2px;
}
.claudeui__trace-row {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-xs);
  color: #8a8578;
}
.claudeui__trace-row svg { flex: none; color: #b3ab98; }
.claudeui__trace-row strong { color: #6b3826; font-weight: var(--weight-medium); }
.claudeui__trace-pill {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: #8a8578;
  background: #EFEBE0;
  border-radius: var(--radius-xs);
  padding: 2px 6px;
}
.claudeui__toolcall {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 7px;
  padding: 7px 12px;
  border: 1px solid rgba(217, 119, 87, 0.35);
  background: rgba(217, 119, 87, 0.08);
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  color: #8a4a34;
}
.claudeui__toolcall img { width: 14px; height: 14px; }
.claudeui__toolcall strong { color: #6b3826; font-weight: var(--weight-medium); }
.claudeui__text { color: #2b2926; }
.claudeui__composer {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid rgba(43, 41, 38, 0.14);
  border-radius: var(--radius-xl);
  background: var(--white);
}
.claudeui__composer-plus { font-size: 18px; line-height: 1; color: #8a8578; }
.claudeui__composer-placeholder { flex: 1; font-size: var(--text-sm); color: #8a8578; }
.claudeui__composer-model {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: #2b2926;
  white-space: nowrap;
}
.claudeui__composer-model-sub { font-weight: var(--weight-regular); color: #8a8578; }
.claudeui__composer-model svg { color: #8a8578; }
.claudeui__composer-mic { flex: none; color: #8a8578; display: inline-flex; }
.claudeui__composer-send {
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  background: #D97757;
  color: var(--white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Cursor skin: dark, agent-centric editor chrome — @-context file chips,
   an "Agent" mode pill and model picker in the composer, matching Cursor's
   current agent-mode UI rather than a generic chat composer. */
.cursorui { background: #1e1e1e; gap: 14px; }
.cursorui__context { display: flex; gap: 6px; flex-wrap: wrap; }
.cursorui__file {
  font-family: var(--font-mono);
  font-size: 11px;
  color: #9d9d9d;
  background: #2a2a2a;
  border: 1px solid #3a3a3a;
  border-radius: var(--radius-xs);
  padding: 3px 8px;
}
.cursorui__user {
  align-self: flex-end;
  max-width: 82%;
  background: #2a2a2a;
  border-radius: var(--radius-lg);
  padding: 10px 15px;
  font-size: var(--text-sm);
  color: #e6e6e6;
  margin: 0;
}
.cursorui__toolcall {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 7px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: #9d9d9d;
}
.cursorui__toolcall-dot { width: 6px; height: 6px; border-radius: 50%; background: #3fb950; }
.cursorui__toolcall strong { color: #e6e6e6; font-weight: var(--weight-medium); }
.cursorui__text { color: #d4d4d4; }
.cursorui__composer {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid #3a3a3a;
  background: #2a2a2a;
  border-radius: var(--radius-xl);
}
.cursorui__composer-mode {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: var(--weight-medium);
  color: #e6e6e6;
  background: #3a3a3a;
  border-radius: var(--radius-pill);
  padding: 4px 8px;
  white-space: nowrap;
}
.cursorui__composer-mode svg { color: #9d9d9d; }
.cursorui__composer-placeholder { flex: 1; font-size: var(--text-sm); color: #7a7a7a; }
.cursorui__composer-model {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--text-sm);
  color: #9d9d9d;
  white-space: nowrap;
}
.cursorui__composer-send { flex: none; color: #9d9d9d; display: inline-flex; }

/* Full application interfaces used inside the macOS product stages. */
.tool-ui {
  --tool-bg: #fff;
  --tool-sidebar: #f7f7f7;
  --tool-border: rgba(0, 0, 0, 0.1);
  --tool-text: #171717;
  --tool-muted: #686868;
  display: grid;
  grid-template-columns: 19.5% minmax(0, 1fr);
  color: var(--tool-text);
  background: var(--tool-bg);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: clamp(6px, 0.78vw, 12px);
  line-height: 1.35;
  text-align: left;
}
.tool-ui *, .cursor-mock *, .hermes-mock * { box-sizing: border-box; }
.tool-ui__sidebar {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1.5%;
  padding: 3.4% 4.8%;
  background: var(--tool-sidebar);
  border-right: 1px solid var(--tool-border);
}
.tool-ui__brand {
  display: flex;
  align-items: center;
  gap: 7%;
  min-height: 8%;
  margin-bottom: 5%;
  font-weight: 600;
}
.tool-ui__brand img { width: 13%; height: auto; max-height: 20px; object-fit: contain; }
.tool-ui__or-mark {
  width: 15%;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  color: #111;
  background: #ff6a1a;
  border-radius: 2px;
  font-size: 0.76em;
  font-weight: 800;
}
.tool-ui__navitem {
  display: flex;
  align-items: center;
  gap: 7%;
  min-height: 6.7%;
  padding: 4.2% 5.5%;
  overflow: hidden;
  color: var(--tool-muted);
  border-radius: 6px;
  white-space: nowrap;
  text-overflow: ellipsis;
  transition: background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
}
.gr-macstage__frame.is-active .tool-ui__navitem { pointer-events: auto; }
.tool-ui__navitem svg { width: 13px; height: 13px; flex: none; opacity: 0.75; }
.tool-ui__navitem:hover { color: var(--tool-text); background: rgba(0, 0, 0, 0.04); }
.tool-ui__navitem.is-active { color: var(--tool-text); background: rgba(0, 0, 0, 0.055); font-weight: 550; }
.tool-ui__navitem.is-active svg { opacity: 1; }
.tool-ui__side-label {
  margin: 7% 5.5% 2%;
  color: var(--tool-muted);
  font-size: 0.78em;
  font-weight: 600;
}
.tool-ui__account {
  display: flex;
  align-items: center;
  gap: 7%;
  margin-top: auto;
  padding: 4% 5%;
  border-top: 1px solid var(--tool-border);
  color: var(--tool-text);
}
.tool-ui__avatar {
  width: 19%;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  flex: none;
  color: #fff;
  background: #303030;
  border-radius: 50%;
  font-size: 0.72em;
  font-weight: 650;
}
.tool-ui__account small { display: block; color: var(--tool-muted); font-size: 0.75em; }
.tool-ui__main { min-width: 0; display: flex; flex-direction: column; background: var(--tool-bg); }
.tool-ui__topbar {
  min-height: 9%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 3%;
  padding: 0 3.2%;
  border-bottom: 1px solid var(--tool-border);
}
.tool-ui__topbar-left, .tool-ui__topbar-right { display: flex; align-items: center; gap: 10px; min-width: 0; }
.tool-ui__topbar strong { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: 600; }
.tool-ui__badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 8px;
  color: var(--tool-muted);
  border: 1px solid var(--tool-border);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.62);
  font-size: 0.78em;
  white-space: nowrap;
  transition: background var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out);
}
.gr-macstage__frame.is-active .tool-ui__badge { pointer-events: auto; }
.tool-ui__badge:hover { color: var(--tool-text); background: #fff; border-color: rgba(0, 0, 0, 0.2); }
.tool-ui__badge img { width: 11px; height: 11px; object-fit: contain; }
.tool-ui__conversation {
  width: min(72%, 700px);
  min-height: 0;
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 3.2%;
  margin: 0 auto;
  padding: 4.2% 0 2.4%;
}
.tool-ui__message--user {
  align-self: flex-end;
  max-width: 78%;
  padding: 1.7% 2.4%;
  background: rgba(0, 0, 0, 0.055);
  border-radius: 13px;
}
.tool-ui__assistant { min-width: 0; }
.tool-ui__assistant-body { min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.tool-ui__assistant-body .tool-ui__subhead { margin: 0; font-size: 1.04em; font-weight: 650; }
.tool-ui__assistant-body p { margin: 0; color: var(--tool-text); }
.tool-ui__toolcall {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--tool-muted);
  font-size: 0.92em;
}
.tool-ui__toolcall img { width: 13px; height: 13px; object-fit: contain; }
.tool-ui__toolcall strong { color: var(--tool-text); font-weight: 600; }
.tool-ui__feedback { display: flex; align-items: center; gap: 10px; margin-top: 2px; color: var(--tool-muted); }
.tool-ui__feedback svg { width: 13px; height: 13px; }
.tool-ui__source-row { display: flex; flex-wrap: wrap; gap: 5px; }
.tool-ui__source {
  padding: 3px 7px;
  color: var(--tool-muted);
  background: rgba(0, 0, 0, 0.04);
  border-radius: 999px;
  font-size: 0.74em;
}
.tool-ui__metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.tool-ui__metric { padding: 7px; border: 1px solid var(--tool-border); border-radius: 8px; background: rgba(255,255,255,0.7); }
.tool-ui__metric strong { display: block; font-size: 1.15em; font-weight: 650; }
.tool-ui__metric span { color: var(--tool-muted); font-size: 0.75em; }
.tool-ui__composer {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding: 1.7% 2.2%;
  color: var(--tool-muted);
  border: 1px solid var(--tool-border);
  border-radius: 14px;
  background: rgba(255,255,255,0.78);
  box-shadow: 0 5px 20px rgba(0,0,0,0.045);
}
.tool-ui__composer > span:nth-child(2) { flex: 1; }
.tool-ui__send { width: 20px; height: 20px; display: grid; place-items: center; color: #fff; background: #181818; border-radius: 50%; font-size: 0.76em; transition: filter var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out); }
.gr-macstage__frame.is-active .tool-ui__send { pointer-events: auto; }
.tool-ui__send:hover { filter: brightness(1.2); transform: scale(1.08); }

/* ChatGPT */
.tool-ui--chatgpt { --tool-sidebar: #f7f7f8; --tool-border: rgba(0,0,0,0.09); }
.tool-ui--chatgpt .tool-ui__topbar { border-bottom-color: transparent; }

/* Claude */
.tool-ui--claude { --tool-bg: #f8f7f2; --tool-sidebar: #eeeae0; --tool-border: rgba(51,45,38,0.12); --tool-text: #2b2926; --tool-muted: #797267; }
.tool-ui--claude .tool-ui__message--user { background: #e7e0cf; }
.tool-ui--claude .tool-ui__send { border-radius: 6px; background: #d97757; }
.tool-ui__claude-workspace { min-height: 0; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); flex: 1; }
.tool-ui__claude-workspace .tool-ui__conversation { width: 82%; }
.tool-ui__artifact { min-width: 0; margin: 2.2%; padding: 3.2%; border: 1px solid var(--tool-border); border-radius: 10px; background: #fff; box-shadow: 0 8px 24px rgba(65,55,40,0.08); }
.tool-ui__artifact-head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 7px; border-bottom: 1px solid var(--tool-border); }
.tool-ui__artifact .tool-ui__subhead { margin: 8px 0 5px; font-size: 1.05em; }
.tool-ui__artifact ul { margin: 0; padding-left: 1.2em; color: var(--tool-muted); }
.tool-ui__artifact li + li { margin-top: 4px; }
.tool-ui__artifact-rule { display: grid; grid-template-columns: 1fr auto; gap: 6px; margin-top: 6px; padding: 6px; border-radius: 6px; background: #f4f1e9; }
.tool-ui__artifact-rule strong { font-weight: 600; }
.tool-ui__artifact-rule span { color: #8d4d36; }

/* OpenRouter */
.tool-ui--openrouter { --tool-bg: #f3efe5; --tool-sidebar: #171717; --tool-border: rgba(16,16,16,0.15); --tool-text: #111; --tool-muted: #665f55; grid-template-columns: 18% minmax(0,1fr); }
.tool-ui--openrouter .tool-ui__sidebar { color: #f4efe6; }
.tool-ui--openrouter .tool-ui__brand { color: #fff; }
.tool-ui--openrouter .tool-ui__navitem { color: #b7b1a7; }
.tool-ui--openrouter .tool-ui__navitem.is-active { color: #fff; background: #ff6a1a; }
.tool-ui--openrouter .tool-ui__side-label { color: #817c74; }
.tool-ui--openrouter .tool-ui__account { color: #fff; border-top-color: rgba(255,255,255,0.12); }
.tool-ui--openrouter .tool-ui__account small { color: #958f86; }
.tool-ui--openrouter .tool-ui__topbar { background: #f8f4eb; }
.tool-ui__model-row { display: flex; flex-wrap: wrap; gap: 5px; }
.tool-ui__model-chip { display: inline-flex; align-items: center; gap: 5px; padding: 4px 7px; border: 1px solid var(--tool-border); border-radius: 4px; background: #fbf8f0; font-size: 0.76em; }
.tool-ui__model-dot { width: 5px; height: 5px; border-radius: 50%; background: #ff6a1a; }
.tool-ui__compare { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.tool-ui__compare-card { padding: 8px; border: 1px solid var(--tool-border); background: #fbf8f0; }
.tool-ui__compare-card header { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-bottom: 5px; border-bottom: 1px solid var(--tool-border); }
.tool-ui__compare-card header strong { font-size: 0.84em; }
.tool-ui__compare-card p { margin: 6px 0 0; color: var(--tool-muted); }
.tool-ui--openrouter .tool-ui__composer { border-radius: 4px; background: #fbf8f0; }
.tool-ui--openrouter .tool-ui__send { border-radius: 2px; background: #ff6a1a; }

/* Cursor */
.cursor-mock {
  display: grid;
  grid-template-rows: 5.8% minmax(0,1fr) 3.8%;
  color: #d4d4d4;
  background: #181818;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: clamp(6px, 0.72vw, 11px);
  line-height: 1.35;
  text-align: left;
}
.cursor-mock__titlebar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 1.2%; color: #a5a5a5; background: #1f1f1f; border-bottom: 1px solid #2a2a2a; }
.cursor-mock__titlebar strong { justify-self: center; color: #c7c7c7; font-weight: 500; }
.cursor-mock__title-actions { justify-self: end; display: flex; gap: 10px; }
.cursor-mock__workspace { min-height: 0; display: grid; grid-template-columns: 4.2% 18% minmax(0,1fr) 34%; }
.cursor-mock__rail { display: flex; flex-direction: column; align-items: center; gap: 9%; padding-top: 22%; color: #858585; background: #181818; border-right: 1px solid #2a2a2a; }
.cursor-mock__rail span { width: 42%; aspect-ratio: 1; border: 1px solid currentColor; border-radius: 3px; }
.cursor-mock__rail span.is-active { color: #fff; border-width: 2px; }
.cursor-mock__explorer { min-width: 0; padding: 5% 6%; background: #1f1f1f; border-right: 1px solid #2a2a2a; }
.cursor-mock__explorer h4 { margin: 0 0 8%; color: #bdbdbd; font-size: 0.8em; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; }
.cursor-mock__tree { display: flex; flex-direction: column; gap: 5px; }
.cursor-mock__tree span { overflow: hidden; color: #a9a9a9; white-space: nowrap; text-overflow: ellipsis; }
.cursor-mock__tree span::before { content: "›"; display: inline-block; width: 12px; color: #777; }
.cursor-mock__tree span.is-folder { color: #d4d4d4; }
.cursor-mock__tree span.is-file { padding-left: 10px; }
.cursor-mock__tree span.is-active { margin-left: -6%; padding: 3px 4% 3px calc(10px + 4%); color: #fff; background: #37373d; }
.cursor-mock__editor { min-width: 0; display: flex; flex-direction: column; background: #1e1e1e; border-right: 1px solid #2a2a2a; }
.cursor-mock__tabs { display: flex; min-height: 8%; border-bottom: 1px solid #2a2a2a; }
.cursor-mock__tab { display: flex; align-items: center; padding: 0 3%; color: #999; background: #252526; border-right: 1px solid #2a2a2a; }
.cursor-mock__tab.is-active { color: #fff; background: #1e1e1e; border-top: 1px solid #6b8afd; }
.cursor-mock__code { min-height: 0; flex: 1; padding: 3.5% 3%; font-family: var(--font-mono); color: #d4d4d4; }
.cursor-mock__line { display: grid; grid-template-columns: 22px minmax(0,1fr); gap: 8px; white-space: nowrap; }
.cursor-mock__ln { color: #616161; text-align: right; }
.cursor-mock__kw { color: #c586c0; }
.cursor-mock__fn { color: #dcdcaa; }
.cursor-mock__str { color: #ce9178; }
.cursor-mock__type { color: #4ec9b0; }
.cursor-mock__num { color: #b5cea8; }
.cursor-mock__agent { min-width: 0; display: flex; flex-direction: column; background: #202020; }
.cursor-mock__agent-head { display: flex; align-items: center; justify-content: space-between; padding: 3.4% 5%; border-bottom: 1px solid #303030; }
.cursor-mock__agent-head strong { color: #f0f0f0; font-weight: 550; }
.cursor-mock__agent-body { min-height: 0; display: flex; flex: 1; flex-direction: column; gap: 3%; padding: 4.5% 5%; }
.cursor-mock__context { display: flex; flex-wrap: wrap; gap: 4px; }
.cursor-mock__chip { padding: 3px 6px; color: #b6b6b6; background: #2c2c2c; border: 1px solid #3d3d3d; border-radius: 4px; font-family: var(--font-mono); font-size: 0.76em; }
.cursor-mock__prompt { align-self: flex-end; max-width: 88%; padding: 6px 8px; color: #f0f0f0; background: #303030; border-radius: 8px; }
.cursor-mock__tool { display: flex; align-items: center; gap: 6px; padding: 6px 7px; color: #bcbcbc; border: 1px solid #393939; border-radius: 5px; }
.cursor-mock__tool img { width: 11px; height: 11px; filter: invert(1); }
.cursor-mock__tool b { color: #f0f0f0; font-weight: 550; }
.cursor-mock__answer { margin: 0; color: #d2d2d2; }
.cursor-mock__changes { padding: 6px 7px; color: #b9d6bd; background: rgba(55, 130, 70, 0.14); border: 1px solid rgba(86,160,99,0.35); border-radius: 5px; }
.cursor-mock__composer { margin-top: auto; padding: 7px 8px; color: #777; background: #292929; border: 1px solid #3b3b3b; border-radius: 7px; }
.cursor-mock__status { display: flex; align-items: center; justify-content: space-between; padding: 0 1.2%; color: #d7e2ff; background: #3654a5; font-size: 0.82em; }

/* Hermes Agent desktop */
.hermes-mock {
  display: grid;
  grid-template-columns: 20% minmax(0,1fr);
  color: #17171a;
  background: #f8faff;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: clamp(6px, 0.72vw, 11px);
  line-height: 1.42;
  text-align: left;
}
.hermes-mock__sidebar { display: flex; flex-direction: column; padding: 7% 8%; background: #f3f7ff; border-right: 1px solid #dfe7f5; }
.hermes-mock__brand { display: flex; align-items: center; gap: 8%; padding-bottom: 9%; color: #17171a; border-bottom: 1px solid #dfe7f5; font-weight: 650; }
.hermes-mock__brand img { width: 17%; aspect-ratio: 1; object-fit: contain; }
.hermes-mock__label { margin: 9% 0 4%; color: #7b7b8b; font-size: 0.78em; letter-spacing: 0.08em; text-transform: uppercase; }
.hermes-mock__session { padding: 4% 5%; color: #666678; border-radius: 5px; }
.hermes-mock__session.is-active { color: #0047d8; background: #e5edff; font-weight: 600; }
.hermes-mock__health { margin-top: auto; color: #666678; }
.hermes-mock__health span { color: #168b4a; }
.hermes-mock__terminal { min-width: 0; display: flex; flex-direction: column; }
.hermes-mock__topbar { display: flex; align-items: center; justify-content: space-between; padding: 1.2% 2.2%; color: #666678; background: #fff; border-bottom: 1px solid #dfe7f5; }
.hermes-mock__body { min-height: 0; display: flex; flex: 1; flex-direction: column; gap: 1.4%; padding: 2.3% 3%; overflow: hidden; }
.hermes-mock__welcome { display: flex; align-items: center; gap: 8px; color: #17171a; }
.hermes-mock__welcome img { width: 18px; height: 18px; object-fit: contain; }
.hermes-mock__muted { color: #7b7b8b; }
.hermes-mock__prompt { align-self: flex-end; max-width: 82%; padding: 6px 9px; color: #17171a; background: #e8efff; border-radius: 9px; }
.hermes-mock__prompt::before { content: ""; }
.hermes-mock__thought { padding-left: 12px; color: #666678; border-left: 2px solid #b7c9f2; }
.hermes-mock__call { display: grid; grid-template-columns: 21% minmax(0,1fr) auto; gap: 8px; align-items: center; padding: 5px 7px; color: #666678; border-top: 1px solid #e3e9f3; }
.hermes-mock__call b { color: #0053fd; font-family: var(--font-mono); font-weight: 500; }
.hermes-mock__call span:last-child { color: #168b4a; }
.hermes-mock__result { padding: 8px 10px; color: #383842; background: #fff; border-left: 3px solid #0053fd; box-shadow: 0 4px 18px rgba(43,78,150,0.07); }
.hermes-mock__result strong { color: #17171a; }
.hermes-mock__footer { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 1.5%; color: #666678; border-top: 1px solid #dfe7f5; }

@media (max-width: 720px) {
  .tool-ui { grid-template-columns: 16% minmax(0,1fr); }
  .tool-ui__sidebar { padding-inline: 8%; }
  .tool-ui__brand span, .tool-ui__navitem, .tool-ui__side-label, .tool-ui__account span { font-size: 0; }
  .tool-ui__brand img { width: 32%; }
  .tool-ui__navitem svg { width: 11px; height: 11px; margin: auto; }
  .tool-ui__conversation { width: 86%; }
  .tool-ui__claude-workspace { grid-template-columns: 1fr 0.8fr; }
  .cursor-mock__workspace { grid-template-columns: 4.5% 14% minmax(0,1fr) 38%; }
}

/* ==========================================================================
   AUTHENTIC MACOS PRODUCT STAGE
   A museum-sourced painting provides the desktop wallpaper while an exact
   product capture sits inside a single macOS-style application window.
   ========================================================================== */
.gr-macstage {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid rgba(17, 17, 17, 0.12);
  border-radius: clamp(18px, 2.5vw, 32px);
  background: #70808d;
  box-shadow: 0 28px 80px rgba(17, 17, 17, 0.18), 0 2px 8px rgba(17, 17, 17, 0.12);
}
.gr-macstage::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 1px rgba(255,255,255,0.42), inset 0 -1px rgba(17,17,17,0.16);
}
.gr-macstage__wallpaper {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: saturate(0.92) contrast(0.96);
  transform: scale(1.012);
}
.gr-macstage__wash {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(ellipse 75% 75% at 50% 50%, transparent 55%, rgba(8,12,16,0.24) 100%);
  pointer-events: none;
}
.gr-macstage__window {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  width: min(82%, 1260px);
  overflow: hidden;
  border: 1px solid rgba(17,17,17,0.24);
  border-radius: clamp(10px, 1.3vw, 17px);
  background: #fff;
  box-shadow: 0 32px 70px rgba(0,0,0,0.34), 0 4px 18px rgba(0,0,0,0.22), 0 0 0 1px rgba(255,255,255,0.18) inset;
  transform: translate(-50%, -50%);
}
.gr-macstage__chrome {
  position: relative;
  height: clamp(25px, 3vw, 39px);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding-inline: clamp(10px, 1.3vw, 18px);
  color: #3f3f3f;
  background: rgba(243,243,243,0.96);
  border-bottom: 1px solid #d8d8d8;
  box-shadow: inset 0 1px rgba(255,255,255,0.9);
}
.gr-macstage__lights { display: flex; align-items: center; gap: clamp(4px, 0.55vw, 8px); }
.gr-macstage__light { width: clamp(7px, 0.85vw, 11px); height: clamp(7px, 0.85vw, 11px); border-radius: 50%; box-shadow: inset 0 0 0 0.5px rgba(0,0,0,0.2); }
.gr-macstage__light:nth-child(1) { background: #ff5f57; }
.gr-macstage__light:nth-child(2) { background: #febc2e; }
.gr-macstage__light:nth-child(3) { background: #28c840; }
.gr-macstage__title {
  grid-column: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: clamp(8px, 0.85vw, 12px);
  font-weight: var(--weight-medium);
  white-space: nowrap;
}
.gr-macstage__viewport {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #f4f2f2;
}
.gr-macstage--fincore .gr-macstage__viewport::after,
.gr-macstage.is-roadmap-masked .gr-macstage__viewport::after {
  content: "";
  position: absolute;
  z-index: 3;
  left: 0;
  top: 61%;
  width: 18.45%;
  height: 28.5%;
  background: #f5f3f3;
  border-top: 1px solid #e8e4e4;
  border-right: 1px solid #dedada;
  pointer-events: none;
}
.gr-macstage__frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top left;
  opacity: 0;
  transform: scale(1.004);
  transition: opacity 420ms var(--ease-out), transform 900ms var(--ease-out);
  pointer-events: none;
}
.gr-macstage__frame.is-active { opacity: 1; transform: none; }
.gr-macstage__cursor {
  position: absolute;
  z-index: 5;
  left: var(--cursor-x, 72%);
  top: var(--cursor-y, 72%);
  width: clamp(13px, 1.55vw, 22px);
  height: auto;
  color: #111;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,0.55));
  transform: translate(-2px, -2px);
  transition: left 900ms cubic-bezier(.22,.72,.2,1), top 900ms cubic-bezier(.22,.72,.2,1), transform 120ms ease;
  pointer-events: none;
}
.gr-macstage__cursor path { fill: #111; stroke: #fff; }
.gr-macstage.is-clicking .gr-macstage__cursor { transform: translate(-2px, -2px) scale(0.88); }
.gr-macstage__pulse {
  position: absolute;
  z-index: 4;
  left: var(--cursor-x, 72%);
  top: var(--cursor-y, 72%);
  width: 20px;
  height: 20px;
  border: 1.5px solid rgba(61,123,255,0.9);
  border-radius: 50%;
  opacity: 0;
  transform: translate(-50%,-50%) scale(0.25);
  pointer-events: none;
}
.gr-macstage.is-clicking .gr-macstage__pulse { animation: gr-mac-pulse 480ms ease-out; }
@keyframes gr-mac-pulse {
  0% { opacity: 0.95; transform: translate(-50%,-50%) scale(0.25); }
  100% { opacity: 0; transform: translate(-50%,-50%) scale(1.8); }
}
.gr-macstage__caption {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: 12px;
  color: var(--text-muted);
  font-size: var(--text-sm);
}
.gr-macstage__caption strong { color: var(--text-primary); font-weight: var(--weight-medium); }
@media (max-width: 720px) {
  .gr-macstage { aspect-ratio: 4 / 3; border-radius: 18px; }
  .gr-macstage__window { width: 92%; }
  .gr-macstage__caption { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
  .gr-macstage__frame,
  .gr-macstage__cursor { transition: none; }
  .gr-macstage__cursor,
  .gr-macstage__pulse { display: none; }
}