/* ═══════════════════════════════════════════════════════════
   PAGEGUARD™ — Legal & Security Edition
   Palette: Old Bailey — prussian blue-black, cold brass, parchment
   Typography: Cormorant Garamond (editorial serif) + Inter + Bebas Neue
═══════════════════════════════════════════════════════════ */

/* ── DESIGN TOKENS ── */
:root {
  /* ── Palette: Old Bailey ── */
  --c-ink:        #0c1018;   /* prussian blue-black */
  --c-ink-mid:    #090d14;
  --c-ink-deep:   #060a10;
  --c-cream:      #edeae1;   /* cooler parchment */
  --c-cream-88:   rgba(237, 234, 225, 0.88);
  --c-cream-70:   rgba(237, 234, 225, 0.70);
  --c-cream-55:   rgba(237, 234, 225, 0.55);
  --c-cream-45:   rgba(237, 234, 225, 0.45);
  --c-cream-30:   rgba(237, 234, 225, 0.30);
  --c-cream-08:   rgba(237, 234, 225, 0.08);
  --c-gold:       #8c6d28;   /* cold brass — restrained, legal */
  --c-gold-hi:    #aa8534;
  --c-gold-40:    rgba(140, 109, 40, 0.40);
  --c-gold-20:    rgba(140, 109, 40, 0.20);
  --c-gold-08:    rgba(140, 109, 40, 0.08);
  --c-gold-05:    rgba(140, 109, 40, 0.05);
  --c-border:     rgba(140, 109, 40, 0.22);
  --c-border-hi:  rgba(140, 109, 40, 0.50);
  /* Navy accent — law firm authority */
  --c-navy:       #1c2a44;
  --c-navy-hi:    #243556;
  --c-navy-20:    rgba(28, 42, 68, 0.20);
  --c-navy-10:    rgba(28, 42, 68, 0.10);
  --c-error:      #8b2020;

  /* ── Typography ── */
  --f-display: 'Bebas Neue', 'Arial Black', Impact, sans-serif;   /* logo, buttons — brand mark */
  --f-serif:   'Cormorant Garamond', Garamond, 'EB Garamond', Georgia, 'Times New Roman', serif;  /* editorial headings */
  --f-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --f-script:  'Courier Prime', 'Courier New', Courier, monospace; /* labels, monospace UI */

  /* ── Fluid type scale ── */
  --t-xs:   clamp(0.5625rem, 0.9vw,  0.6875rem);
  --t-sm:   clamp(0.6875rem, 1.0vw,  0.8125rem);
  --t-base: clamp(0.875rem,  1.2vw,  1rem);
  --t-md:   clamp(1rem,      1.5vw,  1.25rem);
  --t-lg:   clamp(1.125rem,  2.0vw,  1.5rem);
  --t-xl:   clamp(1.5rem,    3.0vw,  2.25rem);
  --t-2xl:  clamp(2rem,      4.5vw,  3.5rem);
  --t-hero: clamp(4.5rem,   16vw,    8.75rem);

  /* ── Spacing (4px base) ── */
  --s-1:  0.25rem;  --s-2:  0.5rem;   --s-3:  0.75rem;
  --s-4:  1rem;     --s-5:  1.25rem;  --s-6:  1.5rem;
  --s-8:  2rem;     --s-10: 2.5rem;   --s-12: 3rem;
  --s-16: 4rem;     --s-20: 5rem;     --s-24: 6rem;

  /* ── Shape ── */
  --r-sm: 2px;  --r-md: 4px;  --r-lg: 8px;  --r-pill: 9999px;

  /* ── Motion ── */
  --ease:     cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 150ms;  --dur-base: 200ms;
  --dur-slow: 400ms;  --dur-anim: 800ms;

  /* ── Layout ── */
  --max-w:      900px;
  --max-w-wide: 1100px;
  --max-w-text: 680px;
  --max-w-form: 480px;
}

