/* ============================================================
   Ambient layer - motion, reveals, and the codex zoom sequence
   Added 2026-07-28. Kept separate from styles.css (a minified
   build export) so these additions stay readable and revertible.
   ============================================================ */

/* ---------- 0. Display face ---------- */

/* Marcellus on headings only. styles.css uses --serif for BOTH headings and
   body prose, so overriding that variable would put a display face under
   every paragraph on the page. A separate token keeps prose on the old
   book serif where it still reads well at length. */
:root{
  --display:"Marcellus","Iowan Old Style","Baskerville","Times New Roman",serif;
}

h1,h2,h3,blockquote,
.principle-card h3,
.pathway-row h3{
  font-family:var(--display);
}

/* Marcellus ships no italic, so <em> inside a heading would be a synthesised
   oblique. Keep those upright and let the accent colour carry the emphasis. */
h1 em,h2 em,blockquote em{
  font-style:normal;
}

/* Hero headline stepped down from styles.css's clamp(4.3rem,7.4vw,7.8rem).
   Marcellus has a larger apparent size than the old book serif at the same
   point size, so the original clamp reads bigger than it used to. */
h1{
  font-size:clamp(3.4rem,5.9vw,6.1rem);
}
@media (width<=900px){
  h1{font-size:clamp(2.9rem,13.5vw,4.6rem)}
}

/* ---------- 1. Scroll reveals ---------- */

[data-reveal]{
  opacity:0;
  transform:translateY(30px);
  filter:blur(7px);
  transition:opacity 1s cubic-bezier(.2,.7,.2,1),
             transform 1s cubic-bezier(.2,.7,.2,1),
             filter 1s cubic-bezier(.2,.7,.2,1);
  transition-delay:var(--reveal-delay,0ms);
  will-change:opacity,transform;
}
[data-reveal].is-in{opacity:1;transform:none;filter:none}

/* Sideways variants for the two-column sections */
[data-reveal="left"]{transform:translate3d(-34px,14px,0)}
[data-reveal="right"]{transform:translate3d(34px,14px,0)}
[data-reveal="scale"]{transform:scale(.965);filter:blur(10px)}

/* ---------- 2. Per-section ambient particle fields ---------- */

/* Keep the drifting field behind content WITHOUT touching any child's
   positioning. An earlier version raised every direct child to
   position:relative, which yanked decorative absolutes (.reflection-orbit,
   .invitation-light) into normal flow and added ~1000px to those sections.
   Instead: give the section a stacking context and drop the canvas to z-index
   -1, which paints above the section background but below all content. */
.threshold,
.system-section,
.reflection-section,
.invitation,
.codex-section,
.architecture-section{isolation:isolate}

.ambient-field{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
  z-index:-1;
  opacity:.85;
}

/* ---------- 3. Parallax ---------- */

.book-photo img,
.author-photo img{will-change:transform}

/* ---------- 3b. Author frame: palette at the edges, not on his face ---------- */

/* Paints under the existing :after copy-gradient. Centre stays clear so the
   grade reads natural; the palette lives in the corners and falls to night. */
.author-photo:before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:radial-gradient(118% 92% at 66% 40%,
    transparent 0%,
    transparent 36%,
    rgba(0,201,154,.16) 56%,
    rgba(40,123,255,.20) 70%,
    rgba(160,92,255,.38) 85%,
    rgba(0,9,25,.66) 100%);
}
.author-photo img{object-position:64% 28%}

@media (width<=900px){
  .author-photo img{object-position:60% 20%}
  .author-photo:before{
    background:radial-gradient(130% 62% at 62% 26%,
      transparent 0%,
      transparent 34%,
      rgba(0,201,154,.14) 58%,
      rgba(160,92,255,.32) 82%,
      rgba(0,9,25,.60) 100%);
  }
}

/* ---------- 4. The codex zoom sequence ---------- */

.codex-zoom{
  position:relative;
  background:var(--night);
}
.codex-zoom-track{
  height:230svh;
  position:relative;
}
.codex-zoom-stage{
  position:sticky;
  top:0;
  height:100svh;
  overflow:hidden;
  background:#00040e;
  isolation:isolate;
}
.codex-zoom-canvas,
.codex-zoom-still{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
}
.codex-zoom-canvas{opacity:0;transition:opacity .6s ease}
.codex-zoom-canvas.is-ready{opacity:1}
.codex-zoom-still{object-fit:cover;object-position:center}
.codex-zoom-stage.is-live .codex-zoom-still{opacity:0}

