/* =============================================================================
 * ENHANCE — additive polish layer (loaded LAST).
 * -----------------------------------------------------------------------------
 * Goal: more premium & less "generic", stronger contrast, more visual accents —
 * WITHOUT fighting the existing Verity system. Everything here is additive and
 * scoped; it only lifts what already exists (headings, eyebrows, cards, icons).
 * Palette stays Black & Purple via the existing tokens.
 * ===========================================================================*/

:root {
  /* Contrast lift — secondary text a touch brighter for readability on black. */
  --text-muted: #BCB6CB;
  /* Reusable brand gradient (purple → violet → lilac). */
  --grad-brand: linear-gradient(100deg, var(--off-white) 0%, #d9caff 42%, var(--violet) 100%);
  --grad-line: linear-gradient(90deg, transparent, var(--violet), var(--lilac), transparent);
}

/* ============================ HEADINGS =================================== */
/* Hero H1: subtle white→lilac gradient for a premium, less-flat headline. */
.hero h1 {
  background: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
/* keep the emphasised word readable & lit in lilac even inside the gradient */
.hero h1 .serif,
.hero h1 em {
  -webkit-text-fill-color: var(--lilac);
  color: var(--lilac);
}

/* Section titles get a faint lifted sheen (still mostly white, just less dead-flat). */
.section__head h2 {
  background: linear-gradient(180deg, #ffffff 0%, #d7cef0 140%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* ==================== HERO PROOF STRIP (3 objective proofs) ============== */
.hero-proofs {
  display: flex; gap: clamp(1.1rem, 2.5vw, 2.2rem);
  margin-top: var(--space-xl); padding: 0; list-style: none;
}
.hero-proofs li { display: flex; flex-direction: column; gap: .15rem; position: relative; padding-left: .85rem; }
.hero-proofs li::before {
  content: ''; position: absolute; left: 0; top: .3rem; bottom: .3rem; width: 2px;
  border-radius: 2px; background: linear-gradient(180deg, var(--violet), transparent);
}
.hero-proofs strong { color: var(--text-strong); font-size: .95rem; letter-spacing: -.01em; }
.hero-proofs span { color: var(--text-muted); font-size: .8rem; }
@media (max-width: 640px) {
  .hero-proofs { flex-direction: column; gap: .8rem; }
}

/* ============================ CARDS ===================================== */
/* Lift card surfaces slightly and add a purple glow on hover for depth. */
.card,
.result-block,
.opp-preview,
.plan {
  position: relative;
}
.card {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--violet) 6%, var(--surface)), var(--surface));
  border: 1px solid color-mix(in srgb, var(--lilac) 12%, transparent);
}
.card:hover {
  border-color: color-mix(in srgb, var(--violet) 45%, transparent);
  box-shadow:
    var(--shadow-md),
    0 18px 40px -22px color-mix(in srgb, var(--purple) 60%, transparent);
  transform: translateY(-3px);
}
/* A lit hairline across the top of principle cards → visual accent + rhythm. */
.card::before {
  content: '';
  position: absolute; top: 0; left: 14px; right: 14px; height: 2px;
  background: var(--grad-line);
  opacity: 0.6;
}

/* Number badges (strip / process / opportunity) get a stronger purple identity. */
.strip__item .n {
  background: color-mix(in srgb, var(--violet) 20%, transparent);
  border: 1px solid color-mix(in srgb, var(--lilac) 20%, transparent);
  color: var(--lilac);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--violet) 8%, transparent);
}

/* ============================ ICONS ===================================== */
/* Icon accent chips added in HTML: circular purple-tinted holders. */
.ico-chip {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.75rem; height: 2.75rem; border-radius: 14px;
  background:
    radial-gradient(120% 120% at 30% 20%, color-mix(in srgb, var(--violet) 30%, transparent), transparent 70%),
    color-mix(in srgb, var(--violet) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--lilac) 22%, transparent);
  color: var(--lilac);
  margin-bottom: var(--space-md);
  box-shadow: 0 8px 20px -12px color-mix(in srgb, var(--purple) 70%, transparent);
}
.ico-chip svg { width: 1.4rem; height: 1.4rem; }

/* ===================== EDITORIAL VISUAL (guidance) ====================== */
/* Replaces the empty "photo to be produced" placeholder with a real graphic. */
.brand-visual {
  position: relative;
  height: 100%;
  min-height: 380px;
  border-radius: var(--r-xl);
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--lilac) 16%, transparent);
  background:
    radial-gradient(90% 70% at 78% 12%, color-mix(in srgb, var(--violet) 34%, transparent), transparent 60%),
    radial-gradient(80% 80% at 12% 100%, color-mix(in srgb, var(--purple) 30%, transparent), transparent 62%),
    linear-gradient(160deg, #111014, #0A090D);
  box-shadow: var(--shadow-lg), 0 30px 70px -46px color-mix(in srgb, var(--purple) 70%, transparent);
}
.brand-visual svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.brand-visual .caption {
  position: absolute; left: 1.4rem; bottom: 1.3rem; right: 1.4rem; z-index: 2;
}
.brand-visual .caption .serif {
  font-family: var(--font-serif); font-size: var(--step-2);
  color: #fff; line-height: 1.16; display: block; max-width: 16ch;
  text-shadow: 0 2px 18px rgba(0,0,0,0.5);
}
.brand-visual .caption small {
  display: block; margin-top: 0.5rem; font-size: 0.8rem; color: var(--lilac);
  letter-spacing: 0.02em;
}
@media (max-width: 820px) {
  .guidance-split .brand-visual { min-height: 300px; aspect-ratio: 3 / 2; }
}