/* ── RESET ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
img, svg { display: block; max-width: 100%; }
button { font: inherit; cursor: pointer; border: none; background: none; }
a { color: inherit; text-decoration: none; }
input, textarea, select { -webkit-appearance: none; appearance: none; }

/* ── BASE ── */
body {
  background: var(--c-ink);
  color: var(--c-cream);
  font-family: var(--f-body);
  font-size: var(--t-base);
  line-height: 1.7;
  min-height: 100svh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Texture overlay */
body::after {
  content: '';
  position: fixed; inset: 0;
  pointer-events: none; z-index: 9999;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='0.04'/%3E%3C/svg%3E");
  background-size: 256px 256px;
  opacity: 0.45;
}

/* ═══ NAV ═══ */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; align-items: center;
  padding: var(--s-3) var(--s-6);
  background: rgba(12, 16, 24, 0.94);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--c-border);
  gap: var(--s-4);
}
.nav-logo {
  font-family: var(--f-display);
  font-size: 1.375rem; letter-spacing: 3px;
  color: var(--c-cream); margin-right: auto; flex-shrink: 0;
}
.nav-logo em { color: var(--c-gold); font-style: normal; }
.nav-logo sup {
  font-size: 0.4em; font-style: normal; font-family: var(--f-display);
  font-weight: 400; opacity: 0.5; letter-spacing: 0; vertical-align: super;
  display: inline-block;
}
.nav-badge {
  font-family: var(--f-script); font-size: var(--t-xs); letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--c-gold);
  border: 1px solid var(--c-border); padding: 2px 8px;
  border-radius: var(--r-sm); opacity: 0.7; white-space: nowrap;
}
.nav-links {
  display: flex; align-items: center; gap: var(--s-6); list-style: none;
}
.nav-links a {
  font-family: var(--f-script); font-size: var(--t-xs); letter-spacing: 2px;
  text-transform: uppercase; color: var(--c-cream-55);
  transition: color var(--dur-base); white-space: nowrap;
}
.nav-links a:hover, .nav-links a.active { color: var(--c-gold); }
.nav-signin {
  font-family: var(--f-script); font-size: var(--t-xs); letter-spacing: 2px;
  text-transform: uppercase; color: var(--c-cream-45);
  padding: var(--s-2) var(--s-4);
  border: 1px solid var(--c-border); border-radius: var(--r-sm);
  transition: color var(--dur-base), border-color var(--dur-base); white-space: nowrap;
}
.nav-signin:hover { color: var(--c-cream); border-color: var(--c-cream-30); }
.nav-disabled { opacity: 0.25 !important; pointer-events: none !important; cursor: default !important; }
.nav-signup {
  font-family: var(--f-display); font-size: 0.875rem; letter-spacing: 2px;
  padding: var(--s-2) var(--s-5);
  color: var(--c-gold); border: 1px solid var(--c-gold-40);
  border-radius: var(--r-sm);
  transition: color var(--dur-base), border-color var(--dur-base), background var(--dur-base);
  white-space: nowrap; text-decoration: none; display: inline-block;
}
.nav-signup:hover { color: var(--c-gold-hi); border-color: var(--c-gold); background: var(--c-gold-08); }
.nav-cta {
  padding: var(--s-2) var(--s-5);
  background: var(--c-gold); color: var(--c-ink);
  font-family: var(--f-display); font-size: 0.875rem; letter-spacing: 2px;
  border-radius: var(--r-sm);
  transition: background var(--dur-base);
  white-space: nowrap; flex-shrink: 0;
}
.nav-cta:hover { background: var(--c-gold-hi); }
.nav-hamburger {
  display: none; flex-direction: column; gap: 5px;
  padding: var(--s-2); cursor: pointer; margin-left: auto;
}
.nav-hamburger span {
  display: block; width: 22px; height: 2px;
  background: var(--c-cream-55); transition: all var(--dur-base);
}
.nav-mobile {
  display: none; position: fixed; top: 49px; left: 0; right: 0;
  background: rgba(6, 10, 16, 0.98);
  border-bottom: 1px solid var(--c-border);
  padding: var(--s-4) var(--s-6) var(--s-6);
  flex-direction: column; gap: var(--s-1); z-index: 99;
}
.nav-mobile.open { display: flex; }
.nav-mobile a {
  font-family: var(--f-script); font-size: var(--t-sm); letter-spacing: 2px;
  text-transform: uppercase; color: var(--c-cream-55);
  padding: var(--s-3) 0; border-bottom: 1px solid var(--c-gold-08);
  transition: color var(--dur-base);
}
.nav-mobile a:last-child { border-bottom: none; }
.nav-mobile a:hover { color: var(--c-gold); }
.nav-mobile .nav-cta { margin-top: var(--s-3); text-align: center; padding: var(--s-3); border-bottom: none; }

/* ═══ HERO ═══ */
.hero {
  min-height: 100svh;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: calc(var(--s-20) + 56px) var(--s-6) var(--s-16);
  position: relative; overflow: hidden; text-align: center;
}
/* Fine grid — slightly smaller squares for a more precise, technical feel */
.hero::before {
  content: ''; position: absolute; inset: 0;
  background-image:
    linear-gradient(var(--c-gold-05) 1px, transparent 1px),
    linear-gradient(90deg, var(--c-gold-05) 1px, transparent 1px);
  background-size: 44px 44px; pointer-events: none;
}
.hero::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse 65% 55% at 50% 38%, rgba(28, 42, 68, 0.35) 0%, transparent 70%);
  pointer-events: none;
}
.hero > * { position: relative; z-index: 1; }

/* ═══ LOGO ═══ */
.logo {
  font-family: var(--f-display);
  font-size: var(--t-hero); letter-spacing: 4px; line-height: 0.88;
  color: var(--c-cream);
  animation: fadeUp var(--dur-anim) 100ms var(--ease) both;
}
.logo-guard { color: var(--c-gold); display: block; }
.logo-tm {
  font-size: 0.22em; font-style: normal; font-family: var(--f-display);
  font-weight: 400; opacity: 0.5; letter-spacing: 0;
  vertical-align: top; line-height: 1; position: relative; top: 0.05em;
  display: inline-block;
}

/* ═══ HERO ELEMENTS ═══ */
.hero-eyebrow {
  font-family: var(--f-script); font-size: var(--t-xs); letter-spacing: 5px;
  text-transform: uppercase; color: var(--c-gold);
  margin-bottom: var(--s-8);
  animation: fadeUp var(--dur-anim) var(--ease) both;
}
.hero-eyebrow-badge {
  background: var(--c-gold-20); border: 1px solid var(--c-border-hi);
  padding: 3px 10px; border-radius: var(--r-sm);
  margin-right: var(--s-3); font-size: var(--t-xs); letter-spacing: 2px;
}
.hero-rule {
  width: 56px; height: 1px; background: var(--c-gold);
  margin: var(--s-8) auto;
  animation: fadeUp var(--dur-anim) 200ms var(--ease) both;
}

