/* ==========================================================================
   BRAND TOKENS — edit this block first. Everything else derives from it.
   ========================================================================== */
:root{
  /* accent — Corio band teal. --brand carries white text (7.4:1), so it is the
     deep weight; --brand-lite is decorative only and must never sit under text. */
  --brand:        #175E68;
  --brand-600:    #0E4550;
  --brand-lite:   #4FB3A8;
  --brand-tint:   rgba(23,94,104,.10);
  --brand-tint-2: rgba(23,94,104,.22);

  /* aurora palette — the storm, not the sunset. Teal bands with one brass
     ember, matching brand/palette.md. */
  --mint:   #8FD8CE;
  --aqua:   #A7DEDA;
  --lilac:  #6FBFB4;
  --orchid: #3E8C8C;
  --blush:  #E4CE8F;
  /* zero-alpha twins — never use the `transparent` keyword in a gradient:
     it interpolates through rgba(0,0,0,0) and greys the midpoint out. */
  --mint-0:   rgba(143,216,206,0);
  --aqua-0:   rgba(167,222,218,0);
  --lilac-0:  rgba(111,191,180,0);
  --orchid-0: rgba(62,140,140,0);
  --blush-0:  rgba(228,206,143,0);

  /* ink & surfaces — storm slate on bone */
  --ink:      #0E1C24;
  --ink-soft: #1B2F38;
  --muted:    #4A555C;
  --canvas:   #FBFAF7;
  --card:     #ffffff;
  --line:     rgba(14,28,36,.10);
  --foot:     #0E1C24;

  /* semantic marks in the comparison table. These are the table's ONLY carrier
     of good/partial/bad, so they are held to the 3:1 non-text contrast floor
     against both white and their own tinted chip. The bright web-default
     versions (#22c55e / #f59e0b) measured 2.28:1 and 2.15:1 and failed it. */
  --good: #15803D;
  --bad:  #DC2626;
  --part: #B45309;

  /* neutral used for diagram strokes and inactive rails. Previously an
     undocumented rgba(92,102,122) inherited from the template, which is not a
     Corio colour; this is --ink at matched weight. */
  --rail:      rgba(14,28,36,.20);
  --rail-soft: rgba(14,28,36,.14);

  /* shape & motion */
  --pill:   999px;
  --r-card: 28px;
  --r-node: 18px;
  --sh-card: 0 18px 48px rgba(14,28,36,.07);
  --sh-nav:  0 10px 30px rgba(14,28,36,.12);
  --sh-lift: 0 24px 60px rgba(14,28,36,.14);
  --ease:  cubic-bezier(.22,1,.36,1);
  --ease2: cubic-bezier(.4,0,.2,1);

  --gutter: clamp(20px, 5vw, 84px);
  --maxw: 1240px;
}

/* ========================================================================== BASE ========================================================================== */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:104px}
body{
  margin:0;
  background:var(--canvas);
  color:var(--ink);
  font-family:Nunito,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:17px;
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
h1,h2,h3,p{margin:0}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}

