/* Instnt website — consolidated stylesheet. Regenerated from source. */

/* ----- colors_and_type.css ----- */
/* ============================================================
   Instnt Design System — colors_and_type.css
   Brand: Instnt / Instnt Insurance Agency
   Tagline: "Identity. Insured."
   ============================================================ */

/* Poppins is the brand typeface (per Logo Style Guide).
   Sourced from Google Fonts so no font files are needed. */
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400&display=swap');

/* JetBrains Mono — self-hosted from uploaded files. Used by --font-mono
   for code, metrics, and tabular numerals. */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/JetBrainsMono-Regular.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/JetBrainsMono-Italic.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/JetBrainsMono-Medium.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/JetBrainsMono-SemiBold.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/JetBrainsMono-Bold.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('fonts/JetBrainsMono-ExtraBold.woff2') format('woff2');
}

:root {
  /* ---------- Brand palette (from official style guide) ---------- */
  --instnt-yellow:      #FFC200; /* CTA / spark / energy   */
  --instnt-navy:        #151423; /* canvas / deep ink      */
  --instnt-white:       #FFFFFF;
  --instnt-blue:        #0400D9; /* logo bolt mid          */
  --instnt-purple:      #7507EE; /* logo bolt top          */
  --instnt-pink:        #F0006C; /* logo bolt lower        */
  --instnt-peach:       #FF7A58; /* logo bolt tail         */

  /* ---------- Extended palette (from B3 Synaptic concept) ----- */
  --instnt-ivory:       #FFF9EA; /* warm light text on navy */
  --instnt-electric:    #100BFE; /* synapse signal blue     */
  --instnt-periwinkle:  #8885FF; /* secondary accent / link */

  /* ---------- Neutrals (derived) ---------- */
  --ink-900: #0B0A14;
  --ink-800: #151423; /* = navy */
  --ink-700: #1F1D32;
  --ink-600: #2C2A47;
  --ink-500: #4A4870;
  --ink-400: #6B6A8C;
  --ink-300: #A9A8BF;
  --ink-200: #D6D5E2;
  --ink-100: #EDECF2;
  --ink-50:  #F7F6FB;
  --paper:   #FFFFFF;
  --ivory:   #FFF9EA;

  /* ---------- Semantic — light theme (marketing pages) ---------- */
  --bg:           var(--paper);
  --bg-muted:     var(--ink-50);
  --surface:      var(--paper);
  --surface-2:    var(--ink-50);
  --border:       var(--ink-200);
  --border-strong:var(--ink-300);

  --fg:           var(--ink-800);
  --fg-1:         var(--ink-800);  /* primary text */
  --fg-2:         var(--ink-500);  /* secondary text */
  --fg-3:         var(--ink-400);  /* tertiary / meta */
  --fg-inverse:   var(--paper);

  --accent:       var(--instnt-yellow);   /* single conversion accent */
  --accent-fg:    var(--instnt-navy);     /* text on yellow */
  --link:         var(--instnt-blue);
  --link-hover:   var(--instnt-purple);

  /* ---------- Status ---------- */
  --success: #1F8A5B;
  --warning: #FFC200;
  --danger:  #F0006C;
  --info:    #100BFE;

  /* ---------- Gradients (the brand's visual signature) ---------- */
  /* The bolt itself runs purple → blue → pink → yellow (matches the
     standalone thunderbolt mark). Peach is reserved as a warm accent. */
  --bolt-gradient: linear-gradient(
    180deg,
    #7507EE 0%,
    #0400D9 38%,
    #F0006C 72%,
    #FFC200 100%
  ); /* @kind color */
  --bolt-gradient-horizontal: linear-gradient(
    90deg,
    #7507EE 0%,
    #0400D9 33%,
    #F0006C 70%,
    #FFC200 100%
  ); /* @kind color */
  --signal-gradient: linear-gradient(135deg, #0400D9 0%, #100BFE 50%, #8885FF 100%); /* @kind color */
  --spark-gradient: radial-gradient(circle at 50% 30%, #FFC200 0%, #FF7A58 60%, transparent 100%); /* @kind color */

  /* ---------- Type scale ---------- */
  --font-sans: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;

  /* Modular scale (1.25) anchored at 16px */
  --fs-12: 0.75rem;
  --fs-14: 0.875rem;
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-20: 1.25rem;
  --fs-24: 1.5rem;
  --fs-30: 1.875rem;
  --fs-36: 2.25rem;
  --fs-48: 3rem;
  --fs-60: 3.75rem;
  --fs-72: 4.5rem;
  --fs-96: 6rem;

  --lh-tight:   1.05; /* @kind font */
  --lh-snug:    1.2;  /* @kind font */
  --lh-normal:  1.4;  /* @kind font */
  --lh-relaxed: 1.6;  /* @kind font */

  --tracking-tight:  -0.02em; /* @kind font */
  --tracking-normal: 0;       /* @kind font */
  --tracking-wide:   0.04em;  /* @kind font */
  --tracking-caps:   0.12em;  /* @kind font */

  /* ---------- Radius ---------- */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-xl: 24px;
  --r-2xl: 32px;
  --r-pill: 9999px;

  /* ---------- Spacing (4-pt grid) ---------- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;
  --s-20: 80px;
  --s-24: 96px;
  --s-32: 128px;

  /* ---------- Elevation ---------- */
  --shadow-xs: 0 1px 2px rgba(21,20,35,0.06);
  --shadow-sm: 0 2px 4px rgba(21,20,35,0.06), 0 1px 2px rgba(21,20,35,0.04);
  --shadow-md: 0 8px 24px rgba(21,20,35,0.08), 0 2px 6px rgba(21,20,35,0.04);
  --shadow-lg: 0 20px 48px rgba(21,20,35,0.12), 0 4px 12px rgba(21,20,35,0.06);
  --shadow-xl: 0 32px 80px rgba(21,20,35,0.18);
  --shadow-glow-yellow: 0 0 32px rgba(255,194,0,0.45);
  --shadow-glow-blue:   0 0 32px rgba(16,11,254,0.45);

  /* ---------- Glass surface (dark mode hero) ---------- */
  --glass-bg: rgba(21,20,35,0.55);      /* @kind color */
  --glass-border: rgba(255,249,234,0.10); /* @kind color */
  --glass-blur: blur(20px); /* @kind other */

  /* ---------- Motion ---------- */
  --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-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* @kind other */
  --dur-fast: 140ms;      /* @kind other */
  --dur-base: 220ms;      /* @kind other */
  --dur-slow: 420ms;      /* @kind other */
  --dur-cinematic: 800ms; /* @kind other */
}

/* ---------- Dark theme (site canvas — B3 Synaptic) ---------- */
[data-theme="dark"], .theme-dark {
  --bg:        var(--instnt-navy);
  --bg-muted:  #1B1A2E;
  --surface:   rgba(21,20,35,0.55);
  --surface-2: rgba(255,249,234,0.04);
  --border:        rgba(255,249,234,0.12);
  --border-strong: rgba(255,249,234,0.24);
  --fg:        var(--instnt-ivory);
  --fg-1:      var(--instnt-ivory);
  --fg-2:      rgba(255,249,234,0.72);
  --fg-3:      rgba(255,249,234,0.48);
  --fg-inverse:var(--instnt-navy);
  --link:      var(--instnt-periwinkle);
  --link-hover:var(--instnt-yellow);
}

/* ============================================================
   Semantic typography
   ============================================================ */
.t-display, h1.display {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(var(--fs-48), 6vw, var(--fs-96));
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}

.t-h1, h1 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(var(--fs-36), 4vw, var(--fs-60));
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}

.t-h2, h2 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: clamp(var(--fs-30), 3vw, var(--fs-48));
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}

.t-h3, h3 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-24);
  line-height: var(--lh-snug);
  letter-spacing: -0.01em;
  color: var(--fg-1);
}

.t-h4, h4 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-20);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}

.t-body, p {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-16);
  line-height: var(--lh-relaxed);
  color: var(--fg-1);
}

.t-body-lg {
  font-size: var(--fs-18);
  line-height: var(--lh-relaxed);
  color: var(--fg-2);
}

.t-small, small {
  font-size: var(--fs-14);
  line-height: var(--lh-normal);
  color: var(--fg-2);
}

.t-eyebrow {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-12);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--fg-2);
}

.t-mono, code, pre {
  font-family: var(--font-mono);
  font-size: var(--fs-14);
  color: var(--fg-1);
}