/* the light that opens out of the centre point */
.codex-zoom-bloom{
  position:absolute;
  top:50%;
  left:50%;
  width:46vmax;
  height:46vmax;
  transform:translate(-50%,-50%) scale(.2);
  background:radial-gradient(circle,
    rgba(255,255,255,.95) 0%,
    rgba(0,207,232,.55) 22%,
    rgba(40,123,255,.28) 42%,
    rgba(133,51,255,.10) 60%,
    transparent 74%);
  opacity:0;
  pointer-events:none;
  mix-blend-mode:screen;
}

/* The washout that carries the cut. Fixed, not inside the stage, so it
   survives the sticky release and dissolves over "How it works" instead of
   leaving a dead dark gap. (An earlier dark veil sat here and painted over
   the burst exactly as it peaked - that was the blank stretch.) */
.codex-zoom-flash{
  position:fixed;
  inset:0;
  z-index:40;
  opacity:0;
  pointer-events:none;
  background:radial-gradient(circle at 50% 46%,
    #ffffff 0%,
    #ffffff 26%,
    #f7f3e8 46%,
    #00cfe8 70%,
    #287bff 100%);
}

/* The seam layer. Lives INSIDE the sticky stage and fades up at the very end
   of the scrub, so the stage stops showing the white blowout and instead ends
   on the exact colour of the top of "How it works".
   This is what actually kills the hard line: no fixed overlay can, because it
   has to fade out while the stage is still sliding off screen - and whatever
   is left of the stage was bright white against a dark section.
   Its bottom edge is deliberately the same value as .threshold's top edge, so
   the two gradients read as one continuous falloff across the boundary. */
.codex-zoom-seam{
  position:absolute;
  inset:0;
  z-index:5;
  opacity:0;
  pointer-events:none;
  background:
    linear-gradient(to bottom,
      rgba(247,243,232,.50) 0%,
      rgba(216,182,106,.32) 50%,
      rgba(247,243,232,.20) 100%),
    var(--deep);
}

/* The settle layer. Sits under the white burst and is painted to match the
   TOP of the threshold section exactly (light spill + centre glow + --deep).
   The burst dissolves into this, then this dissolves into the real section -
   and because the colour already matches, that second fade is invisible.
   That is what removes the hard line at the section boundary. */
.codex-zoom-settle{
  position:fixed;
  inset:0;
  z-index:39;
  opacity:0;
  pointer-events:none;
  background:
    linear-gradient(to bottom,
      rgba(247,243,232,.22) 0%,
      rgba(0,207,232,.07) 34%,
      transparent 62%),
    radial-gradient(circle at 50% 46%, rgba(133,51,255,.32), transparent 56%),
    var(--deep);
}

/* Light spilling down from the washout into the top of "How it works", so the
   two meet on the same tone instead of butting against each other. */
.threshold:before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:54svh;
  z-index:-1;
  pointer-events:none;
  background:linear-gradient(to bottom,
    rgba(247,243,232,.20) 0%,
    rgba(0,207,232,.07) 38%,
    transparent 100%);
}

.codex-zoom-caption{
  position:absolute;
  left:max(6vw,50vw - 660px);
  bottom:4.5rem;
  z-index:3;
  max-width:26rem;
}
.codex-zoom-caption .kicker{margin-bottom:1rem}
.codex-zoom-caption > p:not(.kicker){
  color:#f7f3e8a8;
  font-family:var(--serif);
  font-size:clamp(1.05rem,1.5vw,1.28rem);
  line-height:1.7;
  margin:0;
}

.codex-zoom-cue{
  position:absolute;
  bottom:2.7rem;
  left:50%;
  transform:translateX(-50%);
  z-index:3;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.8rem;
}
.codex-zoom-cue span{
  color:#f7f3e857;
  letter-spacing:.2em;
  text-transform:uppercase;
  font-size:.51rem;
}
.codex-zoom-cue i{
  width:1px;
  height:2.7rem;
  background:linear-gradient(var(--periwinkle),transparent);
}

