/* ==========================================================================
   Predvix — section components
   Depends on the token layer in site.css. No raw hex, no ad-hoc spacing.
   ========================================================================== */


/* Icon sprite. One stroke weight, one box, one colour — inherits currentColor. */
.icon{
  width:20px;height:20px;
  flex:none;
  stroke:currentColor;
  fill:none;
  stroke-width:1.25;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.icon--lg{width:26px;height:26px;}

/* ==========================================================================
   Status line — the "In development" marker
   ========================================================================== */

.status-line{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:5px 11px 5px 9px;
  border:1px solid var(--line-rule);
  border-radius:var(--r-full);
  font-size:var(--t-2xs);
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--paper-2);
  background:rgba(255,255,255,.02);
}
.status-line span{
  width:5px;height:5px;
  border-radius:var(--r-full);
  background:var(--verdict-pass);
  box-shadow:0 0 0 3px var(--verdict-pass-dim);
}
.status-line b{color:var(--paper-4);font-weight:400;}

/* ==========================================================================
   Hero
   ========================================================================== */

.alpha-hero{
  position:relative;
  padding:168px 0 var(--s-9);
  overflow:hidden;
}
.alpha-hero::before{
  content:'';
  position:absolute;
  top:-24%;left:50%;
  width:1150px;height:820px;
  transform:translateX(-50%);
  background:
    radial-gradient(ellipse 52% 46% at 50% 40%,rgba(63,123,255,.13),transparent 70%),
    radial-gradient(ellipse 34% 30% at 74% 26%,rgba(78,201,138,.055),transparent 72%);
  filter:blur(38px);
  pointer-events:none;
}
/* Hairline horizon — a single structural line closing the hero. */
.alpha-hero::after{
  content:'';
  position:absolute;
  left:0;right:0;bottom:0;
  height:1px;
  background:linear-gradient(90deg,transparent,var(--line-rule) 22%,var(--line-rule) 78%,transparent);
}

.alpha-hero__grid{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:var(--s-8);
}

.product-kicker{
  margin:var(--s-5) 0 var(--s-4);
  font-family:var(--font-mono);
  font-size:var(--t-2xs);
  letter-spacing:.19em;
  text-transform:uppercase;
  color:var(--signal-soft);
}

.alpha-hero h1{
  font-size:clamp(38px,6.4vw,var(--t-5xl));
  line-height:.99;
  letter-spacing:-.042em;
  font-weight:600;
  max-width:15ch;
}

.alpha-hero__lead{
  margin-top:var(--s-5);
  max-width:56ch;
  font-size:var(--t-md);
  line-height:1.62;
  color:var(--paper-2);
}

.hero-actions{margin-top:var(--s-6);}

.hero-proofline{
  display:flex;
  flex-wrap:wrap;
  gap:var(--s-6);
  margin-top:var(--s-7);
  padding-top:var(--s-5);
  border-top:1px solid var(--line-hair);
}
.hero-proofline span{
  display:flex;
  align-items:baseline;
  gap:9px;
  font-size:var(--t-sm);
  color:var(--paper-2);
}
.hero-proofline i{
  font-style:normal;
  font-size:var(--t-2xs);
  letter-spacing:.08em;
  color:var(--paper-4);
}

/* ==========================================================================
   Research canvas — the illustrative product surface
   Hand-built HTML/CSS so it stays crisp and animatable. Never a screenshot.
   ========================================================================== */

.research-canvas{
  position:relative;
  border:1px solid var(--line-rule);
  border-radius:var(--r-lg);
  background:linear-gradient(180deg,var(--ink-100),var(--ink-050));
  box-shadow:var(--shadow-3);
  overflow:hidden;
}