/* Gradient text — for hero key phrases */
.t-gradient {
  background: var(--bolt-gradient-horizontal);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

a {
  color: var(--link);
  text-decoration: none;
  transition: color var(--dur-base) var(--ease-out);
}
a:hover { color: var(--link-hover); }


/* ----- site.css ----- */
* { box-sizing: border-box; margin: 0; padding: 0; }

/* Native form controls don't inherit font-family — keep them on the brand
   typeface so buttons/inputs never fall back to Arial. */
button, input, select, textarea { font-family: inherit; }

html, body { font-family: var(--font-sans); }

body {
  background: var(--instnt-navy);
  color: var(--instnt-ivory);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

#app { position: relative; z-index: 1; }

.synaptic-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;
  pointer-events: none;
}

.shell { max-width: 1200px; margin: 0 auto; padding: 0 32px; }

/* ============================================================
   Header — fixed glass top nav
   ============================================================ */
.site-header {
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 32px);
  max-width: 1180px;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px 12px 20px;
  background: rgba(21,20,35,0.65);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255,249,234,0.10);
  border-radius: 9999px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.32);
}
.site-header .logo { display: flex; align-items: center; gap: 8px; }
.site-header .logo img { height: 24px; width: auto; }
.site-header nav { display: flex; align-items: center; gap: 4px; }
.site-header nav a {
  color: rgba(255,249,234,0.78);
  font-size: 14px;
  font-weight: 500;
  padding: 8px 14px;
  border-radius: 9999px;
  transition: all 220ms var(--ease-out);
}
.site-header nav a:hover { color: var(--instnt-ivory); background: rgba(255,249,234,0.06); }

/* ============================================================
   Buttons
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 15px;
  padding: 13px 22px;
  border-radius: 12px;
  border: 0;
  cursor: pointer;
  transition: transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
  text-decoration: none;
  white-space: nowrap;
}
.site-header nav a.active { color: var(--instnt-yellow); }
.btn-primary {
  background: var(--instnt-yellow);
  color: var(--instnt-navy);
  box-shadow: 0 0 0 rgba(255,194,0,0);
}
.btn-primary:hover {
  background: #FFCB1F;
  transform: translateY(-1px);
  box-shadow: 0 12px 32px rgba(255,194,0,0.35);
  color: var(--instnt-navy);
}
.btn-primary:active { transform: translateY(0); }
.btn-secondary {
  background: rgba(255,249,234,0.06);
  color: var(--instnt-ivory);
  border: 1px solid rgba(255,249,234,0.18);
  backdrop-filter: blur(12px);
}
.btn-secondary:hover { background: rgba(255,249,234,0.12); border-color: rgba(255,249,234,0.32); color: var(--instnt-ivory); }
.btn-ghost-dark {
  background: transparent;
  color: var(--instnt-navy);
  border: 1.5px solid var(--instnt-navy);
}
.btn-ghost-dark:hover { background: var(--instnt-navy); color: var(--instnt-ivory); }
.btn-sm { padding: 9px 16px; font-size: 13px; }

/* ============================================================
   Eyebrow + status dot
   ============================================================ */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,249,234,0.7);
}
.eyebrow.on-light { color: var(--ink-500); }
.eyebrow .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--instnt-yellow);
  box-shadow: 0 0 12px var(--instnt-yellow);
  animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(1.4); }
}

/* ============================================================
   Hero
   ============================================================ */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: 140px 0 100px;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 56px;
  align-items: center;
}
.hero h1 {
  font-size: clamp(48px, 6.5vw, 88px);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.0;
  color: var(--instnt-ivory);
  margin: 20px 0 24px;
}
.hero h1 .grad {
  background: linear-gradient(90deg, #8885FF 0%, #100BFE 30%, #F0006C 70%, #FFC200 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero p.lead {
  font-size: 19px;
  line-height: 1.6;
  color: rgba(255,249,234,0.72);
  max-width: 540px;
  margin-bottom: 32px;
}
.hero .cta-row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }

.decision-card {
  background: rgba(21,20,35,0.65);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255,194,0,0.45);
  border-radius: 24px;
  padding: 24px;
  box-shadow: 0 32px 80px rgba(0,0,0,0.5), 0 0 24px rgba(255,194,0,0.06);
  color: var(--instnt-ivory);
}
.decision-card .dc-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255,249,234,0.08);
}
.decision-card .dc-title { font-size: 13px; font-weight: 600; color: rgba(255,249,234,0.7); letter-spacing: 0.06em; text-transform: uppercase; }
.decision-card .dc-rows { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; }
.decision-card .dc-row { display: flex; justify-content: space-between; align-items: center; font-size: 14px; }
.decision-card .dc-row .k { color: rgba(255,249,234,0.6); }
.decision-card .dc-row .v { font-weight: 500; }
.decision-card .dc-signals {
  display: flex; gap: 4px; height: 28px; margin-bottom: 14px;
  align-items: end;
}
.decision-card .dc-signals span {
  flex: 1;
  background: linear-gradient(180deg, #FFE07A, #FFC200);
  border-radius: 2px;
  transition: height 300ms var(--ease-out);
}
.decision-card .dc-scope {
  display: block;
  width: 100%;
  height: 128px;
  margin-bottom: 14px;
  border-radius: 8px;
  background: rgba(8, 8, 16, 0.55);
  box-shadow: inset 0 0 0 1px rgba(255, 249, 234, 0.06);
}
.decision-card .dc-verdict {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px;
  background: rgba(255,194,0,0.12);
  border: 1px solid rgba(255,194,0,0.4);
  border-radius: 12px;
  font-weight: 600;
  font-size: 14px;
  color: #FFC83D;
}
.decision-card .dc-verdict-id {
  margin-left: auto;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: -0.01em;
  opacity: 0.62;
  font-variant-numeric: tabular-nums;
}
.decision-card .dc-verdict-time {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: -0.01em;
  opacity: 0.62;
  font-variant-numeric: tabular-nums;
}
.decision-card .dc-verdict.fraud {
  background: rgba(240,0,108,0.14);
  border-color: rgba(240,0,108,0.5);
  color: #FF3D85;
}
.decision-card .dc-verdict.review {
  background: rgba(255,194,0,0.10);
  border-color: rgba(255,194,0,0.4);
  color: #FFDD66;
}
.decision-card .dc-time {
  margin-top: 12px;
  font-size: 12px;
  color: rgba(255,249,234,0.45);
  font-family: var(--font-mono);
}

.scroll-cue {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255,249,234,0.5);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.scroll-cue .line { width: 1px; height: 28px; background: linear-gradient(180deg, rgba(255,249,234,0.5), transparent); animation: scroll-line 2s ease-in-out infinite; }
@keyframes scroll-line {
  0% { transform: scaleY(0.2); transform-origin: top; }
  50% { transform: scaleY(1); transform-origin: top; }
  51% { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0.2); transform-origin: bottom; }
}

/* ============================================================
   Logo strip
   ============================================================ */
.logostrip {
  padding: 40px 0;
  border-top: 1px solid rgba(255,249,234,0.08);
  border-bottom: 1px solid rgba(255,249,234,0.08);
}
.logostrip-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}
.logostrip .label {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,249,234,0.5);
  font-weight: 600;
}
.logostrip .marks {
  display: flex; gap: 36px; align-items: center; flex-wrap: wrap;
  color: rgba(255,249,234,0.55);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.01em;
}
.logostrip .marks span { font-style: italic; }

/* ============================================================
   Light section (Why Instnt, How it works)
   ============================================================ */
.light-section {
  background: var(--instnt-ivory);
  color: var(--instnt-navy);
  padding: 120px 0;
  position: relative;
  z-index: 2;
}
.light-section h2 {
  font-size: clamp(32px, 4.2vw, 56px);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.05;
  color: var(--instnt-navy);
  max-width: 800px;
  margin: 16px 0 24px;
}
.light-section .section-lead {
  font-size: 19px;
  line-height: 1.55;
  color: var(--ink-500);
  max-width: 640px;
  margin-bottom: 56px;
}

.advantage-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
.advantage-card {
  background: #fff;
  border: 1px solid var(--ink-200);
  border-radius: 18px;
  padding: 28px;
  transition: all 220ms var(--ease-out);
}
.advantage-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 48px rgba(21,20,35,0.10);
  border-color: var(--ink-300);
}
.advantage-card .icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: var(--instnt-navy);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 20px;
}
.advantage-card .icon i {
  display: block;
  width: 22px; height: 22px;
  background: var(--instnt-yellow);
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
}
.advantage-card h3 {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.015em;
  margin-bottom: 8px;
  color: var(--instnt-navy);
}
.advantage-card p {
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-500);
}

/* ============================================================
   Dark "Synaptic" sections (transparent, lets canvas show)
   ============================================================ */
.dark-section {
  padding: 120px 0;
  position: relative;
  z-index: 2;
}
.dark-section h2 {
  font-size: clamp(32px, 4.2vw, 56px);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.05;
  color: var(--instnt-ivory);
  max-width: 800px;
  margin: 16px 0 24px;
}
.dark-section .section-lead {
  font-size: 19px;
  line-height: 1.55;
  color: rgba(255,249,234,0.7);
  max-width: 640px;
  margin-bottom: 56px;
}

/* ============================================================
   Cinematic moment
   ============================================================ */
