/* ============================================================
   AI FACTORY · aifactory.ee
   Design system. Neo-grotesque display type, flat black/white/grey
   base, large rounded colour sections, one saturated accent (blue).
   ============================================================ */

:root{
  /* base ramp */
  --white:#ffffff;
  --black:#000000;
  --grey-100:#f3f3f3;
  --grey-200:#e5e5e5;
  --grey-300:#dbdbdb;
  --grey-400:#c6c6c6;
  --grey-500:#6e6e73;
  --grey-600:#444444;
  --grey-800:#2f2f2f;

  /* blue pillar */
  --blue-1:#00d1ff;   /* vivid signal — fills, on-dark highlights */
  --blue-2:#bef3ff;   /* pale tint — section grounds */
  --blue-3:#000a3d;   /* deep navy — dark sections */
  --blue-ink:#0b4fd1; /* accessible blue for text/links on white */
  --blue-deep:#00408f;/* blue text on pale tint */

  /* semantic */
  --bg:var(--white);
  --ink:var(--black);
  --ink-soft:var(--grey-600);
  --ink-faint:var(--grey-500);
  --line:var(--grey-200);
  --line-strong:var(--grey-300);
  --warn-bg:#fff8e1;
  --warn-line:#e8d9a0;
  --warn-ink:#6b5200;

  /* geometry */
  --r-card:12px;
  --r-sect:64px;
  --r-pill:999px;
  --maxw:1440px;
  --side:80px;
  --sect-gap:96px;
  --nav-h:82px;

  --ease-out-quart:cubic-bezier(.165,.84,.44,1);
  --ease-out-expo:cubic-bezier(.19,1,.22,1);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 16px);-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:"Inter",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
  font-size:17px;line-height:1.45;font-weight:400;letter-spacing:-.011em;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
::selection{background:var(--blue-1);color:var(--black)}
img,svg{max-width:100%}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--side)}
.band{padding:0 var(--side)}
.mono{font-family:inherit;font-feature-settings:"tnum"}

/* skip link */
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--black);color:var(--white);
  padding:14px 22px;border-radius:0 0 var(--r-card) 0;font-size:15px;font-weight:500}
.skip:focus{left:0}

/* focus */
a:focus-visible,button:focus-visible,select:focus-visible,summary:focus-visible{
  outline:2px solid var(--blue-ink);outline-offset:3px;border-radius:2px}
.on-dark a:focus-visible,.on-dark button:focus-visible,.on-dark summary:focus-visible{outline-color:var(--blue-1)}

/* ---------- type scale ---------- */
.display{font-weight:500;letter-spacing:-.045em;line-height:.88;margin:0;font-size:clamp(3.2rem,9vw,8.8rem)}
.h2{font-weight:500;letter-spacing:-.032em;line-height:1.04;margin:0;font-size:clamp(1.85rem,3.5vw,3.05rem)}
.h3{font-weight:500;letter-spacing:-.024em;line-height:1.15;margin:0;font-size:clamp(1.25rem,1.8vw,1.5rem)}
.h4{font-weight:500;letter-spacing:-.022em;line-height:1.2;margin:0;font-size:1.25rem}
.lead{font-size:clamp(1.05rem,1.5vw,1.32rem);line-height:1.45;font-weight:350;letter-spacing:-.015em;color:var(--ink-soft)}
.body{font-size:17px;line-height:1.6;font-weight:350;color:var(--ink-soft)}
.body strong{color:var(--ink);font-weight:500}
.measure{max-width:68ch}
.measure-tight{max-width:56ch}

.eyebrow{font-size:14px;font-weight:500;letter-spacing:-.01em;
  color:var(--ink-faint);display:block;margin:0 0 20px}