/* ===================== HERO AURORA BACKGROUND ========================== */
/* Flowing purple "light ribbons" backdrop (inspired aesthetic, own design). */
.hero { position: relative; }
.hero-aurora {
  position: absolute; inset: 0; z-index: 0;
  overflow: hidden; pointer-events: none;
  /* fade the flow out toward the very top so the nav stays clean */
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 20%, #000 100%);
          mask-image: linear-gradient(180deg, transparent 0%, #000 20%, #000 100%);
}
.hero-aurora .aurora-svg {
  position: absolute; inset: -3%; width: 106%; height: 106%;
  will-change: transform; transform-style: preserve-3d;
}
/* inner depth layers move independently (driven by experience.js) */
.hero-aurora .au-field,
.hero-aurora .au-diagram,
.hero-aurora .au-nodes { will-change: transform; }
/* reactive constellation canvas (hero + CTA banners) */
.depth-field {
  position: absolute; inset: 0; width: 100%; height: 100%;
  z-index: 1; pointer-events: none;
}
.cta-banner.has-field { position: relative; overflow: hidden; }
.cta-banner .depth-field { z-index: 0; }
/* keep the hero tall enough that the integrated diagram never crops */
.hero { min-height: clamp(600px, 76vh, 720px); }
.hero .hero__inner { align-content: center; }
.hero-spacer { width: 100%; aspect-ratio: 5 / 4; min-height: 460px; }
/* on stacked/mobile layouts, drop the diagram and keep only the calm field */
@media (max-width: 900px) {
  .hero { min-height: 0; }
  .hero-spacer { display: none; }
  .hero-aurora .au-diagram { display: none; }
}
/* left + top/bottom scrim, painted ABOVE the flow so text stays readable */
.hero-aurora::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, #050506 2%, rgba(5,5,6,0.60) 34%, rgba(5,5,6,0) 62%),
    linear-gradient(180deg, rgba(5,5,6,0) 60%, rgba(10,9,13,0.9) 100%);
}
@keyframes aurora-drift {
  from { transform: scale(1.02) translate3d(-1%, 0.4%, 0); }
  to   { transform: scale(1.06) translate3d(1%, -0.6%, 0); }
}

/* --- live motion inside the flow --- */
.hero-aurora .aur-soft { transform-box: fill-box; transform-origin: 55% 55%;
  animation: aurA 26s ease-in-out infinite alternate; }
.hero-aurora .aur-mid  { transform-box: fill-box; transform-origin: 55% 55%;
  animation: aurB 19s ease-in-out infinite alternate; }
.hero-aurora .aur-orb  { transform-box: fill-box; transform-origin: center;
  animation: aurPulse 15s ease-in-out infinite alternate; }
@keyframes aurA { from { transform: translate(-16px, 10px); } to { transform: translate(18px, -12px); } }
@keyframes aurB { from { transform: translate(14px, -8px); }  to { transform: translate(-16px, 12px); } }
@keyframes aurPulse { from { transform: scale(1); opacity: 0.85; } to { transform: scale(1.12); opacity: 1; } }

/* pulses of light travelling along the flow lines */
.hero-aurora .aur-core  { stroke-dasharray: 150 460; animation: aurFlow 7s linear infinite; }
.hero-aurora .aur-flow-1{ stroke-dasharray: 70 520;  animation: aurFlow 5.5s linear infinite; }
.hero-aurora .aur-flow-2{ stroke-dasharray: 46 560;  animation: aurFlow 9s linear infinite; animation-delay: -3s; }
@keyframes aurFlow { to { stroke-dashoffset: -610; } }

/* gently twinkling bokeh */
.hero-aurora .aur-bokeh circle { transform-box: fill-box; transform-origin: center;
  animation: aurTwinkle 5s ease-in-out infinite; }
@keyframes aurTwinkle { 0%,100% { opacity: 0.35; transform: scale(0.9); } 50% { opacity: 0.85; transform: scale(1.15); } }

/* keep all hero content above the aurora */
.hero .container,
.hero__inner { position: relative; z-index: 1; }
.hero::before, .hero::after { opacity: 0.25; }

@media (prefers-reduced-motion: reduce) {
  .hero-aurora .aurora-svg,
  .hero-aurora .aur-soft, .hero-aurora .aur-mid, .hero-aurora .aur-orb,
  .hero-aurora .aur-core, .hero-aurora .aur-flow-1, .hero-aurora .aur-flow-2,
  .hero-aurora .aur-bokeh circle { animation: none; }
}

/* ============================ HERO VISUAL =============================== */
/* Give the signalmap frame a stronger, more colourful ambient bloom. */
.hero__visual::after {
  content: '';
  position: absolute; inset: -6% -4% -10% -6%; z-index: -1;
  border-radius: 50%;
  background: radial-gradient(closest-side,
    color-mix(in srgb, var(--violet) 32%, transparent),
    color-mix(in srgb, var(--purple) 12%, transparent) 55%, transparent 74%);
  filter: blur(14px); opacity: 0.75; pointer-events: none;
}