.canvas-topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--s-4);
  padding:12px var(--s-4);
  border-bottom:1px solid var(--line-hair);
  background:rgba(255,255,255,.015);
  font-family:var(--font-mono);
  font-size:var(--t-2xs);
  letter-spacing:.06em;
  color:var(--paper-4);
}
.canvas-topbar__title{
  display:flex;
  align-items:center;
  gap:9px;
  color:var(--paper-2);
  letter-spacing:.11em;
  text-transform:uppercase;
}
.canvas-topbar__mark{
  display:grid;
  place-items:center;
  width:18px;height:18px;
  border:1px solid var(--signal-dim);
  border-radius:var(--r-sm);
  background:var(--signal-dim);
  color:var(--signal-soft);
  font-size:11px;
}

.canvas-grid{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:1px;
  background:var(--line-hair);
}
.canvas-col{
  display:flex;
  flex-direction:column;
  gap:var(--s-2);
  padding:var(--s-4) 14px;
  background:var(--ink-050);
  min-width:0;
}

.canvas-label{
  display:flex;
  align-items:center;
  gap:7px;
  margin-bottom:var(--s-1);
  font-size:var(--t-2xs);
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--paper-3);
}
.canvas-label b{
  display:grid;
  place-items:center;
  width:15px;height:15px;
  border:1px solid var(--line-rule);
  border-radius:var(--r-xs);
  font-weight:500;
  font-size:10px;
  color:var(--paper-4);
}

.canvas-question{
  padding:11px 12px;
  border:1px solid var(--line-hair);
  border-radius:var(--r-md);
  background:rgba(255,255,255,.02);
  font-size:var(--t-sm);
  line-height:1.5;
  color:var(--paper);
}
.canvas-mini{
  padding:9px 11px;
  border-radius:var(--r-sm);
  background:rgba(255,255,255,.02);
  font-family:var(--font-mono);
  font-size:var(--t-2xs);
  line-height:1.7;
  color:var(--paper-4);
}
.canvas-mini strong{display:block;color:var(--paper-2);font-weight:500;}

.hypothesis-list,.experiment-list,.candidate-list{
  display:flex;
  flex-direction:column;
  gap:7px;
}
.hypothesis,.experiment,.candidate{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:2px;
  padding:9px 11px;
  border:1px solid var(--line-hair);
  border-radius:var(--r-sm);
  background:rgba(255,255,255,.015);
}
.hypothesis strong,.experiment strong,.candidate strong{
  font-family:var(--font-mono);
  font-size:var(--t-2xs);
  font-weight:500;
  letter-spacing:.02em;
  color:var(--paper);
}
.hypothesis span,.experiment span,.candidate span{
  font-size:var(--t-2xs);
  line-height:1.45;
  color:var(--paper-4);
}

.experiment{padding-left:22px;}
.experiment-status{
  position:absolute;
  top:13px;left:10px;
  width:5px;height:5px;
  border-radius:var(--r-full);
  background:var(--verdict-pass);
}
.experiment-status--amber{background:var(--verdict-warn);}

.candidate--selected{
  border-color:var(--verdict-pass-dim);
  background:var(--verdict-pass-dim);
}
.candidate--selected strong{color:var(--verdict-pass);}
.candidate--selected span{color:var(--paper-2);}   /* green-tinted card: paper-4 fell to 4.1:1 */
/* Dim through colour, not opacity — opacity took the copy below 4.5:1. */
.candidate--reject{border-color:var(--line-hair);}
.candidate--reject span{color:var(--paper-4);}
.candidate--reject strong{color:var(--paper-3);text-decoration:line-through;text-decoration-color:var(--verdict-fail);}

.validation-score{
  position:relative;
  display:grid;
  place-items:center;
  width:88px;height:88px;
  /* Bottom margin leaves room for the caption parked below the ring. */
  margin:var(--s-1) auto var(--s-5);
  border-radius:var(--r-full);
  background:conic-gradient(var(--signal) 0 68%,rgba(255,255,255,.07) 68% 100%);
}
.validation-score::before{
  content:'';
  position:absolute;
  inset:6px;
  border-radius:var(--r-full);
  background:var(--ink-050);
}
.validation-score div{position:static;}
.validation-score strong{
  position:relative;
  font-size:var(--t-lg);
  letter-spacing:-.02em;
  color:var(--paper);
}
/* Caption sits under the ring — it never fits legibly inside one. */
.validation-score span{
  position:absolute;
  top:100%;left:50%;
  transform:translateX(-50%);
  margin-top:7px;
  white-space:nowrap;
  font-size:10px;
  letter-spacing:.07em;
  text-transform:uppercase;
  color:var(--paper-4);
}

