/* =========================================================================
   UMBRA — corporate site DRAFT stylesheet
   Reuses the exact design language of the live site (site/index.html):
   same palette, type scale, component styles and dark brand.
   Self-contained: no external fonts/CDNs. Font families keep the brand
   names with web-safe fallbacks so the page never breaks offline.
   ========================================================================= */

:root{
  --bg:#06070a; --bg2:#0a0c11; --card:#0f131b; --card2:#11151d;
  --ink:#e4e8f0; --dim:#8791a3; --faint:#4d5666;
  --acc:#a8c0e6; --acc2:#7c9bc9; --deep:#5a6b86;
  --line:rgba(228,232,240,.09); --line2:rgba(228,232,240,.05);
  --serif:'Newsreader',Georgia,'Times New Roman',serif;
  --mono:'JetBrains Mono',ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace;
  --maxw:1080px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:var(--serif);font-size:clamp(16px,1.05vw,18px);line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden;position:relative;min-height:100vh}
body::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;background:radial-gradient(130% 80% at 22% 8%,rgba(120,155,201,.10),transparent 52%),radial-gradient(90% 60% at 90% 100%,rgba(90,107,134,.08),transparent 55%)}
canvas#ink{position:fixed;inset:0;z-index:6;pointer-events:none;width:100%;height:100%}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(20px,5vw,52px);position:relative;z-index:2}
a{color:inherit;text-decoration:none}
.mono{font-family:var(--mono);font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;color:var(--acc2)}
.kick{display:inline-flex;align-items:center;gap:.7rem;color:var(--dim)}
.kick::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--acc);box-shadow:0 0 12px 1px rgba(168,192,230,.6)}
.center{text-align:center}

/* ---------- header / nav ---------- */
header{position:sticky;top:0;z-index:30;backdrop-filter:blur(12px);background:linear-gradient(var(--bg),rgba(6,7,10,.62));border-bottom:1px solid var(--line2)}
nav{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:70px;flex-wrap:wrap;padding:.5rem 0}
/* The mark is three bores milled into this page's own surface, beside the SOLID wordmark.
   The CSS dot this replaces was an identity two marks old. Solid and not carved because
   the slot is 104px and the carve's floor is ~150px of wordmark width; the bores have no
   floor. See design/brand/dots/AVANO-logo-site-app/README.txt. */
.brand{display:flex;align-items:center;gap:9px;text-decoration:none}
.brand__bores{display:block;width:47px;aspect-ratio:141/38;flex:none}
.brand__wm{display:block;width:104px;aspect-ratio:1600/243;flex:none}
.navr{display:flex;align-items:center;gap:clamp(.8rem,2.4vw,2rem);flex-wrap:wrap}
.navr a:not(.btn){font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);transition:color .2s;padding:.3rem 0}
.navr a:not(.btn):hover{color:var(--ink)}
.navr a[aria-current="page"]{color:var(--acc)}
.btn{font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;padding:.72rem 1.2rem;border:1px solid var(--acc2);color:var(--acc);border-radius:100px;transition:.25s;background:transparent;cursor:pointer;white-space:nowrap;display:inline-block}
.btn:hover{background:var(--acc);color:#0a0e15;border-color:var(--acc)}
.btn.solid{background:var(--acc);color:#0a0e15;border-color:var(--acc)}
.btn.solid:hover{background:var(--acc2);border-color:var(--acc2)}
@media(max-width:560px){.navr{gap:.9rem}.navr a:not(.btn){letter-spacing:.08em;font-size:.62rem}.brand{font-size:1.15rem;letter-spacing:.22em}}

/* ---------- hero ---------- */
.hero{padding:clamp(56px,9vh,96px) 0 clamp(40px,7vh,72px)}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(30px,5vw,64px);align-items:center}
@media(max-width:860px){.hero-grid{grid-template-columns:1fr}}
.hero-grid>div{min-width:0}
h1{font-weight:400;font-size:clamp(2.5rem,6.2vw,4.6rem);line-height:1;letter-spacing:-.02em;margin:1.4rem 0}
h1 em{font-style:italic;color:var(--acc)}
.lede{font-size:clamp(1.08rem,2vw,1.36rem);color:var(--dim);max-width:44ch;line-height:1.5}
.cta{display:flex;gap:.9rem;flex-wrap:wrap;margin-top:2.1rem}
.cta .btn{padding:.92rem 1.5rem;font-size:.72rem}
.chips{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:1.7rem}
.chip{font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);border:1px solid var(--line);border-radius:100px;padding:.5rem .85rem}
.chip b{color:var(--acc);font-weight:500}