/* Cormorant Garamond italic for the hero tagline — the centrepiece of the redesign */
.hero-tagline {
  font-family: var(--f-serif);
  font-size: clamp(1.25rem, 2.5vw, 1.75rem);
  font-weight: 400; font-style: italic;
  color: var(--c-cream-88); max-width: 620px; line-height: 1.55;
  margin-bottom: var(--s-4);
  animation: fadeUp var(--dur-anim) 300ms var(--ease) both;
}
.hero-sell {
  font-family: var(--f-serif);
  font-size: clamp(1.125rem, 2.2vw, 1.5rem);
  font-weight: 400; font-style: italic;
  color: var(--c-cream); max-width: 540px; line-height: 1.45;
  margin-bottom: var(--s-3);
  animation: fadeUp var(--dur-anim) 350ms var(--ease) both;
}
.hero-sub {
  font-family: var(--f-script); font-size: var(--t-xs); letter-spacing: 1.5px;
  color: var(--c-cream-45); margin-bottom: var(--s-10);
  animation: fadeUp var(--dur-anim) 400ms var(--ease) both;
}
.hero-cta-group {
  display: flex; gap: var(--s-4); flex-wrap: wrap;
  justify-content: center; align-items: center;
  animation: fadeUp var(--dur-anim) 450ms var(--ease) both;
  margin-bottom: var(--s-6);
}

/* ═══ TRUST BAR ═══ */
.trust-bar {
  width: 100%; border-top: 1px solid var(--c-border);
  border-bottom: 1px solid var(--c-border);
  background: rgba(28, 42, 68, 0.12);
  padding: var(--s-5) var(--s-6);
  display: flex; justify-content: center;
  gap: clamp(var(--s-8), 6vw, var(--s-20));
  flex-wrap: wrap;
  animation: fadeUp var(--dur-anim) 500ms var(--ease) both;
}
.trust-stat {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.trust-stat-num {
  font-family: var(--f-display); font-size: clamp(1.75rem, 3vw, 2.5rem);
  color: var(--c-gold); letter-spacing: 2px; line-height: 1;
}
.trust-stat-label {
  font-family: var(--f-script); font-size: var(--t-xs); letter-spacing: 2px;
  text-transform: uppercase; color: var(--c-cream-45); text-align: center;
}

/* ═══ PILLS ═══ */
.pills {
  display: flex; gap: var(--s-3); flex-wrap: wrap;
  justify-content: center; margin-bottom: var(--s-8);
  animation: fadeUp var(--dur-anim) 400ms var(--ease) both;
}
.pill {
  display: flex; align-items: center; gap: var(--s-2);
  border: 1px solid var(--c-gold-20); background: var(--c-gold-05);
  padding: var(--s-2) var(--s-4); border-radius: var(--r-pill);
  font-family: var(--f-script); font-size: var(--t-xs); letter-spacing: 1px;
  color: var(--c-cream-55); text-transform: uppercase;
}
.pill-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--c-gold); flex-shrink: 0; }

/* ═══ BUTTONS ═══ */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--f-display); font-size: 1rem; letter-spacing: 2px;
  border-radius: var(--r-sm); padding: var(--s-4) var(--s-8);
  transition: background var(--dur-base), color var(--dur-base), border-color var(--dur-base);
  cursor: pointer; border: none; white-space: nowrap; text-decoration: none;
}
.btn-primary { background: var(--c-gold); color: var(--c-ink); }
.btn-primary:hover { background: var(--c-gold-hi); }
.btn-secondary { background: transparent; color: var(--c-cream-70); border: 1px solid var(--c-gold-20); }
.btn-secondary:hover { border-color: var(--c-gold); color: var(--c-cream); }
.btn-ghost {
  background: transparent; color: var(--c-gold); border: none; padding: 0;
  font-family: var(--f-script); font-size: var(--t-xs); letter-spacing: 2px; text-transform: uppercase;
}
.btn-ghost:hover { color: var(--c-gold-hi); }
.btn-sm { padding: var(--s-2) var(--s-5); font-size: 0.875rem; }
.btn-lg { padding: var(--s-5) var(--s-10); font-size: 1.125rem; }
.btn-full { width: 100%; }
.btn-with-sub { flex-direction: column; gap: 3px; white-space: normal; line-height: 1.2; }
.btn-sub { font-family: var(--f-script); font-size: 0.5em; letter-spacing: 1.5px; text-transform: uppercase; opacity: 0.65; font-weight: 400; line-height: 1; }

/* ═══ SECTIONS ═══ */
.section { padding: var(--s-24) var(--s-6); }
.section-inner      { max-width: var(--max-w);      margin: 0 auto; }
.section-inner-wide { max-width: var(--max-w-wide); margin: 0 auto; }
.section-inner-text { max-width: var(--max-w-text); margin: 0 auto; }

/* Courier Prime overline label */
.section-label {
  font-family: var(--f-script); font-size: var(--t-xs); letter-spacing: 4px;
  text-transform: uppercase; color: var(--c-gold);
  margin-bottom: var(--s-3); text-align: center;
}

/* Cormorant Garamond for all section titles — the editorial shift */
.section-title {
  font-family: var(--f-serif);
  font-size: var(--t-2xl); font-weight: 600;
  color: var(--c-cream); text-align: center;
  margin-bottom: var(--s-5); line-height: 1.0;
  letter-spacing: 0.01em;
}
.section-title.on-cream { color: var(--c-ink); }

/* Ornamental section rule — replaces plain gold bar */
.section-rule {
  display: flex; align-items: center; justify-content: center;
  gap: var(--s-3); margin: 0 auto var(--s-16);
}
.section-rule::before,
.section-rule::after {
  content: ''; flex: 0 0 32px; height: 1px; background: var(--c-gold);
}
.section-rule::after { content: ''; }
.section-rule-mark {
  color: var(--c-gold); font-size: 0.45rem; line-height: 1; opacity: 0.8;
  letter-spacing: 0; user-select: none;
}

