/* Structural base shared by all three design directions. No aesthetics here. */
@font-face { font-family:"suisseIntl"; font-weight:400; src:url("../assets/fonts/SuisseIntl_Regular-s.p.fbe3d914.otf") format("opentype"); font-display:swap; }
@font-face { font-family:"suisseIntl"; font-weight:600; src:url("../assets/fonts/SuisseIntl_SemiBold-s.p.7dc3bb91.woff2") format("woff2"); font-display:swap; }
@font-face { font-family:"suisseIntl"; font-weight:700; src:url("../assets/fonts/SuisseIntl_Bold-s.p.e242c6e1.otf") format("opentype"); font-display:swap; }
@font-face { font-family:"suisseMono"; font-weight:400; src:url("../assets/fonts/SuisseIntlMono_Regular-s.p.eca58c1e.otf") format("opentype"); font-display:swap; }

:root{
  --sans:"suisseIntl","Helvetica Neue",Helvetica,Arial,sans-serif;
  --mono:"suisseMono",ui-monospace,"SF Mono",Menlo,monospace;
  --pad:clamp(20px,4.4vw,72px);
}
*{box-sizing:border-box;}
body{margin:0; font-family:var(--sans); overflow-x:hidden; -webkit-font-smoothing:antialiased;}
img{max-width:100%; display:block;}
a{color:inherit;}
.mono{font-family:var(--mono); font-size:11px; letter-spacing:-.03em; text-transform:uppercase; font-weight:400;}
.wrap{max-width:1480px; margin:0 auto; padding:0 var(--pad); width:100%;}

.dotmark{
  display:inline-block; width:11px; height:11px; margin-right:9px; vertical-align:-1px;
  background:
    radial-gradient(circle 1.4px at 1.5px 5.5px, currentColor 99%, transparent 100%),
    radial-gradient(circle 1.4px at 5.5px 1.5px, currentColor 99%, transparent 100%),
    radial-gradient(circle 1.4px at 5.5px 9.5px, currentColor 99%, transparent 100%),
    radial-gradient(circle 1.4px at 9.5px 5.5px, currentColor 99%, transparent 100%);
}

/* ------------------------------------------------------------- eco scroller */
.eco__scroll{height:780vh; position:relative;}
.eco__stage{position:sticky; top:0; height:100svh; overflow:hidden; padding:0 var(--pad);
  --cgap:14; --cpad:12; --cmeta:152; --railw:0.21; --railh:90; --railgap:8;}
.eco__intro{position:absolute; left:var(--pad); right:var(--pad); top:8vh; z-index:4;}
.eco__intro .h2{font-size:clamp(23px,2.9vw,44px); max-width:26ch;}
.conn{position:absolute; left:0; top:0; right:0; z-index:2; pointer-events:none;}
.conn__svg{display:block;}
.conn .cl{fill:none; stroke:currentColor; stroke-width:1;}
.conn .node{fill:currentColor;}
.conn .spark{fill:currentColor;}
.conn__label{
  position:absolute; left:0; right:0; text-align:center; z-index:5; pointer-events:none;
}

.cards{position:absolute; inset:0; z-index:3;}
.pcard{position:absolute; left:0; top:0; margin:0; overflow:hidden; min-width:0; cursor:pointer;
  -webkit-user-select:none; user-select:none; will-change:transform,width,height;}
.pcard:focus{outline:none;}
.pcard:focus-visible{outline:2px solid currentColor; outline-offset:2px;}
.pcard__vis{pointer-events:none;}
.pcard__vis{position:absolute; overflow:hidden;}
.pcard__meta{position:absolute;}
.pcard__num{display:block;}
.pcard__aud{display:block; opacity:var(--detailOp,1);}
.pcard.is-rail .pcard__aud,.pcard.is-rail .pcard__line{display:none;}
.pcard__for{display:none; margin:5px 0 0; font-size:12.5px; line-height:1.3; opacity:.75;}
.pcard.is-rail .pcard__for{display:block;}
.pcard__name{margin:6px 0 0; font-weight:600; letter-spacing:-.03em; line-height:1.04; font-size:var(--nameSize,20px);}
.pcard__line{margin:7px 0 0; font-size:13px; line-height:1.35; opacity:var(--detailOp,1);}
.pcard__bar{position:absolute; left:0; top:0; bottom:0; width:3px; transform:scaleY(0); transform-origin:top;
  transition:transform .5s cubic-bezier(.16,1,.3,1);}
