/* GENERATED by design/apply-page.py from nexflow-time-hr-package.html. Edit the handoff, not
   this file -- it is overwritten on every run. */

/* ==========================================================================
   Nexflow — products/time-hr.html (Time & HR package)
   Vanilla CSS + ~90 lines of vanilla JS. No build step, no dependencies.

   Shares the token set and depth language with nexflow-hero-modules.html and
   nexflow-timesheet.html — the :root block, .site-header, .btn*, .plate,
   .section-* and .holo rules are identical and should be lifted into one
   shared site stylesheet.

   WHAT IS NEW ON THIS PAGE
   1. .field — ONE dot-tile field behind the whole document, so the motion never
      starts or stops at a section edge. Three nested layers per copy:
        .field-par    <- pointer parallax (written by JS)
        .field-scroll <- scroll separation (written by JS)
        .field-tile   <- endless CSS drift (nfDriftA / nfDriftB)
      They are separate nodes on purpose: a CSS animation on `transform` always
      beats an inline transform, so stacking these on one element would mean the
      JS silently does nothing.
   2. .seq — a 340vh scroll sequence with a sticky stage. ONE progress value
      (0..1) drives three acts: clock at the door, visitor at reception,
      timesheet on Friday. Everything is written straight to nodes inside a rAF
      loop; there is no per-frame layout thrash and no framework.
   3. .rail — the vertical zig-zag position indicator. The packet is placed with
      path.getPointAtLength() so it rides the real geometry and cannot drift off
      the line; vertex fractions along the path are 0.2215 / 0.5073 / 0.7931.

   ASSETS REQUIRED
   - assets/img/field-dots.png
   - assets/brand/nexflow-lockup.png, nexflow-lockup-black.png
     (absolute URLs below — swap for your local paths)
   ========================================================================== */

:root{
  --bg:#FFFFFF;
  --surface:#FFFFFF;
  --surface-2:#F8FAFC;
  --border:#DDE4EC;
  --rule:rgba(30,60,100,.18);

  --ink:#2C343C;
  --ink-strong:#1E2A38;
  --muted:#6C7580;
  --muted-2:#4E5A67;
  --muted-3:#5D6A78;

  --primary:#1B66C9;
  --primary-hover:#144E9D;
  --spine:#0B4A8C;            /* deeper blue: the rail sits over the dot field */
  --accent:#8FC4F5;

  --veil:rgba(255,255,255,.80);

  --sh-plate:
    inset 0 1px 0 rgba(255,255,255,.95),
    0 1px 1px rgba(18,42,72,.05),
    0 8px 18px -10px rgba(18,42,72,.20),
    0 26px 44px -26px rgba(18,42,72,.32);
  --sh-plate-hover:
    inset 0 1px 0 rgba(255,255,255,.95),
    0 2px 3px rgba(18,42,72,.07),
    0 16px 28px -10px rgba(18,42,72,.20),
    0 40px 62px -28px rgba(27,102,201,.42);
  --sh-bar:
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 -1px 0 rgba(27,102,201,.09),
    0 1px 1px rgba(18,42,72,.06),
    0 8px 18px -8px rgba(18,42,72,.22),
    0 30px 50px -26px rgba(18,42,72,.42);
  --sh-card:
    inset 0 1px 0 rgba(255,255,255,.95),
    0 26px 50px -24px rgba(18,42,72,.4);

  --radius:3px;
  --maxw:1180px;
  --font:'Montserrat', -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-display:'Archivo', 'Montserrat', sans-serif;
}

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

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; }
a{ color:var(--primary); text-decoration:none; }
a:hover{ color:var(--primary-hover); }
h1,h2,h3{ margin:0; letter-spacing:-.03em; }
:focus-visible{ outline:3px solid rgba(27,102,201,.55); outline-offset:2px; }

.skip-link{
  position:absolute; left:16px; top:-6rem; z-index:20;
  background:var(--surface); color:var(--ink);
  padding:10px 16px; border-radius:var(--radius); box-shadow:var(--sh-bar);
  transition:top .15s ease;
}
.skip-link:focus{ top:16px; }

.shell{ position:relative; overflow:hidden; }
.inner{ max-width:var(--maxw); margin-inline:auto; padding-inline:40px; }
.content{ position:relative; z-index:1; }
.veil{ background:var(--veil); }

