/* ===========================================================================
   Shiftline — one-page funnel. World: LIVE INSTRUMENT.
   ---------------------------------------------------------------------------
   The page is a measuring instrument that is switched on. Components are
   bezels, meters, lamps and tick scales — not cards. Brass is chrome and
   scale; emerald is the live signal and the only saturated field.

   Colour tokens mirror c:\Users\SHIFTLINE\brand.json, which stays the source
   of truth. TYPE DOES NOT: Cormorant Garamond and Montserrat were released
   for this surface (recorded in PRODUCT.md) because they were most of why the
   page read generic. The newsletter and bonus PDF still use them.

   No light mode. The brand board has no light variant, so this commits to
   dark and paints every colour explicitly.
   =========================================================================== */

:root {
  --obsidian:#0B0D10;
  --charcoal:#171A1F;
  --raised:#1F232A;
  --ivory:#F5F2E8;
  --brass:#D4AF37;
  --brass-lit:#F0D989;
  --brass-dim:#9C7A22;
  --emerald:#19C97A;
  --emerald-deep:#0E7A4C;
  --luminous:#6DFFA7;

  --ink:#F5F2E8;
  --ink-2:rgba(245,242,232,0.70);
  /* 0.58, not the 0.46 this started at: almost everything wearing --ink-3 is a
     mono label at 10-12px, and 0.46 ivory on obsidian lands near 4.0:1 — under
     the 4.5:1 floor. 0.58 clears it at ~5.6:1 and still reads as secondary. */
  --ink-3:rgba(245,242,232,0.58);

  --line:rgba(245,242,232,0.13);
  --line-2:rgba(245,242,232,0.24);
  --chrome:rgba(212,175,55,0.34);

  --sans:'Archivo','Helvetica Neue',Arial,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,Consolas,monospace;

  --gutter:clamp(1.15rem,4vw,3.5rem);
  --measure:1240px;
  --sec-y:clamp(4.5rem,11vh,9rem);
  --ease:cubic-bezier(.2,.7,.3,1);
}

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}

body{
  margin:0;
  background:var(--obsidian);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  /* clip, not hidden: hidden makes body a scroll container and crops the
     conversation bubbles that deliberately break the device frame. */
  overflow-x:clip;
}

h1,h2,h3{margin:0;font-weight:800;line-height:1.02;letter-spacing:-.03em;text-wrap:balance}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--luminous);outline-offset:3px}

.shell{width:100%;max-width:var(--measure);margin-inline:auto;padding-inline:var(--gutter)}
section{padding-block:var(--sec-y);position:relative}

/* Hero-only preview: retain the conversion entry point and suppress all
   follow-on landing-page content until the full page is re-enabled. */
main > section:not(.hero),
.site-footer,
.sticky-cta{display:none!important}

/* Charcoal faceplate bands. */
.band{background:var(--charcoal);border-block:1px solid var(--line)}

/* Every readout is mono with tabular figures — it is measurement, not decor. */
.mono,.tc,.stage-id,.input-v,.input-k,.meter-v,.meter-k,.readout-v,.readout-k,
.rv,.rk,.trustline,.sys,.live,.report-id,.report-state,.contents-k,.pk,
.header-cta,.btn,.foot-sys,.site-footer,.console-foot{
  font-family:var(--mono);
  font-variant-numeric:tabular-nums lining-nums;
}

.h2{
  font-size:clamp(1.9rem,4.4vw,3.4rem);
  max-width:17ch;
  margin-bottom:clamp(2.25rem,5vw,3.5rem);
}

/* ---------------------------------------------------- instrument chrome -- */

/* Tick scale down the page edge. Desktop only — it is chrome, not content. */
.edge-scale{
  position:fixed;left:0;top:0;bottom:0;width:26px;z-index:5;pointer-events:none;
  border-right:1px solid var(--line);
  background:repeating-linear-gradient(
    to bottom,
    var(--chrome) 0 1px,
    transparent 1px 14px
  );
  opacity:.5;
  display:none;
}
@media(min-width:1100px){ .edge-scale{display:block} }