.pcard.is-active .pcard__bar{transform:scaleY(1);}

.panels{position:absolute; inset:0; pointer-events:none; z-index:3;}
.panel{
  position:absolute; top:0; height:100%; margin:0;
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.06fr);
  gap:clamp(24px,3vw,56px); align-content:center; align-items:center;
  opacity:0; visibility:hidden; transform:translateY(14px);
  transition:opacity .4s ease, transform .55s cubic-bezier(.16,1,.3,1), visibility 0s linear .5s;
  padding:5vh 0;
}
.panel.is-on{opacity:1; visibility:visible; transform:none; transition-delay:0s,0s,0s;}
.panel__label{margin:0 0 18px; display:flex; align-items:center;}
.panel__h{margin:0; font-weight:600; letter-spacing:-.03em; line-height:1.05; font-size:clamp(23px,2.5vw,40px); max-width:19ch;}
.panel__p{margin:18px 0 0; font-size:clamp(13.5px,1vw,16px); line-height:1.55; max-width:52ch;}
.panel__vis{display:flex; align-items:center; justify-content:center;}
.panel__vis .mkwrap{width:100%; max-width:820px;}
.tt{font-family:var(--mono); font-size:.9em; letter-spacing:-.02em;}

.tiers{display:grid; grid-template-columns:1fr 1fr; margin:22px 0 0;}
.tier{padding:14px 16px 16px;}
.tier__lab{margin:0;}
.tier__h{margin:8px 0 0; font-weight:600; font-size:15.5px; letter-spacing:-.02em;}
.tier__p{margin:7px 0 0; font-size:12.5px; line-height:1.45;}

.stats{list-style:none; margin:24px 0 0; padding:0; display:grid; grid-template-columns:1fr 1fr;}
.stats li{display:flex; flex-direction:column; gap:6px; padding:14px 20px 0 0;}
.stats li+li{padding-left:20px;}
.stats b{font-weight:600; font-size:clamp(16px,1.35vw,21px); letter-spacing:-.03em; line-height:1;}
.stats span{font-size:12px; line-height:1.4;}

/* --------------------------------------------------------------- utilities */
.rv{opacity:0; transform:translateY(20px);}
.rv.is-in{opacity:1; transform:none; transition:opacity .7s ease, transform .8s cubic-bezier(.16,1,.3,1);}

/* ------------------------------------------------------------- responsive */
@media (max-width:900px){
  .eco__scroll{height:auto;}
  .eco__stage{position:static; height:auto; overflow:visible; padding:0 var(--pad) 50px;}
  .eco__intro{position:static; padding:0 0 28px;}
  .conn,.conn__label{display:none;}
  .cards{position:static; display:grid; gap:14px; margin-bottom:40px;}
  .pcard{position:static !important; transform:none !important; width:auto !important; height:auto !important; padding:12px;}
  .pcard__vis{position:static !important; width:auto !important; height:auto !important;}
  .pcard__meta{position:static !important; width:auto !important; margin-top:12px;}
  .pcard__name{font-size:19px !important;}
  .pcard__aud,.pcard__line{opacity:1 !important;}
  .panels{position:static; pointer-events:auto;}
  .panel{position:static !important; height:auto !important; width:auto !important; left:auto !important;
    opacity:1 !important; visibility:visible !important; transform:none !important;
    padding:34px 0; grid-template-columns:1fr !important; gap:22px !important;}
  .panel__vis{grid-template-columns:1fr !important; gap:20px !important;}
  .panel__label{flex-wrap:wrap;}
  .panel__h{max-width:none;}
  .panel__p{max-width:none;}
  .tiers{grid-template-columns:1fr !important;}
  /* stacked equation cells must size to their content, not to the flex basis */
  .eq{flex-direction:column;}
  .eq__part{flex:0 0 auto !important;}
  .engines{grid-template-columns:1fr !important;}
  .cta__h{flex-direction:column; align-items:flex-start !important; gap:12px !important;}
  .cta__big{line-height:.9;}
  .stats{grid-template-columns:1fr !important; gap:14px;}
  .stats li+li{padding-left:0; border-left:none !important;}
}
@media (prefers-reduced-motion:reduce){ *{animation:none !important; transition-duration:.01ms !important;} }


