/* PAIRL — Webfonts
   Display:  Space Grotesk  (geometric, technical headings + the wordmark voice)
   UI/Body:  Geist          (clean, neutral product sans)
   Mono:     Geist Mono     (code, gateway headers, token/credit figures)
   Loaded from Google Fonts. Consumers link styles.css which reaches this file. */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Geist:wght@300;400;500;600;700&family=Geist+Mono:wght@400;500;600&display=swap');
/* ============================================================
   PAIRL — Color tokens
   Dark-first, techy slate base + an OYSTER nacre accent system.
   The signature is the muted mother-of-pearl shift: a muddy shell
   grey, pale yellow-greens and straws, and several pastel
   blue-violets — chalky, low-chroma, poetic. Not candy.
   The slate scale keeps everything calm and structural.
   ============================================================ */

:root {
  /* ---- Ink / slate scale (cool neutrals, dark-first) ---- */
  --ink-975: #020617;   /* near-black used by the light marketing template for headings */
  --ink-950: #181410;   /* deepest ink — dark oyster-brown-black (warm, not pure black) */
  --ink-900: #070D1F;
  --ink-850: #0C1428;
  --ink-800: #131D36;
  --ink-750: #1A2745;
  --ink-700: #233252;
  --ink-600: #324466;
  --ink-500: #475C82;
  --ink-400: #6276A0;
  --ink-300: #8B9BBE;
  --ink-200: #BAC5DD;
  --ink-100: #DCE3F0;
  --ink-50:  #F1F4FA;
  --white:   #FFFFFF;

  /* ---- Oyster nacre stops (the iridescent shift, muted) ----
     grit  = muddy shell grey   sage  = pale yellow-green
     straw = muddy yellow       peri  = pastel periwinkle
     lilac = pastel lilac       orchid = muted blue-violet     */
  --pearl-grit:   #747981;
  --pearl-sage:   #D6E2C2;
  --pearl-straw:  #DCCFA7;
  --pearl-peri:   #ADBCDD;
  --pearl-lilac:  #B8AED1;
  --pearl-orchid: #AA9DC3;

  /* ---- Iris (primary accent — the blue-violet nacre sheen) ---- */
  --iris-200: #DADCF2;
  --iris-300: #C2C5E3;
  --iris-400: #A6A7CD;
  --iris-500: #8E8DB9;   /* PRIMARY (dark theme fill) */
  --iris-600: #7975A5;
  --iris-700: #625C89;

  /* ---- Aqua (secondary accent — a dusty muted blue) ---- */
  --aqua-300: #B8D1EB;
  --aqua-400: #9FBBD8;
  --aqua-500: #83A2C2;
  --aqua-600: #6986A7;

  /* ---- Semantic hues (kept muted, within the oyster family) ---- */
  --mint-400:  #9DC3A3;   /* success */
  --mint-500:  #7BA483;
  --amber-400: #DFC79D;   /* warning */
  --amber-500: #C9A87A;
  --rose-400:  #CE9CA1;   /* danger */
  --rose-500:  #BA7B84;

  /* ---- Signature gradients ---- */
  --gradient-pearl: linear-gradient(115deg, #D6E2C2 0%, #DCCFA7 26%, #ADBCDD 56%, #B8AED1 80%, #AA9DC3 100%); /* @kind color */
  --gradient-pearl-soft: linear-gradient(115deg, rgba(214,226,194,.85) 0%, rgba(220,207,167,.85) 30%, rgba(173,188,221,.85) 62%, rgba(170,157,195,.85) 100%); /* @kind color */
  /* deeper end of the iris scale, for display text & CTAs */
  --gradient-iris: linear-gradient(135deg, #6D86B4 0%, #7873A6 50%, #8E749F 120%); /* @kind color */
  --sheen-pearl: conic-gradient(from 210deg at 50% 50%, #ADBCDD, #B8AED1, #AA9DC3, #DCCFA7, #D6E2C2, #747981, #ADBCDD); /* @kind color */

  /* ============================================================
     SEMANTIC ALIASES — reach for these in components
     ============================================================ */

  /* Backgrounds & surfaces */
  --bg:             var(--ink-950);
  --bg-subtle:      var(--ink-900);
  --surface:        var(--ink-850);
  --surface-raised: var(--ink-800);
  --surface-hover:  var(--ink-750);
  --surface-inset:  var(--ink-900);
  --surface-glass:  rgba(18, 29, 54, 0.62);

  /* Borders & dividers */
  --border:         rgba(255, 255, 255, 0.08);
  --border-strong:  rgba(255, 255, 255, 0.16);
  --border-muted:   rgba(255, 255, 255, 0.05);
  --border-accent:  rgba(142, 141, 185, 0.55);

  /* Text */
  --text-primary:   var(--ink-50);
  --text-secondary: var(--ink-300);
  --text-muted:     var(--ink-400);
  --text-faint:     var(--ink-500);
  --text-inverse:   var(--ink-950);
  --text-accent:    var(--iris-300);
  --text-link:      var(--iris-300);

  /* Accent roles */
  --accent:         var(--iris-500);
  --accent-hover:   var(--iris-400);
  --accent-active:  var(--iris-600);
  --accent-subtle:  rgba(142, 141, 185, 0.16);
  --accent-fg:      var(--ink-950);   /* dark text on the light accent fill */

  /* Feedback roles */
  --success:        var(--mint-400);
  --success-subtle: rgba(157, 195, 163, 0.16);
  --warning:        var(--amber-400);
  --warning-subtle: rgba(223, 199, 157, 0.16);
  --danger:         var(--rose-400);
  --danger-subtle:  rgba(206, 156, 161, 0.16);
  --info:           var(--aqua-400);
  --info-subtle:    rgba(159, 187, 216, 0.16);

  /* Focus */
  --focus-ring:     rgba(142, 141, 185, 0.55);
}
/* ============================================================
   PAIRL — Typography tokens
   ============================================================ */

:root {
  /* Families */
  --font-display: 'Space Grotesk', 'Geist', system-ui, sans-serif;
  --font-sans:    'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'Geist Mono', 'SF Mono', 'JetBrains Mono', ui-monospace, monospace;

  /* Weights */
  --weight-light:    300;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* Type scale (16px base) */
  --text-xs:   0.75rem;    /* 12 */
  --text-sm:   0.8125rem;  /* 13 */
  --text-base: 0.9375rem;  /* 15 — default UI body */
  --text-md:   1rem;       /* 16 */
  --text-lg:   1.125rem;   /* 18 */
  --text-xl:   1.375rem;   /* 22 */
  --text-2xl:  1.75rem;    /* 28 */
  --text-3xl:  2.25rem;    /* 36 */
  --text-4xl:  3rem;       /* 48 */
  --text-5xl:  3.75rem;    /* 60 */
  --text-6xl:  4.75rem;    /* 76 */

  /* Line heights */
  --leading-none:    1;
  --leading-tight:   1.12;
  --leading-snug:    1.28;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;

  /* Letter spacing */
  --tracking-tighter: -0.03em;
  --tracking-tight:   -0.015em;
  --tracking-normal:  0;
  --tracking-wide:    0.02em;
  --tracking-wider:   0.08em;
  --tracking-caps:    0.14em;   /* eyebrow / overline labels */

  /* ---- Semantic text roles ---- */
  --display-font:   var(--font-display);
  --display-weight: var(--weight-bold);
  --display-tracking: var(--tracking-tight);

  --heading-font:   var(--font-display);
  --heading-weight: var(--weight-semibold);

  --body-font:      var(--font-sans);
  --body-weight:    var(--weight-regular);
  --body-leading:   var(--leading-normal);

  --eyebrow-font:    var(--font-mono);
  --eyebrow-size:    var(--text-xs);
  --eyebrow-weight:  var(--weight-medium);
  --eyebrow-tracking: var(--tracking-caps);

  --mono-font:      var(--font-mono);
}
/* ============================================================
   PAIRL — Spacing & layout tokens (4px base grid)
   ============================================================ */

:root {
  --space-0:  0;
  --space-1:  0.25rem;  /* 4  */
  --space-2:  0.5rem;   /* 8  */
  --space-3:  0.75rem;  /* 12 */
  --space-4:  1rem;     /* 16 */
  --space-5:  1.25rem;  /* 20 */
  --space-6:  1.5rem;   /* 24 */
  --space-8:  2rem;     /* 32 */
  --space-10: 2.5rem;   /* 40 */
  --space-12: 3rem;     /* 48 */
  --space-16: 4rem;     /* 64 */
  --space-20: 5rem;     /* 80 */
  --space-24: 6rem;     /* 96 */
  --space-32: 8rem;     /* 128 */

  /* Layout */
  --container-sm:  640px;
  --container-md:  840px;
  --container-lg:  1080px;
  --container-xl:  1280px;
  --container-2xl: 1440px;
  --gutter:        var(--space-6);
  --section-y:     var(--space-24);
}
/* ============================================================
   PAIRL — Radius, elevation, motion tokens
   Dark-first: elevation reads through subtle borders + soft drop
   shadows, with an iridescent "glow" reserved for hero/primary moments.
   ============================================================ */

:root {
  /* Corner radii — rounded, friendly marketing look (template refresh) */
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:   10px;
  --radius-lg:   14px;
  --radius-xl:   16px;
  --radius-2xl:  20px;
  --radius-full: 999px;

  /* Border widths */
  --border-width:    1px;
  --border-width-2:  1.5px;

  /* Shadows (cool, low-spread — tuned for dark surfaces) */
  --shadow-sm: 0 1px 2px rgba(2, 6, 23, 0.40);
  --shadow-md: 0 4px 14px rgba(2, 6, 23, 0.45);
  --shadow-lg: 0 18px 44px rgba(2, 6, 23, 0.55);
  --shadow-xl: 0 32px 80px rgba(2, 6, 23, 0.62);

  /* Inset hairline that gives surfaces a crisp top edge on dark */
  --edge-top: inset 0 1px 0 rgba(255, 255, 255, 0.06); /* @kind shadow */

  /* Iridescent glow — sparing, for primary CTAs / the mark */
  --glow-iris:  0 0 0 1px rgba(142,141,185,.40), 0 8px 32px rgba(142,141,185,.32);
  --glow-pearl: 0 10px 40px rgba(173,188,221,.24), 0 4px 14px rgba(184,174,209,.20);

  /* Focus ring */
  --ring: 0 0 0 3px var(--focus-ring);

  /* Motion — calm, precise, no bounce */
  --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 */
  --duration-fast:   120ms; /* @kind other */
  --duration-normal: 200ms; /* @kind other */
  --duration-slow:   360ms; /* @kind other */
  --transition: all var(--duration-normal) var(--ease-out);
}
/* ============================================================
   PAIRL — Light theme ("pearl on white")
   Opt-in: set data-theme="light" on <html>, <body>, or any wrapper.
   Only the SEMANTIC aliases are redefined — base scales (ink/iris/
   pearl) stay constant, so every component that reaches for the
   aliases adapts automatically. The pearl gradient is unchanged;
   on white it reads as a soft, low-contrast sheen (use it for fills
   and the mark, not for body-text-on-white).
   ============================================================ */

[data-theme="light"] {
  /* Backgrounds & surfaces */
  --bg:             #F5F7FC;
  --bg-subtle:      #ECEFF7;
  --surface:        #FFFFFF;
  --surface-raised: #FFFFFF;
  --surface-hover:  #F2F5FB;
  --surface-inset:  #F1F4FA;
  --surface-glass:  rgba(255, 255, 255, 0.72);

  /* Borders & dividers — dark translucent so they read on white */
  --border:         rgba(17, 29, 54, 0.10);
  --border-strong:  rgba(17, 29, 54, 0.16);
  --border-muted:   rgba(17, 29, 54, 0.06);
  --border-accent:  rgba(121, 117, 165, 0.45);

  /* Text */
  --text-primary:   var(--ink-975);
  --text-secondary: var(--ink-600);
  --text-muted:     var(--ink-400);
  --text-faint:     var(--ink-300);
  --text-inverse:   var(--white);
  --text-accent:    var(--iris-700);
  --text-link:      var(--iris-700);

  /* Accent roles — darker end of the iris scale so white text reads */
  --accent:         var(--iris-700);
  --accent-hover:   var(--iris-600);
  --accent-active:  var(--iris-700);
  --accent-subtle:  rgba(121, 117, 165, 0.12);
  --accent-fg:      var(--white);   /* white text on a solid accent fill */

  /* Feedback roles — deeper hues for contrast on white */
  --success:        var(--mint-500);
  --success-subtle: rgba(123, 164, 131, 0.18);
  --warning:        var(--amber-500);
  --warning-subtle: rgba(201, 168, 122, 0.20);
  --danger:         var(--rose-500);
  --danger-subtle:  rgba(186, 123, 132, 0.16);
  --info:           var(--aqua-600);
  --info-subtle:    rgba(105, 134, 167, 0.18);

  /* Elevation — soft slate-tinted shadows instead of deep black */
  --shadow-sm: 0 1px 2px rgba(20, 31, 58, 0.08);
  --shadow-md: 0 6px 18px rgba(20, 31, 58, 0.09);
  --shadow-lg: 0 20px 48px rgba(20, 31, 58, 0.12);
  --shadow-xl: 0 32px 80px rgba(20, 31, 58, 0.16);
  --edge-top:  inset 0 1px 0 rgba(255, 255, 255, 0.7); /* @kind shadow */

  --glow-iris:  0 0 0 1px rgba(121,117,165,.28), 0 10px 30px rgba(121,117,165,.22);
  --glow-pearl: 0 12px 40px rgba(173,188,221,.42), 0 4px 14px rgba(170,157,195,.32);

  --focus-ring: rgba(121, 117, 165, 0.45);
}
/* ============================================================
   PAIRL Design System — component CSS.
   Plain class rules extracted from the DS React primitives
   (components/**.jsx). They reference the design tokens; import
   AFTER tokens.css. Use the `pairl-*` classes directly in markup.
   ============================================================ */

/* ---- Base defaults ---- */
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--bg);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--body-leading);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Headings use the display family by default */
h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  font-weight: var(--heading-weight);
  letter-spacing: var(--tracking-tight);
  margin: 0;
  color: var(--text-primary);
}
p { margin: 0; }

