/* ============================================================================
   OpenMaieutica — site.css
   Proportion: every measure below descends from φ = 1.618.
   Space is a Fibonacci series (8 13 21 34 55 89 144); the type scale steps by
   φ at the display end and √φ in the reading sizes; the page splits 38.2/61.8.
   ========================================================================== */

/* ---- tokens -------------------------------------------------------------- */
:root{
  --phi: 1.618;

  --paper:      #EDEFEA;
  --paper-2:    #F5F6F2;
  --paper-3:    #E4E7E0;
  --ink:        #424652;
  --ink-deep:   #22252E;
  --ink-soft:   #6E7382;
  --blue:       #6D8BFD;
  --blue-deep:  #4C6BE0;

  --stamp:      #0B6B67;
  --cert:       #393582;
  --explorer:   #812566;
  --review:     #9A4D17;
  --agora:      #527016;

  --rule:        rgba(66,70,82,.16);
  --rule-strong: rgba(66,70,82,.34);

  /* Fibonacci space */
  --s1: 8px;  --s2: 13px; --s3: 21px; --s4: 34px;
  --s5: 55px; --s6: 89px; --s7: 144px;

  --f-display: 'Bricolage Grotesque','Inter',system-ui,sans-serif;
  --f-body:    'Spectral',Georgia,'Times New Roman',serif;
  --f-mono:    'JetBrains Mono',ui-monospace,'SFMono-Regular',Menlo,monospace;

  --t-mono: .75rem;
  --t-s:    .9375rem;
  --t-base: 1.0625rem;
  --t-m:    clamp(1.125rem, 1.02rem + .45vw, 1.35rem);
  --t-l:    clamp(1.375rem, 1.18rem + .85vw, 1.75rem);
  --t-xl:   clamp(2rem, 1.42rem + 2.5vw, 3.05rem);

  --wrap: 1180px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---- reset --------------------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--f-body); font-size:var(--t-base); line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; }
h1,h2,h3,p,ol,ul{ margin:0; }
ol,ul{ padding:0; list-style:none; }
:focus-visible{ outline:2px solid var(--blue-deep); outline-offset:3px; border-radius:2px; }

.wrap{ width:min(100% - var(--s4)*2, var(--wrap)); margin-inline:auto; }

.skip{
  position:absolute; left:-9999px; top:0; z-index:99;
  background:var(--ink); color:var(--paper); padding:var(--s2) var(--s3);
  font-family:var(--f-mono); font-size:var(--t-mono);
}
.skip:focus{ left:var(--s2); top:var(--s2); }

/* ---- shared type --------------------------------------------------------- */
.eyebrow{
  font-family:var(--f-mono); font-size:var(--t-mono); font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft);
  display:flex; align-items:center; gap:var(--s1);
}
.h2{
  font-family:var(--f-display); font-weight:700; font-size:var(--t-xl);
  font-variation-settings:'wdth' 88; letter-spacing:-.035em; line-height:1.02;
  margin-top:var(--s3); color:var(--ink);
}
.prose{ font-size:var(--t-m); line-height:1.62; color:#4E5361; max-width:58ch; }
.w-ink{ color:var(--ink); }
.w-blue{ color:var(--blue); }

/* Application names carry their own colour in the second half of the word:
   Open|Stamp, Merit|Cert, Open|Explorer. `--accent` is inherited from the card
   or the step; in running prose it is set inline on .an. */
.a2{ color:var(--accent); }
.an{ white-space:nowrap; }

/* ---- masthead ------------------------------------------------------------ */
.masthead{
  position:sticky; top:0; z-index:20;
  background:color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter:blur(10px) saturate(1.2);
  border-bottom:1px solid var(--rule);
}
.masthead-in{
  width:min(100% - var(--s4)*2, var(--wrap)); margin-inline:auto;
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--s3); height:62px;
}
.brand{ display:flex; align-items:center; gap:var(--s1); text-decoration:none; }
.brand img{ width:26px; height:26px; }
.brand-word{
  font-family:var(--f-display); font-weight:700; font-size:1.05rem;
  letter-spacing:-.035em; line-height:1;
}
.nav{ display:flex; align-items:center; gap:var(--s3); }
.nav a{
  font-family:var(--f-mono); font-size:var(--t-mono); letter-spacing:.06em;
  text-decoration:none; color:var(--ink-soft); transition:color .2s var(--ease);
  white-space:nowrap;
}
.nav a:hover{ color:var(--ink); }
.nav-cta{
  border:1px solid var(--rule-strong); border-radius:2px;
  padding:7px 13px; color:var(--ink) !important;
}
.nav-cta:hover{ background:var(--ink); color:var(--paper) !important; border-color:var(--ink); }

