/*
 * displayswitcher.com /future — staging build of the full product site
 *
 * This sheet is loaded AFTER /styles.css (via page.extra_head). It overrides
 * the centered single-card layout the coming-soon page sets on body/main,
 * and then layers in the section styles.
 *
 * Only loaded on /future/. The home page (/) is untouched.
 */

/* --- Overrides: cancel the coming-soon centered card layout ----------- */
body  { display: block; padding: 0; }
main  { max-width: none; text-align: left; }

/* --- Tokens (extrapolated from the coming-soon page) ------------------ */
:root {
  --bg:          #0a0a0a;
  --bg-deep:     #070809;
  --surface:     #121212;
  --text:        #e8e8e8;
  --text-muted:  #b0b0b0;
  --text-faint:  #6b6b6b;
  --text-link:   #a8a8a8;
  --accent:      #ff7a45;
  --accent-hi:   #ff8a5c;
  --accent-soft: rgba(255, 122, 69, 0.12);
  --accent-glow: rgba(255, 122, 69, 0.08);
  --accent-glow-strong: rgba(255, 122, 69, 0.18);
  --line:        rgba(255, 255, 255, 0.08);
  --line-hi:     rgba(255, 255, 255, 0.15);

  /* Shared content-column width. Used for the section box AND the conduit, so
     the hero's full-bleed conduit lines up exactly with the framed sections. */
  --col: 76rem;

  /* Content-column conduit (the continuous "lit channel" that runs down every
     section over the Tron grid — see the conduit rule below). */
  --conduit-fill: rgba(7, 8, 9, 0.9);           /* strongly mutes the grid + pulses inside the column so content stays readable */
  --conduit-rail: rgba(255, 209, 186, 0.42);    /* crisp warm-white edge rail */
  --conduit-glow: rgba(255, 122, 69, 0.18);     /* accent bloom hugging each rail */
  --conduit-node: rgba(255, 196, 160, 0.95);    /* junction node core at each section seam */

  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", system-ui, sans-serif;
  --font-text:    -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", system-ui, sans-serif;
  --font-mono:    ui-monospace, "SF Mono", "SFMono-Regular", Menlo, monospace;
}