.section-body {
  font-size: var(--t-base); color: var(--c-cream-70); line-height: 1.8;
  text-align: center; max-width: var(--max-w-text); margin: 0 auto var(--s-12);
}
.section-body.on-cream { color: #4a4030; }

/* Section backgrounds */
.bg-ink      { background: var(--c-ink); }
.bg-ink-mid  { background: var(--c-ink-mid); border-top: 1px solid var(--c-border); border-bottom: 1px solid var(--c-border); }
.bg-ink-deep { background: var(--c-ink-deep); }
.bg-cream    { background: var(--c-cream); color: var(--c-ink); }

/* ═══ FEATURES / USE CASES ═══ */
.features-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--s-8);
}
.feature { border-top: 1px solid var(--c-gold-40); padding-top: var(--s-5); }
.feature-icon { font-size: 1.375rem; margin-bottom: var(--s-3); }

/* Cormorant Garamond for feature titles too */
.feature-title {
  font-family: var(--f-serif); font-size: var(--t-md); font-weight: 600;
  margin-bottom: var(--s-2); line-height: 1.25; letter-spacing: 0.01em;
}
.feature-body { font-size: var(--t-sm); line-height: 1.85; }

.bg-cream .feature-title  { color: var(--c-ink); }
.bg-cream .feature-body   { color: #4a4030; }
.bg-cream .universal-title { color: var(--c-ink); }
.bg-cream .universal-body  { color: #4a4030; }
.bg-cream .universal-item  { border-top-color: var(--c-gold-40); }
.bg-ink .feature-title,
.bg-ink-mid .feature-title,
.bg-ink-deep .feature-title { color: var(--c-cream); }
.bg-ink .feature-body,
.bg-ink-mid .feature-body,
.bg-ink-deep .feature-body  { color: var(--c-cream-55); }

/* ═══ WHO IT'S FOR — practice area grid ═══ */
.use-cases-strip {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--s-3); margin-top: var(--s-12);
}
.use-case-item {
  border: 1px solid var(--c-navy-20);
  background: rgba(28, 42, 68, 0.12);
  border-radius: var(--r-md);
  padding: var(--s-5) var(--s-4); text-align: center;
  transition: border-color var(--dur-base), background var(--dur-base);
}
.use-case-item:hover {
  border-color: var(--c-gold-20);
  background: rgba(28, 42, 68, 0.22);
}
.use-case-icon { font-size: 1.25rem; margin-bottom: var(--s-2); }
.use-case-label {
  font-family: var(--f-script); font-size: var(--t-xs); letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--c-cream-55);
}

/* ═══ DEMO SECTION ═══ */
.demo-inner {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--s-16); align-items: center;
}
.demo-label {
  font-family: var(--f-script); font-size: var(--t-xs); letter-spacing: 4px;
  text-transform: uppercase; color: var(--c-gold); margin-bottom: var(--s-3);
}
.demo-heading {
  font-family: var(--f-serif); font-size: var(--t-xl); font-weight: 600;
  color: var(--c-cream); line-height: 1.1; margin-bottom: var(--s-5);
  letter-spacing: 0.01em;
}
.demo-body { font-size: var(--t-sm); color: var(--c-cream-70); line-height: 1.85; margin-bottom: var(--s-6); }
.demo-stats { display: flex; gap: var(--s-8); }
.demo-stat-num { font-family: var(--f-display); font-size: var(--t-xl); color: var(--c-gold); line-height: 1; }
.demo-stat-label {
  font-family: var(--f-script); font-size: var(--t-xs); letter-spacing: 1px;
  text-transform: uppercase; color: var(--c-cream-45); margin-top: var(--s-1);
}
.demo-mockup {
  width: 100%; height: auto; border-radius: var(--r-lg);
  box-shadow: 0 0 0 1px var(--c-gold-20), 0 32px 80px rgba(0,0,0,0.7), 0 0 60px rgba(28,42,68,0.3);
}

/* ═══ LIFECYCLE / PRIVILEGE PROMISE ═══ */
.lifecycle { display: flex; flex-direction: column; max-width: 520px; margin: 0 auto; }
.lifecycle-step {
  display: grid; grid-template-columns: 40px 1fr;
  gap: 0 var(--s-5); align-items: start; position: relative;
}
.lifecycle-step:not(:last-child)::before {
  content: ''; position: absolute; left: 19px; top: 40px; bottom: -4px;
  width: 1px; background: var(--c-gold-20);
}
.lifecycle-icon {
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(28, 42, 68, 0.25); border: 1px solid var(--c-gold-20);
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem; flex-shrink: 0; margin-top: var(--s-2);
}
.lifecycle-content { padding-bottom: var(--s-8); padding-top: var(--s-2); }
.lifecycle-title {
  font-family: var(--f-script); font-size: var(--t-xs); letter-spacing: 2px;
  text-transform: uppercase; color: var(--c-gold); margin-bottom: var(--s-1);
}
.lifecycle-desc { font-size: var(--t-sm); color: var(--c-cream-55); line-height: 1.75; }
.lifecycle-tag {
  display: inline-block; font-family: var(--f-script);
  font-size: 0.5rem; letter-spacing: 2px; text-transform: uppercase;
  background: var(--c-gold-20); color: var(--c-gold);
  padding: 2px 6px; border-radius: var(--r-sm); margin-left: var(--s-2);
  vertical-align: middle;
}