/* ============================================================================
   HERO — the cosmos
   ========================================================================== */
.hero{
  position:relative; min-height:calc(100svh - 62px);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:var(--s4); padding:var(--s4) var(--s4) var(--s5);
  overflow:hidden;
}
.hero::before{  /* a single soft light behind the system */
  content:''; position:absolute; left:50%; top:46%; transform:translate(-50%,-50%);
  width:min(140vw,1400px); aspect-ratio:1; pointer-events:none;
  background:radial-gradient(circle, rgba(109,139,253,.14) 0%, rgba(109,139,253,.05) 38%, transparent 66%);
}
.hero > *{ position:relative; }
.hero-eyebrow .dot{
  width:6px; height:6px; border-radius:50%; background:var(--blue);
  box-shadow:0 0 0 4px rgba(109,139,253,.22);
}

.stage{
  --sz: 680px;
  position:relative;
  width:min(72vh, 92vw, 760px);
  width:min(72svh, 92vw, 760px);
  aspect-ratio:1;
  flex:none;
}

.rings{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.rings .ring{ fill:none; stroke:rgba(66,70,82,.22); stroke-width:1; vector-effect:non-scaling-stroke; }
.rings .ring-dashed{ stroke-dasharray:5 8; stroke:rgba(66,70,82,.3); transition:opacity 1s var(--ease) .3s; }
.rings .ring-faint{ stroke:rgba(66,70,82,.11); }
.rings .tick{ stroke:var(--rule-strong); stroke-width:1; vector-effect:non-scaling-stroke; }
.rings .tick-minor{ stroke:rgba(66,70,82,.2); }
.rings .spoke{ stroke:rgba(66,70,82,.10); stroke-width:1; vector-effect:non-scaling-stroke; }

/* the central body */
.core{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:calc(var(--sz) * .256); aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle at 50% 42%, var(--paper-2) 0%, var(--paper) 72%);
  border:1px solid var(--rule-strong);
  box-shadow:0 0 0 calc(var(--sz)*.008) var(--paper), 0 0 0 calc(var(--sz)*.0095) var(--rule);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:calc(var(--sz) * .012);
  z-index:6; pointer-events:none;
}
.core-mark{ width:calc(var(--sz) * .092); height:auto; }
.core-word{
  font-family:var(--f-display); font-weight:700;
  font-size:calc(var(--sz) * .029); letter-spacing:-.035em; line-height:1;
  white-space:nowrap;
}
/* An invisible disc over the central body: the name is a question too, and
   asking it opens the same kind of card as the applications. */