.cinematic {
  padding: 160px 0;
  position: relative;
  z-index: 2;
  text-align: center;
}
.cinematic .big-figure {
  font-size: clamp(120px, 18vw, 280px);
  font-weight: 800;
  letter-spacing: -0.06em;
  line-height: 0.85;
  color: var(--instnt-yellow);
  margin-bottom: 24px;
}
.cinematic .big-figure .pre { color: rgba(255,249,234,0.55); font-weight: 500; }
.cinematic h2 {
  font-size: clamp(36px, 5vw, 64px);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.05;
  color: var(--instnt-ivory);
  margin-bottom: 16px;
}
.cinematic p {
  font-size: 19px;
  color: rgba(255,249,234,0.7);
  max-width: 640px;
  margin: 0 auto 36px;
  line-height: 1.5;
}

/* ============================================================
   ROI Estimator
   ============================================================ */
.roi {
  background: rgba(21,20,35,0.65);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255,249,234,0.12);
  border-radius: 24px;
  padding: 40px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}
.roi h3 {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 12px;
  color: var(--instnt-ivory);
}
.roi p { font-size: 15px; color: rgba(255,249,234,0.7); line-height: 1.5; margin-bottom: 24px; }
.roi .slider-label {
  font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em;
  color: rgba(255,249,234,0.6); margin-bottom: 8px;
}
.roi .slider-val {
  font-size: 32px; font-weight: 700; color: var(--instnt-ivory); margin-bottom: 12px;
  font-variant-numeric: tabular-nums;
}
.roi input[type="range"] {
  width: 100%;
  height: 6px;
  appearance: none;
  background: linear-gradient(90deg, var(--instnt-electric), var(--instnt-periwinkle));
  border-radius: 9999px;
  outline: none;
}
.roi input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  width: 24px; height: 24px;
  background: var(--instnt-yellow);
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 0 16px rgba(255,194,0,0.5);
}
.roi-out {
  text-align: left;
}
.roi-out .lbl { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; color: var(--instnt-yellow); margin-bottom: 8px; }
.roi-out .num {
  font-size: clamp(48px, 7vw, 88px);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 0.95;
  color: var(--instnt-ivory);
  font-variant-numeric: tabular-nums;
  margin-bottom: 12px;
}
.roi-out .num .currency { color: var(--instnt-yellow); }
.roi-out .desc { font-size: 15px; color: rgba(255,249,234,0.7); line-height: 1.5; margin-bottom: 20px; }

/* ============================================================
   How it works
   ============================================================ */
.steps {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
}
.step {
  background: #fff;
  border: 1px solid var(--ink-200);
  border-radius: 18px;
  padding: 28px;
  position: relative;
}
.step .num {
  font-size: 13px; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--instnt-blue);
  margin-bottom: 14px;
}
.step h4 {
  font-size: 20px; font-weight: 600; letter-spacing: -0.01em;
  margin-bottom: 8px; color: var(--instnt-navy);
}
.step p {
  font-size: 14px; line-height: 1.55; color: var(--ink-500);
}

/* ============================================================
   Testimonial
   ============================================================ */
.testimonial {
  background: rgba(21,20,35,0.65);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255,249,234,0.12);
  border-radius: 24px;
  padding: 56px;
  text-align: center;
  max-width: 880px;
  margin: 0 auto;
}
.testimonial blockquote {
  font-size: clamp(24px, 3vw, 36px);
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.3;
  color: var(--instnt-ivory);
  margin-bottom: 28px;
}
.testimonial .author { color: rgba(255,249,234,0.7); font-size: 14px; }
.testimonial .author b { color: var(--instnt-ivory); font-weight: 600; }

/* ============================================================
   Footer
   ============================================================ */
.site-footer {
  border-top: 1px solid rgba(255,249,234,0.08);
  padding: 64px 0 32px;
  position: relative;
  z-index: 2;
  background: rgba(11,10,20,0.6);
  backdrop-filter: blur(10px);
}
.site-footer .ft-top {
  display: grid;
  grid-template-columns: 1.5fr repeat(3, 1fr);
  gap: 40px;
  margin-bottom: 48px;
}
.site-footer .ft-col h5 {
  font-size: 12px; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: rgba(255,249,234,0.5);
  margin-bottom: 16px;
}
.site-footer .ft-col a {
  display: block;
  color: rgba(255,249,234,0.78);
  font-size: 14px;
  padding: 6px 0;
  transition: color 220ms var(--ease-out);
}
.site-footer .ft-col a:hover { color: var(--instnt-yellow); }
.site-footer .ft-logo img { height: 28px; margin-bottom: 16px; }
.site-footer .ft-logo p { font-size: 14px; color: rgba(255,249,234,0.6); line-height: 1.5; max-width: 320px; }
.site-footer .ft-bottom {
  border-top: 1px solid rgba(255,249,234,0.06);
  padding-top: 24px;
  display: flex; justify-content: space-between; align-items: center;
  font-size: 12px;
  color: rgba(255,249,234,0.5);
}
.site-footer .ft-bottom .legal { max-width: 600px; line-height: 1.5; }

/* ============================================================
   Modal (lead form)
   ============================================================ */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(11,10,20,0.7);
  backdrop-filter: blur(12px);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.modal {
  background: var(--instnt-navy);
  border: 1px solid rgba(255,249,234,0.12);
  border-radius: 24px;
  padding: 40px;
  width: 100%; max-width: 520px;
  color: var(--instnt-ivory);
  box-shadow: 0 40px 100px rgba(0,0,0,0.6);
}
.modal .x {
  float: right; background: transparent; border: 0;
  color: rgba(255,249,234,0.6); font-size: 22px; cursor: pointer;
  width: 32px; height: 32px; border-radius: 50%;
}
.modal .x:hover { color: var(--instnt-ivory); background: rgba(255,249,234,0.06); }
.modal h3 {
  font-size: 26px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1;
  margin-bottom: 8px;
}
.modal p { font-size: 14px; color: rgba(255,249,234,0.6); margin-bottom: 24px; }
.modal label { display: block; font-size: 13px; font-weight: 500; margin-bottom: 6px; color: rgba(255,249,234,0.85); }
.modal input, .modal select {
  width: 100%;
  font-family: var(--font-sans);
  font-size: 15px;
  padding: 12px 14px;
  margin-bottom: 14px;
  border-radius: 12px;
  border: 1px solid rgba(255,249,234,0.16);
  background: rgba(255,249,234,0.04);
  color: var(--instnt-ivory);
  outline: none;
}
.modal input:focus, .modal select:focus {
  border-color: var(--instnt-periwinkle);
  box-shadow: 0 0 0 4px rgba(136,133,255,0.18);
}
.modal .btn { width: 100%; justify-content: center; margin-top: 8px; }
.success {
  text-align: center;
  padding: 28px 0;
}
.success .check {
  width: 64px; height: 64px; border-radius: 50%;
  background: rgba(31,138,91,0.18);
  border: 1px solid rgba(31,138,91,0.5);
  color: #6DE0A8;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 18px;
  font-size: 32px;
}

/* ============================================================
   Subpages — routing + shared page layout
   ============================================================ */
.page { display: none; }
.page.active { display: block; }

.phead {
  padding: 168px 0 56px;
  position: relative;
  z-index: 2;
}
.phead .eyebrow { margin-bottom: 18px; }
.phead h1 {
  font-size: clamp(40px, 5.5vw, 76px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.02;
  color: var(--instnt-ivory);
  margin-bottom: 16px;
  max-width: 16ch;
}
.phead h1 .grad {
  background: linear-gradient(90deg, #8885FF 0%, #100BFE 30%, #F0006C 70%, #FFC200 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.phead p {
  font-size: 19px;
  line-height: 1.55;
  color: rgba(255,249,234,0.72);
  max-width: 60ch;
}

/* three / two-up glass card grids */
.card-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.card-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.glass-card {
  background: rgba(21,20,35,0.55);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255,249,234,0.10);
  border-radius: 18px;
  padding: 28px;
  transition: transform 220ms var(--ease-out), border-color 220ms var(--ease-out), box-shadow 220ms var(--ease-out);
}
.glass-card:hover {
  transform: translateY(-2px);
  border-color: rgba(255,249,234,0.24);
  box-shadow: 0 24px 60px rgba(0,0,0,0.4);
}
.glass-card .ico {
  width: 44px; height: 44px; border-radius: 12px;
  background: rgba(136,133,255,0.12);
  border: 1px solid rgba(255,249,234,0.10);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 18px;
}
.glass-card .ico i {
  display: block; width: 22px; height: 22px; background: var(--instnt-periwinkle);
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
}
.glass-card.gold .ico { background: rgba(255,194,0,0.12); }
.glass-card.gold .ico i { background: var(--instnt-yellow); }
.glass-card h3 {
  font-size: 20px; font-weight: 600; letter-spacing: -0.015em;
  color: var(--instnt-ivory); margin-bottom: 8px;
}
.glass-card p { font-size: 14.5px; line-height: 1.55; color: rgba(255,249,234,0.7); }
.glass-card .tag {
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--instnt-periwinkle); margin-bottom: 12px;
}