/* ═══ COMPLIANCE BADGES ═══ */
.compliance-row {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: var(--s-3); margin-top: var(--s-10);
}
.compliance-badge {
  display: flex; align-items: center; gap: var(--s-3);
  border: 1px solid var(--c-navy-20); border-radius: var(--r-md);
  background: rgba(28, 42, 68, 0.15);
  padding: var(--s-3) var(--s-5);
  transition: border-color var(--dur-base);
}
.compliance-badge:hover { border-color: var(--c-gold-20); }
.compliance-badge-icon { font-size: 1.1rem; flex-shrink: 0; }
.compliance-badge-text {
  font-family: var(--f-script); font-size: var(--t-xs); letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--c-cream-70); line-height: 1.4;
}

/* ═══ PRICING ═══ */
.pricing-toggle {
  display: flex; align-items: center; justify-content: center;
  gap: var(--s-4); margin-bottom: var(--s-10);
}
.pricing-toggle-label {
  font-family: var(--f-script); font-size: var(--t-xs); letter-spacing: 2px;
  text-transform: uppercase; color: var(--c-cream-45);
}
.pricing-toggle-label.active { color: var(--c-cream); }
.toggle-switch {
  width: 44px; height: 24px; border-radius: var(--r-pill);
  background: var(--c-gold-20); border: 1px solid var(--c-gold-40);
  position: relative; cursor: pointer; transition: background var(--dur-base);
}
.toggle-switch::after {
  content: ''; position: absolute; top: 3px; left: 3px;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--c-gold); transition: transform var(--dur-base);
}
.toggle-switch.on::after { transform: translateX(20px); }
.pricing-save-badge {
  font-family: var(--f-script); font-size: var(--t-xs); letter-spacing: 1px;
  background: var(--c-gold-20); color: var(--c-gold);
  padding: 2px 8px; border-radius: var(--r-pill);
}
.pricing-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--s-6); align-items: start;
}
.pricing-card {
  background: var(--c-cream-08); border: 1px solid var(--c-gold-20);
  border-radius: var(--r-lg); padding: var(--s-8) var(--s-6);
  display: flex; flex-direction: column; gap: var(--s-5);
  transition: border-color var(--dur-base), box-shadow var(--dur-base);
}
.pricing-card:hover { border-color: var(--c-gold-40); box-shadow: 0 0 32px rgba(140,109,40,0.18), 0 0 64px rgba(28,42,68,0.4); }
.pricing-card.featured {
  border-color: var(--c-gold); background: rgba(28, 42, 68, 0.25);
  box-shadow: 0 0 40px rgba(140,109,40,0.14), 0 0 80px rgba(28,42,68,0.3); position: relative;
}
.pricing-card.featured:hover { border-color: var(--c-gold-hi); box-shadow: 0 0 48px rgba(140,109,40,0.28), 0 0 100px rgba(28,42,68,0.5); }
.pricing-featured-badge {
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  background: var(--c-gold); color: var(--c-ink);
  font-family: var(--f-display); font-size: 0.7rem; letter-spacing: 2px;
  padding: 3px 14px; border-radius: var(--r-pill); white-space: nowrap;
}
.pricing-tier {
  font-family: var(--f-script); font-size: var(--t-xs); letter-spacing: 3px;
  text-transform: uppercase; color: var(--c-gold);
}
.pricing-price { display: flex; align-items: baseline; gap: var(--s-1); }
.pricing-currency { font-family: var(--f-script); font-size: var(--t-sm); color: var(--c-cream-45); margin-right: 2px; }
.pricing-amount { font-family: var(--f-display); font-size: 3rem; color: var(--c-cream); line-height: 1; }
.pricing-period { font-family: var(--f-script); font-size: var(--t-xs); letter-spacing: 1px; color: var(--c-cream-45); text-transform: uppercase; }
.pricing-desc { font-size: var(--t-sm); color: var(--c-cream-55); line-height: 1.7; padding-bottom: var(--s-4); border-bottom: 1px solid var(--c-gold-08); }
.pricing-features { list-style: none; display: flex; flex-direction: column; gap: var(--s-3); flex: 1; }
.pricing-feature-item {
  display: flex; align-items: flex-start; gap: var(--s-3);
  font-size: var(--t-sm); color: var(--c-cream-70); line-height: 1.5;
}
.pricing-feature-item::before { content: '—'; color: var(--c-gold-40); flex-shrink: 0; }
.pricing-feature-item.yes::before { content: '✓'; color: var(--c-gold); }
.pricing-feature-item.no { opacity: 0.4; }
.pricing-feature-item.no::before { content: '×'; color: var(--c-cream-30); }
.pricing-cta { margin-top: auto; }
.pricing-enterprise-row {
  margin-top: var(--s-10);
  padding: var(--s-5) var(--s-6);
  border: 1px solid var(--c-navy-20);
  border-radius: var(--r-md);
  background: rgba(28, 42, 68, 0.12);
  text-align: center;
}
.pricing-enterprise-text {
  font-family: var(--f-serif); font-size: var(--t-base); font-style: italic;
  color: var(--c-cream-55); line-height: 1.6;
}
.pricing-enterprise-link {
  color: var(--c-gold); text-decoration: underline;
  text-decoration-color: var(--c-gold-40);
  text-underline-offset: 3px;
  transition: color var(--dur-base);
}
.pricing-enterprise-link:hover { color: var(--c-gold-hi); }
.pricing-note {
  text-align: center; margin-top: var(--s-6);
  font-family: var(--f-script); font-size: var(--t-xs); letter-spacing: 1.5px;
  color: var(--c-cream-30); text-transform: uppercase;
}

