/* PulsarCards — marketing site.
 *
 * Design tokens live in pulsar-tokens.css and primitives in
 * pulsar-primitives.css; both are linked before this file.
 *
 * Art direction
 * -------------
 * The page opens in deep space and resolves onto paper. That arc is the
 * argument: a pulsar broadcasts on an unfailing period, and so should the
 * card you hand someone. Dark sections carry the story; light sections
 * carry the detail, because long-form reading belongs on paper.
 *
 * Restraint rules applied throughout: one gold action per view, no gradient
 * for its own sake, no glass panels, no floating geometry. Depth comes from
 * scale, light and overlap.
 */

/* ══════════════════════════════════════════════════════════════════
   Header
   ══════════════════════════════════════════════════════════════════ */
.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: var(--z-header);
  /* Sits over the dark hero, so it starts transparent with light text. */
  color: var(--paper);
  transition:
    background-color var(--dur-base) var(--ease-out),
    border-color     var(--dur-base) var(--ease-out),
    backdrop-filter  var(--dur-base) var(--ease-out);
  border-bottom: var(--border-hair) solid transparent;
}

.site-header.is-condensed,
.site-header.is-solid {
  background: rgba(11, 18, 32, 0.92);
  border-bottom-color: rgba(255, 252, 247, 0.08);
  backdrop-filter: blur(14px) saturate(1.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
}

.brand-logo {
  height: 28px;
  width: auto;
}

.header-inner {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  min-height: 72px;
}

.site-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--tap-min);
  color: inherit;
  text-decoration: none;
  font-family: var(--display);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
}

/* The brand mark: a gold core with a ring, echoing the hero's star. */
.brand-mark {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  color: var(--gold);
}
.brand-mark .icon { width: 100%; height: 100%; }

.site-nav {
  display: none;
  margin-left: auto;
  align-items: center;
  gap: var(--space-1);
}

@media (min-width: 900px) {
  .site-nav { display: flex; }
}

.site-nav a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  padding: 0 var(--space-3);
  border-radius: var(--radius-sm);
  color: inherit;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  text-decoration: none;
  opacity: 0.82;
  transition: opacity var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.site-nav a:hover { opacity: 1; background: rgba(255, 252, 247, 0.08); }

/* Current section: a gold underline rather than a filled pill, so the
   indicator never competes with the one gold CTA. */
.site-nav a.is-current { opacity: 1; }
.site-nav a.is-current::after {
  content: "";
  position: absolute;
  inset: auto var(--space-3) 12px;
  height: 2px;
  border-radius: var(--radius-full);
  background: var(--gold);
}
.site-nav a { position: relative; }