/* progress hairline along the base of the stage */
.codex-zoom-progress{
  position:absolute;
  left:0;
  bottom:0;
  height:1px;
  width:0%;
  z-index:4;
  background:linear-gradient(90deg,#00c99a,#00cfe8,#287bff,#8533ff,#a05cff);
  opacity:.7;
}

@media (width<=900px){
  .codex-zoom-track{height:180svh}
  .codex-zoom-caption{left:1.4rem;right:1.4rem;bottom:5.5rem;max-width:none}
}

/* ---------- 4b. Stationary text, moving background ---------- */

/* styles.css pins these two columns with position:sticky, so the heading
   hangs while the prose scrolls past it. Text stays put instead; the drift
   moves to the background layer below. .field-heading keeps its sticky. */
.codex-section .section-heading,
.architecture-section .architecture-copy{
  position:static;
  top:auto;
}

/* the layer that actually carries the parallax. Oversized and offset so it
   can travel without exposing an edge. z-index -2 keeps it under the
   particle field (-1), which keeps it under all content. */
/* Fully inset. An earlier version was left:-10%;top:-25%;height:150% and
   translated on scroll, which meant it overhung the section by a quarter of
   its height in both directions with nothing clipping it - that is what
   bled geometry across the book and author photos and printed hard bands at
   the section seams. The layer now never exceeds its section; the parallax
   comes from moving the image WITHIN the box instead. */
.section-glow{
  position:absolute;
  inset:0;
  z-index:-2;
  pointer-events:none;
  background-repeat:no-repeat;
  background-position:center 50%;
  background-size:auto 150%;
  background-image:
    radial-gradient(46% 34% at 28% 30%, rgba(0,201,154,.20), transparent 70%),
    radial-gradient(52% 38% at 74% 62%, rgba(133,51,255,.24), transparent 72%),
    radial-gradient(40% 30% at 52% 88%, rgba(40,123,255,.16), transparent 70%);
}

/* ---------- 4d. Brand background plates ---------- */

/* The RemCodex line-work plates. They are near-black with thin luminous
   geometry, so they sit on top of the section background with screen blending
   and read as light rather than as a photo. Each rides the existing parallax
   layer, so they drift with scroll for free. */
/* Fully inset for the same reason as .section-glow above: nothing may cross a
   section boundary. background-size is taller than the box so there is slack
   for the image to travel inside it, which is where the parallax comes from. */
/* background-size is `cover`, not the old `auto 150%`. That 150% existed only
   to leave vertical slack for a parallax drift, but it meant upscaling the
   1600px source half again as large, which visibly softened it. Sharpness
   beats the drift, so the plates are now static and the parallax is left to
   the gradient glow layers, which cost nothing to scale. */
.brand-plate{
  position:absolute;
  inset:0;
  z-index:-2;
  pointer-events:none;
  overflow:hidden;
  background-repeat:no-repeat;
  background-position:center center;
  background-size:cover;
  mix-blend-mode:screen;
  opacity:.3;
}

.brand-plate[data-plate="spiral-arc"]   {background-image:url("/bg/spiral-arc.webp")}
.brand-plate[data-plate="core-waveform"]{background-image:url("/bg/core-waveform.webp")}
.brand-plate[data-plate="orbits-wide"]  {background-image:url("/bg/orbits-wide.webp")}
.brand-plate[data-plate="radiant-core"] {background-image:url("/bg/radiant-core.webp")}
.brand-plate[data-plate="pulse"]        {background-image:url("/bg/pulse.webp")}
.brand-plate[data-plate="spiral-blue"]  {background-image:url("/bg/spiral-blue.webp")}
.brand-plate[data-plate="triple"]       {background-image:url("/bg/triple.webp")}
.brand-plate[data-plate="small-core"]   {background-image:url("/bg/small-core.webp")}

@media (width<=900px){
  .brand-plate{opacity:.22}
}

/* The hero already draws its own orbit geometry in CSS (.cosmos). With a
   line-work plate behind it that reads as two competing systems, so the
   CSS one steps back and lets the brand plate carry the structure. */
.hero .cosmos{opacity:.24}
.hero .brand-plate{opacity:.4}

/* Black scrim over the hero plate so the headline sits on quiet ground
   instead of competing with the line-work. Sits above the plate (-2) and
   below the copy. */
.hero:after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(70% 58% at 50% 46%, rgba(0,9,25,.86), rgba(0,9,25,.5) 55%, transparent 80%),
    linear-gradient(180deg, rgba(0,9,25,.72) 0%, rgba(0,9,25,.28) 34%, rgba(0,9,25,.35) 66%, rgba(0,9,25,.9) 100%);
}