.validation-checks{display:flex;flex-direction:column;gap:5px;}
.validation-checks span{
  display:flex;
  justify-content:space-between;
  gap:8px;
  font-size:var(--t-2xs);
  color:var(--paper-4);
}
.validation-checks b{font-family:var(--font-mono);font-weight:500;color:var(--verdict-pass);}
.validation-checks span:last-child b{color:var(--verdict-warn);}

.canvas-footer{
  display:grid;
  grid-template-columns:1.6fr repeat(3,1fr);
  gap:var(--s-4);
  padding:12px var(--s-4);
  border-top:1px solid var(--line-hair);
  background:rgba(255,255,255,.015);
  font-size:var(--t-2xs);
  line-height:1.5;
  color:var(--paper-4);
}
/* Block so the label sits above its value — the markup carries no <br>. */
.canvas-footer strong{display:block;color:var(--paper-2);font-weight:500;}

.canvas-disclaimer{
  margin-top:var(--s-3);
  font-size:var(--t-2xs);
  color:var(--paper-4);
}

@media (max-width:1020px){
  .canvas-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .canvas-footer{grid-template-columns:1fr 1fr;}
}
@media (max-width:560px){
  .canvas-grid{grid-template-columns:minmax(0,1fr);}
  .canvas-footer{grid-template-columns:1fr;}
}

/* ==========================================================================
   Research loop
   Default: a readable wrapping grid (correct with JS off).
   motion.js only adds active-step state on top of this.
   ========================================================================== */

.loop-pin{position:relative;}

/* ---- Research loop as a layered neural network -------------------------
   motion.js injects one <svg class="loop-net"> behind the steps and adds
   .has-net. Nothing here depends on it: without JS the seven steps are a
   plain 7-up grid, which is the correct fallback. */
.research-loop{
  --net-band:190px;                 /* vertical room for the wiring */
  position:relative;
  display:grid;
  grid-template-columns:repeat(7,minmax(0,1fr));
  gap:var(--s-3);
}

.loop-step{
  position:relative;
  z-index:1;
  display:grid;
  align-content:start;           /* never let auto rows stretch to a taller sibling */
  grid-template-areas:"icon" "num" "title" "body";
  justify-items:center;
  row-gap:var(--s-2);
  text-align:center;
}
.research-loop.has-net .loop-step{grid-template-rows:var(--net-band) auto auto auto;}

.loop-step__num{
  grid-area:num;
  font-size:var(--t-2xs);
  letter-spacing:.1em;
  color:var(--paper-4);
}
.loop-step__icon{
  grid-area:icon;
  align-self:center;
  display:grid;
  place-items:center;
  width:44px;height:44px;
  border:1px solid var(--line-rule);
  border-radius:50%;
  background:var(--ink-050);
  color:var(--paper-2);
  /* Solid halo in the page colour so edges stop short of the node. */
  box-shadow:0 0 0 6px var(--bg);
  transition:border-color var(--dur) var(--ease-out),
             background var(--dur) var(--ease-out),
             color var(--dur) var(--ease-out),
             box-shadow var(--dur) var(--ease-out);
}
.loop-step h3{grid-area:title;font-size:var(--t-base);letter-spacing:-.018em;}
.loop-step p{grid-area:body;font-size:var(--t-sm);line-height:1.55;color:var(--paper-3);max-width:22ch;}