/* ═══ FAQ ═══ */
.faq-list { display: flex; flex-direction: column; }
.faq-item { border-bottom: 1px solid var(--c-gold-08); }
.faq-q {
  font-family: var(--f-serif); font-size: var(--t-base); font-weight: 500;
  color: var(--c-cream); cursor: pointer; display: flex;
  justify-content: space-between; align-items: center;
  gap: var(--s-4); padding: var(--s-5) 0; user-select: none;
}
.faq-q::after {
  content: '+'; font-family: var(--f-display); font-size: 1.5rem;
  color: var(--c-gold); flex-shrink: 0; transition: transform var(--dur-base); line-height: 1;
}
.faq-item.open .faq-q::after { transform: rotate(45deg); }
.faq-a {
  font-size: var(--t-sm); color: var(--c-cream-55); line-height: 1.9;
  max-height: 0; overflow: hidden;
  transition: max-height var(--dur-slow) var(--ease), padding var(--dur-slow);
}
.faq-item.open .faq-a { max-height: 500px; padding-bottom: var(--s-5); }

/* ═══ FOUNDER STATEMENT ═══ */
.founder-statement { border-top: 1px solid var(--c-gold-40); border-bottom: 1px solid var(--c-gold-40); }
.founder-open-quote {
  font-family: var(--f-serif); font-size: 7rem; color: var(--c-gold-40);
  line-height: 0.65; margin-bottom: var(--s-6); user-select: none; display: block;
}
.founder-text {
  font-family: var(--f-serif); font-size: var(--t-lg); font-style: italic;
  color: var(--c-cream-88); line-height: 1.8;
  max-width: var(--max-w-text); margin: 0 auto;
}
.founder-text p + p { margin-top: var(--s-6); }
.founder-text .beat {
  font-style: normal; font-family: var(--f-serif); font-weight: 600;
  font-size: var(--t-xl); color: var(--c-cream);
  display: block; margin: var(--s-5) 0; letter-spacing: 0.01em;
}
.founder-attribution {
  margin-top: var(--s-10); padding-top: var(--s-8);
  border-top: 1px solid var(--c-gold-20);
  max-width: var(--max-w-text); margin-left: auto; margin-right: auto;
  display: flex; align-items: center; gap: var(--s-6);
}
.founder-initial {
  font-family: var(--f-serif); font-size: 4rem; font-weight: 600;
  color: var(--c-gold); line-height: 1; opacity: 0.6; flex-shrink: 0;
}
.founder-sig-name {
  font-family: var(--f-serif); font-size: var(--t-xl); font-weight: 600;
  color: var(--c-cream); line-height: 1; margin-bottom: var(--s-2);
  letter-spacing: 0.01em;
}
.founder-sig-detail {
  font-family: var(--f-script); font-size: var(--t-xs);
  letter-spacing: 2px; text-transform: uppercase; color: var(--c-cream-45);
}

/* ═══ BIO ═══ */
.bio-inner { display: grid; grid-template-columns: auto 1fr; gap: var(--s-10); align-items: start; }
.bio-initial {
  font-family: var(--f-serif); font-size: 6rem; font-weight: 600;
  color: var(--c-gold); line-height: 0.85; opacity: 0.5; flex-shrink: 0;
}
.bio-label {
  font-family: var(--f-script); font-size: var(--t-xs); letter-spacing: 4px;
  text-transform: uppercase; color: var(--c-gold); margin-bottom: var(--s-3);
}
.bio-name {
  font-family: var(--f-serif); font-size: 2rem; font-weight: 600;
  color: var(--c-cream); margin-bottom: var(--s-4); line-height: 1;
}
.bio-text { font-size: var(--t-sm); line-height: 1.9; color: var(--c-cream-70); }
.bio-text p + p { margin-top: var(--s-4); }
.bio-credits { margin-top: var(--s-5); display: flex; flex-wrap: wrap; gap: var(--s-2); }
.bio-credit {
  font-family: var(--f-script); font-size: var(--t-xs); letter-spacing: 1.5px;
  text-transform: uppercase; border: 1px solid var(--c-gold-20);
  color: rgba(140, 109, 40, 0.7); padding: var(--s-1) var(--s-3); border-radius: var(--r-sm);
}

/* ═══ FOOTER ═══ */
footer {
  background: var(--c-ink-deep); padding: var(--s-10) var(--s-6);
  border-top: 1px solid rgba(255, 255, 255, 0.04);
}
.footer-inner {
  max-width: var(--max-w); margin: 0 auto;
  display: grid; grid-template-columns: 1fr auto;
  gap: var(--s-8); align-items: start;
}
.footer-logo {
  font-family: var(--f-display); font-size: 1.75rem;
  letter-spacing: 4px; color: var(--c-cream); margin-bottom: var(--s-2);
}
.footer-logo em { color: var(--c-gold); font-style: normal; }
.footer-logo sup {
  font-size: 0.4em; font-style: normal; font-family: var(--f-display);
  font-weight: 400; opacity: 0.5; letter-spacing: 0; vertical-align: super;
  display: inline-block;
}
.footer-copy {
  font-family: var(--f-script); font-size: var(--t-xs);
  letter-spacing: 1.5px; color: var(--c-cream-45); text-transform: uppercase;
}
.footer-tagline {
  font-family: var(--f-script); font-size: var(--t-xs);
  letter-spacing: 1px; color: var(--c-cream-30); margin-top: var(--s-1);
}
.footer-links { display: flex; flex-direction: column; gap: var(--s-2); align-items: flex-end; }
.footer-links a {
  font-family: var(--f-script); font-size: var(--t-xs); letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--c-cream-30); transition: color var(--dur-base);
}
.footer-links a:hover { color: var(--c-gold); }