.future-root ::selection { background: rgba(255, 122, 69, 0.30); color: #fff; }

.future-root {
  font: 400 17px/1.6 var(--font-text);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  overflow-x: clip;            /* guard against sub-pixel atmosphere bleed */
  position: relative;
  isolation: isolate;          /* own stacking context for the page backdrop */
}

/* === Page backdrop: the Tron circuit grid =================================
   The base layer behind EVERY section (fixed, full page) — dimmed rails with
   brighter node dots, drifting slowly. Each section then paints its own
   background ON TOP of this: the hero's opaque atmosphere hides it, while the
   content sections' translucent gradients let it show through. */
.future-root::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    radial-gradient(rgba(255,255,255,.6) 1px, transparent 1.7px),            /* circuit nodes */
    linear-gradient(to right,  rgba(255,255,255,.05) 1px, transparent 1px),  /* vertical rails */
    linear-gradient(to bottom, rgba(255,255,255,.05) 1px, transparent 1px);  /* horizontal rails */
  background-size: 120px 120px, 60px 60px, 60px 60px;   /* nodes at every other crossing */
  -webkit-mask-image: radial-gradient(135% 100% at 50% 42%, #000 30%, transparent 92%);
          mask-image: radial-gradient(135% 100% at 50% 42%, #000 30%, transparent 92%);
  opacity: .5;
  animation: grid-drift 38s linear infinite;
}
@keyframes grid-drift {
  from { background-position: 0 0,     0 0,     0 0;     }
  to   { background-position: 0 120px, 0 120px, 0 120px; }   /* whole periods → seamless */
}

/* Data pulses travelling the grid lines (drawn by future.js onto a canvas).
   Sits on the grid layer (z 0): conduit columns mute it, gutters show it. Same
   vignette mask as the grid so the dots fade out toward the viewport edges. */
.grid-pulses {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(135% 100% at 50% 42%, #000 30%, transparent 92%);
          mask-image: radial-gradient(135% 100% at 50% 42%, #000 30%, transparent 92%);
}

/* --- Full-screen sections + smooth anchor scroll (no snap) --- */
html {
  scroll-behavior: smooth;
  /* 0, not the header height: each section is one viewport tall and anchor links
     land at its top; the fixed header overlays it and the section's own top
     padding clears it. A non-zero value would push sections down and cut bottoms. */
  scroll-padding-top: 0;
}

.future-root section {
  /* top − bottom = header height (84px) so content centers in the area BELOW
     the fixed header, not in the raw viewport */
  padding: 6.75rem clamp(1.5rem, 5vw, 3rem) 1.5rem;
  max-width: var(--col);
  margin: 0 auto;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;   /* used by .hero; content sections center via auto margins below */
  position: relative;
  z-index: 1;                /* section backgrounds paint on top of the page grid */
}

/* Overflow-safe vertical centering for content sections.
   `justify-content: center` clips the TOP when content is taller than the
   viewport (it overflows symmetrically and the top scrolls out of reach —
   this bit us in Safari, whose 100svh resolves taller than Chromium's).
   Auto margins center when content fits, but collapse to 0 on overflow, so
   the top stays pinned just below the fixed header and the section scrolls. */
.future-root section:not(.hero) > :first-child { margin-top: auto; }
.future-root section:not(.hero) > :last-child  { margin-bottom: auto; }

/* ============================================================================
   The content-column conduit
   ----------------------------------------------------------------------------
   A single continuous "lit channel" running down EVERY section — hero included
   (Hero → Why Pro → How it works → Pricing). It gives the content a home — a
   surface that reads as one unbroken column — while the fixed Tron grid keeps
   glowing in the side gutters, so the page feels like one circuit board with a
   lit trace down its spine.

   Why per-section ::before (not one page-spanning element): each ::before is
   pinned to its section's full height, so it tracks real height exactly — even
   when content overflows 100svh (which it can, esp. in Safari). Because every
   section is full-height and stacked flush, and the rails sit at the same x on
   each, the pieces line up into one seamless column.

   Geometry differs by section: the framed content sections ARE the column (their
   box is capped at --col), so their conduit is just `inset: 0`. The hero is
   full-bleed (max-width: none) so its content can breathe, so its conduit is an
   explicit --col-wide band centered to match the others exactly.

   Layering: section is `position: relative; z-index: 1` (own stacking context,
   above the grid at z 0). The conduit sits at z-index -1 — behind the section's
   content but still above the page grid, so it mutes the grid INSIDE the column
   while the gutters stay full-strength. ::after (the seam nodes) shares z -1 and,
   as the later pseudo, paints just above the ::before surface. */
.hero::before,
.story::before,
.howitworks::before,
.pricing::before {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  background:
    /* faint cylindrical sheen catching both inner edges */
    linear-gradient(90deg, rgba(255,255,255,.025), transparent 11%, transparent 89%, rgba(255,255,255,.025)),
    /* left rail: crisp line + warm bloom */
    linear-gradient(var(--conduit-rail), var(--conduit-rail))           left  / 2px  100% no-repeat,
    linear-gradient(90deg,  var(--conduit-glow), transparent)           left  / 24px 100% no-repeat,
    /* right rail: mirror */
    linear-gradient(var(--conduit-rail), var(--conduit-rail))           right / 2px  100% no-repeat,
    linear-gradient(270deg, var(--conduit-glow), transparent)           right / 24px 100% no-repeat,
    /* interior fill: mutes the grid so the column reads as a calm channel */
    linear-gradient(var(--conduit-fill), var(--conduit-fill));
}
/* Framed sections: their own box is the column. */
.story::before,
.howitworks::before,
.pricing::before { inset: 0; }
/* Hero: full-bleed section, so center an explicit --col-wide conduit band. */
.hero::before {
  inset-block: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(var(--col), 100%);
}

/* Seam nodes: a warm solder-point on each rail at the top of every framed
   section, so the conduit visibly "clicks" together at each boundary. The hero
   gets no node — its top hides under the fixed header, and the hero↔Why-Pro
   junction is already marked by .story's top node. */
.story::after,
.howitworks::after,
.pricing::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(circle 5px at 11px 22px,              var(--conduit-node), rgba(255,122,69,.22) 42%, transparent 74%) no-repeat,
    radial-gradient(circle 5px at calc(100% - 11px) 22px, var(--conduit-node), rgba(255,122,69,.22) 42%, transparent 74%) no-repeat;
  background-size: 100% 60px;    /* confine the nodes to a band at the section's top edge */
}

/* --- Site header ----------------------------------------------------- */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background: rgba(10, 10, 10, 0.72);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid var(--line);
}
.header-inner {
  max-width: 76rem;
  margin: 0 auto;
  padding: 0.85rem clamp(1.25rem, 5vw, 3rem);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.header-actions {
  display: flex;
  align-items: center;
  gap: clamp(0.9rem, 2.5vw, 1.5rem);
}
.header-link {
  position: relative;
  font-family: var(--font-text);
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--text-muted);
  text-decoration: none;
  transition: color 120ms ease;
}
/* Hover: a warm accent underline that grows out from the centre, glowing in the
   same orange as the conduit rails. */
.header-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -5px;
  height: 2px;
  border-radius: 2px;
  background: var(--accent);
  box-shadow: 0 0 8px rgba(255, 122, 69, 0.75), 0 0 3px rgba(255, 122, 69, 0.9);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 240ms cubic-bezier(0.4, 0, 0.2, 1);
}
.header-link:hover,
.header-link:focus-visible { color: var(--text); }
.header-link:hover::after,
.header-link:focus-visible::after { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) {
  .header-link::after { transition: none; }   /* still appears, just no grow */
}
/* section anchor links would crowd the header on small screens */
@media (max-width: 720px) { .header-link--nav { display: none; } }

.btn-sm {
  padding: 9px 18px;
  font-size: 0.92rem;
  border-radius: 10px;
}

/* Header CTA wakes up once the hero scrolls away (toggled by future.js). */
.site-header.is-scrolled {
  background: rgba(10, 10, 10, 0.85);
}
.site-header.is-scrolled .btn-ghost {
  color: var(--accent);
  background: var(--accent-soft);
  border-color: rgba(255, 122, 69, 0.30);
  box-shadow: 0 0 16px rgba(255, 122, 69, 0.12);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
/* same travelling edge-shine as the hero CTA + PRO badge */
.site-header.is-scrolled .btn-ghost::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  padding: 1.4px;
  background: conic-gradient(from var(--pro-shine),
      rgba(255, 205, 165, 0) 0deg,
      rgba(255, 205, 165, 0) 215deg,
      rgba(255, 175, 120, 0.9) 265deg,
      rgba(255, 250, 240, 1) 300deg,
      rgba(255, 175, 120, 0.9) 335deg,
      rgba(255, 205, 165, 0) 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  animation: pro-shine 3.2s linear infinite;
}
.site-header.is-scrolled .btn-ghost:hover {
  background: rgba(255, 122, 69, 0.18);
  border-color: rgba(255, 122, 69, 0.55);
  color: var(--accent-hi);
  transform: none;
}

/* --- Section 1: Hero -------------------------------------------------- */
.future-root .hero {
  position: relative;
  max-width: none;            /* full-bleed: defeat the generic section box */
  margin: 0;
  padding: 0;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  isolation: isolate;
  /* No opaque fill: the hero now matches the rest — the fixed Tron grid shows
     through in the gutters, and the conduit (.hero::before) mutes it inside the
     column. The warm glow below is the hero's one flourish. */
}

/* Atmosphere — the hero's signature warm glow, confined to the conduit column
   (a --col-wide band) so the gutters stay clear for the page grid. */
.hero-atmosphere {
  position: absolute;
  inset-block: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(var(--col), 100%);
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
}

/* drifting warm glow */
.hero-glow {
  position: absolute;
  left: 50%; top: 33%;
  width: 84vw; max-width: 1040px; aspect-ratio: 1.5 / 1;
  background:
    radial-gradient(ellipse 46% 44% at 50% 50%, rgba(255,142,86,.20), transparent 60%),
    radial-gradient(ellipse 78% 70% at 50% 48%, rgba(255,108,58,.10), transparent 72%);
  transform: translate(-50%, -50%);
  will-change: transform;
  animation: glow-drift 18s ease-in-out infinite alternate;
}
@keyframes glow-drift {
  from { transform: translate(-53%, -50%) scale(1);    opacity: .8; }
  to   { transform: translate(-47%, -45%) scale(1.09); opacity: 1; }
}


/* Hero content column ------------------------------------------------- */
.hero-content {
  position: relative; z-index: 1;
  width: 100%;
  max-width: 62rem;
  min-height: 100svh;
  padding: 6.75rem clamp(1.5rem, 5vw, 3rem) 1.5rem;  /* top−bottom = header height → centered below header */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;  /* centers when it fits, never clips the top under the header */
}

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.3vw, 1.75rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text);                /* the product name reads in confident white */
  margin: 0 0 2rem;
}
/* "Pro" as a premium tier badge */
@property --pro-shine {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
.eb-pro {
  position: relative;
  isolation: isolate;
  font-size: 0.42em;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--accent-soft);
  border: 1px solid rgba(255, 122, 69, 0.28);
  border-radius: 5px;
  padding: 0.3em 0.5em 0.26em;
  line-height: 1;
  box-shadow: 0 0 16px rgba(255, 122, 69, 0.12);
}
/* a specular highlight that travels around the badge edges */
.eb-pro::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.4px;                       /* = ring thickness */
  background: conic-gradient(from var(--pro-shine),
      rgba(255, 205, 165, 0) 0deg,
      rgba(255, 205, 165, 0) 215deg,
      rgba(255, 175, 120, 0.9) 265deg,
      rgba(255, 250, 240, 1) 300deg,
      rgba(255, 175, 120, 0.9) 335deg,
      rgba(255, 205, 165, 0) 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  animation: pro-shine 2.8s linear infinite;
}
@keyframes pro-shine { to { --pro-shine: 360deg; } }

