/* ==========================================================
   Second Read — an independent AI read on any US ticker
   An Antares product · antares.com

   Quiet paper, two soft inks. Indigo carries the model,
   apricot marks the thing worth watching. Motion is used
   once per idea and never twice on the same screen.
   ========================================================== */

:root{
  /* ── ink ── */
  --paper:       #F0F1F8;
  --paper-lift:  #F8F9FD;
  --card:        #FFFFFF;
  --ink:         #1B1D3A;
  --ink-70:      #52577A;
  --ink-45:      #8288A8;
  --indigo:      #4F4AD6;
  --indigo-deep: #35309E;
  --wash:        #E9E9FA;
  --apricot:     #F0A077;
  --apricot-wash:#FCEBE0;
  --rose:        #D9536C;

  --line:        rgba(27,29,58,.11);
  --line-soft:   rgba(27,29,58,.055);

  /* ── measure ── */
  --col:  520px;
  --pad:  24px;
  --r-lg: 20px;
  --r-md: 13px;

  /* ── motion ── */
  --ease:     cubic-bezier(.22,.68,.24,1);
  --ease-out: cubic-bezier(.16,1,.3,1);

  --font-display:"Bricolage Grotesque","Public Sans",system-ui,sans-serif;
  --font-body:   "Public Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --font-mono:   "JetBrains Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;
}

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

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

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:15px;
  font-weight:400;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }

a{ color:var(--indigo); text-decoration:none; }
a:hover{ text-decoration:underline; text-underline-offset:3px; }

::selection{ background:var(--indigo); color:#fff; }

:focus-visible{
  outline:2px solid var(--indigo);
  outline-offset:3px;
  border-radius:5px;
}

.sprite{ position:absolute; width:0; height:0; overflow:hidden; }

.ic{
  width:1em; height:1em;
  flex:none;
  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
}

/* ── the field: a survey grid under two soft light wells ─ */

.field{
  position:fixed;
  inset:0;
  z-index:-1;
  overflow:hidden;
  pointer-events:none;
  background:
    radial-gradient(60vmax 46vmax at 82% -8%,  rgba(79,74,214,.11), transparent 68%),
    radial-gradient(52vmax 40vmax at 6% 104%, rgba(240,160,119,.10), transparent 68%);
}

/* a measuring grid, faded out at the edges so it never boxes the page in */
.field::before{
  content:"";
  position:absolute;
  inset:-60px;
  background-image:
    linear-gradient(to right,  rgba(79,74,214,.075) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(79,74,214,.075) 1px, transparent 1px),
    linear-gradient(to right,  rgba(79,74,214,.16)  1px, transparent 1px),
    linear-gradient(to bottom, rgba(79,74,214,.16)  1px, transparent 1px);
  background-size:48px 48px, 48px 48px, 240px 240px, 240px 240px;
  -webkit-mask-image:radial-gradient(120vmin 92vmin at 50% 26%, #000 0%, rgba(0,0,0,.45) 46%, transparent 76%);
          mask-image:radial-gradient(120vmin 92vmin at 50% 26%, #000 0%, rgba(0,0,0,.45) 46%, transparent 76%);
  animation:mesh 120s linear infinite;
}

/* one slow band of light crossing the grid — the only ambient motion */
.field::after{
  content:"";
  position:absolute;
  left:-10%; right:-10%;
  height:34vh;
  background:linear-gradient(180deg,
    rgba(79,74,214,0), rgba(79,74,214,.055) 50%, rgba(79,74,214,0));
  animation:fieldPass 26s ease-in-out infinite;
}

/* ── the column ────────────────────────────────────────── */

.sheet{
  position:relative;
  width:100%;
  max-width:var(--col);
  margin:0 auto;
}

.band{ padding-inline:var(--pad); }
.band-hero    { padding-top:26px; padding-bottom:34px; }
.band-tape    { padding-top:0;    padding-bottom:22px; padding-inline:0; }
.band-byline  { padding-top:0;    padding-bottom:38px; }
.band-lenses  { padding-top:8px;  padding-bottom:40px; }
.band-specimen{ padding-top:4px;  padding-bottom:38px; }
.band-figures { padding-top:0;    padding-bottom:36px; }
.band-cta     { padding-top:0;    padding-bottom:36px; }
.band-foot    { padding-top:24px; padding-bottom:38px; border-top:1px solid var(--line-soft); }

/* ── brand ─────────────────────────────────────────────── */

.topline{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:30px;
}

.brand{ display:inline-flex; align-items:center; gap:10px; }

/* the mark: two plates, one a little off true — the only
   place the print idea is stated outright */
.brand-mark{
  position:relative;
  width:24px; height:27px;
  flex:none;
}
.brand-mark i{
  position:absolute;
  width:17px; height:21px;
  border-radius:3px;
  border:1.6px solid var(--apricot);
  top:0; left:0;
  transition:transform .55s var(--ease-out);
}
.brand-mark i:last-child{
  border-color:var(--indigo);
  top:6px; left:7px;
}
.brand:hover .brand-mark i:first-child{ transform:translate(2px,2px); }
.brand:hover .brand-mark i:last-child { transform:translate(-2px,-2px); }

.brand-text{ display:flex; flex-direction:column; line-height:1.15; }
.brand-name{
  font-family:var(--font-display);
  font-size:16.5px;
  font-weight:400;
  letter-spacing:-.02em;
  color:var(--ink-70);
}
.brand-name b{ font-weight:700; color:var(--ink); }
.brand-by{
  font-family:var(--font-mono);
  font-size:9px;
  font-weight:400;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--ink-45);
}

.chip{
  font-family:var(--font-mono);
  font-size:9.5px;
  font-weight:500;
  letter-spacing:.16em;
  text-transform:uppercase;
  padding:5px 10px;
  border-radius:100px;
  color:var(--indigo-deep);
  background:var(--wash);
}

/* small register glyph, used as a divider */
.reg{
  position:relative;
  display:inline-block;
  width:7px; height:7px;
  flex:none;
  vertical-align:0;
  opacity:.7;
}
.reg::before,.reg::after{ content:""; position:absolute; background:var(--apricot); }
.reg::before{ left:0; right:0; top:50%; height:1.3px; margin-top:-.65px; }
.reg::after { top:0; bottom:0; left:50%; width:1.3px; margin-left:-.65px; }

/* ── type roles ────────────────────────────────────────── */

.eyebrow{
  margin:0 0 13px;
  display:flex;
  align-items:center;
  gap:8px;
  font-family:var(--font-mono);
  font-size:10px;
  font-weight:500;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--ink-45);
}
.eyebrow-mid{ justify-content:center; }

.display{
  margin:0 0 16px;
  font-family:var(--font-display);
  font-size:clamp(34px,9.4vw,44px);
  font-weight:700;
  line-height:1.08;
  letter-spacing:-.035em;
}
.display .line{
  display:block;
  overflow:hidden;
  padding-bottom:.1em;
  margin-bottom:-.06em;
}
.display .line > span{ display:block; }

.display em{
  position:relative;
  font-style:normal;
  color:var(--indigo);
}
/* a printed rule, not a highlighter block */
.display em::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:.04em;
  height:2px;
  border-radius:2px;
  background:var(--apricot);
  transform-origin:left;
  transform:scaleX(0);
}