/* The status lamp. One authored element, reused wherever state is shown.
   It is a lit indicator, so it carries a tight ring rather than a soft halo —
   an LED reads as emission at 7px, a bloom reads as neon chrome.
   Only the console lamp breathes: a pulsing dot in the header is the oldest
   tell in this category, and there it is a static ON light. */
.lamp{
  width:7px;height:7px;border-radius:50%;
  background:var(--emerald);
  box-shadow:0 0 0 2px rgba(25,201,122,.20);
  flex:none;display:inline-block;
}
.console .lamp{ animation:pulse 2.6s var(--ease) infinite; }
@keyframes pulse{
  0%,100%{opacity:1}
  50%{opacity:.5}
}

/* --------------------------------------------------------------- header -- */

.site-header{
  position:relative;z-index:20;
  max-width:var(--measure);margin-inline:auto;
  padding:1.1rem var(--gutter);
  display:flex;align-items:center;gap:1rem;
  border-bottom:1px solid var(--line);
}
.brandmark{display:inline-flex;align-items:center;gap:.6rem;margin-right:auto}
/* Raster crop from a moodboard — safe near 40px, unsafe to scale up. */
.site-header .logo{height:32px;width:auto}
.wordmark{font-size:.9rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase}

.sys{
  display:none;align-items:center;gap:.5rem;
  font-size:.6875rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);
}
@media(min-width:760px){ .sys{display:inline-flex} }

.header-cta{
  display:none;padding:.6rem 1.15rem;
  border:1px solid var(--chrome);border-radius:11px;
  font-size:.6875rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  transition:background-color .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease);
}
.header-cta:hover{background:#FFE36C;border-color:#FFE36C;color:var(--obsidian)}
@media(min-width:620px){ .header-cta{display:inline-block} }

/* ------------------------------------------------------------- CTA ------ */

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.65rem;
  width:100%;padding:1.15rem 1.6rem;
  background:var(--emerald);color:var(--obsidian);
  border:0;border-radius:11px;cursor:pointer;text-align:center;
  font-size:.8125rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  transition:background-color .2s var(--ease),transform .12s var(--ease);
}
/* Brightening the field, not haloing it. A zero-offset coloured glow is the
   neon-accent tell this world is otherwise steering around. */
.btn:hover{background:var(--luminous);box-shadow:none}
.btn:active{transform:translateY(1px)}
.btn svg{width:16px;height:16px;flex:none}
@media(min-width:620px){ .btn{width:auto} }
.btn-lg{padding:1.3rem clamp(1.5rem,4vw,2.6rem);font-size:.875rem}

.cta-micro{margin-top:1rem;color:var(--ink-2);font-size:.9375rem;max-width:44ch}

.trustline{
  display:flex;flex-wrap:wrap;gap:.55rem 1.1rem;margin-top:1.4rem;
  font-size:.6875rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);
}
.trustline li{display:flex;align-items:center;gap:1.1rem}
.trustline li:not(:last-child)::after{
  content:"";width:1px;height:11px;background:var(--line-2);
}

/* ============================================================== §1 hero == */

/* No overflow:hidden — the conversation bubbles deliberately break the
   device frame, and body already guards horizontal scroll. */
.hero{padding-top:clamp(2rem,5vh,4rem);padding-bottom:clamp(1.25rem,3vh,2rem)}
.hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(70% 55% at 8% 6%, rgba(25,201,122,.10) 0%, transparent 60%),
    radial-gradient(60% 50% at 100% 90%, rgba(212,175,55,.07) 0%, transparent 62%);
}
.hero > *{position:relative}

.hero-grid{display:grid;gap:clamp(2.5rem,5vw,4rem)}
.hero-copy{position:relative;z-index:4}
@media(min-width:1000px){
  .hero-grid{grid-template-columns:1.05fr .95fr;align-items:center;gap:clamp(2.5rem,4vw,4.5rem)}
  .hero-copy{transform:translateY(12px)}
}

.hero h1{
  font-size:clamp(2.4rem,6.4vw,4.9rem);
  letter-spacing:-.035em;
  max-width:14ch;
}