/* Inline brand lockups for prose. */
.brand     { color: var(--text); font-weight: 500; }
.brand-pro { color: var(--accent); font-weight: 600; }
/* compact "ds." mark inline (white letters, orange dot) */
.brand-ds        { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.03em; color: var(--text); }
.brand-ds__dot   { color: var(--accent); }

.hero-headline {
  font: 700 clamp(2.3rem, 6.6vw, 4.7rem)/1.04 var(--font-display);
  letter-spacing: -0.035em;
  margin: 0 0 1.4rem;
  max-width: 16em;
  text-wrap: balance;
  background: linear-gradient(178deg, #ffffff 0%, #f1eff1 38%, #c7c5ca 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}
/* a single spark of brand colour in the headline */
.hd-dash {
  color: var(--accent);
  -webkit-text-fill-color: var(--accent);
}

.hero-sub {
  margin: 0 auto 2.4rem;
  max-width: 40rem;
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  line-height: 1.6;
  color: var(--text-muted);
  text-wrap: balance;
}

.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.8rem 1.6rem;
  justify-content: center;
  margin-bottom: 1.5rem;
}

/* Secondary CTA as a quiet text link (no second pill competing with the button) */
.cta-text {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-weight: 600;
  font-size: 0.98rem;
  color: var(--text);
  text-decoration: none;
  transition: color 130ms ease;
}
.cta-text .arr { color: var(--accent); transition: transform 160ms ease; }
.cta-text:hover { color: var(--accent); }
.cta-text:hover .arr { transform: translateX(3px); }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 14px 26px;
  font-weight: 600;
  font-size: 1rem;
  border-radius: 12px;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 120ms ease, background 140ms ease, border-color 140ms ease,
              color 140ms ease, box-shadow 200ms ease;
}
.btn-primary {
  color: var(--accent);
  background: var(--accent-soft);
  border-color: rgba(255, 122, 69, 0.30);
  box-shadow: 0 0 18px rgba(255, 122, 69, 0.12);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
/* travelling edge-shine — same motif as the PRO badge */
.btn-primary::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  padding: 1.6px;                       /* = ring thickness */
  background: conic-gradient(from var(--pro-shine),
      rgba(255, 240, 225, 0) 0deg,
      rgba(255, 240, 225, 0) 215deg,
      rgba(255, 214, 176, 0.85) 265deg,
      rgba(255, 255, 250, 1) 300deg,
      rgba(255, 214, 176, 0.85) 335deg,
      rgba(255, 240, 225, 0) 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  z-index: 1;
  animation: pro-shine 4s linear infinite;
}
.btn-primary:hover {
  background: rgba(255, 122, 69, 0.18);
  border-color: rgba(255, 122, 69, 0.55);
  color: var(--accent-hi);
}
.btn-primary:active { background: var(--accent-soft); }

.btn-ghost {
  color: var(--text);
  background: rgba(255, 255, 255, 0.02);
  border-color: var(--line-hi);
}
.btn-ghost:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.32);
  background: rgba(255, 255, 255, 0.05);
}
.btn-ghost:active { transform: translateY(0); }