.heading{
  margin:0 0 13px;
  font-family:var(--font-display);
  font-size:25px;
  font-weight:700;
  line-height:1.14;
  letter-spacing:-.032em;
}
.heading-card  { font-size:23px; margin-bottom:10px; }
.heading-result{ font-size:23px; margin:0 0 9px; text-align:center; }

.lede{
  margin:0;
  font-size:15px;
  font-weight:300;
  color:var(--ink-70);
}

.sub{
  margin:0 0 22px;
  font-size:13px;
  font-weight:300;
  line-height:1.62;
  color:var(--ink-45);
}

/* ── hero stage ────────────────────────────────────────── */

.stage{
  position:relative;
  margin:26px 0 24px;
  display:grid;
  place-items:center;
  isolation:isolate;
}

/* the art sits on a plate so the HUD and the scan line share its box */
.stage-plate{
  position:relative;
  display:block;
  translate:0 var(--drift,0px);
  transition:translate .3s linear;
  animation:hover 13s ease-in-out infinite;
}

.stage-art{
  width:auto;
  max-width:230px;
  max-height:280px;
  filter:drop-shadow(0 14px 22px rgba(79,74,214,.16));
}

/* the scan line: one bright edge, a short trail, then a long rest */
.stage-scan{
  position:absolute;
  left:-8px; right:-8px;
  top:0;
  height:2px;
  border-radius:2px;
  background:var(--indigo);
  box-shadow:0 0 10px 1px rgba(79,74,214,.55),
             0 14px 22px -6px rgba(79,74,214,.28);
  animation:scanPass 6.5s cubic-bezier(.5,0,.5,1) infinite;
}
.stage-scan::after{
  content:"";
  position:absolute;
  left:0; right:0; top:2px;
  height:36px;
  background:linear-gradient(180deg, rgba(79,74,214,.13), transparent);
}