/* coverage lifecycle / timeline */
.lifecycle { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 36px; align-items: center; }
.timeline {
  background: rgba(21,20,35,0.55); backdrop-filter: blur(20px);
  border: 1px solid rgba(255,249,234,0.10); border-radius: 18px;
  padding: 28px; display: flex; flex-direction: column; gap: 18px;
}
.timeline .tl { display: flex; gap: 16px; align-items: flex-start; }
.timeline .pip {
  flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%;
  background: rgba(255,194,0,0.10); border: 1px solid rgba(255,194,0,0.4);
  color: var(--instnt-yellow); font-weight: 700; font-size: 13px;
  display: flex; align-items: center; justify-content: center;
}
.timeline b { font-weight: 600; color: var(--instnt-ivory); font-size: 16px; }
.timeline span { color: rgba(255,249,234,0.65); font-size: 14.5px; display: block; margin-top: 3px; line-height: 1.5; }

/* outcome stat cards */
.outcome { text-align: center; padding: 28px 20px; }
.outcome .big {
  font-size: 46px; font-weight: 800; letter-spacing: -0.03em; line-height: 1;
  color: var(--instnt-yellow); margin-bottom: 8px; font-variant-numeric: tabular-nums;
}
.outcome .sm { font-size: 13px; color: rgba(255,249,234,0.65); letter-spacing: 0.04em; }

/* leadership bios */
.bio { text-align: center; padding: 24px 18px; }
.bio .av {
  width: 64px; height: 64px; border-radius: 50%;
  background: linear-gradient(135deg, var(--instnt-periwinkle), var(--instnt-electric));
  margin: 0 auto 14px; color: var(--instnt-ivory);
  display: flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: 21px; letter-spacing: -0.02em;
}
.bio.gold .av { background: linear-gradient(135deg, var(--instnt-yellow), #FFE07A); color: var(--instnt-navy); }
.bio b { font-weight: 600; color: var(--instnt-ivory); font-size: 16px; letter-spacing: -0.01em; display: block; margin-bottom: 4px; }
.bio .role { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,249,234,0.5); font-weight: 600; }
.bio .bio-text { font-size: 13.5px; line-height: 1.5; color: rgba(255,249,234,0.62); margin-top: 12px; }

/* contact page */
.contact-grid { display: grid; grid-template-columns: 1.3fr 0.9fr; gap: 24px; }
.lead-form {
  background: rgba(21,20,35,0.55); backdrop-filter: blur(20px);
  border: 1px solid rgba(255,249,234,0.10); border-radius: 24px; padding: 36px;
}
.lead-form .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.lead-form .field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.lead-form label { font-size: 13px; font-weight: 500; color: rgba(255,249,234,0.85); }
.lead-form input, .lead-form select, .lead-form textarea {
  font-family: var(--font-sans); font-size: 15px; color: var(--instnt-ivory);
  background: rgba(255,249,234,0.04); border: 1px solid rgba(255,249,234,0.16);
  border-radius: 12px; padding: 12px 14px; outline: none;
}
.lead-form input:focus, .lead-form select:focus, .lead-form textarea:focus {
  border-color: var(--instnt-periwinkle); box-shadow: 0 0 0 4px rgba(136,133,255,0.18);
}
.lead-form textarea { resize: vertical; min-height: 96px; }
.lead-form .btn { width: 100%; justify-content: center; margin-top: 6px; }
.lead-form .ok {
  margin-top: 14px; padding: 14px; border-radius: 12px;
  background: rgba(31,138,91,0.14); border: 1px solid rgba(31,138,91,0.4);
  color: #6DE0A8; font-weight: 500; font-size: 14.5px; display: none;
}
.lead-form .ok.show { display: block; }
.contact-side {
  background: rgba(21,20,35,0.55); backdrop-filter: blur(20px);
  border: 1px solid rgba(255,249,234,0.10); border-radius: 24px; padding: 30px;
}
.contact-side h3 { font-size: 18px; font-weight: 600; color: var(--instnt-ivory); margin-bottom: 16px; }
.contact-side ul { list-style: none; display: flex; flex-direction: column; gap: 12px; margin-bottom: 22px; }
.contact-side li { font-size: 14.5px; color: rgba(255,249,234,0.72); display: flex; gap: 10px; line-height: 1.5; }
.contact-side li::before { content: '✦'; color: var(--instnt-yellow); font-size: 12px; margin-top: 2px; }
.contact-side .direct { padding-top: 18px; border-top: 1px solid rgba(255,249,234,0.10); font-size: 14px; color: rgba(255,249,234,0.7); line-height: 1.7; }
.contact-side .direct b { display: block; color: var(--instnt-ivory); font-weight: 600; margin-bottom: 6px; }

/* persona split (who) */
.persona { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

/* section-level intro within a light/dark section */
.section-head { max-width: 820px; margin-bottom: 48px; }

/* clickable card cursor */
.glass-card[role="button"] { cursor: pointer; }

/* Who It's For — trust strip */
.who-trust {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 8px 14px;
  margin-top: 24px;
  font-size: 13px; font-weight: 500; letter-spacing: 0.02em;
  color: rgba(255,249,234,0.55);
}
.who-trust-sep { color: rgba(255,194,0,0.5); }

/* Who It's For — FAQ accordion */
.who-faq-list { max-width: 880px; }
.who-faq { border-bottom: 1px solid rgba(255,249,234,0.1); }
.who-faq:first-child { border-top: 1px solid rgba(255,249,234,0.1); }
.who-faq-q {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  gap: 16px; text-align: left; cursor: pointer;
  background: none; border: 0; padding: 22px 0;
  font-family: var(--font-sans); font-size: 17px; font-weight: 600;
  letter-spacing: -0.01em; color: var(--instnt-ivory);
  transition: color 0.18s var(--ease-out);
}
.who-faq-q:hover { color: var(--instnt-yellow); }
.who-faq-icon {
  flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; font-weight: 500;
  color: var(--instnt-yellow);
  background: rgba(255,194,0,0.1); border: 1px solid rgba(255,194,0,0.3);
}
.who-faq-a {
  font-size: 15px; line-height: 1.6; color: rgba(255,249,234,0.7);
  padding: 0 44px 24px 0; margin: 0;
  animation: who-faq-open 0.3s var(--ease-out);
}
@keyframes who-faq-open { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* split-flap inline display — rotates the insured fraud type in the hero copy */
/* PhraseCycler — gold scramble/decode text in the hero lead. */
.phrase-cycler {
  display: block;
  white-space: nowrap;
  min-height: 1.6em;
}
.pc-text {
  font-family: var(--font-sans);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--instnt-ivory);
}
.pc-caret {
  display: inline-block;
  width: 0.5em;
  height: 1.02em;
  margin-left: 0.12em;
  vertical-align: -0.16em;
  background: var(--instnt-yellow);
  box-shadow: 0 0 10px rgba(255, 194, 0, 0.7);
  animation: pc-blink 1.05s steps(1) infinite;
}
@keyframes pc-blink {
  0%, 48% { opacity: 1; }
  49%, 100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .pc-caret { animation: none; opacity: 0.9; }
}

/* scroll reveal — only arms once JS adds .reveal-armed to <body> so that
   without JS (or print) content stays visible. */
.reveal-armed .reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out); }
.reveal-armed .reveal.in { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .reveal-armed .reveal { opacity: 1; transform: none; transition: none; }
}

/* ============================================================
   Assessment Journey — multi-step quoting flow
   ============================================================ */
.aj-backdrop {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(8, 8, 16, 0.72);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  animation: aj-fade 0.25s var(--ease-out);
}
@keyframes aj-fade { from { opacity: 0; } to { opacity: 1; } }
.aj-modal {
  width: 100%; max-width: 600px;
  max-height: calc(100vh - 48px);
  display: flex; flex-direction: column;
  background: rgba(24, 23, 38, 0.96);
  border: 1px solid rgba(255,194,0,0.45);
  border-radius: 22px;
  box-shadow: 0 40px 100px rgba(0,0,0,0.6), 0 0 40px rgba(255,194,0,0.08);
  overflow: hidden;
  animation: aj-rise 0.32s var(--ease-out);
}
.aj-modal.aj-wide { max-width: 860px; }
@keyframes aj-rise { from { transform: translateY(18px) scale(0.98); opacity: 0; } to { transform: none; opacity: 1; } }
.aj-bar { height: 3px; background: rgba(255,249,234,0.08); }
.aj-bar span { display: block; height: 100%; background: var(--instnt-yellow); transition: width 0.4s var(--ease-out); }
.aj-top {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 22px; border-bottom: 1px solid rgba(255,249,234,0.07);
}
.aj-brand { display: flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 600; letter-spacing: 0.04em; color: rgba(255,249,234,0.8); }
.aj-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--instnt-yellow); box-shadow: 0 0 10px var(--instnt-yellow); }
.aj-x { font-size: 26px; line-height: 1; color: rgba(255,249,234,0.5); background: none; border: 0; cursor: pointer; transition: color 0.2s; }
.aj-x:hover { color: var(--instnt-ivory); }
.aj-body { padding: 30px 30px 32px; overflow-y: auto; }
.aj-step { animation: aj-step 0.3s var(--ease-out); }
@keyframes aj-step { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.aj-kicker { font-size: 11.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--instnt-periwinkle); margin-bottom: 12px; }
.aj-kicker-gold { color: var(--instnt-yellow); }
.aj-q { font-size: 23px; font-weight: 700; letter-spacing: -0.02em; color: var(--instnt-ivory); line-height: 1.2; margin-bottom: 8px; }
.aj-sub { font-size: 14.5px; color: rgba(255,249,234,0.62); line-height: 1.5; margin-bottom: 22px; }