.nav-cta {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  margin-left: var(--space-2);
  padding: 0 var(--space-4);
  border-radius: var(--radius-sm);
  background: var(--gold);
  color: var(--gold-ink) !important;
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  text-decoration: none;
  opacity: 1 !important;
  transition: background-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.nav-cta:hover { background: var(--gold-strong); transform: translateY(-1px); }

/* ── Mobile drawer ─────────────────────────────────────────────────*/
.nav-toggle {
  display: grid;
  place-items: center;
  /* Hidden once the full nav fits; declared here rather than in the
     min-width block above so a later base rule cannot override it. */
  width: var(--tap-min);
  height: var(--tap-min);
  margin-left: auto;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.nav-panel {
  position: fixed;
  inset: 72px 0 auto;
  display: grid;
  gap: var(--space-1);
  padding: var(--space-4) var(--gutter) var(--space-6);
  background: rgba(11, 18, 32, 0.97);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom: var(--border-hair) solid rgba(255, 252, 247, 0.1);
  /* Collapsed by default; transform keeps it off the compositor's critical
     path and avoids animating height. */
  transform: translateY(-120%);
  transition: transform var(--dur-base) var(--ease-out);
  max-height: calc(100dvh - 72px);
  overflow-y: auto;
}
.nav-panel.is-open { transform: translateY(0); }

.nav-panel a {
  display: flex;
  align-items: center;
  min-height: 52px;
  padding: 0 var(--space-3);
  border-radius: var(--radius-sm);
  color: var(--paper);
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  text-decoration: none;
}
.nav-panel a:hover { background: rgba(255, 252, 247, 0.08); }
.nav-panel .nav-cta { justify-content: center; margin: var(--space-3) 0 0; }

body.has-nav-open { overflow: hidden; }

@media (min-width: 900px) {
  .nav-panel { display: none; }
  .nav-toggle { display: none; }
}

/* ══════════════════════════════════════════════════════════════════
   Hero — pinned, scroll-driven
   ══════════════════════════════════════════════════════════════════ */

/* Six acts in just under four viewports: enough to pace the story,
   short enough that the page never feels trapped. */
.hero-scene {
  position: relative;
  height: 380vh;
  background: var(--ink);
}

.hero-pin {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  display: grid;
  /* Canvas and copy share one grid cell: the copy sits over the scene. */
  grid-template-areas: "stage";
  isolation: isolate;
}

.hero-canvas,
.hero-fallback,
.hero-poster {
  grid-area: stage;
  width: 100%;
  height: 100%;
}

.hero-fallback {
  display: grid;
  grid-template-areas: "stage";
  overflow: hidden;
  background: var(--ink);
}
.hero-poster {
  object-fit: cover;
}
.hero-poster-card {
  grid-area: stage;
  align-self: center;
  justify-self: end;
  width: min(46vw, 520px);
  margin-right: 6vw;
  filter: drop-shadow(0 28px 60px rgba(0, 0, 0, 0.45));
  transform: rotate(-14deg);
}
@media (max-width: 859px), (orientation: portrait) {
  .hero-poster-card {
    width: min(72vw, 360px);
    justify-self: center;
    align-self: start;
    margin: 18vh 0 0;
    transform: rotate(-10deg);
  }
}

/* Poster stack is the fallback: shown until the first WebGL frame, and
   kept if the scene never comes up. The canvas stays in layout so the
   drawing buffer is sized before we flip the mode. */
.hero-fallback { display: grid; }
.hero-canvas {
  display: block;
  opacity: 0;
  pointer-events: none;
}
[data-hero-mode="webgl"] .hero-fallback { display: none; }
[data-hero-mode="webgl"] .hero-canvas { opacity: 1; }
[data-hero-mode="poster"] .hero-canvas { display: none; }

/* Vignette: pulls the eye to the centre and guarantees text contrast over
   whatever the scene is doing behind it. */
.hero-pin::after {
  content: "";
  grid-area: stage;
  pointer-events: none;
  background:
    radial-gradient(120% 90% at 50% 45%, transparent 38%, rgba(11, 18, 32, 0.72) 100%),
    linear-gradient(to bottom, rgba(11, 18, 32, 0.55) 0%, transparent 22%, transparent 62%, rgba(11, 18, 32, 0.88) 100%);
}

.hero-content {
  grid-area: stage;
  position: relative;
  z-index: 2;
  display: grid;
  /* Portrait: the star occupies the upper quarter, so copy is anchored to
     the lower part of the frame and the two never overlap. Landscape gets
     a vertically centred column beside the subject. */
  align-content: end;
  padding-top: 72px;      /* clears the fixed header */
  padding-bottom: var(--space-9);
  pointer-events: none;   /* only the CTAs are clickable */
}

@media (min-width: 860px) and (orientation: landscape) {
  .hero-content { align-content: center; padding-bottom: var(--space-7); }
}
.hero-content a,
.hero-content button { pointer-events: auto; }

/* ── Acts ──────────────────────────────────────────────────────────
   Six copy blocks stacked in the same cell. Motion language: a short
   lateral broadcast from the card, not a fade-up. */
.hero-acts {
  display: grid;
  grid-template-areas: "act";
  max-width: min(32rem, 44vw);
}

@media (min-width: 860px) and (orientation: landscape) {
  .hero-content { justify-items: start; }
  .hero-acts { margin-right: 40vw; }
}

@media (max-width: 859px), (orientation: portrait) {
  .hero-content { padding-top: 40vh; }
  .hero-acts { max-width: 46rem; margin-right: 0; }
}

/* Phone landscape is short and wide: keep copy on the left, card on the right.
   The 860px desktop rule never fires at 844×390. */
@media (max-height: 520px) and (orientation: landscape) {
  .hero-content {
    padding-top: 64px;
    padding-bottom: var(--space-5);
    align-content: center;
  }
  .hero-acts {
    max-width: min(28rem, 48vw);
    margin-right: 40vw;
  }
  .hero-cue { display: none; }
}

.hero-act {
  grid-area: act;
  opacity: 0;
  transform: translateX(18px);
  transition:
    opacity   var(--dur-slow) var(--ease-out),
    transform var(--dur-slow) var(--ease-out);
  pointer-events: none;
  visibility: hidden;
}
.hero-act.is-active {
  opacity: 1;
  transform: none;
  visibility: visible;
  pointer-events: auto;
}

.hero-act .eyebrow { color: var(--gold); margin-bottom: var(--space-3); }

.hero-act h1,
.hero-act h2 {
  color: var(--paper);
  font-size: var(--text-hero);
  line-height: 1.02;
  margin-bottom: var(--space-4);
  /* Only the first act carries the h1; later acts are h2 for correct
     document outline. Both need the same display treatment. */
}

.hero-act p {
  /* Narrower than the headline: the subject occupies the right third, and
     a full-measure paragraph would run underneath it. */
  max-width: 30rem;
  color: rgba(246, 244, 240, 0.82);
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  text-wrap: pretty;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

/* The hero's own button treatment: gold primary, outlined secondary in
   paper so it reads on the dark stage. */
.hero-actions .btn-secondary {
  --btn-bg: transparent;
  --btn-fg: var(--paper);
  --btn-border: rgba(246, 244, 240, 0.34);
}
.hero-actions .btn-secondary:hover {
  --btn-bg: rgba(246, 244, 240, 0.1);
  --btn-border: var(--paper);
  --btn-fg: var(--paper);
}

.hero-trust {
  margin-top: var(--space-5);
  color: rgba(246, 244, 240, 0.58);
  font-size: var(--text-sm);
  letter-spacing: 0.01em;
}

/* ── Progress + scroll cue ─────────────────────────────────────────*/
.hero-sound {
  position: absolute;
  z-index: 4;
  left: var(--gutter);
  bottom: calc(var(--space-5) + 14px);
  margin: 0;
  padding: 6px 10px;
  border: 1px solid rgba(246, 244, 240, 0.28);
  border-radius: var(--radius-full);
  background: transparent;
  color: rgba(246, 244, 240, 0.62);
  font: inherit;
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  cursor: pointer;
}
.hero-sound:hover,
.hero-sound[aria-pressed="true"] {
  border-color: var(--gold);
  color: var(--paper);
}
.hero-sound:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

.hero-progress {
  position: absolute;
  z-index: 3;
  left: var(--gutter);
  right: var(--gutter);
  bottom: var(--space-5);
  height: 2px;
  border-radius: var(--radius-full);
  background: rgba(246, 244, 240, 0.14);
  overflow: hidden;
}
.hero-progress::after {
  content: "";
  display: block;
  height: 100%;
  /* Driven by a custom property the scroll controller writes, so the bar
     costs one style recalculation and no layout. */
  width: calc(var(--hero-progress, 0) * 100%);
  background: linear-gradient(90deg, var(--gold-strong), var(--gold));
}

.hero-cue {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: var(--space-7);
  transform: translateX(-50%);
  display: grid;
  justify-items: center;
  gap: var(--space-2);
  color: rgba(246, 244, 240, 0.5);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-out);
}
/* The cue has done its job the moment the user starts scrolling. */
.is-condensed ~ main .hero-cue,
.hero-scene[data-scrolled] .hero-cue { opacity: 0; }

.hero-cue-line {
  width: 1px;
  height: 30px;
  background: linear-gradient(to bottom, var(--gold), transparent);
  animation: cue-fall 2.4s var(--ease-in-out) infinite;
}
@keyframes cue-fall {
  0%   { transform: scaleY(0); transform-origin: top; opacity: 0; }
  40%  { transform: scaleY(1); transform-origin: top; opacity: 1; }
  100% { transform: scaleY(1); transform-origin: bottom; opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  /* Without the scene there is no story to scroll through, so the hero
     collapses to a single readable viewport. */
  .hero-scene { height: auto; }
  .hero-pin { position: static; height: auto; min-height: 88vh; }
  .hero-act { opacity: 1; transform: none; visibility: visible; pointer-events: auto; }
  /* Show only the opening act; the rest is repeated by the sections below. */
  .hero-act:not(:first-child) { display: none; }
  .hero-cue, .hero-progress, .hero-callouts, .hero-sound { display: none; }
  .hero-cue-line { animation: none; }
}

/* Contextual labels for the picture. Hidden from AT — the act copy
   already says the same thing in a sentence. */
.hero-callouts {
  position: absolute;
  inset: auto var(--gutter) 18% auto;
  z-index: 3;
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--space-2);
  pointer-events: none;
}
.hero-callouts li {
  opacity: 0;
  transform: translateX(12px);
  color: var(--gold);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  transition:
    opacity var(--dur-slow) var(--ease-out),
    transform var(--dur-slow) var(--ease-out);
}
.hero-callouts li.is-on {
  opacity: 1;
  transform: none;
}
@media (max-width: 859px) {
  .hero-callouts { display: none; }
}

/* ══════════════════════════════════════════════════════════════════
   Sections
   ══════════════════════════════════════════════════════════════════ */
.band { padding-block: var(--section-y-lg); }
.band-paper { background: var(--paper); color: var(--ink); }
.band-raised { background: var(--raised); color: var(--ink); }

/* Dark bands continue the story; they opt into the dark surface so every
   primitive inside them recolours automatically. */
.band-ink {
  background: var(--ink);
  color: var(--paper);
}

.section-head {
  max-width: 44rem;
  margin-bottom: var(--space-7);
}
.section-head.is-centered { margin-inline: auto; text-align: center; }
.section-head .eyebrow { color: var(--gold-strong); margin-bottom: var(--space-3); }
.band-ink .section-head .eyebrow { color: var(--gold); }
.section-head h2 { margin-bottom: var(--space-3); }
.section-head p {
  color: var(--text-secondary);
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  text-wrap: pretty;
}
.band-ink .section-head p { color: rgba(246, 244, 240, 0.72); }

/* ── Problem / solution pair ───────────────────────────────────────
   The argument the whole product rests on, so it gets its own band and a
   deliberate before/after structure rather than a feature grid. */
.contrast-pair {
  display: grid;
  gap: var(--space-5);
}
@media (min-width: 820px) {
  .contrast-pair { grid-template-columns: 1fr auto 1fr; align-items: center; }
}

.contrast-side {
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  border: var(--border-hair) solid;
}
.contrast-before {
  border-color: rgba(163, 42, 40, 0.28);
  background: var(--danger-wash);
}
.contrast-after {
  border-color: var(--gold-soft);
  background: var(--gold-wash);
}
.band-ink .contrast-before { border-color: rgba(253, 164, 175, 0.22); background: rgba(163, 42, 40, 0.14); }
.band-ink .contrast-after  { border-color: rgba(196, 164, 106, 0.34); background: rgba(196, 164, 106, 0.12); }

.contrast-label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}
.contrast-before .contrast-label { color: var(--danger); }
.contrast-after  .contrast-label { color: var(--gold-strong); }
.band-ink .contrast-before .contrast-label { color: #FDA4AF; }
.band-ink .contrast-after  .contrast-label { color: var(--gold); }

.contrast-side blockquote {
  margin: 0;
  font-family: var(--display);
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
}
.contrast-side ul {
  margin: var(--space-4) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--space-2);
  font-size: var(--text-sm);
}
.contrast-side li { display: flex; gap: var(--space-2); align-items: flex-start; }
.contrast-side li .icon { margin-top: 0.15em; flex: none; }

.contrast-arrow {
  display: grid;
  place-items: center;
  color: var(--gold);
}
.contrast-arrow .icon { width: 2rem; height: 2rem; }
@media (max-width: 819px) {
  .contrast-arrow { transform: rotate(90deg); }
}

/* ── Feature cards ─────────────────────────────────────────────────*/
.feature-grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.feature {
  display: grid;
  gap: var(--space-3);
  align-content: start;
  padding: var(--space-5);
  border: var(--border-hair) solid var(--surface-line);
  border-radius: var(--radius-lg);
  background: var(--surface-raised);
  transition:
    transform var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out);
}
.feature:hover {
  transform: translateY(-3px);
  border-color: var(--gold-soft);
  box-shadow: var(--shadow-md);
}
.band-ink .feature {
  background: rgba(255, 252, 247, 0.04);
  border-color: rgba(255, 252, 247, 0.1);
}
.band-ink .feature:hover { border-color: rgba(196, 164, 106, 0.4); background: rgba(255, 252, 247, 0.07); }