/* targeting brackets — thin, and they only draw once on entry */
.hud{
  position:absolute;
  width:14px; height:14px;
  border:1.5px solid var(--indigo);
  opacity:.55;
}
.hud-tl{ top:-9px;    left:-9px;  border-right:0; border-bottom:0; border-radius:3px 0 0 0; }
.hud-tr{ top:-9px;    right:-9px; border-left:0;  border-bottom:0; border-radius:0 3px 0 0; }
.hud-bl{ bottom:-9px; left:-9px;  border-right:0; border-top:0;    border-radius:0 0 0 3px; }
.hud-br{ bottom:-9px; right:-9px; border-left:0;  border-top:0;    border-radius:0 0 3px 0; }

/* a survey grid behind the art, tighter than the page grid */
.stage-grid{
  position:absolute;
  z-index:-2;
  top:50%; left:50%;
  translate:-50% -50%;
  width:min(96%,340px);
  aspect-ratio:1;
  background-image:
    linear-gradient(to right,  rgba(79,74,214,.13) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(79,74,214,.13) 1px, transparent 1px);
  background-size:26px 26px;
  -webkit-mask-image:radial-gradient(circle, #000 8%, transparent 66%);
          mask-image:radial-gradient(circle, #000 8%, transparent 66%);
}

.stage-halo{
  position:absolute;
  z-index:-1;
  top:50%; left:50%;
  translate:-50% -50%;
  width:min(84%,300px);
  aspect-ratio:1;
  border-radius:50%;
  background:radial-gradient(circle, rgba(79,74,214,.13) 0%, rgba(79,74,214,0) 64%);
  animation:pulse 7s ease-in-out infinite;
}

/* a reticle ring with one marker running its rim */
.stage-orbit{
  position:absolute;
  z-index:-1;
  top:50%; left:50%;
  translate:-50% -50%;
  width:min(80%,286px);
  aspect-ratio:1;
  border-radius:50%;
  border:1px dashed rgba(79,74,214,.22);
  animation:turn 52s linear infinite;
}
.stage-orbit i{
  position:absolute;
  top:-3.5px; left:50%;
  width:7px; height:7px;
  margin-left:-3.5px;
  border-radius:50%;
  background:var(--apricot);
  box-shadow:0 0 0 4px rgba(240,160,119,.2);
}

/* signal pins — the names of what's being read, not fabricated values */
.pin{
  position:absolute;
  padding:3px 8px;
  border-radius:100px;
  background:rgba(255,255,255,.9);
  border:1px solid rgba(79,74,214,.2);
  font-family:var(--font-mono);
  font-size:9px;
  font-weight:500;
  letter-spacing:.14em;
  color:var(--indigo-deep);
  backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);
  animation:pinIn 8s ease-in-out infinite;
}
.pin-a{ top:12%;  left:2%;   animation-delay:0s; }
.pin-b{ top:46%;  right:0%;  animation-delay:2.6s; }
.pin-c{ bottom:12%; left:6%; animation-delay:5.2s; }

/* ── console ───────────────────────────────────────────── */

.console{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:19px 17px 16px;
  box-shadow:0 18px 34px -30px rgba(27,29,58,.6);
}

.console-label{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:9px;
  font-family:var(--font-mono);
  font-size:10px;
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-45);
}
.console-label .ic{ font-size:12px; color:var(--indigo); }

.console-input{
  width:100%;
  padding:15px 16px;
  border:1px solid var(--line);
  border-radius:var(--r-md);
  background:var(--paper-lift);
  color:var(--ink);
  font-family:var(--font-mono);
  font-size:18px;
  font-weight:700;
  letter-spacing:.07em;
  text-transform:uppercase;
  transition:border-color .22s, background .22s, box-shadow .22s;
}
.console-input::placeholder{
  font-family:var(--font-body);
  font-size:14.5px;
  font-weight:400;
  letter-spacing:.01em;
  text-transform:none;
  color:var(--ink-45);
}
.console-input:focus{
  outline:none;
  background:var(--card);
  border-color:var(--indigo);
  box-shadow:0 0 0 3px rgba(79,74,214,.12);
}
.console-input.is-bad{
  border-color:var(--rose);
  box-shadow:0 0 0 3px rgba(217,83,108,.13);
  animation:nudge .38s var(--ease);
}