.aj-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.aj-tile {
  position: relative; text-align: left;
  display: flex; flex-direction: column; gap: 2px;
  padding: 16px 16px; border-radius: 12px;
  background: rgba(255,249,234,0.04);
  border: 1px solid rgba(255,249,234,0.12);
  color: var(--instnt-ivory); font-size: 15px; font-weight: 600;
  cursor: pointer; transition: border-color 0.18s, background 0.18s, transform 0.18s;
}
.aj-tile:hover { border-color: rgba(255,194,0,0.5); background: rgba(255,194,0,0.06); transform: translateY(-1px); }
.aj-tile em { font-style: normal; font-size: 12px; font-weight: 500; color: rgba(255,249,234,0.5); }
.aj-tile.active { border-color: var(--instnt-yellow); background: rgba(255,194,0,0.12); }
.aj-tick { position: absolute; top: 12px; right: 12px; width: 18px; height: 18px; border-radius: 50%; background: var(--instnt-yellow); color: var(--instnt-navy); font-size: 11px; font-weight: 800; display: flex; align-items: center; justify-content: center; opacity: 0; transform: scale(0.6); transition: 0.18s; }
.aj-tile.active .aj-tick { opacity: 1; transform: scale(1); }

.aj-slider { margin: 8px 0 26px; }
.aj-slider-val { font-size: 40px; font-weight: 800; letter-spacing: -0.03em; color: var(--instnt-yellow); font-variant-numeric: tabular-nums; margin-bottom: 16px; }
.aj-slider-val span { font-size: 16px; font-weight: 600; color: rgba(255,249,234,0.45); margin-left: 4px; }
.aj-slider input[type=range] { width: 100%; accent-color: var(--instnt-yellow); height: 6px; cursor: pointer; }
.aj-slider-scale { display: flex; justify-content: space-between; font-size: 11px; color: rgba(255,249,234,0.45); margin-top: 10px; font-family: var(--font-mono); }

.aj-result-hero { text-align: center; padding: 22px; border-radius: 16px; background: rgba(255,194,0,0.08); border: 1px solid rgba(255,194,0,0.3); margin-bottom: 14px; }
.aj-result-lbl { font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,249,234,0.6); margin-bottom: 8px; }
.aj-result-num { font-size: 52px; font-weight: 800; letter-spacing: -0.03em; color: var(--instnt-yellow); line-height: 1; font-variant-numeric: tabular-nums; }
.aj-result-num span { font-size: 18px; font-weight: 600; color: rgba(255,249,234,0.45); margin-left: 4px; }
.aj-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 16px; }
.aj-metric { padding: 14px; border-radius: 12px; background: rgba(255,249,234,0.04); border: 1px solid rgba(255,249,234,0.1); text-align: center; }
.aj-metric .m-lbl { font-size: 11px; color: rgba(255,249,234,0.55); line-height: 1.3; margin-bottom: 6px; }
.aj-metric .m-val { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; color: var(--instnt-ivory); font-variant-numeric: tabular-nums; }
.aj-metric .m-val.gold { color: var(--instnt-yellow); }
.aj-fine { font-size: 11.5px; line-height: 1.5; color: rgba(255,249,234,0.42); margin-bottom: 22px; }