.eyebrow .num,.eyebrow .bar{display:none}
.on-dark .eyebrow{color:rgba(255,255,255,.5)}
.on-tint .eyebrow{color:#4a5a75}

/* source refs */
sup.src{font-size:9.5px;font-weight:500;vertical-align:super;
  line-height:0;margin-left:2px;white-space:nowrap;letter-spacing:0}
sup.src a{color:var(--blue-ink);border-bottom:1px solid transparent;transition:border-color .18s}
sup.src a:hover{border-color:var(--blue-ink)}
.on-dark sup.src a{color:var(--blue-1)}
.on-dark sup.src a:hover{border-color:var(--blue-1)}
.on-tint sup.src a{color:var(--blue-deep)}
.on-tint sup.src a:hover{border-color:var(--blue-deep)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;border-radius:var(--r-pill);font-size:15px;font-weight:500;
  letter-spacing:-.012em;padding:15px 26px;border:1px solid var(--black);background:var(--black);color:var(--white);
  cursor:pointer;transition:background .22s var(--ease-out-quart),color .22s,border-color .22s,transform .22s var(--ease-out-quart)}
.btn:hover{transform:translateY(-2px)}
.btn .ar{transition:transform .3s var(--ease-out-expo)}
.btn:hover .ar{transform:translateX(5px)}
.btn.accent{background:var(--blue-1);border-color:var(--blue-1);color:var(--black)}
.btn.accent:hover{background:#31dcff;border-color:#31dcff}
.btn.outline{background:transparent;color:var(--black)}
.btn.outline:hover{background:var(--black);color:var(--white)}
.on-dark .btn.outline{border-color:rgba(255,255,255,.38);color:var(--white)}
.on-dark .btn.outline:hover{background:var(--white);color:var(--black);border-color:var(--white)}
.btn-row{display:flex;gap:12px;flex-wrap:wrap}

/* ---------- nav ---------- */
.nav{position:sticky;top:0;z-index:100;height:var(--nav-h);background:rgba(255,255,255,.85);
  backdrop-filter:blur(14px) saturate(1.4);border-bottom:1px solid var(--line)}
.nav-in{display:flex;align-items:center;gap:26px;height:100%}
.logo{display:flex;align-items:center;gap:10px;flex-shrink:0}
.logo .mark{width:32px;height:32px;flex-shrink:0;display:block}
.logo .txt{font-weight:600;font-size:16px;letter-spacing:-.03em;line-height:1}
.logo .txt small{display:block;font-size:9px;font-weight:400;
  letter-spacing:0;color:var(--ink-faint);margin-top:3px}
.nav-links{display:flex;gap:24px;margin-left:12px}
.nav-links a{font-size:14.5px;color:var(--grey-600);transition:color .18s;padding:6px 0;border-bottom:1px solid transparent}
.nav-links a:hover{color:var(--black)}
.nav-links a[aria-current="page"]{color:var(--black);font-weight:500;border-bottom-color:var(--blue-ink)}
.nav-cta{flex-shrink:0}
.nav-cta .btn{padding:11px 20px;font-size:14px}
.navtoggle{display:none;background:none;border:1px solid var(--line-strong);
  border-radius:var(--r-pill);padding:9px 16px;font-size:13px;font-weight:500;cursor:pointer;font-family:inherit}

/* ---------- modal ---------- */
.modal{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;padding:24px}
.modal.open{display:flex}
.modal-veil{position:absolute;inset:0;background:rgba(0,10,61,.55);backdrop-filter:blur(3px)}
.modal-box{position:relative;background:var(--white);border-radius:var(--r-card);max-width:460px;width:100%;
  padding:38px 34px 30px;box-shadow:0 30px 80px -30px rgba(0,10,61,.6);
  animation:pop .32s var(--ease-out-quart)}
@keyframes pop{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
.modal-box .mk{font-size:10.5px;letter-spacing:0;
  color:var(--blue-ink);margin-bottom:14px}
.modal-box h2{font-size:clamp(1.5rem,3vw,1.95rem);font-weight:500;letter-spacing:-.032em;line-height:1.1;margin:0 0 14px}
.modal-box p{font-size:15.5px;line-height:1.58;color:var(--ink-soft);font-weight:350;margin:0 0 12px}
.modal-box p:last-of-type{margin-bottom:24px}
.modal-box .mrow{display:flex;gap:10px;flex-wrap:wrap}
.modal-close{position:absolute;top:14px;right:14px;width:34px;height:34px;border-radius:50%;
  border:1px solid var(--line-strong);background:var(--white);cursor:pointer;font-size:17px;line-height:1;
  color:var(--ink-soft);transition:background .2s,color .2s}
.modal-close:hover{background:var(--black);color:var(--white);border-color:var(--black)}
body.locked{overflow:hidden}

/* ---------- badge ---------- */
.badge{display:inline-flex;align-items:center;gap:11px;border:1px solid var(--line-strong);
  border-radius:var(--r-pill);padding:9px 18px 9px 12px;font-size:13.5px;font-weight:450;
  letter-spacing:-.01em;color:var(--ink-soft);margin-bottom:30px;background:var(--white)}
.badge .bmark{width:20px;height:20px;flex-shrink:0;display:block}
.badge sup.src{margin-left:1px}

/* ---------- landing hero ---------- */
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,4vw,64px);align-items:center}
.hero-copy{min-width:0}
/* The landing hero stands alone now. Only the lines inside it are measured,
   never the block itself, or the paragraph gets squeezed to the headline width. */
.hero-centred{text-align:center;padding:clamp(20px,4.5vw,64px) 0}
.hero-centred .display{font-size:clamp(2.5rem,5.8vw,5.4rem);line-height:.94}
.hero-centred .phero-lead{max-width:46ch;margin:28px auto 0}
.hero-centred .btn-row{justify-content:center}
/* The display scale is tuned for a full-width line. In the split hero it has
   half the room, so it steps down to keep each line unbroken. */
.hero-grid .display{font-size:clamp(2.5rem,4.9vw,4.7rem);letter-spacing:-.04em;line-height:.94}
.hero-grid .phero-lead{margin-top:26px;max-width:46ch}
.readmore{margin-top:clamp(36px,4vw,52px)}

/* ---------- page hero ---------- */
.phero{padding:clamp(44px,5vw,76px) 0 clamp(36px,4vw,56px)}
.crumbs{font-size:11px;letter-spacing:0;
  color:var(--ink-faint);margin-bottom:28px}
.crumbs a:hover{color:var(--black)}
.crumbs span{margin:0 8px;color:var(--line-strong)}
.phero .display em,.phero .h2 em{font-style:normal;color:var(--blue-ink)}
.phero-lead{margin-top:28px;max-width:62ch}

/* ---------- sections ---------- */
section{padding:var(--sect-gap) 0}
section.tight{padding:calc(var(--sect-gap) * .42) 0}
/* Colour blocks align with the text column of .wrap, and carry generous
   internal padding so the ground reads as a deliberate field, not a box. */
.band{max-width:var(--maxw);margin:0 auto}
.sect-round{border-radius:var(--r-sect);padding:clamp(52px,6.5vw,112px) clamp(28px,4.5vw,88px);
  margin:0 auto;width:100%}
.tint{background:var(--blue-2);color:var(--black)}
.dark{background:var(--blue-3);color:var(--white)}
.grey{background:var(--grey-100);color:var(--black)}
.on-dark .lead,.on-dark .body{color:rgba(255,255,255,.66)}
.on-dark .body strong{color:var(--white)}
.on-tint .lead,.on-tint .body{color:#1b2b4a}

/* ---------- marquee ---------- */
.marquee{background:var(--blue-3);color:var(--white);overflow:hidden;padding:14px 0}
.marquee-track{display:inline-flex;white-space:nowrap;animation:mq 48s linear infinite;will-change:transform}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee-track span{display:inline-flex;align-items:center;padding:0 26px;
  font-size:12px;letter-spacing:0;color:rgba(255,255,255,.6)}
.marquee-track span b{color:var(--white);font-weight:500;margin-left:8px}
.marquee-track .dot{width:5px;height:5px;border-radius:50%;background:var(--blue-1);margin-right:16px}
@keyframes mq{to{transform:translateX(-50%)}}

/* ---------- stat strip ---------- */
.statstrip{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.statstrip .s{background:var(--white);padding:34px 24px 32px 0}
.statstrip .sv{font-size:clamp(2.1rem,3.9vw,3.4rem);font-weight:500;letter-spacing:-.045em;line-height:1}
.statstrip .sk{margin-top:14px;font-size:14.5px;color:var(--ink-soft);line-height:1.35;font-weight:350}

/* ---------- site panel ---------- */
.sitecard{background:var(--grey-100);border-radius:var(--r-card);overflow:hidden;min-width:0}
.sitecard-head{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:16px 20px;border-bottom:1px solid var(--grey-200)}
.sitecard-head .t{font-size:11px;letter-spacing:0;text-transform:uppercase}
.live{display:flex;align-items:center;gap:8px;font-size:10.5px;
  letter-spacing:0;color:var(--ink-soft);white-space:nowrap}
.live .pip{width:7px;height:7px;border-radius:50%;background:var(--blue-ink);flex-shrink:0;animation:pip 2.6s infinite}
@keyframes pip{
  0%{box-shadow:0 0 0 0 rgba(11,79,209,.45)}
  70%{box-shadow:0 0 0 8px rgba(11,79,209,0)}
  100%{box-shadow:0 0 0 0 rgba(11,79,209,0)}
}
.sitecard svg{display:block;width:100%;height:auto;background:var(--grey-100)}
.sitegrid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--grey-200);border-top:1px solid var(--grey-200)}
.sitegrid .c{background:var(--grey-100);padding:16px 20px}
.sitegrid .ck{font-size:9.5px;letter-spacing:0;
  color:var(--ink-faint)}
.sitegrid .cv{font-size:17px;font-weight:500;letter-spacing:-.02em;margin-top:6px}

/* ---------- cards ---------- */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.cards.two{grid-template-columns:repeat(2,1fr)}
.card{background:var(--grey-100);border-radius:var(--r-card);padding:28px 26px;display:flex;flex-direction:column;
  transition:background .22s,transform .28s var(--ease-out-quart)}
.card:hover{transform:translateY(-4px)}
.grey .card,.tint .card{background:var(--white)}
.dark .card{background:rgba(255,255,255,.06)}
.dark .card h3{color:var(--white)}
.dark .card p{color:rgba(255,255,255,.66)}
.card .ci{font-size:13px;font-weight:500;color:var(--blue-ink);margin-bottom:14px}
.card h3{font-size:1.2rem;font-weight:500;letter-spacing:-.024em;margin:0 0 10px;line-height:1.25}
.card p{font-size:15px;color:var(--ink-soft);line-height:1.55;margin:0;font-weight:350}
.card .more{margin-top:18px;font-size:14px;font-weight:500;color:var(--blue-ink)}
a.card:hover .more{text-decoration:underline}

/* ---------- nav cards (start here) ---------- */
.navcards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.navcard{background:var(--grey-100);border-radius:var(--r-card);padding:32px 28px;display:flex;flex-direction:column;
  transition:transform .28s var(--ease-out-quart),background .22s}
.navcard:hover{transform:translateY(-4px);background:var(--blue-2)}
.navcard .nn{font-size:11px;letter-spacing:0;color:var(--blue-ink)}
.navcard h3{font-size:clamp(1.35rem,2vw,1.7rem);font-weight:500;letter-spacing:-.03em;margin:18px 0 12px;line-height:1.12}
.navcard p{font-size:15px;color:var(--ink-soft);line-height:1.5;margin:0 0 22px;font-weight:350;flex:1}
.navcard .go{font-size:14.5px;font-weight:500}
.navcard .go .ar{display:inline-block;transition:transform .3s var(--ease-out-expo)}
.navcard:hover .go .ar{transform:translateX(5px)}

/* ---------- spec rows ---------- */
.specs{border-top:1px solid var(--line)}
.spec{display:grid;grid-template-columns:210px 290px 1fr;gap:32px;align-items:baseline;padding:22px 0;
  border-bottom:1px solid var(--line);transition:padding-left .3s var(--ease-out-quart)}
.spec:hover{padding-left:10px}
.spec .sk{font-size:11px;letter-spacing:0;color:var(--ink-faint)}
.spec .sv{font-size:20px;font-weight:500;letter-spacing:-.028em}
.spec .sn{font-size:15px;color:var(--ink-soft);line-height:1.5;font-weight:350}

/* ---------- layer stack ---------- */
.layers{border-top:1px solid var(--line)}
.layer{display:grid;grid-template-columns:56px 210px 1fr 210px;gap:28px;align-items:baseline;padding:30px 0;
  border-bottom:1px solid var(--line);transition:padding-left .3s var(--ease-out-quart)}
.layer:hover{padding-left:10px}
.layer .ln{font-size:13px;color:var(--blue-ink)}
.layer .nm{font-size:clamp(1.35rem,2vw,1.8rem);font-weight:500;letter-spacing:-.03em}
.layer .ds{font-size:15.5px;color:var(--ink-soft);line-height:1.5;font-weight:350;max-width:58ch}
.layer .sp{font-size:11.5px;text-align:right;letter-spacing:0}

/* ---------- comparison table ---------- */
.tbl-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-top:8px}
table.cmp{width:100%;border-collapse:collapse;min-width:640px;font-size:15.5px}
table.cmp th,table.cmp td{text-align:left;padding:18px 20px;border-bottom:1px solid var(--line);vertical-align:top;font-weight:350}
table.cmp thead th{font-size:11px;letter-spacing:0;
  color:var(--ink-faint);font-weight:500;border-bottom:1px solid var(--line-strong)}