/* ============ HERO DIAGRAM — dissolved into the background ============= */
/* No card frame: the decision diagram floats directly on the hero field,
   reading as one continuous constellation with the background route. */
.signalmap {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  overflow: visible !important;
}
/* Labels become quiet floating annotations, not card chrome. */
.signalmap__hud { font-size: 0.74rem !important; }
.signalmap__hud > span:first-child {
  color: var(--text-muted); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
}
.signalmap__status {
  padding: 0; background: none; border: none;
  color: var(--lilac); font-weight: 600;
}
.signalmap__status .live {
  background: var(--violet) !important;
  box-shadow: 0 0 8px color-mix(in srgb, var(--violet) 60%, transparent);
}
.signalmap__result {
  padding: 0; background: none; border: none; backdrop-filter: none;
  color: var(--text-muted) !important; font-size: 0.82rem !important;
}
.signalmap__result b { color: var(--lilac); }

/* ============================ CTA / BUTTONS ============================= */
/* Primary button: a richer purple→violet gradient with a soft outer glow. */
.btn--primary {
  background: linear-gradient(135deg, var(--violet), var(--purple)) !important;
  box-shadow:
    0 1px 0 color-mix(in srgb, #fff 20%, transparent) inset,
    0 10px 26px -10px color-mix(in srgb, var(--purple) 85%, transparent) !important;
}
.btn--primary:hover {
  box-shadow:
    0 1px 0 color-mix(in srgb, #fff 26%, transparent) inset,
    0 14px 34px -10px color-mix(in srgb, var(--violet) 90%, transparent) !important;
}

/* =======================================================================
 * EXPERIENCE LAYER — premium motion & interaction (paired with experience.js)
 * =====================================================================*/
@property --ang { syntax: '<angle>'; inherits: false; initial-value: 0deg; }

/* Richer entrance: rise + soft blur-in with a spring-like ease. */
:root { --reveal-shift: 30px; }
[data-reveal] {
  transition: opacity .8s cubic-bezier(.16,1,.3,1),
              transform .8s cubic-bezier(.16,1,.3,1),
              filter .8s ease !important;
  filter: blur(9px);
}
[data-reveal].is-in { filter: blur(0); }

/* Cursor spotlight on cards & interactive surfaces (injected layer, no pseudo clash).
 * Two-layer light: a wide violet bloom + a tight warm core, blended additively,
 * plus a thin ring of light that wakes along the border near the cursor. */
.has-spot { position: relative; isolation: isolate; }
.spot-layer {
  position: absolute; inset: 0; z-index: -1;
  border-radius: inherit; pointer-events: none;
  background:
    radial-gradient(300px circle at var(--mx, 50%) var(--my, 0%),
      color-mix(in srgb, var(--purple) 20%, transparent), transparent 68%),
    radial-gradient(110px circle at var(--mx, 50%) var(--my, 0%),
      color-mix(in srgb, var(--lilac) 22%, transparent), transparent 62%);
  mix-blend-mode: screen;
  opacity: 0; transition: opacity .45s ease;
}
.spot-layer::after {                       /* border ring lit near the cursor */
  content: ''; position: absolute; inset: 0;
  border-radius: inherit; padding: 1px;
  background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 0%),
    color-mix(in srgb, var(--lilac) 55%, transparent), transparent 72%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
.has-spot:hover .spot-layer { opacity: 1; }

/* Section-wide ambient spotlight — one soft glow that tracks the cursor across
 * the whole section (larger + subtler than the per-card version). Uses its own
 * vars (--smx/--smy) so it never interferes with card spotlights. */
.has-section-spot { position: relative; isolation: isolate; }
.section-spot {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  border-radius: inherit;
  background: radial-gradient(680px circle at var(--smx, 50%) var(--smy, 35%),
    color-mix(in srgb, var(--purple) 9%, transparent), transparent 60%);
  mix-blend-mode: screen;
  opacity: 0; transition: opacity .6s ease;
}
.has-section-spot:hover .section-spot { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .section-spot { display: none; } }

/* Soft 3D tilt targets get depth + smooth reset. */
.has-tilt { transform-style: preserve-3d; transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out); will-change: transform; }

/* Magnetic buttons need a transform hook. */
.btn--primary, .btn--lg, .header-cta { will-change: transform; }

/* Animated conic gradient border on the featured plan. */
.plan--featured { position: relative; }
.plan--featured::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px;
  background: conic-gradient(from var(--ang), transparent 0deg,
    var(--violet) 90deg, var(--lilac) 150deg, transparent 240deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: exp-spin 5s linear infinite; pointer-events: none; z-index: 2;
}
@keyframes exp-spin { to { --ang: 360deg; } }

/* Scroll progress bar. */
.scroll-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 2.5px; z-index: 1200;
  transform: scaleX(0); transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--purple), var(--violet), var(--lilac));
  box-shadow: 0 0 12px color-mix(in srgb, var(--violet) 60%, transparent);
}