.console-error{
  margin:8px 2px 0;
  font-size:12.5px;
  font-weight:500;
  color:var(--rose);
}

.console-note{
  margin:12px 0 0;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  font-size:11.5px;
  color:var(--ink-45);
}
.console-note .ic{ font-size:12px; color:var(--indigo); }

/* ── buttons ───────────────────────────────────────────── */

.btn{
  position:relative;
  overflow:hidden;
  width:100%;
  margin-top:13px;
  padding:16px 18px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  border:0;
  border-radius:var(--r-md);
  font-family:var(--font-body);
  font-size:15px;
  font-weight:600;
  color:#fff;
  cursor:pointer;
  transition:transform .3s var(--ease-out), box-shadow .3s var(--ease-out), filter .3s;
}
/* one slow pass of light, long rest between */
.btn::after{
  content:"";
  position:absolute;
  top:0; bottom:0; left:0;
  width:34%;
  pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.16),transparent);
  transform:translateX(-190%) skewX(-14deg);
  animation:sweep 6.5s ease-in-out infinite;
}
.btn:active{ transform:translateY(0) scale(.99); }

.btn-face{ position:relative; }

.btn-primary{
  background:var(--ink);
  box-shadow:0 12px 24px -16px rgba(27,29,58,.85);
}
.btn-primary:hover,.btn-primary:focus-visible{
  transform:translateY(-2px);
  box-shadow:0 18px 30px -16px rgba(27,29,58,.9);
}

.btn-wa{
  background:#25A85C;
  box-shadow:0 12px 24px -16px rgba(37,168,92,.9);
}
.btn-wa:hover,.btn-wa:focus-visible{
  transform:translateY(-2px);
  box-shadow:0 18px 30px -16px rgba(37,168,92,.95);
  filter:brightness(1.05);
}

.btn-wa-icon{ width:21px; height:21px; flex:none; object-fit:contain; }

.btn-close{
  position:absolute;
  top:11px; right:11px;
  width:32px; height:32px;
  display:grid;
  place-items:center;
  border:0;
  border-radius:50%;
  background:var(--paper);
  color:var(--ink-45);
  font-size:14px;
  cursor:pointer;
  transition:color .2s, background .2s;
}
.btn-close:hover{ color:var(--ink); background:var(--wash); }

/* ── ticker tape ───────────────────────────────────────── */

.tape-label{
  margin:0 0 9px;
  padding-inline:var(--pad);
  font-family:var(--font-mono);
  font-size:9.5px;
  font-weight:500;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--ink-45);
}

.tape{
  position:relative;
  overflow:hidden;
  padding:8px 0;
  border-top:1px solid var(--line-soft);
  border-bottom:1px solid var(--line-soft);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);
}

.tape-run{
  display:flex;
  width:max-content;
  gap:24px;
  padding-left:24px;
  animation:roll 42s linear infinite;
}
.tape:hover .tape-run{ animation-play-state:paused; }

.tape-item{
  position:relative;
  font-family:var(--font-mono);
  font-size:12px;
  font-weight:500;
  letter-spacing:.1em;
  color:var(--ink-45);
  white-space:nowrap;
}
.tape-item::after{
  content:"";
  position:absolute;
  top:50%; right:-14px;
  width:3px; height:3px;
  margin-top:-1.5px;
  border-radius:50%;
  background:var(--apricot);
  opacity:.6;
}

/* ── Antares byline ────────────────────────────────────── */

.byline{
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding:14px 16px;
  border-radius:var(--r-md);
  background:var(--card);
  border:1px solid var(--line-soft);
}

.byline-mark{
  flex:none;
  width:30px; height:30px;
  display:grid;
  place-items:center;
  border-radius:9px;
  background:var(--wash);
  color:var(--indigo-deep);
  font-family:var(--font-display);
  font-size:14px;
  font-weight:700;
  letter-spacing:-.03em;
}

.byline-text{
  margin:0;
  font-size:12.5px;
  line-height:1.6;
  font-weight:300;
  color:var(--ink-70);
}
.byline-text b{
  font-weight:600;
  color:var(--ink);
}

/* ── the four lenses ───────────────────────────────────── */

.lenses{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:11px;
}

.lens{
  position:relative;
  padding:17px 15px 16px;
  border-radius:var(--r-lg);
  background:var(--card);
  border:1px solid var(--line-soft);
  transition:transform .35s var(--ease-out), box-shadow .35s var(--ease-out);
}
.lens:hover{
  transform:translateY(-2px);
  box-shadow:0 18px 28px -26px rgba(27,29,58,.7);
}