/* Accents pulled onto the new spectrum */
.eyebrow span{
  background:linear-gradient(90deg,#d8b66a,#8533ff,#a05cff,#287bff,#00cfe8,#00c99a);
  box-shadow:0 0 14px rgba(40,123,255,.7);
}
.card-line{
  background:linear-gradient(90deg,#8533ff,#a05cff,#287bff,#00cfe8,#00c99a,#d8b66a);
}
.codex-zoom-progress{
  background:linear-gradient(90deg,#d8b66a,#8533ff,#a05cff,#287bff,#00cfe8,#00c99a);
}
.orbit-cta:before{
  background:conic-gradient(from 0deg,#8533ff,#a05cff,#287bff,#00cfe8,#00c99a,#d8b66a,#8533ff);
}
.orbit-cta-orbits i:after{
  background:#287bff;
  box-shadow:0 0 12px 3px rgba(40,123,255,.8);
}
.orbit-cta-orbits i:nth-child(2):after{
  background:#00cfe8;
  box-shadow:0 0 11px 3px rgba(0,207,232,.75);
}
.orbit-cta-orbits i:nth-child(3):after{
  background:#d8b66a;
  box-shadow:0 0 10px 3px rgba(216,182,106,.75);
}

/* per-card glyph colours walk the spectrum */
.principle-card:nth-of-type(1) .card-glyph i{border-color:rgba(133,51,255,.5)}
.principle-card:nth-of-type(1) .card-glyph span{color:#8533ff}
.principle-card:nth-of-type(2) .card-glyph i{border-color:rgba(40,123,255,.5)}
.principle-card:nth-of-type(2) .card-glyph span{color:#287bff}
.principle-card:nth-of-type(3) .card-glyph i{border-color:rgba(0,207,232,.5)}
.principle-card:nth-of-type(3) .card-glyph span{color:#00cfe8}
.principle-card:nth-of-type(4) .card-glyph i{border-color:rgba(216,182,106,.5)}
.principle-card:nth-of-type(4) .card-glyph span{color:#d8b66a}

/* ---------- 4c. Buttons without the icon ---------- */

/* styles.css sets justify-content:space-between to push the label and the
   flame glyph apart. The glyph is gone, so centre the label instead. */
.primary-button{
  justify-content:center;
  padding-left:1.6rem;
  padding-right:1.6rem;
}

/* hero now carries a single button */
.hero-actions{gap:0}

/* ---------- 4e. Book section: tan page stock ---------- */

/* Warm paper tone, keyed to the cream of "From the page into the body" so the
   two light sections read as the same material. */
/* Flat vertical wash only. An earlier radial highlight sat right behind the
   book and read as a rectangular plate around it.
   Full-bleed: styles.css caps this at 1440px, which left the page's dark
   background showing as strips down both sides of the tan. The cap moves to
   the padding so the colour spans the viewport while the content stays
   centred at the same width. */
.book-section,
.field-section{
  max-width:none;
  margin:0;
  padding-left:max(6vw, calc(50vw - 720px));
  padding-right:max(6vw, calc(50vw - 720px));
}
.book-section{
  background:linear-gradient(180deg,#f2ebdc 0%,#e6dcc6 100%);
  color:var(--night);
}
.book-section .kicker{color:rgba(0,9,25,.5)}
.book-section h2{color:#0b1430}
.book-section h2 em{color:#8533ff}
.book-copy > p:not(.kicker){color:rgba(0,9,25,.72)}
.book-section .signature{border-top-color:rgba(0,9,25,.16)}
.book-section .signature p{color:rgba(0,9,25,.55)}
.book-section .seal{border-color:rgba(0,9,25,.3)}
.book-section .seal:before,
.book-section .seal:after,
.book-section .seal i{border-color:rgba(0,9,25,.24)}

/* the book is a transparent cutout now, so it floats rather than filling a
   cropped frame: no inset border, no cover-crop, real drop shadow */
.book-photo{overflow:visible;background:none}
.book-photo:after{display:none}
.book-photo img{
  object-fit:contain;
  width:100%;
  height:auto;
  min-height:0;
  max-height:36rem;
  filter:drop-shadow(0 34px 46px rgba(0,9,25,.3))
         drop-shadow(0 6px 12px rgba(0,9,25,.18));
}
.book-photo:hover img{transform:none}

@media (width<=900px){
  .book-photo img{max-height:26rem}
}

/* ---------- 4f. Zoom exit lands directly on "How it works" ---------- */

/* A sticky stage releases with the NEXT section starting at the viewport
   bottom, so "How it works" was always a full screen below the fold when the
   washout cleared. Pulling the section up by one viewport means that at the
   moment of release its top is at the viewport top and the copy is already
   on screen. The stage outranks it on z-index so it stays hidden behind the
   zoom until the handoff. */
.threshold{
  margin-top:-100svh;
  position:relative;
  z-index:1;
}
.codex-zoom-stage{z-index:2}

/* ---------- 4g. Brighter body copy ---------- */

/* styles.css runs most prose at 60% of the cream, which sits too dim against
   the deeper #000919 background. */
.section-prose > p,
.architecture-copy > p:not(.kicker):not(.whisper),
.reflection-copy > p:not(.kicker),
.system-intro > p:not(.kicker),
.threshold-note,
.author-copy > p:not(.kicker),
.principle-card > p,
.pathway-row p,
.invitation-copy{
  color:rgba(247,243,232,.86);
}
/* styles.css caps this at 31rem, which broke it over three lines. Wide enough
   for one line on desktop, still wraps naturally on narrow screens. */
.hero-note{
  color:rgba(247,243,232,.72);
  max-width:min(56rem,92vw);
}
@media (width>=1080px){
  .hero-note{max-width:none;white-space:nowrap}
}
.field-statement > p{color:rgba(0,9,25,.82)}

/* ---------- 4h. "What you get" glow reaches the full section ---------- */

/* styles.css gives this a fixed 70rem x 38rem box, so on a tall section the
   radial stopped partway down and left a hard edge. */
.system-section:before{
  width:auto;
  height:auto;
  inset:0;
  left:0;
  transform:none;
  background:
    radial-gradient(58% 42% at 50% 22%, rgba(133,51,255,.24), transparent 72%),
    radial-gradient(50% 40% at 50% 78%, rgba(40,123,255,.16), transparent 74%);
}

/* ---------- 4i. "What you walk away with" as full-width rows ---------- */

/* full-bleed section so its brand plate spans the viewport; the width cap
   moves to the inner blocks, same as .codex-section */
.architecture-section{
  display:block;
  max-width:none;
  margin:0;
}
.architecture-copy{
  max-width:44rem;
  margin:0 auto 4.5rem;
  text-align:center;
  justify-self:auto;
}
.pathway{
  max-width:1180px;
  margin-left:auto;
  margin-right:auto;
}
.architecture-copy .kicker{justify-content:center}

.pathway-row{
  display:grid;
  grid-template-columns:4.5rem 1fr;
  align-items:start;
  gap:0 1.4rem;
  min-height:0;
  padding:2.4rem 0;
}
.pathway-row > span{
  grid-row:1 / 3;
  padding-top:.55rem;
}
.pathway-row h3{
  grid-column:2;
  grid-row:1;
  margin:0 0 .7rem;
  font-size:clamp(1.5rem,2.1vw,2.05rem);
}
.pathway-row p{
  grid-column:2;
  grid-row:2;
  margin:0;
  max-width:52rem;
  font-size:clamp(1rem,1.25vw,1.12rem);
}
.pathway-row:hover{padding-left:1rem}

@media (width<=580px){
  .architecture-section{padding-left:1.4rem;padding-right:1.4rem}
  .pathway-row{grid-template-columns:3rem 1fr;padding:1.9rem 0}
  .pathway-row p{grid-column:2;grid-row:2}
}

/* ---------- 4j. Rotating word in the hero headline ---------- */

.rotator{
  display:inline-block;
  position:relative;
  min-width:1ch;
}
.rotator-word{
  display:inline-block;
  transition:opacity .42s cubic-bezier(.2,.7,.2,1),
             transform .42s cubic-bezier(.2,.7,.2,1),
             filter .42s cubic-bezier(.2,.7,.2,1);
  will-change:opacity,transform;
}
.rotator-word.is-out{opacity:0;transform:translateY(-.3em);filter:blur(6px)}
.rotator-word.is-pre{opacity:0;transform:translateY(.3em);filter:blur(6px)}

/* ---------- 4k. Codex section: aspect cards + walkthrough ---------- */

/* was a two-column grid; now a stacked diagram.
   The section itself stays full-bleed so the brand plate spans the whole
   viewport; the max-width lives on the inner blocks instead. Capping the
   section was clipping the background to 1240px. */
.codex-section{
  display:block;
  max-width:none;
  margin:0;
}
.codex-section .section-heading{
  max-width:46rem;
  margin:0 auto 4.5rem;
  text-align:center;
}
.aspect-grid,
.walkthrough{
  max-width:1240px;
  margin-left:auto;
  margin-right:auto;
}
.codex-section .section-heading .kicker{justify-content:center}
.codex-lead{
  color:rgba(247,243,232,.86);
  font-family:var(--serif);
  font-size:clamp(1.05rem,1.4vw,1.24rem);
  line-height:1.75;
  margin:2rem auto 0;
  max-width:40rem;
}

.aspect-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1px;
  margin-bottom:6rem;
}
.aspect-card{
  border:1px solid var(--line);
  background:rgba(2,10,31,.72);
  padding:0 0 2rem;
  overflow:hidden;
  transition:background .45s,transform .45s;
}
.aspect-card:hover{background:rgba(10,23,64,.85);transform:translateY(-.4rem)}
.aspect-art{
  margin:0 0 1.8rem;
  aspect-ratio:4/3;
  overflow:hidden;
}
.aspect-art img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.aspect-card h3{
  color:var(--white);
  font-family:var(--display);
  font-size:clamp(1.2rem,1.4vw,1.45rem);
  font-weight:400;
  margin:0 1.8rem 1rem;
}
.aspect-card p{
  color:rgba(247,243,232,.8);
  font-family:var(--serif);
  font-size:.99rem;
  line-height:1.72;
  margin:0 1.8rem;
}

/* "How you use it" is its own section now */
.usage-section{
  position:relative;
  isolation:isolate;
  padding:clamp(7rem,11vw,11rem) 6vw;
  background:var(--night);
}
.walkthrough{margin-bottom:0}
.walkthrough .kicker{justify-content:center;margin-bottom:3rem}
.walk-steps{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:2.5rem;
  list-style:none;
  padding:0;
  margin:0;
}
.walk-step{position:relative;text-align:center}
.walk-num{
  display:block;
  color:var(--periwinkle);
  letter-spacing:.18em;
  font-size:.57rem;
  margin-bottom:1.2rem;
}
.walk-art{
  width:100%;
  max-width:9rem;
  aspect-ratio:1;
  object-fit:cover;
  margin:0 auto 1.4rem;
  display:block;
  border-radius:50%;
  border:1px solid var(--line);
}
.walk-step h4{
  color:var(--white);
  font-family:var(--display);
  font-size:1.16rem;
  font-weight:400;
  margin:0 0 .7rem;
}
.walk-step p{
  color:rgba(247,243,232,.78);
  font-family:var(--serif);
  font-size:.95rem;
  line-height:1.68;
  margin:0 auto;
  max-width:15rem;
}

/* connecting hairline between the steps */
.walk-step:not(:last-child):after{
  content:"";
  position:absolute;
  top:4.9rem;
  left:calc(50% + 5rem);
  right:calc(-50% + 5rem);
  height:1px;
  background:linear-gradient(90deg,rgba(40,123,255,.5),rgba(0,207,232,.16));
}

.codex-section .signature{max-width:32rem;margin-inline:auto}

@media (width<=1100px){
  .aspect-grid{grid-template-columns:repeat(2,1fr)}
  .walk-steps{grid-template-columns:repeat(2,1fr);gap:3rem 2rem}
  .walk-step:nth-child(2n):after{display:none}
}
@media (width<=680px){
  .aspect-grid{grid-template-columns:1fr}
  .walk-steps{grid-template-columns:1fr;gap:3rem}
  .walk-step:after{display:none}
}

/* ---------- 5. Copy-change support ---------- */

/* NOTE: the pathway grid is defined in 4i above (number column + stacked
   heading/description). An older 3-column rule lived here and, being later in
   the file, silently overrode it and left a dead third column. */

/* "How it works" now runs two paragraphs */
.threshold-note + .threshold-note{margin-top:1.5rem}

/* ---------- 6. Orbiting CTA ---------- */

.orbit-cta{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-top:3rem;
  padding:1.15rem 2.5rem;
  border-radius:999px;
  background:var(--night);
  color:var(--mist);
  letter-spacing:.17em;
  text-transform:uppercase;
  font-size:.66rem;
  isolation:isolate;
  transition:transform .35s cubic-bezier(.2,.7,.2,1),color .35s;
}
.orbit-cta:hover{transform:translateY(-2px);color:var(--white)}
.orbit-cta-label{position:relative;z-index:2}

/* soft palette halo behind the pill */
.orbit-cta:before{
  content:"";
  position:absolute;
  inset:-7px;
  z-index:-1;
  border-radius:999px;
  background:conic-gradient(from 0deg,#00c99a,#00cfe8,#287bff,#8533ff,#a05cff,#00c99a);
  filter:blur(11px);
  opacity:.6;
  animation:ctaGlow 5.5s ease-in-out infinite;
}

/* three spheres on elliptical paths. Each <i> is a full-size box that spins;
   its ::after rides the left edge, so rotating the box walks the sphere
   around the pill. */
.orbit-cta-orbits{position:absolute;inset:-15px;pointer-events:none;z-index:1}
.orbit-cta-orbits i{
  position:absolute;
  inset:0;
  border-radius:999px;
  animation:ctaOrbit 7s linear infinite;
}
.orbit-cta-orbits i:nth-child(2){animation-duration:10.5s;animation-direction:reverse}
.orbit-cta-orbits i:nth-child(3){animation-duration:14s;inset:-9px}
.orbit-cta-orbits i:after{
  content:"";
  position:absolute;
  top:50%;
  left:0;
  width:8px;
  height:8px;
  border-radius:50%;
  transform:translate(-50%,-50%);
  background:#287bff;
  box-shadow:0 0 12px 3px rgba(40,123,255,.75);
}
.orbit-cta-orbits i:nth-child(2):after{
  width:6px;height:6px;
  background:#00c99a;
  box-shadow:0 0 11px 3px rgba(0,201,154,.7);
}
.orbit-cta-orbits i:nth-child(3):after{
  width:5px;height:5px;
  background:#8533ff;
  box-shadow:0 0 10px 3px rgba(133,51,255,.7);
}

@keyframes ctaOrbit{to{transform:rotate(360deg)}}
@keyframes ctaGlow{
  0%,100%{opacity:.5;filter:blur(11px)}
  50%{opacity:.85;filter:blur(15px)}
}

@media (width<=580px){
  .orbit-cta{width:100%;padding-left:1.4rem;padding-right:1.4rem}
}

/* ---------- 7. Reduced motion ---------- */

@media (prefers-reduced-motion:reduce){
  [data-reveal]{opacity:1;transform:none;filter:none;transition:none}
  .ambient-field{display:none}
  .codex-zoom-track{height:auto}
  .codex-zoom-stage{position:static;height:auto;aspect-ratio:16/9}
  .codex-zoom-canvas{display:none}
  .codex-zoom-still{position:relative;opacity:1}
  .codex-zoom-bloom,.codex-zoom-flash,.codex-zoom-settle,.codex-zoom-seam,
  .codex-zoom-cue,.codex-zoom-progress{display:none}
  .threshold:before{display:none}
  .orbit-cta:before,.orbit-cta-orbits i{animation:none}
  .orbit-cta-orbits{display:none}
}