/* Page transition veil (transparent by default — never hides content if JS is off). */
.page-veil {
  position: fixed; inset: 0; z-index: 3000; pointer-events: none;
  background:
    radial-gradient(120% 90% at 70% 40%, #111014, #050506 70%);
  opacity: 0; transition: opacity .34s ease;
}
html.exp-leave .page-veil { opacity: 0.96; }
html.exp-ready #main { animation: exp-page-in .6s cubic-bezier(.16,1,.3,1) both; }
@keyframes exp-page-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { filter: none; }
  .plan--featured::after { animation: none; }
  html.exp-ready #main { animation: none; }
}

/* =======================================================================
 * PHASE 2 — interactive opportunity map + hero mini-diagnostic
 * =====================================================================*/
/* only the nodes catch the pointer; the rest of the aurora stays inert */
.hero-aurora .au-node { pointer-events: auto; cursor: pointer; }
.au-node .au-lbl { font: 600 14px var(--font-sans, sans-serif); fill: #f6f3fc; letter-spacing: -.1px;
  transition: fill .4s ease, opacity .4s ease; }
.au-halo2 { opacity: 0; transition: opacity .45s ease; }
.au-core2 { transform-box: fill-box; transform-origin: center; transition: transform .4s var(--ease-out), opacity .4s ease; }
.au-hot { transition: opacity .4s ease; }
.au-node.is-on  .au-halo2 { opacity: .6; }
.au-node.is-off .au-halo2 { opacity: 0; }
.au-node.is-off .au-core2 { transform: scale(.46); opacity: .55; }
.au-node.is-off .au-hot   { opacity: 0; }
.au-node.is-off .au-lbl   { fill: #AAA4B1; font-weight: 400; opacity: .8; }
.au-node:hover .au-core2  { transform: scale(1.28); }
.au-node:hover .au-halo2  { opacity: .85; }
.au-node:hover .au-lbl    { fill: #ffffff; }
.au-brbase  { transition: opacity .45s ease; }
.au-brpulse { transition: opacity .45s ease; }
.au-b.is-on  .au-brbase  { opacity: .6; }
.au-b.is-off .au-brbase  { opacity: .12; }
.au-b.is-on  .au-brpulse { opacity: .85; }
.au-b.is-off .au-brpulse { opacity: 0; }

/* floating tooltip when hovering a node */
.hero-tip {
  position: fixed; z-index: 60; pointer-events: none; max-width: 260px;
  padding: .7rem .85rem; border-radius: 12px;
  background: color-mix(in srgb, #111014 88%, transparent);
  border: 1px solid color-mix(in srgb, var(--lilac) 22%, transparent);
  box-shadow: var(--shadow-lg), 0 20px 50px -30px color-mix(in srgb, var(--purple) 80%, transparent);
  backdrop-filter: blur(8px);
  opacity: 0; transform: translateY(6px) scale(.98); transition: opacity .2s ease, transform .2s ease;
}
.hero-tip.show { opacity: 1; transform: none; }
.hero-tip .t-name { font-weight: 600; color: #fff; font-size: .95rem; }
.hero-tip .t-tag { color: var(--text-muted); font-size: .82rem; margin-top: .15rem; line-height: 1.35; }
.hero-tip .t-go { color: var(--lilac); font-size: .78rem; font-weight: 600; margin-top: .4rem; display: inline-flex; gap: .3rem; }

/* mini-diagnostic panel inside the hero copy */
.hero-quiz {
  margin-top: var(--space-lg); max-width: 30rem;
  padding: 1rem 1.1rem; border-radius: 16px;
  background: color-mix(in srgb, var(--violet) 7%, transparent);
  border: 1px solid color-mix(in srgb, var(--lilac) 16%, transparent);
  backdrop-filter: blur(6px);
}
.hero-quiz__top { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .7rem; }
.hero-quiz__label { font-size: .72rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--lilac);
  display: inline-flex; align-items: center; gap: .45rem; }
.hero-quiz__label::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--violet);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--violet) 22%, transparent); }
.hero-quiz__dots { display: inline-flex; gap: .3rem; }
.hero-quiz__dots i { width: 6px; height: 6px; border-radius: 50%; background: color-mix(in srgb, var(--lilac) 25%, transparent); transition: background .3s, transform .3s; }
.hero-quiz__dots i.on { background: var(--violet); transform: scale(1.25); }
.hero-quiz__q { color: var(--text); font-weight: 600; font-size: 1.02rem; margin-bottom: .7rem; min-height: 1.4em; }
.hero-quiz__opts { display: flex; flex-wrap: wrap; gap: .5rem; }
.hero-quiz__opt {
  padding: .5rem .8rem; border-radius: 999px; font-size: .86rem; font-weight: 500;
  color: var(--text); background: color-mix(in srgb, var(--surface-3) 70%, transparent);
  border: 1px solid var(--border); cursor: pointer;
  transition: transform .2s var(--ease-out), border-color .2s, background .2s, color .2s;
}
.hero-quiz__opt:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--violet) 55%, transparent);
  background: color-mix(in srgb, var(--violet) 16%, transparent); }