/* The single proof element. It is a third-party, checkable argument and it
   says so on its face — the reference page puts a fabricated customer counter
   here, which is exactly what we cannot do. */
.proof{
  display:inline-flex;align-items:center;gap:.85rem;
  margin-top:clamp(2rem,4vw,2.75rem);
  padding:.7rem 1rem .7rem .85rem;
  border:1px solid var(--line);background:var(--charcoal);
  transition:border-color .2s var(--ease);
}
.proof:hover{border-color:var(--chrome)}
.proof-v{
  font-family:var(--mono);font-size:1.5rem;font-weight:700;
  color:var(--emerald);line-height:1;flex:none;
}
.proof-k{font-size:.8125rem;line-height:1.4;color:var(--ink-2);max-width:34ch}
.proof-k b{
  display:block;font-family:var(--mono);font-size:.6875rem;font-weight:500;
  letter-spacing:.02em;color:var(--ink-3);margin-top:.2rem;
}

.hero-sub{
  margin-top:clamp(.65rem,1.2vw,.9rem);color:var(--ink-2);
  font-size:clamp(1rem,1.9vw,1.1875rem);max-width:42ch;
}
.hero-equation{margin-top:.75rem;font-family:var(--mono);font-size:.9em;font-weight:700;color:var(--emerald);letter-spacing:-.03em}
.hero-qualifier{margin-top:.4rem;font-size:.9em;font-style:italic;color:var(--ink-3)}

.hero-copy .btn{margin-top:clamp(1.35rem,2.5vw,1.75rem)}
.hero-copy .btn-lg{padding-block:.95rem}
.hero-capabilities{
  max-width:var(--measure);margin:clamp(2.5rem,6vh,4.5rem) auto 0;padding:1rem var(--gutter) 0;
  border-top:1px solid var(--line);font-family:var(--mono);font-size:clamp(.6875rem,1.3vw,.8125rem);
  font-weight:700;letter-spacing:.07em;line-height:1.5;text-align:center;text-transform:uppercase;color:var(--brass-lit);
}

/* ------------------------------------------------- the lit device ------- */
/* The page is a dark room; the phone is the only lit object in it. That
   contrast is the whole point of the composition — do not tint the screen
   toward the page, and do not put a glow around the device to "blend" it. */

.device-stage{position:relative;display:flex;justify-content:center;padding-top:1rem}

.phone{
  position:relative;z-index:2;overflow:hidden;
  width:min(320px,80vw);aspect-ratio:1 / 2.016;
  border-radius:42px;
}
.phone-render{
  position:absolute;z-index:0;pointer-events:none;
  width:auto;max-width:none;height:136%;
  top:-19.4%;left:-42.5%;
}
.phone-screen{
  position:absolute;z-index:1;inset:2.3% 5.8% 3.8%;
  border-radius:31px;
  background:rgba(6,8,11,.16);
  color:#F5F2E8;
  overflow:hidden;
  min-height:0;
  display:flex;flex-direction:column;
}