.lens-icon{
  display:grid;
  place-items:center;
  width:30px; height:30px;
  border-radius:9px;
  background:var(--wash);
  color:var(--indigo-deep);
  font-size:15px;
}

.gauge{
  position:absolute;
  top:14px; right:13px;
  width:42px; height:42px;
  display:grid;
  place-items:center;
}
.gauge svg{
  position:absolute;
  inset:0;
  width:100%; height:100%;
  transform:rotate(-90deg);
}
.gauge-track{ fill:none; stroke:var(--line-soft); stroke-width:2.6; }
.gauge-arc{
  fill:none;
  stroke:var(--indigo);
  stroke-width:2.6;
  stroke-linecap:round;
  stroke-dasharray:113.1;
  stroke-dashoffset:113.1;
  transition:stroke-dashoffset 1.1s var(--ease-out);
}
.gauge-num{
  position:relative;
  font-family:var(--font-mono);
  font-size:12.5px;
  font-weight:700;
  color:var(--ink);
}

.lens-name{
  margin:12px 0 3px;
  font-family:var(--font-display);
  font-size:16px;
  font-weight:600;
  letter-spacing:-.026em;
}

.lens-text{
  margin:0;
  font-size:12px;
  line-height:1.56;
  font-weight:300;
  color:var(--ink-70);
}

/* ── specimen sheet ────────────────────────────────────── */

.spec{
  position:relative;
  margin:0;
  padding:19px 17px 0;
  border-radius:var(--r-lg);
  background:var(--card);
  border:1px solid var(--line);
  overflow:hidden;
  box-shadow:0 20px 36px -32px rgba(27,29,58,.65);
}

.spec-stamp{
  position:absolute;
  top:20px; right:-32px;
  padding:4px 34px;
  transform:rotate(36deg);
  font-family:var(--font-mono);
  font-size:9px;
  font-weight:500;
  letter-spacing:.26em;
  text-transform:uppercase;
  color:var(--apricot);
  border-top:1px solid var(--apricot);
  border-bottom:1px solid var(--apricot);
  opacity:.7;
}

.spec-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
  padding-bottom:11px;
  border-bottom:1px solid var(--ink);
}
.spec-mark{
  font-family:var(--font-display);
  font-size:12.5px;
  font-weight:700;
  letter-spacing:-.02em;
}
.spec-by{
  font-family:var(--font-mono);
  font-size:8.5px;
  font-weight:400;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--ink-45);
  margin-left:4px;
}
.spec-meta{
  display:flex;
  align-items:center;
  gap:7px;
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:.12em;
  color:var(--ink-45);
}
.spec-meta i{ width:3px; height:3px; border-radius:50%; background:var(--apricot); }

.spec-verdict{
  margin:13px 0 15px;
  font-family:var(--font-display);
  font-size:16px;
  font-weight:600;
  line-height:1.3;
  letter-spacing:-.026em;
}
.spec-verdict-key{
  display:block;
  margin-bottom:3px;
  font-family:var(--font-mono);
  font-size:9px;
  font-weight:500;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--ink-45);
}

.spec-rows{
  list-style:none;
  margin:0 0 13px;
  padding:0;
  display:grid;
  gap:8px;
}
.spec-rows li{ display:flex; align-items:center; gap:10px; }
.spec-key{
  width:72px;
  flex:none;
  font-size:11.5px;
  font-weight:500;
  color:var(--ink-70);
}
.sbar{
  flex:1;
  height:4px;
  border-radius:3px;
  background:var(--line-soft);
  overflow:hidden;
}
.sbar i{
  display:block;
  height:100%;
  width:0;
  border-radius:3px;
  background:var(--indigo);
  transition:width 1.15s var(--ease-out);
}
.sbar-warn i{ background:var(--apricot); }
.spec.is-on .sbar i{ width:var(--v); }

.sval{
  width:22px;
  flex:none;
  text-align:right;
  font-family:var(--font-mono);
  font-size:11.5px;
  font-weight:700;
  color:var(--ink);
}

.spec-line{
  margin:0;
  font-size:12.5px;
  line-height:1.62;
  font-weight:300;
  color:var(--ink-70);
}

.spec-cut{
  position:relative;
  margin:4px -17px 0;
  padding:40px 17px 15px;
  text-align:center;
  background:linear-gradient(180deg, rgba(255,255,255,0), var(--card) 62%);
}
.spec-cut::before{
  content:"";
  position:absolute;
  left:17px; right:17px; bottom:36px;
  border-top:1px dashed var(--line);
}
.spec-cut span{
  font-family:var(--font-mono);
  font-size:9.5px;
  font-weight:500;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--ink-45);
}

