/* ==========================================================================
   W3D Technologies · Cybersecurity CPR™
   Warm paper, ink, and a little ledger-book character.
   ========================================================================== */

:root {
  /* Night */
  --night-0: #08061c;
  --night-1: #100c30;
  --night-2: #1a1456;
  --night-line: rgba(255, 255, 255, 0.12);
  --night-text: #f4f1ff;
  --night-muted: rgba(232, 228, 255, 0.72);

  /* Paper */
  --paper: #f3efe6;
  --paper-2: #ebe5d8;
  --paper-3: #e2dac9;
  --sheet: #fbf9f4;
  --ink: #17142b;
  --ink-2: #2d2a40;
  --muted: #625d70;
  --line: #d9d1c1;
  --line-soft: #e6dfd1;

  /* Brand */
  --royal: #2340c8;
  --royal-deep: #182e96;
  --violet: #8a6dff;
  --lilac: #cbbfff;
  --pulse: #7cf0ff;
  --vermilion: #d9472b;
  --marker: #ffe07a;

  /* Pastels (for the illustrations) */
  --peri: #d9dffb;
  --butter: #f4dc94;
  --sky: #cdeef3;
  --mint: #dcefe4;
  --blush: #f3dbe9;

  --radius-sm: 10px;
  --radius: 18px;
  --radius-lg: 30px;
  --shadow-sm: 0 1px 2px rgba(40, 30, 10, .06), 0 2px 10px rgba(40, 30, 10, .05);
  --shadow: 0 2px 4px rgba(40, 30, 10, .05), 0 18px 40px -12px rgba(40, 30, 10, .16);
  --shadow-lg: 0 40px 90px -30px rgba(20, 14, 70, .45);

  --font-display: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  --font-serif: "Instrument Serif", ui-serif, Georgia, serif;
  --font-body: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-hand: "Caveat", "Bradley Hand", cursive;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --container: 1320px;
  --gutter: clamp(18px, 4.5vw, 56px);
  --header-h: 80px;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 24px); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } }
html, body { max-width: 100%; overflow-x: clip; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 19px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
/* paper grain over the whole page */
body::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 300; opacity: .28; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .3 0 0 0 0 .22 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
p { margin: 0 0 1em; }
ul, ol { margin: 0; padding: 0; }
h1, h2, h3, h4 { font-family: var(--font-display); font-optical-sizing: auto; line-height: 1.04; letter-spacing: -0.03em; margin: 0; font-weight: 600; color: inherit; }
em, .serif { font-family: var(--font-serif); font-style: italic; font-weight: 400; letter-spacing: -0.01em; }
h1 em, h2 em, h3 em { font-size: 1.06em; line-height: .9; }
button { font: inherit; }
::selection { background: var(--marker); color: var(--ink); }
:focus-visible { outline: 2px solid var(--vermilion); outline-offset: 3px; border-radius: 6px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: 16px; top: -60px; z-index: 400; background: #fff; color: var(--ink); padding: 10px 16px; border-radius: 10px; font-weight: 600; }
.skip-link:focus { top: 12px; }
.tnum { font-variant-numeric: tabular-nums lining-nums; }

.container { width: 100%; max-width: var(--container); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.narrow { max-width: 920px; }
.section { padding: clamp(84px, 11vw, 150px) 0; position: relative; }
.section--tight { padding: clamp(60px, 7vw, 96px) 0; }
.section--sheet { background: var(--sheet); }
.section--paper2 { background: var(--paper-2); }
.section--dark { background: var(--night-1); color: var(--night-text); overflow: hidden; }
.section--dark .lead, .section--dark p { color: var(--night-muted); }

/* ---------- Type ---------- */
.label { display: flex; align-items: baseline; gap: 12px; font: 500 16px/1.2 var(--font-body); color: var(--muted); margin: 0 0 26px; letter-spacing: 0; }
.label b { font: 400 italic 26px/1 var(--font-serif); color: var(--vermilion); letter-spacing: 0; }
.label::after { content: ""; flex: 0 0 48px; height: 1px; background: currentColor; opacity: .35; transform: translateY(-5px); }
.section--dark .label, .hero .label, .page-hero .label { color: var(--night-muted); }
.section--dark .label b, .page-hero .label b { color: #ff9a80; }

.h-xl { font-size: clamp(56px, 8.6vw, 132px); font-weight: 700; letter-spacing: -0.05em; line-height: .9; }
.h-lg { font-size: clamp(42px, 5.8vw, 86px); font-weight: 600; letter-spacing: -0.04em; line-height: .98; }
.h-md { font-size: clamp(30px, 3.4vw, 48px); letter-spacing: -0.03em; line-height: 1.05; }
.h-sm { font-size: clamp(22px, 2vw, 28px); letter-spacing: -0.02em; line-height: 1.15; }
.lead { font-size: clamp(20px, 1.75vw, 24px); line-height: 1.55; color: var(--muted); max-width: 60ch; }
.muted { color: var(--muted); }
.tm { font-size: .5em; vertical-align: super; letter-spacing: 0; font-weight: 500; font-family: var(--font-body); font-style: normal; }
.section-head { max-width: 900px; margin-bottom: clamp(48px, 6vw, 80px); }
.section-head .lead { margin-top: 26px; }
.head-split { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(32px, 6vw, 96px); align-items: end; margin-bottom: clamp(48px, 6vw, 80px); }
.head-split .lead { margin: 0; }
@media (max-width: 900px) { .head-split { grid-template-columns: 1fr; } }
.statement { font: 400 clamp(30px, 3.6vw, 52px)/1.18 var(--font-serif); letter-spacing: -0.015em; color: var(--ink); max-width: 30ch; }
.section--dark .statement { color: #fff; }
.statement.center { margin: 0 auto; text-align: center; }

/* highlighter + hand-drawn marks */
.mark {
  background-image: linear-gradient(100deg, rgba(255,224,122,0) .5%, var(--marker) 2%, rgba(255,224,122,.9) 50%, var(--marker) 97%, rgba(255,224,122,0) 99%);
  background-repeat: no-repeat; background-size: 0% 82%; background-position: 0 70%;
  padding: 0 .12em; margin: 0 -.06em; border-radius: .3em .5em .4em .2em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  transition: background-size 1.1s var(--ease) .25s; color: inherit;
}
.in .mark, .mark.in, .no-js .mark { background-size: 100% 82%; }
.section--dark .mark { color: var(--ink); }
.scribble { position: relative; display: inline-block; white-space: nowrap; }
.scribble > svg { position: absolute; left: -3%; width: 106%; bottom: -.22em; height: .42em; overflow: visible; pointer-events: none; }
.scribble.circle > svg { left: -9%; width: 118%; top: -22%; height: 144%; bottom: auto; }
.scribble path, .hand-arrow path { fill: none; stroke: var(--vermilion); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.2s var(--ease) .4s; }
.section--dark .scribble path, .hero .scribble path, .page-hero .scribble path, .hero .hand-arrow path { stroke: #ff9a80; }
.in .scribble path, .in .hand-arrow path, .no-js .scribble path, .no-js .hand-arrow path { stroke-dashoffset: 0; }
.hand { font: 600 clamp(22px, 2vw, 28px)/1.05 var(--font-hand); color: var(--vermilion); transform: rotate(-4deg); display: inline-flex; align-items: center; gap: 8px; }
.section--dark .hand, .hero .hand { color: #ff9a80; }
.hand-arrow { width: 70px; height: 44px; flex-shrink: 0; overflow: visible; }

/* ---------- Buttons ---------- */
.btn {
  --bg: var(--ink); --fg: #fff;
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 58px; padding: 0 30px; border-radius: 999px; border: 0; cursor: pointer;
  background: var(--bg); color: var(--fg);
  font: 600 17px/1 var(--font-body); white-space: nowrap;
  transition: transform .3s var(--ease), background .25s, box-shadow .3s;
}
.btn:hover { transform: translateY(-2px); }
.btn svg { width: 19px; height: 19px; transition: transform .3s var(--ease); }
.btn:hover svg { transform: translateX(4px); }
.btn--royal { --bg: var(--royal); }
.btn--royal:hover { --bg: var(--royal-deep); }
.btn--light { --bg: #fff; --fg: var(--night-1); box-shadow: 0 14px 40px -14px rgba(138,109,255,.8); }
.btn--ghost { --bg: transparent; --fg: currentColor; box-shadow: inset 0 0 0 1.5px currentColor; }
.btn--glass { --bg: rgba(255,255,255,.08); --fg: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.25); backdrop-filter: blur(10px); }
.btn--glass:hover { box-shadow: inset 0 0 0 1px rgba(255,255,255,.5); }
.btn--sm { min-height: 46px; padding: 0 20px; font-size: 15.5px; }
.btn--block { width: 100%; }
.link-arrow { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; color: var(--ink); border-bottom: 1.5px solid currentColor; padding-bottom: 3px; }
.link-arrow svg { width: 17px; height: 17px; transition: transform .3s var(--ease); }
.link-arrow:hover { color: var(--royal); }
.link-arrow:hover svg { transform: translateX(4px); }
.section--dark .link-arrow { color: #fff; }

/* ==========================================================================
   Header
   ========================================================================== */
.site-header { position: fixed; inset: 0 0 auto 0; z-index: 100; height: var(--header-h); display: flex; align-items: center; color: #fff; transition: background .35s var(--ease), box-shadow .35s; }
.site-header.is-scrolled { background: rgba(12, 9, 38, .9); backdrop-filter: saturate(160%) blur(18px); -webkit-backdrop-filter: saturate(160%) blur(18px); box-shadow: 0 1px 0 rgba(255,255,255,.08); }
.site-header .container { display: flex; align-items: center; gap: 24px; max-width: 1440px; }
.brand { display: inline-flex; align-items: center; gap: 12px; flex-shrink: 0; }
.brand-mark { width: 40px; height: 40px; }
.brand-name { font: 700 22px/1 var(--font-display); letter-spacing: -0.03em; }
.brand-name small { display: block; font: 500 10.5px/1 var(--font-body); letter-spacing: .22em; text-transform: uppercase; opacity: .65; margin-top: 5px; }
.nav { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.nav > a, .nav-drop > button { display: inline-flex; align-items: center; gap: 6px; padding: 10px 15px; border-radius: 999px; font: 500 16px/1 var(--font-body); color: rgba(255,255,255,.8); background: none; border: 0; cursor: pointer; transition: color .2s, background .2s; }
.nav > a:hover, .nav-drop > button:hover, .nav > a[aria-current="page"], .nav-drop.is-active > button { color: #fff; background: rgba(255,255,255,.08); }
.nav-drop { position: relative; }
.nav-drop > button svg { width: 13px; height: 13px; transition: transform .2s; }
.nav-drop:hover > button svg, .nav-drop:focus-within > button svg { transform: rotate(180deg); }
.nav-menu { position: absolute; top: calc(100% + 12px); left: 50%; translate: -50% 0; width: 380px; background: rgba(16, 12, 48, .97); border: 1px solid var(--night-line); border-radius: 22px; padding: 10px; box-shadow: 0 30px 60px -20px rgba(0,0,0,.6); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: .25s var(--ease); }
.nav-menu::before { content: ""; position: absolute; inset: -14px 0 auto; height: 14px; }
.nav-drop:hover .nav-menu, .nav-drop:focus-within .nav-menu { opacity: 1; visibility: visible; transform: none; }
.nav-menu a { display: flex; gap: 16px; padding: 14px; border-radius: 14px; transition: background .2s; align-items: center; }
.nav-menu a:hover { background: rgba(255,255,255,.06); }
.nav-menu .nm-icon { width: 46px; height: 46px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center; font: 400 italic 28px/1 var(--font-serif); color: var(--lilac); border: 1px solid rgba(255,255,255,.2); }
.nav-menu strong { display: block; font: 600 16px/1.3 var(--font-body); color: #fff; }
.nav-menu span { display: block; font-size: 14px; line-height: 1.45; color: var(--night-muted); margin-top: 2px; }
.header-cta { display: flex; align-items: center; gap: 16px; margin-left: 10px; }
.header-phone { font: 500 15.5px/1 var(--font-body); color: rgba(255,255,255,.82); display: inline-flex; align-items: center; gap: 8px; }
.header-phone:hover { color: #fff; }
.header-phone svg { width: 16px; height: 16px; }
.menu-toggle { display: none; margin-left: auto; width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.06); color: #fff; cursor: pointer; }
.menu-toggle span { display: block; width: 18px; height: 2px; background: currentColor; margin: 4px auto; border-radius: 2px; transition: .3s; }
.mobile-nav { display: none; }
@media (max-width: 1120px) { .header-phone { display: none; } }
@media (max-width: 960px) {
  .nav, .header-cta { display: none; }
  .menu-toggle { display: block; }
  .mobile-nav { display: block; position: fixed; inset: 0; z-index: 99; background: var(--night-0); color: #fff; padding: calc(var(--header-h) + 16px) var(--gutter) 32px; overflow-y: auto; opacity: 0; visibility: hidden; transition: .3s var(--ease); }
  .mobile-nav a { display: block; padding: 14px 0; font: 600 28px/1.15 var(--font-display); letter-spacing: -0.02em; border-bottom: 1px solid var(--night-line); }
  .mobile-nav a.sub { font: 400 italic 24px/1.2 var(--font-serif); padding-left: 18px; color: var(--night-muted); }
  .mobile-nav .btn { margin-top: 28px; width: 100%; border-bottom: 0; font: 600 17px/1.2 var(--font-body); }
  body.nav-open .mobile-nav { opacity: 1; visibility: visible; }
  body.nav-open { overflow: hidden; }
  body.nav-open .menu-toggle span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  body.nav-open .menu-toggle span:nth-child(2) { opacity: 0; }
  body.nav-open .menu-toggle span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
}

/* ==========================================================================
   Home hero
   ========================================================================== */
.hero { position: relative; color: var(--night-text); background: var(--paper); padding: 10px; }
.hero-frame {
  position: relative; overflow: hidden; border-radius: var(--radius-lg);
  min-height: max(780px, min(100svh - 20px, 1000px));
  background:
    radial-gradient(1200px 700px at 70% 45%, rgba(91, 61, 255, .55), transparent 60%),
    radial-gradient(800px 600px at 15% 100%, rgba(28, 63, 208, .55), transparent 60%),
    radial-gradient(600px 400px at 100% 0%, rgba(124, 240, 255, .14), transparent 60%),
    linear-gradient(180deg, #120d45 0%, #1a1268 55%, #241a8a 100%);
  display: flex; flex-direction: column;
}
.hero-frame::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .22; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.hero-grid-lines { position: absolute; inset: 0; pointer-events: none; opacity: .5; background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px); background-size: 72px 72px; mask-image: radial-gradient(ellipse 70% 60% at 60% 45%, #000 20%, transparent 75%); -webkit-mask-image: radial-gradient(ellipse 70% 60% at 60% 45%, #000 20%, transparent 75%); }
.hero-orb { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.hero-orb canvas { width: 100% !important; height: 100% !important; }
.hero-scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, rgba(16,11,62,.8) 0%, rgba(16,11,62,.5) 34%, rgba(16,11,62,0) 56%); }
@media (max-width: 860px) { .hero-scrim { background: linear-gradient(180deg, rgba(16,11,62,.72) 0%, rgba(16,11,62,.55) 55%, rgba(16,11,62,.1) 100%); } }
.orb-fallback { position: absolute; left: 62%; top: 48%; width: min(50vw, 600px); aspect-ratio: 1; translate: -50% -50%; border-radius: 46% 54% 38% 62% / 55% 38% 62% 45%; background: radial-gradient(circle at 32% 28%, rgba(255,255,255,.85), transparent 18%), radial-gradient(circle at 70% 70%, rgba(124,240,255,.55), transparent 35%), radial-gradient(circle at 30% 75%, rgba(246,140,255,.55), transparent 40%), radial-gradient(circle at 50% 50%, #6a4dff, #2a1a9e 70%); filter: drop-shadow(0 40px 80px rgba(80,50,255,.6)); animation: morph 14s ease-in-out infinite; }
.hero-orb.webgl-ready .orb-fallback { display: none; }
@keyframes morph { 0%,100% { border-radius: 46% 54% 38% 62% / 55% 38% 62% 45%; transform: rotate(0deg); } 50% { border-radius: 60% 40% 55% 45% / 40% 60% 40% 60%; transform: rotate(12deg); } }

.hero-inner { position: relative; z-index: 2; flex: 1; display: grid; grid-template-columns: 1fr auto; gap: 40px; padding: calc(var(--header-h) + clamp(40px, 7vh, 90px)) clamp(22px, 4.4vw, 64px) 0; }
.hero-copy { max-width: 760px; }
.hero-kicker { display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px 8px 8px; border-radius: 999px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); backdrop-filter: blur(10px); font: 500 15.5px/1.25 var(--font-body); color: #ece8ff; margin-bottom: 30px; }
.hero-kicker .flag { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #fff; flex-shrink: 0; }
.hero-kicker .flag svg { width: 15px; height: 15px; }
.hero h1 { font-size: clamp(60px, 8.8vw, 136px); font-weight: 700; letter-spacing: -0.055em; line-height: .88; }
.hero h1 .line { display: block; }
.hero h1 em { color: var(--lilac); font-size: 1.1em; letter-spacing: -0.03em; padding-right: .05em; }
.hero-sub { font: 400 clamp(22px, 2.1vw, 30px)/1.25 var(--font-serif); color: #fff; margin: 30px 0 14px; max-width: 30ch; }
.hero-sub b { font: 600 .62em/1 var(--font-body); letter-spacing: .14em; text-transform: uppercase; display: block; color: var(--lilac); margin-bottom: 10px; }
.hero p.lead { color: rgba(236,232,255,.8); max-width: 52ch; font-size: clamp(18px, 1.5vw, 21px); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 36px; align-items: center; }
.hero-actions .hand { margin-left: 8px; }

.hero-aside { align-self: start; padding-top: 18px; min-width: 220px; }
.hero-aside h2 { font: 400 italic 22px/1 var(--font-serif); letter-spacing: 0; display: flex; align-items: center; gap: 8px; justify-content: flex-end; margin-bottom: 18px; color: rgba(255,255,255,.92); }
.hero-aside h2 svg { width: 16px; height: 16px; }
.pill-stack { list-style: none; display: grid; justify-items: end; gap: 10px; }
.pill-stack a { display: inline-flex; align-items: center; gap: 12px; padding: 10px 12px 10px 20px; border-radius: 999px; border: 1px solid rgba(255,255,255,.24); background: rgba(14, 10, 50, .25); backdrop-filter: blur(8px); font: 500 16px/1 var(--font-body); color: #ece9ff; transition: .25s var(--ease); }
.pill-stack a:hover { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.45); transform: translateX(-4px); }
.pill-stack a i { font: 400 italic 17px/1 var(--font-serif); display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; border: 1px solid rgba(255,255,255,.35); }

.hero-bottom { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 20px; padding: 40px clamp(12px, 2vw, 24px) 0; margin-top: auto; }
.hero-card { background: var(--sheet); color: var(--ink); border-radius: 22px 22px 0 0; padding: 20px 22px 24px; width: min(330px, 100%); box-shadow: 0 -20px 60px -20px rgba(0,0,0,.4); transform: translateY(8px); }
.hero-card.right { justify-self: end; background: rgba(12, 9, 40, .92); color: #fff; border: 1px solid var(--night-line); border-bottom: 0; }
.hero-card h3 { font: 600 16px/1.3 var(--font-display); letter-spacing: -0.01em; margin-bottom: 14px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.hero-card .chip { font: 600 11px/1 var(--font-body); letter-spacing: .08em; text-transform: uppercase; padding: 5px 8px; border-radius: 999px; background: #e9ecfb; color: var(--royal); }
.hero-card.right .chip { background: rgba(124,240,255,.12); color: var(--pulse); }
.score-row { display: grid; grid-template-columns: 74px 1fr; align-items: center; gap: 12px; font: 500 13.5px/1 var(--font-body); color: var(--muted); margin-top: 10px; }
.score-row .bar { height: 8px; border-radius: 8px; background: #ece7dc; overflow: hidden; }
.score-row .bar span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--royal), var(--violet)); transform-origin: left; animation: grow 1.6s var(--ease) both .6s; }
@keyframes grow { from { transform: scaleX(0); } }
.pulse-line { width: 100%; height: 52px; }
.pulse-line path { stroke-dasharray: 400; stroke-dashoffset: 400; animation: ecg 3.2s linear infinite; }
@keyframes ecg { to { stroke-dashoffset: 0; } }
.hero-card .live { display: flex; align-items: center; gap: 8px; font: 500 13.5px/1.3 var(--font-body); color: rgba(255,255,255,.75); margin-top: 6px; }
.dot-live { width: 8px; height: 8px; border-radius: 50%; background: #3ee08f; box-shadow: 0 0 0 0 rgba(62,224,143,.6); animation: ping 2s infinite; }
@keyframes ping { 70% { box-shadow: 0 0 0 10px rgba(62,224,143,0); } 100% { box-shadow: 0 0 0 0 rgba(62,224,143,0); } }
.framework-strip { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; padding-bottom: 26px; }
.framework-strip span { display: inline-flex; align-items: center; gap: 10px; padding: 13px 22px; border-radius: 999px; background: rgba(10, 8, 40, .5); border: 1px solid rgba(255,255,255,.16); backdrop-filter: blur(12px); font: 600 15px/1 var(--font-display); letter-spacing: .01em; color: #fff; }
.framework-strip span::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #fff; box-shadow: 0 0 12px #fff; }
@media (max-width: 1100px) { .hero-bottom { grid-template-columns: 1fr; justify-items: center; } .hero-card { display: none; } }
@media (max-width: 860px) { .hero-inner { grid-template-columns: 1fr; } .hero-aside { display: none; } .orb-fallback { left: 70%; top: 62%; opacity: .7; } }

/* ==========================================================================
   "Built for" strip
   ========================================================================== */
.proof { padding: 34px 0 30px; border-bottom: 1px solid var(--line); }
.proof .container { display: flex; align-items: center; gap: 36px; max-width: 1440px; }
.proof p { margin: 0; font: 500 16px/1.4 var(--font-body); color: var(--muted); white-space: nowrap; }
.marquee { overflow: hidden; flex: 1; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee-track { display: flex; gap: 40px; width: max-content; animation: marquee 55s linear infinite; }
.marquee-track span { font: 400 italic clamp(26px, 2.4vw, 34px)/1.1 var(--font-serif); color: var(--ink); white-space: nowrap; display: inline-flex; align-items: center; gap: 40px; }
.marquee-track span::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--vermilion); opacity: .7; }
@keyframes marquee { to { transform: translateX(-50%); } }
@media (max-width: 700px) { .proof .container { flex-direction: column; gap: 14px; align-items: flex-start; } }

/* ==========================================================================
   Editorial bits
   ========================================================================== */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 7vw, 120px); align-items: start; }
.split--center { align-items: center; }
.split > *, .hero-inner > *, .tabpanel > *, .contact > *, .page-hero-grid > *, .doc > *, .assess-wrap > *, .hero-bottom > *, .head-split > * { min-width: 0; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }

.ruled { list-style: none; border-top: 1px solid var(--line); }
.ruled > li { display: grid; grid-template-columns: 56px 1fr; gap: 14px; align-items: baseline; padding: 20px 0; border-bottom: 1px solid var(--line); font-size: 19px; line-height: 1.5; }
.ruled > li > .n { font: 400 italic 28px/1 var(--font-serif); color: var(--vermilion); }
.ruled.plain > li { grid-template-columns: 1fr; }
.section--dark .ruled, .section--dark .ruled > li { border-color: var(--night-line); }
.section--dark .ruled > li { color: #ebe8ff; }
.ruled.two { display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(28px, 4vw, 64px); border-top: 0; }
.ruled.two > li:nth-child(-n+2) { border-top: 1px solid var(--line); }
.section--dark .ruled.two > li:nth-child(-n+2) { border-top-color: var(--night-line); }
@media (max-width: 760px) { .ruled.two { grid-template-columns: 1fr; } .ruled.two > li:nth-child(2) { border-top: 0; } }

.pullquote { margin: clamp(64px, 8vw, 110px) 0 0; padding-top: clamp(40px, 5vw, 64px); border-top: 1px solid var(--line); display: grid; grid-template-columns: 180px 1fr; gap: 32px; }
.pullquote .hand { align-self: start; }
.pullquote p { font: 400 clamp(30px, 3.8vw, 56px)/1.14 var(--font-serif); letter-spacing: -0.015em; margin: 0; color: var(--ink); }
@media (max-width: 760px) { .pullquote { grid-template-columns: 1fr; gap: 12px; } }

.ticks { list-style: none; display: grid; gap: 14px; }
.ticks li { display: grid; grid-template-columns: 26px 1fr; gap: 12px; align-items: start; font-size: 19px; line-height: 1.5; }
.ticks li::before { content: ""; width: 20px; height: 14px; margin-top: 6px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 15'%3E%3Cpath d='M1.5 8.2c2 1.4 3.7 3 5 4.9 3.4-5.2 7.6-9 13.8-11.6' fill='none' stroke='%232340c8' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/contain; }
.section--dark .ticks li::before { filter: brightness(2.6) saturate(.6); }
.ticks.two { grid-template-columns: 1fr 1fr; column-gap: 36px; }
@media (max-width: 700px) { .ticks.two { grid-template-columns: 1fr; } }

.dash-list { list-style: none; display: grid; gap: 16px; margin: 0 0 30px; }
.dash-list li { display: grid; grid-template-columns: 30px 1fr; gap: 10px; color: var(--ink-2); font-size: 19px; line-height: 1.55; }
.dash-list li::before { content: ""; height: 8px; margin-top: 12px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 8'%3E%3Cpath d='M1.5 5.2c4-2.6 8.4-3.4 13-2.1 3.2.9 6.4 1.2 9.8-.6' fill='none' stroke='%23d9472b' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat left center/24px 8px; }
.section--dark .dash-list li { color: var(--night-muted); }

/* ==========================================================================
   Solution tabs
   ========================================================================== */
.tabs-shell { background: var(--sheet); border: 1px solid var(--line-soft); border-radius: var(--radius-lg); padding: clamp(28px, 5vw, 72px); box-shadow: var(--shadow-sm); }
.tablist { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: clamp(40px, 5vw, 68px); }
.tab { display: inline-flex; align-items: center; gap: 10px; padding: 13px 22px; border-radius: 999px; cursor: pointer; border: 1px solid var(--line); background: transparent; color: var(--ink); font: 500 17px/1 var(--font-body); transition: .25s var(--ease); }
.tab i { font: 400 italic 21px/1 var(--font-serif); color: var(--vermilion); }
.tab:hover { border-color: var(--ink); }
.tab[aria-selected="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }
.tab[aria-selected="true"] i { color: var(--lilac); }
.tabpanel { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(36px, 5vw, 80px); align-items: center; }
.tabpanel[hidden] { display: none; }
.tabpanel.is-entering .tp-copy, .tabpanel.is-entering .visual { animation: rise .6s var(--ease) both; }
.tabpanel.is-entering .visual { animation-delay: .08s; }
@keyframes rise { from { opacity: 0; transform: translateY(16px); } }
.tp-copy h3 { font-size: clamp(32px, 3.4vw, 48px); margin-bottom: 26px; letter-spacing: -0.035em; }
@media (max-width: 900px) { .tabpanel { grid-template-columns: 1fr; } .tablist { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 6px; } .tab { flex-shrink: 0; } }

/* ==========================================================================
   Illustrations (UI cards)
   ========================================================================== */
.visual { position: relative; aspect-ratio: 1.12; display: grid; place-items: center; isolation: isolate; }
.visual .halo { position: absolute; width: 74%; aspect-ratio: 1; border-radius: 50%; background: var(--halo, var(--butter)); z-index: -1; }
.mock { position: absolute; background: #fff; border-radius: 16px; box-shadow: 0 24px 60px -18px rgba(30, 22, 60, .28), 0 2px 6px rgba(30,22,60,.06); overflow: hidden; font-family: var(--font-body); }
.mock-bar { height: 40px; background: var(--royal); display: flex; align-items: center; padding: 0 14px; gap: 8px; }
.mock-bar .logo-sq { width: 20px; height: 20px; border-radius: 5px; background: rgba(255,255,255,.95); display: grid; place-items: center; }
.mock-bar .logo-sq svg { width: 14px; height: 14px; }
.mock-bar .dots { margin-left: auto; display: flex; gap: 6px; align-items: center; }
.mock-bar .dots i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.35); }
.mock-bar .dots i:last-child { width: 18px; height: 18px; background: rgba(255,255,255,.85); }
.mock-body { padding: 14px; }
.mock h4 { font: 600 13.5px/1.2 var(--font-body); letter-spacing: 0; color: var(--ink); margin: 0; }
.mock .sub { font-size: 11.5px; color: var(--muted); }
.skel { height: 8px; border-radius: 6px; background: #eeebe4; }
.skel.w30 { width: 30%; } .skel.w40 { width: 40%; } .skel.w55 { width: 55%; } .skel.w70 { width: 70%; } .skel.w85 { width: 85%; }
.skel.dark { background: #ddd8cc; }
.mrow { display: flex; align-items: center; gap: 10px; padding: 11px 0; border-bottom: 1px solid #f1eee7; }
.mrow:last-child { border: 0; }
.mrow .ico { width: 26px; height: 26px; border-radius: 8px; background: #f3f0ea; display: grid; place-items: center; flex-shrink: 0; }
.mrow .ico svg { width: 14px; height: 14px; color: #8f8a9e; }
.mrow .grow { flex: 1; display: grid; gap: 6px; }
.tag { display: inline-flex; align-items: center; gap: 6px; font: 600 10.5px/1 var(--font-body); padding: 5px 8px; border-radius: 999px; white-space: nowrap; }
.tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.tag.red { color: #c9382f; background: #fbe9e6; } .tag.amber { color: #a87600; background: #fdf2d3; } .tag.green { color: #13895a; background: #e1f4e9; } .tag.blue { color: var(--royal); background: #e8ecfc; }
.risk-item { border: 1px solid #efebe3; border-radius: 12px; padding: 12px; display: grid; grid-template-columns: 14px 1fr 1fr; gap: 12px; align-items: start; margin-top: 10px; }
.risk-item .bullet { width: 12px; height: 12px; border-radius: 50%; margin-top: 2px; }
.risk-item.hi { background: #fffaf1; border-color: #f2dfb6; }
.meter { display: grid; gap: 4px; }
.meter label { display: flex; justify-content: space-between; font: 500 11.5px/1 var(--font-body); color: var(--muted); }
.meter .track { height: 7px; border-radius: 6px; background: #eeebe4; overflow: hidden; }
.meter .track span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--royal), var(--violet)); }
.float-badge { position: absolute; z-index: 3; display: inline-flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 14px; background: #fff; box-shadow: 0 18px 40px -14px rgba(30,22,60,.3); font: 600 13px/1.2 var(--font-body); color: var(--ink); animation: bob 6s ease-in-out infinite; }
.float-badge .fb-ico { width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; color: #fff; }
.float-badge .fb-ico svg { width: 16px; height: 16px; }
.float-badge small { display: block; font-weight: 500; color: var(--muted); font-size: 11.5px; margin-top: 2px; }
@keyframes bob { 50% { transform: translateY(-8px); } }
.shield-3d { width: 52%; filter: drop-shadow(0 30px 40px rgba(28,63,208,.35)); animation: bob 7s ease-in-out infinite; }
.pedestal { position: absolute; bottom: 14%; width: 46%; aspect-ratio: 2.4; border-radius: 50%; background: radial-gradient(ellipse at 50% 35%, #fff 0 40%, #ebe7de 70%); box-shadow: 0 2px 0 3px rgba(35,64,200,.35), 0 30px 50px -10px rgba(30,22,60,.25); z-index: -1; }
.snapshots { display: flex; gap: 8px; margin-top: 12px; }
.snapshots .snap { flex: 1; height: 44px; border-radius: 10px; background: linear-gradient(160deg, #eef1ff, #dfe5ff); border: 1px solid #d6dcfb; position: relative; }
.snapshots .snap.lock::after { content: ""; position: absolute; right: 6px; top: 6px; width: 10px; height: 10px; border-radius: 3px; background: var(--royal); }
.progress { height: 10px; border-radius: 10px; background: #eeebe4; overflow: hidden; margin: 10px 0 6px; }
.progress span { display: block; height: 100%; width: 78%; border-radius: inherit; background: linear-gradient(90deg, #13a46c, #3ed69a); animation: grow 2.2s var(--ease) both; }
.timeline-90 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }
.timeline-90 div { border-radius: 10px; padding: 10px; background: #f5f2ec; font: 600 11px/1.3 var(--font-body); color: var(--ink); }
.timeline-90 div small { display: block; font-weight: 500; color: var(--muted); margin-bottom: 6px; }
.timeline-90 div:nth-child(1) { background: #e8ecfc; } .timeline-90 div:nth-child(2) { background: #fdf2d3; } .timeline-90 div:nth-child(3) { background: #e1f4e9; }
.gauge { width: 120px; }

/* ==========================================================================
   Cycle (dark)
   ========================================================================== */
.cycle-wrap { position: relative; max-width: 540px; margin: 0 auto; aspect-ratio: 1; }
.cycle-wrap svg.ring { position: absolute; inset: 0; width: 100%; height: 100%; animation: spin 80s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.cycle-core { position: absolute; inset: 30%; border-radius: 50%; display: grid; place-items: center; text-align: center; background: radial-gradient(circle at 35% 30%, #3b2bd9, #120d45 70%); box-shadow: 0 0 0 1px rgba(255,255,255,.12), 0 30px 80px -10px rgba(91,61,255,.7); color: #fff; }
.cycle-core strong { display: block; font: 700 clamp(26px, 3.4vw, 36px)/1 var(--font-display); letter-spacing: -0.03em; }
.cycle-core span { font: 400 italic 18px/1.2 var(--font-serif); color: var(--night-muted); }
.cycle-node { position: absolute; width: 33%; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; text-align: center; padding: 10px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.2); backdrop-filter: blur(10px); color: #fff; transition: .3s var(--ease); }
.cycle-node:hover { background: rgba(255,255,255,.12); transform: scale(1.04); }
.cycle-node b { display: block; font: 400 italic clamp(40px, 5vw, 60px)/.9 var(--font-serif); color: var(--lilac); }
.cycle-node em { font: 600 14px/1.2 var(--font-body); font-style: normal; letter-spacing: .02em; color: var(--night-muted); }
.cycle-node.n1 { left: 33.5%; top: -2%; } .cycle-node.n2 { right: -2%; bottom: 8%; } .cycle-node.n3 { left: -2%; bottom: 8%; }
.cycle-steps { list-style: none; counter-reset: s; border-top: 1px solid var(--night-line); }
.cycle-steps li { counter-increment: s; display: grid; grid-template-columns: 70px 1fr; gap: 12px; padding: 26px 0; border-bottom: 1px solid var(--night-line); }
.cycle-steps li::before { content: counter(s); font: 400 italic 48px/.9 var(--font-serif); color: #ff9a80; }
.cycle-steps h3 { font-size: 26px; margin-bottom: 8px; color: #fff; }
.cycle-steps p { margin: 0; font-size: 18px; }

/* ==========================================================================
   Who it's for
   ========================================================================== */
.industry-feature { border-radius: var(--radius-lg); padding: clamp(32px, 4.4vw, 56px); color: #fff; position: relative; overflow: hidden; background: radial-gradient(500px 300px at 100% 0%, rgba(124,240,255,.22), transparent 60%), linear-gradient(150deg, var(--royal) 0%, #2a1fb8 60%, #3b2bd9 100%); }
.industry-feature h3 { font: 400 clamp(34px, 3.4vw, 50px)/1.05 var(--font-serif); letter-spacing: -0.015em; margin: 0 0 18px; }
.industry-feature p { color: rgba(255,255,255,.84); font-size: 19px; }
.industry-feature .label { color: rgba(255,255,255,.75); }
.industry-feature .label b { color: var(--marker); }
.firm-list { display: flex; flex-wrap: wrap; gap: 10px 10px; margin-top: 26px; }
.firm-list span { font: 500 17px/1 var(--font-body); padding: 11px 16px; border-radius: 999px; border: 1px solid rgba(255,255,255,.3); }
.firm-list span.hl { background: #fff; color: var(--royal); border-color: #fff; }
.firm-list .scribble.circle > svg path { stroke: var(--marker); }
.groups { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-top: 40px; }
.groups h3 { font: 400 italic 26px/1.1 var(--font-serif); letter-spacing: 0; margin-bottom: 12px; }
.groups p { color: var(--muted); font-size: 18px; line-height: 1.7; margin: 0; }
@media (max-width: 640px) { .groups { grid-template-columns: 1fr; } }

/* ==========================================================================
   Triggers
   ========================================================================== */
.triggers { list-style: none; display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(32px, 5vw, 88px); counter-reset: t; }
.triggers li { counter-increment: t; display: grid; grid-template-columns: 76px 1fr; gap: 10px; align-items: start; padding: 28px 0; border-top: 1px solid var(--line); font-size: clamp(19px, 1.5vw, 21px); line-height: 1.5; color: var(--ink-2); }
.triggers li::before { content: counter(t, decimal-leading-zero); font: 400 italic 46px/.85 var(--font-serif); color: var(--royal); }
@media (max-width: 800px) { .triggers { grid-template-columns: 1fr; } }
.head-with-note { position: relative; }
.head-with-note > .hand { margin: 18px 0 0 38%; transform: rotate(-5deg); }
@media (max-width: 900px) { .head-with-note > .hand { margin-left: 0; } }

.tools-band { margin-top: clamp(64px, 8vw, 110px); border-radius: var(--radius-lg); background: var(--night-1); color: #fff; padding: clamp(36px, 5vw, 72px); display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 80px); position: relative; overflow: hidden; }
.tools-band::before { content: ""; position: absolute; left: -10%; bottom: -60%; width: 60%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(91,61,255,.5), transparent 65%); }
.tools-band > * { position: relative; min-width: 0; }
.tools-band p { color: var(--night-muted); font-size: 19px; }
.tools-band .label { color: var(--night-muted); }
.tools-band .label b { color: #ff9a80; }
.pillar-links { list-style: none; border-top: 1px solid var(--night-line); }
.pillar-links a { display: grid; grid-template-columns: 70px 1fr 24px; gap: 14px; align-items: center; padding: 22px 0; border-bottom: 1px solid var(--night-line); transition: padding .3s var(--ease); }
.pillar-links li:last-child a { border-bottom: 0; }
.pillar-links a:hover { padding-left: 10px; }
.pillar-links b { font: 400 italic 54px/.8 var(--font-serif); color: var(--lilac); }
.pillar-links strong { display: block; font: 600 24px/1.1 var(--font-display); letter-spacing: -0.02em; margin-bottom: 6px; }
.pillar-links span { font-size: 16.5px; color: var(--night-muted); line-height: 1.45; display: block; }
.pillar-links svg { width: 22px; height: 22px; color: var(--night-muted); }
@media (max-width: 900px) { .tools-band { grid-template-columns: 1fr; } }

/* ==========================================================================
   Programs (ledger)
   ========================================================================== */
.ledger-paper { background-color: var(--sheet); background-image: repeating-linear-gradient(180deg, transparent 0 43px, rgba(35, 64, 200, .07) 43px 44px); position: relative; }
.ledger-paper::before { content: ""; position: absolute; top: 0; bottom: 0; left: clamp(10px, 2.4vw, 40px); width: 1px; background: rgba(217, 71, 43, .35); box-shadow: 4px 0 0 rgba(217, 71, 43, .2); }
.ledger { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink); background: rgba(251, 249, 244, .9); }
.plan { padding: 36px clamp(22px, 2.6vw, 40px) 40px; display: flex; flex-direction: column; position: relative; }
.plan + .plan { border-left: 1px solid var(--line); }
.plan.featured { background: rgba(255, 224, 122, .22); }
.plan h3 { font-size: clamp(32px, 2.8vw, 42px); letter-spacing: -0.035em; margin-bottom: 10px; }
.plan h3 small { display: block; font: 400 italic 19px/1 var(--font-serif); letter-spacing: 0; color: var(--muted); margin-bottom: 10px; }
.plan .for { font-size: 17.5px; color: var(--muted); min-height: 80px; margin: 0 0 24px; line-height: 1.45; }
.price { padding: 0 0 22px; margin-bottom: 26px; border-bottom: 1px solid var(--line); }
.price .from { display: block; font-size: 15px; color: var(--muted); margin-bottom: 8px; }
.price strong { display: inline-block; font: 600 clamp(46px, 4.2vw, 62px)/1 var(--font-display); letter-spacing: -0.04em; font-variant-numeric: tabular-nums lining-nums; border-bottom: 4px double var(--ink); padding-bottom: 6px; }
.price strong small { font: 500 .3em/1 var(--font-body); letter-spacing: .04em; margin-right: 6px; vertical-align: 1.4em; color: var(--muted); }
.price .per { font-size: 16px; color: var(--muted); margin-left: 6px; }
.plan .inherits { font: 400 italic 20px/1.3 var(--font-serif); color: var(--royal); margin-bottom: 16px; }
.plan-group { margin-bottom: 20px; }
.plan-group h4 { font: 600 13px/1 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; display: flex; align-items: center; gap: 10px; }
.plan-group h4 i { font: 400 italic 22px/1 var(--font-serif); text-transform: none; letter-spacing: 0; color: var(--vermilion); }
.plan-group ul { list-style: none; display: grid; gap: 8px; }
.plan-group li { font-size: 17px; line-height: 1.45; padding-left: 20px; position: relative; }
.plan-group li::before { content: ""; position: absolute; left: 0; top: .66em; width: 9px; height: 1.5px; background: var(--ink); opacity: .55; }
.plan .plan-spacer { flex: 1; min-height: 14px; }
.ledger-foot { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; padding: 30px 0 0; }
@media (max-width: 1000px) { .ledger { grid-template-columns: 1fr; } .plan + .plan { border-left: 0; border-top: 1px solid var(--line); } }
.addon { display: grid; grid-template-columns: 1fr auto; gap: 28px; align-items: center; margin-top: 56px; padding: 30px 0 0; border-top: 1px dashed var(--line); }
.addon h3 { font-size: clamp(22px, 2vw, 28px); margin-bottom: 8px; }
.addon p { margin: 0; color: var(--muted); max-width: 70ch; }
@media (max-width: 800px) { .addon { grid-template-columns: 1fr; } }

/* ==========================================================================
   Why it matters (dark)
   ========================================================================== */
.negatives { list-style: none; border-top: 1px solid var(--night-line); font-family: var(--font-mono); }
.section--dark .negatives li { display: flex; justify-content: space-between; gap: 16px; padding: 16px 0; border-bottom: 1px dashed rgba(255,255,255,.18); font-size: 19px; color: #ff9f86; }
.negatives li span:last-child { color: rgba(255,179,162,.55); }
.negatives-note { font: 400 italic 19px/1.4 var(--font-serif); color: var(--night-muted); margin-top: 16px; }

/* ==========================================================================
   Delivers
   ========================================================================== */
.columns4 { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 2px solid var(--ink); }
.columns4 > div { padding: 30px clamp(18px, 2vw, 30px) 10px 0; }
.columns4 > div + div { padding-left: clamp(18px, 2vw, 30px); border-left: 1px solid var(--line); }
.columns4 .n { font: 400 italic 30px/1 var(--font-serif); color: var(--vermilion); display: block; margin-bottom: 14px; }
.columns4 h3 { font-size: clamp(22px, 1.9vw, 27px); letter-spacing: -0.025em; margin-bottom: 18px; }
.columns4 ul { list-style: none; display: grid; gap: 10px; }
.columns4 li { font-size: 17px; line-height: 1.45; color: var(--ink-2); padding-bottom: 10px; border-bottom: 1px solid var(--line-soft); }
@media (max-width: 1100px) { .columns4 { grid-template-columns: 1fr 1fr; } .columns4 > div:nth-child(3) { border-left: 0; padding-left: 0; } }
@media (max-width: 640px) { .columns4 { grid-template-columns: 1fr; } .columns4 > div + div { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); } }

.outcomes { list-style: none; display: grid; grid-template-columns: 1fr 1fr; column-gap: 36px; border-top: 1px solid var(--line); }
.outcomes li { padding: 18px 0; border-bottom: 1px solid var(--line); font: 500 clamp(19px, 1.6vw, 22px)/1.3 var(--font-display); letter-spacing: -0.015em; }
@media (max-width: 560px) { .outcomes { grid-template-columns: 1fr; } }

.note-card { border-radius: var(--radius); background: var(--night-1); color: #fff; padding: 32px 34px; margin-top: 40px; }
.note-card h3 { font-size: 24px; margin-bottom: 12px; }
.note-card p { color: var(--night-muted); margin: 0; font-size: 18px; }

/* ==========================================================================
   Why W3D (bento)
   ========================================================================== */
.bento { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.bento > div { border-radius: var(--radius-lg); overflow: hidden; position: relative; }
.b-globe { background: var(--royal); color: #fff; padding: clamp(32px, 4vw, 56px); min-height: 580px; display: flex; flex-direction: column; }
.b-globe > *:not(svg) { position: relative; z-index: 1; }
.b-globe h3 { font: 400 clamp(32px, 3.2vw, 46px)/1.08 var(--font-serif); letter-spacing: -0.015em; margin-bottom: 20px; max-width: 18ch; }
.b-globe p { color: rgba(255,255,255,.9); font-size: 19px; line-height: 1.55; max-width: 34ch; }
.b-globe svg.globe { position: absolute; right: -16%; bottom: -54%; width: 80%; }
.b-shield { background: linear-gradient(180deg, #efebe3, #e4ded1); display: flex; flex-direction: column; justify-content: flex-end; padding: clamp(32px, 4vw, 56px); min-height: 580px; }
.b-shield .visual { position: absolute; inset: 0 0 auto; aspect-ratio: auto; height: 62%; }
.b-shield .shield-3d { width: 30%; }
.b-shield .pedestal { width: 34%; }
.b-shield .bg-tiles { position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.8) 2px, transparent 2px), linear-gradient(90deg, rgba(255,255,255,.8) 2px, transparent 2px); background-size: 140px 140px; transform: perspective(600px) rotateX(55deg) scale(1.6); transform-origin: 50% 80%; }
.b-shield h3 { font-size: clamp(26px, 2.4vw, 34px); position: relative; }
.b-shield p { position: relative; color: var(--muted); margin: 10px 0 0; }
@media (max-width: 1000px) { .bento { grid-template-columns: 1fr; } .b-globe, .b-shield { min-height: 480px; } }
.diffs { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: clamp(24px, 3vw, 48px); margin-top: clamp(56px, 6vw, 88px); }
.diffs > div { padding: 26px 0 30px; border-top: 1px solid var(--ink); }
.diffs h3 { font-size: clamp(22px, 1.9vw, 27px); letter-spacing: -0.025em; margin-bottom: 12px; }
.diffs p { color: var(--muted); margin: 0; font-size: 18px; }
@media (max-width: 1000px) { .diffs { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .diffs { grid-template-columns: 1fr; } }

/* ==========================================================================
   Assessment receipt
   ========================================================================== */
.assess-wrap { display: grid; grid-template-columns: 1fr minmax(320px, 500px); gap: clamp(40px, 7vw, 120px); align-items: center; }
@media (max-width: 900px) { .assess-wrap { grid-template-columns: 1fr; } }
.receipt-holder { position: relative; padding: 10px 0 30px; }
.receipt {
  position: relative; background: #fffdf8; color: var(--ink); font-family: var(--font-mono); font-size: 15px; line-height: 1.55;
  padding: 36px 34px 50px; transform: rotate(-1.6deg); filter: drop-shadow(0 26px 30px rgba(40, 30, 10, .22)) drop-shadow(0 2px 2px rgba(40,30,10,.08));
}
.receipt::after { content: ""; position: absolute; left: 0; right: 0; bottom: -11px; height: 12px; background: linear-gradient(-45deg, transparent 8px, #fffdf8 0) 0 0 / 16px 12px repeat-x, linear-gradient(45deg, transparent 8px, #fffdf8 0) 0 0 / 16px 12px repeat-x; }
.receipt .r-head { text-align: center; padding-bottom: 18px; border-bottom: 1.5px dashed #bdb5a4; margin-bottom: 18px; }
.receipt .r-head svg { width: 34px; height: 34px; margin: 0 auto 10px; }
.receipt .r-head strong { display: block; font-weight: 600; letter-spacing: .1em; font-size: 14px; }
.receipt .r-head span { font-size: 13px; color: var(--muted); }
.receipt .r-title { font: 600 23px/1.2 var(--font-display); letter-spacing: -0.02em; margin: 0 0 16px; }
.r-line { display: flex; align-items: baseline; gap: 8px; padding: 5px 0; }
.r-line .dots { flex: 1; border-bottom: 1.5px dotted #b9b1a0; transform: translateY(-4px); min-width: 12px; }
.r-line .v { color: var(--muted); }
.r-total { display: flex; justify-content: space-between; align-items: baseline; margin-top: 18px; padding-top: 16px; border-top: 1.5px dashed #bdb5a4; font-weight: 600; letter-spacing: .04em; }
.r-total b { font: 600 34px/1 var(--font-display); letter-spacing: -0.03em; border-bottom: 4px double var(--ink); padding-bottom: 4px; }
.receipt .r-fine { font-size: 12.5px; color: var(--muted); margin: 18px 0 20px; line-height: 1.5; }
.receipt .btn { font-family: var(--font-body); width: 100%; white-space: normal; line-height: 1.25; padding: 14px 20px; font-size: 16px; }
.sidebar .receipt-wrap, .sidebar .receipt { min-width: 0; max-width: 100%; }
.receipt-holder > .hand { position: absolute; right: -30px; top: -34px; transform: rotate(5deg); z-index: 2; }
@media (max-width: 1100px) { .receipt-holder > .hand { position: static; margin-bottom: 14px; transform: rotate(-2deg); } }

/* ==========================================================================
   Posts
   ========================================================================== */
.posts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.post-card { display: flex; flex-direction: column; border-radius: 18px; overflow: hidden; background: var(--sheet); border: 1px solid var(--line-soft); transition: .35s var(--ease); min-height: 100%; }
.post-card:hover { transform: translateY(-6px) rotate(-.4deg); box-shadow: var(--shadow); }
.post-cover { aspect-ratio: 2 / 1; display: grid; place-items: center; background: var(--peri); position: relative; overflow: hidden; }
.post-cover.butter { background: var(--butter); } .post-cover.sky { background: var(--sky); } .post-cover.mint { background: var(--mint); } .post-cover.blush { background: var(--blush); }
.lockup { display: flex; align-items: center; gap: 12px; font: 600 16px/1.15 var(--font-display); color: var(--ink); letter-spacing: -0.01em; }
.lockup svg { width: 30px; height: 30px; }
.lockup .sep { width: 1px; height: 30px; background: rgba(0,0,0,.25); }
.lockup small { display: block; font: 500 13.5px/1.25 var(--font-body); }
.post-body { padding: 24px 24px 22px; display: flex; flex-direction: column; flex: 1; }
.post-body time, .post-meta { font-size: 15px; color: var(--muted); }
.post-body h3 { font-size: 23px; line-height: 1.18; margin: 12px 0 12px; letter-spacing: -0.02em; }
.post-body p { font-size: 17px; color: var(--muted); }
.post-body .by { margin-top: auto; padding-top: 18px; font-size: 15px; color: var(--muted); }
.soon-tag { display: inline-flex; font: 400 italic 19px/1 var(--font-serif); color: var(--vermilion); align-self: flex-start; }
@media (max-width: 1000px) { .posts { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .posts { grid-template-columns: 1fr; } }

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq-layout { display: grid; grid-template-columns: .7fr 1.3fr; gap: clamp(32px, 6vw, 100px); align-items: start; }
.faq-layout > * { min-width: 0; }
.faq-layout .section-head { position: sticky; top: calc(var(--header-h) + 30px); }
@media (max-width: 900px) { .faq-layout { grid-template-columns: 1fr; } .faq-layout .section-head { position: static; } }
.faq { border-top: 2px solid var(--ink); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 26px 0; font: 600 clamp(20px, 1.8vw, 25px)/1.25 var(--font-display); letter-spacing: -0.02em; color: var(--ink); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex-shrink: 0; font: 400 42px/1 var(--font-serif); color: var(--vermilion); transition: transform .35s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq .faq-a { padding: 0 60px 28px 0; color: var(--ink-2); font-size: 19px; }
.faq .faq-a p:last-child { margin: 0; }

/* ==========================================================================
   Contact / forms
   ========================================================================== */
.contact { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(36px, 6vw, 96px); align-items: start; }
.contact-points { list-style: none; margin-top: 36px; border-top: 1px solid var(--night-line); }
.contact-points a { display: flex; align-items: center; gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--night-line); color: #fff; font: 500 21px/1.3 var(--font-display); letter-spacing: -0.01em; transition: padding .3s var(--ease); }
.contact-points a:hover { padding-left: 8px; }
.contact-points svg { width: 22px; height: 22px; color: var(--lilac); flex-shrink: 0; }
.form-card { background: var(--sheet); color: var(--ink); border-radius: var(--radius-lg); padding: clamp(26px, 4vw, 48px); box-shadow: var(--shadow-lg); }
.section:not(.section--dark) .form-card { box-shadow: var(--shadow); border: 1px solid var(--line-soft); }
.form-card h3 { font-size: clamp(26px, 2.4vw, 34px); margin-bottom: 10px; letter-spacing: -0.03em; }
.form-card > p { color: var(--muted); font-size: 17.5px; }
.fgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 24px; }
.field { display: grid; gap: 8px; }
.field.full { grid-column: 1 / -1; }
.field label { font: 600 15px/1 var(--font-body); color: var(--ink-2); }
.field input, .field textarea { width: 100%; font: 400 18px/1.4 var(--font-body); padding: 15px 16px; border-radius: 12px; border: 1px solid var(--line); background: #fff; color: var(--ink); transition: .2s; }
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus, .field textarea:focus { outline: 0; border-color: var(--royal); box-shadow: 0 0 0 4px rgba(35,64,200,.12); }
.optin { grid-column: 1 / -1; display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start; font-size: 14.5px; line-height: 1.55; color: var(--muted); padding: 16px; border-radius: 12px; background: var(--paper); }
.optin input { width: 18px; height: 18px; margin-top: 3px; accent-color: var(--royal); }
.form-foot { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 14px; color: var(--muted); }
.form-success { display: none; text-align: center; padding: 48px 10px; }
.form-success .tickmark { width: 64px; height: 64px; margin: 0 auto 18px; color: #13895a; }
.form-card.sent form { display: none; }
.form-card.sent .form-success { display: block; }
@media (max-width: 900px) { .contact { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .fgrid { grid-template-columns: 1fr; } }

/* ==========================================================================
   Inner page hero
   ========================================================================== */
.page-hero { position: relative; background: var(--paper); padding: 10px; color: #fff; }
.page-hero .frame { position: relative; overflow: hidden; border-radius: var(--radius-lg); background: radial-gradient(900px 500px at 80% 30%, rgba(91,61,255,.5), transparent 60%), radial-gradient(700px 500px at 0% 100%, rgba(28,63,208,.5), transparent 60%), linear-gradient(180deg, #120d45, #1d1470); padding: calc(var(--header-h) + clamp(36px, 5vw, 72px)) 0 clamp(56px, 7vw, 96px); }
.page-hero .frame::after { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px); background-size: 64px 64px; mask-image: radial-gradient(ellipse at 70% 40%, #000, transparent 70%); -webkit-mask-image: radial-gradient(ellipse at 70% 40%, #000, transparent 70%); }
.page-hero .container { position: relative; z-index: 1; }
.page-hero-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(32px, 5vw, 80px); align-items: center; }
.page-hero h1 { font-size: clamp(56px, 8vw, 124px); font-weight: 700; letter-spacing: -0.055em; line-height: .9; }
.page-hero h1 em { color: var(--lilac); }
.page-hero h1.long { font-size: clamp(44px, 5.6vw, 86px); letter-spacing: -0.045em; line-height: .95; }
.page-hero .subtitle { font: 400 clamp(26px, 2.6vw, 38px)/1.15 var(--font-serif); color: #fff; margin: 18px 0 0; }
.page-hero .lead { color: rgba(236,232,255,.8); margin-top: 22px; }
.page-hero .hero-actions { margin-top: 34px; }
.page-hero .visual { aspect-ratio: 1.15; }
.page-hero .visual .halo { background: radial-gradient(circle at 40% 35%, #8a6dff, #3b2bd9 60%, transparent 72%); width: 82%; opacity: .85; }
.breadcrumb { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; list-style: none; font-size: 15px; color: rgba(236,232,255,.65); margin-bottom: 30px; }
.breadcrumb a:hover { color: #fff; }
.breadcrumb li + li::before { content: "/"; margin-right: 8px; opacity: .5; }
.breadcrumb [aria-current] { color: #fff; }
.hero-meta { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 30px; font-size: 16px; color: rgba(236,232,255,.72); }
.hero-meta span { display: inline-flex; align-items: center; gap: 8px; }
.hero-meta svg { width: 17px; height: 17px; color: var(--lilac); }
@media (max-width: 900px) { .page-hero-grid { grid-template-columns: 1fr; } .page-hero .visual { max-width: 520px; margin: 0 auto; width: 100%; } }

/* ==========================================================================
   Doc layout: TOC | prose | sidebar
   ========================================================================== */
.doc { display: grid; grid-template-columns: 220px minmax(0, 1fr) 330px; gap: clamp(28px, 3.6vw, 64px); align-items: start; padding-top: clamp(64px, 7vw, 110px); padding-bottom: clamp(56px, 7vw, 100px); }
.toc { position: sticky; top: calc(var(--header-h) + 28px); max-height: calc(100vh - var(--header-h) - 56px); overflow-y: auto; }
.toc h2 { font: 400 italic 22px/1 var(--font-serif); letter-spacing: 0; color: var(--ink); margin-bottom: 16px; }
.toc ol { list-style: none; counter-reset: c; border-left: 1px solid var(--line); }
.toc li { counter-increment: c; }
.toc a { display: grid; grid-template-columns: 26px 1fr; padding: 8px 0 8px 14px; margin-left: -1px; border-left: 2px solid transparent; font-size: 15px; line-height: 1.4; color: var(--muted); transition: .2s; }
.toc a::before { content: counter(c); font: 400 italic 17px/1.25 var(--font-serif); color: #b7ae9c; transition: .2s; }
.toc a:hover { color: var(--ink); }
.toc a.is-active { color: var(--ink); border-left-color: var(--vermilion); font-weight: 600; }
.toc a.is-active::before { color: var(--vermilion); }
.toc-progress { margin-top: 22px; font-size: 13.5px; color: var(--muted); display: grid; gap: 8px; }
.toc-progress .track { height: 3px; background: var(--line); border-radius: 3px; overflow: hidden; }
.toc-progress .track span { display: block; height: 100%; width: 0; background: var(--vermilion); }
.toc-mobile { display: none; }

.prose { font-size: 20px; line-height: 1.7; color: var(--ink-2); min-width: 0; }
.prose > section { padding-bottom: 16px; }
.prose > section + section { padding-top: 48px; margin-top: 12px; border-top: 1px solid var(--line); }
.prose h2 { font-size: clamp(32px, 3vw, 44px); color: var(--ink); margin: 0 0 22px; letter-spacing: -0.035em; line-height: 1.04; scroll-margin-top: calc(var(--header-h) + 24px); }
.prose h3 { font-size: 24px; margin: 34px 0 12px; color: var(--ink); letter-spacing: -0.02em; }
.prose p { margin: 0 0 1.15em; }
.prose ul:not([class]), .prose ol:not([class]) { padding-left: 1.3em; margin: 0 0 1.2em; }
.prose strong { color: var(--ink); font-weight: 600; }
.prose p a, .prose td a, .prose li a { color: var(--royal); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; text-decoration-color: rgba(35,64,200,.35); }
.prose p a:hover { text-decoration-color: currentColor; }

.in-short { position: relative; padding: 4px 0 4px 30px; border-left: 3px solid var(--vermilion); margin: 20px 0 64px; }
.in-short > .hand { position: absolute; left: 24px; top: -40px; transform: rotate(-3deg); }
.in-short p { margin: 0; font: 400 clamp(25px, 2.2vw, 31px)/1.32 var(--font-serif); color: var(--ink); letter-spacing: -0.005em; }

.item-list { list-style: none; display: grid; grid-template-columns: 1fr 1fr; column-gap: 32px; margin: 26px 0 32px; }
.item-list li { padding: 16px 0 16px 34px; border-bottom: 1px solid var(--line); position: relative; font-weight: 500; color: var(--ink); line-height: 1.4; }
.item-list li:nth-child(-n+2) { border-top: 1px solid var(--line); }
.item-list li::before { content: ""; position: absolute; left: 0; top: 21px; width: 20px; height: 14px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 15'%3E%3Cpath d='M1.5 8.2c2 1.4 3.7 3 5 4.9 3.4-5.2 7.6-9 13.8-11.6' fill='none' stroke='%232340c8' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/contain; }
.item-list.one { grid-template-columns: 1fr; }
.item-list.one li:nth-child(2) { border-top: 0; }
@media (max-width: 640px) { .item-list { grid-template-columns: 1fr; } .item-list li:nth-child(2) { border-top: 0; } }

/* sticky note */
.sticky { position: relative; background: #fff1a8; color: #3b3315; padding: 36px 32px 28px; margin: 48px 6px 44px 0; transform: rotate(-.8deg); box-shadow: 0 1px 1px rgba(0,0,0,.06), 0 18px 30px -18px rgba(60,45,0,.45); border-radius: 2px 2px 16px 2px; }
.sticky::before { content: ""; position: absolute; top: -14px; left: 50%; width: 120px; height: 30px; translate: -50% 0; rotate: 2deg; background: rgba(255,255,255,.6); box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.sticky .hand { color: #8a3a12; font-size: 28px; transform: none; display: block; margin-bottom: 10px; }
.sticky p { margin: 0; font-size: 18.5px; line-height: 1.6; color: #3b3315; }
.sticky.tilt-r { transform: rotate(.7deg); }

.aside-dark { border-radius: var(--radius); background: var(--night-1); color: #fff; padding: 30px 32px; margin: 34px 0; }
.prose .aside-dark h3 { margin: 0 0 10px; font-size: 23px; color: #fff; }
.aside-dark p { margin: 0; color: var(--night-muted); font-size: 18.5px; }

.figure { margin: 36px 0; border-radius: var(--radius-lg); background: var(--paper-2); padding: clamp(16px, 3vw, 36px); }
.figure .visual { max-width: 560px; margin: 0 auto; }
.figure figcaption { text-align: center; font: 400 italic 19px/1.4 var(--font-serif); color: var(--muted); margin-top: 10px; }

.table-wrap { overflow-x: auto; margin: 26px 0 30px; border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink); }
.cmp { width: 100%; border-collapse: collapse; font-size: 17px; line-height: 1.5; }
.cmp th, .cmp td { padding: 18px 16px 18px 0; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.cmp thead th { font: 600 13px/1.3 var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.cmp tbody th { font: 600 20px/1.2 var(--font-display); letter-spacing: -0.02em; color: var(--ink); width: 26%; }
.cmp tbody th small { display: block; font: 500 15px/1.4 var(--font-body); letter-spacing: 0; color: var(--muted); margin-top: 6px; font-variant-numeric: tabular-nums; }
.prose .cmp td ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.prose .cmp td li { padding-left: 18px; position: relative; margin: 0; }
.cmp td li::before { content: ""; position: absolute; left: 0; top: .74em; width: 9px; height: 1.5px; background: var(--ink); opacity: .55; }
.cmp td .plus { font: 400 italic 18px/1.3 var(--font-serif); color: var(--royal); display: block; margin-bottom: 8px; }
.cmp tr:last-child th, .cmp tr:last-child td { border-bottom: 0; }
.cmp td:last-child:not(:nth-child(2)) { white-space: nowrap; }
@media (max-width: 700px) { .cmp { min-width: 560px; } }

.steps { list-style: none; counter-reset: st; margin: 28px 0; padding: 0; border-top: 1px solid var(--line); }
.steps li { counter-increment: st; display: grid; grid-template-columns: 70px 1fr; gap: 12px; padding: 24px 0; border-bottom: 1px solid var(--line); }
.steps li::before { content: counter(st); font: 400 italic 54px/.8 var(--font-serif); color: var(--vermilion); }
.prose .steps h3 { margin: 0 0 6px; font-size: 23px; }
.steps p { margin: 0; font-size: 18px; color: var(--muted); }

.related { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: 22px; border-top: 2px solid var(--ink); }
.related a { padding: 24px 20px 24px 0; color: var(--ink); display: block; transition: background .3s var(--ease); }
.related a + a { padding-left: 20px; border-left: 1px solid var(--line); }
.related a:hover { background: var(--paper-2); }
.related b { display: block; font: 400 italic 46px/.9 var(--font-serif); color: var(--vermilion); margin-bottom: 12px; }
.related strong { display: block; font: 600 21px/1.2 var(--font-display); letter-spacing: -0.02em; }
.related span { font-size: 16px; color: var(--muted); line-height: 1.45; display: block; margin-top: 6px; }
@media (max-width: 700px) { .related { grid-template-columns: 1fr; } .related a + a { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); } }

/* Sidebar */
.sidebar { position: sticky; top: calc(var(--header-h) + 28px); display: grid; gap: 30px; }
.sidebar .receipt { font-size: 13.5px; padding: 28px 24px 44px; transform: rotate(1deg); }
.sidebar .receipt .r-title { font-size: 21px; }
.sidebar .r-total b { font-size: 28px; }
.side-box { padding: 22px 0 0; border-top: 2px solid var(--ink); }
.side-box h3 { font: 400 italic 24px/1.1 var(--font-serif); letter-spacing: 0; margin-bottom: 8px; }
.side-box a.row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 17px; font-weight: 500; }
.side-box a.row:hover { color: var(--royal); }
.side-box a.row b { font: 400 italic 24px/1 var(--font-serif); color: var(--vermilion); width: 22px; }
.side-box a.row svg { width: 18px; height: 18px; color: var(--vermilion); }

@media (max-width: 1200px) {
  .doc { grid-template-columns: minmax(0, 1fr) 310px; }
  .toc { display: none; }
  .toc-mobile { display: block; margin-bottom: 40px; }
  .toc-mobile details { border-top: 2px solid var(--ink); border-bottom: 1px solid var(--line); }
  .toc-mobile summary { cursor: pointer; padding: 16px 0; font: 400 italic 22px/1 var(--font-serif); list-style: none; display: flex; justify-content: space-between; }
  .toc-mobile summary::after { content: "+"; color: var(--vermilion); }
  .toc-mobile ol { margin: 0; padding: 0 0 18px 22px; display: grid; gap: 8px; font-size: 17px; }
  .toc-mobile a { color: var(--royal); }
}
@media (max-width: 900px) { .doc { grid-template-columns: 1fr; } .sidebar { position: static; max-width: 520px; } }

/* Article */
.article-hero h1 { max-width: 18ch; }
.author { display: flex; align-items: center; gap: 14px; margin-top: 30px; }
.author .avatar { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); }
.author .avatar svg { width: 26px; height: 26px; }
.author strong { display: block; font-size: 17px; }
.author span { font-size: 15px; color: rgba(236,232,255,.7); }
.post-cover-hero { margin-top: clamp(36px, 4vw, 56px); border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 3.2; background: var(--peri); display: grid; place-items: center; position: relative; }
.post-cover-hero::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(35,64,200,.2) 1.5px, transparent 1.5px); background-size: 22px 22px; mask-image: radial-gradient(ellipse at center, transparent 25%, #000 75%); -webkit-mask-image: radial-gradient(ellipse at center, transparent 25%, #000 75%); }
.post-cover-hero .lockup { transform: scale(1.5); position: relative; }
@media (max-width: 640px) { .post-cover-hero { aspect-ratio: 1.8; } .post-cover-hero .lockup { transform: scale(1.05); } }
.takeaways { margin: 0 0 56px; padding: 28px 30px 24px; background: var(--sheet); border: 1px solid var(--line-soft); border-radius: var(--radius); }
.takeaways .hand { display: block; margin-bottom: 16px; transform: rotate(-2deg); }
.disclaimer { font: 400 italic 19px/1.5 var(--font-serif); color: var(--muted); border-left: 2px solid var(--line); padding-left: 18px; margin: 28px 0; }
.share { display: flex; gap: 8px; margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--line); align-items: center; font: 400 italic 21px/1 var(--font-serif); color: var(--muted); flex-wrap: wrap; }
.share a { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); color: var(--ink); }
.share a:hover { background: var(--paper-2); }
.share a svg { width: 18px; height: 18px; }

/* Blog index */
.blog-feature { display: grid; grid-template-columns: 1.2fr 1fr; border-radius: var(--radius-lg); overflow: hidden; background: var(--sheet); border: 1px solid var(--line-soft); transition: .35s var(--ease); }
.blog-feature:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.blog-feature .post-cover { aspect-ratio: auto; min-height: 380px; }
.blog-feature .post-cover .lockup { transform: scale(1.35); }
.blog-feature .post-body { padding: clamp(28px, 4vw, 52px); justify-content: center; }
.blog-feature .post-body h2 { font-size: clamp(30px, 3vw, 44px); margin: 16px 0; letter-spacing: -0.035em; }
.topics { display: flex; gap: 6px 26px; flex-wrap: wrap; margin: 72px 0 30px; padding-bottom: 18px; border-bottom: 1px solid var(--line); font-size: 17px; color: var(--muted); }
.topics span:first-child { color: var(--ink); font-weight: 600; }
@media (max-width: 860px) { .blog-feature { grid-template-columns: 1fr; } .blog-feature .post-cover { min-height: 240px; } }
.guide-band { display: grid; grid-template-columns: auto 1fr auto; gap: clamp(28px, 4vw, 56px); align-items: center; border-radius: var(--radius-lg); padding: clamp(32px, 4.4vw, 60px); background: var(--butter); }
.guide-band > * { min-width: 0; }
.guide-band h2 { font-size: clamp(30px, 3.2vw, 46px); letter-spacing: -0.035em; }
.guide-band p { margin: 12px 0 0; color: #4d3f12; max-width: 56ch; }
.guide-band .label { color: #6b5a22; }
.guide-band ul { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 24px; margin-top: 18px; font-size: 16.5px; color: #4a3c10; }
.guide-band li::before { content: "- "; color: var(--vermilion); }
.book { width: 150px; aspect-ratio: .74; border-radius: 6px 14px 14px 6px; background: linear-gradient(160deg, #2340c8, #100c30); box-shadow: 12px 18px 34px -10px rgba(0,0,0,.45), inset 7px 0 0 rgba(255,255,255,.16); color: #fff; padding: 18px 16px; display: flex; flex-direction: column; justify-content: space-between; transform: rotate(-6deg); }
.book .brand-mark { width: 30px; height: 30px; }
.book small { display: block; font: 400 italic 15px/1.2 var(--font-serif); opacity: .8; margin-bottom: 8px; }
.book strong { font: 600 15px/1.15 var(--font-display); letter-spacing: -0.01em; }
@media (max-width: 900px) { .guide-band { grid-template-columns: 1fr; } .book { display: none; } .guide-band ul { grid-template-columns: 1fr; } }

/* ==========================================================================
   Final CTA + footer
   ========================================================================== */
.final-cta { background: var(--paper); padding: 10px; }
.final-cta .frame { position: relative; overflow: hidden; border-radius: var(--radius-lg); padding: clamp(80px, 10vw, 140px) var(--gutter); text-align: center; color: #fff; background: radial-gradient(700px 400px at 50% 120%, rgba(138,109,255,.75), transparent 70%), radial-gradient(500px 300px at 10% 0%, rgba(28,63,208,.5), transparent 70%), linear-gradient(180deg, #0d0b2b, #1a1268); }
.final-cta h2 { font-size: clamp(42px, 6vw, 92px); font-weight: 700; letter-spacing: -0.05em; line-height: .95; max-width: 15ch; margin: 0 auto; }
.final-cta h2 em { color: var(--lilac); }
.final-cta p { color: var(--night-muted); max-width: 56ch; margin: 28px auto 0; font-size: 20px; }
.final-cta .hero-actions { justify-content: center; }
.final-cta .ecg-bg { position: absolute; left: 0; right: 0; top: 50%; width: 100%; height: 160px; translate: 0 -50%; opacity: .22; pointer-events: none; }
.final-cta .frame > *:not(.ecg-bg) { position: relative; }

.site-footer { background: var(--night-0); color: var(--night-muted); padding: 88px 0 36px; font-size: 17px; }
.footer-grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 40px; }
.site-footer .brand { color: #fff; margin-bottom: 20px; }
.site-footer h3 { font: 400 italic 22px/1 var(--font-serif); letter-spacing: 0; color: #fff; margin-bottom: 18px; }
.site-footer ul { list-style: none; display: grid; gap: 10px; }
.site-footer a:hover { color: #fff; }
.footer-tag { max-width: 34ch; }
.socials { display: flex; gap: 10px; margin-top: 24px; }
.socials a { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--night-line); color: #fff; transition: .2s; }
.socials a:hover { background: rgba(255,255,255,.08); }
.socials svg { width: 18px; height: 18px; }
.footer-wordmark { white-space: nowrap; font: 400 italic clamp(40px, 8.2vw, 128px)/1.05 var(--font-serif); letter-spacing: -0.03em; text-align: center; margin-top: 64px; color: rgba(203,191,255,.22); user-select: none; overflow: hidden; }
.footer-bottom { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 36px; padding-top: 24px; border-top: 1px solid var(--night-line); font-size: 14.5px; }
@media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr 1fr; } .footer-grid > :first-child { grid-column: 1 / -1; } }

/* Reveal */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.no-js .reveal { opacity: 1; transform: none; }

/* Small screens */
@media (max-width: 600px) {
  body { font-size: 18px; }
  .btn { white-space: normal; text-align: center; line-height: 1.25; padding: 15px 24px; }
  .hero-actions .btn { width: 100%; }
  .hero-actions .hand { display: none; }
  .framework-strip span { padding: 10px 14px; font-size: 14px; }
  .hero h1 { font-size: clamp(54px, 16vw, 76px); }
  .hero-frame { min-height: 0; }
  .hero-inner { padding-bottom: 32px; }
  .page-hero .visual { display: none; }
  .tabs-shell { padding: 22px 18px; border-radius: 24px; }
  .visual { aspect-ratio: .95; }
  .mock { transform: scale(.92); }
  .float-badge { display: none; }
  .ruled > li, .triggers li { grid-template-columns: 48px 1fr; }
  .faq .faq-a { padding-right: 0; }
  .prose { font-size: 18.5px; }
  .receipt { padding: 30px 22px 44px; font-size: 13.5px; }
  .receipt { font-size: 12.5px; }
  .r-line .dots { min-width: 8px; }
}