/* Active layer during the pinned scrub */
.loop-step.is-active .loop-step__icon{
  border-color:var(--signal);
  background:var(--signal-dim);
  color:var(--paper);
  box-shadow:0 0 0 6px var(--bg),0 0 34px rgba(63,123,255,.4);
}
.loop-step.is-active h3{color:var(--paper);}

/* The wiring. Edges are hairlines; a third of them carry a travelling
   signal (.nn-flow) and every satellite neuron pulses. Both are paused
   unless the section is on screen, and off entirely under reduced motion. */
.loop-net{
  position:absolute;
  inset:0;
  width:100%;height:100%;
  overflow:visible;
  pointer-events:none;
  z-index:0;
}
.nn-edge{
  fill:none;
  stroke:var(--line-rule);
  stroke-width:1;
  opacity:.5;
  transition:stroke .5s var(--ease-out),opacity .5s var(--ease-out);
}
.nn-edge--return{stroke-dasharray:3 7;}
.nn-sat{
  fill:var(--paper-4);
  opacity:.55;
  transform-box:fill-box;
  transform-origin:center;
  animation:nn-pulse 4.4s ease-in-out infinite paused;
  animation-delay:var(--d,0s);
  transition:fill .5s var(--ease-out),opacity .5s var(--ease-out);
}
.nn-flow{
  fill:none;
  stroke:var(--signal-soft);
  stroke-width:1.5;
  stroke-linecap:round;
  /* One comet per line; the long gap keeps it off-path most of the cycle. */
  stroke-dasharray:6 640;
  stroke-dashoffset:646;
  opacity:.9;
  animation:nn-flow 6.5s linear infinite paused;
  animation-delay:var(--d,0s);
}
.nn-layer.is-lit .nn-edge{stroke:var(--signal);opacity:.6;}
.nn-layer.is-lit .nn-sat{fill:var(--signal-soft);opacity:1;}
.loop-pin.is-visible .nn-sat,
.loop-pin.is-visible .nn-flow{animation-play-state:running;}

@keyframes nn-flow{to{stroke-dashoffset:0;}}
@keyframes nn-pulse{0%,100%{transform:scale(1);}50%{transform:scale(1.9);}}

@media (prefers-reduced-motion:reduce){
  .nn-sat,.nn-flow{animation:none;}
  .nn-flow{opacity:0;}
}

.loop-progress{
  position:relative;
  height:1px;
  margin-top:var(--s-6);
  background:var(--line-hair);
}
.loop-progress i{
  position:absolute;
  top:0;bottom:0;left:0;
  display:block;
  width:0;
  background:var(--signal);
}

@media (max-width:1100px){
  .loop-step h3{font-size:var(--t-sm);}
  .loop-step p{font-size:var(--t-xs);}
}

/* Under 900px the network turns vertical: layers stack, the wiring runs in
   a left-hand band, copy sits beside each node. */
@media (max-width:899px){
  .research-loop{--net-band:120px;grid-template-columns:minmax(0,1fr);gap:var(--s-5);}
  .loop-step,
  .research-loop.has-net .loop-step{
    grid-template-columns:var(--net-band) minmax(0,1fr);
    grid-template-rows:auto auto auto;
    grid-template-areas:"icon num" "icon title" "icon body";
    justify-items:start;
    column-gap:var(--s-3);
    row-gap:var(--s-1);
    text-align:left;
  }
  .loop-step__icon{justify-self:center;}
  .loop-step h3{font-size:var(--t-base);}
  .loop-step p{font-size:var(--t-sm);max-width:none;}
}

/* ==========================================================================
   Capabilities — deliberately asymmetric, not a 3-up card row
   ========================================================================== */

.capability-grid{
  display:grid;
  grid-template-columns:1.25fr 1fr 1fr;
  gap:var(--s-4);
  align-items:start;
}