.ph-top{
  display:flex;align-items:center;justify-content:space-between;
  padding:.85rem 1.25rem .3rem;
  font-family:var(--mono);font-size:.6875rem;font-weight:700;color:#F5F2E8;
  text-shadow:0 1px 4px rgba(0,0,0,.75);
}
.ph-sig{display:inline-flex;align-items:flex-end;gap:2px}
.ph-sig i{width:3px;background:#F5F2E8;border-radius:1px}
.ph-sig i:nth-child(1){height:5px}
.ph-sig i:nth-child(2){height:8px}
.ph-sig i:nth-child(3){height:11px}

.ph-brand{
  display:flex;align-items:center;gap:.35rem;
  padding:.9rem 1.25rem 1rem;
  border-bottom:1px solid rgba(245,242,232,.16);
}
.ph-wordmark{height:27px;width:auto;max-width:150px;object-fit:contain;object-position:left center}
.ph-demo-callout{
  position:absolute;z-index:5;top:calc(5.1rem + 62px);right:calc(.95rem - 6px);
  color:#FFE36C;pointer-events:none;transform:rotate(-4deg);
}
.ph-demo-callout span{
  display:block;font-size:1rem;font-weight:800;font-style:italic;letter-spacing:.01em;
}
.ph-demo-callout svg{
  width:66px;height:38px;display:block;margin-left:.65rem;
}

.ph-body{position:relative;z-index:4;padding:2.5rem 1.25rem 1.35rem;display:flex;flex-direction:column;flex:1}
.ph-body.is-live{padding-top:1.15rem}
.ph-h{font-size:1.45rem;font-weight:800;letter-spacing:-.03em;margin-top:.2rem;line-height:1.1;color:#F5F2E8;text-shadow:0 1px 4px rgba(0,0,0,.75)}

.ph-form{margin-top:1.1rem;display:flex;flex-direction:column;gap:.6rem}
.field{
  display:flex;align-items:center;gap:.5rem;
  background:rgba(10,13,17,.66);border:1px solid rgba(245,242,232,.22);border-radius:11px;
  padding:.7rem .85rem;
}
.field:focus-within{border-color:#0A84FF;box-shadow:0 0 0 2px rgba(10,132,255,.28)}
.cc{font-family:var(--mono);font-size:.8125rem;font-weight:700;color:#F5F2E8;flex:none}
.field input{
  border:0;background:none;outline:none;width:100%;min-width:0;
  font-family:var(--sans);font-size:.9375rem;color:#F5F2E8;
}
.field input::placeholder{color:rgba(245,242,232,.62)}

.ph-btn{
  margin-top:.35rem;width:100%;border:0;cursor:pointer;border-radius:11px;
  padding:.95rem 1rem;background:#0A84FF;color:#FFF;
  font-family:var(--mono);font-size:.8125rem;font-weight:700;
  letter-spacing:.11em;text-transform:uppercase;
  transition:background-color .2s var(--ease);
}
.ph-btn:hover{background:#0071E3}
.ph-note{margin-top:.6rem;font-size:.75rem;line-height:1.45;color:rgba(245,242,232,.72);text-shadow:0 1px 3px rgba(0,0,0,.75)}
.ph-note.sent{color:var(--emerald-deep);font-weight:600}

.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
    clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---- compact conversation inside the device ---- */
.bubble{
  position:static;width:100%;margin-top:.45rem;
  display:flex;flex-direction:column;gap:.35rem;pointer-events:none;
}
.bubble p{
  width:fit-content;max-width:88%;margin:0;padding:.34rem .5rem;
  border-radius:.75rem;font-size:.625rem;line-height:1.3;
  box-shadow:0 10px 22px -16px rgba(0,0,0,.8);
  animation:chat-bubble-in .42s var(--ease) both;
}
.b-them{align-self:flex-start;color:#15171B;background:#E9E9EB;border-bottom-left-radius:.3rem}
.b-us{align-self:flex-end;color:#FFF;background:#0A84FF;border-bottom-right-radius:.3rem;font-weight:500}
.bubble-a p:nth-child(1){animation-delay:.8s}
.bubble-a p:nth-child(2){animation-delay:1.65s}
.bubble-b p:nth-child(1){animation-delay:2.65s}
.bubble-b p:nth-child(2){animation-delay:3.5s}
@keyframes chat-bubble-in{
  from{opacity:0;transform:translateY(10px) scale(.94)}
  to{opacity:1;transform:none}
}

/* The ElevenLabs session renders in the phone itself; these are live call
   states and transcript rows, not a decorative preview. */
.ph-live{display:flex;min-height:0;flex:1;margin-top:.25rem;flex-direction:column}
.ph-live[hidden]{display:none}
.ph-live-head{display:flex;align-items:center;gap:.45rem;font-family:var(--mono);font-size:.625rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--emerald)}
.ph-live-agent{display:flex;align-items:center;gap:.65rem;margin-top:1.15rem}
.ph-live-avatar{display:grid;width:33px;height:33px;flex:none;place-items:center;overflow:hidden;border:1px solid var(--chrome);border-radius:50%;background:var(--charcoal);font-family:var(--mono);font-size:.875rem;font-weight:700;line-height:1;color:var(--brass-lit)}
.ph-live-agent strong{display:block;line-height:1.25}
.ph-live-agent strong{font-size:.875rem;color:#F5F2E8}
.ph-live-agent div span{margin-top:.1rem;font-family:var(--mono);font-size:.575rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.ph-wave{display:flex;align-items:center;justify-content:center;gap:3px;height:34px;margin:1rem 0 .65rem;border-block:1px solid rgba(245,242,232,.12)}
.ph-wave i{display:block;width:3px;height:9px;background:var(--emerald);border-radius:3px;animation:ph-wave 1s ease-in-out infinite}
.ph-wave i:nth-child(2){animation-delay:.12s}.ph-wave i:nth-child(3){animation-delay:.24s}.ph-wave i:nth-child(4){animation-delay:.36s}.ph-wave i:nth-child(5){animation-delay:.48s}
@keyframes ph-wave{0%,100%{height:7px;opacity:.5}50%{height:23px;opacity:1}}
.ph-live.is-listening .ph-wave i{background:var(--brass)}
.ph-live.is-connecting .ph-wave i{animation:none;background:var(--ink-3);height:6px}
.ph-end{width:100%;margin-top:.45rem;padding:.62rem;border:1px solid rgba(245,242,232,.28);border-radius:8px;background:transparent;color:#F5F2E8;cursor:pointer;font-family:var(--mono);font-size:.625rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.ph-end:hover{border-color:var(--brass);color:var(--brass-lit)}
@media(max-width:520px){
  .bubble{width:100%;margin-top:.45rem;box-shadow:none}
  .device-stage{flex-direction:column;align-items:center}
}

.device-foot{
  position:absolute;bottom:-3.4rem;left:0;right:0;text-align:center;
  font-family:var(--mono);font-size:.75rem;color:var(--ink-3);
}

/* ============================================================ §2 stages == */

.stages{display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
@media(min-width:900px){ .stages{grid-template-columns:repeat(4,1fr)} }

.stage{background:var(--charcoal);padding:1.6rem 1.4rem 1.8rem;position:relative}
.stage-id{
  font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;color:var(--brass);
  display:block;margin-bottom:1.5rem;
}
.stage h3{font-size:1.35rem;letter-spacing:-.02em;margin-bottom:.6rem}
.stage p{font-size:.9375rem;color:var(--ink-2)}
/* Progress notch on the faceplate seam. */
.stage::after{
  content:"";position:absolute;left:1.4rem;top:0;width:34px;height:2px;background:var(--emerald);
}

/* ============================================================= §3 meter == */

.meter{border:1px solid var(--line);background:var(--charcoal)}

.meter-inputs{
  display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 1.25rem;
  padding:1.5rem clamp(1.2rem,3vw,2rem);
  border-bottom:1px solid var(--line);
}
.input{display:flex;align-items:baseline;gap:.5rem}
.input-v{font-size:1.35rem;font-weight:700;color:var(--ink)}
.input-k{font-size:.6875rem;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3)}
.op{font-size:1rem;color:var(--brass)}

.meter-out{padding:clamp(1.6rem,4vw,2.6rem) clamp(1.2rem,3vw,2rem) 0}
.meter-k{
  display:block;font-size:.6875rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:.6rem;
}
.meter-v{
  display:block;
  font-size:clamp(2.9rem,10vw,6.5rem);
  font-weight:700;line-height:.95;letter-spacing:-.045em;
  color:var(--emerald);
}
/* The scale beneath the readout. */
.ticks{
  display:block;height:16px;margin-top:1.1rem;
  background:repeating-linear-gradient(to right,var(--chrome) 0 1px,transparent 1px 11px);
  border-bottom:1px solid var(--line-2);
}
.meter-note{
  padding:1.1rem clamp(1.2rem,3vw,2rem) 1.5rem;
  color:var(--ink-2);font-size:.9375rem;max-width:60ch;
}
.meter-note b{color:var(--brass);font-weight:700}

.faults{display:grid;gap:1px;background:var(--line);margin-top:1px;border:1px solid var(--line)}
@media(min-width:860px){ .faults{grid-template-columns:repeat(3,1fr)} }
.fault{background:var(--charcoal);padding:1.5rem 1.4rem}
.fault h3{font-size:1.05rem;letter-spacing:-.01em;margin-bottom:.5rem}
.fault p{font-size:.9375rem;color:var(--ink-2)}

/* ============================================================ §4 output == */

.output-grid{display:grid;gap:clamp(2rem,4vw,3rem)}
@media(min-width:960px){ .output-grid{grid-template-columns:1.1fr .9fr;gap:3.5rem} }

.report{
  background:var(--raised);border:1px solid var(--line);
  box-shadow:0 24px 60px -34px rgba(0,0,0,.9);
}
.report-head{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.9rem 1.15rem;border-bottom:1px solid var(--line);background:var(--charcoal);
}
.report-id{font-size:.6875rem;letter-spacing:.13em;text-transform:uppercase;color:var(--brass)}
.report-state{font-size:.6875rem;letter-spacing:.13em;text-transform:uppercase;color:var(--emerald)}

/* Load-bearing honesty label. Sentence case on purpose: it is a sentence, and
   a long uppercase run at small size is the least readable thing you can do to
   the one element that must be read. Do not shrink or mute it. */
.sample{
  margin:1.15rem;padding:.75rem .9rem;
  background:rgba(212,175,55,.09);border:1px solid var(--brass-dim);
  font-size:.8125rem;line-height:1.5;color:var(--brass-lit);
}
.sample b{font-weight:700;letter-spacing:.05em;text-transform:uppercase}

.readout{padding:0 1.15rem}
.readout-k{
  display:block;font-size:.6875rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);
}
.readout-v{
  display:block;margin-top:.4rem;
  font-size:clamp(2.6rem,7vw,4rem);font-weight:700;line-height:1;letter-spacing:-.04em;
  color:var(--emerald);
}
.readout-row{
  display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);
  margin:1.5rem 0 0;border-top:1px solid var(--line);
}
.readout-row > div{background:var(--raised);padding:1.1rem 1.15rem}
.rv{display:block;font-size:1.5rem;font-weight:700;letter-spacing:-.02em}
.rk{display:block;margin-top:.35rem;font-size:.75rem;line-height:1.45;color:var(--ink-3)}

.contents-k{
  font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;color:var(--brass);
  margin-bottom:1.1rem;
}
.contents-list{
  display:flex;flex-direction:column;
  counter-reset:c;border-top:1px solid var(--line);
}
.contents-list li{
  counter-increment:c;
  display:flex;align-items:baseline;gap:.85rem;
  padding:.62rem 0;border-bottom:1px solid var(--line);
  font-size:.9375rem;color:var(--ink-2);
}
.contents-list li::before{
  content:counter(c,decimal-leading-zero);
  font-family:var(--mono);font-size:.6875rem;color:var(--brass);flex:none;
}
.contents-note{margin-top:1.5rem;color:var(--ink-2);font-size:.9375rem;max-width:46ch}
.contents .btn{margin-top:1.6rem}

/* ============================================================ §5 reveal == */

.reveal{padding-block:clamp(5.5rem,15vh,10rem)}
.reveal-h{
  font-size:clamp(1.9rem,5vw,3.6rem);
  max-width:19ch;letter-spacing:-.032em;
}
.reveal-h em{font-style:normal;color:var(--emerald);display:block}

.pipeline{
  margin-top:clamp(3rem,7vw,4.5rem);
  display:grid;gap:1px;background:var(--line);border:1px solid var(--line);
}
@media(min-width:880px){ .pipeline{grid-template-columns:repeat(6,1fr)} }
.pipeline li{
  background:var(--charcoal);padding:1.15rem 1rem 1.3rem;
  display:flex;flex-direction:column;gap:.55rem;
}
/* Lamps are dark until the pipeline scrolls into view, then light in order. */
.pipeline .lamp{
  background:var(--line-2);box-shadow:none;animation:none;
  transition:background-color .45s var(--ease),box-shadow .45s var(--ease);
}
.pipeline li.on .lamp{
  background:var(--emerald);
  box-shadow:0 0 0 2px rgba(25,201,122,.20);
}
.pk{font-size:.75rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase}
.pd{font-size:.8125rem;color:var(--ink-3);line-height:1.45}

.reveal-close{
  margin-top:clamp(3.5rem,8vw,5rem);
  font-size:clamp(1.7rem,4.6vw,3rem);font-weight:800;line-height:1.12;letter-spacing:-.03em;
  max-width:20ch;
}
.reveal-close span{display:block;color:var(--ink-3);margin-top:.4rem}

/* =============================================================== FAQ ===== */

.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  list-style:none;cursor:pointer;position:relative;
  padding:1.3rem 2.5rem 1.3rem 0;
  font-size:clamp(1rem,2.1vw,1.125rem);font-weight:600;letter-spacing:-.01em;
  transition:color .2s var(--ease);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--luminous)}
.faq summary::before,.faq summary::after{
  content:"";position:absolute;right:2px;top:50%;background:var(--brass);
  transition:opacity .2s var(--ease),transform .2s var(--ease);
}
.faq summary::before{width:13px;height:1.5px;transform:translateY(-50%)}
.faq summary::after{width:1.5px;height:13px;right:7.75px;transform:translateY(-50%)}
.faq details[open] summary::after{opacity:0;transform:translateY(-50%) rotate(90deg)}
.faq .answer{padding:0 2.5rem 1.4rem 0;color:var(--ink-2);font-size:.9375rem;max-width:64ch}
.faq .answer p + p{margin-top:.8rem}

/* ============================================================ §6 final === */

.final{padding-block:clamp(4rem,11vh,7.5rem)}
.final-panel{
  padding:clamp(1.8rem,5vw,4rem) clamp(1.4rem,5vw,4rem);
  background:var(--charcoal);
  border:1px solid var(--chrome);
  box-shadow:inset 0 1px 0 rgba(245,242,232,.05);
}
.final-panel h2{font-size:clamp(1.8rem,4.6vw,3.2rem);max-width:20ch}
.final-panel .cta-micro{margin-bottom:2rem}

/* ============================================================== footer === */

.site-footer{
  border-top:1px solid var(--line);
  padding:1.6rem var(--gutter);
  max-width:var(--measure);margin-inline:auto;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  font-size:.6875rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);
}
.foot-sys{display:inline-flex;align-items:center;gap:.5rem}
@media(max-width:619px){ .site-footer{padding-bottom:calc(6rem + env(safe-area-inset-bottom))} }

/* ========================================================= sticky CTA ==== */

.sticky-cta{
  position:fixed;left:0;right:0;bottom:0;z-index:50;
  padding:.7rem .9rem calc(.7rem + env(safe-area-inset-bottom));
  background:rgba(11,13,16,.93);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-top:1px solid var(--chrome);
  transform:translateY(115%);transition:transform .35s var(--ease);
}
.sticky-cta.is-visible{transform:translateY(0)}
@media(min-width:620px){ .sticky-cta{display:none} }

/* ============================================================= reveal ==== */

[data-reveal]{
  opacity:0;transform:translateY(16px);
  transition:opacity .7s var(--ease) calc(var(--i,0)*80ms),
             transform .7s var(--ease) calc(var(--i,0)*80ms);
}
[data-reveal].is-in{opacity:1;transform:none}

/* Motion is this world's identity, so reduced-motion is a hard stop rather
   than a softening: the instrument reads as switched on, just not moving. */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation:none!important;
    transition-duration:.01ms!important;
    transition-delay:0ms!important;
  }
  [data-reveal]{opacity:1;transform:none}
  .transcript li{opacity:1;transform:none}
  .wave span{height:42%}
  .pipeline .lamp{
    background:var(--emerald);
    box-shadow:0 0 0 2px rgba(25,201,122,.20);
  }
}