/* Numeric / mono utility */
.font-mono, .pairl-mono { font-family: var(--font-mono); }
.pairl-display { font-family: var(--font-display); }
.pairl-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--eyebrow-weight);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-muted);
}

/* Pearl gradient clip text */
.pairl-text-pearl {
  background: var(--gradient-pearl);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.pairl-text-iris {
  color: var(--iris-300);
}

/* ---- Button ---- */
.pairl-btn{
  --_h:40px; --_px:18px; --_fs:var(--text-base);
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:var(--_h); padding:0 var(--_px); font-size:var(--_fs);
  font-family:var(--font-sans); font-weight:var(--weight-medium);
  letter-spacing:var(--tracking-tight); line-height:1; white-space:nowrap;
  border:1px solid transparent; border-radius:var(--radius-md);
  cursor:pointer; user-select:none; text-decoration:none;
  transition:background var(--duration-fast) var(--ease-out),
             border-color var(--duration-fast) var(--ease-out),
             box-shadow var(--duration-fast) var(--ease-out),
             transform var(--duration-fast) var(--ease-out),
             opacity var(--duration-fast) var(--ease-out);
}
.pairl-btn:focus-visible{ outline:none; box-shadow:var(--ring); }
.pairl-btn:active{ transform:scale(.98); }
.pairl-btn[disabled]{ opacity:.45; cursor:not-allowed; transform:none; box-shadow:none; }
.pairl-btn--sm{ --_h:32px; --_px:12px; --fs:var(--text-sm); border-radius:var(--radius-sm); }
.pairl-btn--lg{ --_h:48px; --_px:24px; --fs:var(--text-md); }
.pairl-btn--block{ display:flex; width:100%; }
.pairl-btn__icon{ display:inline-flex; width:1.1em; height:1.1em; }
.pairl-btn__icon svg{ width:100%; height:100%; }

.pairl-btn--primary{ background:var(--accent); color:var(--accent-fg); }
.pairl-btn--primary:hover:not([disabled]){ background:var(--accent-hover); }
.pairl-btn--primary:active:not([disabled]){ background:var(--accent-active); }
/* Simple solid dark button — the single primary CTA style across the site. On hover a
   soft, slanted holo light-streak swipes left→right across the fill, then is gone. */
.pairl-btn--dark{ background:var(--ink-950); color:#fff; border-color:transparent; position:relative; overflow:hidden; isolation:isolate; }
.pairl-btn--dark:hover:not([disabled]){ background:#2a241d; transform:translateY(-1px); }
.pairl-btn--dark:active:not([disabled]){ background:var(--ink-950); transform:translateY(0) scale(.98); }
.pairl-btn--dark::after{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:0;
  border-radius:inherit;
  background:linear-gradient(105deg,
    transparent 38%,
    rgba(166,239,231,.70) 46%,
    rgba(244,220,232,.92) 50%,
    rgba(196,241,205,.70) 54%,
    transparent 62%);
  background-size:250% 100%; background-repeat:no-repeat; background-position:100% 0;
}
.pairl-btn--dark:hover:not([disabled])::after{ animation:pairlBtnSheen .5s ease-out; }
@keyframes pairlBtnSheen{
  0%   { background-position:100% 0; opacity:0; }
  20%  { opacity:1; }
  80%  { opacity:1; }
  100% { background-position:0% 0; opacity:0; }
}
/* Logo hover shimmer — a holo light-streak sweeps across the wordmark (masked to the
   logo shape) on hover, then it returns to solid black. */
.pairl-logo-shimmer{ position:relative; display:inline-block; }
.pairl-logo-shimmer img{ display:block; }
.pairl-logo-shimmer__sheen{
  position:absolute; inset:0; pointer-events:none; opacity:0;
  -webkit-mask:url(/img/pairl-logo.svg) left center / contain no-repeat;
          mask:url(/img/pairl-logo.svg) left center / contain no-repeat;
  background:linear-gradient(105deg,
    transparent 38%,
    rgba(166,239,231,.85) 46%,
    rgba(244,220,232,1) 50%,
    rgba(196,241,205,.85) 54%,
    transparent 62%);
  background-size:250% 100%; background-repeat:no-repeat; background-position:100% 0;
}
.pairl-logo-shimmer:hover .pairl-logo-shimmer__sheen{ animation:pairlLogoSheen .5s ease-out; }
@keyframes pairlLogoSheen{
  0%   { background-position:100% 0; opacity:0; }
  20%  { opacity:1; }
  80%  { opacity:1; }
  100% { background-position:0% 0; opacity:0; }
}
.pairl-btn--secondary{ background:var(--surface-raised); color:var(--text-primary); border-color:var(--border-strong); box-shadow:var(--edge-top); }
.pairl-btn--secondary:hover:not([disabled]){ background:var(--surface-hover); border-color:var(--border-strong); }
.pairl-btn--ghost{ background:transparent; color:var(--text-secondary); }
.pairl-btn--ghost:hover:not([disabled]){ background:var(--accent-subtle); color:var(--text-primary); }
.pairl-btn--pearl{ background:var(--gradient-pearl); color:var(--ink-950); font-weight:var(--weight-semibold); }
.pairl-btn--pearl:hover:not([disabled]){ box-shadow:var(--glow-pearl); }
.pairl-btn--danger{ background:var(--rose-500); color:#fff; }
.pairl-btn--danger:hover:not([disabled]){ background:var(--rose-400); }

/* ---- IconButton ---- */
.pairl-iconbtn{
  --_s:40px;
  display:inline-flex; align-items:center; justify-content:center;
  width:var(--_s); height:var(--_s); padding:0;
  border:1px solid transparent; border-radius:var(--radius-md);
  background:transparent; color:var(--text-secondary); cursor:pointer;
  transition:background var(--duration-fast) var(--ease-out),
             color var(--duration-fast) var(--ease-out),
             border-color var(--duration-fast) var(--ease-out),
             box-shadow var(--duration-fast) var(--ease-out),
             transform var(--duration-fast) var(--ease-out);
}
.pairl-iconbtn svg{ width:20px; height:20px; }
.pairl-iconbtn--sm{ --_s:32px; border-radius:var(--radius-sm); }
.pairl-iconbtn--sm svg{ width:16px; height:16px; }
.pairl-iconbtn--lg{ --_s:48px; }
.pairl-iconbtn:hover:not([disabled]){ background:var(--accent-subtle); color:var(--text-primary); }
.pairl-iconbtn:active:not([disabled]){ transform:scale(.94); }
.pairl-iconbtn:focus-visible{ outline:none; box-shadow:var(--ring); }
.pairl-iconbtn[disabled]{ opacity:.45; cursor:not-allowed; }
.pairl-iconbtn--solid{ background:var(--surface-raised); color:var(--text-primary); border-color:var(--border-strong); box-shadow:var(--edge-top); }
.pairl-iconbtn--solid:hover:not([disabled]){ background:var(--surface-hover); }

/* ---- Card ---- */
.pairl-card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-md), var(--edge-top); color:var(--text-primary);
  transition:border-color var(--duration-normal) var(--ease-out), box-shadow var(--duration-normal) var(--ease-out), transform var(--duration-normal) var(--ease-out), background var(--duration-normal) var(--ease-out);
}
.pairl-card--glass{ background:var(--surface-glass); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); }
.pairl-card--accent{ border-color:var(--border-accent); box-shadow:var(--glow-iris), var(--edge-top); }
.pairl-card--interactive{ cursor:pointer; }
.pairl-card--interactive:hover{ border-color:var(--border-strong); background:var(--surface-raised); transform:translateY(-2px); box-shadow:var(--shadow-lg), var(--edge-top); }
.pairl-card--interactive:active{ transform:translateY(0); }

/* ---- StatTile ---- */
.pairl-stat{
  display:flex; flex-direction:column; gap:8px; padding:18px 20px;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg);
  box-shadow:var(--edge-top); min-width:0;
}
.pairl-stat--accent{ background:linear-gradient(180deg, rgba(142,141,185,.10), rgba(142,141,185,0)), var(--surface); border-color:var(--border-accent); }
.pairl-stat--center{ text-align:center; align-items:center; }
.pairl-stat__label{ font-family:var(--font-mono); font-size:var(--text-xs); letter-spacing:.06em; text-transform:uppercase; color:var(--text-muted); display:flex; align-items:center; gap:7px; }
.pairl-stat__label svg{ width:14px; height:14px; color:var(--iris-300); }
.pairl-stat__value{ font-family:var(--font-mono); font-weight:var(--weight-medium); font-size:var(--text-3xl); line-height:1; color:var(--text-primary); letter-spacing:-.01em; }
.pairl-stat__value .u{ font-size:var(--text-lg); color:var(--text-muted); margin-left:3px; }
.pairl-stat__value--pearl{ background:var(--gradient-pearl); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; }
.pairl-stat__foot{ display:flex; align-items:center; gap:8px; font-size:var(--text-sm); color:var(--text-muted); }