/* ------------------------- 1. The page-wide field ------------------------- */
.field{ position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.field-par{ position:absolute; inset:0; will-change:transform; }
.field-par-a{ transition:transform .5s cubic-bezier(.22,.9,.3,1); }
.field-par-b{ transition:transform .7s cubic-bezier(.22,.9,.3,1); }
.field-scroll{ position:absolute; inset:0; will-change:transform; }
.field-tile{ position:absolute; inset:-8%; background-image:url('../assets/img/field-dots.png'); }
.field-tile-a{ background-size:640px 640px; opacity:.62; animation:nfDriftA 42s ease-in-out infinite alternate; }
.field-tile-b{ background-size:880px 880px; opacity:.34; mix-blend-mode:multiply; animation:nfDriftB 57s ease-in-out infinite alternate; }
.field-glow{
  position:absolute; left:0; top:0;
  width:520px; height:520px; margin:-260px 0 0 -260px;
  border-radius:50%;
  background:radial-gradient(circle closest-side, rgba(255,255,255,.72), rgba(255,255,255,.28) 46%, rgba(255,255,255,0) 74%);
  opacity:0; transition:opacity .5s ease; will-change:transform;
}

/* ------------------------------- Top bar --------------------------------- */
.site-header{
  position:absolute;
  top:20px; left:0; right:0;
  width:calc(100% - 52px);
  max-width:calc(var(--maxw) - 52px);
  margin-inline:auto;
  z-index:6;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding:11px 12px 11px 20px;
  border:1px solid rgba(255,255,255,.9);
  border-radius:var(--radius);
  background:linear-gradient(180deg, rgba(255,255,255,.88), rgba(255,255,255,.66));
  -webkit-backdrop-filter:blur(16px) saturate(165%);
  backdrop-filter:blur(16px) saturate(165%);
  box-shadow:var(--sh-bar);
}
.brand-logo{ height:38px; width:auto; display:block; }

/* Pinned state: js/site.js adds .is-pinned once the page scrolls past the top,
   and the bar drops back in, fixed to the viewport. */
.site-header.is-pinned{
  position:fixed;
  top:12px; left:0; right:0;
  width:calc(100% - 52px);
  max-width:calc(var(--maxw) - 52px);
  margin-inline:auto;
  z-index:60;
  background:linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.8));
  box-shadow:0 16px 34px -20px rgba(18,42,72,.5);
  animation:nfBarDrop .34s cubic-bezier(.16,1,.3,1) both;
}
@keyframes nfBarDrop{
  from{ transform:translateY(-130%); opacity:0; }
  to{ transform:none; opacity:1; }
}
@media (prefers-reduced-motion: reduce){
  .site-header.is-pinned{ animation:none; }
}
.site-nav{ display:flex; align-items:center; gap:6px; font-weight:600; font-size:13.5px; line-height:1; color:#5D6874; }
.site-nav a:not(.btn-demo){
  color:inherit; padding:8px 11px; border-radius:2px;
  transition:background .16s ease, color .16s ease, box-shadow .16s ease;
}
.site-nav a:not(.btn-demo):hover{
  background:rgba(255,255,255,.88); color:var(--ink);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95), 0 1px 2px rgba(18,42,72,.12);
}
/* current package */
.site-nav a[aria-current="page"]{ color:var(--primary); box-shadow:inset 0 -2px 0 var(--primary); }
.btn-demo{
  padding:11px 17px; border-radius:2px; color:#fff;
  background:linear-gradient(180deg,#3A434D,#252C34);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22), 0 1px 2px rgba(18,42,72,.26), 0 9px 18px -8px rgba(18,42,72,.48);
  transition:transform .16s ease, box-shadow .16s ease, background .16s ease;
}
.btn-demo:hover{
  color:#fff; background:linear-gradient(180deg,#2E7CDC,var(--primary)); transform:translateY(-1px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.30), 0 2px 4px rgba(18,42,72,.24), 0 14px 24px -8px rgba(27,102,201,.55);
}

/* --------------------------------- Hero ---------------------------------- */
.hero{ position:relative; padding:112px 0 48px; overflow:hidden; }
/* The hero has no field of its own — only scrims, so the shared field reads
   through it while the headline stays legible. */
.hero-layer{ position:absolute; inset:0; }
.hero-veil{
  background:linear-gradient(100deg,
    rgba(246,250,252,.86) 0%, rgba(246,250,252,.60) 40%, rgba(246,250,252,.30) 72%, rgba(246,250,252,.16) 100%);
}
.hero-scrim{
  background:
    radial-gradient(118% 84% at 2% 26%, rgba(249,252,253,.96) 0%, rgba(249,252,253,.80) 40%, rgba(249,252,253,0) 78%),
    radial-gradient(58% 68% at 94% 24%, rgba(249,252,253,.94) 0%, rgba(249,252,253,.74) 48%, rgba(249,252,253,0) 84%),
    linear-gradient(180deg, rgba(249,252,253,0) 58%, rgba(249,252,253,.72) 100%);
}
.hero-sheen{
  position:absolute; top:0; bottom:0; left:0; width:34%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
  animation:nfSheen 9s cubic-bezier(.4,0,.6,1) infinite;
}
.hero-body{ position:relative; animation:nfRise .6s cubic-bezier(.16,1,.3,1) both; }

.crumbline{ display:flex; align-items:center; gap:14px; margin-bottom:30px; }
.crumb{
  display:inline-flex; align-items:center; gap:7px;
  padding:6px 11px;
  background:rgba(247,250,252,.86);
  box-shadow:0 0 0 1px rgba(27,102,201,.16);
  font-weight:600; font-size:10.5px; line-height:1;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink);
  transition:transform .2s cubic-bezier(.16,1,.3,1), box-shadow .2s ease, background .2s ease, color .2s ease;
}
/* pops LEFT — the direction carries the meaning */
.crumb:hover,
.crumb:focus-visible{
  transform:translateX(-3px); background:#fff; color:var(--primary);
  box-shadow:0 0 0 1px rgba(27,102,201,.5), 0 8px 16px -6px rgba(18,42,72,.28);
}
.eyebrow{
  font-weight:600; font-size:10.5px; line-height:1;
  letter-spacing:.18em; text-transform:uppercase; color:var(--primary);
}
.hero-grid{ display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:56px; align-items:end; }
.hero h1{ font-size:58px; font-weight:700; line-height:1.02; letter-spacing:-.035em; max-width:22ch; }
.hero h1 .light{ font-weight:400; color:#7C8894; }
.hero-lead{ margin:0 0 24px; font-size:16.5px; line-height:1.55; color:#39414B; text-wrap:pretty; }
.hero-actions{ display:flex; gap:10px; }

.btn{
  display:inline-flex; align-items:center; padding:14px 20px; border-radius:2px;
  font-weight:600; font-size:14.5px; line-height:1;
  transition:background .16s ease, color .16s ease;
}
.btn-solid{ background:var(--ink); color:#F5F5F1; }
.btn-solid:hover{ background:var(--primary); color:#fff; }
.btn-ghost{ border:1px solid var(--ink); color:var(--ink); }
.btn-ghost:hover{ background:var(--ink); color:#F5F5F1; }

/* --------------------- 2. The scroll sequence ---------------------------- */
.seq{ position:relative; height:340vh; }
.seq-sticky{ position:sticky; top:0; height:100vh; overflow:hidden; }
.seq-wash{
  position:absolute; inset:0;
  background:radial-gradient(76% 62% at 50% 46%, rgba(255,255,255,.94) 0%, rgba(255,255,255,.72) 46%, rgba(255,255,255,.42) 78%);
}
.seq-body{
  position:relative; height:100%;
  display:flex; flex-direction:column; justify-content:center; gap:26px;
  max-width:var(--maxw); margin-inline:auto; padding-inline:40px;
}
.readout{
  display:flex; align-items:baseline; justify-content:space-between; gap:24px;
  padding-bottom:18px; border-bottom:1px solid var(--rule);
  font-weight:600; font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted-3);
}
.readout-nums{ display:flex; gap:22px; }
.readout b{ color:var(--spine); font-weight:600; }
.stage{ display:grid; grid-template-columns:180px minmax(0,1fr) 440px; gap:44px; align-items:center; }

/* 3. vertical zig-zag position rail */
.rail{ position:relative; height:430px; }
.rail svg{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.vlabel{
  position:absolute; transform:translate(-50%,-50%); opacity:.32;
  transition:opacity .35s ease, transform .35s cubic-bezier(.16,1,.3,1);
}
.vlabel span{
  display:block; padding:5px 10px; white-space:nowrap;
  background:#fff; box-shadow:0 0 0 1px rgba(11,74,140,.22);
  font-weight:600; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--spine);
}

.acts{ position:relative; height:250px; }
.act{ position:absolute; inset:0; opacity:0; will-change:transform,opacity; }
.act .when{
  font-weight:600; font-size:10.5px; line-height:1;
  letter-spacing:.2em; text-transform:uppercase; color:var(--primary); margin-bottom:18px;
}
.act h3{
  margin:0 0 14px;
  font-family:var(--font-display); font-weight:700; font-stretch:125%;
  font-size:34px; line-height:1.06; letter-spacing:-.012em; color:var(--ink-strong);
}
.act p{ margin:0; font-size:16px; line-height:1.6; color:var(--muted-2); max-width:40ch; }

.visuals{ position:relative; height:430px; }
.visual{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  opacity:0; will-change:transform,opacity;
}
.kiosk{
  width:264px; padding:22px 20px 24px; border-radius:4px;
  background:linear-gradient(180deg,#39434E,#242B33);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16), 0 26px 50px -22px rgba(18,42,72,.6);
}
.kiosk-top{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:16px; }
.kiosk-key{ font-weight:600; font-size:9.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--accent); }
.kiosk-time{ font-weight:600; font-size:15px; color:#fff; }
.pin{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:16px; }
.pin span{
  display:flex; align-items:center; justify-content:center; height:44px; border-radius:2px;
  background:rgba(255,255,255,.10);
  font-weight:600; font-size:15px; color:#E6EEF6;
  transition:background .18s ease, transform .18s ease;
}
.chip-in{
  display:flex; align-items:center; justify-content:center; padding:12px; border-radius:2px;
  background:var(--primary);
  font-weight:600; font-size:12.5px; letter-spacing:.12em; text-transform:uppercase; color:#fff;
  opacity:.35; transition:opacity .3s ease;
}
.card{
  border-radius:4px; border:1px solid var(--border);
  background:linear-gradient(180deg,#fff,var(--surface-2));
  box-shadow:var(--sh-card);
}
.card-visitor{ width:300px; padding:22px 22px 24px; }
.card-sheet{ width:360px; padding:22px 22px 20px; }
.card-top{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:18px; }
.card-key{ font-weight:600; font-size:9.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--primary); }
.card-when{ font-weight:600; font-size:12px; color:#8A95A1; }
.vform{ display:grid; gap:10px; margin-bottom:18px; }
.vrow{ display:grid; grid-template-columns:52px 1fr; gap:10px; align-items:baseline; }
.vrow dt{ margin:0; font-weight:600; font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:#8A95A1; }
.vrow dd{ margin:0; font-weight:500; font-size:14px; border-bottom:1px solid #E4E9EF; }
.evac{
  display:flex; align-items:center; justify-content:space-between; padding:11px 13px; border-radius:2px;
  background:#EAF2FB; box-shadow:inset 0 0 0 1px rgba(27,102,201,.24);
  opacity:.35; transition:opacity .3s ease;
}
.evac span{ font-weight:600; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--spine); }
.evac b{ font-weight:600; font-size:13px; color:var(--spine); }
.ts-row{ display:grid; grid-template-columns:38px 1fr 44px; gap:12px; align-items:center; padding:9px 0; border-bottom:1px solid #EDF1F5; }
.ts-day{ font-weight:600; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:#8A95A1; }
.ts-track{ position:relative; display:block; height:7px; background:#EDF1F5; }
.ts-fill{ position:absolute; inset:0; transform:scaleX(0); transform-origin:left center; background:var(--primary); }
.ts-hrs{ font-weight:500; font-size:12px; color:var(--muted-2); text-align:right; }
.ts-foot{ display:flex; align-items:center; justify-content:space-between; padding-top:14px; }
.chip-approve{
  padding:8px 12px; border-radius:2px; background:var(--primary);
  font-weight:600; font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:#fff;
  opacity:.3; transition:opacity .3s ease;
}
.ts-total{ font-weight:600; font-size:22px; letter-spacing:-.02em; color:var(--ink-strong); }

/* ---------------------------- Section heads ------------------------------ */
.band{ position:relative; padding:56px 0 10px; }
.band-first{ padding-top:60px; }
.section-head{ padding-top:20px; border-top:1px solid var(--rule); }
.section-meta{ display:flex; align-items:baseline; justify-content:space-between; gap:24px; }
.section-kicker{ font-weight:600; font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted-3); }
.section-titles{ display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:40px; align-items:end; margin-top:26px; }
.section-titles h2{
  font-family:var(--font-display); font-weight:700; font-stretch:125%;
  font-size:38px; line-height:1.04; letter-spacing:-.012em; color:var(--ink-strong);
}
.section-titles p{ margin:0 0 4px; font-size:15px; line-height:1.55; color:var(--muted-2); }

/* -------------------------------- Plates --------------------------------- */
.plate-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:26px; }
.plate{
  position:relative; display:flex; flex-direction:column;
  padding:26px 24px 24px;
  border:1px solid var(--border); border-radius:var(--radius);
  background:linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%);
  color:var(--ink); box-shadow:var(--sh-plate);
  transition:transform .2s cubic-bezier(.16,1,.3,1), border-color .2s ease, box-shadow .2s ease;
}
.plate:hover,
.plate:focus-visible{
  transform:translateY(-4px); border-color:rgba(27,102,201,.45);
  box-shadow:var(--sh-plate-hover); color:var(--ink);
}
.plate-stub{ display:block; width:2px; height:18px; background:var(--primary); margin-bottom:16px; }
.plate-keyline{ display:flex; align-items:center; gap:9px; margin-bottom:12px; }
.plate-key{ font-weight:600; font-size:11px; letter-spacing:.17em; text-transform:uppercase; color:var(--primary); }
.demo-chip{
  font-weight:600; font-size:9.5px; letter-spacing:.1em; text-transform:uppercase;
  color:#0A1C33; background:var(--accent); padding:3px 7px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55);
}
.plate h3{ margin:0 0 9px; font-size:20px; font-weight:700; line-height:1.25; letter-spacing:-.02em; }
.plate p{ margin:0 0 20px; font-size:15px; line-height:1.5; color:var(--muted); }
.plate-more{ margin-top:auto; font-weight:600; font-size:13.5px; color:var(--primary); }

/* Hover-revealed holographic sigil — the module's own icon, stroked with the
   iridescent gradient rather than filled. */
.holo{
  position:absolute; top:20px; right:20px; pointer-events:none; opacity:0;
  filter:saturate(1.25) drop-shadow(0 1px 4px rgba(120,90,220,.20));
  transition:opacity .34s ease;
}
.plate:hover .holo,
.plate:focus-visible .holo{ opacity:1; }
.holo svg{ display:block; animation:holoHue 9s linear infinite, holoFloat 5s ease-in-out infinite alternate; }

/* --------------------------------- Joins --------------------------------- */
/* Wide rows, not more cards: the pairing is the argument of a package page, so
   it should be visible before the sentence is read. */
.joins{ display:grid; margin-top:26px; border-top:1px solid var(--border); }
.join{ display:grid; grid-template-columns:300px minmax(0,1fr); gap:40px; align-items:start; padding:26px 0; border-bottom:1px solid var(--border); }
.pair{ display:flex; align-items:center; gap:10px; }
.pair span{
  padding:6px 10px; background:#F2F6FA; box-shadow:0 0 0 1px rgba(11,74,140,.18);
  font-weight:600; font-size:11.5px; letter-spacing:.02em;
}
.pair i{ font-style:normal; font-weight:600; font-size:13px; color:var(--primary); }
.join h3{ margin:0 0 8px; font-size:21px; font-weight:700; line-height:1.25; letter-spacing:-.02em; }
.join p{ margin:0; font-size:15.5px; line-height:1.55; color:var(--muted); max-width:62ch; }

/* --------------------------------- Close --------------------------------- */
.close{ position:relative; padding:56px 0 66px; }
.close-grid{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:40px; align-items:end; padding-top:34px; border-top:2px solid var(--ink); }
.close-grid h2{
  margin:0 0 12px;
  font-family:var(--font-display); font-weight:700; font-stretch:125%;
  font-size:32px; line-height:1.06; letter-spacing:-.012em; color:var(--ink-strong);
}
.close-grid p{ margin:0; font-size:15.5px; line-height:1.55; color:var(--muted-2); max-width:56ch; }
.close-actions{ display:flex; gap:10px; }

.site-footer{
  position:relative; z-index:1;
  background:rgba(255,255,255,.86);
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding:24px 40px 30px; border-top:1px solid var(--border);
}
.site-footer img{ height:22px; width:auto; display:block; opacity:.75; }
.site-footer div{ display:flex; align-items:center; gap:20px; font-weight:500; font-size:11.5px; line-height:1; letter-spacing:.04em; color:#5E6874; }

/* --------------------------------- Motion -------------------------------- */
@keyframes nfRise{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:translateY(0); } }
@keyframes nfDriftA{ from{ transform:scale(1.04) translate3d(0,0,0); } to{ transform:scale(1.12) translate3d(-2.6%,-1.8%,0); } }
@keyframes nfDriftB{ from{ transform:scaleX(-1) scale(1.14) translate3d(2.2%,1.2%,0); } to{ transform:scaleX(-1) scale(1.05) translate3d(-1.6%,-2.4%,0); } }
@keyframes nfSheen{ 0%{ transform:translateX(-30%); opacity:0; } 35%{ opacity:.55; } 100%{ transform:translateX(115%); opacity:0; } }
@keyframes holoHue{ to{ filter:hue-rotate(360deg); } }
@keyframes holoFloat{ to{ transform:translateY(-3px); } }

/* Reduced motion: no drift, no sequence. The JS bails too, and the acts are
   revealed statically by the rule below so no content is lost. */
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition-duration:.001ms !important; }
  .seq{ height:auto; }
  .seq-sticky{ position:static; height:auto; padding:56px 0; }
  .rail{ display:none; }
  .stage{ grid-template-columns:1fr; gap:0; }
  .acts, .visuals{ display:contents; }
  .act, .visual{ position:static; opacity:1 !important; margin-bottom:32px; }
  .act[data-act="0"]{ order:1; } .visual[data-visual="0"]{ order:2; }
  .act[data-act="1"]{ order:3; } .visual[data-visual="1"]{ order:4; }
  .act[data-act="2"]{ order:5; } .visual[data-visual="2"]{ order:6; }
  .ts-fill{ transform:scaleX(1) !important; }
}

/* -------------------------------- Responsive ----------------------------- */
@media (max-width:1100px){
  /* Below this the three-column stage cannot hold the rail and a 440px device,
     so the sequence degrades to plain stacked sections and the JS bails.
     .acts/.visuals become display:contents and each act is paired with its own
     device using order -- otherwise DOM order gives three paragraphs followed
     by three unlabelled cards, and the story reads out of sequence. */
  .seq{ height:auto; }
  .seq-sticky{ position:static; height:auto; padding:40px 0; }
  .rail{ display:none; }
  .stage{ grid-template-columns:1fr; gap:0; }
  .acts, .visuals{ display:contents; }
  .act, .visual{ position:static; opacity:1 !important; transform:none !important; }
  .act[data-act="0"]{ order:1; } .visual[data-visual="0"]{ order:2; }
  .act[data-act="1"]{ order:3; } .visual[data-visual="1"]{ order:4; }
  .act[data-act="2"]{ order:5; } .visual[data-visual="2"]{ order:6; }
  .act{ margin-bottom:22px; }
  .visual{ margin-bottom:44px; }
  .ts-fill{ transform:scaleX(1) !important; }
  .chip-in, .evac, .chip-approve{ opacity:1 !important; }
  .hero-grid{ grid-template-columns:1fr; gap:32px; align-items:start; }
  .hero h1{ font-size:46px; }
  .section-titles{ grid-template-columns:1fr; gap:12px; }
  .section-titles h2{ font-size:32px; }
  .plate-grid{ grid-template-columns:repeat(2,1fr); }
  .join{ grid-template-columns:1fr; gap:14px; }
  .close-grid{ grid-template-columns:1fr; }
}
@media (max-width:640px){
  .site-header{ width:calc(100% - 28px); padding:10px 10px 10px 14px; }
  .site-header.is-pinned{ width:calc(100% - 28px); top:8px; }
  .brand-logo{ height:30px; }
  .site-nav a:not(.btn-demo){ display:none; }
  .inner, .seq-body{ padding-inline:22px; }
  .hero{ padding:104px 0 36px; }
  .hero h1{ font-size:36px; }
  .hero-actions{ flex-direction:column; align-items:stretch; }
  .btn{ justify-content:center; }
  .plate-grid{ grid-template-columns:1fr; }
  .close-actions{ flex-direction:column; }
  .site-footer{ flex-direction:column; align-items:flex-start; gap:14px; padding-inline:22px; }
  .site-footer div{ flex-direction:column; align-items:flex-start; gap:8px; }
}