.feature-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  background: var(--gold-wash);
  color: var(--gold-strong);
}
.band-ink .feature-icon { background: rgba(196, 164, 106, 0.16); color: var(--gold); }
.feature-icon .icon { width: 22px; height: 22px; }

.feature h3 {
  font-family: var(--ui);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-normal);
}
.feature p { color: var(--text-secondary); font-size: var(--text-sm); line-height: var(--leading-normal); }
.band-ink .feature p { color: rgba(246, 244, 240, 0.68); }

.feature-proof {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--gold-strong);
  text-decoration: none;
}
a.feature-proof:hover { color: var(--gold); }
.band-ink .feature-proof { color: var(--gold); }

/* ── Steps ─────────────────────────────────────────────────────────*/
.steps {
  display: grid;
  gap: var(--space-5);
  counter-reset: step;
}
@media (min-width: 780px) {
  .steps { grid-template-columns: repeat(3, 1fr); }
}

.step {
  position: relative;
  padding-top: var(--space-5);
  border-top: var(--border-firm) solid var(--surface-line);
  counter-increment: step;
}
/* The connector between steps: a hairline that reads as one continuous
   process rather than three unrelated cards. */
.step::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  top: calc(-1 * var(--space-5));
  left: 0;
  font-family: var(--display);
  font-size: var(--text-2xl);
  color: var(--gold);
}
.step h3 { margin-bottom: var(--space-2); font-family: var(--ui); font-size: var(--text-lg); }
.step p { color: var(--text-secondary); font-size: var(--text-sm); }
.band-ink .step { border-top-color: rgba(255, 252, 247, 0.16); }
.band-ink .step p { color: rgba(246, 244, 240, 0.68); }