.capability-panel{
  position:relative;
  display:flex;
  flex-direction:column;
  padding:var(--s-6);
  border:1px solid var(--line-hair);
  border-radius:var(--r-lg);
  background:linear-gradient(180deg,var(--ink-100),var(--ink-050));
  overflow:hidden;
}
.capability-panel h3{
  font-size:var(--t-lg);
  letter-spacing:-.026em;
  margin-bottom:var(--s-3);
}
.capability-panel>p{
  font-size:var(--t-sm);
  line-height:1.62;
  color:var(--paper-2);
  margin-bottom:var(--s-5);
}

.cap-list{display:flex;flex-direction:column;gap:var(--s-4);}
.cap-item{display:flex;gap:var(--s-3);align-items:flex-start;}
.cap-icon{
  flex:none;
  display:grid;
  place-items:center;
  width:30px;height:30px;
  border:1px solid var(--line-rule);
  border-radius:var(--r-sm);
  background:rgba(255,255,255,.02);
  color:var(--paper-3);
}
.cap-item strong{
  display:block;
  font-size:var(--t-sm);
  font-weight:600;
  color:var(--paper);
  margin-bottom:2px;
}
.cap-item span{
  display:block;
  font-size:var(--t-sm);
  line-height:1.55;
  color:var(--paper-3);
}

.cap-visual{
  position:relative;
  margin-top:var(--s-6);
  height:96px;
  opacity:.55;
  pointer-events:none;
}
.stack-visual i{
  position:absolute;
  left:0;right:22%;
  height:34px;
  border:1px solid var(--line-rule);
  border-radius:var(--r-sm);
  background:linear-gradient(100deg,rgba(255,255,255,.04),transparent);
  transform:skewY(-6deg);
}
.stack-visual i:nth-child(1){top:0;}
.stack-visual i:nth-child(2){top:24px;left:8%;right:14%;opacity:.7;}
.stack-visual i:nth-child(3){top:48px;left:16%;right:6%;opacity:.42;}

.graph-visual::before,.graph-visual::after{
  content:'';
  position:absolute;
  left:6%;right:6%;
  height:1px;
  background:var(--line-rule);
}
.graph-visual::before{top:28px;transform:rotate(-7deg);}
.graph-visual::after{top:62px;transform:rotate(5deg);}
.graph-visual i{
  position:absolute;
  width:7px;height:7px;
  border-radius:var(--r-full);
  background:var(--paper-4);
}
.graph-visual i:nth-child(1){top:25px;left:8%;background:var(--signal);}
.graph-visual i:nth-child(2){top:20px;left:36%;}
.graph-visual i:nth-child(3){top:33px;left:66%;}
.graph-visual i:nth-child(4){top:59px;left:24%;}
.graph-visual i:nth-child(5){top:66px;left:78%;background:var(--verdict-pass);}

@media (max-width:1020px){ .capability-grid{grid-template-columns:1fr 1fr;} }
@media (max-width:680px){ .capability-grid{grid-template-columns:1fr;} }

/* ==========================================================================
   Invalidate First — the editorial centrepiece
   ========================================================================== */

.integrity-section{
  background:radial-gradient(ellipse 60% 50% at 50% 0%,rgba(240,85,95,.045),transparent 70%);
}

.integrity-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:var(--s-8);
}

.integrity-copy{max-width:56ch;}
/* The one serif moment on this page. */
.integrity-copy h2{
  font-weight:700;
  font-size:clamp(40px,6vw,72px);
  line-height:.96;
  letter-spacing:-.028em;
  margin-bottom:var(--s-5);
}
.integrity-copy p{
  font-size:var(--t-md);
  line-height:1.62;
  color:var(--paper-2);
  max-width:52ch;
}
.integrity-copy p + p{
  margin-top:var(--s-4);
  padding-left:var(--s-4);
  border-left:2px solid var(--verdict-fail);
  color:var(--paper);
}