.btn:focus-visible,
.header-link:focus-visible,
.logo:focus-visible,
.hero-tertiary a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 8px;
}

.hero-tertiary {
  margin: 0;
  font-size: 0.95rem;
  color: var(--text-faint);
}
.hero-tertiary a {
  color: var(--text-link);
  text-decoration: none;
  border-bottom: 1px solid rgba(168, 168, 168, 0.3);
  padding-bottom: 1px;
  transition: color 120ms ease, border-color 120ms ease;
}
.hero-tertiary a:hover {
  color: var(--accent);
  border-color: var(--accent);
}

/* Orchestrated page-load reveal -------------------------------------- */
.hero-content > * { animation: hero-rise 0.7s cubic-bezier(.2,.7,.2,1) both; }
.hero-eyebrow  { animation-delay: 0.04s; }
.hero-headline { animation-delay: 0.13s; }
.hero-sub      { animation-delay: 0.20s; }
.hero-ctas     { animation-delay: 0.28s; }
.hero-tertiary { animation-delay: 0.38s; }
@keyframes hero-rise {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}

/* --- Brand: "ds." wordmark (reusable in-page logo) ------------------- */
.logo {
  font: 600 1.5rem/1 var(--font-display);
  letter-spacing: -0.045em;
  color: var(--text);
  text-decoration: none;
  display: inline-block;
  white-space: nowrap;
}
.logo .logo-dot { color: var(--accent); }
.logo:hover .logo-dot { color: var(--accent-hi); }