/* ── Metrics ───────────────────────────────────────────────────────*/
.metric-row {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.metric { display: grid; gap: var(--space-2); }
.metric-value {
  font-family: var(--display);
  font-size: var(--text-3xl);
  line-height: 1;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}
.metric p { color: var(--text-secondary); font-size: var(--text-sm); }
.band-ink .metric p { color: rgba(246, 244, 240, 0.68); }

/* ── Pricing ───────────────────────────────────────────────────────*/
.price-grid {
  display: grid;
  gap: var(--space-4);
  align-items: start;
}
@media (min-width: 900px) {
  .price-grid {
    grid-template-columns: repeat(3, 1fr);
    /* Cards must be equal height for their internal rows to line up. */
    align-items: stretch;
  }

  /* Align the tiers row by row, not just card by card.
     Each tier has the same three parts — head, feature list, CTA — but
     the parts are different lengths, so three independent grids put the
     amounts on three baselines and the buttons at three heights. Reading
     across to compare tiers is the entire job of a pricing table, and
     that comparison is what misalignment breaks.
     Subgrid hands the rows back to the parent so all three share them.
     Without it the cards simply size themselves, which is today's
     behaviour. */
  @supports (grid-template-rows: subgrid) {
    .price-grid { grid-template-rows: auto 1fr auto; }
    .price {
      grid-row: span 3;
      grid-template-rows: subgrid;
    }
  }
}

.price {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-6) var(--space-5);
  border: var(--border-hair) solid var(--surface-line);
  border-radius: var(--radius-lg);
  background: var(--surface-raised);
}