/* ---- Badge ---- */
.pairl-badge{
  display:inline-flex; align-items:center; gap:6px; height:22px; padding:0 9px;
  font-family:var(--font-sans); font-size:var(--text-xs); font-weight:var(--weight-medium);
  letter-spacing:.01em; line-height:1; border-radius:var(--radius-full);
  border:1px solid transparent; white-space:nowrap;
}
.pairl-badge--mono{ font-family:var(--font-mono); }
.pairl-badge__dot{ width:6px; height:6px; border-radius:50%; background:currentColor; }
.pairl-badge--neutral{ background:rgba(255,255,255,.06); color:var(--text-secondary); border-color:var(--border); }
.pairl-badge--accent{ background:var(--accent-subtle); color:var(--iris-300); }
.pairl-badge--success{ background:var(--success-subtle); color:var(--success); }
.pairl-badge--warning{ background:var(--warning-subtle); color:var(--warning); }
.pairl-badge--danger{ background:var(--danger-subtle); color:var(--danger); }
.pairl-badge--info{ background:var(--info-subtle); color:var(--info); }
.pairl-badge--solid.pairl-badge--neutral{ background:var(--ink-700); color:var(--text-primary); }
.pairl-badge--solid.pairl-badge--accent{ background:var(--iris-500); color:var(--ink-950); }
.pairl-badge--solid.pairl-badge--success{ background:var(--success); color:var(--ink-950); }
.pairl-badge--solid.pairl-badge--warning{ background:var(--warning); color:var(--ink-950); }
.pairl-badge--solid.pairl-badge--danger{ background:var(--rose-500); color:#fff; }
.pairl-badge--solid.pairl-badge--info{ background:var(--info); color:var(--ink-950); }

/* ---- Tag ---- */
.pairl-tag{
  display:inline-flex; align-items:center; gap:7px; height:26px; padding:0 11px;
  font-family:var(--font-mono); font-size:var(--text-xs); color:var(--text-secondary);
  background:var(--surface-raised); border:1px solid var(--border); border-radius:var(--radius-sm);
  white-space:nowrap;
}
.pairl-tag__dot{ width:7px; height:7px; border-radius:50%; }

/* ---- Field / Input ---- */
.pairl-field{ display:flex; flex-direction:column; gap:7px; }
.pairl-field__label{ font-family:var(--font-sans); font-size:var(--text-sm); font-weight:var(--weight-medium); color:var(--text-secondary); }
.pairl-field__hint{ font-size:var(--text-xs); color:var(--text-muted); }
.pairl-field__hint--error{ color:var(--danger); }
.pairl-input{
  width:100%; box-sizing:border-box; height:40px; padding:0 14px;
  font-family:var(--font-sans); font-size:var(--text-base); color:var(--text-primary);
  background:var(--surface-inset); border:1px solid var(--border-strong);
  border-radius:var(--radius-md); outline:none;
  transition:border-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out), background var(--duration-fast) var(--ease-out);
}
.pairl-input::placeholder{ color:var(--text-faint); }
.pairl-input--mono{ font-family:var(--font-mono); font-size:var(--text-sm); letter-spacing:.01em; }
.pairl-input:hover:not(:disabled){ border-color:var(--ink-600); }
.pairl-input:focus{ border-color:var(--border-accent); box-shadow:var(--ring); background:var(--surface); }
.pairl-input:disabled{ opacity:.5; cursor:not-allowed; }