.hero-quiz__opt:active { transform: translateY(0) scale(.97); }
.hero-quiz__result { }
.hero-quiz__result p { color: var(--text-muted); font-size: .9rem; margin-bottom: .7rem; }
.hero-quiz__result .names { color: var(--lilac); font-weight: 600; }
.hero-quiz__actions { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; }
.hero-quiz__reset { background: none; border: none; color: var(--text-muted); font-size: .82rem; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.hero-quiz.reveal-in { animation: exp-page-in .6s cubic-bezier(.16,1,.3,1) both; }
@media (max-width: 900px) { .hero-quiz { display: none; } }

/* =======================================================================
 * PHASE 3 — scroll storytelling (paired with scroll.js / GSAP)
 * =====================================================================*/
/* ---- The Verity method (Diagnose → Review): a designed progression rail,
 * not four identical cards. A faint track + a scroll-driven fill, nodes that
 * complete as they pass, a single "current" step highlighted at a time, and a
 * short result under each. Motion is opacity/transform only, reduced-motion
 * falls back to a clean static state (scroll.js is skipped there). */
.process {
  position: relative;
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.25rem, 2.4vw, 2.25rem);
  padding-top: 2rem;
}
.process::before {                       /* full faint track */
  content: ''; position: absolute; top: 6px; left: 0; right: 0; height: 2px;
  background: color-mix(in srgb, var(--lilac) 16%, transparent);
  opacity: 1; border-radius: 2px; pointer-events: none;
}
.process-rail {                          /* progress fill (scaleX by scroll.js) */
  position: absolute; top: 6px; left: 0; right: 0; height: 2px; z-index: 1;
  transform: scaleX(0); transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--violet), var(--lilac));
  box-shadow: 0 0 12px color-mix(in srgb, var(--violet) 65%, transparent);
  border-radius: 2px; pointer-events: none;
}
.process__step {
  position: relative; border-top: 0; padding-top: 1.75rem;
}
.process__step::before {                 /* node sitting on the rail */
  content: ''; position: absolute; top: 2px; left: 0;
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--bg); border: 2px solid color-mix(in srgb, var(--lilac) 42%, transparent);
  box-shadow: none; z-index: 2;
  transition: background .35s ease, border-color .35s ease, box-shadow .35s ease, transform .35s ease;
  animation: none;                       /* neutralise legacy node scaleX pop */
}
.process__step.passed::before {          /* completed nodes fill in */
  background: var(--violet); border-color: var(--violet);
  box-shadow: 0 0 10px color-mix(in srgb, var(--violet) 55%, transparent);
}
.process__step.is-active::before {       /* the single current step */
  background: var(--lilac); border-color: var(--lilac);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--violet) 22%, transparent),
              0 0 16px color-mix(in srgb, var(--lilac) 70%, transparent);
  transform: scale(1.18);
}
.process__step .n {                      /* number — big, tabular, quiet lilac */
  display: block; line-height: 1; font-weight: 600; font-variant-numeric: tabular-nums;
  font-size: clamp(1.55rem, 1.2rem + 1.3vw, 2rem);
  color: color-mix(in srgb, var(--lilac) 52%, var(--text-muted));
  transition: color .4s ease, text-shadow .4s ease;
}
.process__step.is-active .n { color: #fff; text-shadow: 0 0 16px color-mix(in srgb, var(--violet) 72%, transparent); }
.process__step h3 { font-size: var(--step-1); margin-top: .55rem; color: var(--text-strong); }
.process__step > p { margin-top: .45rem; color: var(--text-muted); font-size: .92rem; line-height: 1.5; }
.process__result {                       /* the short outcome — editorial footnote */
  margin-top: 1rem; padding-top: .7rem;
  border-top: 1px solid color-mix(in srgb, var(--lilac) 14%, transparent);
  font-size: .86rem; color: var(--text); line-height: 1.4;
}
.process__result span {
  display: block; margin-bottom: .18rem; font-weight: 600;
  font-size: .68rem; letter-spacing: .11em; text-transform: uppercase; color: var(--accent-ink);
}
/* Desktop: hovering a step highlights just that one (interaction, not just scroll). */
@media (hover: hover) and (min-width: 761px) {
  .process__step { transition: transform .3s var(--ease-out); }
  .process__step:hover { transform: translateY(-3px); }
  .process__step:hover::before {
    background: var(--lilac); border-color: var(--lilac); transform: scale(1.18);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--violet) 22%, transparent);
  }
  .process__step:hover .n { color: #fff; }
}
/* Mobile: a calm vertical timeline — never four cramped cards. */
@media (max-width: 760px) {
  .process { grid-template-columns: 1fr; gap: 0; padding-top: 0; padding-left: 1.9rem; }
  .process::before {                     /* rail becomes vertical */
    top: 10px; bottom: 10px; left: 5px; right: auto; width: 2px; height: auto;
  }
  .process-rail { display: none; }
  .process__step { padding: 0 0 1.9rem 0; }
  .process__step:last-child { padding-bottom: 0; }
  .process__step::before { top: 3px; left: -1.9rem; }
  .process__step .n { font-size: 1.4rem; }
  .process__result { margin-top: .8rem; }
}

/* ===================== WORKSPACE PREVIEW ("Your path…") ================= */
/* More air around a section that should read as one calm place, and a card
 * restructured as a coherent journey: where you are → next goal → plan
 * progress (the method itself) → next action → saved → guidance. Clearly a
 * preview, never posed as a live account. Adaptive tokens only. */