/* Dark-letter variant for use on light surfaces (dot stays orange) */
.logo--dark { color: #0a0a0a; }

/* --- Reusable: scroll reveal ----------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s cubic-bezier(.2,.7,.2,1), transform 0.7s cubic-bezier(.2,.7,.2,1);
}
.reveal.is-visible { opacity: 1; transform: none; }

/* --- Reusable: section kicker + title -------------------------------- */
.section-kicker {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 1rem;
}
.section-title {
  font: 700 clamp(2rem, 4.2vw, 3.1rem)/1.08 var(--font-display);
  letter-spacing: -0.03em;
  margin: 0;
  background: linear-gradient(176deg, #ffffff 10%, #cfcfd1 96%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

/* --- Section 2: The story (lintc-swiper carousel) -------------------- */
.story-head { text-align: center; max-width: 46rem; margin: 0 auto clamp(2.25rem, 4.5vw, 3.5rem); }
.story-head .section-title { margin: 0 auto; max-width: 20ch; }

.story-stage { width: 100%; max-width: 760px; margin: 0 auto; color: var(--text); }
/* force definite widths so the carousel's flex track resolves & clips
   instead of sizing to its 5-slides-wide content */
.story-stage .lintc-swiper,
.story-stage .lintc-swiper__viewport { width: 100%; max-width: 100%; min-width: 0; }
/* the viewport's width must not depend on its (5-slides-wide) content */
.story-stage .lintc-swiper__viewport { contain: inline-size; }
.story-stage .lintc-swiper__track { min-width: 0; }

/* story slide cards */
.pslide {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 17rem;
  padding: clamp(2rem, 4vw, 3.25rem);
  border: 1px solid var(--line);
  border-radius: 18px;
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(255,122,69,.06), transparent 55%),
    var(--surface);
  text-align: left;
}
.pslide-icon {
  width: 30px; height: 30px;
  color: var(--accent);
  margin-bottom: 1.25rem;
}
.pslide-label {
  font: 700 0.74rem/1 var(--font-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.85rem;
}
/* the payoff slide reads as the resolution */
.pslide--accent {
  border-color: rgba(255, 122, 69, 0.4);
  background:
    radial-gradient(130% 110% at 0% 0%, rgba(255,122,69,.14), transparent 60%),
    var(--surface);
}
.pslide-title {
  font: 700 clamp(1.5rem, 3vw, 2.1rem)/1.1 var(--font-display);
  letter-spacing: -0.025em;
  color: var(--text);
  margin: 0 0 0.85rem;
}
.pslide-body {
  font-size: clamp(1.02rem, 1.5vw, 1.18rem);
  line-height: 1.6;
  color: var(--text-muted);
  margin: 0;
  max-width: 40ch;
}

/* theme the plugin's carousel chrome to the dark/orange palette */
.story-stage .lintc-swiper__controls { margin-top: 1.5rem; }
.story-stage .lintc-swiper__btn {
  width: 2.4rem; height: 2.4rem;
  border: 1px solid var(--line-hi);
  color: var(--text-muted);
}
.story-stage .lintc-swiper__btn:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
}
.story-stage .lintc-swiper__btn[disabled]:hover {
  background: transparent;
  border-color: var(--line-hi);
  color: var(--text-muted);
}
.story-stage .lintc-swiper__dot { color: var(--text-faint); }
.story-stage .lintc-swiper__dot.is-active { color: var(--accent); opacity: 1; }

/* --- Section 3: How it works (the hand-off) -------------------------- */
.hiw-head { text-align: center; max-width: 48rem; margin: 0 auto clamp(1.75rem, 5vh, 4rem); }
.hiw-head .section-kicker { margin-bottom: 1.85rem; }
.hiw-head .section-title { margin: 0 auto 1.85rem; max-width: 18ch; }
.hiw-sub {
  font-size: clamp(1.05rem, 1.5vw, 1.2rem);
  line-height: 1.6;
  color: var(--text-muted);
  margin: 0 auto;
  max-width: 44rem;
}

.hiw-stage { width: 100%; max-width: 880px; margin: 0 auto; }

.hiw-narrate { position: relative; min-height: 3.4em; margin: clamp(1.4rem, 3.5vh, 2.75rem) auto 0; max-width: 42rem; }
.hiw-narrate .b {
  position: absolute; left: 0; right: 0; text-align: center;
  font: 500 clamp(0.92rem, 1.5vw, 1.08rem)/1.45 var(--font-text);
  color: var(--text-muted);
  opacity: 0; transform: translateY(6px);
  transition: opacity .6s ease, transform .6s ease;
  transition-delay: 0s;          /* hide immediately, so it's gone before the next cue */
}
/* b1 during the ask, b2 while it can't-reach/routes, b3 once it's applied.
   The .9s delay lets the balloon (or the badge) land FIRST — the caption then
   follows, so the two cues read in sequence instead of popping together. */
.hiw-stage[data-phase="ask"]     .b1,
.hiw-stage[data-phase="blocked"] .b2,
.hiw-stage[data-phase="route"]   .b2,
.hiw-stage[data-phase="applied"] .b3 { opacity: 1; transform: none; transition-delay: .9s; }

.hiw-diagram { position: relative; }
/* overflow:visible — the highlight ring (y=52) and the target display's glow
   extend above the viewBox top (y=58); SVG's default overflow:hidden would
   shave them. The ~24px head margin above absorbs the bleed. */
.hiw-svg { display: block; width: 100%; height: auto; overflow: visible; }

/* static diagram */
.hiw-svg .disp rect    { fill: rgba(255,255,255,.025); stroke: rgba(255,255,255,.14); stroke-width: 1.6; }
.hiw-svg .disp .stand  { fill: rgba(255,255,255,.08); stroke: none; }
.hiw-svg .mac-body     { fill: rgba(255,255,255,.05); stroke: rgba(255,255,255,.22); stroke-width: 1.6; }
.hiw-svg .mac-deck     { fill: rgba(255,255,255,.12); }
.hiw-svg .mac-led      { fill: var(--accent); opacity: .55; }
.hiw-svg .xmark line   { stroke: #d97a66; stroke-width: 2.4; stroke-linecap: round; }

/* --- Phase-driven choreography -------------------------------------------
   future.js sets data-phase (idle|ask|blocked|route|applied) and data-action
   (brightness|input|contrast) on .hiw-stage as it cycles through requests.
   Each step is a transition keyed off those attributes — the only time-based
   animation left is the one-shot routing pulse. */
.hiw-svg .rl     { stroke: rgba(255,255,255,.10); stroke-width: 1.4; transition: opacity .8s ease; }
.hiw-svg .mesh   { stroke: rgba(255,255,255,.09); stroke-width: 1.6; stroke-dasharray: 2 8; transition: stroke .9s ease; }
.hiw-svg .blocked{ stroke: rgba(255,255,255,.30); stroke-width: 1.4; stroke-dasharray: 5 6; opacity: 0; transition: opacity .7s ease; }
.hiw-svg .xmark  { opacity: 0; transition: opacity .55s ease; }
.hiw-svg .mac-a-body, .hiw-svg .mac-b-body { transition: stroke .8s ease; }
.hiw-svg .disp-ring { stroke: var(--accent); stroke-width: 1.6; opacity: 0; transition: opacity .8s ease; }
.hiw-svg .disp-target rect { transition: fill .8s ease, stroke .8s ease, filter .8s ease; }
.hiw-svg .pulse {
  fill: var(--accent); opacity: 0;
  offset-path: path("M 320 354 Q 460 402 600 346 L 740 178");
  filter: drop-shadow(0 0 7px var(--accent));
}

/* you're sitting at This Mac for as long as the request is live */
.hiw-stage[data-phase="ask"]     .mac-a-body,
.hiw-stage[data-phase="blocked"] .mac-a-body,
.hiw-stage[data-phase="route"]   .mac-a-body,
.hiw-stage[data-phase="applied"] .mac-a-body { stroke: var(--accent); }

/* ask — the displays this Mac can reach glow a little */
.hiw-stage[data-phase="ask"] .rl { opacity: .5; }

/* blocked — the request can't reach the far display */
.hiw-stage[data-phase="blocked"] .blocked { opacity: .9; }
.hiw-stage[data-phase="blocked"] .xmark   { opacity: 1; }

/* route — Pro hands it to the Mac that can; the pulse travels there and on */
.hiw-stage[data-phase="route"]   .mesh,
.hiw-stage[data-phase="applied"] .mesh { stroke: rgba(255,122,69,.6); }
.hiw-stage[data-phase="route"]   .mac-b-body,
.hiw-stage[data-phase="applied"] .mac-b-body { stroke: var(--accent); }
.hiw-stage[data-phase="route"]   .pulse { animation: hiw-pulse 2.4s cubic-bezier(.4,0,.2,1) forwards; }

/* applied — the change lands on the target display */
.hiw-stage[data-phase="applied"] .disp-ring { opacity: .85; }
.hiw-stage[data-phase="applied"] .disp-target rect {
  fill: var(--accent-soft); stroke: var(--accent);
  filter: drop-shadow(0 0 14px rgba(255,122,69,.5));
}

@keyframes hiw-pulse {
  0%   { offset-distance: 0%;   opacity: 0; }
  12%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { offset-distance: 100%; opacity: 0; }
}

/* --- The on-screen "you" + speech balloon -------------------------------- */
.hiw-user {
  position: absolute; left: 12%; top: 39%;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: .5rem;
  width: max-content;
}
.hiw-balloon {
  position: relative;
  padding: .5rem .8rem;
  border-radius: 13px;
  background: rgba(255,255,255,.05);
  border: 1px solid var(--line-hi);
  color: var(--text);
  font: 500 clamp(.85rem, 1.5vw, .98rem)/1.25 var(--font-text);
  white-space: nowrap;
  opacity: 0; transform: translateY(7px) scale(.96);
  transform-origin: bottom center;
  transition: opacity .65s ease, transform .65s ease;
}
.hiw-balloon::after {            /* tail pointing down to the avatar */
  content: ""; position: absolute; left: 50%; bottom: -6px;
  width: 11px; height: 11px; transform: translateX(-50%) rotate(45deg);
  background: rgba(255,255,255,.05);
  border-right: 1px solid var(--line-hi);
  border-bottom: 1px solid var(--line-hi);
}
.hiw-avatar {
  width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center;
  color: var(--text-muted);
  background: rgba(255,255,255,.04);
  border: 1.5px solid var(--line-hi);
  transition: color .6s ease, border-color .6s ease, box-shadow .6s ease;
}
.hiw-avatar svg { width: 21px; height: 21px; }
.hiw-you { font: 500 clamp(.7rem, 1.5vw, .85rem) var(--font-mono); color: var(--text-faint); }

/* balloon + avatar light up while the request is being voiced/routed */
.hiw-stage[data-phase="ask"]     .hiw-balloon,
.hiw-stage[data-phase="blocked"] .hiw-balloon,
.hiw-stage[data-phase="route"]   .hiw-balloon { opacity: 1; transform: translateY(0) scale(1); }
.hiw-stage[data-phase="ask"]     .hiw-avatar,
.hiw-stage[data-phase="blocked"] .hiw-avatar,
.hiw-stage[data-phase="route"]   .hiw-avatar,
.hiw-stage[data-phase="applied"] .hiw-avatar {
  color: var(--accent); border-color: var(--accent);
  box-shadow: 0 0 16px rgba(255,122,69,.28);
}

/* --- Result badge, shown on the face of the target display --------------- */
.hiw-badge {
  position: absolute; left: 80.4%; top: 16%;   /* centre of the target display */
  display: inline-flex; align-items: center; gap: .36rem;
  padding: .3rem .55rem;
  border-radius: 999px;
  background: rgba(8, 8, 8, .8);                /* dark chip — reads on the lit screen */
  border: 1px solid var(--accent);
  color: var(--accent);
  font: 600 clamp(.66rem, 1.3vw, .8rem) var(--font-mono);
  white-space: nowrap;
  -webkit-backdrop-filter: blur(2px);
          backdrop-filter: blur(2px);
  opacity: 0; transform: translate(-50%, -50%) scale(.86);
  transition: opacity .6s ease, transform .6s ease;
}
.hiw-badge__icon { width: 14px; height: 14px; display: none; }
.hiw-stage[data-action="brightness"] .hiw-badge__icon--brightness,
.hiw-stage[data-action="input"]      .hiw-badge__icon--input,
.hiw-stage[data-action="contrast"]   .hiw-badge__icon--contrast { display: block; }
.hiw-stage[data-phase="applied"] .hiw-badge { opacity: 1; transform: translate(-50%, -50%) scale(1); }

/* Mac labels overlaid in HTML (responsive font, unlike SVG <text>) */
.hiw-mac-label {
  position: absolute;
  transform: translateX(-50%);
  white-space: nowrap;
  font: 500 clamp(0.7rem, 1.5vw, 0.85rem) var(--font-mono);
  letter-spacing: 0.01em;
  color: var(--text-faint);
}
.hiw-mac-label--a { left: 34.8%; top: 95%; }
.hiw-mac-label--b { left: 65.2%; top: 95%; }

/* --- Section 4: Pricing -------------------------------------------------- */
.pricing-head { text-align: center; max-width: 46rem; margin: 0 auto 1.6rem; }
.pricing-head .section-title { margin: 0 auto .8rem; }  /* font inherited from .section-title; no width cap so it stays on one line */
.pricing-sub {
  font-size: clamp(1.02rem, 1.5vw, 1.18rem);
  line-height: 1.6; color: var(--text-muted);
  margin: 0 auto; max-width: 34rem;
}

.pricing-card {
  position: relative;
  width: 100%; max-width: 30rem;
  margin: 0 auto;
  padding: clamp(1.5rem, 3vw, 2.1rem);
  background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.015));
  border: 1px solid var(--line-hi);
  border-radius: 20px;
  box-shadow: 0 30px 80px -42px rgba(0,0,0,.85),
              0 0 50px -26px var(--accent-glow-strong),
              inset 0 1px 0 rgba(255,255,255,.05);
  text-align: center;
  overflow: hidden;
}
/* a single accent hairline across the top — the premium cue, kept calm */
.pricing-card::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: .55;
}
.pricing-card__label { font: 600 1.05rem var(--font-display); letter-spacing: -.01em; margin: 0 0 .8rem; }
.pricing-price { display: flex; align-items: baseline; justify-content: center; gap: .55rem; margin: 0; }
.pricing-amount { font: 700 clamp(2.6rem, 6vw, 3.5rem)/1 var(--font-display); letter-spacing: -.04em; color: var(--text); }
.pricing-term { font: 500 .9rem var(--font-mono); color: var(--text-faint); text-transform: uppercase; letter-spacing: .07em; }
.pricing-note { margin: .5rem 0 0; font-size: .98rem; color: var(--text-muted); }