table.cmp tbody th{font-weight:500;color:var(--ink);width:210px;letter-spacing:-.02em}
table.cmp td{color:var(--ink-soft);line-height:1.5}
table.cmp td.hi{color:var(--ink);font-weight:450}
table.cmp tr:last-child th,table.cmp tr:last-child td{border-bottom:none}
.grey table.cmp th,.grey table.cmp td{border-color:var(--grey-300)}

/* ---------- timeline ---------- */
.tline{margin-top:8px}
.tl{display:grid;grid-template-columns:170px 1fr 200px;gap:32px;align-items:baseline;padding:30px 0;
  border-top:1px solid rgba(255,255,255,.16)}
.tl:last-child{border-bottom:1px solid rgba(255,255,255,.16)}
.tl .ty{font-size:12px;letter-spacing:0;color:var(--blue-1)}
.tl .th{font-size:clamp(1.25rem,1.9vw,1.7rem);font-weight:500;letter-spacing:-.03em;margin-bottom:10px}
.tl .td{font-size:15.5px;line-height:1.55;font-weight:350;color:rgba(255,255,255,.66);max-width:62ch}
.tl .td em{font-style:italic;color:var(--white)}
.tl .tv{font-size:11.5px;text-align:right;color:rgba(255,255,255,.82);letter-spacing:0}
.tag-now{font-size:9.5px;letter-spacing:0;background:var(--blue-1);
  color:var(--black);padding:4px 9px;border-radius:var(--r-pill);margin-left:12px;vertical-align:middle;font-weight:500}