.core-hit{
  all:unset; box-sizing:border-box; position:absolute; inset:0;
  border-radius:50%; cursor:pointer; pointer-events:auto;
  border:1px solid transparent;
  transition:border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.core-hit:hover,.core-hit:focus-visible{
  border-color:color-mix(in srgb, var(--blue) 55%, transparent);
  box-shadow:0 0 0 calc(var(--sz)*.006) rgba(109,139,253,.12);
}

/* Both layers cover the whole stage, so they must not swallow the pointer:
   only the bodies themselves are hoverable. */
.orbiters,.movers{ position:absolute; inset:0; pointer-events:none; }
.orbiters{ z-index:4; }
.movers{ z-index:5; }

/* the moving spheres */
.orbiter{
  position:absolute; left:0; top:0; width:calc(var(--sz)*.066); aspect-ratio:1;
  pointer-events:auto; will-change:transform;
}
.orbiter-btn{
  all:unset; box-sizing:border-box; display:grid; place-items:center;
  width:100%; height:100%; border-radius:50%; cursor:pointer;
  background:var(--paper-2);
  border:1px solid color-mix(in srgb, var(--accent) 42%, transparent);
  box-shadow:0 1px 2px rgba(34,37,46,.07);
  transition:transform .32s var(--ease), box-shadow .32s var(--ease), border-color .2s;
}
.orbiter-btn img{ width:58%; height:auto; }
.orbiter:hover .orbiter-btn,
.orbiter-btn:focus-visible{
  transform:scale(1.14);
  border-color:var(--accent);
  box-shadow:0 5px 16px rgba(34,37,46,.14);
}
.orbiter-label{
  position:absolute; left:50%; top:calc(100% + var(--s1)); transform:translateX(-50%);
  font-family:var(--f-mono); font-size:clamp(9px, calc(var(--sz)*.0155), 12px);
  letter-spacing:.06em; white-space:nowrap; color:var(--ink-soft);
  opacity:0; transition:opacity .3s var(--ease); pointer-events:none;
}
.orbiter:hover .orbiter-label,
.orbiter:focus-within .orbiter-label,
.stage.is-intro .orbiter-label{ opacity:1; }

/* what lies under — squares, because they do not turn */
.mover{
  position:absolute; left:0; top:0; width:calc(var(--sz)*.060); aspect-ratio:1;
  pointer-events:auto;
}
.mover-btn{
  all:unset; box-sizing:border-box; display:grid; place-items:center;
  width:100%; height:100%; border-radius:calc(var(--sz)*.008); cursor:pointer;
  background:var(--paper-2); border:1px solid var(--rule-strong);
  box-shadow:0 1px 2px rgba(34,37,46,.06);
  transition:transform .32s var(--ease), box-shadow .32s var(--ease), border-color .2s;
}
.mover-btn img{ width:62%; height:auto; object-fit:contain; }
.mover:hover .mover-btn,
.mover-btn:focus-visible{
  transform:scale(1.1);
  border-color:var(--ink);
  box-shadow:0 5px 16px rgba(34,37,46,.14);
}
.mover-label{
  position:absolute; left:50%; top:calc(100% + 6px); transform:translateX(-50%);
  font-family:var(--f-mono); font-size:clamp(8px, calc(var(--sz)*.0135), 11px);
  letter-spacing:.1em; text-transform:uppercase; white-space:nowrap; color:var(--ink-soft);
  pointer-events:none;
}

/* the hover card */
.peek{
  position:absolute; left:0; top:0; width:min(268px, 74%); z-index:9;
  background:var(--paper-2); border:1px solid var(--rule-strong); border-radius:3px;
  padding:var(--s2) var(--s3) var(--s3);
  box-shadow:0 10px 30px rgba(34,37,46,.13);
  pointer-events:none; opacity:0; transition:opacity .18s var(--ease);
  border-top:2px solid var(--accent);
}
.peek.is-on{ opacity:1; }
.peek-role{
  font-family:var(--f-mono); font-size:10.5px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--accent);
}
.peek-name{
  font-family:var(--f-display); font-weight:700; font-size:1.22rem;
  letter-spacing:-.035em; line-height:1.1; margin:6px 0 var(--s1);
}
.peek-p{ font-size:.9rem; line-height:1.5; color:#4E5361; }
.peek-status{
  display:inline-block; margin-top:var(--s2);
  font-family:var(--f-mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-soft); border:1px solid var(--rule-strong); border-radius:2px; padding:3px 7px;
}

/* hero footer */
.hero-foot{ display:flex; flex-direction:column; align-items:center; gap:var(--s3); text-align:center; }
.lede{
  font-size:var(--t-m); line-height:1.55; color:#4E5361;
  max-width:56ch; text-wrap:balance;
}
.cta-row{ display:flex; flex-wrap:wrap; gap:var(--s2); justify-content:center; }
.hint{
  font-family:var(--f-mono); font-size:11px; line-height:1.6; letter-spacing:.04em;
  color:var(--ink-soft); opacity:.85; max-width:70ch;
}

/* ---- buttons ------------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; gap:var(--s2);
  font-family:var(--f-display); font-weight:600; font-size:.95rem; letter-spacing:-.01em;
  text-decoration:none; padding:12px 21px; border-radius:2px; border:1px solid transparent;
  transition:background .22s var(--ease), color .22s var(--ease), border-color .22s var(--ease), transform .22s var(--ease);
}
.btn:hover{ transform:translateY(-1px); }
.btn-meta{
  font-family:var(--f-mono); font-size:9.5px; letter-spacing:.1em;
  border:1px solid currentColor; border-radius:2px; padding:2px 5px; opacity:.55;
}
.btn-primary{ background:var(--ink); color:var(--paper); }
.btn-primary:hover{ background:var(--blue-deep); }
.btn-ghost{ border-color:var(--rule-strong); color:var(--ink); }
.btn-ghost:hover{ border-color:var(--ink); background:rgba(66,70,82,.05); }
.btn-light{ background:var(--paper); color:var(--ink-deep); }
.btn-light:hover{ background:var(--blue); color:#fff; }
.btn-quiet{ border-color:rgba(237,239,234,.3); color:var(--paper); }
.btn-quiet:hover{ border-color:var(--paper); background:rgba(237,239,234,.08); }

/* ============================================================================
   BANDS
   ========================================================================== */
.band{ padding-block:clamp(var(--s5), 8vw, var(--s7)); border-top:1px solid var(--rule); }
.band-alt{ background:var(--paper-2); }

.split{ display:grid; grid-template-columns:38.2fr 61.8fr; gap:var(--s5); align-items:end; }
.split-b{ padding-bottom:4px; }

/* ---- the name ------------------------------------------------------------ */
.origin{ display:grid; grid-template-columns:38.2fr 61.8fr; gap:var(--s5); align-items:center; }
.origin-fig{ margin:0; display:flex; flex-direction:column; align-items:center; gap:var(--s3); }
.origin-fig img{ width:min(230px, 62%); height:auto; }
.origin-cap{
  font-family:var(--f-mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-soft); text-align:center;
}
.origin-body .h2{ margin-bottom:var(--s4); }
.origin-body .prose + .prose{ margin-top:var(--s3); }

/* ---- the four claims ----------------------------------------------------- */
.claims{
  margin-top:var(--s6);
  display:grid; grid-template-columns:repeat(2,1fr);
  column-gap:var(--s5); row-gap:var(--s5);
}
.claim{ position:relative; padding-left:var(--s5); }
.claim-mark{
  position:absolute; left:0; top:-6px;
  font-family:var(--f-body); font-size:2.1rem; line-height:1; color:var(--blue);
  opacity:.85;
}
.claim-h{
  font-family:var(--f-display); font-weight:700; font-size:var(--t-l);
  letter-spacing:-.03em; line-height:1.15; margin-bottom:var(--s2);
  color:var(--ink);
}
.claim-p{ color:#5A5F6D; font-size:var(--t-base); line-height:1.6; }
.claim.is-key .claim-mark{ opacity:1; }

/* ---- cards --------------------------------------------------------------- */
.row-label{
  display:flex; align-items:center; gap:var(--s3);
  margin-top:var(--s6); margin-bottom:var(--s3);
  font-family:var(--f-mono); font-size:var(--t-mono); letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-soft);
}
.row-label::after{ content:''; flex:1; height:1px; background:var(--rule); }

.cards{ display:grid; gap:var(--s3); }
.cards-3{ grid-template-columns:repeat(3,1fr); }
.cards-2{ grid-template-columns:repeat(2,1fr); }

.card{
  position:relative; background:var(--paper); border:1px solid var(--rule);
  border-radius:3px; padding:var(--s4) var(--s3) var(--s4);
  transition:border-color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
}
.card::before{
  content:''; position:absolute; left:-1px; right:-1px; top:-1px; height:2px;
  background:var(--accent); opacity:.9; border-radius:3px 3px 0 0;
}
.card:hover{ transform:translateY(-3px); box-shadow:0 12px 28px rgba(34,37,46,.08); border-color:var(--rule-strong); }
.card.is-flash{ border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.card-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:var(--s2); }
.card-mark{ width:52px; height:52px; object-fit:contain; }
.chip{
  font-family:var(--f-mono); font-size:9.5px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--accent); border:1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  border-radius:2px; padding:4px 8px; white-space:nowrap;
}
.chip-soon{ color:var(--ink-soft); border-color:var(--rule-strong); }
.card-h{
  font-family:var(--f-display); font-weight:700; font-size:1.55rem;
  letter-spacing:-.035em; line-height:1; margin-top:var(--s3);
}
.card-role{
  font-family:var(--f-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--accent); margin-top:var(--s1);
}
.card-p{ margin-top:var(--s2); font-size:var(--t-s); line-height:1.62; color:#5A5F6D; }
.card-soon{ background:transparent; }
.card-soon::before{ opacity:.42; }
.card-mover{ background:var(--paper-2); }
.card-mover::before{ opacity:.55; }

/* ---- pipeline ------------------------------------------------------------ */
/* A chain of ouroboroi: the fourth move feeds the first, so the divider is a
   cycle rather than a rule. `repeat: round` rescales the tile so a whole
   number of snakes fits the width — none of them is ever cut in half. */
.ouroboros{
  height:46px; margin-top:var(--s6); margin-bottom:var(--s5);
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='41'%20height='46'%20viewBox='0%200%2041%2046'%3E%3Cpath%20d='M17.1,6.8L18.7,6.1L20.5,5.7L22.4,5.5L24.3,5.6L26.1,5.8L28.0,6.3L29.8,7.1L31.5,8.0L33.1,9.1L34.6,10.4L36.0,11.9L37.1,13.6L38.1,15.3L38.9,17.2L39.5,19.2L39.9,21.2L40.0,23.2L39.9,25.3L39.6,27.3L39.1,29.3L38.4,31.3L37.5,33.1L36.3,34.9L35.0,36.5L33.6,38.0L31.9,39.3L30.2,40.4L28.3,41.4L26.3,42.1L24.3,42.6L22.2,43.0L20.1,43.0L18.0,42.9L15.9,42.6L13.9,42.0L11.9,41.2L10.0,40.2L8.3,39.0L6.6,37.7L5.2,36.1L3.8,34.5L2.7,32.7L1.8,30.7L1.1,28.7L0.5,26.7L0.3,24.5L0.2,22.4L0.3,20.3L0.7,18.2L1.3,16.1L2.2,14.1L3.2,12.2L4.4,10.5L5.8,8.8L7.4,7.4L9.1,6.0L10.7,8.5L9.2,9.6L7.8,10.8L6.6,12.2L5.6,13.7L4.6,15.3L3.9,17.0L3.4,18.8L3.0,20.6L2.8,22.5L2.9,24.3L3.1,26.2L3.5,28.0L4.1,29.8L4.9,31.5L5.9,33.1L7.0,34.5L8.3,35.9L9.7,37.1L11.3,38.2L12.9,39.1L14.6,39.8L16.4,40.4L18.3,40.7L20.1,40.8L22.0,40.8L23.9,40.5L25.7,40.1L27.5,39.5L29.2,38.6L30.8,37.6L32.3,36.5L33.6,35.2L34.8,33.7L35.9,32.2L36.8,30.5L37.4,28.7L37.9,26.9L38.3,25.1L38.4,23.2L38.3,21.3L37.9,19.5L37.5,17.7L36.8,15.9L35.9,14.3L34.8,12.7L33.6,11.3L32.3,10.1L30.8,9.0L29.2,8.1L27.5,7.3L25.8,6.8L24.1,6.5L22.3,6.4L20.5,6.5L18.8,6.8L17.2,7.3ZM8.5,5.2L8.8,4.7L9.2,4.1L9.6,3.6L10.0,3.2L10.5,2.8L11.0,2.4L11.5,2.1L12.2,2.1L12.8,2.1L13.5,2.0L14.1,2.0L14.7,2.0L15.3,2.0L15.9,2.0L16.5,2.0L17.1,2.0L17.7,2.1L18.2,2.1L18.8,2.2L19.4,2.3L19.9,2.4L20.5,2.4L20.5,3.6L20.0,3.7L19.5,3.8L19.0,3.9L18.5,4.1L18.0,4.3L17.5,4.5L17.0,4.7L16.5,4.9L16.1,5.2L15.6,5.4L15.2,5.7L14.8,6.0L14.4,6.4L14.1,6.8L13.7,7.1L13.3,7.3L12.8,7.4L12.3,7.4L11.8,7.5L11.2,7.5L10.7,7.6L10.1,7.6ZM12.4,3.5m-.62,0a.62,.62,0,1,0,1.24,0a.62,.62,0,1,0,-1.24,0Z'%20fill='%23424652'%20fill-opacity='.45'/%3E%3C/svg%3E");
  background-size:41px 46px;
  background-repeat:round no-repeat;
  background-position:left center;
}
.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s4); }
.step{ position:relative; padding-top:var(--s2); }
.step-n{
  font-family:var(--f-mono); font-size:var(--t-mono); letter-spacing:.14em; color:var(--ink-soft);
}
.step-h{
  font-family:var(--f-display); font-weight:700; font-size:var(--t-l);
  letter-spacing:-.035em; line-height:1; margin-top:var(--s2);
}
.step-by{
  font-family:var(--f-mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-soft); margin-top:6px;
}
.step-p{ margin-top:var(--s2); font-size:var(--t-s); line-height:1.62; color:#5A5F6D; }

/* ---- the cave: an early recording ---------------------------------------- */
.video{ margin-top:var(--s6); }
.video-frame{
  position:relative; aspect-ratio:16/9;
  width:min(100%, 860px); margin-inline:auto;
  border:1px solid var(--rule-strong); border-radius:3px; overflow:hidden;
  background:var(--ink-deep);
  box-shadow:0 18px 44px rgba(34,37,46,.12);
}
.video-frame iframe{
  position:absolute; inset:0; width:100%; height:100%; border:0; display:block;
}
.video-note{
  width:min(100%, 860px); margin:var(--s3) auto 0;
  font-family:var(--f-mono); font-size:11px; line-height:1.7; letter-spacing:.03em;
  color:var(--ink-soft);
}
.video-note a{ color:var(--ink); border-bottom:1px solid var(--rule-strong); text-decoration:none; }
.video-note a:hover{ border-bottom-color:var(--ink); }

/* ---- whitepaper band ----------------------------------------------------- */
.paperband{ background:var(--ink-deep); color:var(--paper); padding-block:clamp(var(--s5), 7vw, var(--s6)); }
.paperband-in{ display:grid; grid-template-columns:61.8fr 38.2fr; gap:var(--s5); align-items:center; }
.pb-word{ width:min(340px,72%); height:auto; }
.pb-p{ margin-top:var(--s3); font-size:var(--t-m); line-height:1.6; color:#C6CAD3; max-width:52ch; }
.paperband-b{ display:flex; flex-direction:column; gap:var(--s2); align-items:flex-start; }

/* Two ways to check the document without asking us: the transaction that
   anchored it, and the pin that keeps it fetchable. */
.wp-verify{
  width:100%; margin-top:var(--s3);
  border:1px solid rgba(237,239,234,.18); border-radius:3px;
  padding:var(--s2) var(--s3) var(--s2);
}
.wp-verify-h{
  font-family:var(--f-mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  color:#8E94A3; margin-bottom:var(--s2);
}
.wp-row{
  display:grid; grid-template-columns:minmax(0,1fr) auto; gap:2px var(--s2);
  padding:var(--s2) 0; text-decoration:none;
  border-top:1px solid rgba(237,239,234,.12);
}
.wp-row:first-of-type{ border-top:0; padding-top:0; }
.wp-row:last-of-type{ padding-bottom:0; }
.wp-row-k{
  grid-column:1; grid-row:1;
  font-family:var(--f-mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase;
  color:#8E94A3;
}
.wp-row-v{
  grid-column:1; grid-row:2;
  font-family:var(--f-mono); font-size:12px; color:var(--paper);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.wp-row-a{
  grid-column:2; grid-row:1 / 3; align-self:center;
  font-family:var(--f-mono); font-size:10.5px; color:var(--blue); white-space:nowrap;
  transition:color .2s var(--ease);
}
.wp-row:hover .wp-row-a{ color:#fff; }
.wp-row:hover .wp-row-v{ color:#fff; }

/* ---- footer -------------------------------------------------------------- */
.foot{
  border-top:1px solid var(--rule); padding-block:var(--s5) var(--s4);
  background:var(--paper-2);
}
.foot-in{ display:grid; grid-template-columns:38.2fr 61.8fr; gap:var(--s5); align-items:start; }
.foot-a img{ width:min(230px,80%); }
.foot-note{
  margin-top:var(--s2); font-family:var(--f-body); font-style:italic;
  font-size:var(--t-s); color:var(--ink-soft);
}
.foot-small{ font-size:.85rem; line-height:1.6; color:var(--ink-soft); max-width:64ch; }
.foot-links{ margin-top:var(--s2); display:flex; flex-wrap:wrap; gap:var(--s1); font-family:var(--f-mono); font-size:11px; }
.foot-links a{ text-decoration:none; border-bottom:1px solid var(--rule-strong); }
.foot-links a:hover{ color:var(--ink); }

/* ============================================================================
   INTRO — one orchestrated page-load, then it never plays again
   ========================================================================== */
.stage.is-intro .ring-draw{
  stroke-dasharray:1; stroke-dashoffset:1;
  animation:draw 1.5s var(--ease) forwards;
  animation-delay:calc(var(--i) * .11s);
}
@keyframes draw{ to{ stroke-dashoffset:0; } }
.stage.is-intro .ring-dashed{ opacity:0; }
.stage.is-intro .orbiter{ animation:arrive .8s var(--ease) backwards; animation-delay:calc(.5s + var(--i) * .13s); }
.stage.is-intro .mover{ animation:arrive .9s var(--ease) backwards; animation-delay:calc(1.5s + var(--i) * .14s); }
@keyframes arrive{ from{ opacity:0; } to{ opacity:1; } }
.stage.is-intro .core{ animation:bloom 1s var(--ease) backwards; }
@keyframes bloom{ from{ opacity:0; transform:translate(-50%,-50%) scale(.9); } }

/* ============================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1180px){
  .nav{ gap:var(--s2); }
  .nav a{ font-size:11px; }
}
@media (max-width: 940px){
  .split{ grid-template-columns:1fr; gap:var(--s3); align-items:start; }
  .split-b{ padding-bottom:0; }
  .claims{ grid-template-columns:1fr; row-gap:var(--s4); }
  .cards-3{ grid-template-columns:repeat(2,1fr); }
  .steps{ grid-template-columns:repeat(2,1fr); gap:var(--s4) var(--s3); }
  .origin{ grid-template-columns:1fr; gap:var(--s4); }
  .origin-fig img{ width:min(180px, 46%); }
  .paperband-in{ grid-template-columns:1fr; gap:var(--s4); }
  .foot-in{ grid-template-columns:1fr; gap:var(--s4); }
  .nav a:not(.nav-cta){ display:none; }
}
@media (max-width: 640px){
  :root{ --t-base:1rem; }
  .wrap{ width:min(100% - var(--s3)*2, var(--wrap)); }
  .masthead-in{ width:min(100% - var(--s3)*2, var(--wrap)); }
  .cards-3,.cards-2{ grid-template-columns:1fr; }
  .steps{ grid-template-columns:1fr; }
  .hero{ padding-inline:var(--s3); gap:var(--s3); }
  .stage{ width:min(94vw, 62vh); width:min(94vw, 62svh); }
  .claim{ padding-left:var(--s4); }
  .peek{ width:calc(100% - var(--s3)*2); }
  .btn{ font-size:.9rem; padding:11px 17px; }
  .mover{ width:calc(var(--sz)*.074); }
  .mover-label{ display:none; }
  .ouroboros{ margin-top:var(--s5); margin-bottom:var(--s4); }
  .video{ margin-top:var(--s5); }
}

/* ============================================================================
   REDUCED MOTION — the cosmos is drawn at rest
   ========================================================================== */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  .stage.is-intro .orbiter-label{ opacity:1; }
}