/* Tamra site v2 — the design system and the pages built on it.
   Ink and paper, one green, the app's own type pair (Plus Jakarta Sans for headlines, Inter for reading),
   tabular figures for money. The accountant's double underline appears only under totals. */

/* ── tokens ──────────────────────────────────────────────────────────────────────────────────── */
:root{
  --canvas:#FFFFFF; --paper:#F6F9FC; --paper-2:#EEF3F8;
  --ink:#0F1A2B; --ink-2:#444D5A; --muted:#626976;
  --hair:#E6ECF2; --line:#D6DEE8;
  --green:#17714A; --green-h:#125E3D; --green-app:#1E8E5A; --soft:#EAF5EF;
  --deep:#0B1F16; --deep-2:#10291D; --night:#0B1020;
  --amber:#9A5B00;
  --aur:linear-gradient(90deg,#34D399,#22D3EE,#6366F1,#A78BFA);
  --display:"Plus Jakarta Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --serif:"Fraunces",Georgia,"Times New Roman",serif;
  --text:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --r-card:12px; --r-btn:10px; --r-frame:14px;
  --shadow-frame:0 1px 2px rgba(15,26,43,.06),0 12px 32px -12px rgba(15,26,43,.18);
  --shadow-lift:0 1px 2px rgba(15,26,43,.06),0 24px 48px -20px rgba(15,26,43,.32);
  --wrap:1200px; --gut:24px; --sec:128px; --nav-h:68px;
  --ease:cubic-bezier(.2,.7,.2,1);
}

/* ── base ────────────────────────────────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:calc(var(--nav-h) + 16px)}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--canvas);color:var(--ink);font:400 17px/1.6 var(--text);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;overflow-x:clip}
img,svg{display:block;max-width:100%}
a{color:inherit}
p{margin:0}
h1,h2,h3,h4{margin:0;font-family:var(--display);font-weight:700;color:var(--ink);text-wrap:balance}
ul,ol{margin:0;padding:0;list-style:none}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--green);outline-offset:3px;border-radius:6px}
.defs{position:absolute;width:0;height:0;overflow:hidden}
.sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;left:16px;top:-60px;z-index:200;background:var(--ink);color:#fff;padding:10px 16px;border-radius:10px;text-decoration:none;font-weight:600}
.skip:focus{top:12px}
.num,.tab{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
.ic{width:1em;height:1em}

/* ── layout ──────────────────────────────────────────────────────────────────────────────────── */
.wrap{max-width:calc(var(--wrap) + var(--gut)*2);margin:0 auto;padding:0 var(--gut)}
.sec{padding:var(--sec) 0;position:relative}
.sec.paper{background:var(--paper)}
.sec.tight{padding-top:calc(var(--sec)*.6)}
.sec-head{max-width:760px}
.sec-head.center{margin:0 auto;text-align:center}
.sec-head.center .lede{margin-left:auto;margin-right:auto}
.h-display{font-family:var(--serif);font-size:clamp(44px,4.6vw + 15px,86px);line-height:.99;letter-spacing:-.03em;font-weight:600}
.h2{font-family:var(--serif);font-size:clamp(34px,2.3vw + 18px,58px);line-height:1.03;letter-spacing:-.024em;font-weight:600}
.h3{font-size:clamp(22px,.8vw + 15px,28px);line-height:1.18;letter-spacing:-.02em}
.lede{font-size:clamp(17px,.3vw + 15.5px,20px);line-height:1.6;color:var(--ink-2);max-width:62ch;margin-top:18px}
.mut{color:var(--muted)}
.small{font-size:14px;line-height:1.55}
.caption{font-size:13.5px;color:var(--muted);margin-top:18px}

/* ── buttons and links ───────────────────────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;padding:0 18px;border-radius:var(--r-btn);
  font:600 15px/1 var(--text);text-decoration:none;border:1px solid transparent;cursor:pointer;white-space:nowrap;
  transition:background .18s,border-color .18s,color .18s,box-shadow .18s,transform .18s}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--green);color:#fff;box-shadow:0 1px 0 rgba(255,255,255,.12) inset,0 1px 2px rgba(11,31,22,.2)}
.btn-primary:hover{background:var(--green-h)}
.btn-quiet{background:#fff;color:var(--ink);border-color:var(--line)}
.btn-quiet:hover{border-color:#B9C5D3;background:var(--paper)}
.btn-ghost-light{background:transparent;color:#fff;border-color:rgba(255,255,255,.28)}
.btn-ghost-light:hover{border-color:rgba(255,255,255,.6);background:rgba(255,255,255,.06)}
.btn-bright{background:#34C27F;color:#06140D}
.btn-bright:hover{background:#4ED493}
.btn-lg{height:52px;padding:0 24px;font-size:16px;border-radius:12px}
.btn-block{width:100%}
.link{color:var(--green);font-weight:600;text-decoration:none;display:inline-flex;align-items:center;gap:6px}
.link:hover{text-decoration:underline;text-underline-offset:3px}
.link .ic{width:14px;height:14px;transition:transform .18s}
.link:hover .ic{transform:translateX(2px)}

/* ── navigation ──────────────────────────────────────────────────────────────────────────────── */
.nav{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.98);border-bottom:1px solid transparent;transition:border-color .2s,box-shadow .2s}
.nav.scrolled{border-bottom-color:var(--hair);box-shadow:0 1px 0 rgba(15,26,43,.02)}
.nav-in{max-width:calc(var(--wrap) + var(--gut)*2);margin:0 auto;padding:0 var(--gut);height:var(--nav-h);display:flex;align-items:center;gap:28px}
.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;font:700 20px/1 var(--display);letter-spacing:-.02em;color:var(--ink)}
.brand .logo{width:30px;height:30px}
.nav-links{display:flex;align-items:center;gap:4px}
.nav-link{display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 12px;border-radius:9px;border:0;background:none;cursor:pointer;
  font:500 15px/1 var(--text);color:var(--ink-2);text-decoration:none;transition:background .15s,color .15s}