/* One featured tier. The gold border and the gold shadow do the
   signalling. There was a `margin-block: calc(-1 * var(--space-4))` here
   to lift it proud of its neighbours, under a comment about avoiding a
   scale transform "that breaks the grid rhythm" — the negative margin
   broke exactly the same rhythm, pushing this card 16px out of step and
   taking every row alignment with it. Emphasis must not cost comparability. */
.price-featured {
  border-color: var(--gold);
  box-shadow: var(--shadow-gold);
}

.price-head { display: grid; gap: var(--space-1); }
.price-name {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-secondary);
}
.price-tag { display: flex; align-items: baseline; gap: var(--space-2); }
.price-amount {
  font-family: var(--display);
  font-size: var(--text-3xl);
  line-height: 1;
  color: var(--ink);
}
.price-unit { font-size: var(--text-sm); color: var(--text-secondary); }
.price-note { font-size: var(--text-sm); color: var(--text-secondary); }

.price ul { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-2); }
.price li {
  display: flex;
  gap: var(--space-2);
  align-items: flex-start;
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}
.price li .icon { margin-top: 0.2em; flex: none; color: var(--gold-strong); }

.price .btn { margin-top: auto; }

.price-fine {
  margin-top: var(--space-5);
  text-align: center;
  color: var(--text-secondary);
  font-size: var(--text-sm);
}

/* ── Product showcase ──────────────────────────────────────────────*/
.product {
  display: grid;
  gap: var(--space-6);
  align-items: center;
}
@media (min-width: 860px) {
  .product { grid-template-columns: 1fr 1fr; }
  /* Alternating sides gives the page rhythm without a new component. */
  .product-reverse > :first-child { order: 2; }
}

.product-media {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: var(--ink);
}
.product-media img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-xl);
}

.product-media .model-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  cursor: grab;
  touch-action: none;
}
.product-media[data-model-ready="true"] img,
.product-media[data-model-ready="true"] .hotspot { opacity: 0; pointer-events: none; }

.hotspot-3d {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: var(--space-4);
  transform: translateX(-50%);
}
.product-media[data-model-ready="true"] .hotspot-3d { display: none; }

.hotspot {
  position: absolute;
  z-index: 2;
  left: var(--hx);
  top: var(--hy);
  width: 44px;
  height: 44px;
  margin: -22px 0 0 -22px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  color: inherit;
}
.hotspot-dot {
  display: block;
  width: 14px;
  height: 14px;
  margin: 15px auto 0;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 6px rgba(196, 164, 106, 0.28);
}
.hotspot-tip {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 10px);
  width: max-content;
  /* 72px inset keeps the tip on a 390px phone when the hotspot sits near an edge. */
  max-width: min(16rem, calc(100vw - 72px));
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  background: var(--ink);
  color: var(--paper);
  font-size: var(--text-xs);
  line-height: var(--leading-snug);
  overflow-wrap: anywhere;
  transform: translateX(-50%) scale(0.96);
  opacity: 0;
  pointer-events: none;
  transition:
    opacity var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out);
}
@media (max-width: 430px) {
  .hotspot-tip {
    max-width: min(12rem, calc(100vw - 72px));
  }
}

/* A tip centred on its dot runs off-canvas once the dot is near an edge —
   the `max-width` above caps the width but cannot stop it being centred on a
   point 20px from the frame. `pulsar_hotspots()` sets these from the
   coordinate, so a dot past 66% opens its tip leftward and one before 34%
   opens rightward. Pure CSS, no measurement, no anchor positioning. */