/* ---- Tabs ---- */
.pairl-tabs{ display:flex; gap:4px; border-bottom:1px solid var(--border); }
.pairl-tabs--pill{ gap:4px; border-bottom:none; background:var(--surface-inset); padding:4px; border-radius:var(--radius-md); border:1px solid var(--border); display:inline-flex; }
.pairl-tab{
  position:relative; display:inline-flex; align-items:center; gap:7px; padding:10px 14px;
  font-family:var(--font-sans); font-size:var(--text-base); font-weight:var(--weight-medium);
  color:var(--text-muted); background:transparent; border:none; cursor:pointer; white-space:nowrap;
  transition:color var(--duration-fast) var(--ease-out), background var(--duration-fast) var(--ease-out);
}
.pairl-tab:hover{ color:var(--text-secondary); }
.pairl-tabs--pill .pairl-tab{ padding:7px 14px; border-radius:var(--radius-sm); }
.pairl-tabs--pill .pairl-tab[data-active="true"]{ color:var(--text-primary); background:var(--surface-raised); box-shadow:var(--shadow-sm); }
.pairl-tab:focus-visible{ outline:none; box-shadow:var(--ring); border-radius:var(--radius-sm); }

/* ---- CodeBlock ---- */
.pairl-code{ border:1px solid var(--border); border-radius:var(--radius-md); background:var(--ink-900); overflow:hidden; font-family:var(--font-mono); }
.pairl-code__bar{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:8px 10px 8px 14px; border-bottom:1px solid var(--border); background:var(--surface-inset); }
.pairl-code__title{ font-size:var(--text-xs); color:var(--text-muted); letter-spacing:.04em; }
.pairl-code__pre{ margin:0; padding:14px 16px; overflow:auto; font-size:var(--text-sm); line-height:1.6; color:var(--ink-100); }
.pairl-code__pre .tok-key{ color:var(--aqua-400); }
.pairl-code__pre .tok-val{ color:var(--pearl-straw); }
.pairl-code__pre .tok-cmt{ color:var(--text-faint); }