.pricing-features {
  list-style: none; margin: 1.3rem 0; padding: 0;
  text-align: left; display: grid; gap: .7rem;
}
.pricing-features li {
  position: relative; padding-left: 1.9rem;
  font-size: 1rem; line-height: 1.45; color: var(--text-muted);
}
.pricing-features li::before {
  content: ""; position: absolute; left: 0; top: .12em;
  width: 1.25rem; height: 1.25rem; border-radius: 50%;
  background-color: var(--accent-soft);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff7a45' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center; background-size: .82rem;
}
.pricing-cta { width: 100%; justify-content: center; margin-top: .25rem; }
.pricing-fine { margin: 1rem 0 0; font: 500 .85rem var(--font-mono); color: var(--text-faint); letter-spacing: .02em; }

.pricing-foot { text-align: center; margin: 1.4rem auto 0; max-width: 32rem; font-size: .95rem; color: var(--text-faint); }
.pricing-foot a {
  color: var(--text-link); text-decoration: none;
  border-bottom: 1px solid rgba(168,168,168,.3); padding-bottom: 1px;
  transition: color .12s ease, border-color .12s ease;
}
.pricing-foot a:hover { color: var(--accent); border-color: var(--accent); }

/* --- Footer: the legal ground at the foot of the page ---------------- */
/* Full-bleed, a touch darker than the page so it reads as the base; sits above
   the grid + pulses (opaque) so the conduit visibly terminates at the pricing
   section and the legal text stays clean. */