.hotspot[data-tip-align="end"] .hotspot-tip {
  left: auto;
  right: 0;
  transform: translateX(0) scale(0.96);
}
.hotspot[data-tip-align="start"] .hotspot-tip {
  left: 0;
  transform: translateX(0) scale(0.96);
}
.hotspot[data-tip-align="end"][aria-expanded="true"] .hotspot-tip,
.hotspot[data-tip-align="end"]:focus-visible .hotspot-tip,
.hotspot[data-tip-align="start"][aria-expanded="true"] .hotspot-tip,
.hotspot[data-tip-align="start"]:focus-visible .hotspot-tip {
  transform: translateX(0);
}
.hotspot[aria-expanded="true"] .hotspot-tip,
.hotspot:focus-visible .hotspot-tip {
  opacity: 1;
  transform: translateX(-50%);
}

.signal-path {
  margin: 0 0 var(--space-7);
}
.signal-path svg {
  display: block;
  width: min(100%, 44rem);
  height: auto;
  margin-inline: auto;
}
.signal-track {
  stroke: var(--surface-line);
  stroke-width: 2;
}
.signal-stroke {
  stroke: var(--gold);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: calc(1 - var(--signal, 0));
}
.signal-node circle {
  fill: var(--raised);
  stroke: var(--gold);
  stroke-width: 2;
}
.signal-path.is-lit .signal-node circle { fill: var(--gold); }
.signal-node text {
  fill: var(--text-secondary);
  font-family: var(--ui);
  font-size: 14px;
  font-weight: 600;
  text-anchor: middle;
}

.product-body h3 {
  font-size: var(--text-2xl);
  margin-bottom: var(--space-3);
}
.product-body ul {
  margin: var(--space-4) 0 var(--space-5);
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--space-2);
}
.product-body li { display: flex; gap: var(--space-2); align-items: flex-start; font-size: var(--text-sm); }
.product-body li .icon { margin-top: 0.2em; flex: none; color: var(--gold-strong); }
.band-ink .product-body li .icon { color: var(--gold); }

/* ── Testimonials ──────────────────────────────────────────────────*/
.quote-grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
}
.quote {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-5);
  border: var(--border-hair) solid var(--surface-line);
  border-radius: var(--radius-lg);
  background: var(--surface-raised);
}
.quote blockquote {
  margin: 0;
  font-family: var(--display);
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
}
.quote figcaption { font-size: var(--text-sm); color: var(--text-secondary); }
.band-ink .quote { background: rgba(255, 252, 247, 0.04); border-color: rgba(255, 252, 247, 0.1); }
.band-ink .quote figcaption { color: rgba(246, 244, 240, 0.62); }

/* ── FAQ ───────────────────────────────────────────────────────────
   Native <details>: keyboard accessible, works without JS, and announces
   its own expanded state. No accordion library required. */
.faq-grid {
  display: grid;
  gap: var(--space-3);
}
@media (min-width: 860px) {
  .faq-grid { grid-template-columns: repeat(2, 1fr); align-items: start; }
}

.faq {
  border: var(--border-hair) solid var(--surface-line);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
  overflow: hidden;
}
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: var(--tap-min);
  padding: var(--space-4);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:focus-visible { outline: var(--focus-ring); outline-offset: -2px; }
.faq summary .icon { flex: none; color: var(--gold-strong); transition: transform var(--dur-base) var(--ease-out); }
.faq[open] summary .icon { transform: rotate(180deg); }
.faq-body {
  padding: 0 var(--space-4) var(--space-4);
  color: var(--text-secondary);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
}

/* ── Final CTA ─────────────────────────────────────────────────────
   The story resolves here: dark again, one action, nothing else. */
.final-cta {
  position: relative;
  padding-block: var(--section-y-lg);
  background: var(--ink);
  color: var(--paper);
  overflow: hidden;
  text-align: center;
}
/* A last echo of the pulsar glow behind the closing line. */
.final-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(50rem 30rem at 50% 0%, rgba(196, 164, 106, 0.16), transparent 65%);
}
.final-cta > * { position: relative; }
.final-cta h2 {
  max-width: 34rem;
  margin: 0 auto var(--space-4);
  font-size: var(--text-4xl);
  color: var(--paper);
}
.final-cta p {
  max-width: 30rem;
  margin: 0 auto var(--space-6);
  color: rgba(246, 244, 240, 0.74);
  font-size: var(--text-lg);
}

/* ── Contact ───────────────────────────────────────────────────────*/
.contact-grid {
  display: grid;
  gap: var(--space-6);
  max-width: 62rem;
  margin-inline: auto;
}
@media (min-width: 880px) {
  .contact-grid { grid-template-columns: 0.8fr 1fr; }
}
.contact-form { display: grid; gap: var(--space-4); }
.contact-row { display: grid; gap: var(--space-4); }
@media (min-width: 560px) {
  .contact-row { grid-template-columns: 1fr 1fr; }
}