.integrity-flow{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:var(--s-3);
  align-items:stretch;
}
.integrity-card{
  display:flex;
  flex-direction:column;
  gap:var(--s-3);
  padding:var(--s-4);
  border:1px solid var(--line-hair);
  border-radius:var(--r-md);
  background:var(--ink-050);
}
.integrity-card__label{
  font-size:var(--t-2xs);
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--paper-4);
}
.integrity-metric{
  display:flex;
  align-items:baseline;
  gap:7px;
  font-size:var(--t-2xl);
  letter-spacing:-.03em;
  color:var(--paper);
}
.integrity-metric small{
  font-size:var(--t-2xs);
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--paper-4);
}

.micro-chart{height:54px;margin-top:auto;}
.micro-chart svg{width:100%;height:100%;display:block;}

.challenge-list{display:flex;flex-direction:column;gap:9px;}
.challenge-item{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:var(--t-2xs);
  color:var(--paper-2);
}
.challenge-item i{
  flex:none;
  width:5px;height:5px;
  border-radius:var(--r-full);
  background:var(--verdict-fail);
}
.challenge-item b{
  margin-left:auto;
  font-family:var(--font-mono);
  font-weight:500;
  color:var(--verdict-fail);
}
.challenge-item--fixed i{background:var(--verdict-warn);}
.challenge-item--fixed b{color:var(--verdict-warn);}

.integrity-card--reject{
  justify-content:center;
  align-items:center;
  text-align:center;
  border-color:var(--verdict-fail-dim);
  background:var(--verdict-fail-dim);
}
.reject-mark{
  display:grid;
  place-items:center;
  width:40px;height:40px;
  margin:var(--s-2) auto var(--s-3);
  border:1px solid var(--verdict-fail);
  border-radius:var(--r-full);
  color:var(--verdict-fail);
  font-size:var(--t-lg);
  line-height:1;
}
.integrity-card--reject strong{
  display:block;
  font-size:var(--t-md);
  color:var(--verdict-fail);
}
.integrity-card--reject small{
  display:block;
  margin-top:6px;
  font-size:var(--t-2xs);
  line-height:1.5;
  color:var(--paper-3);
}

.integrity-note{
  margin-top:var(--s-4);
  font-size:var(--t-2xs);
  line-height:1.6;
  color:var(--paper-4);
}

@media (max-width:900px){ .integrity-flow{grid-template-columns:1fr 1fr;} }
@media (max-width:520px){ .integrity-flow{grid-template-columns:1fr;} }

/* ==========================================================================
   Audience split — institutions and individuals, one product
   ========================================================================== */

.audience-split{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1px;
  border:1px solid var(--line-hair);
  border-radius:var(--r-lg);
  background:var(--line-hair);
  overflow:hidden;
}
.audience-side{
  display:flex;
  flex-direction:column;
  padding:var(--s-7) var(--s-6);
  background:var(--ink-050);
}
.audience-side + .audience-side{background:var(--ink-100);}

.audience-side__label{
  display:flex;
  align-items:center;
  gap:9px;
  margin-bottom:var(--s-4);
  font-family:var(--font-mono);
  font-size:var(--t-2xs);
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--paper-3);
}
.audience-side h3{
  font-size:var(--t-xl);
  letter-spacing:-.028em;
  margin-bottom:var(--s-3);
}
.audience-side>p{
  font-size:var(--t-sm);
  line-height:1.62;
  color:var(--paper-2);
  margin-bottom:var(--s-5);
  max-width:44ch;
}

.audience-list{list-style:none;display:flex;flex-direction:column;margin-top:auto;}
.audience-list li{
  display:flex;
  align-items:center;
  gap:var(--s-3);
  padding:12px 0;
  border-top:1px solid var(--line-hair);
  font-size:var(--t-sm);
  color:var(--paper);
}
.audience-list li span{
  margin-left:auto;
  font-size:var(--t-2xs);
  line-height:1.4;
  text-align:right;
  color:var(--paper-4);
  max-width:24ch;
}

@media (max-width:820px){
  .audience-split{grid-template-columns:1fr;}
}

/* ==========================================================================
   Flagship / method panels (alpha-os, research, about, labs)
   ========================================================================== */