.section--workspace { padding-block: clamp(4.5rem, 3rem + 5vw, 7.5rem); }
.split--workspace { align-items: center; gap: clamp(2rem, 1.4rem + 4vw, 4rem); }
.workspace-intro { max-width: 30rem; }
.workspace-intro .lead { margin-top: var(--space-md); max-width: 40ch; }
.workspace-intro .link-arrow { margin-top: var(--space-lg); }

.dashboard__bar .dashboard__tag {
  margin-left: auto; font-size: .66rem; letter-spacing: .1em; text-transform: uppercase;
  font-weight: 600; color: var(--accent-ink);
  padding: .22em .6em; border-radius: var(--r-pill);
  border: 1px solid color-mix(in srgb, var(--lilac) 24%, transparent);
  background: color-mix(in srgb, var(--violet) 12%, transparent);
}
.dashboard__flow { padding: var(--space-lg); display: grid; gap: var(--space-md); }

.wsrow { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); }
.wsfield { display: flex; flex-direction: column; gap: .3rem; min-width: 0; }
.wsfield .k, .wsplan .k, .wsaction .k {
  font-size: .7rem; letter-spacing: .05em; text-transform: uppercase;
  color: var(--text-muted); font-weight: 600;
}
.wsfield .v { font-weight: 600; color: var(--text-strong); font-size: .95rem; }
.wsfield .v--quote { font-weight: 400; font-style: italic; color: var(--text-muted); font-size: .88rem; }

/* plan progress = the four-step method, with the current step lit */
.wsplan {
  border: 1px solid var(--border); border-radius: var(--r-md);
  padding: var(--space-md); background: var(--bg); display: grid; gap: .6rem;
}
.wsplan__head { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; }
.wsplan__at { font-size: .78rem; font-weight: 600; color: var(--accent-ink); white-space: nowrap; }
.wssteps { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: .4rem; margin: .2rem 0 0; padding: 0; }
.wssteps li {
  font-size: .72rem; color: var(--text-muted); text-align: center;
  padding-top: .5rem; border-top: 2px solid var(--border);
}
.wssteps li.done { color: var(--text); border-top-color: color-mix(in srgb, var(--violet) 55%, transparent); }
.wssteps li.now { color: var(--text-strong); font-weight: 600; border-top-color: var(--lilac); }

/* the single "move to execution" moment */
.wsaction { display: flex; flex-direction: column; gap: .3rem; border-left: 2px solid var(--accent); padding-left: .85rem; }
.wsaction .v { font-weight: 600; color: var(--text-strong); font-size: 1rem; }

.wschips { display: flex; flex-wrap: wrap; gap: .4rem; }
.wschips em {
  font-style: normal; font-size: .78rem; color: var(--accent-ink);
  padding: .2em .6em; border-radius: var(--r-pill);
  border: 1px solid color-mix(in srgb, var(--lilac) 20%, transparent);
  background: color-mix(in srgb, var(--violet) 8%, transparent);
}
.workspace-note { margin-top: var(--space-lg); font-size: .8rem; color: var(--text-muted); text-align: center; }

@media (max-width: 820px) {
  .workspace-intro { max-width: none; }
  .workspace-note { text-align: left; }
}
@media (max-width: 480px) {
  .wsrow { grid-template-columns: 1fr; }
  .dashboard__flow { padding: var(--space-md); }
}

/* ============================ LEGAL / POLICY PAGES ====================== */
/* Sober, highly readable: intro + effective date + review notice, a sticky
 * clickable table of contents, numbered anchored sections and cross-links.
 * No decorative motion. Reads well down to small phones. */
.legal-head .lead { max-width: 56ch; }
.legal-meta { margin-top: var(--space-md); font-size: .82rem; color: var(--text-muted); }
.legal-draft {
  margin-top: var(--space-lg); padding: var(--space-md) var(--space-lg);
  border: 1px solid color-mix(in srgb, var(--lilac) 22%, transparent);
  border-left: 3px solid var(--accent); border-radius: var(--r-md);
  background: color-mix(in srgb, var(--violet) 8%, transparent);
  font-size: .9rem; color: var(--text); line-height: 1.55;
}
.legal-draft strong { color: var(--text-strong); }

.legal-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2xl); }
@media (min-width: 921px) {
  .legal-layout { grid-template-columns: 15rem minmax(0, 1fr); gap: var(--space-3xl); align-items: start; }
  .legal-toc { position: sticky; top: calc(var(--header-h) + 1.5rem); max-height: calc(100vh - var(--header-h) - 3rem); overflow: auto; }
}
.legal-toc__title { font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); font-weight: 600; margin-bottom: .85rem; }
.legal-toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.legal-toc a { font-size: .88rem; line-height: 1.35; color: var(--text-muted); text-decoration: none; display: block; }
.legal-toc a:hover { color: var(--accent-ink); }