/* ── Contact section helpers ──────────────────────────────────────────*/
.eyebrow-gold { color: var(--gold-strong); }
.contact-heading { margin-block: var(--space-3); }
.contact-meta-list {
  margin-top: var(--space-5);
  padding: 0;
  list-style: none;
}

/* ── Footer ────────────────────────────────────────────────────────*/
.site-footer {
  padding-block: var(--space-7) var(--space-6);
  background: var(--ink);
  color: rgba(246, 244, 240, 0.66);
  font-size: var(--text-sm);
  border-top: var(--border-hair) solid rgba(255, 252, 247, 0.08);
}
.footer-grid {
  display: grid;
  gap: var(--space-6);
  margin-bottom: var(--space-6);
}
@media (min-width: 720px) {
  .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; }
}
.site-footer h2,
.site-footer h4 {
  margin-bottom: var(--space-3);
  color: var(--paper);
  font-family: var(--ui);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}
.site-footer ul { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-1); }
.site-footer a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  color: inherit;
  text-decoration: none;
}
.site-footer a:hover { color: var(--gold); }
.footer-legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: space-between;
  padding-top: var(--space-5);
  border-top: var(--border-hair) solid rgba(255, 252, 247, 0.08);
  font-size: var(--text-xs);
}

/* Marketing content must read without JS. That guarantee now lives on
   `html.no-js .reveal` in pulsar-primitives.css, which only applies when
   scripting is actually unavailable. */

/* ══════════════════════════════════════════════════════════════════
   Wave 18 — semantic marketing shell
   Pinned WebGL hero CSS above stays for Wave 19. These rules are the
   fast path: one viewport, real copy, no 3D dependency.
   ══════════════════════════════════════════════════════════════════ */

.hero-static {
  position: relative;
  isolation: isolate;
  min-height: min(92vh, 52rem);
  display: grid;
  align-items: end;
  background: var(--ink);
  color: var(--paper);
  overflow: hidden;
}

.hero-static-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.hero-static::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(120% 90% at 50% 45%, transparent 38%, rgba(11, 18, 32, 0.72) 100%),
    linear-gradient(to bottom, rgba(11, 18, 32, 0.55) 0%, transparent 22%, transparent 58%, rgba(11, 18, 32, 0.9) 100%);
}

.hero-static-copy {
  position: relative;
  z-index: 2;
  padding-top: calc(72px + var(--space-8));
  padding-bottom: var(--space-9);
  max-width: 46rem;
}

.hero-static-copy .eyebrow { color: var(--gold); margin-bottom: var(--space-3); }

.hero-static-copy h1 {
  color: var(--paper);
  font-size: var(--text-hero);
  line-height: 1.02;
  margin-bottom: var(--space-4);
}

.hero-static-copy > p {
  max-width: 32rem;
  color: rgba(246, 244, 240, 0.82);
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  text-wrap: pretty;
}

.page-hero {
  padding-top: calc(72px + var(--space-8));
  padding-bottom: var(--space-8);
  background: var(--ink);
  color: var(--paper);
}

.page-hero .eyebrow { color: var(--gold); margin-bottom: var(--space-3); }
.page-hero h1 { color: var(--paper); max-width: 22ch; margin-bottom: var(--space-4); }
.page-hero .lead {
  max-width: 36rem;
  color: rgba(246, 244, 240, 0.78);
}
.page-hero .hero-actions { margin-top: var(--space-6); }

/* Shade / Daylight chapter nav — chips, not a second primary menu */
.chapter-toc {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-7);
}
.chapter-toc a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid rgba(246, 244, 240, 0.18);
  border-radius: 999px;
  color: rgba(246, 244, 240, 0.86);
  text-decoration: none;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
}
.chapter-toc a:hover,
.chapter-toc a:focus-visible {
  border-color: var(--gold);
  color: var(--gold);
}
.chapter-toc-num {
  font-family: var(--ui);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  color: var(--gold);
}
.chapter-kicker {
  display: inline-block;
  margin-right: var(--space-2);
  font-family: var(--display);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--gold);
  letter-spacing: -0.02em;
}

.crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
  margin-bottom: var(--space-5);
  font-size: var(--text-sm);
  color: rgba(246, 244, 240, 0.56);
}
.crumbs a { color: var(--gold); text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }

.story {
  display: grid;
  gap: var(--space-7);
  margin: 0;
  padding: 0;
  list-style: none;
  max-width: 44rem;
}

.story-item {
  display: grid;
  gap: var(--space-3);
  padding-bottom: var(--space-7);
  border-bottom: var(--border-hair) solid var(--surface-line);
}
.story-item:last-child { border-bottom: 0; padding-bottom: 0; }
.band-ink .story-item { border-bottom-color: rgba(255, 252, 247, 0.12); }