.two-col{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-4);}
.method-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s-3);}

.flagship-panel{
  padding:var(--s-6);
  border:1px solid var(--line-hair);
  border-radius:var(--r-lg);
  background:linear-gradient(180deg,var(--ink-100),var(--ink-050));
}
.flagship-panel h3{
  font-size:var(--t-lg);
  letter-spacing:-.026em;
  margin-bottom:var(--s-3);
}
.flagship-panel p{
  font-size:var(--t-sm);
  line-height:1.65;
  color:var(--paper-2);
  max-width:52ch;
}
.flagship-panel p + p{margin-top:var(--s-3);}

.method-card{
  padding:var(--s-5);
  border:1px solid var(--line-hair);
  border-radius:var(--r-md);
  background:var(--ink-050);
}
.method-card span{
  display:block;
  margin-bottom:var(--s-3);
  font-family:var(--font-mono);
  font-size:var(--t-2xs);
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--paper-4);
}
.method-card h3{font-size:var(--t-base);margin-bottom:var(--s-2);}
.method-card p{font-size:var(--t-sm);line-height:1.6;color:var(--paper-3);}

@media (max-width:900px){
  .two-col{grid-template-columns:1fr;}
  .method-grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:520px){ .method-grid{grid-template-columns:1fr;} }

/* ==========================================================================
   Alpha page header (interior pages)
   ========================================================================== */