/* ---- Section layout helpers ---- */
.pairl-section{ padding-block:var(--section-y); padding-inline:var(--gutter); }
.pairl-container{ max-width:var(--container-xl); margin-inline:auto; }
.pairl-divider{ border-top:1px solid var(--border); }

/* Pearl ambient background mesh (rationed — use on one hero moment) */
.pairl-ambient{
  position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden;
  background:
    radial-gradient(900px 480px at 18% -8%, rgba(173,188,221,.10), transparent 60%),
    radial-gradient(820px 420px at 88% 8%, rgba(184,174,209,.08), transparent 62%),
    radial-gradient(620px 520px at 60% 110%, rgba(214,226,194,.06), transparent 60%);
}

/* ===== Template-specific helpers ===== */

/* Ambient grid + glow from the new marketing template */
.pairl-grid{
  position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(17,29,54,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(17,29,54,0.04) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:linear-gradient(180deg, #000 0%, #000 55%, transparent 100%);
  -webkit-mask-image:linear-gradient(180deg, #000 0%, #000 55%, transparent 100%);
}
.pairl-glow{
  position:absolute; pointer-events:none;
  top:-300px; left:50%; transform:translateX(-50%);
  width:1340px; height:940px;
  background:radial-gradient(ellipse 50% 50% at 50% 50%, rgba(173,188,221,0.42), rgba(184,174,209,0.24) 42%, transparent 72%);
  filter:blur(20px);
  animation:floatGlow 16s ease-in-out infinite;
}

/* Hero glass image drift */
.pairl-hero-glass{
  position:absolute; inset:-7%; width:114%; height:114%;
  object-fit:cover; object-position:72% 50%;
  transform-origin:center;
  animation:heroGlassDrift 20s ease-in-out infinite;
}

/* Pearl text sheen */
.pairl-text-sheen{
  background:linear-gradient(120deg,#6D86B4 0%,#7C76C0 38%,#9172FF 82%,#A78FFF 100%);
  background-size:240% 100%;
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  animation:sheenDrift 14s linear infinite;
}

/* Live status dot */
.pairl-pulse-dot{
  width:7px; height:7px; border-radius:999px; background:var(--success);
  animation:pulseDot 2.4s ease-in-out infinite;
}

/* Trust strip */
.pairl-trust-strip{
  border-top:1px solid var(--border); border-bottom:1px solid var(--border);
  background:var(--surface);
}

/* Compiler demo card */
.pairl-compiler-card{
  background:var(--surface); border:1px solid var(--border-strong); border-radius:var(--radius-xl);
  box-shadow:0 44px 96px rgba(20,31,58,0.20), 0 0 0 1px rgba(121,117,165,0.08), var(--edge-top);
}

/* Pricing: recommended / highlighted tier */
.pairl-card--recommended{
  border-color:rgba(145,114,255,0.60);
  box-shadow:0 20px 48px rgba(20,31,58,0.14), 0 0 0 1px rgba(145,114,255,0.32), 0 8px 30px rgba(145,114,255,0.20), var(--edge-top);
}
.pairl-recommended-badge{
  position:absolute; top:-11px; left:26px;
  font-family:var(--font-mono); font-size:10px; letter-spacing:0.12em; text-transform:uppercase; color:#fff;
  background:rgb(145,114,255); box-shadow:0 5px 18px rgba(145,114,255,0.55);
  padding:4px 11px; border-radius:999px;
}

/* CTA band */
.pairl-cta-band{
  position:relative; overflow:hidden;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-xl);
  box-shadow:0 32px 80px rgba(20,31,58,0.14), var(--edge-top);
}
.pairl-cta-band__glow{
  position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse 60% 75% at 50% 0%, rgba(173,188,221,0.34), transparent 68%);
}

/* FAQ accordion (details/summary) */
.pairl-details{}
.pairl-summary{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  cursor:pointer; padding:20px 22px;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg);
  transition:background var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
}
.pairl-summary:hover{ background:var(--surface-hover); }
.pairl-summary__chev{
  color:var(--iris-600); font-size:22px; line-height:1; flex:none;
  transition:transform 0.2s var(--ease-out);
}
.pairl-details[open] .pairl-summary{ background:var(--surface); border-color:var(--border-strong); box-shadow:var(--shadow-md); }
.pairl-details[open] .pairl-summary__chev{ transform:rotate(45deg); }
.pairl-details__body{
  padding:4px 22px 20px; font-size:var(--text-base); line-height:var(--leading-relaxed); color:var(--text-secondary);
}

/* Keyframes */
@keyframes sheenDrift { to { background-position:240% 50%; } }
@keyframes pulseDot { 0%,100%{ opacity:1; box-shadow:0 0 0 0 rgba(123,164,131,0.5);} 50%{ opacity:.55; box-shadow:0 0 0 5px rgba(123,164,131,0);} }
@keyframes floatGlow { 0%,100%{ transform:translate(-50%,0) scale(1);} 50%{ transform:translate(-50%,-3%) scale(1.05);} }
@keyframes heroGlassDrift { 0%,100%{ transform:scale(1.05) translate(0,0); } 50%{ transform:scale(1.2) translate(-3.4%,-1.8%); } }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}