/* ═══ FOOTER — DIRECTION A ═══ */
.footer-a {
  padding: 0;
  border-top: 1px solid rgba(236,226,205,0.32);
  background: var(--c-ink);
}
.footer-a-inner {
  padding: 36px 64px 28px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 48px;
}
.footer-brand-a { display: flex; flex-direction: column; gap: 14px; }
.footer-wordmark-a {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.125rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  display: inline-flex; align-items: baseline;
  line-height: 1; text-decoration: none; color: var(--c-cream);
}
.footer-wordmark-a .wm-guard { color: var(--c-gold); }
.footer-wordmark-a .wm-tm {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 0.45em; font-weight: 400; margin-left: 0.1em;
  letter-spacing: 0; vertical-align: super; opacity: 0.55; display: inline-block;
}
.footer-tagline-a {
  font-family: var(--f-mono);
  font-size: 9px; letter-spacing: 0.24em; text-transform: uppercase;
  color: rgba(236,226,205,0.62); max-width: 360px; line-height: 1.6;
}
.footer-cols-a { display: flex; gap: 56px; flex-shrink: 0; }
.footer-col-a { display: flex; flex-direction: column; gap: 8px; }
.footer-col-head-a {
  font-family: var(--f-mono);
  font-size: 9px; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--c-gold); margin-bottom: 4px;
}
.footer-col-a a {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--f-mono);
  font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(236,226,205,0.62); text-decoration: none; transition: color var(--dur-base);
}
.footer-col-a a:hover { color: var(--c-gold); }
.footer-base-a {
  padding: 18px 64px 28px;
  border-top: 1px solid rgba(236,226,205,0.14);
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--f-mono);
  font-size: 9px; letter-spacing: 0.24em; text-transform: uppercase;
  color: rgba(236,226,205,0.32);
}
.footer-base-a a { color: rgba(236,226,205,0.32); text-decoration: none; transition: color var(--dur-base); }
.footer-base-a a:hover { color: rgba(236,226,205,0.62); }
.diamond-svg { display: inline-block; vertical-align: middle; flex-shrink: 0; }
@media (max-width: 900px) {
  .footer-a-inner { flex-direction: column; padding: 28px 24px; gap: 28px; }
  .footer-cols-a { gap: 28px; flex-wrap: wrap; }
  .footer-base-a { padding: 14px 24px 24px; }
}
@media (max-width: 480px) {
  .footer-cols-a { display: grid; grid-template-columns: 1fr 1fr; }
}

/* ═══ NOTICE / CALLOUT ═══ */
.notice { padding: var(--s-5) var(--s-6); border-radius: var(--r-md); font-size: var(--t-sm); line-height: 1.7; }
.notice-warning {
  background: var(--c-gold-08); border: 1px solid var(--c-gold-40);
  border-left: 3px solid var(--c-gold); color: var(--c-cream-70);
}
.notice-title {
  font-family: var(--f-script); font-size: var(--t-xs); letter-spacing: 2px;
  text-transform: uppercase; color: var(--c-gold); margin-bottom: var(--s-2);
}

/* ═══ PROSE (policy pages) ═══ */
.prose h2 {
  font-family: var(--f-serif); font-size: 1.5rem; font-weight: 600;
  color: var(--c-gold); margin: var(--s-12) 0 var(--s-4); letter-spacing: 0.01em;
}
.prose p { font-size: var(--t-sm); line-height: 1.9; color: var(--c-cream-70); margin-bottom: var(--s-4); }
.prose ul { margin: 0 0 var(--s-4) var(--s-5); }
.prose ul li { font-size: var(--t-sm); line-height: 1.9; color: var(--c-cream-70); margin-bottom: var(--s-2); }
.prose a { color: var(--c-gold); }
.prose a:hover { text-decoration: underline; }
.prose strong { color: var(--c-cream-88); font-weight: 600; }

/* ═══ VERTICALS GRID ═══ */
.verticals-grid {
  display: grid;
  grid-template-columns: 1.65fr 1fr;
  grid-template-rows: auto auto;
  gap: var(--s-4);
}
.vertical-card {
  border: 1px solid var(--c-gold-20);
  border-radius: var(--r-lg);
  padding: var(--s-10) var(--s-8);
  display: flex; flex-direction: column;
  gap: var(--s-5);
  position: relative; overflow: hidden;
  transition: border-color var(--dur-base), box-shadow var(--dur-base);
  text-decoration: none; color: inherit;
}
.vertical-card:hover {
  border-color: var(--c-gold-40);
  box-shadow: 0 0 60px rgba(28, 42, 68, 0.3);
}
/* Legal spans both rows — the anchor card */
.vertical-card-legal {
  grid-row: 1 / 3;
  background: rgba(28, 42, 68, 0.18);
  border-color: var(--c-gold);
  box-shadow: 0 0 80px rgba(28, 42, 68, 0.25);
}
.vertical-card-legal:hover {
  box-shadow: 0 0 100px rgba(28, 42, 68, 0.4);
  border-color: var(--c-gold-hi);
}
.vertical-card-securities {
  background: var(--c-cream-08);
}
.vertical-card-screenwriting {
  background: var(--c-cream-08);
}
/* Corner accent on legal card */
.vertical-card-legal::before {
  content: '';
  position: absolute; top: 0; left: 0;
  width: 3px; height: 100%;
  background: linear-gradient(to bottom, var(--c-gold), transparent);
}
.vertical-card-label {
  font-family: var(--f-script); font-size: var(--t-xs); letter-spacing: 4px;
  text-transform: uppercase; color: var(--c-gold);
}
.vertical-card-icon { font-size: 2rem; line-height: 1; }
.vertical-card-legal .vertical-card-icon { font-size: 2.75rem; }
.vertical-card-title {
  font-family: var(--f-serif); font-weight: 600;
  font-size: var(--t-xl); color: var(--c-cream);
  line-height: 1.1; letter-spacing: 0.01em;
}
.vertical-card-legal .vertical-card-title { font-size: var(--t-2xl); }
.vertical-card-body {
  font-size: var(--t-sm); color: var(--c-cream-55); line-height: 1.8; flex: 1;
}
.vertical-card-legal .vertical-card-body { font-size: var(--t-base); color: var(--c-cream-70); }
.vertical-card-uses {
  display: flex; flex-wrap: wrap; gap: var(--s-2);
}
.vertical-card-use {
  font-family: var(--f-script); font-size: var(--t-xs); letter-spacing: 1px;
  text-transform: uppercase; color: var(--c-cream-45);
  border: 1px solid var(--c-gold-20); border-radius: var(--r-pill);
  padding: 2px var(--s-3);
}
.vertical-card-cta {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-family: var(--f-display); font-size: 0.875rem; letter-spacing: 2px;
  color: var(--c-gold);
  transition: gap var(--dur-base), color var(--dur-base);
}
.vertical-card:hover .vertical-card-cta { gap: var(--s-3); color: var(--c-gold-hi); }
.vertical-card-featured-badge {
  position: absolute; top: var(--s-5); right: var(--s-5);
  background: var(--c-gold); color: var(--c-ink);
  font-family: var(--f-display); font-size: 0.65rem; letter-spacing: 2px;
  padding: 3px 10px; border-radius: var(--r-pill);
}