.legal-body { max-width: 68ch; }
.legal-body > section { scroll-margin-top: calc(var(--header-h) + 1.5rem); }
.legal-body > section + section { margin-top: var(--space-2xl); }
.legal-body h2 { font-size: var(--step-1); margin: 0 0 .6rem; color: var(--text-strong); }
.legal-body h3 { font-size: 1.02rem; margin: var(--space-lg) 0 .3rem; color: var(--text-strong); }
.legal-body p { font-size: 1rem; line-height: 1.72; color: var(--text); }
.legal-body p + p { margin-top: .8rem; }
.legal-body ul { list-style: none; padding-left: 0; margin-top: .7rem; display: grid; gap: .5rem; }
.legal-body ul li { display: flex; gap: .65rem; color: var(--text); line-height: 1.6; }
.legal-body ul li::before { content: ''; width: 6px; height: 6px; margin-top: .62em; border-radius: 50%; background: var(--accent); flex-shrink: 0; }
.legal-body a { color: var(--accent-ink); }
.legal-related { margin-top: var(--space-2xl); padding-top: var(--space-lg); border-top: 1px solid var(--border); font-size: .9rem; color: var(--text-muted); }
.legal-related a { color: var(--accent-ink); }
/* clip-path animations need the element to define a starting box */
.section__head h2 { will-change: clip-path; }

/* =======================================================================
 * INNER PAGES — page-hero aurora, steps timeline, search, scan
 * =====================================================================*/
/* hero aurora on inner pages (injected by experience.js) */
.page-aurora-host { position: relative; overflow: hidden; }
.page-aurora {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 68%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 0%, #000 68%, transparent 100%);
}
.page-aurora svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.page-aurora .pa-pulse { stroke-dasharray: 30 1200; animation: pa-flow 8s linear infinite; }
@keyframes pa-flow { to { stroke-dashoffset: -1230; } }
.page-aurora-host > .container { position: relative; z-index: 1; }

/* steps timeline (how-it-works): lit rail + glowing active dots */
.steps__line span {
  background: linear-gradient(90deg, var(--violet), var(--lilac)) !important;
  box-shadow: 0 0 12px color-mix(in srgb, var(--violet) 65%, transparent);
}
.step__dot { transition: border-color .4s ease, color .4s ease, box-shadow .4s ease, transform .4s var(--ease-out); }
.step.is-active .step__dot {
  border-color: var(--violet) !important;
  color: #fff !important;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--violet) 18%, transparent),
              0 0 18px color-mix(in srgb, var(--violet) 55%, transparent);
  transform: scale(1.06);
  background: linear-gradient(160deg, #19151F, #111014);
}
@media (max-width: 780px) {
  .steps__line span { background: linear-gradient(180deg, var(--violet), var(--lilac)) !important; }
}

/* global search (Cmd/Ctrl+K): glass panel, animated entrance, lit results */
.gsearch {
  background: color-mix(in srgb, #050506 62%, transparent) !important;
  -webkit-backdrop-filter: blur(10px) !important; backdrop-filter: blur(10px) !important;
}
.gsearch__panel {
  background:
    radial-gradient(120% 80% at 80% 0%, color-mix(in srgb, var(--violet) 10%, transparent), transparent 55%),
    color-mix(in srgb, #111014 92%, transparent) !important;
  border: 1px solid color-mix(in srgb, var(--lilac) 22%, transparent) !important;
  box-shadow: var(--shadow-lg),
    0 30px 80px -40px color-mix(in srgb, var(--purple) 80%, transparent) !important;
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.gsearch[data-open='true'] .gsearch__panel { animation: gs-pop .34s cubic-bezier(.16,1,.3,1) both; }
@keyframes gs-pop { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } }
.gsearch__input { border-bottom-color: color-mix(in srgb, var(--lilac) 16%, transparent) !important; }
.gsearch__input svg { color: var(--lilac) !important; }
.gsearch__input input { caret-color: var(--violet); }
.gsearch__group { color: var(--lilac) !important; letter-spacing: .1em !important; }
.gsearch__hit { position: relative; transition: background .2s ease, transform .2s ease; }
.gsearch__hit:hover, .gsearch__hit.is-active {
  background: color-mix(in srgb, var(--violet) 12%, transparent) !important;
  transform: translateX(3px);
}
.gsearch__hit:hover::before, .gsearch__hit.is-active::before {
  content: ''; position: absolute; left: 0; top: 18%; bottom: 18%; width: 2.5px;
  border-radius: 2px; background: linear-gradient(180deg, var(--violet), var(--lilac));
  box-shadow: 0 0 8px color-mix(in srgb, var(--violet) 70%, transparent);
}
.gsearch__hit mark { background: color-mix(in srgb, var(--violet) 30%, transparent) !important; color: #fff !important; }
.gsearch__foot span {
  padding: .2rem .5rem; border-radius: 6px;
  background: color-mix(in srgb, var(--violet) 9%, transparent);
  border: 1px solid color-mix(in srgb, var(--lilac) 14%, transparent);
}

/* opportunity scan: options glow + selected pulse + shimmering progress */
.scan-option { position: relative; isolation: isolate; transition: border-color .25s ease, background .25s ease, transform .2s var(--ease-out) !important; }
.scan-option:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--violet) 65%, transparent) !important;
  background: color-mix(in srgb, var(--violet) 10%, var(--surface)) !important; }
.scan-option.is-selected {
  border-color: var(--violet) !important;
  background: color-mix(in srgb, var(--violet) 16%, var(--surface)) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--violet) 20%, transparent),
              0 10px 26px -14px color-mix(in srgb, var(--purple) 80%, transparent) !important;
}
.scan__bar { overflow: hidden; }
.scan__bar span { position: relative; overflow: hidden; }
.scan__bar span::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
  transform: translateX(-100%);
  animation: scan-sheen 2.2s ease-in-out infinite;
}
@keyframes scan-sheen { 60%, 100% { transform: translateX(100%); } }