/* ---------- sections ---------- */
section{padding:clamp(64px,10vh,116px) 0;position:relative}
.eyebrow{font-family:var(--mono);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--acc2)}
h2{font-weight:400;font-size:clamp(1.9rem,4.6vw,3.3rem);line-height:1.04;letter-spacing:-.02em;margin-top:1.1rem}
h2 em{font-style:italic;color:var(--acc)}
h3{font-weight:500}
.sub{color:var(--dim);max-width:60ch;margin-top:1.3rem;font-size:1.06rem;line-height:1.7}
.sub b{color:var(--ink);font-weight:500}
.rule{height:1px;background:var(--line);border:0}

/* ---------- cards ---------- */
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:13px;margin-top:clamp(40px,5vh,60px)}
.cards.c3{grid-template-columns:repeat(3,1fr)}
.cards.c2{grid-template-columns:repeat(2,1fr)}
@media(max-width:900px){.cards,.cards.c3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.cards,.cards.c3,.cards.c2{grid-template-columns:1fr}}
.c{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:clamp(22px,2.4vw,30px);transition:.3s}
.c:hover{border-color:rgba(168,192,230,.35);transform:translateY(-4px)}
.c .n{font-family:var(--mono);font-size:.66rem;color:var(--acc);letter-spacing:.16em}
.c h3{font-size:1.25rem;margin:1.6rem 0 .6rem;letter-spacing:-.01em}
.c p{color:var(--dim);font-size:.95rem;line-height:1.6}
.c p em{color:var(--acc2);font-style:italic}

/* feature strip */
.feat{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:16px;overflow:hidden;margin-top:clamp(30px,4vh,48px)}
@media(max-width:700px){.feat{grid-template-columns:1fr}}
.fi{background:var(--card);padding:22px 24px}
.fi .t{font-size:1.05rem;color:var(--ink)}
.fi .d{color:var(--dim);font-size:.88rem;margin-top:.35rem}