/* calculator step — editable inputs + live results */
.aj-calc { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 22px; }
.aj-calc-inputs { display: flex; flex-direction: column; gap: 16px; }
.aj-cfield { display: flex; flex-direction: column; gap: 7px; }
.aj-cl { font-size: 12px; font-weight: 600; color: rgba(255,249,234,0.72); display: flex; justify-content: space-between; align-items: baseline; }
.aj-cl b { font-family: var(--font-mono); font-weight: 600; font-size: 13px; color: var(--instnt-yellow); font-variant-numeric: tabular-nums; }
.aj-cl em { font-style: normal; font-weight: 400; color: rgba(255,249,234,0.4); }
.aj-crow { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.aj-cfield select,
.aj-affix input {
  width: 100%; font-family: var(--font-sans); font-size: 15px; color: var(--instnt-ivory);
  background: rgba(255,249,234,0.04); border: 1px solid rgba(255,249,234,0.16);
  border-radius: 10px; padding: 10px 12px; outline: none; transition: border-color 0.18s, box-shadow 0.18s;
}
.aj-cfield select { cursor: pointer; }
.aj-cfield select option { background: var(--instnt-navy); color: var(--instnt-ivory); }
.aj-cfield select:focus, .aj-affix input:focus { border-color: var(--instnt-yellow); box-shadow: 0 0 0 4px rgba(255,194,0,0.14); }
.aj-affix { position: relative; }
.aj-affix i { position: absolute; top: 50%; transform: translateY(-50%); left: 12px; font-style: normal; color: rgba(255,249,234,0.5); font-size: 14px; pointer-events: none; }
.aj-affix input { padding-left: 26px; }
.aj-affix-r i { left: auto; right: 12px; }
.aj-affix-r input { padding-left: 12px; padding-right: 28px; }
.aj-cfield input[type=range] { accent-color: var(--instnt-yellow); height: 5px; cursor: pointer; padding: 0; border: 0; background: rgba(255,249,234,0.14); border-radius: 3px; }

.aj-calc-results { display: flex; flex-direction: column; }
.aj-rcards { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.aj-rcard { padding: 14px; border-radius: 12px; background: rgba(255,249,234,0.04); border: 1px solid rgba(255,249,234,0.1); position: relative; }
.aj-rcard.hl { background: rgba(255,194,0,0.08); border-color: rgba(255,194,0,0.28); }
.aj-rl { font-size: 10.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255,249,234,0.55); margin-bottom: 7px; line-height: 1.3; display: flex; align-items: center; gap: 6px; }

/* result tooltip — "how is this calculated" */
.aj-tip-i {
  display: inline-flex; align-items: center; justify-content: center;
  width: 15px; height: 15px; border-radius: 50%; flex-shrink: 0;
  font-family: var(--font-mono); font-size: 9px; font-weight: 700; font-style: italic;
  letter-spacing: 0; text-transform: none;
  color: rgba(255,249,234,0.75); background: rgba(255,249,234,0.1);
  border: 1px solid rgba(255,249,234,0.2);
  cursor: help; transition: background 0.18s, color 0.18s, border-color 0.18s;
}
.aj-rcard.hl .aj-tip-i { color: rgba(255,212,75,0.95); background: rgba(255,194,0,0.14); border-color: rgba(255,194,0,0.4); }
.aj-tip-i:hover, .aj-tip-i:focus { background: var(--instnt-yellow); color: var(--instnt-navy); border-color: var(--instnt-yellow); outline: none; }
.aj-tip {
  position: absolute; bottom: calc(100% + 9px); z-index: 5;
  width: 232px; max-width: 232px;
  padding: 11px 13px; border-radius: 10px;
  background: #0F0E1A; border: 1px solid rgba(255,194,0,0.4);
  box-shadow: 0 16px 40px rgba(0,0,0,0.6);
  font-family: var(--font-sans); font-size: 12px; font-weight: 400; line-height: 1.5;
  letter-spacing: 0; text-transform: none; text-align: left;
  color: rgba(255,249,234,0.82);
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateY(4px);
  transition: opacity 0.18s var(--ease-out), transform 0.18s var(--ease-out), visibility 0.18s;
}
.aj-tip b { color: var(--instnt-yellow); font-weight: 700; font-variant-numeric: tabular-nums; }
.aj-tip::after { content: ''; position: absolute; top: 100%; border: 6px solid transparent; border-top-color: #0F0E1A; }
.aj-tip-i:hover .aj-tip, .aj-tip-i:focus .aj-tip { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; }
/* odd cards (left column) anchor the tooltip to the left edge; even to the right */
.aj-rcards > .aj-rcard:nth-child(odd) .aj-tip { left: 0; }
.aj-rcards > .aj-rcard:nth-child(odd) .aj-tip::after { left: 18px; }
.aj-rcards > .aj-rcard:nth-child(even) .aj-tip { right: 0; }
.aj-rcards > .aj-rcard:nth-child(even) .aj-tip::after { right: 18px; }
.aj-rcard.hl .aj-rl { color: rgba(255,212,75,0.85); }
.aj-rv { font-size: 21px; font-weight: 700; letter-spacing: -0.02em; color: var(--instnt-ivory); font-variant-numeric: tabular-nums; line-height: 1.1; }
.aj-rcard.hl .aj-rv { color: var(--instnt-yellow); }
.aj-calc-results .aj-fine { margin-top: 14px; margin-bottom: 0; }

/* consents */
.aj-consents { display: flex; flex-direction: column; gap: 12px; margin-bottom: 22px; }
.aj-consent { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; line-height: 1.45; color: rgba(255,249,234,0.7); cursor: pointer; }
.aj-consent input { margin-top: 2px; width: 16px; height: 16px; accent-color: var(--instnt-yellow); flex-shrink: 0; cursor: pointer; }
.aj-consent a { color: var(--instnt-yellow); text-decoration: underline; }
.aj-consent.aj-err span { color: #FF8FB0; }
.aj-fields label.aj-err input { border-color: rgba(240,0,108,0.6); }

@media (max-width: 720px) {
  .aj-calc { grid-template-columns: 1fr; }
}

.aj-fields { display: flex; flex-direction: column; gap: 12px; margin-bottom: 22px; }
.aj-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.aj-fields label { display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; font-weight: 500; color: rgba(255,249,234,0.75); }
.aj-fields input {
  font-family: var(--font-sans); font-size: 15px; color: var(--instnt-ivory);
  background: rgba(255,249,234,0.04); border: 1px solid rgba(255,249,234,0.16);
  border-radius: 10px; padding: 11px 13px; outline: none; transition: border-color 0.18s, box-shadow 0.18s;
}
.aj-fields input:focus { border-color: var(--instnt-periwinkle); box-shadow: 0 0 0 4px rgba(136,133,255,0.18); }

.aj-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.aj-actions .btn { flex: 1; justify-content: center; }
.aj-back { font-size: 14px; font-weight: 600; color: rgba(255,249,234,0.6); background: none; border: 0; cursor: pointer; padding: 10px 4px; white-space: nowrap; transition: color 0.18s; }
.aj-back:hover { color: var(--instnt-ivory); }

/* qualification step nav — back / dots / next */
.aj-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 26px; padding-top: 18px; border-top: 1px solid rgba(255,249,234,0.08); }
.aj-nav-arrow {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 14px; font-weight: 600; color: rgba(255,249,234,0.72);
  background: rgba(255,249,234,0.04); border: 1px solid rgba(255,249,234,0.14);
  border-radius: 9px; padding: 9px 15px; cursor: pointer; white-space: nowrap;
  transition: color 0.18s, border-color 0.18s, background 0.18s, opacity 0.18s;
}
.aj-nav-arrow:hover:not(:disabled) { color: var(--instnt-ivory); border-color: rgba(255,194,0,0.5); background: rgba(255,194,0,0.06); }
.aj-nav-arrow.next { color: var(--instnt-navy); background: var(--instnt-yellow); border-color: var(--instnt-yellow); }
.aj-nav-arrow.next:hover:not(:disabled) { background: #FFD23D; color: var(--instnt-navy); }
.aj-nav-arrow:disabled { opacity: 0.32; cursor: not-allowed; }
.aj-nav-dots { display: flex; align-items: center; gap: 9px; }
.aj-dot-step {
  width: 9px; height: 9px; border-radius: 50%; padding: 0;
  background: rgba(255,249,234,0.18); border: 1px solid transparent;
  cursor: pointer; transition: background 0.18s, transform 0.18s, border-color 0.18s;
}
.aj-dot-step:hover { background: rgba(255,194,0,0.5); }
.aj-dot-step.done { background: rgba(255,194,0,0.55); }
.aj-dot-step.active { background: var(--instnt-yellow); transform: scale(1.3); box-shadow: 0 0 10px rgba(255,194,0,0.6); }

.aj-done { text-align: center; }
.aj-check { width: 56px; height: 56px; border-radius: 50%; margin: 0 auto 18px; background: rgba(255,194,0,0.14); border: 1px solid rgba(255,194,0,0.4); color: var(--instnt-yellow); font-size: 26px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.aj-done .aj-sub { max-width: 42ch; margin: 0 auto 22px; }
.aj-done .aj-sub strong { color: var(--instnt-yellow); }
.aj-summary { display: flex; flex-direction: column; gap: 8px; padding: 16px; border-radius: 12px; background: rgba(255,249,234,0.04); border: 1px solid rgba(255,249,234,0.1); margin-bottom: 22px; text-align: left; }
.aj-summary > div { display: flex; justify-content: space-between; font-size: 13.5px; }
.aj-summary span { color: rgba(255,249,234,0.55); }
.aj-summary b { color: var(--instnt-ivory); font-weight: 600; }
.aj-summary b.gold { color: var(--instnt-yellow); }
.aj-done .btn { width: 100%; justify-content: center; }

@media (max-width: 540px) {
  .aj-tiles, .aj-metrics, .aj-row2 { grid-template-columns: 1fr; }
  .aj-body { padding: 24px 20px 26px; }
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 880px) {
  .hero-grid { grid-template-columns: 1fr; gap: 32px; }
  .advantage-grid, .steps { grid-template-columns: 1fr; }
  .roi { grid-template-columns: 1fr; padding: 28px; }
  .site-header nav { display: none; }
  .site-footer .ft-top { grid-template-columns: 1fr 1fr; }
  .card-grid-3, .card-grid-2, .persona { grid-template-columns: 1fr; }
  .lifecycle, .contact-grid { grid-template-columns: 1fr; }
}


/* ----- pages-extra.css ----- */
/* ============================================================
   pages-extra.css — styles for the wired-in vertical landing
   pages (Banks, Fintechs), the Who hub, and the ROI calculator.
   Builds only on Instnt design tokens from colors_and_type.css.
   ============================================================ */

/* ---------- Shared: pain / problem cards (dark glass, plain) ---------- */
.problem-grid { display: grid; gap: 14px; margin-top: 8px; }
.problem-card {
  background: rgba(21,20,35,0.55);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255,249,234,0.10);
  border-radius: 18px;
  padding: 26px 30px;
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 20px;
  align-items: start;
  transition: border-color 220ms var(--ease-out), transform 220ms var(--ease-out);
}
.problem-card:hover { border-color: rgba(255,249,234,0.22); transform: translateY(-2px); }
.problem-card .pc-ico {
  width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0;
  background: rgba(240,0,108,0.12);
  border: 1px solid rgba(240,0,108,0.30);
  display: flex; align-items: center; justify-content: center;
}
.problem-card .pc-ico i {
  display: block; width: 22px; height: 22px; background: var(--instnt-pink);
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
}
.problem-card b {
  display: block; color: var(--instnt-ivory);
  font-size: 17px; font-weight: 600; letter-spacing: -0.01em; margin-bottom: 6px;
}
.problem-card p { font-size: 14.5px; line-height: 1.55; color: rgba(255,249,234,0.68); margin: 0; }

/* ---------- FAQ ---------- */
.faq-list { max-width: 820px; }
.faq-item {
  border-top: 1px solid rgba(255,249,234,0.10);
  padding: 0;
}
.faq-item:last-child { border-bottom: 1px solid rgba(255,249,234,0.10); }
.faq-q {
  width: 100%; text-align: left; cursor: pointer;
  background: transparent; border: 0; color: var(--instnt-ivory);
  font-family: var(--font-sans); font-size: 18px; font-weight: 600; letter-spacing: -0.01em;
  padding: 24px 44px 24px 0; position: relative;
  display: block;
}
.faq-q .chev {
  position: absolute; right: 6px; top: 26px;
  width: 16px; height: 16px; transition: transform 220ms var(--ease-out);
  color: var(--instnt-yellow);
}
.faq-item.open .faq-q .chev { transform: rotate(180deg); }
.faq-a {
  max-height: 0; overflow: hidden;
  transition: max-height 320ms var(--ease-out), opacity 220ms var(--ease-out);
  opacity: 0;
}
.faq-item.open .faq-a { max-height: 320px; opacity: 1; }
.faq-a p {
  font-size: 15.5px; line-height: 1.6; color: rgba(255,249,234,0.70);
  padding: 0 48px 26px 0; margin: 0;
}

/* ---------- Who hub: vertical entry cards ---------- */
.vertical-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.vertical-card {
  position: relative; overflow: hidden;
  background: rgba(21,20,35,0.55);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255,249,234,0.10);
  border-radius: 22px; padding: 34px;
  cursor: pointer;
  transition: border-color 220ms var(--ease-out), transform 220ms var(--ease-out), box-shadow 220ms var(--ease-out);
}
.vertical-card:hover { transform: translateY(-3px); border-color: rgba(255,194,0,0.4); box-shadow: 0 28px 64px rgba(0,0,0,0.45); }
.vertical-card .vc-ico {
  width: 50px; height: 50px; border-radius: 14px;
  background: rgba(255,194,0,0.12); border: 1px solid rgba(255,194,0,0.30);
  display: flex; align-items: center; justify-content: center; margin-bottom: 20px;
}
.vertical-card .vc-ico i {
  display: block; width: 26px; height: 26px; background: var(--instnt-yellow);
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
}
.vertical-card h3 { font-size: 24px; font-weight: 700; letter-spacing: -0.02em; color: var(--instnt-ivory); margin-bottom: 10px; }
.vertical-card p { font-size: 15px; line-height: 1.55; color: rgba(255,249,234,0.70); margin-bottom: 20px; }
.vertical-card .vc-link {
  font-size: 14px; font-weight: 600; color: var(--instnt-yellow);
  display: inline-flex; align-items: center; gap: 7px;
  transition: gap 220ms var(--ease-out);
}
.vertical-card:hover .vc-link { gap: 12px; }

/* ---------- ROI Calculator ---------- */
.calc-grid { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: 20px; align-items: start; }
.calc-panel {
  background: rgba(21,20,35,0.60);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255,249,234,0.12);
  border-radius: 24px; padding: 34px;
}
.calc-panel.sticky { position: sticky; top: 96px; }
.calc-panel-title {
  font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(255,249,234,0.6);
  padding-bottom: 16px; margin-bottom: 26px;
  border-bottom: 1px solid rgba(255,249,234,0.10);
}

.calc-field { margin-bottom: 24px; }
.calc-field:last-child { margin-bottom: 0; }
.calc-field > label {
  display: block; font-size: 14.5px; font-weight: 600; color: var(--instnt-ivory); margin-bottom: 4px;
}
.calc-field .hint { font-size: 12.5px; color: rgba(255,249,234,0.50); margin-bottom: 12px; line-height: 1.45; }

.calc-input-wrap { position: relative; }
.calc-input-wrap .affix {
  position: absolute; top: 50%; transform: translateY(-50%);
  color: rgba(255,249,234,0.55); font-size: 15px; pointer-events: none; font-variant-numeric: tabular-nums;
}
.calc-input-wrap .affix.pre { left: 16px; }
.calc-input-wrap .affix.suf { right: 16px; }
.calc-input-wrap.has-pre input { padding-left: 32px; }
.calc-input-wrap.has-suf input { padding-right: 38px; }

.calc-field input[type="number"],
.calc-field select {
  width: 100%; font-family: var(--font-sans); font-size: 15px; color: var(--instnt-ivory);
  background: rgba(255,249,234,0.05); border: 1px solid rgba(255,249,234,0.16);
  border-radius: 12px; padding: 13px 16px; outline: none;
  transition: border-color 200ms var(--ease-out), box-shadow 200ms var(--ease-out);
  -moz-appearance: textfield; appearance: textfield;
}
.calc-field input[type="number"]::-webkit-inner-spin-button,
.calc-field input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.calc-field input:focus, .calc-field select:focus {
  border-color: var(--instnt-periwinkle); box-shadow: 0 0 0 4px rgba(136,133,255,0.18);
}
.calc-field select { appearance: none; cursor: pointer; background-image:
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23FFC200' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center; padding-right: 40px; }
.calc-field select option { background: var(--instnt-navy); color: var(--instnt-ivory); }

.calc-slider-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.calc-slider-val { font-size: 26px; font-weight: 700; color: var(--instnt-yellow); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.calc-slider-range { font-size: 12px; color: rgba(255,249,234,0.45); font-family: var(--font-mono); }
.calc-field input[type="range"] {
  width: 100%; height: 6px; appearance: none; -webkit-appearance: none;
  border-radius: 9999px; outline: none; cursor: pointer; padding: 0; border: 0;
}
.calc-field input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%;
  background: var(--instnt-yellow); cursor: pointer; box-shadow: 0 0 16px rgba(255,194,0,0.5);
  border: 3px solid var(--instnt-navy);
}
.calc-field input[type="range"]::-moz-range-thumb {
  width: 20px; height: 20px; border-radius: 50%; background: var(--instnt-yellow);
  cursor: pointer; border: 3px solid var(--instnt-navy);
}

/* result cards */
.calc-results { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 26px; }
.calc-rc {
  background: rgba(255,249,234,0.04); border: 1px solid rgba(255,249,234,0.10);
  border-radius: 16px; padding: 20px 22px;
}
.calc-rc.feature { background: rgba(255,194,0,0.10); border-color: rgba(255,194,0,0.28); }
.calc-rc .rc-label {
  font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: rgba(255,249,234,0.55); margin-bottom: 10px; line-height: 1.35; min-height: 2.7em;
}
.calc-rc.feature .rc-label { color: rgba(255,210,75,0.85); }
.calc-rc .rc-value { font-size: 28px; font-weight: 800; color: var(--instnt-ivory); line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.calc-rc.feature .rc-value { color: var(--instnt-yellow); }
.calc-rc .rc-sub { font-size: 12px; color: rgba(255,249,234,0.50); margin-top: 8px; line-height: 1.4; }

.calc-assume { font-size: 12.5px; color: rgba(255,249,234,0.45); line-height: 1.55; }
.calc-divider { border: 0; border-top: 1px solid rgba(255,249,234,0.10); margin: 26px 0; }

/* lead block reuses .lead-form style from site.css but slimmer here */
.calc-lead h4 { font-size: 19px; font-weight: 700; letter-spacing: -0.01em; color: var(--instnt-ivory); margin-bottom: 4px; }
.calc-lead .sub { font-size: 13.5px; color: rgba(255,249,234,0.6); margin-bottom: 18px; }
.calc-lead .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.calc-lead .field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.calc-lead label { font-size: 12px; font-weight: 600; color: rgba(255,249,234,0.65); letter-spacing: 0.02em; }
.calc-lead input {
  font-family: var(--font-sans); font-size: 14.5px; color: var(--instnt-ivory);
  background: rgba(255,249,234,0.04); border: 1px solid rgba(255,249,234,0.16);
  border-radius: 12px; padding: 12px 14px; outline: none;
  transition: border-color 200ms var(--ease-out), box-shadow 200ms var(--ease-out);
}
.calc-lead input:focus { border-color: var(--instnt-periwinkle); box-shadow: 0 0 0 4px rgba(136,133,255,0.18); }
.calc-lead input.invalid { border-color: var(--instnt-pink); }
.calc-lead .err { font-size: 11.5px; color: var(--instnt-pink); margin-top: -6px; min-height: 0; }
.calc-lead .btn { width: 100%; justify-content: center; margin-top: 8px; }
.calc-lead .btn:disabled { opacity: 0.6; cursor: progress; }
.calc-lead-err {
  font-size: 12.5px; color: var(--instnt-pink); line-height: 1.5;
  background: rgba(240,0,108,0.08); border: 1px solid rgba(240,0,108,0.28);
  border-radius: 10px; padding: 10px 12px; margin-bottom: 10px;
}
.calc-lead-err a { color: var(--instnt-pink); text-decoration: underline; }
.aj-send-err {
  font-size: 12.5px; color: var(--instnt-pink); line-height: 1.5;
  background: rgba(240,0,108,0.08); border: 1px solid rgba(240,0,108,0.28);
  border-radius: 10px; padding: 10px 12px; margin-top: 10px; text-align: left;
}
.aj-send-err a { color: var(--instnt-pink); text-decoration: underline; }
.pd-embed { min-height: 460px; margin-top: 4px; }
.pd-embed iframe { width: 100% !important; border: 0; border-radius: 12px; background: #fff; }

.calc-thanks { text-align: center; padding: 28px 8px; }
.calc-thanks .check {
  width: 60px; height: 60px; border-radius: 50%;
  background: rgba(31,138,91,0.18); border: 1px solid rgba(31,138,91,0.5); color: #6DE0A8;
  display: flex; align-items: center; justify-content: center; margin: 0 auto 16px;
}
.calc-thanks h4 { font-size: 20px; font-weight: 700; color: var(--instnt-ivory); margin-bottom: 8px; }
.calc-thanks p { font-size: 14px; color: rgba(255,249,234,0.65); line-height: 1.6; }
.calc-thanks .rep { color: var(--instnt-yellow); font-weight: 600; }

/* trust strip under calc hero */
.trust-strip { display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: center; }
.trust-item { display: inline-flex; align-items: center; gap: 9px; font-size: 13.5px; color: rgba(255,249,234,0.65); }
.trust-item .ti-ico { width: 18px; height: 18px; color: var(--instnt-yellow); flex-shrink: 0; }

/* ---------- Header: "Who It's For" dropdown ---------- */
.nav-dd { position: relative; display: flex; align-items: center; }
.nav-dd-trigger {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--font-sans); font-size: 14px; font-weight: 500;
  color: rgba(255,249,234,0.78);
  background: transparent; border: 0; cursor: pointer;
  padding: 8px 12px 8px 14px; border-radius: 9999px;
  transition: color 220ms var(--ease-out), background 220ms var(--ease-out);
}
.nav-dd-trigger:hover,
.nav-dd.open .nav-dd-trigger { color: var(--instnt-ivory); background: rgba(255,249,234,0.06); }
.nav-dd-trigger.active { color: var(--instnt-yellow); }
.nav-dd-chev { width: 14px; height: 14px; transition: transform 220ms var(--ease-out); opacity: 0.8; }
.nav-dd.open .nav-dd-chev { transform: rotate(180deg); }

/* invisible hover bridge so the cursor can travel from trigger to panel */
.nav-dd-pop {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  padding-top: 18px; min-width: 340px;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 200ms var(--ease-out), transform 240ms var(--ease-out);
  transform: translateX(-50%) translateY(6px);
}
.nav-dd.open .nav-dd-pop { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); }

.nav-dd-panel {
  background: rgba(21,20,35,0.96);
  backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px);
  border: 1px solid rgba(255,249,234,0.12);
  border-radius: 18px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.5);
  padding: 8px;
  display: flex; flex-direction: column; gap: 2px;
}
.nav-dd-item {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 14px; border-radius: 12px;
  text-decoration: none;
  transition: background 200ms var(--ease-out);
}
.nav-dd-item:hover { background: rgba(255,249,234,0.07); }
.nav-dd-item.current { background: rgba(255,194,0,0.08); }
.nav-dd-ico {
  flex-shrink: 0; width: 40px; height: 40px; border-radius: 11px;
  background: rgba(255,194,0,0.12); border: 1px solid rgba(255,194,0,0.26);
  display: flex; align-items: center; justify-content: center;
}
.nav-dd-ico i {
  display: block; width: 20px; height: 20px; background: var(--instnt-yellow);
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
}
.nav-dd-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.nav-dd-t { font-size: 14.5px; font-weight: 600; letter-spacing: -0.01em; color: var(--instnt-ivory); }
.nav-dd-item.current .nav-dd-t { color: var(--instnt-yellow); }
.nav-dd-d { font-size: 12.5px; line-height: 1.4; color: rgba(255,249,234,0.55); }