@media (prefers-reduced-motion: reduce) {
  .page-aurora .pa-pulse, .scan__bar span::after { animation: none; }
  .gsearch[data-open='true'] .gsearch__panel { animation: none; }
}

/* ============================ MOBILE ==================================== */
@media (max-width: 640px) {
  /* Tighten hero rhythm and keep the headline punchy but contained. */
  .hero__actions { display: flex; flex-direction: column; align-items: stretch; gap: 0.75rem; }
  .hero__actions .btn { width: 100%; justify-content: center; }
  .section__head h2 { letter-spacing: -0.015em; }
}

/* Comparison table: unambiguous cells (no blank-looking states). */
.compare .no { color: var(--text-muted); opacity: .9; font-weight: 600; }
.compare .yes { color: var(--lilac); }

/* "The method, not marketing" — editorial contrast, not four clone cards. */
.method-truth { max-width: 62rem; }
.method-truth__statement {
  font-size: var(--step-3); line-height: 1.25; color: var(--text-strong);
  max-width: 26ch; margin-bottom: var(--space-2xl);
}
.method-truth__statement em { color: var(--lilac); font-style: italic; }
.method-truth__cols {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2xl);
  border-top: 1px solid var(--border); padding-top: var(--space-xl);
}
.method-truth__col h3 { font-size: var(--step-1); color: var(--lilac); }
.method-truth__col--refuse h3 { color: var(--text-muted); }
.method-truth__col ul { margin-top: var(--space-md); display: grid; gap: .65rem; }
.method-truth__col li { position: relative; padding-left: 1.3rem; color: var(--text); font-size: .95rem; line-height: 1.5; }
.method-truth__col li::before {
  content: ''; position: absolute; left: 0; top: .48em; width: 7px; height: 7px; border-radius: 50%;
  background: var(--violet); box-shadow: 0 0 6px color-mix(in srgb, var(--violet) 60%, transparent);
}
.method-truth__col--refuse li { color: var(--text-muted); }
.method-truth__col--refuse li::before {
  background: transparent; border: 1.5px solid var(--text-muted); box-shadow: none;
  width: 8px; height: 2px; border-width: 0 0 1.5px 0; border-radius: 0; top: .62em;
}
@media (max-width: 720px) { .method-truth__cols { grid-template-columns: 1fr; gap: var(--space-xl); } }

/* Map label safe-area: on narrow desktops the cover-crop eats the right edge —
   keep the lit nodes, drop only the text labels (nothing ever cut). */
@media (max-width: 1280px) {
  .hero-aurora .au-lbl, .hero-aurora .au-ann, .hero-aurora .au-ann2, .hero-aurora .au-res { display: none; }
}

/* =======================================================================
 * INNER PAGE HEADERS — editorial refinement
 * -----------------------------------------------------------------------
 * Every interior page (services, about, how-it-works, pricing, opportunities,
 * contact, insights, detail 404s) shares `.page-hero` = breadcrumb + h1 +
 * lead, so they all read the same. This block gives that header more character
 * and rhythm — WITHOUT touching the home `.hero`: a lifted headline that
 * matches the section-title sheen, a lilac serif accent on the one emphasised
 * word per page (the page's editorial signature), a finer breadcrumb, and
 * calmer vertical spacing. Additive only; palette stays black + purple/lilac.
 * =====================================================================*/

/* Headline: same white→lilac sheen as section titles, so headings speak with
   one voice across the site (page-hero h1 was previously dead-flat white). */
.page-hero h1 {
  background: linear-gradient(180deg, #ffffff 0%, #d7cef0 135%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  max-width: 20ch;
}
/* The single emphasised word — wrapped in <em class="serif"> per page — lights
   in lilac italic serif. This is the pointed, editorial use of Source Serif 4
   that gives each interior page its own accent (AA on black, ~9:1). */
.page-hero h1 .serif,
.page-hero h1 em {
  -webkit-text-fill-color: var(--accent-ink);
  color: var(--accent-ink);
  font-style: italic;
}

/* Breadcrumb: quieter and finer, led by a short lit tick that ties the header
   to the identity without reintroducing an eyebrow. Scoped to .page-hero so
   the centred article breadcrumb (insight detail) is untouched. */
.page-hero .breadcrumb {
  align-items: center;
  font-size: 0.8rem;
  letter-spacing: 0.01em;
  color: var(--text-muted);
}
.page-hero .breadcrumb::before {
  content: '';
  width: 16px; height: 1px;
  margin-right: 0.1rem;
  background: linear-gradient(90deg, var(--violet), transparent);
}
.page-hero .breadcrumb a { color: var(--text-muted); }
.page-hero .breadcrumb a:hover { color: var(--accent-ink); }

/* Rhythm: a touch more air above the headline, a comfortable lead measure. */
.page-hero h1 { margin-top: var(--space-md); }
.page-hero .lead { margin-top: var(--space-md); max-width: 52ch; }