.alpha-page-header{
  position:relative;
  padding:156px 0 var(--s-8);
  overflow:hidden;
}
.alpha-page-header::before{
  content:'';
  position:absolute;
  top:-30%;left:50%;
  width:960px;height:660px;
  transform:translateX(-50%);
  background:radial-gradient(ellipse at center,rgba(63,123,255,.10),transparent 68%);
  filter:blur(44px);
  pointer-events:none;
}
.alpha-page-header__inner{
  position:relative;
  max-width:var(--shell);
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.alpha-page-header h1{
  margin-top:var(--s-5);
  font-size:clamp(34px,5.4vw,var(--t-4xl));
  line-height:1.02;
  letter-spacing:-.038em;
  max-width:18ch;
}
.alpha-page-header p{
  margin-top:var(--s-5);
  max-width:58ch;
  font-size:var(--t-md);
  line-height:1.62;
  color:var(--paper-2);
}
.alpha-page-header__actions{margin-top:var(--s-6);}

/* ==========================================================================
   Early access note
   ========================================================================== */

.early-access-note{
  padding:var(--s-5);
  border:1px solid var(--line-hair);
  border-left:2px solid var(--signal);
  border-radius:var(--r-md);
  background:var(--signal-dim);
}
.early-access-note strong{display:block;margin-bottom:6px;font-size:var(--t-sm);color:var(--paper);}
.early-access-note p{font-size:var(--t-sm);line-height:1.62;color:var(--paper-2);}

/* ==========================================================================
   CTA band
   ========================================================================== */

.alpha-cta{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  display:grid;
  grid-template-columns:1.6fr auto;
  align-items:center;
  gap:var(--s-7);
  padding:var(--s-8) var(--s-7);
  border:1px solid var(--line-hair);
  border-radius:var(--r-lg);
  background:linear-gradient(120deg,var(--ink-150),var(--ink-050) 62%);
}
.alpha-cta::before{
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    repeating-linear-gradient(to right,var(--line-hair) 0 1px,transparent 1px 28px),
    repeating-linear-gradient(to bottom,var(--line-hair) 0 1px,transparent 1px 28px);
  mask-image:radial-gradient(ellipse at 88% 12%,#000,transparent 68%);
  -webkit-mask-image:radial-gradient(ellipse at 88% 12%,#000,transparent 68%);
}
/* Generated signal-field plate, screened in at low opacity for depth.
   z-index:-1 inside the isolated CTA keeps it under the copy and the grid. */
.alpha-cta::after{
  content:'';
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:url(signal-field.webp) center/cover no-repeat;
  opacity:.45;
  mix-blend-mode:screen;
  mask-image:linear-gradient(100deg,transparent 22%,#000 75%);
  -webkit-mask-image:linear-gradient(100deg,transparent 22%,#000 75%);
}
.alpha-cta__copy{position:relative;}
.alpha-cta h2{
  font-size:clamp(var(--t-xl),3.4vw,var(--t-2xl));
  letter-spacing:-.032em;
  max-width:20ch;
}
.alpha-cta p{
  margin-top:var(--s-3);
  font-size:var(--t-sm);
  line-height:1.6;
  color:var(--paper-2);
  max-width:48ch;
}
.alpha-cta__actions{position:relative;}

@media (max-width:820px){
  .alpha-cta{grid-template-columns:1fr;gap:var(--s-5);padding:var(--s-7) var(--s-5);}
}

/* ==========================================================================
   Labs
   ========================================================================== */

.labs-header{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:var(--s-5);
  margin-bottom:var(--s-6);
  padding-bottom:var(--s-4);
  border-bottom:1px solid var(--line-hair);
}
.labs-header h2{font-size:var(--t-xl);letter-spacing:-.028em;}
.labs-header p{margin-top:8px;font-size:var(--t-sm);color:var(--paper-3);}
.labs-header a{
  flex:none;
  font-size:var(--t-sm);
  font-weight:550;
  color:var(--signal-soft);
}

.labs-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s-3);}
.lab-card{
  display:flex;
  gap:var(--s-3);
  padding:var(--s-4);
  border:1px solid var(--line-hair);
  border-radius:var(--r-md);
  background:var(--ink-050);
  transition:border-color var(--dur) var(--ease-out);
}
.lab-card:hover{border-color:var(--line-rule);}
.lab-mark{
  flex:none;
  display:grid;
  place-items:center;
  width:34px;height:34px;
  border:1px solid var(--line-rule);
  border-radius:var(--r-sm);
  background:rgba(255,255,255,.02);
  color:var(--paper-2);
  font-size:var(--t-sm);
}
.lab-card h3{font-size:var(--t-sm);margin-bottom:5px;}
.lab-card p{font-size:var(--t-sm);line-height:1.5;color:var(--paper-3);}
.lab-status{
  display:inline-block;
  margin-top:var(--s-3);
  padding:3px 8px;
  border:1px solid var(--line-rule);
  border-radius:var(--r-full);
  font-size:10px;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--paper-4);
}

@media (max-width:900px){ .labs-grid{grid-template-columns:1fr 1fr;} }
@media (max-width:520px){
  .labs-grid{grid-template-columns:1fr;}
  .labs-header{flex-direction:column;align-items:flex-start;}
}

/* ==========================================================================
   Cinematic anchor — the two full-bleed image placements
   ========================================================================== */

.anchor-figure{
  position:relative;
  margin:0;
  border:1px solid var(--line-hair);
  border-radius:var(--r-lg);
  overflow:hidden;
  background:var(--ink-050);
}
.anchor-figure img{
  width:100%;
  aspect-ratio:21/9;
  object-fit:cover;
  /* Desaturated to sit inside the graphite palette, but still legible —
     any darker and the skyline reads as a black rectangle. */
  filter:saturate(.72) contrast(1.04) brightness(1.02);
}
.anchor-figure::after{
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(5,7,13,0) 42%,rgba(5,7,13,.78));
}
.anchor-figure figcaption{
  position:absolute;
  left:var(--s-6);right:var(--s-6);bottom:var(--s-5);
  z-index:1;
  font-family:var(--font-mono);
  font-size:var(--t-2xs);
  letter-spacing:.11em;
  text-transform:uppercase;
  color:var(--paper-2);
}
@media (max-width:680px){
  .anchor-figure img{aspect-ratio:4/3;}
  .anchor-figure figcaption{left:var(--s-4);right:var(--s-4);}
}

/* ==========================================================================
   Reduced motion
   ========================================================================== */

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}