@media (max-width: 880px) {
  .vertical-grid { grid-template-columns: 1fr; }
  .calc-grid { grid-template-columns: 1fr; }
  .calc-panel.sticky { position: static; }
  .calc-results { grid-template-columns: 1fr 1fr; }
  .calc-lead .row2 { grid-template-columns: 1fr; }
}

/* ---------- Leadership card: LinkedIn link + photo avatar ---------- */
.ldr-avatar-link { display: block; text-decoration: none; }
/* Whole tile is the LinkedIn link */
a.ldr-card-link { text-decoration: none; color: inherit; cursor: pointer; }
a.ldr-card-link:hover .av-photo { border-color: var(--instnt-yellow, #FFC200); transform: translateY(-2px); }
a.ldr-card-link:hover .ldr-linkedin { color: var(--instnt-yellow, #FFC200); }
.av-photo {
  display: block; border-radius: 50%; object-fit: cover;
  border: 2px solid rgba(255,249,234,0.16);
  box-shadow: 0 6px 20px rgba(0,0,0,0.35);
  transition: border-color 200ms var(--ease-out, cubic-bezier(0.22,1,0.36,1)), transform 200ms var(--ease-out, cubic-bezier(0.22,1,0.36,1));
}
.ldr-avatar-link:hover .av-photo { border-color: var(--instnt-yellow, #FFC200); transform: translateY(-2px); }
.ldr-linkedin {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 12px; font-size: 13px; font-weight: 600;
  color: var(--instnt-periwinkle, #8885FF); text-decoration: none;
  transition: color 180ms var(--ease-out, cubic-bezier(0.22,1,0.36,1));
}
.ldr-linkedin:hover { color: var(--instnt-yellow, #FFC200); }
.ldr-linkedin i {
  display: block; width: 15px; height: 15px; background: currentColor;
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
}

/* ---------- Pillar pages: definition card + versus table ---------- */
.definition-card { max-width: 900px; }
.definition-card .definition-lead {
  font-size: 21px; line-height: 1.55; color: var(--instnt-ivory);
  letter-spacing: -0.01em; margin-top: 6px;
}
.definition-card .definition-sub {
  font-size: 16px; line-height: 1.65; color: rgba(255,249,234,0.62);
  margin-top: 16px;
}
.ico.define-key {
  font-family: var(--font-sans, 'Poppins', sans-serif);
  font-size: 22px; font-weight: 700; color: var(--instnt-yellow);
  display: flex; align-items: center; justify-content: center;
}

.vs-table {
  border: 1px solid rgba(255,249,234,0.12);
  border-radius: 18px; overflow: hidden;
  background: rgba(21,20,35,0.45);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
}
.vs-row { display: grid; grid-template-columns: 1fr 1fr; }
.vs-row + .vs-row { border-top: 1px solid rgba(255,249,234,0.09); }
.vs-cell {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 18px 22px; font-size: 15.5px; line-height: 1.5;
  color: rgba(255,249,234,0.82);
}
.vs-cell.vs-legacy { border-right: 1px solid rgba(255,249,234,0.09); color: rgba(255,249,234,0.6); }
.vs-row.vs-head .vs-cell {
  font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(255,249,234,0.5); background: rgba(255,249,234,0.03);
}
.vs-row.vs-head .vs-cell.vs-instnt { color: var(--instnt-yellow); }
.vs-cell i {
  flex-shrink: 0; display: block; width: 18px; height: 18px; margin-top: 1px;
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
}
.vs-cell.vs-legacy i { background: var(--instnt-pink, #F0006C); }
.vs-cell.vs-instnt i { background: var(--instnt-yellow, #FFC200); }
.vs-note {
  margin-top: 20px; max-width: 780px; font-size: 14.5px; line-height: 1.6;
  color: rgba(255,249,234,0.55);
}
@media (max-width: 720px) {
  .vs-row, .vs-row.vs-head { grid-template-columns: 1fr; }
  .vs-cell.vs-legacy { border-right: none; border-bottom: 1px solid rgba(255,249,234,0.09); }
}

/* ---------- Mobile navigation (hamburger + panel) ---------- */
.nav-actions { display: flex; align-items: center; gap: 10px; }
.nav-burger {
  display: none;
  align-items: center; justify-content: center;
  width: 40px; height: 40px; flex-shrink: 0;
  background: rgba(255,249,234,0.06);
  border: 1px solid rgba(255,249,234,0.14);
  border-radius: 10px; color: var(--instnt-ivory);
  cursor: pointer; padding: 0;
  transition: background 180ms var(--ease-out);
}
.nav-burger:hover { background: rgba(255,249,234,0.12); }
.nav-burger svg { width: 20px; height: 20px; }
.nav-mobile { display: none; }

@media (max-width: 880px) {
  .nav-burger { display: inline-flex; }
  .header-cta { display: none; }
  .nav-mobile {
    display: block;
    position: absolute;
    top: calc(100% + 10px); left: 0; right: 0;
    max-height: calc(100dvh - 120px);
    overflow-y: auto;
    background: rgba(21,20,35,0.97);
    backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(255,249,234,0.12);
    border-radius: 22px;
    box-shadow: 0 24px 64px rgba(0,0,0,0.5);
    padding: 12px;
    z-index: 1200;
    transform: translateY(-8px);
    opacity: 0; pointer-events: none;
    transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out);
  }
  .nav-mobile.open { opacity: 1; transform: none; pointer-events: auto; }
}
.nav-m-group { padding: 6px 4px 8px; }
.nav-m-group + .nav-m-group { border-top: 1px solid rgba(255,249,234,0.08); margin-top: 2px; }
.nav-m-label {
  font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(255,249,234,0.42); padding: 8px 12px 4px;
}
.nav-m-item {
  display: flex; align-items: center; gap: 12px;
  padding: 12px; border-radius: 12px;
  color: rgba(255,249,234,0.84); font-size: 15px; font-weight: 500;
  text-decoration: none; cursor: pointer;
}
.nav-m-item:hover { background: rgba(255,249,234,0.06); color: var(--instnt-ivory); }
.nav-m-item.current { color: var(--instnt-yellow); background: rgba(255,194,0,0.08); }
.nav-m-item .nav-dd-ico { flex-shrink: 0; }
.nav-m-cta { padding: 10px 4px 4px; }
.nav-m-cta .btn { width: 100%; justify-content: center; }