.spec-foot{
  margin:11px 2px 0;
  font-size:11px;
  line-height:1.6;
  font-weight:300;
  color:var(--ink-45);
}

/* ── figures ───────────────────────────────────────────── */

.figures{
  margin:0;
  display:grid;
  grid-template-columns:repeat(3,1fr);
}
.figure{
  padding:2px 8px;
  border-left:1px solid var(--line-soft);
}
.figure:first-child{ border-left:0; padding-left:0; }
.figure dt{
  font-family:var(--font-display);
  font-size:25px;
  font-weight:700;
  letter-spacing:-.045em;
  line-height:1.12;
  color:var(--indigo-deep);
  font-variant-numeric:tabular-nums;
}
.figure dd{
  margin:3px 0 0;
  font-family:var(--font-mono);
  font-size:9px;
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-45);
}

/* ── delivery card ─────────────────────────────────────── */

.card{
  position:relative;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:22px 19px 19px;
  box-shadow:0 22px 40px -34px rgba(27,29,58,.65);
}

.card-art{
  margin:0 0 14px;
  display:grid;
  place-items:center;
}
.card-art img{
  width:auto;
  max-height:160px;
  animation:hover 11s ease-in-out infinite;
}

.card-text{
  margin:0;
  font-size:13px;
  font-weight:300;
  color:var(--ink-70);
}
.card-text-mid{ text-align:center; }

.card-note{
  margin:11px 0 0;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  font-size:11px;
  color:var(--ink-45);
}
.card-note .ic{ font-size:12px; color:#25A85C; }

/* ── footer ────────────────────────────────────────────── */

.foot-note{
  margin:0 0 12px;
  font-size:11.5px;
  line-height:1.72;
  font-weight:300;
  color:var(--ink-45);
}

.foot-mark{
  margin:0;
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  font-family:var(--font-mono);
  font-size:9.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-45);
}
.foot-mark a{ color:var(--ink-70); }

/* ══ overlays ═══════════════════════════════════════════ */

.veil{
  position:fixed;
  inset:0;
  z-index:60;
  display:none;
  place-items:center;
  padding:24px;
  background:rgba(240,241,248,.86);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}
.veil.is-open{ display:grid; animation:veilIn .3s var(--ease) both; }

body.is-held{ overflow:hidden; }

/* ── the read in progress ──────────────────────────────── */

.press{
  width:100%;
  max-width:320px;
  text-align:center;
}

.press-sheet{
  position:relative;
  overflow:hidden;
  padding:26px 20px 22px;
  border-radius:var(--r-md);
  background:var(--card);
  border:1px solid rgba(79,74,214,.2);
  box-shadow:0 26px 46px -36px rgba(27,29,58,.7),
             0 0 0 5px rgba(79,74,214,.05);
  animation:cardIn .4s var(--ease-out) both;
}