/* ---------- flagship product block (home) ---------- */
.flag{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(28px,4vw,56px);align-items:center;background:linear-gradient(180deg,rgba(168,192,230,.05),transparent 60%),var(--card);border:1px solid var(--line);border-radius:24px;padding:clamp(28px,4vw,52px);margin-top:clamp(34px,5vh,54px)}
@media(max-width:820px){.flag{grid-template-columns:1fr}}
.flag ul{list-style:none;margin:1.5rem 0 0;display:flex;flex-direction:column;gap:.7rem}
.flag li{position:relative;padding-left:1.5rem;color:var(--dim);font-size:1rem;line-height:1.5}
.flag li::before{content:"";position:absolute;left:0;top:.55em;width:6px;height:6px;border-radius:50%;background:var(--acc2)}
.flag li b{color:var(--ink);font-weight:500}
.flag .art{aspect-ratio:1/1;border-radius:20px;border:1px solid var(--line);background:radial-gradient(120% 90% at 30% 10%,rgba(120,155,201,.14),transparent 55%),linear-gradient(var(--bg2),var(--bg));display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
.flag .art .glyph{width:46%;height:46%;border-radius:50%;background:radial-gradient(circle at 38% 32%,rgba(168,192,230,.9),rgba(124,155,201,.25) 60%,transparent 72%);box-shadow:0 0 60px 8px rgba(168,192,230,.25)}
.flag .art .glyph::after{content:"";position:absolute;top:22%;right:26%;width:8%;height:8%;border-radius:50%;background:rgba(168,192,230,.7)}

/* ---------- mission / transparency box ---------- */
.transp{border:1px solid var(--line);border-left:2px solid var(--acc2);border-radius:14px;padding:clamp(28px,4vw,44px);background:linear-gradient(180deg,rgba(168,192,230,.05),transparent)}
.transp h2{font-size:clamp(1.6rem,3.4vw,2.5rem);margin-bottom:1rem;margin-top:.4rem}
.transp p{color:var(--dim);max-width:64ch;font-size:1.04rem;line-height:1.75}
.transp p+p{margin-top:.9rem}
.transp b{color:var(--ink);font-weight:500}
.transp a{color:var(--acc);border-bottom:1px solid var(--line)}

/* ---------- roadmap (LIVE / BUILDING / PLANNED) ---------- */
.road{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:clamp(34px,5vh,54px);align-items:start}
@media(max-width:820px){.road{grid-template-columns:1fr}}
.phase{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:clamp(22px,2.6vw,28px)}
.phase>.ph-h{display:flex;align-items:center;gap:.7rem;margin-bottom:.4rem}
.phase .cap{color:var(--dim);font-size:.9rem;line-height:1.5;margin:.5rem 0 1.1rem}
.pill{font-family:var(--mono);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;border:1px solid var(--line);border-radius:100px;padding:.4rem .8rem;display:inline-flex;align-items:center;gap:.45rem;white-space:nowrap}
.pill::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.pill.live{color:var(--acc);border-color:var(--acc2);box-shadow:inset 0 0 0 9999px rgba(168,192,230,.04)}
.pill.live::before{box-shadow:0 0 10px 1px rgba(168,192,230,.6)}
.pill.building{color:var(--acc2);border-color:var(--line)}
.pill.planned{color:var(--faint);border-color:var(--line2);border-style:dashed}
.rlist{list-style:none;display:flex;flex-direction:column;gap:1rem}
.rlist li{border-top:1px solid var(--line2);padding-top:.9rem}
.rlist li:first-child{border-top:0;padding-top:0}
.rlist .rt{color:var(--ink);font-size:1.02rem;display:block;margin-bottom:.25rem}
.rlist .rd{color:var(--dim);font-size:.86rem;line-height:1.55}

/* ---------- comparison table ---------- */
.tblwrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;margin-top:clamp(30px,4vh,48px);font-size:.98rem}
th,td{padding:1.05rem 1rem;border-bottom:1px solid var(--line2);text-align:center}
thead th{font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);font-weight:400}
thead th.us{color:var(--acc)}
tbody th{text-align:left;font-weight:400;color:var(--ink)}
td{color:var(--faint)} td.y{color:var(--ink)} td.us{color:var(--acc)}
.tnote{margin-top:1.2rem;font-family:var(--mono);font-size:.64rem;letter-spacing:.06em;color:var(--faint);line-height:1.6}

/* ---------- FAQ ---------- */
.faq details{border-bottom:1px solid var(--line2);padding:1.3rem 0}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:1rem;font-size:1.15rem;color:var(--ink);min-height:44px}
.faq summary::-webkit-details-marker{display:none}
.faq summary .pl{font-family:var(--mono);color:var(--acc2);transition:transform .3s}
.faq details[open] summary .pl{transform:rotate(45deg)}
.faq .a{color:var(--dim);margin-top:.8rem;max-width:66ch;line-height:1.7;font-size:1rem}

/* ---------- early-access box ---------- */
.join{text-align:center}
.join .box{background:linear-gradient(180deg,rgba(168,192,230,.06),transparent 60%),var(--card);border:1px solid var(--line);border-radius:24px;padding:clamp(42px,6vw,74px) clamp(24px,5vw,60px)}
.join h2{margin:.4rem auto} .join .sub{margin:1.3rem auto 2.1rem}
form.wl{display:flex;gap:.55rem;max-width:460px;margin:0 auto;flex-wrap:wrap;justify-content:center}
form.wl input{flex:1 1 240px;min-width:0;background:var(--bg);border:1px solid var(--line);color:var(--ink);font-family:var(--mono);font-size:.82rem;padding:1rem 1.1rem;border-radius:100px}
form.wl input:focus{outline:none;border-color:var(--acc)}
.wlmsg{min-height:1.3em;margin-top:1rem;font-family:var(--mono);font-size:.7rem;letter-spacing:.08em;color:var(--acc)}