.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.sr-only,.skip{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip:focus{position:fixed;top:12px;left:12px;width:auto;height:auto;clip:auto;z-index:999;padding:10px 16px;background:#fff;border-radius:var(--pill);box-shadow:var(--sh-nav)}
:focus-visible{outline:2px solid var(--brand);outline-offset:3px;border-radius:6px}
/* On the dark footer the brand ring measures 2.34:1. Invert it there. */
.foot :focus-visible,.code :focus-visible{outline-color:#EDE7DA}
::selection{background:var(--brand-tint-2);color:var(--ink)}
html{scrollbar-color:var(--rail) transparent}
::-webkit-scrollbar{width:12px;height:12px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--rail);border-radius:var(--pill);
  border:3px solid var(--canvas);background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background:rgba(14,28,36,.34)}

/* ========================================================================== AURORA ==========================================================================
   Fixed atmospheric backdrop: three blurred teal bands over a masked
   engineering grid, drifting on a scroll-parallaxed fixed layer.
   ========================================================================== */
.aurora{position:fixed;inset:0;z-index:-1;opacity:.94;pointer-events:none;overflow:hidden;
  transform:translate3d(0,var(--aurora-y,0px),0);will-change:transform}
.aurora__blob{position:absolute;filter:blur(30px) saturate(1.38);will-change:transform;
  animation:morph 26s ease-in-out infinite alternate}
.aurora__blob--1{
  left:12%;top:4%;width:58vw;height:66vh;opacity:1;
  background:
    radial-gradient(38% 44% at 32% 42%, var(--mint)  0%, var(--mint-0)  64%),
    radial-gradient(42% 46% at 70% 32%, var(--lilac) 0%, var(--lilac-0) 66%),
    radial-gradient(46% 50% at 54% 78%, var(--aqua)  0%, var(--aqua-0)  68%);
  border-radius:56% 44% 62% 38% / 48% 58% 42% 52%;
}
.aurora__blob--2{
  right:4%;top:30%;width:46vw;height:58vh;opacity:.8;
  animation-duration:32s;animation-delay:-9s;
  background:
    radial-gradient(42% 46% at 58% 40%, var(--orchid) 0%, var(--orchid-0) 66%),
    radial-gradient(38% 42% at 30% 70%, var(--blush)  0%, var(--blush-0)  64%),
    radial-gradient(44% 48% at 78% 76%, var(--mint)   0%, var(--mint-0)   68%);
  border-radius:44% 56% 38% 62% / 58% 42% 58% 42%;
}
.aurora__blob--3{
  left:20%;bottom:-8%;width:52vw;height:50vh;opacity:.68;
  animation-duration:38s;animation-delay:-17s;
  background:
    radial-gradient(40% 46% at 42% 46%, var(--lilac) 0%, var(--lilac-0) 66%),
    radial-gradient(44% 48% at 76% 62%, var(--aqua)  0%, var(--aqua-0)  68%);
  border-radius:62% 38% 48% 52% / 42% 56% 44% 58%;
}
/* Transform only. This used to interpolate border-radius as well, which is not
   a compositable property: every frame repainted three ~900x600 surfaces each
   carrying a 30px blur. */
@keyframes morph{
  0%  {transform:translate3d(0,0,0)      rotate(0deg)  scale(1)}
  50% {transform:translate3d(3%,-2%,0)   rotate(6deg)  scale(1.06)}
  100%{transform:translate3d(-2%,3%,0)   rotate(-5deg) scale(.98)}
}
/* faint engineering grid, faded out at the edges */
.aurora__grid{position:absolute;inset:0;opacity:.55;
  background-image:
    linear-gradient(rgba(14,28,36,.05) 1px, rgba(14,28,36,0) 1px),
    linear-gradient(90deg, rgba(14,28,36,.05) 1px, rgba(14,28,36,0) 1px);
  background-size:88px 88px;
  -webkit-mask-image:radial-gradient(72% 62% at 50% 42%, #000 40%, rgba(0,0,0,0) 100%);
          mask-image:radial-gradient(72% 62% at 50% 42%, #000 40%, rgba(0,0,0,0) 100%)}

/* ========================================================================== BUTTONS ========================================================================== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  padding:12px 22px;border-radius:var(--pill);font-weight:700;font-size:15px;
  transition:transform .16s ease, background .16s ease, box-shadow .16s ease, border-color .16s ease;
  white-space:nowrap}
.btn:hover{transform:translateY(-1px)}
.btn--lg{padding:16px 34px;font-size:17px}
.btn--brand{background:var(--brand);color:#fff;box-shadow:0 10px 26px rgba(23,94,104,.28)}
.btn--brand:hover{background:var(--brand-600);box-shadow:0 14px 32px rgba(23,94,104,.34)}
.btn--ghost{background:rgba(255,255,255,.84);color:var(--ink);border:1px solid var(--line);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.btn--ghost:hover{background:#fff;border-color:rgba(23,94,104,.28)}

/* ========================================================================== NAV ========================================================================== */
.nav{position:fixed;inset:0 0 auto;z-index:60;display:flex;align-items:center;
  justify-content:space-between;padding:16px var(--gutter);pointer-events:none}
.nav > *{pointer-events:auto}
.nav__brand{display:inline-flex;align-items:center;gap:10px;padding:10px 24px 10px 14px;
  background:rgba(255,255,255,.94);border-radius:var(--pill);box-shadow:var(--sh-nav);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  transition:box-shadow .2s ease, transform .16s ease}
.nav__brand:hover{transform:translateY(-1px);box-shadow:var(--sh-lift)}
.nav__mark{width:30px;height:30px;flex:none}
.nav__name{font-size:21px;font-weight:800;letter-spacing:-.01em}
.nav__pill{display:flex;align-items:center;gap:4px;padding:5px;
  background:rgba(255,255,255,.9);border-radius:var(--pill);box-shadow:var(--sh-nav);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.nav__link{padding:11px 18px;border-radius:var(--pill);font-size:15px;font-weight:500;color:var(--ink-soft);
  transition:background .15s ease, color .15s ease}
.nav__link:hover{background:var(--brand-tint);color:var(--brand-600)}
.nav__link[aria-current="true"]{background:var(--brand-tint);color:var(--brand-600);font-weight:700}
.menu a[aria-current="true"]{background:var(--brand-tint);color:var(--brand-600)}
.nav__cta{margin-left:4px}
.nav__burger{display:none;width:52px;height:52px;border-radius:var(--pill);
  background:rgba(255,255,255,.94);box-shadow:var(--sh-nav);align-items:center;justify-content:center;flex-direction:column;gap:5px}
.nav__burger span{display:block;width:22px;height:2.5px;border-radius:2px;background:var(--ink);
  transition:transform .22s var(--ease), opacity .16s linear}
.nav__burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.nav__burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav__burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}

.menu{position:fixed;z-index:55;inset:88px 20px auto;padding:18px;display:grid;gap:6px;
  background:rgba(255,255,255,.97);border-radius:26px;box-shadow:var(--sh-lift);
  animation:menuIn .28s var(--ease) both}
.menu[hidden]{display:none}
.menu a{padding:13px 16px;border-radius:16px;font-weight:600}
.menu a:not(.btn):hover{background:var(--brand-tint)}
.menu .btn{margin-top:6px}
@keyframes menuIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

/* ========================================================================== HERO ========================================================================== */
.hero{min-height:100svh;display:flex;flex-direction:column;justify-content:center;
  align-items:center;text-align:center;padding:150px 0 26px;position:relative}
.hero__title{font-size:clamp(38px,5.3vw,68px);line-height:1;font-weight:800;letter-spacing:-.022em;
  max-width:none;margin-inline:auto;text-wrap:balance}
.hero__title em{font-style:normal;color:var(--brand)}
.hero__sub{margin-top:36px;font-size:clamp(17px,1.6vw,21px);color:var(--ink-soft);font-weight:500}
.hero__line{display:flex;flex-direction:column;align-items:center;gap:2px}
.hero__detail{display:inline-flex;align-items:center;gap:10px}

/* rotating verb — enter/leave at .42s with a 3px blur and 7px rise */
.verb{position:relative;display:inline-flex;align-items:center;height:1.9em;overflow:visible}
/* The current token sits in flow so the stage sizes itself to the word. Only the
   outgoing token is taken out of flow, so nothing has to be measured in JS and
   nothing depends on the webfont having arrived. */
.verb__tok{display:inline-flex;align-items:center;gap:9px;white-space:nowrap;font-weight:700}
.verb__tok--out{position:absolute;left:0;top:50%;transform:translateY(-50%)}
.verb__tok--in {animation:verbIn  .42s var(--ease) .11s both}
.verb__tok--out{animation:verbOut .34s var(--ease) both;pointer-events:none}
.verb__ic{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;
  border-radius:9px;color:#fff;flex:none}
.verb__ic svg{width:17px;height:17px}
@keyframes verbIn {from{opacity:0;transform:translateY(7px) scale(.985);filter:blur(3px)}
                    to{opacity:1;transform:none;filter:blur(0)}}
@keyframes verbOut{from{opacity:1;transform:translateY(-50%) scale(1);filter:blur(0)}
                    to{opacity:0;transform:translateY(calc(-50% - 6px)) scale(.985);filter:blur(3px)}}

.hero__cta{margin-top:34px;display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
/* Says what is behind the button, so the click is not a leap of faith. */
.hero__what{margin-top:16px;font-size:14.5px;color:var(--muted);max-width:52ch;margin-inline:auto}
.badge{margin-top:22px;display:inline-flex;align-items:center;gap:9px;padding:10px 18px;font-size:14px;
  background:rgba(255,255,255,.9);border:1px solid var(--line);border-radius:var(--pill);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  transition:transform .16s ease,border-color .16s ease}
.badge:hover{transform:translateY(-1px);border-color:var(--brand-tint-2)}
.badge strong{white-space:nowrap}
.badge__icon{width:19px;height:19px;color:var(--brand);flex:none}
.badge__dot{color:var(--muted)}
.badge__cta{color:var(--brand);font-weight:700}

/* ---------- primitives marquee (38s linear, list duplicated in JS) ---------- */
.builton{width:100%;margin-top:auto;padding-top:44px}
.builton__label{text-align:center;font-size:12px;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted)}
.marquee{margin-top:22px;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.marquee__track{display:flex;align-items:center;gap:72px;width:max-content;
  animation:slide 38s linear infinite}
.marquee:hover .marquee__track{animation-play-state:paused}
.marquee__item{font-size:26px;font-weight:800;color:var(--muted);white-space:nowrap;
  transition:color .2s ease}
.marquee__item:hover{color:var(--ink)}
@keyframes slide{to{transform:translateX(-50%)}}

/* ========================================================================== SHOWCASE ========================================================================== */
.showcase{position:relative;padding:60px 0 120px}
/* ---------- drifting marks ----------
   Ambient only, and kept faint: a teal stroke carries more weight on bone than
   a pale silhouette would. */
.ghost{position:absolute;z-index:1;width:var(--g-size,130px);aspect-ratio:1;opacity:var(--g-op,.28);
  background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='%23175E68' stroke-width='6' stroke-linecap='round' opacity='.85'%3E%3Cpath d='M32 13a19 19 0 0 1 17.9 12.5'/%3E%3Cpath d='M32 13a19 19 0 0 1 17.9 12.5' transform='rotate(120 32 32)'/%3E%3Cpath d='M32 13a19 19 0 0 1 17.9 12.5' transform='rotate(240 32 32)'/%3E%3Ccircle cx='32' cy='32' r='7.5' stroke-width='5'/%3E%3C/g%3E%3C/svg%3E");
  animation:drift var(--g-dur,20s) ease-in-out var(--g-delay,0s) infinite}
.ghost--1{left:8%;top:14%;--g-size:clamp(96px,9vw,144px);--g-op:.26;--g-dur:18s;--g-delay:-7s;--g-x:20px;--g-y:18px;--g-rot:8deg}
.ghost--2{right:9%;top:24%;--g-size:clamp(104px,10vw,154px);--g-op:.22;--g-dur:22s;--g-delay:-14s;--g-x:-18px;--g-y:-14px;--g-rot:-6deg}
.ghost--3{left:13%;bottom:26%;--g-size:clamp(108px,10vw,156px);--g-op:.30;--g-dur:20s;--g-delay:-3s;--g-x:16px;--g-y:-16px;--g-rot:7deg}
.ghost--4{right:12%;bottom:20%;--g-size:clamp(116px,11vw,170px);--g-op:.24;--g-dur:24s;--g-delay:-17s;--g-x:-20px;--g-y:14px;--g-rot:-8deg}
@keyframes drift{
  0%,100%{transform:translate3d(0,0,0) rotate(-3deg)}
  50%{transform:translate3d(var(--g-x),var(--g-y),0) rotate(var(--g-rot))}
}
@media (prefers-reduced-motion: reduce){ .ghost{animation:none} }

/* ---------- feature cards ---------- */
/* Frames the cards below as design intent, not shipped capability. */
.features__note{position:relative;z-index:2;max-width:var(--maxw);margin:72px auto 0;
  padding-inline:var(--gutter);text-align:center;font-size:14.5px;color:var(--muted)}
.features{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:18px;position:relative;z-index:2}
.feat{padding:26px 24px;background:var(--card);
  border-radius:var(--r-card);box-shadow:var(--sh-card);
  transition:transform .22s var(--ease), box-shadow .22s ease}
.feat:hover{transform:translateY(-5px);box-shadow:var(--sh-lift)}
.feat__ic{display:block;width:26px;height:26px;margin-bottom:14px;color:var(--brand);
  fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.feat p{font-size:15px;font-weight:600;line-height:1.5}

/* ========================================================================== STORY ==========================================================================
   Three beats, stacked and all visible. This was a 300vh pinned sequence whose
   panels cross-faded; the two inactive ones sat at visibility:hidden, so a
   screen reader never received them. The mobile fallback was already the better
   reading experience, so it is now the only one.
   ========================================================================== */
.story{padding:104px 0 24px}
.panel{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start;
  padding:44px 0;border-top:1px solid var(--line)}
.panel:first-of-type{border-top:0;padding-top:0}
.panel h3{font-size:clamp(24px,2.9vw,38px);line-height:1.12;font-weight:800;letter-spacing:-.02em;
  text-wrap:balance}
.panel__copy{display:grid;gap:18px;padding-top:6px}
.panel .lead{font-size:clamp(16px,1.4vw,19px);color:var(--muted);max-width:62ch}
.panel .strong{font-size:clamp(16px,1.4vw,19px);font-weight:700;max-width:62ch}

/* ========================================================================== COMPARISON ========================================================================== */
.compare{padding:110px 0 40px}
.h2{font-size:clamp(34px,5vw,62px);line-height:1.08;font-weight:800;letter-spacing:-.02em}
.h2 em{font-style:normal;color:var(--brand)}
.sub{margin-top:20px;max-width:56ch;font-size:clamp(16px,1.5vw,19px);color:var(--muted)}
.matrix{margin-top:42px;background:var(--card);
  border-radius:var(--r-card);box-shadow:var(--sh-card);overflow:hidden}
.matrix table{width:100%;border-collapse:collapse;text-align:left}
.matrix thead th{padding:26px 22px;font-size:19px;font-weight:800;vertical-align:middle}
.matrix tbody th{width:22%;padding:20px 22px;font-size:15px;font-weight:800;vertical-align:top}
.matrix td{padding:20px 22px;font-size:15px;color:var(--ink-soft);vertical-align:top;
  border-top:1px solid var(--line)}
.matrix tbody th{border-top:1px solid var(--line)}
.matrix .is-us{background:rgba(23,94,104,.055)}
.matrix thead .is-us{box-shadow:inset 0 0 0 1.5px var(--brand-tint-2);border-radius:var(--r-node)}
.matrix td[data-mark]{padding-left:50px;position:relative}
.matrix td[data-mark]::before{content:"";position:absolute;left:22px;top:21px;
  width:18px;height:18px;border-radius:50%;
  background:no-repeat center/11px 11px}
.matrix td[data-mark="good"]::before{background-color:rgba(21,128,61,.14);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2315803D' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E")}
.matrix td[data-mark="bad"]::before{background-color:rgba(220,38,38,.13);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23DC2626' stroke-width='4' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E")}
.matrix td[data-mark="partial"]::before{background-color:rgba(180,83,9,.14);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B45309' stroke-width='4' stroke-linecap='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E")}

/* ========================================================================== HOW IT WORKS ========================================================================== */
.how{padding:120px 0 40px}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:40px}
.steps__tab{padding-top:14px;text-align:left;color:var(--muted);transition:color .2s ease}
.steps__word{display:block;font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.steps__gloss{display:block;margin-top:5px;font-size:13px;font-weight:500;line-height:1.35;
  letter-spacing:normal;text-transform:none;color:var(--muted);max-width:34ch}
.steps__tab.is-on .steps__gloss{color:var(--ink-soft)}
.steps__tab i{display:block;height:3px;border-radius:var(--pill);background:var(--rail-soft);
  margin-bottom:14px;overflow:hidden;position:relative}
.steps__tab i::after{content:"";position:absolute;inset:0;border-radius:var(--pill);background:var(--brand);
  transform:scaleX(0);transform-origin:left;transition:transform .52s var(--ease)}
.steps__tab.is-on{color:var(--brand)}
.steps__tab.is-on i::after,.steps__tab.is-done i::after{transform:scaleX(1)}
.steps__tab.is-done{color:var(--ink-soft)}

.how__panels{position:relative;margin-top:26px}
.how__panel[hidden]{display:none}
.how__panel{display:block;animation:panelIn .42s var(--ease) both}
.how__panel:focus-visible{outline:2px solid var(--brand);outline-offset:8px}
@keyframes panelIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.how__copy{font-size:clamp(17px,1.7vw,22px);color:var(--ink-soft)}
.how__copy b{color:var(--brand)}

.diagram{margin-top:28px;min-height:340px;padding:clamp(24px,4vw,54px);
  display:flex;align-items:center;justify-content:center;gap:clamp(16px,3vw,42px);flex-wrap:wrap;
  background:linear-gradient(135deg,rgba(255,255,255,.96),rgba(251,250,247,.86));
  border-radius:var(--r-card);box-shadow:var(--sh-card)}
.node{padding:16px 24px;background:#fff;border:1px solid var(--line);border-radius:var(--r-node);
  font-weight:700;font-size:15px}
.node--lg{font-size:19px;padding:20px 34px}
.node--ext{display:inline-flex;align-items:center;gap:10px;color:var(--muted);
  background:var(--canvas);border-style:dashed}
/* Marks a node outside the pool. Drawn, not an emoji: the fox that used to sit
   here implied a wallet integration that does not exist. */
.node--ext::before{content:"";width:9px;height:9px;flex:none;border-radius:50%;
  border:2px solid var(--rail);}
.group{position:relative;padding:30px 22px 22px;border-radius:24px;display:flex;flex-direction:column;gap:12px}
.group--brand{border:1px solid rgba(23,94,104,.2)}
.group--dash{border:1.5px dashed var(--rail)}
.group__tag{position:absolute;top:-11px;left:20px;padding:2px 10px;background:var(--canvas);
  font-size:13px;font-weight:800;color:var(--muted)}
.group--brand > .group__tag{color:var(--brand)}
.arrow{flex:none;width:clamp(40px,7vw,110px);height:2px;background:var(--brand);position:relative;
  animation:flow 2.6s ease-in-out infinite}
.arrow::after{content:"";position:absolute;right:-1px;top:50%;transform:translateY(-50%);
  border:6px solid transparent;border-left-color:var(--brand)}
@keyframes flow{0%,100%{opacity:.45}50%{opacity:1}}

/* ========================================================================== CTA BAND ========================================================================== */
.band{margin:90px 0 0;padding:clamp(26px,3.4vw,42px);display:flex;align-items:center;gap:24px;flex-wrap:wrap;
  background:linear-gradient(110deg,rgba(255,255,255,.96),rgba(79,179,168,.20));
  border-radius:var(--r-card);box-shadow:var(--sh-card)}
.band p{flex:1 1 380px;font-size:clamp(24px,3.2vw,40px);font-weight:800;letter-spacing:-.02em;line-height:1.18}
.band__sub{flex:1 1 100%;font-size:15px!important;font-weight:400!important;line-height:1.6!important;
  letter-spacing:normal!important;color:var(--muted);margin-top:-6px}
.band__sub a{color:var(--brand);font-weight:700;text-decoration:underline;text-underline-offset:3px}

/* ========================================================================== ABOUT ========================================================================== */
.about{padding:120px 0 130px}
.about__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,5vw,80px);align-items:center}
.about__h{margin:0 0 22px;font-size:clamp(28px,3.4vw,44px);font-weight:800;line-height:1.14;letter-spacing:-.02em}
.about p{color:var(--muted);margin-bottom:16px}
.about .btn{margin-top:10px}
.people{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.person{padding:26px 20px;text-align:center;border-radius:var(--r-card);
  background:linear-gradient(160deg,rgba(255,255,255,.94),rgba(79,179,168,.14));
  box-shadow:var(--sh-card);
  transition:transform .22s var(--ease)}
.person:hover{transform:translateY(-4px)}
.person b{display:block;font-size:20px}
.person span{font-size:14px;color:var(--muted)}

/* ========================================================================== FOOTER ========================================================================== */
.foot{position:relative;background:
    radial-gradient(60% 100% at 78% 0%, rgba(79,179,168,.10), transparent 62%),
    radial-gradient(50% 100% at 10% 10%, rgba(23,94,104,.16), transparent 60%),
    var(--foot);
  color:rgba(255,255,255,.72);padding:70px 0 34px;margin-top:20px}
.foot__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.foot__grid > div{display:grid;align-content:start;gap:2px}
.foot__h{font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.62);margin-bottom:6px}
.foot__grid a{font-size:15px;padding:10px 0;transition:color .15s ease}
.foot__grid a:hover{color:#fff}
.foot__base{margin-top:52px;padding-top:22px;border-top:1px solid rgba(255,255,255,.1);font-size:14px;
  color:rgba(255,255,255,.64)}

/* ========================================================================== SCROLL REVEAL ========================================================================== */
[data-reveal]{opacity:0;transform:translate3d(0,22px,0);
  transition:opacity .6s var(--ease), transform .6s var(--ease)}
[data-reveal].is-in{opacity:1;transform:none}

/* ========================================================================== RESPONSIVE ========================================================================== */
@media (max-width:1080px){
  .features{grid-template-columns:1fr 1fr}
  .about__grid{grid-template-columns:1fr}
  .proof__grid{grid-template-columns:1fr}
  .panel{grid-template-columns:1fr;gap:20px}
}
@media (max-width:860px){
  body{font-size:16px}
  .nav__pill{display:none}
  .nav__burger{display:flex}
  /* No script: the burger cannot open, so show the links rather than hide
     navigation entirely. The bar also stops being fixed, so it pushes the hero
     down instead of covering it. */
  html:not(.js) .nav{position:static;flex-wrap:wrap;gap:12px;justify-content:center}
  html:not(.js) .nav__pill{display:flex;flex-wrap:wrap;justify-content:center;max-width:100%}
  html:not(.js) .nav__burger{display:none}
  html:not(.js) .hero{min-height:0;padding-top:28px}
  .hero{padding-top:130px}
  .hero__detail{flex-wrap:wrap;justify-content:center}

  .steps{grid-template-columns:1fr 1fr;gap:14px}
  .diagram{flex-direction:column;min-height:0}
  .arrow{width:2px;height:46px}
  .arrow::after{right:50%;top:auto;bottom:-1px;transform:translateX(50%);
    border-left-color:transparent;border-top-color:var(--brand)}

  /* comparison table → stacked cards */
  .matrix table,.matrix thead,.matrix tbody,.matrix tr,.matrix th,.matrix td{display:block;width:auto}
  .matrix thead{display:none}
  .matrix tbody tr{padding:18px 18px 10px;border-top:1px solid var(--line)}
  .matrix tbody th{width:auto;padding:0 0 10px;border:0;font-size:16px}
  /* Label above the value it labels. The mark stays ::before so its per-state
     background rules still apply; ::after carries the label and is reordered
     above the cell's own text. */
  .matrix td{display:flex;flex-direction:column;padding:10px 0 10px 30px;border:0;position:relative}
  .matrix td[data-mark]{padding-left:30px}
  .matrix td[data-mark]::before{left:0;top:31px}
  .matrix td::after{content:attr(data-col);order:-1;font-size:11px;font-weight:800;
    letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:3px}
  /* The Corio column is the page's honesty device; keep it distinguishable. */
  .matrix .is-us{background:rgba(23,94,104,.055);border-radius:14px;
    padding-left:42px;padding-right:12px;margin-left:-12px;margin-right:-12px}
  .matrix .is-us[data-mark]::before{left:12px}

  .people{grid-template-columns:1fr}
  .foot__grid{grid-template-columns:1fr 1fr}
  .ghost{display:none}
}
@media (max-width:520px){
  .marquee__item{font-size:20px}
  .steps{grid-template-columns:1fr}
  .foot__grid{grid-template-columns:1fr}
}

/* ========================================================================== REDUCED MOTION ========================================================================== */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  /* Ambient loops stop entirely. */
  .aurora__blob,.ghost,.marquee__track,.arrow{animation:none!important}
  /* A frozen marquee hides most of its own content, so unwrap it into a list. */
  .marquee{-webkit-mask-image:none;mask-image:none}
  .marquee__track{flex-wrap:wrap;width:auto;justify-content:center;gap:14px 34px}
  .marquee__item{font-size:17px}
  /* The loop clone is redundant once the strip is static. */
  .marquee__item--dupe{display:none}
  .aurora{transform:none!important}
  /* One-shot entrances resolve immediately rather than animating in. */
  [data-reveal]{opacity:1!important;transform:none!important;transition:none!important}
  .how__panel,.menu,.verb__tok{animation:none!important}
  /* State feedback survives, just fast: hover, focus and selection still read. */
  .btn,.feat,.person,.nav__brand,.badge,.nav__link,.steps__tab i::after{
    transition-duration:.05s!important}
  .btn:hover,.feat:hover,.person:hover,.nav__brand:hover,.badge:hover{transform:none!important}
}


/* ==========================================================================
   SPEC CARD — sits where a shipped product would put a screenshot.
   ========================================================================== */
.spec{position:relative;z-index:2;width:min(760px,92vw);margin-inline:auto;
  background:var(--card);border-radius:var(--r-card);
  padding:clamp(24px,3.4vw,40px);box-shadow:var(--sh-card)}
.spec__label{font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);margin-bottom:18px}
/* ---------- rollout sequence ---------- */
.chains{list-style:none;margin:0 0 26px;padding:0;display:grid;
  grid-template-columns:repeat(4,1fr);gap:10px}
.chain{display:grid;gap:2px;padding:14px 14px 13px;border-radius:var(--r-node);
  background:var(--canvas);position:relative}
.chain__ord{font-size:10.5px;font-weight:800;letter-spacing:.14em;color:var(--muted)}
.chain__name{font-size:17px;font-weight:800;letter-spacing:-.01em;color:var(--ink)}
.chain__note{font-size:11.5px;font-weight:700;letter-spacing:.04em;color:var(--muted)}
.chain--first{background:var(--brand);}
.chain--first .chain__ord{color:rgba(255,255,255,.72)}
.chain--first .chain__name{color:#fff}
.chain--first .chain__note{color:rgba(255,255,255,.86)}
@media (max-width:560px){
  .chains{grid-template-columns:1fr 1fr}
}

.spec__dl{margin:0;display:grid;font-size:14.5px;line-height:1.6}
.spec__row{display:grid;grid-template-columns:10ch minmax(0,1fr);gap:8px 22px;
  padding:13px 0;border-top:1px solid var(--line)}
.spec__row:first-child{border-top:0;padding-top:0}
.spec__row dt{font-weight:800;color:var(--muted);font-size:12px;letter-spacing:.08em;
  text-transform:uppercase;padding-top:3px}
.spec__row dd{margin:0;color:var(--ink)}
.spec__row code,.spec__foot code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.92em;background:var(--brand-tint);padding:1px 5px;border-radius:5px;color:var(--brand-600)}
/* the page's one brass moment: the biggest liability, set loudest */
.spec__no{color:#8A6D0F;font-weight:800}
.spec__foot{margin-top:22px;padding-top:18px;border-top:1px solid var(--line);
  font-size:13px;line-height:1.65;color:var(--muted)}
@media (max-width:560px){
  .spec__row{grid-template-columns:minmax(0,1fr);gap:2px}
  .spec__row dt{padding-top:0}
}

/* marquee disclaimer — those are techniques, not logos */
.builton__note{max-width:var(--maxw);margin:14px auto 0;padding-inline:var(--gutter);
  text-align:center;font-size:12.5px;color:var(--muted)}

/* footer: legal pages that do not exist yet are stated, not linked */

/* about: the two cards replace founder bios — there are no founders to name yet */
.person__list{font-size:13.5px;line-height:1.7;color:var(--muted);font-weight:600}


/* ==========================================================================
   SDK ARTIFACT — the page's one real technical object. The values shown are
   copied from packages/sdk, not illustrative.
   ========================================================================== */
.proof{padding:110px 0 20px}
.proof__grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(28px,4vw,64px);align-items:center}
.proof__note{font-size:14.5px;margin-top:14px}
.proof .btn{margin-top:24px}

.code{margin:0;border-radius:var(--r-card);overflow:hidden;background:var(--foot);
  box-shadow:var(--sh-lift)}
.code__bar{display:flex;align-items:center;gap:10px;padding:13px 18px;
  background:rgba(255,255,255,.045);border-bottom:1px solid rgba(255,255,255,.08)}
.code__dot{width:9px;height:9px;border-radius:50%;background:var(--brand-lite);flex:none}
.code__file{font-size:12.5px;font-weight:700;letter-spacing:.06em;color:rgba(255,255,255,.66)}
.code__body{margin:0;padding:22px 20px 24px;overflow-x:auto;
  font-family:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  font-size:13px;line-height:1.85;color:rgba(255,255,255,.9);
  font-variant-ligatures:none;-webkit-text-size-adjust:100%}
.code__body code{white-space:pre}
.code .c-k{color:#8FD8CE}                 /* keyword */
.code .c-s{color:#E4CE8F}                 /* string  */
.code .c-f{color:#A7DEDA}                 /* call    */
.code .c-c{color:rgba(255,255,255,.52)}   /* comment */
.code .c-e{color:#F0A0A0;font-weight:700} /* thrown  */
.code__body::-webkit-scrollbar-thumb{background:rgba(255,255,255,.22);border-color:var(--foot)}

@media (max-width:1080px){
  /* Must sit AFTER the .proof__grid base rule above: equal specificity, and
     source order decides. The earlier 1080px block could never win. */
  .proof__grid{grid-template-columns:1fr}
}
@media (max-width:860px){
  .proof{padding:80px 0 10px}
  .code__body{font-size:12px;padding:18px 16px 20px}
}