.story-num {
  font-family: var(--display);
  font-size: var(--text-2xl);
  color: var(--gold);
  line-height: 1;
}

.story-item h2 {
  font-size: var(--text-2xl);
  margin-bottom: var(--space-2);
}
.story-item p {
  color: var(--text-secondary);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
}
.band-ink .story-item p { color: rgba(246, 244, 240, 0.72); }

.trust-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: var(--space-4);
}
.trust-card {
  background: var(--raised, #FFFCF7);
  border: 1px solid var(--line, #E6E1D8);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}
.trust-card h2 {
  font-family: var(--display);
  font-size: var(--text-lg);
  margin: 0 0 var(--space-2);
}
.trust-card p {
  color: var(--text-secondary, #6B6458);
  margin: 0 0 var(--space-3);
}
.trust-card a { color: var(--brand, #2550E0); }
.trust-banner {
  border: 1px solid var(--gold, #C4A46A);
  background: rgba(196, 164, 106, 0.12);
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  color: var(--ink, #0B1220);
}
.band-paper .form-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.band-paper .form-label {
  font-size: 13px;
  font-weight: 650;
  color: var(--muted, #6B6458);
}
.band-paper .form-input,
.band-paper .form-select,
.band-paper textarea.form-input {
  width: 100%;
  border: 1px solid var(--line, #E6E1D8);
  background: var(--raised, #FFFCF7);
  color: var(--ink, #0B1220);
  border-radius: 10px;
  padding: 12px 14px;
  font: inherit;
}

@media (prefers-reduced-motion: reduce) {
  .hero-static { min-height: auto; }
  .feature:hover { transform: none; }
}

/* Three company pillars — numbered beats, not fake ROI tiles */
.pillar-grid {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}
.pillar {
  display: grid;
  gap: var(--space-3);
  align-content: start;
}
.pillar-num {
  font-family: var(--ui);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--gold-strong);
}
.band-ink .pillar-num { color: var(--gold); }
.pillar h3 {
  font-family: var(--display);
  font-size: clamp(1.25rem, 2vw, 1.65rem);
  font-weight: var(--weight-semibold);
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.pillar p {
  color: var(--text-secondary);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}
.band-ink .pillar p { color: rgba(246, 244, 240, 0.68); }
.pillar-proof {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--gold-strong);
  text-decoration: none;
}
.band-ink .pillar-proof { color: var(--gold); }
a.pillar-proof:hover { color: var(--gold); }
@media (max-width: 819px) {
  .pillar-grid { grid-template-columns: 1fr; }
}

.policy-meta {
  margin-top: var(--space-4);
  font-size: var(--text-sm);
  color: rgba(246, 244, 240, 0.64);
}
.policy-doc {
  display: grid;
  gap: var(--space-7);
  margin-top: var(--space-6);
}

.policy-body-gap { margin-top: var(--space-7); }
.policy-toc {
  padding: var(--space-5);
  border: 1px solid var(--line, #E6E1D8);
  border-radius: var(--radius-lg);
  background: var(--raised, #FFFCF7);
}
.policy-toc-label {
  margin: 0 0 var(--space-3);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--muted, #6B6458);
}
.policy-toc ol {
  margin: 0;
  padding-left: 1.25rem;
  display: grid;
  gap: var(--space-2);
}
.policy-toc a {
  color: var(--brand, #2550E0);
  text-decoration: none;
}
.policy-toc a:hover,
.policy-toc a:focus-visible {
  color: var(--ink, #0B1220);
  text-decoration: underline;
}
.policy-list {
  margin: 0;
  padding-left: 1.25rem;
  display: grid;
  gap: var(--space-2);
  color: var(--text-secondary);
}
.policy-section {
  scroll-margin-top: 6rem;
}
.band-paper .chapter-toc,
.band-raised .chapter-toc,
.policy-toc-inline {
  margin-top: var(--space-5);
}
.band-paper .chapter-toc a,
.band-raised .chapter-toc a,
.policy-toc-inline a {
  border-color: var(--line, #E6E1D8);
  color: var(--ink, #0B1220);
}
.band-paper .chapter-toc a:hover,
.band-raised .chapter-toc a:hover,
.policy-toc-inline a:hover,
.band-paper .chapter-toc a:focus-visible,
.band-raised .chapter-toc a:focus-visible,
.policy-toc-inline a:focus-visible {
  border-color: var(--gold);
  color: var(--gold-strong, #8A6D3B);
}
@media (min-width: 1024px) {
  .policy-doc {
    grid-template-columns: 16rem minmax(0, 44rem);
    align-items: start;
  }
  .policy-toc {
    position: sticky;
    top: 6rem;
  }
}