.site-footer {
  position: relative;
  z-index: 1;
  background: var(--bg-deep);
  border-top: 1px solid var(--line);
  padding: 2.6rem clamp(1.5rem, 5vw, 3rem) 2.9rem;
}
.footer-inner { max-width: var(--col); margin: 0 auto; }
.footer-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem 1.75rem;
}
.footer-logo { font-size: 1.2rem; }   /* (reuses .logo for the orange dot, smaller for the footer) */
.footer-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem 1.6rem;
}
.footer-legal a {
  font-family: var(--font-text);
  font-size: 0.92rem;
  color: var(--text-faint);
  text-decoration: none;
  transition: color 120ms ease;
}
.footer-legal a:hover,
.footer-legal a:focus-visible { color: var(--text); }
.footer-copy {
  margin: 1.4rem 0 0;
  font: 500 0.84rem var(--font-mono);
  letter-spacing: 0.02em;
  color: var(--text-faint);
}

/* --- Legal pages (Privacy, Terms) ----------------------------------- */
/* Plain dark page (no .future-root → no grid/conduit/pulses, no JS needed):
   just a readable prose column between the shared header and footer. */
.legal-root {
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
}
.legal-doc {
  max-width: 46rem;
  margin: 0 auto;
  padding: 8rem clamp(1.5rem, 5vw, 3rem) 5rem;   /* top clears the fixed header */
}
.legal-title {
  font: 700 clamp(2rem, 4.2vw, 3rem)/1.1 var(--font-display);
  letter-spacing: -0.025em;
  margin: 0.4rem 0 2.2rem;
  background: linear-gradient(176deg, #ffffff 10%, #cfcfd1 96%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}
.legal-body { color: var(--text-muted); line-height: 1.7; }
.legal-body h2 {
  color: var(--text);
  font: 600 1.25rem var(--font-display);
  letter-spacing: -0.01em;
  margin: 2.4rem 0 0.6rem;
}
.legal-body p { margin: 0 0 1rem; }
.legal-body ul { margin: 0 0 1rem 1.2rem; }
.legal-body li { margin: 0 0 0.35rem; }
.legal-body strong { color: var(--text); }
.legal-body em { color: var(--text-faint); }
.legal-body a { color: var(--accent); text-decoration: none; }
.legal-body a:hover { text-decoration: underline; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  * { transition: none !important; animation: none !important; }
  /* future.js pins data-phase="applied" so the resolved frame (target lit,
     badge + b3 caption shown) stays put with no motion. */
}