/* ---------- chain ---------- */
.chain{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.clink{background:var(--white);border-radius:var(--r-card);padding:26px 24px}
.clink.last{background:var(--blue-3);color:var(--white)}
.clink .cs{font-size:10.5px;letter-spacing:0;color:var(--ink-faint)}
.clink.last .cs{color:var(--blue-1)}
.clink .cw{font-size:clamp(1.28rem,1.9vw,1.55rem);font-weight:500;letter-spacing:-.03em;margin:14px 0 10px}
.clink .cd{font-size:14.5px;color:var(--ink-soft);line-height:1.5;font-weight:350}
.clink.last .cd{color:rgba(255,255,255,.66)}

/* ---------- metrics ---------- */
.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.metrics.three{grid-template-columns:repeat(3,1fr)}
.metric{background:var(--grey-100);border-radius:var(--r-card);padding:36px 30px;min-height:210px;
  display:flex;flex-direction:column;justify-content:space-between}
.grey .metric,.tint .metric{background:var(--white)}
.dark .metric{background:rgba(255,255,255,.07)}
.metric .mv{font-size:clamp(2.4rem,4.4vw,3.6rem);font-weight:500;letter-spacing:-.05em;line-height:.95;color:var(--blue-ink)}
.dark .metric .mv{color:var(--blue-1)}
.metric .mk{margin-top:22px;font-size:15px;color:var(--ink-soft);line-height:1.45;font-weight:350}
.dark .metric .mk{color:rgba(255,255,255,.66)}

/* pills */
.pills{display:flex;flex-wrap:wrap;gap:8px}
.pill{font-size:11.5px;letter-spacing:0;border:1px solid var(--line-strong);
  border-radius:var(--r-pill);padding:9px 16px;color:var(--ink-soft)}
.pill b{color:var(--blue-ink);font-weight:500}

/* ---------- callouts ---------- */
.callout{border-radius:var(--r-card);padding:26px 28px;margin-top:8px}
.callout .ct{font-size:10.5px;letter-spacing:0;
  margin-bottom:12px;display:flex;align-items:center;gap:8px}
.callout p{margin:0;font-size:15.5px;line-height:1.58;font-weight:350}
.callout p + p{margin-top:12px}
.callout.check{background:var(--blue-2);color:#0d1b33}
.callout.check .ct{color:var(--blue-deep)}
.callout.warn{background:var(--warn-bg);border:1px solid var(--warn-line);color:#3d2f00}
.callout.warn .ct{color:var(--warn-ink)}
.callout.plain{background:var(--grey-100);color:var(--ink)}
.callout.plain .ct{color:var(--ink-faint)}
.callout a{border-bottom:1px solid currentColor}

/* analogy block */
.analogy{border-left:3px solid var(--blue-1);padding:4px 0 4px 22px;margin:24px 0}
.analogy .al{font-size:10.5px;letter-spacing:0;
  color:var(--blue-ink);margin-bottom:8px}
.analogy p{margin:0;font-size:16.5px;line-height:1.5;font-weight:350;color:var(--ink)}
.on-dark .analogy{border-color:var(--blue-1)}
.on-dark .analogy .al{color:var(--blue-1)}
.on-dark .analogy p{color:rgba(255,255,255,.86)}

/* ---------- component blocks ---------- */
.comp{border-top:1px solid var(--line);padding:44px 0;display:grid;grid-template-columns:64px 1fr 320px;gap:40px}
.comp:last-child{border-bottom:1px solid var(--line)}
.comp .cnum{font-size:13px;color:var(--blue-ink);padding-top:6px}
.comp h3{font-size:clamp(1.5rem,2.4vw,2.1rem);font-weight:500;letter-spacing:-.032em;margin:0 0 16px;line-height:1.08}
.comp .cbody p{margin:0 0 14px;font-size:16px;line-height:1.6;font-weight:350;color:var(--ink-soft)}
.comp .cbody p:last-child{margin-bottom:0}
.comp .cbody strong{color:var(--ink);font-weight:500}
.comp .cside{background:var(--grey-100);border-radius:var(--r-card);padding:24px}
.comp .cside .csk{font-size:10px;letter-spacing:0;color:var(--ink-faint)}
.comp .cside .csv{font-size:clamp(1.5rem,2.2vw,1.9rem);font-weight:500;letter-spacing:-.04em;line-height:1.05;margin-top:10px;color:var(--blue-ink)}
.comp .cside .csn{font-size:14px;color:var(--ink-soft);line-height:1.5;margin-top:12px;font-weight:350}

/* ---------- plans ---------- */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.plan{background:var(--grey-100);border-radius:var(--r-card);padding:32px 28px;display:flex;flex-direction:column;
  transition:transform .28s var(--ease-out-quart)}
.plan:hover{transform:translateY(-4px)}
.plan.feat{background:var(--blue-3);color:var(--white)}
.plan .pt{font-size:10.5px;letter-spacing:0;color:var(--ink-faint)}
.plan.feat .pt{color:var(--blue-1)}
.plan .pn{font-size:clamp(1.45rem,2.2vw,1.9rem);font-weight:500;letter-spacing:-.035em;margin:12px 0 4px}
.plan .pu{font-size:14px;color:var(--ink-faint);margin-bottom:24px;font-weight:350}
.plan.feat .pu{color:rgba(255,255,255,.55)}
.plan ul{list-style:none;padding:0;margin:0 0 26px;flex:1}
.plan li{font-size:14.5px;color:var(--ink-soft);padding:11px 0;border-top:1px solid var(--grey-300);display:flex;gap:10px;
  font-weight:350;line-height:1.45}
.plan.feat li{color:rgba(255,255,255,.72);border-color:rgba(255,255,255,.18)}
.plan li::before{content:"→";color:var(--blue-ink);flex-shrink:0}
.plan.feat li::before{color:var(--blue-1)}
.plan .pb{display:block;text-align:center;border-radius:var(--r-pill);padding:14px;font-size:14.5px;font-weight:500;
  border:1px solid var(--black);background:transparent;transition:all .22s}
.plan .pb:hover{background:var(--black);color:var(--white)}
.plan.feat .pb{background:var(--blue-1);border-color:var(--blue-1);color:var(--black)}
.plan.feat .pb:hover{background:#31dcff;border-color:#31dcff}

/* ---------- partners ---------- */
.partners{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.pcell{background:var(--grey-100);border-radius:var(--r-card);padding:28px 24px}
.pcell .pr{font-size:10px;letter-spacing:0;color:var(--ink-faint)}
.pcell .pnm{font-size:1.22rem;font-weight:500;letter-spacing:-.03em;margin-top:12px;line-height:1.18}
.pcell .pds{font-size:14px;color:var(--ink-soft);margin-top:10px;line-height:1.5;font-weight:350}
.names{display:flex;flex-wrap:wrap;gap:8px}
.names span{font-size:16px;font-weight:450;letter-spacing:-.02em;background:var(--white);border-radius:var(--r-pill);padding:10px 18px}

/* ---------- glossary ---------- */
.gloss{border-top:1px solid var(--line)}
.gitem{border-bottom:1px solid var(--line)}
.gitem summary{cursor:pointer;padding:22px 0;display:flex;align-items:baseline;gap:20px;list-style:none;
  font-size:clamp(1.1rem,1.6vw,1.35rem);font-weight:500;letter-spacing:-.026em;transition:padding-left .3s var(--ease-out-quart)}
.gitem summary::-webkit-details-marker{display:none}
.gitem summary::after{content:"+";margin-left:auto;font-weight:400;color:var(--blue-ink);font-size:1.4rem;line-height:1;flex-shrink:0}
.gitem[open] summary::after{content:"–"}
.gitem summary:hover{padding-left:8px}
.gitem .gbody{padding:0 0 26px;font-size:16px;line-height:1.6;font-weight:350;color:var(--ink-soft);max-width:74ch}
.gitem .gbody p{margin:0 0 12px}
.gitem .gbody p:last-child{margin-bottom:0}
.gitem .gbody strong{color:var(--ink);font-weight:500}

/* ---------- sources ---------- */
.srcs{border-top:1px solid var(--line)}
.src-row{display:grid;grid-template-columns:56px 1fr;gap:24px;padding:26px 0;border-bottom:1px solid var(--line);align-items:baseline;
  scroll-margin-top:calc(var(--nav-h) + 24px)}
.src-row:target{background:var(--blue-2);border-radius:var(--r-card);padding-left:20px;padding-right:20px}
.src-row .sid{font-size:12px;color:var(--blue-ink)}
.src-row a.st{font-size:17px;font-weight:500;letter-spacing:-.022em;border-bottom:1px solid var(--line-strong);
  transition:color .18s,border-color .18s}
.src-row a.st:hover{color:var(--blue-ink);border-color:var(--blue-ink)}
.src-row .su{font-size:11.5px;color:var(--ink-faint);margin-top:7px;word-break:break-all}
.src-row .sw{font-size:14.5px;color:var(--ink-soft);margin-top:9px;line-height:1.5;font-weight:350}
.src-row .stag{display:inline-block;font-size:9.5px;letter-spacing:0;
  border-radius:var(--r-pill);padding:4px 10px;margin-top:10px;font-weight:500}
.stag.primary{background:var(--blue-2);color:var(--blue-deep)}
.stag.official{background:#e3f2e5;color:#1d5127}
.stag.third{background:var(--grey-200);color:var(--grey-600)}
.stag.vendor{background:var(--warn-bg);color:var(--warn-ink)}

.note{font-size:14px;color:var(--ink-faint);line-height:1.6;max-width:86ch;font-weight:350;margin:26px 0 0}

/* ---------- prev / next ---------- */
.pagenav{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:0 0 var(--sect-gap)}
.pagenav a{background:var(--grey-100);border-radius:var(--r-card);padding:26px 28px;
  transition:background .22s,transform .28s var(--ease-out-quart)}
.pagenav a:hover{background:var(--blue-2);transform:translateY(-3px)}
/* These are spans, so they need to be blocks or the label and title collide. */
.pagenav .pl{display:block;font-size:10.5px;letter-spacing:0;
  color:var(--ink-faint)}
.pagenav .pv{display:block;font-size:clamp(1.1rem,1.6vw,1.35rem);font-weight:500;letter-spacing:-.028em;
  margin-top:10px;line-height:1.2}
.pagenav a.next{text-align:right}

/* ---------- references ---------- */
.refs{border-top:1px solid var(--line);margin-top:8px;
  column-count:2;column-gap:56px}
.ref{break-inside:avoid;padding:18px 0;border-bottom:1px solid var(--line);
  display:grid;grid-template-columns:38px 1fr;gap:14px;align-items:baseline;
  scroll-margin-top:calc(var(--nav-h) + 24px)}
.ref:target{background:var(--blue-2);border-radius:var(--r-card);padding-left:14px;padding-right:14px}
.ref .rn{font-size:11.5px;color:var(--blue-ink)}
.ref .rt{font-size:15.5px;font-weight:450;letter-spacing:-.018em;line-height:1.35;
  border-bottom:1px solid var(--line-strong);transition:color .18s,border-color .18s}
.ref a.rt:hover{color:var(--blue-ink);border-color:var(--blue-ink)}
.ref .rm{font-size:13px;color:var(--ink-faint);line-height:1.45;margin-top:6px;font-weight:350}
.ref .rk{display:inline-block;font-size:9px;letter-spacing:0;
  border-radius:var(--r-pill);padding:3px 9px;margin-top:8px;font-weight:500;
  background:var(--grey-200);color:var(--grey-600)}
.ref .rk.own{background:var(--blue-2);color:var(--blue-deep)}
.ref .rk.gov{background:#e3f2e5;color:#1d5127}
.ref .rk.sell{background:var(--warn-bg);color:var(--warn-ink)}
@media(max-width:900px){.refs{column-count:1}}

/* ---------- closing + footer ---------- */
.closing .display em{font-style:normal;color:var(--blue-1)}
.contact{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:48px}
.contact .cc{background:rgba(255,255,255,.07);border-radius:var(--r-card);padding:26px 24px}
.contact .ck{font-size:10px;letter-spacing:0;color:rgba(255,255,255,.5)}
.contact .cv{font-size:17px;font-weight:450;letter-spacing:-.02em;margin-top:10px;line-height:1.4}
.contact .cv a{border-bottom:1px solid rgba(255,255,255,.32)}
.contact .cv a:hover{color:var(--blue-1);border-color:var(--blue-1)}

footer{background:var(--white);padding:44px 0;border-top:1px solid var(--line)}
.foot{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;align-items:center;
  font-size:11.5px;letter-spacing:0;color:var(--ink-faint)}
.foot nav{display:flex;gap:20px;flex-wrap:wrap}
.foot a:hover{color:var(--black)}

/* ---------- scenario explorer ---------- */
/* Five everyday things, each answering the same three questions, so the
   difference between them is what the reader takes away. */
.scen{margin-top:clamp(32px,4vw,48px)}
.scen-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.scen-tab{display:inline-flex;align-items:center;gap:10px;font-family:inherit;font-size:14.5px;font-weight:450;
  letter-spacing:-.012em;padding:12px 20px;border-radius:var(--r-pill);border:1px solid rgba(0,10,61,.2);
  background:rgba(255,255,255,.62);color:#1b2b4a;cursor:pointer;text-align:left;
  transition:background .2s,color .2s,border-color .2s,transform .22s var(--ease-out-quart)}
.scen-tab:hover{background:var(--white);transform:translateY(-2px)}
.scen-tab .tn{font-size:10.5px;letter-spacing:0;color:var(--blue-deep)}
.scen-tab[aria-selected="true"]{background:var(--black);border-color:var(--black);color:var(--white)}
.scen-tab[aria-selected="true"] .tn{color:var(--blue-1)}
.scen-panel{background:var(--white);border-radius:var(--r-card);overflow:hidden;
  animation:scfade .34s var(--ease-out-quart)}
.scen-panel[hidden]{display:none}
@keyframes scfade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.scen-see{padding:clamp(26px,3vw,36px) clamp(22px,3vw,40px);border-bottom:1px solid var(--grey-200)}
.sck{font-size:10px;letter-spacing:0;
  color:var(--ink-faint)}
.scen-see p{margin:14px 0 0;font-size:clamp(1.2rem,2.1vw,1.7rem);font-weight:500;letter-spacing:-.03em;
  line-height:1.2;max-width:48ch;color:var(--ink)}
.scen-body{display:grid;grid-template-columns:1.05fr .95fr;gap:1px;background:var(--grey-200)}
.scen-fig{background:var(--grey-100);display:flex;align-items:center;justify-content:center;
  padding:clamp(20px,3vw,34px)}
.scen-fig svg{display:block;width:100%;height:auto;max-width:520px}
.scen-meters{background:var(--white);padding:clamp(26px,3vw,36px) clamp(22px,3vw,40px)}
/* Three meters, same three rows on every scenario, so the shape is the message. */
.scb + .scb{margin-top:22px}
.scb .bk{font-size:10px;letter-spacing:0;
  color:var(--ink-faint)}
.scb .brow{display:flex;align-items:center;gap:14px;margin-top:9px;flex-wrap:wrap}
.bar{display:inline-flex;gap:4px;flex-shrink:0}
.bar i{display:block;width:26px;height:10px;border-radius:2px;background:var(--grey-300)}
.bar i.on{background:var(--blue-ink)}
.scb .bv{font-size:16px;font-weight:500;letter-spacing:-.022em;color:var(--ink)}
.scfoot{margin:26px 0 0;font-size:13px;line-height:1.5;color:var(--ink-faint);font-weight:350}
.scen-out{background:var(--blue-3);color:var(--white);padding:clamp(24px,2.6vw,30px) clamp(22px,3vw,40px)}
.scen-out .sck{color:var(--blue-1)}
.scen-out p{margin:12px 0 0;font-size:16px;line-height:1.5;font-weight:350;color:rgba(255,255,255,.82);max-width:72ch}
.scen-out sup.src a{color:var(--blue-1)}
.scen-out sup.src a:hover{border-color:var(--blue-1)}

/* ---------- reveal ---------- */
.rv{opacity:0;transform:translateY(22px);transition:opacity .8s var(--ease-out-quart),transform .8s var(--ease-out-quart)}
.rv.in{opacity:1;transform:none}

/* ---------- two-col ---------- */
.cols2{display:grid;grid-template-columns:1fr 1fr;gap:44px}
.split{display:grid;grid-template-columns:1.25fr .75fr;gap:56px;align-items:start}

/* ---------- responsive ---------- */
@media(max-width:1180px){
  :root{--side:40px;--r-sect:44px;--sect-gap:72px}
  .nav-links{display:none}
  .nav-links.open{display:flex;position:absolute;top:var(--nav-h);left:0;right:0;background:var(--white);
    flex-direction:column;gap:0;padding:8px 40px 20px;border-bottom:1px solid var(--line);margin:0}
  .nav-links.open a{padding:14px 0;border-bottom:1px solid var(--line);font-size:16px}
  .navtoggle{display:block;margin-left:12px}
  .nav-cta{display:none}
  .split,.cols2,.hero-grid{grid-template-columns:1fr;gap:40px}
  .layer{grid-template-columns:48px 1fr;gap:6px 20px}
  .layer .ds,.layer .sp{grid-column:2}
  .layer .sp{text-align:left;margin-top:6px;color:var(--ink-faint)}
  .spec{grid-template-columns:1fr;gap:6px}
  .tl{grid-template-columns:1fr;gap:10px}
  .tl .tv{text-align:left;margin-top:4px}
  .comp{grid-template-columns:44px 1fr;gap:8px 20px}
  .comp .cbody,.comp .cside{grid-column:2}
  .comp .cside{margin-top:20px}
  .chain,.metrics,.metrics.three,.cards,.cards.two,.plans,.partners,.contact,.navcards{grid-template-columns:repeat(2,1fr)}
  .scen-body{grid-template-columns:1fr}
}
@media(max-width:720px){
  :root{--side:20px;--r-sect:28px;--sect-gap:56px;--nav-h:68px}
  body{font-size:16px}
  .nav-links.open{padding:8px 20px 20px}
  .statstrip{grid-template-columns:1fr 1fr}
  .chain,.metrics,.metrics.three,.cards,.cards.two,.plans,.partners,.contact,.navcards,.pagenav{grid-template-columns:1fr}
  .pagenav a.next{text-align:left}
  .logo .txt small{display:none}
  .foot{flex-direction:column;align-items:flex-start;gap:16px}
  table.cmp tbody th{width:auto}
}
@media(prefers-reduced-motion:reduce){
  .marquee-track{animation:none}
  .rv{opacity:1;transform:none;transition:none}
  .scen-panel{animation:none}
  *{scroll-behavior:auto}
  .btn:hover,.card:hover,.navcard:hover,.plan:hover,.pagenav a:hover,.scen-tab:hover{transform:none}
}
@media print{
  .nav,.marquee,.pagenav,.btn-row{display:none}
  body{font-size:11pt}
  .rv{opacity:1;transform:none}
  .sect-round{border-radius:0;padding:0}
  .dark,.tint,.grey{background:none!important;color:#000!important}
  /* On paper there is nothing to click, so every scenario prints. */
  .scen-tabs{display:none}
  .scen-panel[hidden]{display:block}
  .scen-out{background:none!important;color:#000!important}
  .scen-out p{color:#000!important}
}