.nav-link:hover,.nav-link[aria-expanded=true]{background:var(--paper);color:var(--ink)}
.nav-link[aria-current=page]{color:var(--ink);font-weight:600}
.nav-link .chev{width:12px;height:12px;transition:transform .2s}
.nav-link[aria-expanded=true] .chev{transform:rotate(180deg)}
.nav-cta{margin-left:auto;display:flex;align-items:center;gap:10px}
.nav-cta .btn{height:40px;font-size:14.5px}
.mega-wrap{position:relative}
.mega{position:absolute;left:-12px;top:calc(100% + 12px);width:min(940px,calc(100vw - 48px));display:grid;grid-template-columns:1.15fr 1fr .9fr;gap:8px;
  padding:14px;background:#fff;border:1px solid var(--hair);border-radius:16px;box-shadow:0 24px 60px -18px rgba(15,26,43,.28),0 2px 6px rgba(15,26,43,.05)}
.mega[hidden]{display:none}
.mega-col{display:flex;flex-direction:column;gap:2px;padding:6px}
.mega-h{font:600 13px/1 var(--display);color:var(--muted);padding:6px 10px 10px}
.mega a{display:flex;align-items:center;gap:12px;padding:8px 10px;border-radius:10px;text-decoration:none;transition:background .15s}
.mega a:hover{background:var(--paper)}
.mega a .tile{flex:none}
.mega a b{display:block;font:600 14.5px/1.25 var(--text);color:var(--ink)}
.mega a i{display:block;font-style:normal;font-size:13px;line-height:1.35;color:var(--muted);margin-top:2px}
.mega-side{background:var(--paper);border-radius:12px}
.mega-plain{display:block!important}
.mega-new{margin-top:auto;display:block!important;border:1px solid var(--hair);background:#fff}
.mega-new span{display:block;font:600 12px/1 var(--text);color:var(--green);margin-bottom:6px}
.mega-new b{font-size:14px!important}
.burger{display:none;margin-left:auto;width:44px;height:44px;border:1px solid var(--line);border-radius:10px;background:#fff;cursor:pointer;position:relative}
.burger span{position:absolute;left:12px;right:12px;height:1.6px;background:var(--ink);border-radius:2px;transition:transform .2s,top .2s}
.burger span:first-child{top:17px}
.burger span:last-child{top:25px}
.burger[aria-expanded=true] span:first-child{top:21px;transform:rotate(45deg)}
.burger[aria-expanded=true] span:last-child{top:21px;transform:rotate(-45deg)}
.sheet{position:fixed;inset:var(--nav-h) 0 0 0;background:#fff;overflow-y:auto;padding:12px var(--gut) 32px;border-top:1px solid var(--hair);z-index:99}
.sheet[hidden]{display:none}
.sheet-h{font:600 13px/1 var(--display);color:var(--muted);margin:18px 0 10px}
.sheet-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.sheet-grid a{display:flex;flex-direction:column;align-items:center;gap:7px;padding:12px 4px;border-radius:12px;text-decoration:none;font:500 12.5px/1.2 var(--text);
  text-align:center;color:var(--ink-2)}
.sheet-grid a:active{background:var(--paper)}
.sheet-links{display:flex;flex-direction:column;margin:18px 0 20px;border-top:1px solid var(--hair)}
.sheet-links a{padding:15px 2px;border-bottom:1px solid var(--hair);text-decoration:none;font:500 17px/1 var(--text)}
body.sheet-open{overflow:hidden}

/* ── hero ────────────────────────────────────────────────────────────────────────────────────── */
.hero{position:relative;padding:76px 0 0;overflow:clip}
.hero::before{content:"";position:absolute;inset:auto 0 0 0;height:62%;background:linear-gradient(180deg,rgba(246,249,252,0) 0%,var(--paper) 30%);z-index:-1}
.news{display:inline-flex;align-items:center;gap:10px;padding:5px 12px 5px 5px;border-radius:999px;border:1px solid var(--hair);background:#fff;
  text-decoration:none;font:500 14px/1 var(--text);color:var(--ink-2);margin-bottom:28px;transition:border-color .2s}
.news:hover{border-color:var(--line)}
.news-tag{padding:5px 9px;border-radius:999px;background:var(--soft);color:var(--green);font-weight:600;font-size:13px}
.news .ic{width:14px;height:14px;color:var(--muted)}
.hero h1{max-width:13.5em}
.hl{display:inline-block}
.hero-sub{font-size:clamp(17px,.45vw + 15px,21px);line-height:1.55;color:var(--ink-2);max-width:36em;margin-top:26px}
.ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
.hero-stage{position:relative;margin-top:68px;padding-bottom:88px}
.hero-shot{box-shadow:0 1px 2px rgba(15,26,43,.06),0 40px 80px -36px rgba(15,26,43,.38)}
.hero .caption{margin-top:18px}

/* the journal entry a document posts — the site's one bold device */
.je{background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:0 1px 2px rgba(15,26,43,.06),0 22px 48px -18px rgba(15,26,43,.32);
  font-variant-numeric:tabular-nums}
.je header{padding:16px 20px 12px;border-bottom:1px solid var(--hair)}
.je-t{font:700 17px/1.2 var(--display);letter-spacing:-.01em}
.je-s{font-size:13px;color:var(--muted);margin-top:4px}
.je table{width:100%;border-collapse:collapse;font-size:14.5px}
.je th{font:500 12.5px/1 var(--text);color:var(--muted);text-align:right;padding:12px 20px 8px}
.je th:first-child,.je td:first-child{text-align:left}
.je td{padding:11px 20px;border-top:1px solid var(--hair);text-align:right;white-space:nowrap}
.je tfoot td{border-top:1px solid var(--ink);font-weight:600;padding-bottom:14px}
.dbl{position:relative;display:inline-block;padding-bottom:3px}
.dbl::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:4px;border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);transform-origin:right}
.je-ok{display:flex;align-items:center;gap:8px;padding:12px 20px;background:var(--soft);font-size:13.5px;color:var(--green);font-weight:500}
.je-ok svg{width:16px;height:16px;flex:none}
.hero .je{position:absolute;right:-16px;top:-300px;width:430px;z-index:2}

/* ── platform: the app tiles ─────────────────────────────────────────────────────────────────── */
.apps{display:grid;grid-template-columns:repeat(7,1fr);gap:28px 12px;margin-top:64px}
.apps a{display:flex;flex-direction:column;align-items:center;gap:12px;text-decoration:none;padding:10px 4px 12px;border-radius:16px;transition:background .2s}
.apps a:hover{background:var(--paper)}
.apps .tile{width:64px;height:64px;filter:drop-shadow(0 10px 14px rgba(15,26,43,.16));transition:transform .35s var(--ease)}
.apps a:hover .tile{transform:translateY(-4px) scale(1.04)}
.apps span{font:600 14.5px/1.2 var(--text);color:var(--ink);text-align:center}
.apps small{display:block;font-size:12.5px;font-weight:400;color:var(--muted);margin-top:3px}

/* ── one ledger underneath ───────────────────────────────────────────────────────────────────── */
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:64px;border-top:1px solid var(--line)}
.pillar{padding:30px 32px 6px 0}
.pillar+.pillar{padding-left:32px;border-left:1px solid var(--hair)}
.pillar h3{font-size:22px;letter-spacing:-.02em}
.pillar p{color:var(--ink-2);font-size:16px;margin-top:10px}
.pillar-art{height:168px;margin-bottom:26px;display:flex;align-items:flex-end}
.mini-je{width:100%;max-width:340px;font-size:12.5px;font-variant-numeric:tabular-nums;border:1px solid var(--hair);border-radius:10px;background:#fff;overflow:hidden}
.mini-je div{display:grid;grid-template-columns:1fr 74px 74px;gap:8px;padding:7px 12px;border-top:1px solid var(--hair);white-space:nowrap}
.mini-je div:first-child{border-top:0}
.mini-je span:nth-child(n+2){text-align:right}
.mini-je .t{font-weight:600;border-top:1px solid var(--ink)}
.mini-trail{display:flex;flex-wrap:wrap;gap:5px;align-items:center;max-width:360px}
.mini-trail span{display:inline-flex;align-items:center;gap:5px;padding:5px 8px;border-radius:8px;border:1px solid var(--hair);background:#fff;font:600 12.5px/1 var(--text);color:var(--ink-2);font-variant-numeric:tabular-nums}
.mini-trail span i{width:7px;height:7px;border-radius:50%}
.mini-trail span.me{border-color:rgba(16,185,129,.45);background:rgba(16,185,129,.1);color:var(--ink)}
.mini-trail em{font-style:normal;color:var(--muted);font-size:12px}
.mini-close{width:100%;max-width:340px;border:1px solid var(--hair);border-radius:10px;background:#fff;font-size:13px;font-variant-numeric:tabular-nums;overflow:hidden}
.mini-close div{display:flex;justify-content:space-between;padding:7px 12px;border-top:1px solid var(--hair)}
.mini-close div:first-child{border-top:0}
.mini-close .z{font-weight:600}
.mini-close .z b{color:var(--green)}
.mini-close .lockd{display:flex;align-items:center;gap:7px;justify-content:flex-start;background:var(--soft);color:var(--green);font-weight:500}
.mini-close .lockd svg{width:14px;height:14px}

/* ── feature split: words beside a product shot ──────────────────────────────────────────────── */
.split{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.5fr);gap:64px;align-items:center}
.split.flip{grid-template-columns:minmax(0,1.5fr) minmax(0,.82fr)}
.split.flip .split-copy{order:2}
.split-copy .lede{font-size:18px}
.ticks{margin-top:26px;display:flex;flex-direction:column;gap:12px}
.ticks li{position:relative;padding-left:28px;font-size:16px;line-height:1.5;color:var(--ink-2)}
.ticks li::before{content:"";position:absolute;left:0;top:4px;width:17px;height:17px;border-radius:50%;background:var(--soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2317714A' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/10px no-repeat}
.ticks b{color:var(--ink);font-weight:600}
.wide-shot{margin-top:64px}

/* ── one sale, start to finish ───────────────────────────────────────────────────────────────── */
.sale-steps{display:grid;grid-template-columns:repeat(6,1fr);margin-top:56px;border-top:1px solid var(--line)}
.sale-step{display:block;appearance:none;border:0;background:none;text-align:left;padding:18px 14px 0 0;cursor:pointer;color:var(--muted);font:400 14px/1.4 var(--text);
  position:relative;text-decoration:none}
.sale-step::before{content:"";position:absolute;left:0;right:0;top:-1px;height:3px;background:var(--green);transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease)}
.sale-step .n{display:block;font:600 13px/1 var(--display);color:var(--muted)}
.sale-step b{display:block;font:600 17px/1.25 var(--display);color:var(--ink);margin-top:6px;letter-spacing:-.01em}
.sale-step.on::before,.sale-step.done::before{transform:scaleX(1)}
.sale-step.done::before{background:#9CC9B2}
.sale-step.on .n{color:var(--green)}
.sale-list{margin-top:36px}
.sale-item{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px;padding:36px 0;border-top:1px solid var(--hair)}
.sale-item:first-child{border-top:0;padding-top:0}
.sale-item>header{grid-column:1/-1;display:flex;align-items:baseline;gap:14px}
.sale-item>header .n{font:700 14px/1 var(--display);color:var(--green)}
.sale-item>header h3{font-size:24px;letter-spacing:-.02em}
.sale-item>header p{color:var(--ink-2);font-size:16px;margin-left:auto;max-width:34em;text-align:right}
.paper-doc{background:#fff;border:1px solid var(--line);border-radius:12px;padding:20px 22px;box-shadow:var(--shadow-frame);font-size:14px;font-variant-numeric:tabular-nums}
.pd-h{display:flex;justify-content:space-between;align-items:flex-start;padding-bottom:14px;border-bottom:1px solid var(--hair)}
.pd-seller{display:flex;align-items:center;gap:10px;font:600 14px/1.2 var(--display)}
.pd-mark{width:30px;height:30px;border-radius:8px;background:var(--deep);color:#7FD8AC;display:grid;place-items:center;font:700 10.5px/1 var(--display);letter-spacing:.02em}
.pd-type{text-align:right;font-size:12.5px;color:var(--muted)}
.pd-type b{display:block;font:700 16px/1.2 var(--display);color:var(--ink);margin-top:2px}
.pd-meta{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:14px 0}
.pd-meta span{display:block;font-size:12px;color:var(--muted)}
.pd-meta b{font-weight:600;font-size:14px}
.pd-lines{width:100%;border-collapse:collapse;font-size:13.5px}
.pd-lines th{font:500 12px/1 var(--text);color:var(--muted);text-align:left;padding:8px 0;border-bottom:1px solid var(--hair)}
.pd-lines td{padding:10px 0;border-bottom:1px solid var(--hair)}
.pd-lines .n{text-align:right}
.pd-tot{margin-left:auto;width:62%;padding-top:10px;font-size:13.5px}
.pd-tot div{display:flex;justify-content:space-between;padding:4px 0;color:var(--ink-2)}
.pd-tot .g{color:var(--ink);font-weight:700;padding-top:8px}
.pd-tot .g b{border-bottom:3px double var(--ink);padding-bottom:1px}
.pd-foot{display:flex;align-items:center;gap:10px;margin-top:14px;padding-top:12px;border-top:1px solid var(--hair);font-size:12.5px;color:var(--muted)}
.pill{display:inline-flex;align-items:center;padding:3px 9px;border-radius:999px;font:600 12px/1.4 var(--text);background:var(--paper-2);color:var(--ink-2)}
.pill.ok{background:var(--soft);color:var(--green)}
.pd-stock{display:flex;justify-content:space-between;align-items:center;margin-top:14px;padding:12px 14px;border-radius:10px;background:var(--paper);font-size:13.5px}
.pd-stock b{font:700 18px/1 var(--display)}
.pd-stock i{font-style:normal;color:var(--muted);margin:0 8px}
.pd-big{padding:16px 0 12px}
.pd-big span{display:block;font-size:12.5px;color:var(--muted)}
.pd-big b{display:block;font:700 30px/1.15 var(--display);letter-spacing:-.02em;margin-top:4px}
.pd-big em{display:block;font-style:normal;font-size:13px;color:var(--ink-2);margin-top:6px}
.pd-rows div{display:flex;justify-content:space-between;padding:8px 0;border-top:1px solid var(--hair);font-size:13.5px}
.pd-rows .s{font-weight:700}
.pd-stmt td:nth-child(3),.pd-stmt td:nth-child(4),.pd-stmt th:nth-child(3),.pd-stmt th:nth-child(4){text-align:right}
.pd-stmt .hit td{background:var(--soft)}
.pd-stmt .in{color:var(--green)}
.matched{display:inline-block;margin-left:6px;padding:1px 7px;border-radius:999px;background:var(--green);color:#fff;font-size:11px;font-weight:600}
.entry-empty{height:100%;min-height:200px;display:flex;flex-direction:column;justify-content:center;gap:8px;padding:24px;border:1px dashed var(--line);border-radius:12px;color:var(--ink-2);font-size:15px}
.entry-empty b{font:700 18px/1.2 var(--display);color:var(--ink)}
.sale-right{display:flex;flex-direction:column;gap:16px}
.sale-right .je{box-shadow:var(--shadow-frame)}
.meters{display:grid;grid-template-columns:repeat(3,1fr);gap:14px 20px;padding:16px 18px;border:1px solid var(--hair);border-radius:12px;background:#fff;font-variant-numeric:tabular-nums}
.meter:nth-child(4),.meter:nth-child(5){padding-top:12px;border-top:1px solid var(--hair);display:flex;flex-direction:column}
.meter:nth-child(5){grid-column:span 2}
.meter span{display:block;font-size:12px;color:var(--muted)}
.meter b{display:block;font:700 16px/1.3 var(--display);margin-top:4px;white-space:nowrap}
.meter b.zero{color:var(--muted);font-weight:600}
.meter small{display:block;font-size:11.5px;color:var(--muted);font-weight:400;margin-top:2px;white-space:normal}
.bar{height:4px;border-radius:2px;background:var(--paper-2);margin-top:8px;overflow:hidden}
.bar i{display:block;height:100%;background:var(--green);border-radius:2px;transition:width .8s var(--ease)}
.meter.way .bar i{background:#22A3C4}
.meter.bank .bar i{background:var(--ink)}

/* pinned version (desktop, with the script running) */
.sale.pinned .sale-track{height:calc(var(--steps,6) * 70vh + 30vh)}
.sale.pinned .sale-pin{position:sticky;top:var(--nav-h);height:calc(100vh - var(--nav-h));display:flex;flex-direction:column;justify-content:center;padding:24px 0}
.sale-pin>.wrap{width:100%}
.sale.pinned .sale-head{display:flex;justify-content:space-between;align-items:flex-end;gap:32px}
.sale.pinned .sale-head .lede{margin-top:12px}
.sale.pinned .sale-steps{margin-top:32px}
.sale.pinned .sale-list{position:relative;margin-top:28px;height:min(470px,calc(100vh - var(--nav-h) - 300px))}
.sale.pinned .sale-item{position:absolute;inset:0;padding:0;border:0;opacity:0;visibility:hidden;transition:opacity .45s var(--ease),visibility 0s .45s;
  grid-template-rows:auto minmax(0,1fr);align-content:start}
.sale.pinned .sale-item.on{opacity:1;visibility:visible;transition:opacity .45s var(--ease),visibility 0s}
.sale.pinned .sale-item>header{display:none}
.sale.pinned .sale-item .paper-doc{transform:translateY(10px);transition:transform .55s var(--ease)}
.sale.pinned .sale-item.on .paper-doc{transform:none}
.sale.pinned .je tbody tr{opacity:0;transform:translateX(10px);transition:opacity .4s var(--ease),transform .4s var(--ease)}
.sale.pinned .on .je tbody tr{opacity:1;transform:none;transition-delay:calc(.18s + var(--i,0)*.12s)}
.sale-note{display:none}
.sale.pinned .sale-note{display:block;font-size:15px;color:var(--ink-2);margin-top:6px}
.sale-hint{display:none}
.sale.pinned .sale-hint{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);white-space:nowrap}
.sale-hint svg{width:16px;height:16px}

/* ── working together: chapters beside a sticky stage ────────────────────────────────────────── */
.story{margin-top:72px}
.chapter{padding:56px 0;border-top:1px solid var(--hair)}
.chapter:first-child{border-top:0;padding-top:0}
.ch-head{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.ch-head .tile{width:44px;height:44px;flex:none;filter:drop-shadow(0 6px 10px rgba(15,26,43,.14))}
.ch-kicker{font:600 14px/1 var(--display);color:var(--muted)}
.chapter h3{font-size:clamp(26px,1.2vw + 16px,34px);letter-spacing:-.025em;line-height:1.12}
.chapter>p{color:var(--ink-2);font-size:17px;margin-top:14px;max-width:34em}
.chapter .ticks{margin-top:20px}
.chapter .ticks li{font-size:15.5px}
.ch-shot{margin-top:32px}
.story.pinned{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.42fr);gap:64px}
.story.pinned .chapter{min-height:78vh;display:flex;flex-direction:column;justify-content:center;padding:48px 0;border-top:0}
/* the chapters you aren't on step back in colour, not in opacity, so their words keep a readable contrast */
.story.pinned .chapter h3,.story.pinned .chapter p,.story.pinned .chapter li,.story.pinned .chapter b,.story.pinned .chapter .ch-kicker{transition:color .45s}
.story.pinned .chapter:not(.on) h3,.story.pinned .chapter:not(.on) p,.story.pinned .chapter:not(.on) li,.story.pinned .chapter:not(.on) b,.story.pinned .chapter:not(.on) .ch-kicker{color:var(--muted)}
.story.pinned .chapter .ch-head .tile{transition:opacity .45s,filter .45s}
.story.pinned .chapter:not(.on) .ch-head .tile{opacity:.45;filter:grayscale(1)}
.story.pinned .chapter .ch-shot{display:none}
.stage{display:none}
.story.pinned .stage{display:block;position:sticky;top:calc(var(--nav-h) + 24px);height:calc(100vh - var(--nav-h) - 48px);align-self:start}
.stage-in{position:relative;height:100%;display:flex;align-items:center}
.story.pinned .stage .ch-shot{display:block;position:absolute;left:0;right:0;top:50%;margin:0;opacity:0;visibility:hidden;transform:translate3d(0,calc(-50% + 28px),0) scale(.985);
  transition:opacity .5s var(--ease),transform .6s var(--ease),visibility 0s .6s}
.story.pinned .stage .ch-shot.on{opacity:1;visibility:visible;transform:translate3d(0,-50%,0);transition:opacity .5s var(--ease),transform .6s var(--ease),visibility 0s}
.stage-dots{position:absolute;left:-30px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:8px}
.stage-dots i{width:6px;height:6px;border-radius:50%;background:var(--line);transition:background .3s,transform .3s}
.stage-dots i.on{background:var(--green);transform:scale(1.4)}

/* ── Eagle ───────────────────────────────────────────────────────────────────────────────────── */
.eagle{background:var(--night);color:#C9D2E3;position:relative;overflow:hidden;isolation:isolate}
.eagle::before{content:"";position:absolute;inset:-20% -10% auto auto;width:70%;height:90%;z-index:-1;opacity:.55;
  background:radial-gradient(closest-side,rgba(99,102,241,.35),transparent),radial-gradient(closest-side at 30% 70%,rgba(34,211,238,.22),transparent)}
.eagle::after{content:"";position:absolute;left:-10%;bottom:-30%;width:60%;height:70%;z-index:-1;opacity:.5;background:radial-gradient(closest-side,rgba(52,211,153,.22),transparent)}
.eagle h2{color:#fff}
.eagle .lede{color:#AEB8CC}
.eagle-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:72px;align-items:center}
.eagle-mark{display:block;width:56px;height:56px;margin-bottom:26px}
.eagle-mark svg,.eagle-big svg{width:100%;height:100%;overflow:visible}
.eagle-panel{display:flex;justify-content:flex-end}
.eagle-big{position:absolute;right:310px;top:70px;width:340px;height:340px;z-index:0;pointer-events:none}
.eagle-panel .shot{position:relative;z-index:1;width:100%;max-width:440px}
@media (max-width:1179px){.eagle-big{display:none}}
@media (max-width:1023px){.eagle-panel{justify-content:center}}
.eagle-list{display:grid;grid-template-columns:1fr 1fr;gap:22px 28px;margin-top:36px}
.eagle-list li{border-top:1px solid rgba(255,255,255,.12);padding-top:14px;font-size:15px;line-height:1.5;color:#AEB8CC}
.eagle-list b{display:block;color:#fff;font:600 16px/1.3 var(--display);margin-bottom:4px}
.eagle-note{margin-top:30px;font-size:13.5px;color:#8D97AC;display:flex;gap:8px;align-items:flex-start}
.eagle-note svg{width:16px;height:16px;flex:none;margin-top:2px;color:#22D3EE}
.eagle-panel{position:relative}
.eagle-panel .shot{background:transparent;border:0;box-shadow:none;border-radius:20px;overflow:visible}
.aur-line{height:2px;background:var(--aur);border-radius:2px}

/* ── templates ───────────────────────────────────────────────────────────────────────────────── */
.fan{position:relative;height:560px;margin-top:56px}
.fan-card{position:absolute;left:50%;top:24px;width:300px;height:424px;margin-left:-150px;transform-origin:50% 200%;
  transform:rotate(var(--r));transition:transform 1.1s var(--ease);z-index:var(--z)}
.motion .fan:not(.open) .fan-card{transform:rotate(0)}
.fan-card:hover{transform:rotate(var(--r)) translateY(-16px);transition-duration:.4s}
.fan-card .tdoc{width:100%;height:100%;border-radius:4px;overflow:hidden;box-shadow:0 1px 2px rgba(15,26,43,.08),0 18px 40px -16px rgba(15,26,43,.35)}
.fan-label{position:absolute;left:0;right:0;bottom:-30px;text-align:center;font:600 13px/1 var(--text);color:var(--muted);opacity:0;transition:opacity .4s .6s}
.fan.open .fan-label,html:not(.motion) .fan-label{opacity:1}
.tpl-names{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 28px;margin:72px auto 0;max-width:1000px;color:var(--ink)}
.tpl-names li{font-size:28px;line-height:1.2}
.tpl-names .biz{color:var(--ink-2)}
.tpl-facts{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:72px;border-top:1px solid var(--line)}
.tpl-facts div{padding:22px 24px 0 0}
.tpl-facts div+div{padding-left:24px;border-left:1px solid var(--hair)}
.tpl-facts b{display:block;font:600 30px/1.1 var(--serif);letter-spacing:-.02em}
.tpl-facts span{display:block;font-size:15px;color:var(--ink-2);margin-top:8px;line-height:1.5}

/* ── module index ────────────────────────────────────────────────────────────────────────────── */
.fits{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;margin-top:56px}
.fit{padding:22px 0 0;border-top:2px solid var(--ink)}
.fit h3{font-size:19px;letter-spacing:-.015em}
.fit p{font-size:15px;color:var(--ink-2);margin-top:8px}
.index{display:grid;grid-template-columns:1fr 1fr;gap:0 64px;margin-top:64px}
.group+.group{margin-top:36px}
.group h3{font:600 15px/1 var(--display);color:var(--muted);margin-bottom:8px;letter-spacing:0}
.row{display:grid;grid-template-columns:30px 150px 1fr 18px;gap:16px;align-items:center;padding:15px 8px 15px 0;border-top:1px solid var(--hair);
  text-decoration:none;transition:background .15s}
.row:hover{background:linear-gradient(90deg,transparent,var(--paper) 18%)}
.row .tile{width:30px;height:30px}
.row b{font:600 17px/1.25 var(--display);letter-spacing:-.01em}
.row span{color:var(--ink-2);font-size:15px;line-height:1.45}
.row .ic{width:16px;height:16px;color:var(--muted);transition:transform .2s,color .2s}
.row:hover .ic{transform:translateX(3px);color:var(--green)}

/* ── portal, move, releases ──────────────────────────────────────────────────────────────────── */
.systems{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px}
.systems span{padding:8px 13px;border-radius:999px;border:1px solid var(--line);background:#fff;font:500 14px/1 var(--text);color:var(--ink-2)}
.move-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-frame);box-shadow:var(--shadow-frame);overflow:hidden}
.move-card header{padding:22px 26px 18px;border-bottom:1px solid var(--hair)}
.move-card header b{display:block;font:800 19px/1.2 var(--display);letter-spacing:-.01em}
.move-card header span{display:block;font-size:13.5px;color:var(--muted);margin-top:6px;max-width:44em}
.move-steps li{display:grid;grid-template-columns:28px 1fr auto;gap:14px;align-items:center;padding:12px 26px;border-top:1px solid var(--hair);font-size:14.5px}
.move-steps li:first-child{border-top:0}
.move-steps .st{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font:700 11.5px/1 var(--display);background:var(--paper-2);color:var(--muted)}
.move-steps .done .st{background:var(--green);color:#fff}
.move-steps .done .st svg{width:12px;height:12px}
.move-steps .now{background:var(--paper)}
.move-steps .now .st{background:#fff;color:var(--green);box-shadow:inset 0 0 0 1.5px var(--green)}
.move-steps em{font-style:normal;font-size:12px;color:var(--muted)}
.move-steps .tag{padding:2px 8px;border-radius:999px;background:#FFF7ED;color:#B45309;font-size:11.5px;font-weight:600}
.releases{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:72px;align-items:start}
.rel-count{font:600 clamp(84px,9vw,148px)/.9 var(--serif);letter-spacing:-.04em;color:var(--ink)}
.rel-count small{display:block;font:500 17px/1.5 var(--text);letter-spacing:0;color:var(--ink-2);margin-top:18px}
.rel-list li{display:grid;grid-template-columns:72px 1fr auto;gap:16px;align-items:baseline;padding:16px 0;border-top:1px solid var(--hair)}
.rel-v{font:700 14px/1 var(--display);color:var(--green);font-variant-numeric:tabular-nums}
.rel-t{font:600 17px/1.35 var(--display);letter-spacing:-.01em}
.rel-d{font-size:13.5px;color:var(--muted);white-space:nowrap}
.founder{margin-top:36px;padding:22px 24px;border-radius:var(--r-card);background:var(--paper);font-size:16px;color:var(--ink-2)}
.founder b{color:var(--ink)}

/* ── pricing (teaser and page) ───────────────────────────────────────────────────────────────── */
.toggles{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:34px}
.seg{display:inline-flex;padding:3px;border-radius:11px;border:1px solid var(--line);background:#fff;gap:2px}
.seg button{border:0;background:none;padding:9px 15px;border-radius:8px;cursor:pointer;font:500 14.5px/1 var(--text);color:var(--ink-2);transition:background .15s,color .15s}
.seg button[aria-pressed=true]{background:var(--ink);color:#fff}
.seg button em{font-style:normal;font-size:12.5px;color:var(--green);margin-left:6px;font-weight:600}
.seg button[aria-pressed=true] em{color:#7FD8AC}
.plans{display:grid;grid-template-columns:repeat(3,1fr);margin-top:40px;border:1px solid var(--line);border-radius:16px;background:#fff;overflow:hidden}
.plan{display:flex;flex-direction:column;padding:32px 30px 30px;position:relative}
.plan+.plan{border-left:1px solid var(--hair)}
.plan.rec{background:linear-gradient(180deg,var(--soft),#fff 38%);box-shadow:inset 0 3px 0 var(--green)}
.plan-name{display:flex;align-items:center;gap:10px;font:700 23px/1.1 var(--display);letter-spacing:-.02em}
.plan-tag{font:600 12.5px/1 var(--text);color:var(--green);padding:5px 9px;border-radius:999px;background:#fff;border:1px solid rgba(23,113,74,.22)}
.plan-for{color:var(--ink-2);font-size:15.5px;margin-top:8px;min-height:3.2em}
.price{display:flex;align-items:baseline;gap:8px;margin-top:22px;font-variant-numeric:tabular-nums}
.price .cur{font:600 16px/1 var(--display);color:var(--muted)}
.price .amt{font:600 52px/1 var(--serif);letter-spacing:-.025em}
.price .from{font:500 16px/1 var(--text);color:var(--muted)}
.per{font-size:14px;color:var(--muted);margin-top:8px;min-height:2.9em}
.plan ul{margin:22px 0 28px;font-size:15px;color:var(--ink-2)}
.plan li{padding:10px 0;border-top:1px solid var(--hair);display:grid;grid-template-columns:16px 1fr;column-gap:10px}
.plan li::before{content:"";flex:none;width:16px;height:16px;margin-top:3px;border-radius:50%;background:var(--soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2317714A' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/9px no-repeat}
.plan .btn{margin-top:auto}
.founding{display:flex;gap:18px;align-items:center;margin-top:20px;padding:18px 22px;border-radius:var(--r-card);background:var(--deep);color:#CFE3D8;font-size:15.5px}
.founding b{color:#fff}
.founding .badge{flex:none;padding:6px 10px;border-radius:8px;background:rgba(127,216,172,.14);color:#7FD8AC;font:700 13px/1 var(--display)}
.fine{font-size:13.5px;color:var(--muted);margin-top:16px}
.teaser-plans{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:48px;border-top:1px solid var(--line)}
.teaser-plans a{display:block;padding:24px 24px 4px 0;text-decoration:none}
.teaser-plans a+a{padding-left:24px;border-left:1px solid var(--hair)}
.teaser-plans b{display:block;font:700 20px/1.2 var(--display);letter-spacing:-.015em}
.teaser-plans .tp-price{display:block;font:600 32px/1.1 var(--serif);letter-spacing:-.02em;margin-top:12px;font-variant-numeric:tabular-nums}
.teaser-plans .tp-price small{font:500 15px/1 var(--text);color:var(--muted);letter-spacing:0}
.teaser-plans span{display:block;font-size:14.5px;color:var(--ink-2);margin-top:6px}
.incl{display:grid;grid-template-columns:repeat(4,1fr);gap:4px 12px;margin-top:40px}
.incl li{display:flex;align-items:center;gap:12px;padding:10px 0;font:500 15.5px/1.25 var(--text)}
.incl .tile{width:34px;height:34px;flex:none}
.diff{width:100%;border-collapse:collapse;margin-top:40px;font-size:15.5px;font-variant-numeric:tabular-nums}
.diff th,.diff td{padding:15px 16px;border-top:1px solid var(--hair);text-align:left;vertical-align:top}
.diff thead th{font:700 17px/1.2 var(--display);border-top:0;padding-bottom:12px}
.diff tbody th{font-weight:500;color:var(--ink-2);width:26%}
.diff td{color:var(--ink)}
.diff .no{color:var(--muted)}
.how{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:48px;counter-reset:how}
.how li{padding:0 28px 0 0;position:relative}
.how li+li{padding-left:28px;border-left:1px solid var(--hair)}
.how .n{display:block;font:700 15px/1 var(--display);color:var(--green);margin-bottom:14px}
.how b{display:block;font:700 20px/1.25 var(--display);letter-spacing:-.015em}
.how span{display:block;font-size:15.5px;color:var(--ink-2);margin-top:8px}
.faq{margin-top:40px;border-top:1px solid var(--line);max-width:860px}
.faq details{border-bottom:1px solid var(--hair)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:20px 2px;font:600 18px/1.35 var(--display);letter-spacing:-.01em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:12px;height:12px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg) translate(-3px,-3px);transition:transform .2s}
.faq details[open] summary::after{transform:rotate(225deg) translate(-3px,-3px)}
.faq .a{padding:0 2px 22px;color:var(--ink-2);font-size:16px;max-width:62ch}
.faq .a p+p{margin-top:10px}

/* ── closing band and footer (deep forest, used once per page) ───────────────────────────────── */
.closing{background:var(--deep);color:#CFE3D8;padding:120px 0 104px;position:relative;overflow:hidden;isolation:isolate}
.closing::before{content:"";position:absolute;right:-8%;top:-30%;width:620px;height:620px;z-index:-1;border-radius:50%;
  background:radial-gradient(closest-side,rgba(52,194,127,.16),transparent)}
.closing h2{color:#fff;max-width:14em}
.closing .lede{color:#A9C2B5}
.closing .ctas{margin-top:36px}
.closing-mark{position:absolute;right:max(24px,calc(50% - 600px));bottom:72px;width:220px;opacity:.9}
.foot{background:var(--deep);color:#9FB3A8;font-size:14.5px;border-top:1px solid rgba(255,255,255,.08)}
.foot .wrap{padding-top:64px;padding-bottom:40px}
.foot-top{display:grid;grid-template-columns:1.25fr 3fr;gap:56px}
.brand-light{color:#fff}
.foot-brand p{margin-top:16px;max-width:30em;line-height:1.6}
.foot-place{color:#7E9488}
.foot-cols{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:24px}
.foot-cols p{color:#fff;font:600 14px/1 var(--display);margin-bottom:14px}
.foot-cols a{display:block;padding:6px 0;text-decoration:none;color:#9FB3A8;transition:color .15s}
.foot-cols a:hover{color:#fff}
.foot-bottom{display:flex;flex-wrap:wrap;gap:12px 28px;margin-top:56px;padding-top:24px;border-top:1px solid rgba(255,255,255,.1);font-size:13.5px;color:#7E9488}
.foot-bottom a{margin-left:auto;color:#CFE3D8;text-decoration:none}
.foot-bottom a:hover{color:#fff}

/* ── motion: only when the site script is running and nobody asked for less ─────────────────── */
.motion .rv{opacity:0;transform:translate3d(0,22px,0);transition:opacity .8s var(--ease),transform .8s var(--ease);transition-delay:calc(var(--i,0) * 70ms)}
.motion .rv.in{opacity:1;transform:none}
.motion .rv-fade{opacity:0;transition:opacity 1s var(--ease)}
.motion .rv-fade.in{opacity:1}
@keyframes rise{from{opacity:0;transform:translate3d(0,26px,0)}to{opacity:1;transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes slideL{from{opacity:0;transform:translate3d(-28px,0,0)}to{opacity:1;transform:none}}
@keyframes lineIn{from{opacity:0;transform:translate3d(-10px,0,0)}to{opacity:1;transform:none}}
@keyframes draw{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes stamp{0%{opacity:0;transform:scale(1.6)}60%{opacity:1;transform:scale(.94)}100%{transform:scale(1)}}
@keyframes glow{0%{box-shadow:0 0 0 0 rgba(245,158,11,0)}35%{box-shadow:0 0 0 6px rgba(245,158,11,.22)}100%{box-shadow:0 0 0 14px rgba(245,158,11,0)}}
.motion .hero .news{animation:fade .8s var(--ease) both}
.motion .hero .hl{animation:rise .9s var(--ease) both}
.motion .hero .hl:nth-child(2){animation-delay:.08s}
.motion .hero .hero-sub{animation:rise .9s var(--ease) .18s both}
.motion .hero .ctas{animation:rise .9s var(--ease) .26s both}
.motion .hero .hero-shot{animation:rise 1.1s var(--ease) .32s both}
.motion .hero [data-hero=line]{animation:fade .6s var(--ease) 1.05s both}
.motion .hero .b-posted{animation:stamp .55s var(--ease) 1.45s both}
.motion .hero [data-hero=total]{animation:fade .5s var(--ease) 1.2s both}
.motion .hero [data-hero=total] b{animation:glow 1.2s var(--ease) 1.6s both;border-radius:6px}
.motion .hero [data-hero=trail]{animation:rise .6s var(--ease) 2.9s both}
.motion .hero .je{animation:rise .9s var(--ease) 1.75s both}
.motion .hero .je tbody tr{animation:lineIn .5s var(--ease) both}
.motion .hero .je tbody tr:nth-child(1){animation-delay:2.05s}
.motion .hero .je tbody tr:nth-child(2){animation-delay:2.2s}
.motion .hero .je tbody tr:nth-child(3){animation-delay:2.35s}
.motion .hero .je tfoot tr{animation:fade .4s var(--ease) 2.55s both}
.motion .hero .je .dbl::after{animation:draw .5s var(--ease) 2.7s both}
.motion .hero .je-ok{animation:fade .5s var(--ease) 3.05s both}

/* ── responsive ──────────────────────────────────────────────────────────────────────────────── */
@media (max-width:1179px){
  .nav-links .nav-link[href$="docs/"]{display:none}
  .hero-stage{padding-bottom:236px}
  .hero .je{right:auto;left:31%;top:auto;bottom:40px;width:400px}
  .hero .caption{position:absolute;left:var(--gut);bottom:64px;max-width:26%;margin:0}
  .split{gap:44px}
  .eagle-grid{gap:48px}
}
@media (max-width:1023px){
  :root{--sec:96px}
  .nav-links,.nav-cta .btn-quiet{display:none}
  .nav-cta{margin-left:auto}
  .burger{display:block;margin-left:0}
  .apps{grid-template-columns:repeat(5,1fr)}
  .pillars{grid-template-columns:1fr;border-top:0}
  .pillar,.pillar+.pillar{padding:28px 0;border-left:0;border-top:1px solid var(--line)}
  .pillar-art{height:auto;margin-bottom:20px}
  .split,.split.flip{grid-template-columns:1fr}
  .split.flip .split-copy{order:0}
  .sale-item{grid-template-columns:1fr}
  .sale-item>header{flex-wrap:wrap}
  .sale-item>header p{margin-left:0;text-align:left;flex-basis:100%}
  .meters{grid-template-columns:repeat(3,1fr)}
  .eagle-grid{grid-template-columns:1fr}
  .index{grid-template-columns:1fr}
  .releases{grid-template-columns:1fr;gap:40px}
  .plans{grid-template-columns:1fr}
  .plan+.plan{border-left:0;border-top:1px solid var(--hair)}
  .teaser-plans{grid-template-columns:1fr}
  .teaser-plans a+a{padding-left:0;border-left:0;border-top:1px solid var(--hair)}
  .incl{grid-template-columns:repeat(2,1fr)}
  .how{grid-template-columns:1fr;gap:28px}
  .how li+li{padding-left:0;border-left:0}
  .tpl-facts{grid-template-columns:1fr 1fr}
  .tpl-facts div:nth-child(3){padding-left:0;border-left:0}
  .tpl-facts div:nth-child(n+3){margin-top:24px}
  .foot-top{grid-template-columns:1fr}
  .fits{grid-template-columns:1fr}
}
@media (max-width:760px){
  :root{--sec:76px;--gut:16px;--nav-h:60px}
  body{font-size:16px}
  .nav-cta .btn{height:38px;padding:0 14px;font-size:14px}
  .hero{padding-top:44px}
  .news{margin-bottom:22px;font-size:13px}
  .ctas .btn{flex:1 1 auto}
  .hero-stage{margin-top:44px;padding-bottom:48px}
  .hero .je{position:relative;left:auto;bottom:auto;width:auto;margin:-36px 12px 0}
  .je table{font-size:13.5px}
  .je td:first-child{white-space:normal}
  .hero .caption{position:static;margin-top:16px;max-width:none}
  .je td,.je th{padding-left:14px;padding-right:14px}
  .apps{grid-template-columns:repeat(4,1fr);gap:18px 4px}
  .apps .tile{width:52px;height:52px}
  .apps span{font-size:12.5px}
  .apps small{display:none}
  .sale-steps{grid-template-columns:repeat(3,1fr);row-gap:18px}
  .meters{grid-template-columns:1fr 1fr}
  .eagle-list{grid-template-columns:1fr}
  .fan{height:auto;display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;margin:40px calc(var(--gut)*-1) 0;padding:0 var(--gut) 44px}
  .fan-card{position:relative;left:auto;bottom:auto;margin:0;flex:none;width:250px;height:354px;transform:none!important;scroll-snap-align:center}
  .fan-label{opacity:1}
  .tpl-names li{font-size:22px}
  .row{grid-template-columns:28px 1fr 16px;gap:12px}
  .row span{grid-column:2/3}
  .row .ic{grid-row:1;grid-column:3}
  .rel-list li{grid-template-columns:56px 1fr}
  .rel-d{grid-column:2}
  .diff{font-size:14px}
  .diff th,.diff td{padding:12px 8px}
  .incl{grid-template-columns:1fr 1fr}
  .foot-cols{grid-template-columns:1fr 1fr}
  .closing{padding:88px 0 80px}
  .closing-mark{display:none}
  .founding{flex-direction:column;align-items:flex-start}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}

/* ── additions: section furniture used by Home ───────────────────────────────────────────────── */
.wrap.wide{max-width:calc(1392px + var(--gut)*2)}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font:600 15px/1 var(--display);color:var(--ink-2);margin-bottom:20px}
.eyebrow .tile{width:28px;height:28px}
.split-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;align-items:end}
.split-head .lede{margin-top:0}
.more-link{margin-top:36px}
.story .chapters{min-width:0}
.story.pinned{grid-template-columns:minmax(300px,360px) minmax(0,1fr);gap:56px;margin-right:calc((100vw - 100%) / -2 + 24px)}
.story.pinned .stage .ch-shot{width:min(100%,calc((100vh - var(--nav-h) - 80px) * var(--ratio,1.5)))}
.sale.pinned .sale-item>header{display:block;grid-column:1/-1;position:absolute;left:0;right:0;top:-46px}
.sale.pinned .sale-item>header .n,.sale.pinned .sale-item>header h3{display:none}
.sale.pinned .sale-item>header p{margin:0;text-align:left;max-width:none;font-size:15.5px;color:var(--ink-2)}
.sale.pinned .sale-list{margin-top:72px}
@media (max-width:1023px){
  .split-head{grid-template-columns:1fr;gap:20px}
}
@media (max-width:760px){
  .fan-card{top:auto}
}

/* ── pricing page ────────────────────────────────────────────────────────────────────────────── */
.p-hero{padding:80px 0 112px}
.p-h1{max-width:12.5em;font-size:clamp(40px,3.6vw + 14px,72px)}
.p-hero .lede{max-width:46em}
.plan .price .from{margin-right:2px}
.also{display:grid;grid-template-columns:1.4fr 1fr;gap:40px;margin-top:36px;padding-top:28px;border-top:1px solid var(--line);font-size:16px;color:var(--ink-2)}
.also b{color:var(--ink)}
.also .link{margin-left:4px}
.diff-wrap{overflow-x:auto;margin-top:8px}
.diff thead th:not(:first-child){width:24.6%}
.diff tbody tr:hover td,.diff tbody tr:hover th{background:var(--paper)}
@media (max-width:1023px){
  .also{grid-template-columns:1fr;gap:12px}
}
@media (max-width:760px){
  .p-hero{padding:48px 0 76px}
  .diff{min-width:560px}
  .seg button{padding:9px 12px}
}

.sale.pinned .sale-head .h2{font-size:clamp(32px,1.6vw + 18px,46px)}
.sale.pinned .sale-head .lede{font-size:17px;max-width:56ch}
.sale.pinned .sale-steps{margin-top:24px}
.sale.pinned .sale-list{margin-top:60px}
.sale.pinned .sale-item{align-items:start}
.sale.pinned .je td{padding-top:9px;padding-bottom:9px}
.sale.pinned .meters{padding:13px 16px}
.closing-mark{position:absolute;right:max(24px,calc(50% - 600px));top:50%;transform:translateY(-50%);width:clamp(200px,22vw,300px);opacity:.92}
.closing-mark .logo{width:100%;height:auto}
@media (max-height:860px){
  .sale.pinned .sale-head .lede,.sale.pinned .sale-hint{display:none}
  .sale.pinned .sale-steps{margin-top:18px}
}

/* ════════════════════════════════════════════════════════════════════════════════════════════════
   Round 2 — type, module pages, the modules overview
   ════════════════════════════════════════════════════════════════════════════════════════════════ */

/* ── type: both families are variable now (Inter with its optical sizes, Plus Jakarta Sans 200–800) ── */
body{font-optical-sizing:auto;font-feature-settings:"case" 1}
p,li,dd,figcaption,.lede,.caption{text-wrap:pretty}
.lede{font-weight:430}
.num-xl{font:300 clamp(56px,5vw + 16px,96px)/.95 var(--display);letter-spacing:-.05em;font-variant-numeric:tabular-nums lining-nums}

/* ── module page: hero ─────────────────────────────────────────────────────────────────────────── */
.m-hero{position:relative;padding:44px 0 0;overflow:clip}
.m-hero::before{content:"";position:absolute;inset:auto 0 0 0;height:58%;background:linear-gradient(180deg,rgba(246,249,252,0),var(--paper) 34%);z-index:-1}
.back{display:inline-flex;align-items:center;gap:6px;font:500 14px/1 var(--text);color:var(--muted);text-decoration:none;padding:6px 0;margin-bottom:34px}
.back svg{width:14px;height:14px;transition:transform .2s var(--ease)}
.back:hover{color:var(--ink)}
.back:hover svg{transform:translateX(-3px)}
.m-id{display:flex;align-items:center;gap:14px;margin-bottom:26px}
.m-id .tile{width:52px;height:52px;filter:drop-shadow(0 10px 16px rgba(15,26,43,.18))}
.m-id b{font:700 19px/1.1 var(--display);letter-spacing:-.015em}
.m-id small{display:block;font:500 13.5px/1.3 var(--text);color:var(--muted);margin-top:4px}
.m-h1{font-family:var(--serif);font-size:clamp(42px,3.9vw + 15px,78px);line-height:1;letter-spacing:-.028em;font-weight:600;max-width:14em}
.m-hero .lede{max-width:40em;font-size:clamp(17px,.45vw + 15px,21px);margin-top:24px}
.m-stage{position:relative;margin-top:64px;padding-bottom:84px;perspective:1800px}
.m-shot{transform-origin:50% 0;box-shadow:0 1px 2px rgba(15,26,43,.06),0 44px 90px -40px rgba(15,26,43,.42)}
.motion [data-tilt]{transform:rotateX(calc(var(--tilt,0) * 13deg)) scale(calc(1 - var(--tilt,0) * .055)) translateY(calc(var(--tilt,0) * -14px));will-change:transform}
.m-stage .caption{margin-top:18px}
.m-facts{display:flex;flex-wrap:wrap;gap:10px 28px;margin-top:30px;font-size:14.5px;color:var(--ink-2)}
.m-facts span{display:inline-flex;align-items:center;gap:8px}
.m-facts span::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--green)}

/* ── module page: the guided tour (a sticky screen, chapters move the camera) ─────────────────── */
.tour-grid{margin-top:56px;display:flex;flex-direction:column}
.tour-stage{order:-1}
.tour-ch{padding:28px 0;border-top:1px solid var(--hair)}
.tour-ch:first-child{border-top:0;padding-top:0}
.tour-n{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;border:1.5px solid var(--line);font:700 12.5px/1 var(--display);color:var(--muted);margin-bottom:14px;background:#fff;transition:background .35s,border-color .35s,color .35s}
.tour-ch h3{font-size:clamp(22px,.9vw + 14px,28px);letter-spacing:-.022em;line-height:1.16}
.tour-ch p{color:var(--ink-2);font-size:16.5px;margin-top:10px;max-width:32em}
.tour-ch .ticks{margin-top:16px}
.tour-ch .ticks li{font-size:15px}
.tour-stage{margin:0 0 40px}
.tour-shot{background:#fff}
.cam{position:relative;transform-origin:0 0;transition:transform 1.05s cubic-bezier(.6,0,.15,1)}
.spot{position:absolute;left:var(--sl,0);top:var(--st,0);width:var(--sw,100%);height:var(--sh,100%);border-radius:calc(12px / var(--cs,1));pointer-events:none;opacity:0;
  box-shadow:0 0 0 200vmax rgba(15,26,43,.30),0 0 0 calc(2px / var(--cs,1)) rgba(30,142,90,.95),0 0 calc(28px / var(--cs,1)) calc(4px / var(--cs,1)) rgba(30,142,90,.35);
  transition:left 1.05s cubic-bezier(.6,0,.15,1),top 1.05s cubic-bezier(.6,0,.15,1),width 1.05s cubic-bezier(.6,0,.15,1),height 1.05s cubic-bezier(.6,0,.15,1),opacity .5s}
.tour.pinned .tour-grid{display:grid;grid-template-columns:minmax(280px,.62fr) minmax(0,1.38fr);gap:64px;align-items:start}
.tour.pinned .tour-stage{order:0}
.tour.pinned .tour-chs{position:relative;padding-left:52px}
.tour.pinned .tour-chs::before{content:"";position:absolute;left:13px;top:14px;bottom:14px;width:2px;background:var(--hair);border-radius:2px}
.tour.pinned .tour-chs::after{content:"";position:absolute;left:13px;top:14px;width:2px;height:calc((100% - 28px) * var(--prog,0));background:var(--green);border-radius:2px;transition:height .2s linear}
.tour.pinned .tour-ch{min-height:76vh;display:flex;flex-direction:column;justify-content:center;border-top:0;padding:40px 0}
.tour.pinned .tour-ch h3,.tour.pinned .tour-ch p,.tour.pinned .tour-ch li,.tour.pinned .tour-ch b{transition:color .45s}
.tour.pinned .tour-ch:not(.on) h3,.tour.pinned .tour-ch:not(.on) p,.tour.pinned .tour-ch:not(.on) li,.tour.pinned .tour-ch:not(.on) b{color:var(--muted)}
.tour.pinned .tour-ch:not(.on) .ticks li::before{filter:grayscale(1);opacity:.7}
.tour.pinned .tour-ch:first-child{min-height:62vh}
.tour.pinned .tc-in{position:relative}
.tour.pinned .tour-n{position:absolute;left:-52px;top:-2px;margin:0;z-index:1}
.tour.pinned .tour-ch.on .tour-n,.tour.pinned .tour-ch.done .tour-n{background:var(--green);border-color:var(--green);color:#fff}
.tour.pinned .tour-stage{position:sticky;top:calc(var(--nav-h) + 28px);margin:0;height:calc(100vh - var(--nav-h) - 56px);display:flex;align-items:center}
.tour.pinned .tour-stage .tour-shot{width:100%}
.tour.pinned .spot.lit{opacity:1}
.tour-hint{display:none}
.tour.pinned .tour-hint{display:block;position:absolute;right:16px;bottom:14px;z-index:3;padding:6px 10px;border-radius:999px;background:rgba(15,26,43,.78);color:#fff;font:600 12px/1 var(--text);
  opacity:0;transform:translateY(6px);transition:opacity .4s,transform .4s}
.tour.pinned .tour-hint.on{opacity:1;transform:none}

/* ── module page: what it posts ────────────────────────────────────────────────────────────────── */
.posts{display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));gap:28px;margin-top:56px;counter-reset:post}
.post{position:relative;display:flex;flex-direction:column;gap:14px}
.post+.post::before{content:"";position:absolute;left:-22px;top:56px;width:16px;height:16px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23626976' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M12 5l7 7-7 7'/%3E%3C/svg%3E") center/16px no-repeat}
.post-doc{display:flex;align-items:center;gap:10px;font-size:14.5px;color:var(--ink-2);min-height:30px}
.doc-no{display:inline-flex;align-items:center;gap:7px;padding:4px 10px;border-radius:8px;border:1px solid var(--line);background:#fff;font:600 13px/1.2 var(--text);color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.doc-no i{width:7px;height:7px;border-radius:50%;background:var(--c,#64748B)}
.post .je{box-shadow:var(--shadow-frame)}
.post .je table{font-size:13.5px}
.post .je td{white-space:normal}
.post .je td:first-child{padding-right:6px}
.post .je td+td{white-space:nowrap;width:1%}
.je .code{display:inline-block;min-width:38px;margin-right:6px;font:600 12px/1.2 var(--text);color:var(--muted);letter-spacing:.01em;font-variant-numeric:tabular-nums}
.post-note{font-size:14px;color:var(--muted);line-height:1.5}
.motion .post.rv .je tbody tr{opacity:0;transform:translate3d(-8px,0,0);transition:opacity .45s var(--ease),transform .45s var(--ease)}
.motion .post.rv.in .je tbody tr{opacity:1;transform:none;transition-delay:calc(var(--i,0) * 140ms + .35s + var(--d,0) * 1ms)}
.motion .post.rv .je .dbl::after{transform:scaleX(0)}
.motion .post.rv.in .je .dbl::after{transform:scaleX(1);transition:transform .5s var(--ease) calc(.9s + var(--d,0) * 1ms)}

/* ── module page: works with ───────────────────────────────────────────────────────────────────── */
.works{display:grid;grid-template-columns:1fr 1fr;gap:0 64px;margin-top:48px}
.works .row{grid-template-columns:36px 170px 1fr 18px}
.works .row .tile{width:36px;height:36px}
.works .row span{font-size:15px}

/* honest limits on partial modules */
.limits{display:grid;grid-template-columns:1fr 1fr;gap:0;margin-top:48px;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:#fff}
.limits>div{padding:28px 30px}
.limits>div+div{border-left:1px solid var(--hair);background:var(--paper)}
.limits h3{font-size:18px;letter-spacing:-.01em}
.limits ul{margin-top:14px;display:flex;flex-direction:column;gap:10px;font-size:15.5px;color:var(--ink-2)}
.limits .no li{position:relative;padding-left:22px}
.limits .no li::before{content:"";position:absolute;left:2px;top:10px;width:10px;height:1.6px;background:var(--muted);border-radius:1px}

/* ── overview: the books diagram ──────────────────────────────────────────────────────────────── */
.mx-hero{padding:72px 0 96px;overflow:clip}
.mx-hero .lede{max-width:44em}
.bus{position:relative;margin-top:72px;--cols:8;--gap:62px}
.bus-row{display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));gap:0 10px;position:relative;z-index:1}
.bus-node{position:relative;display:flex;justify-content:center}
.bus-node a{display:flex;flex-direction:column;align-items:center;gap:10px;text-decoration:none;padding:8px 2px;border-radius:14px;transition:background .2s;width:100%}
.bus-node a:hover{background:var(--paper)}
.bus-node .tile,.bus-node .eg-orb{width:54px;height:54px;filter:drop-shadow(0 9px 14px rgba(15,26,43,.16));transition:transform .35s var(--ease)}
.bus-node a:hover .tile,.bus-node a:hover .eg-orb{transform:translateY(-3px)}
.bus-node span{font:600 13.5px/1.2 var(--text);color:var(--ink);text-align:center}
.bus-wire{position:absolute;left:50%;width:2px;margin-left:-1px;height:var(--gap);background:var(--ink);transform-origin:top;pointer-events:none}
.bus-post .bus-wire{top:100%}
.bus-read .bus-wire{bottom:100%;background:repeating-linear-gradient(180deg,#98A6B9 0 5px,transparent 5px 10px);transform-origin:bottom}
.bus-post .bus-wire::after{content:"";position:absolute;left:50%;top:0;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;background:#34C27F;box-shadow:0 0 0 3px rgba(52,194,127,.25),0 0 14px 3px rgba(52,194,127,.55);opacity:0}
.bus-band{position:relative;display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));gap:0 10px;margin:var(--gap) 0;padding:12px 0 12px;border-radius:16px;
  background:linear-gradient(180deg,#132036,#0F1A2B);box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 18px 40px -22px rgba(15,26,43,.55);color:#C9D2E3}
.bus-name{grid-column:1/-1;display:flex;align-items:baseline;gap:12px;padding:2px 18px 10px;margin-bottom:6px;border-bottom:1px solid rgba(255,255,255,.08);white-space:nowrap;overflow:hidden}
.bus-name a{font:650 13.5px/1 var(--display);color:#fff;text-decoration:none;letter-spacing:.005em}
.bus-name em{font:500 12.5px/1 var(--text);font-style:normal;color:#98A6B9;overflow:hidden;text-overflow:ellipsis}
.bus-name a:hover{text-decoration:underline;text-underline-offset:3px}
.bus-entry{display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 4px;border-radius:10px;font-variant-numeric:tabular-nums;text-align:center;transition:background .4s}
.bus-entry b{font:650 12.5px/1.2 var(--display);color:#fff;letter-spacing:.005em}
.bus-entry small{font:500 11.5px/1.2 var(--text);color:#98A6B9}
.bus-entry.hot{background:rgba(52,194,127,.14)}
.bus-key{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 28px;margin-top:34px;font-size:14px;color:var(--muted)}
.bus-key span{display:inline-flex;align-items:center;gap:10px}
.bus-key i{display:inline-block;width:28px;height:2px;background:var(--ink)}
.bus-key i.dash{background:repeating-linear-gradient(90deg,#98A6B9 0 5px,transparent 5px 9px)}
.eg-orb{display:grid;place-items:center;border-radius:15px;background:radial-gradient(circle at 50% 30%,#1A2238,#0B1020 72%);position:relative;overflow:hidden}
.eg-orb::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;background:conic-gradient(from 200deg,#34D399,#22D3EE,#6366F1,#A78BFA,#34D399);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.eg-orb svg{width:62%;height:62%;overflow:visible}
/* the diagram plays once: wires draw, an entry travels down each solid line and lands in the books */
.motion .bus .bus-wire{transform:scaleY(0)}
.motion .bus.in .bus-wire{transform:scaleY(1);transition:transform .55s var(--ease) calc(var(--i,0) * 70ms)}
.motion .bus .bus-read .bus-node{opacity:0;transform:translateY(10px)}
.motion .bus.in .bus-read .bus-node{opacity:1;transform:none;transition:opacity .6s var(--ease) calc(2.6s + var(--i,0) * 70ms),transform .6s var(--ease) calc(2.6s + var(--i,0) * 70ms)}
.motion .bus .bus-entry b,.motion .bus .bus-entry small{opacity:0;transform:translateY(5px)}
.motion .bus.in .bus-entry b,.motion .bus.in .bus-entry small{opacity:1;transform:none;transition:opacity .45s var(--ease) calc(1.25s + var(--i,0) * 190ms),transform .45s var(--ease) calc(1.25s + var(--i,0) * 190ms)}
.motion .bus.in .bus-entry{animation:landed 1.1s var(--ease) calc(1.1s + var(--i,0) * 190ms) both}
.motion .bus.in .bus-post .bus-wire::after{animation:travel .6s cubic-bezier(.55,0,.75,.4) calc(.6s + var(--i,0) * 190ms) both}
.motion .bus.in .bus-read .bus-wire{animation:flowUp 1.6s linear calc(2.7s + var(--i,0) * 70ms) 1 both}
@keyframes travel{0%{opacity:0;top:0}15%{opacity:1}88%{opacity:1}100%{opacity:0;top:100%}}
@keyframes landed{0%{background:rgba(52,194,127,0)}30%{background:rgba(52,194,127,.22)}100%{background:rgba(52,194,127,0)}}
@keyframes flowUp{from{background-position:0 0}to{background-position:0 -40px}}

/* ── overview: the index, with the app's own rail beside it ───────────────────────────────────── */
.mx-grid{display:grid;grid-template-columns:76px minmax(0,1fr);gap:56px;align-items:start;margin-top:56px}
.mx-rail{position:sticky;top:calc(var(--nav-h) + 20px);display:flex;flex-direction:column;align-items:center;gap:1px;padding:10px 8px 12px;border-radius:18px;
  background:#0F1A2B;box-shadow:0 18px 40px -22px rgba(15,26,43,.6);max-height:calc(100vh - var(--nav-h) - 40px);overflow-y:auto;scrollbar-width:none}
.mx-rail::-webkit-scrollbar{display:none}
.mx-rail .rail-mark{display:flex;flex-direction:column;align-items:center;gap:4px;padding:4px 0 10px}
.mx-rail .rail-mark .logo{width:28px;height:28px}
.mx-rail .rail-mark span{font:700 9.5px/1 var(--display);letter-spacing:.04em;color:#E5E7EB}
.mx-rail a{position:relative;width:58px;min-height:42px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:3px 2px;border-radius:10px;
  border:1px solid transparent;text-decoration:none;color:rgba(255,255,255,.58);transition:background .25s,border-color .25s,color .25s;flex:none}
.mx-rail a:hover{color:rgba(255,255,255,.85);background:rgba(255,255,255,.05)}
.mx-rail a b{font:500 9px/1.2 var(--text);letter-spacing:.01em;white-space:nowrap}
.mx-rail a .glyph{width:18px;height:18px}
.mx-rail a.on{color:var(--c);background:color-mix(in srgb,var(--c) 16%,transparent);border-color:color-mix(in srgb,var(--c) 24%,transparent)}
.mx-rail a.on b{font-weight:700}
.mx-rail a::before{content:"";position:absolute;left:-9px;top:50%;width:3px;height:0;margin-top:0;border-radius:0 3px 3px 0;background:var(--c);transition:height .3s var(--ease),margin-top .3s var(--ease)}
.mx-rail a.on::before{height:22px;margin-top:-11px}
.mx-rail hr{width:34px;border:0;border-top:1px solid rgba(255,255,255,.08);margin:6px 0}
.mx-group+.mx-group{margin-top:40px}
.mx-gh{font:600 15px/1 var(--display);color:var(--muted);padding-bottom:16px;border-bottom:1px solid var(--line);letter-spacing:0}
.mx-mod{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);gap:48px;align-items:center;padding:44px 0;border-bottom:1px solid var(--hair);scroll-margin-top:calc(var(--nav-h) + 24px)}
.mx-name{display:flex;align-items:center;gap:14px}
.mx-name .tile{width:44px;height:44px;filter:drop-shadow(0 8px 12px rgba(15,26,43,.15))}
.mx-name .mx-h{font-size:26px;letter-spacing:-.02em}
.mx-gnote{font-size:15px;color:var(--ink-2);margin-top:14px}
.mx-also{margin-top:56px}
.mx-also ul{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0 20px}
.mx-also a{display:block;padding:18px 0 4px;text-decoration:none}
.mx-also a b{display:block;font:650 15.5px/1.3 var(--display);letter-spacing:-.005em}
.mx-also a span{display:block;font-size:13.5px;line-height:1.45;color:var(--muted);margin-top:4px}
.mx-also a:hover b{color:var(--green)}
.mx-name .tag{margin-left:2px;padding:4px 9px;border-radius:999px;background:var(--paper-2);font:600 12px/1 var(--text);color:var(--ink-2)}
.mx-promise{font-size:17.5px;line-height:1.55;color:var(--ink);margin-top:16px;max-width:30em}
.mx-mod .ticks{margin-top:16px;gap:9px}
.mx-mod .ticks li{font-size:15px}
.mx-links{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:22px}
.mx-spec{min-width:0}
.mx-spec .shot{box-shadow:0 1px 2px rgba(15,26,43,.05),0 20px 44px -24px rgba(15,26,43,.3)}
.mx-plan{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 40px;margin-top:64px;padding:30px 34px;border-radius:18px;background:var(--paper);border:1px solid var(--hair)}
.mx-plan b{display:block;font:700 22px/1.25 var(--display);letter-spacing:-.015em}
.mx-plan span{display:block;font-size:15.5px;color:var(--ink-2);margin-top:6px}

/* ── Round 2 responsive ───────────────────────────────────────────────────────────────────────── */
@media (max-width:1179px){
  .bus{--gap:52px}
  .bus-node span{font-size:12.5px}
  .bus-entry b{font-size:11.5px}
  .bus-entry small{font-size:10.5px}
  .mx-mod{grid-template-columns:1fr;gap:28px}
  .mx-also ul{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:1179px){
  .posts{grid-template-columns:1fr;gap:44px;max-width:860px}
  .post{display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr);grid-template-areas:"doc je" "note je";gap:10px 32px;align-items:start}
  .post-doc{grid-area:doc;flex-direction:column;align-items:flex-start;gap:8px}
  .post .je{grid-area:je}
  .post-note{grid-area:note}
  .post+.post::before{left:0;top:-30px;transform:rotate(90deg)}
}
@media (max-width:1023px){
  .works{grid-template-columns:1fr}
  .limits{grid-template-columns:1fr}
  .limits>div+div{border-left:0;border-top:1px solid var(--hair)}
  .mx-grid{grid-template-columns:1fr;gap:0}
  .mx-rail{display:none}
}
@media (max-width:860px){
  .bus{--cols:4!important;--gap:0px}
  .bus-row{row-gap:18px}
  .bus-wire{display:none}
  .bus-band{margin:28px 0;row-gap:6px}
  .bus-name{padding:2px 14px 10px}
  .bus-name em{display:none}
}
@media (max-width:760px){
  .post{grid-template-columns:1fr;grid-template-areas:"doc" "je" "note"}
  .post-doc{flex-direction:row;align-items:center}
  .m-hero{padding-top:24px}
  .back{margin-bottom:22px}
  .m-stage{margin-top:40px;padding-bottom:52px}
  .mx-hero{padding:48px 0 64px}
  .bus{margin-top:44px}
  .bus-node .tile,.bus-node .eg-orb{width:46px;height:46px}
  .bus-node span{font-size:12px}
  .works .row{grid-template-columns:30px 1fr 16px}
  .works .row .tile{width:30px;height:30px}
  .mx-name .mx-h{font-size:23px}
  .mx-also ul{grid-template-columns:1fr 1fr}
  .mx-plan{padding:24px}
}

/* ════════════════════════════════════════════════════════════════════════════════════════════════
   Round 5 — Home's look on every page: the serif headlines (above, in the type rules), the bigger
   buttons, light heroes, the entries on a dark ledger band, the logo inside a guilloche rosette
   ════════════════════════════════════════════════════════════════════════════════════════════════ */

/* ── buttons people want to press ─────────────────────────────────────────────────────────────── */
.btn-lg{height:56px;padding:0 26px;border-radius:14px;font:700 16px/1 var(--display);letter-spacing:-.005em}
.btn-primary{background:linear-gradient(180deg,#1A7F53,#156946);
  box-shadow:0 1px 0 rgba(255,255,255,.2) inset,0 12px 26px -12px rgba(23,113,74,.75),0 2px 4px rgba(11,31,22,.12)}
.btn-primary:hover{background:linear-gradient(180deg,#168049,#125E3D);transform:translateY(-1px);
  box-shadow:0 1px 0 rgba(255,255,255,.2) inset,0 16px 30px -12px rgba(23,113,74,.8),0 2px 4px rgba(11,31,22,.12)}
.nav .btn-primary{box-shadow:0 1px 0 rgba(255,255,255,.2) inset,0 6px 14px -8px rgba(23,113,74,.7)}
.btn-quiet.btn-lg{background:rgba(255,255,255,.78);border-color:#CDD7E2;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.btn-quiet.btn-lg:hover{background:#fff;border-color:#AEBBCB}
.btn-bright.btn-lg{box-shadow:0 12px 28px -14px rgba(52,194,127,.8)}

/* ── heroes: very light mint and sky behind the opening of every page ─────────────────────────── */
.m-hero,.pg-hero,.mx-hero,.p-hero{isolation:isolate;
  background:radial-gradient(900px 520px at 88% 0%,rgba(214,240,226,.72),rgba(214,240,226,0) 70%),
             radial-gradient(760px 460px at -4% 70%,rgba(220,234,248,.75),rgba(220,234,248,0) 70%),#FFFFFF}

/* ── what a module posts: the entries on a dark ledger band, the way Eagle breaks Home ────────── */
.sec#posts{background:linear-gradient(180deg,#0F1A2B 0%,#0C1524 100%);color:#C9D2E3;isolation:isolate;overflow:hidden}
.sec#posts::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:repeating-linear-gradient(180deg,transparent 0 35px,rgba(255,255,255,.035) 35px 36px);
  -webkit-mask:linear-gradient(180deg,transparent,#000 22%,#000 78%,transparent);mask:linear-gradient(180deg,transparent,#000 22%,#000 78%,transparent)}
.sec#posts::after{content:"";position:absolute;right:-12%;top:-30%;width:62%;height:90%;z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side,rgba(52,194,127,.14),transparent)}
#posts .h2{color:#fff}
#posts .lede{color:#AEB8CC}
#posts .post-doc{color:#AEB8CC}
#posts .doc-no{background:#17233A;border-color:rgba(255,255,255,.14);color:#fff}
#posts .post-note{color:#98A4B8}
#posts .post-note b{color:#E3E8F0}
#posts .link,#posts .post-note a{color:#7FD8AC}
#posts .je,#posts .entry-empty{color:var(--ink)}
#posts .je{border-color:rgba(255,255,255,.1);box-shadow:0 1px 0 rgba(255,255,255,.04),0 30px 60px -28px rgba(0,0,0,.7)}
#posts .post+.post::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237FD8AC' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M12 5l7 7-7 7'/%3E%3C/svg%3E")}
#posts :focus-visible{outline-color:#7FD8AC}

/* ── closing: the logo as the medallion of a guilloche rosette (drawn by site.js) ─────────────── */
.cl-rose{position:absolute;z-index:-1;width:660px;height:660px;top:50%;margin-top:-330px;pointer-events:none;
  right:calc(max(24px,50% - 600px) + clamp(200px,22vw,300px) / 2 - 330px)}
.motion .cl-rose{animation:clSpin 240s linear infinite reverse}
@keyframes clSpin{to{transform:rotate(1turn)}}
.closing .h2{font-size:clamp(36px,2.6vw + 18px,62px);max-width:12em}
@media (max-width:1023px){.cl-rose{display:none}}