/* the instrument's own grid */
.press-grid{
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(to right,  rgba(79,74,214,.075) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(79,74,214,.075) 1px, transparent 1px);
  background-size:22px 22px;
  -webkit-mask-image:radial-gradient(circle at 50% 40%, #000 20%, transparent 82%);
          mask-image:radial-gradient(circle at 50% 40%, #000 20%, transparent 82%);
}

.press-sheet .hud{
  width:11px; height:11px;
  border-width:1.5px;
  opacity:.5;
}
.press-sheet .hud-tl{ top:9px;    left:9px; }
.press-sheet .hud-tr{ top:9px;    right:9px; }
.press-sheet .hud-bl{ bottom:9px; left:9px; }
.press-sheet .hud-br{ bottom:9px; right:9px; }

/* a live trace: a ghost path underneath, a lit one running over it */
.trace{
  position:relative;
  display:block;
  width:100%;
  height:52px;
  margin:14px 0 2px;
  overflow:visible;
}
.trace path{
  fill:none;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.trace-ghost{ stroke:rgba(79,74,214,.16); }
.trace-live{
  stroke:var(--indigo);
  filter:drop-shadow(0 0 4px rgba(79,74,214,.5));
  stroke-dasharray:120 640;
  stroke-dashoffset:120;
  animation:traceRun 2.6s linear infinite;
}

.press-ticker{
  display:block;
  font-family:var(--font-display);
  font-size:32px;
  font-weight:700;
  letter-spacing:-.04em;
  line-height:1.06;
  text-transform:uppercase;
}
.press-sub{
  display:block;
  margin-top:2px;
  font-family:var(--font-mono);
  font-size:9px;
  font-weight:500;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--ink-45);
}

.press-lines{
  position:relative;
  margin-top:12px;
  display:grid;
  gap:7px;
}
.press-lines i{
  height:4px;
  width:var(--w);
  border-radius:3px;
  background:var(--line-soft);
  justify-self:start;
}

/* the one place the scan is literal: a lit bar walking the sheet
   in step with real progress */
.press-bar{
  position:absolute;
  left:0; right:0;
  height:30px;
  top:calc(var(--p) * 1% - 15px);
  pointer-events:none;
  background:linear-gradient(180deg,
    rgba(79,74,214,0), rgba(79,74,214,.13) 50%, rgba(240,160,119,.10) 62%, rgba(240,160,119,0));
  transition:top .18s linear;
}
.press-bar b{
  position:absolute;
  left:0; right:0; top:50%;
  height:1.5px;
  background:var(--indigo);
  box-shadow:0 0 9px 1px rgba(79,74,214,.55);
}

.press-meta{
  margin:16px 0 11px;
  display:flex;
  align-items:baseline;
  justify-content:center;
  gap:10px;
}
.press-pct{
  font-family:var(--font-mono);
  font-size:14px;
  font-weight:700;
  color:var(--indigo);
  font-variant-numeric:tabular-nums;
}
.press-status{ font-size:12.5px; color:var(--ink-70); }

.press-rule{
  position:relative;
  height:3px;
  border-radius:3px;
  background:rgba(27,29,58,.07);
  overflow:hidden;
  margin-bottom:10px;
}
.press-rule i{
  display:block;
  height:100%;
  width:0;
  border-radius:3px;
  background:linear-gradient(90deg,var(--indigo-deep),var(--indigo));
  box-shadow:0 0 8px rgba(79,74,214,.6);
  transition:width .18s linear;
}

.press-count{
  margin:0 0 16px;
  font-family:var(--font-mono);
  font-size:9.5px;
  font-weight:500;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink-45);
  font-variant-numeric:tabular-nums;
}
.press-count span{ color:var(--indigo); font-weight:700; }

.steps{
  list-style:none;
  margin:0 auto;
  padding:0;
  max-width:225px;
  display:grid;
  gap:9px;
  text-align:left;
}
.step{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:12.5px;
  color:var(--ink-45);
  opacity:.45;
  transition:opacity .3s, color .3s;
}
.step-dot{
  display:grid;
  place-items:center;
  width:16px; height:16px;
  flex:none;
  border-radius:50%;
  background:rgba(27,29,58,.08);
  color:transparent;
  font-size:8px;
  transition:background .3s, color .3s;
}
.step.is-done{ opacity:1; color:var(--ink); }
.step.is-done .step-dot{ background:var(--indigo); color:#fff; }

/* ── result ────────────────────────────────────────────── */

.result{
  position:relative;
  width:100%;
  max-width:390px;
  max-height:calc(100dvh - 48px);
  overflow-y:auto;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:28px 21px 21px;
  box-shadow:0 34px 60px -44px rgba(27,29,58,.7);
  animation:cardIn .42s var(--ease-out) both;
}

.seal{
  position:relative;
  display:grid;
  place-items:center;
  width:84px; height:84px;
  margin:0 auto 14px;
  animation:sealIn .5s var(--ease-out) .06s both;
}
.seal svg:first-child{
  position:absolute;
  inset:0;
  width:100%; height:100%;
  animation:turn 30s linear infinite;
}
.seal-ring{ fill:none; stroke:var(--indigo); stroke-width:1; opacity:.4; }
.seal-ring-in{ stroke:var(--apricot); opacity:.45; }
.seal-text{
  font-family:var(--font-mono);
  font-size:8px;
  font-weight:400;
  letter-spacing:.16em;
  fill:var(--ink-45);
}
.seal-tick{
  position:relative;
  font-size:26px;
  color:var(--indigo);
  stroke-width:1.4;
}

.result-ticker{ color:var(--indigo); text-transform:uppercase; }

.locked{
  list-style:none;
  margin:18px 0 4px;
  padding:0;
  display:grid;
  gap:1px;
  border-radius:var(--r-md);
  overflow:hidden;
  background:var(--line-soft);
}
.locked li{
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px 13px;
  background:var(--paper-lift);
  font-size:12.5px;
  font-weight:500;
}
.lock-key{ width:80px; flex:none; }
.lock-bar{
  flex:1;
  height:6px;
  border-radius:4px;
  background:linear-gradient(90deg,var(--indigo),var(--apricot));
  filter:blur(3px);
  opacity:.4;
}
.locked .ic{ font-size:12px; color:var(--ink-45); }

.result-foot{
  margin:11px 0 0;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  text-align:center;
  font-size:10.5px;
  color:var(--ink-45);
}
.result-foot .ic{ font-size:12px; color:var(--indigo); }

/* ══ motion ═════════════════════════════════════════════ */

@keyframes hover{
  0%,100%{ transform:translateY(0); }
  50%    { transform:translateY(-7px); }
}
@keyframes turn{ to{ transform:rotate(360deg); } }
@keyframes pulse{
  0%,100%{ transform:scale(.96); opacity:.85; }
  50%    { transform:scale(1.05); opacity:1; }
}
@keyframes mesh{ to{ transform:translate(48px,48px); } }
@keyframes fieldPass{
  0%      { top:-40vh; opacity:0; }
  12%     { opacity:1; }
  60%     { top:110vh; opacity:1; }
  70%,100%{ top:130vh; opacity:0; }
}

/* the head passes, then the sheet is left alone for a beat */
@keyframes scanPass{
  0%      { top:-6%;  opacity:0; }
  9%      { opacity:1; }
  52%     { top:98%;  opacity:1; }
  61%,100%{ top:106%; opacity:0; }
}
@keyframes traceRun{ to{ stroke-dashoffset:-640; } }
@keyframes pinIn{
  0%,4%   { opacity:0; transform:translateY(6px); }
  12%,30% { opacity:1; transform:translateY(0); }
  40%,100%{ opacity:0; transform:translateY(-6px); }
}
@keyframes sweep{
  0%,20%  { transform:translateX(-190%) skewX(-14deg); }
  55%,100%{ transform:translateX(330%)  skewX(-14deg); }
}
@keyframes plateIn{
  from{ transform:translateY(105%); }
  to  { transform:translateY(0); }
}
@keyframes ruleIn{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }
@keyframes riseIn{
  from{ opacity:0; transform:translateY(12px); }
  to  { opacity:1; transform:none; }
}
@keyframes veilIn{ from{ opacity:0; } to{ opacity:1; } }
@keyframes cardIn{
  from{ opacity:0; transform:translateY(14px) scale(.98); }
  to  { opacity:1; transform:none; }
}
@keyframes sealIn{
  from{ opacity:0; transform:scale(.7); }
  to  { opacity:1; transform:none; }
}
@keyframes roll{ to{ transform:translateX(-50%); } }
@keyframes nudge{
  0%,100%{ transform:translateX(0); }
  24%    { transform:translateX(-4px); }
  66%    { transform:translateX(3px); }
}

/* ── reveal states (JS-gated so no-JS still reads) ─────── */

.js [data-reveal]{ opacity:0; }
.js [data-reveal].is-in{ animation:riseIn .6s var(--ease-out) both; }

.js .display .line > span{ transform:translateY(105%); }
.js .display.is-in .line > span{ animation:plateIn .74s var(--ease-out) both; }
.js .display.is-in .line:nth-child(1) > span{ animation-delay:.05s; }
.js .display.is-in .line:nth-child(2) > span{ animation-delay:.14s; }
.js .display.is-in em::after{ animation:ruleIn .6s var(--ease-out) .72s both; }

.display em::after{ transform:scaleX(1); }
.js .display em::after{ transform:scaleX(0); }

/* ── layout steps ──────────────────────────────────────── */

@media (min-width:620px){
  .sheet{ margin-block:36px; }
}

@media (min-width:900px){
  :root{ --pad:30px; }
  .sheet{ margin-block:56px; }
  .stage-art{ max-width:250px; max-height:300px; }
}

@media (max-width:380px){
  :root{ --pad:18px; }
  .lenses{ grid-template-columns:1fr; }
  .figure dt{ font-size:22px; }
}

/* ── reduced motion ────────────────────────────────────── */

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .js [data-reveal]{ opacity:1; }
  .js .display .line > span{ transform:none; }
  .js .display em::after{ transform:scaleX(1); }
  .btn::after,
  .stage-scan,
  .field::after{ display:none; }
  .pin{ opacity:1; }
  .trace-live{ stroke-dasharray:none; stroke-dashoffset:0; }
}