/* ---------- footer ---------- */
footer{padding:58px 0 52px;border-top:1px solid var(--line2);color:var(--faint)}
.foot{display:flex;justify-content:space-between;gap:2rem;flex-wrap:wrap;align-items:center}
.footlinks{display:flex;gap:1.6rem;flex-wrap:wrap}
.footlinks a{font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);display:inline-block;padding:.35rem 0}
.footlinks a:hover{color:var(--acc)}
.disc{margin-top:2rem;font-size:.82rem;color:var(--faint);max-width:78ch;line-height:1.6}

/* ---------- reveal-on-scroll ---------- */
.r{opacity:0;transform:translateY(20px);filter:blur(4px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1),filter .9s}
.r.in{opacity:1;transform:none;filter:none}
[data-d="1"]{transition-delay:.08s}[data-d="2"]{transition-delay:.16s}[data-d="3"]{transition-delay:.24s}[data-d="4"]{transition-delay:.32s}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.r{opacity:1;transform:none;filter:none}}

/* ---------- messenger demo: dissolving chat ---------- */
.demo{background:var(--card);border:1px solid var(--line);border-radius:22px;padding:20px;display:flex;flex-direction:column;height:420px;box-shadow:0 30px 80px -40px rgba(0,0,0,.8)}
.demo .dh{display:flex;align-items:center;justify-content:space-between;padding:2px 6px 14px;border-bottom:1px solid var(--line2);margin-bottom:12px}
.demo .dh .who{display:flex;align-items:center;gap:.6rem;font-size:.95rem;color:var(--ink)}
.demo .dh .av{width:26px;height:26px;border-radius:50%;background:linear-gradient(140deg,#33415a,#1a2230);border:1px solid #2a3446}
.demo .dh .st{font-family:var(--mono);font-size:.56rem;letter-spacing:.14em;text-transform:uppercase;color:var(--deep)}
.chat{flex:1;display:flex;flex-direction:column;justify-content:flex-end;gap:9px;overflow:hidden}
.msg{align-self:flex-start;max-width:80%;background:#0c1018;border:1px solid #1a2230;border-radius:15px 15px 15px 5px;padding:9px 13px;font-size:.98rem;color:#eaf0f9;transition:opacity .8s,transform .8s,filter .8s}
.msg.me{align-self:flex-end;background:#141d2b;border-radius:15px 15px 5px 15px}
.msg.gone{opacity:0;transform:translateY(-8px) scale(.98);filter:blur(6px)}
form.chatf{display:flex;gap:7px;padding-top:11px;border-top:1px solid var(--line2)}
form.chatf input{flex:1;min-width:0;background:#090c12;border:1px solid #1a2230;color:var(--ink);font-family:var(--serif);font-size:.96rem;padding:.72rem .95rem;border-radius:100px}
form.chatf input:focus{outline:none;border-color:var(--acc2)}
form.chatf button{background:transparent;border:1px solid #24303f;color:var(--acc);font-family:var(--mono);font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;padding:0 1rem;border-radius:100px;cursor:pointer}

/* ---------- messenger demo: same packets, two observers ---------- */
.obs{display:grid;grid-template-columns:1fr 1px 1fr;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--card)}
.obseam{background:linear-gradient(180deg,transparent,rgba(168,192,230,.35),transparent)}
.ob{padding:clamp(15px,2vw,22px);display:flex;flex-direction:column;min-width:0}
.obh{font-family:var(--mono);font-size:.58rem;letter-spacing:.18em;text-transform:uppercase;color:var(--acc2);margin-bottom:12px}
.ob-r .obh{color:var(--deep)}
.oblog{display:flex;flex-direction:column;justify-content:flex-end;gap:6px;min-height:150px}
.orow{display:flex;align-items:center;gap:.45rem;font-size:.78rem;color:var(--dim);transition:opacity .7s,transform .7s,filter .7s}
.orow .oav{width:17px;height:17px;border-radius:50%;background:linear-gradient(140deg,#33415a,#1a2230);border:1px solid #2a3446;flex:none}
.orow .who{color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.orow .tm{margin-left:auto;font-family:var(--mono);font-size:.54rem;color:var(--faint);flex:none}
.orow .rd{font-family:var(--mono);font-size:.54rem;color:var(--acc2);flex:none}
.orow.gone{opacity:0;transform:translateY(-8px);filter:blur(6px)}
.oseal{display:flex;align-items:center;gap:.55rem;transition:opacity .7s,filter .7s}
.oseal .blk{display:grid;grid-template-columns:repeat(8,3px);grid-auto-rows:3px;gap:2px;padding:4px;border:1px solid var(--line2);border-radius:5px;background:#0b0e14;flex:none}
.oseal .blk i{background:rgba(228,232,240,.12);border-radius:1px}
.oseal .cd{font-family:var(--mono);font-size:.56rem;letter-spacing:.06em;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.oseal .sz{margin-left:auto;font-family:var(--mono);font-size:.52rem;color:var(--faint);flex:none}
.oseal.gone{opacity:0;filter:blur(6px)}
.obg{width:100%;height:76px;margin-top:12px;display:block}
.obwhisper{margin-top:9px;font-family:var(--mono);font-size:.57rem;letter-spacing:.03em;color:#d98a7e;opacity:0;transition:opacity 1.2s;min-height:1.1em}
.obwhisper.show{opacity:.85}
.obnote{margin-top:9px;font-family:var(--mono);font-size:.57rem;letter-spacing:.06em;color:var(--faint);min-height:1.1em}
.obbridge{margin-top:1.1rem;color:var(--dim);font-size:.98rem;line-height:1.55;max-width:64ch}
.obbridge b{color:var(--ink);font-weight:500}
@media(max-width:760px){.obs{grid-template-columns:1fr}.obseam{height:1px;width:100%;background:linear-gradient(90deg,transparent,rgba(168,192,230,.35),transparent)}}

/* small mobile polish */
@media(max-width:560px){
  h1{line-height:1.06;margin:1.05rem 0}
  section{padding:52px 0}
  .hero{padding:30px 0 42px}
  table{font-size:.74rem}
  th,td{padding:.6rem .34rem}
  thead th{font-size:.6rem;letter-spacing:.06em}
}

/* =========================================================================
   Additions for the expanded site (technology, aere, roadmap, contact,
   trust, blog, early-access, careers, transparency, privacy, terms).
   Same palette and type; no new dependencies.
   ========================================================================= */

/* ---------- long-form prose (blog, legal, contact, transparency) ---------- */
.prose{max-width:72ch}
.prose>p{color:var(--dim);margin-top:1rem;line-height:1.78;font-size:1.04rem}
.prose h3{color:var(--ink);font-weight:500;font-size:1.3rem;letter-spacing:-.01em;margin:2.4rem 0 .4rem}
.prose h4{color:var(--acc2);font-family:var(--mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;margin:2rem 0 .2rem;font-weight:400}
.prose ul{list-style:none;margin:1rem 0;display:flex;flex-direction:column;gap:.6rem}
.prose li{color:var(--dim);position:relative;padding-left:1.4rem;line-height:1.65;font-size:1rem}
.prose li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;border-radius:50%;background:var(--acc2)}
.prose b{color:var(--ink);font-weight:500}
.prose em{color:var(--acc2);font-style:italic}
.prose a{color:var(--acc);border-bottom:1px solid var(--line)}
.prose code{font-family:var(--mono);font-size:.82em;color:var(--acc);background:var(--card2);border:1px solid var(--line2);border-radius:5px;padding:.06em .4em}

/* ---------- draft / placeholder callouts ---------- */
.callout{border:1px solid rgba(217,138,126,.32);border-left:2px solid #d98a7e;border-radius:12px;padding:1rem 1.2rem;margin:1.6rem 0;background:linear-gradient(180deg,rgba(217,138,126,.07),transparent)}
.callout .cl-h{font-family:var(--mono);font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;color:#d98a7e;display:flex;align-items:center;gap:.5rem}
.callout .cl-h::before{content:"";width:7px;height:7px;border-radius:50%;background:#d98a7e}
.callout p{color:var(--dim);font-size:.9rem;line-height:1.6;margin-top:.5rem;max-width:70ch}
.callout b{color:#e6b3a9;font-weight:500}

/* ---------- contact cards ---------- */
.contactgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:13px;margin-top:clamp(34px,5vh,54px)}
@media(max-width:760px){.contactgrid{grid-template-columns:1fr}}
.ccard{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:clamp(22px,2.4vw,30px)}
.ccard .k{font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--acc2)}
.ccard h3{font-size:1.2rem;margin:1rem 0 .5rem}
.ccard p{color:var(--dim);font-size:.92rem;line-height:1.6}
.ccard a.addr{display:inline-block;margin-top:.9rem;font-family:var(--mono);font-size:.82rem;color:var(--acc);border-bottom:1px solid var(--line)}

/* ---------- blog / notes index ---------- */
.notes{display:flex;flex-direction:column;gap:14px;margin-top:clamp(34px,5vh,54px)}
.note{display:block;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:clamp(22px,2.6vw,32px);transition:.3s}
.note:hover{border-color:rgba(168,192,230,.35);transform:translateY(-3px)}
.note .meta{font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);display:flex;gap:.9rem;flex-wrap:wrap}
.note h3{font-size:1.5rem;margin:.9rem 0 .5rem;letter-spacing:-.01em;color:var(--ink)}
.note p{color:var(--dim);font-size:1rem;line-height:1.65;max-width:70ch}
.note .more{display:inline-block;margin-top:1rem;font-family:var(--mono);font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;color:var(--acc)}

/* a single post body when read inline */
.post{border-top:1px solid var(--line2);padding-top:clamp(40px,6vh,68px);margin-top:clamp(40px,6vh,68px)}
.post .meta{font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);display:flex;gap:.9rem;flex-wrap:wrap;margin-bottom:1rem}

/* ---------- multi-column footer ---------- */
.footgrid{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr 1fr;gap:2rem;align-items:start}
@media(max-width:820px){.footgrid{grid-template-columns:1fr 1fr}}
.footbrand .ftag{color:var(--faint);font-size:.86rem;margin-top:.9rem;max-width:32ch;line-height:1.55}
.footcol{display:flex;flex-direction:column;gap:.6rem}
.footcol .fh{font-family:var(--mono);font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;color:var(--acc2);margin-bottom:.3rem}
.footcol a{font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);padding:.1rem 0}
.footcol a:hover{color:var(--acc)}

/* ---------- dedicated roadmap (four stacked tiers) ---------- */
.pill.shipped{color:var(--acc);border-color:var(--acc2);box-shadow:inset 0 0 0 9999px rgba(168,192,230,.04)}
.pill.shipped::before{box-shadow:0 0 10px 1px rgba(168,192,230,.6)}
.pill.early{color:#c9b98a;border-color:rgba(201,185,138,.45)}
.roadstack{display:flex;flex-direction:column;gap:14px;margin-top:clamp(34px,5vh,54px)}
.roadstack .phase .rlist{display:grid;grid-template-columns:1fr 1fr;gap:1rem 2rem;margin-top:.4rem}
@media(max-width:680px){.roadstack .phase .rlist{grid-template-columns:1fr}}
.roadstack .rlist li{border-top:1px solid var(--line2);padding-top:.9rem}
.roadstack .rlist li:first-child{border-top:1px solid var(--line2);padding-top:.9rem}

/* ---------- small utility ---------- */
.leadwrap{max-width:60ch}
.statline{display:flex;align-items:center;gap:.6rem;font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--acc2);margin-top:1.4rem}
.statline::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--acc);box-shadow:0 0 10px 1px rgba(168,192,230,.6)}