/* ------------------------------------------------- annotation notes (opt-in) */
.notes{display:none;}
.note{position:relative; margin:0;}
.note__n{position:absolute; left:-11px; top:-11px; width:22px; height:22px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size:11px; font-family:var(--mono);}
.note__t{margin:0; text-transform:none; letter-spacing:0;}
.note__d{margin:8px 0 0; font-size:13px; line-height:1.45;}
.note__c{margin:10px 0 0; font-family:var(--mono); font-size:11px; line-height:1.6; white-space:pre-wrap;}


/* rail cards are a control: the thumbnail comes back to full colour under the cursor
   (transform is driven inline by the scroller every frame, so it cannot carry the hover) */
.pcard.is-rail .pcard__vis{transition:opacity .3s ease, filter .3s ease;}
.pcard.is-rail:hover .pcard__vis{opacity:1 !important; filter:none !important;}
.pcard.is-rail:hover .pcard__name{color:inherit;}

/* ============ the pipeline dot lights the engine it has reached ============ */
.engine{transition:opacity .45s ease, border-color .45s ease, background .45s ease;}
.engines.is-armed .engine{opacity:.5;}
.engines.is-armed .engine.is-on{opacity:1;}
.pipe__dot{transition:left .95s cubic-bezier(.5,0,.15,1);}
.pipe__node{transition:transform .35s cubic-bezier(.16,1,.3,1), opacity .35s ease;}
@media (prefers-reduced-motion:reduce){ .engines.is-armed .engine{opacity:1;} }

/* ============ protocol connector: bus from the result into the engines ============ */
.econn{position:relative; height:96px; margin-top:clamp(22px,3vw,38px);}
.econn svg{position:absolute; inset:0; overflow:visible;}
.econn .cl{fill:none; stroke:currentColor; stroke-width:1; opacity:.75;}
.econn .node{fill:currentColor;}
.econn .spark{fill:currentColor; transition:transform .74s cubic-bezier(.5,0,.15,1);}
.econn .spark.is-drop{transition:transform .42s cubic-bezier(.5,0,.2,1);}
.engines{margin-top:0 !important;}
@media (max-width:900px){ .econn{display:none;} }
@media (prefers-reduced-motion:reduce){ .econn .spark{display:none;} }

/* the ecosystem intro carries a supporting line beside the headline */
.eco__introrow{display:block;}
.eco__sub{margin:clamp(14px,1.6vw,22px) 0 0; max-width:104ch; font-size:clamp(13px,1vw,16px); line-height:1.55;}
@media (max-width:900px){ .eco__sub{max-width:none;} }

/* the depth cards toggle the Skylight demo */
.tier{cursor:pointer; -webkit-user-select:none; user-select:none;}
.tier:focus{outline:none;}
.tier:focus-visible{outline:2px solid currentColor; outline-offset:-2px;}


/* ---- the protocol section fits a screen: nothing below the fold ---- */
.hfpp .h2{font-size:clamp(24px,2.8vw,40px);}
.hfpp .kicker{margin-bottom:14px;}
.hfpp .lede{margin-top:14px; font-size:clamp(13.5px,1vw,16px); max-width:74ch;}
.hfpp .eq{margin-top:clamp(22px,2.6vw,34px);}
.hfpp .eq__part{padding:14px 18px;}
.hfpp .eq__part b{font-size:clamp(15px,1.35vw,21px);}
.hfpp .econn{height:52px; margin-top:clamp(10px,1.3vw,18px);}
.hfpp .engine{padding:16px 16px 20px;}
.hfpp .engine h4{margin-top:14px; font-size:clamp(18px,1.6vw,25px);}
.hfpp .engine__sub{margin-top:6px;}
.hfpp .engine p:last-child{margin-top:9px; font-size:12px; line-height:1.45;}
@media (min-width:901px){ .hfpp{padding-top:clamp(38px,6vh,88px); padding-bottom:clamp(38px,6vh,88px);} }