/* ═══ UNIVERSAL FEATURES STRIP ═══ */
.universal-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--s-6); margin-top: var(--s-12);
}
.universal-item {
  display: flex; flex-direction: column; gap: var(--s-3);
  border-top: 1px solid var(--c-gold-40); padding-top: var(--s-5);
}
.universal-icon { font-size: 1.25rem; }
.universal-title {
  font-family: var(--f-serif); font-size: var(--t-base); font-weight: 600;
  color: var(--c-cream); line-height: 1.2;
}
.universal-body { font-size: var(--t-sm); color: var(--c-cream-55); line-height: 1.8; }

/* ═══ EDITION CTA ROW ═══ */
.edition-cta-row {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--s-4); margin-top: var(--s-10);
}
.edition-cta-card {
  display: flex; flex-direction: column; align-items: center;
  gap: var(--s-3); padding: var(--s-8) var(--s-6);
  border: 1px solid var(--c-gold-20); border-radius: var(--r-lg);
  background: var(--c-cream-08); text-decoration: none; color: inherit;
  transition: border-color var(--dur-base), background var(--dur-base), box-shadow var(--dur-base);
}
.edition-cta-card:hover {
  border-color: var(--c-gold-40);
  background: rgba(28, 42, 68, 0.15);
  box-shadow: 0 0 40px rgba(28,42,68,0.2);
}
.edition-cta-card-featured {
  border-color: var(--c-gold);
  background: rgba(28, 42, 68, 0.2);
}
.edition-cta-icon { font-size: 2rem; line-height: 1; }
.edition-cta-label {
  font-family: var(--f-serif); font-size: var(--t-lg); font-weight: 600;
  color: var(--c-cream); letter-spacing: 0.01em;
}
.edition-cta-sub {
  font-family: var(--f-script); font-size: var(--t-xs); letter-spacing: 2px;
  text-transform: uppercase; color: var(--c-gold);
}

@media (max-width: 860px) {
  .verticals-grid { grid-template-columns: 1fr; grid-template-rows: auto; }
  .vertical-card-legal { grid-row: auto; }
  .edition-cta-row { grid-template-columns: 1fr; max-width: 340px; margin-left: auto; margin-right: auto; }
}

/* ═══ ANIMATIONS ═══ */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ═══ ACCESSIBILITY ═══ */
:focus-visible { outline: 2px solid var(--c-gold); outline-offset: 3px; border-radius: var(--r-sm); }

/* ═══ RESPONSIVE ═══ */
@media (max-width: 960px) {
  .pricing-grid { grid-template-columns: 1fr; max-width: 400px; margin-left: auto; margin-right: auto; }
  .pricing-card.featured { order: -1; }
  .use-cases-strip { grid-template-columns: repeat(2, 1fr); }
  .trust-bar { gap: var(--s-8); }
}
@media (max-width: 768px) {
  .nav-links, .nav-signin, .nav-signup, .nav-badge { display: none; }
  .nav-hamburger { display: flex; }
  .demo-inner { grid-template-columns: 1fr; }
  .demo-stats { gap: var(--s-6); }
  .footer-inner { grid-template-columns: 1fr; }
  .footer-links { align-items: flex-start; flex-direction: row; flex-wrap: wrap; gap: var(--s-4); }
  .compliance-row { gap: var(--s-3); }
  .trust-bar { gap: var(--s-6); padding: var(--s-4) var(--s-4); }
}
@media (max-width: 600px) {
  .bio-inner { grid-template-columns: 1fr; gap: var(--s-6); }
  .hero-cta-group { flex-direction: column; align-items: stretch; }
  .section { padding: var(--s-16) var(--s-4); }
  .use-cases-strip { grid-template-columns: 1fr; }
  .trust-bar { flex-direction: column; align-items: center; gap: var(--s-5); }
}

/* ═══ PRINT ═══ */
@media print {
  .nav, .nav-mobile, body::after { display: none; }
  body { background: white; color: black; }
}

/* ═══ REDUCED MOTION ═══ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}