/* ============================================================================
   Nylivo — "Terminal Ledger"
   A deliberately dark-committed visual world (infrastructure / terminal
   aesthetic). Palette is token-driven; boldness spent on a single amber accent.
   ========================================================================== */
:root{
  --ink:      #0A0E12;
  --surface:  #0F151B;
  --surface-2:#141C24;
  --line:     #1E2932;
  --line-2:   #2B3945;
  --text:     #E7EEF2;
  --muted:    #9AA9B4;
  --faint:    #63717C;
  --gold:     #E9B36B;
  --gold-dim: #B98A45;
  --cyan:     #6FB7B3;
  --good:     #6FBF8B;

  --display:"Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --body:"IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono:"IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --maxw: 1120px;
  --pad: clamp(20px, 5vw, 48px);
  --r: 14px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--ink);
  color:var(--text);
  font-family:var(--body);
  font-weight:400;
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

/* soft ambient wash behind the page */
body::before{
  content:"";
  position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(1100px 620px at 78% -8%, rgba(233,179,107,.10), transparent 60%),
    radial-gradient(900px 520px at 8% 4%, rgba(111,183,179,.07), transparent 62%);
}

body.menu-open{ overflow:hidden; }

a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }

.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad); }

/* ---- shared type utilities ---- */
.eyebrow{
  font-family:var(--mono);
  font-size:12px; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--gold);
}
.h2{
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(28px, 4.2vw, 44px);
  line-height:1.05;
  letter-spacing:-.02em;
  text-wrap:balance;
  margin:14px 0 0;
}
.lede{ color:var(--muted); font-size:clamp(16px,1.6vw,19px); max-width:62ch; margin:16px 0 0; }
.section{ padding-block:clamp(64px, 9vw, 120px); border-top:1px solid var(--line); }

/* =========================== NAV =========================== */
header.nav{
  position:sticky; top:0; z-index:50;
  backdrop-filter:saturate(140%) blur(10px);
  background:color-mix(in oklab, var(--ink) 78%, transparent);
  border-bottom:1px solid transparent;
  transition:border-color .3s ease, background .3s ease;
}
header.nav.scrolled{ border-bottom-color:var(--line); }
.nav-inner{ position:relative; display:flex; align-items:center; justify-content:space-between; gap:20px; height:66px; }
.brand{ display:inline-flex; align-items:center; gap:10px; font-family:var(--display); font-weight:700; font-size:20px; letter-spacing:-.02em; white-space:nowrap; flex:none; }
.brand svg{ width:22px; height:22px; display:block; }
.nav-links{ display:flex; align-items:center; gap:22px; }
.nav-links a.link{ font-size:14px; color:var(--muted); transition:color .2s ease; white-space:nowrap; }
.nav-links a.link.here{ color:var(--text); }      /* current page */
.nav-cta{ white-space:nowrap; }

/* Domains dropdown — a native <details>/<summary> so open/close, keyboard, and a11y come for
   free; JS only adds the conveniences a native details lacks (outside-click, Escape, close after
   a link is chosen). Same markup renders two ways: a floating panel on the wide row layout below,
   and a plain indented disclosure inside the mobile burger panel (media query further down). */
.nav-dropdown{ position:relative; }
.nav-dropdown summary{
  list-style:none; cursor:pointer; -webkit-tap-highlight-color:transparent;
  display:inline-flex; align-items:center; gap:6px;
  font-size:14px; color:var(--muted); white-space:nowrap; transition:color .2s ease;
}
.nav-dropdown summary::-webkit-details-marker{ display:none; }
.nav-dropdown summary:hover{ color:var(--text); }
.nav-dropdown[open] > summary{ color:var(--text); }
.nav-dropdown .caret{ width:9px; height:9px; opacity:.7; transition:transform .18s ease; }
.nav-dropdown[open] .caret{ transform:rotate(180deg); }

.nav-dropdown .dropdown-panel{
  position:absolute; top:calc(100% + 14px); left:50%; transform:translateX(-50%);
  min-width:210px; z-index:60;
  background:var(--surface); border:1px solid var(--line); border-radius:12px;
  padding:8px; box-shadow:0 18px 40px -14px rgba(0,0,0,.6);
  display:flex; flex-direction:column; gap:1px;
}
.nav-dropdown .dropdown-panel a{
  display:flex; align-items:center; padding:9px 12px; border-radius:8px;
  font-size:14px; color:var(--muted); transition:background .15s ease, color .15s ease;
}
.nav-dropdown .dropdown-panel a:hover{ background:var(--surface-2); color:var(--text); }
.nav-dropdown .dropdown-panel a.here{ color:var(--gold); }
.nav-dropdown .dropdown-panel .sep{ height:1px; background:var(--line); margin:6px 4px; }
.live-dot{ width:6px; height:6px; border-radius:50%; background:var(--good); margin-left:auto; flex:none; }

/* burger: hidden on wide screens, the only control on narrow ones */
.burger{
  display:none; flex:none;
  width:40px; height:40px; padding:0;
  background:none; border:1px solid var(--line-2); border-radius:9px;
  color:var(--text); cursor:pointer;
  align-items:center; justify-content:center;
}
.burger:hover{ border-color:var(--gold); color:var(--gold); }
.burger:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }
.burger .bars{ position:relative; width:17px; height:11px; display:block; }
.burger .bars i{ position:absolute; left:0; width:100%; height:1.5px; background:currentColor; border-radius:2px; transition:transform .22s ease, opacity .18s ease; }
.burger .bars i:nth-child(1){ top:0; }
.burger .bars i:nth-child(2){ top:50%; margin-top:-.75px; }
.burger .bars i:nth-child(3){ bottom:0; }
.burger[aria-expanded="true"] .bars i:nth-child(1){ transform:translateY(4.75px) rotate(45deg); }
.burger[aria-expanded="true"] .bars i:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] .bars i:nth-child(3){ transform:translateY(-4.75px) rotate(-45deg); }
@media (prefers-reduced-motion: reduce){ .burger .bars i{ transition:none; } }
.nav-links a.link:hover{ color:var(--text); }
.nav-cta{
  font-family:var(--mono); font-size:13px; letter-spacing:.02em;
  color:var(--text);
  border:1px solid var(--line-2); border-radius:999px;
  padding:8px 15px; transition:border-color .2s ease, color .2s ease;
}
.nav-cta:hover{ border-color:var(--gold); color:var(--gold); }
.nav-cta .dot{ color:var(--good); }
/* Platform · Principles · Domains(▾) · Contact · CTA measure ~692px on one row (forced-row
   measurement in-browser, same technique as before) — below that the whole set moves into a
   panel behind the burger. Breakpoint carries a real buffer past that number (scrollbar width,
   future link), not just past today's exact minimum. Must match NAV_BREAKPOINT in site.js. */
@media (max-width:780px){
  .burger{ display:inline-flex; }
  .nav-links{
    position:absolute; left:0; right:0; top:100%;
    flex-direction:column; align-items:stretch; gap:0;
    padding:8px var(--pad) 18px;
    background:var(--ink);
    border-bottom:1px solid var(--line);
    /* collapsed: not rendered and not focusable */
    display:none;
  }
  .nav-links.open{ display:flex; }
  .nav-links a.link{ font-size:16px; padding:14px 0; border-top:1px solid var(--line); }
  .nav-links a.link:first-child{ border-top:none; }
  .nav-links a.link.here{ color:var(--gold); }
  .nav-cta{ margin-top:16px; align-self:flex-start; }

  /* Domains dropdown becomes a plain indented disclosure inside the vertical panel — same
     markup as the floating desktop version, repositioned rather than duplicated. */
  .nav-dropdown{ border-top:1px solid var(--line); }
  .nav-dropdown summary{ font-size:16px; padding:14px 0; color:var(--text); width:100%; justify-content:space-between; }
  .nav-dropdown .dropdown-panel{
    position:static; transform:none; min-width:0; z-index:auto;
    background:none; border:none; box-shadow:none; border-radius:0;
    padding:0 0 10px 16px;
  }
  .nav-dropdown .dropdown-panel a{ padding:10px 0; font-size:15px; border-radius:0; }
  .nav-dropdown .dropdown-panel a:hover{ background:none; color:var(--gold); }
  .nav-dropdown .dropdown-panel .sep{ display:none; }
}

/* =========================== HERO =========================== */
.hero{ position:relative; overflow:hidden; }
#hero-graph{ position:absolute; inset:0; width:100%; height:100%; z-index:0; opacity:.9; }
.hero-mask{ position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, transparent 40%, var(--ink) 98%),
             linear-gradient(90deg, var(--ink) 8%, transparent 46%); }
.hero .wrap{ position:relative; z-index:2; padding-block:clamp(72px, 13vh, 150px) clamp(64px,10vh,120px); }

.status{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--mono); font-size:12.5px; color:var(--muted);
  border:1px solid var(--line-2); border-radius:999px; padding:6px 13px;
}
.status .pulse{ width:8px; height:8px; border-radius:50%; background:var(--good);
  box-shadow:0 0 0 0 rgba(111,191,139,.6); animation:pulse 2.6s infinite; }
@keyframes pulse{ 0%{box-shadow:0 0 0 0 rgba(111,191,139,.55);} 70%{box-shadow:0 0 0 7px rgba(111,191,139,0);} 100%{box-shadow:0 0 0 0 rgba(111,191,139,0);} }

h1.hero-title{
  font-family:var(--display); font-weight:800;
  font-size:clamp(38px, 6.6vw, 76px);
  line-height:1.0; letter-spacing:-.03em;
  text-wrap:balance;
  margin:22px 0 0; max-width:16ch;
}
h1.hero-title .amber{ color:var(--gold); }
.hero-sub{ color:var(--muted); font-size:clamp(17px,1.9vw,21px); line-height:1.5; max-width:56ch; margin:22px 0 0; }
.hero-sub b{ color:var(--text); font-weight:500; }

.cta-row{ display:flex; flex-wrap:wrap; gap:14px; margin-top:34px; }
.btn{
  display:inline-flex; align-items:center; gap:9px;
  font-size:15px; font-weight:500;
  padding:13px 20px; border-radius:10px;
  border:1px solid var(--line-2);
  transition:transform .15s ease, border-color .2s ease, background .2s ease, color .2s ease;
}
.btn .arw{ transition:transform .2s ease; }
.btn:hover .arw{ transform:translateX(3px); }
.btn.primary{ background:var(--gold); color:#20160A; border-color:var(--gold); font-weight:600; }
.btn.primary:hover{ transform:translateY(-1px); background:#f0be7e; }
.btn.ghost:hover{ border-color:var(--muted); color:#fff; }
.btn:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }

/* =========================== PILLARS =========================== */
.pillars{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:52px; }
@media (max-width:900px){ .pillars{ grid-template-columns:1fr; } }
.card{
  background:linear-gradient(180deg, var(--surface), var(--ink));
  border:1px solid var(--line); border-radius:var(--r);
  padding:28px; position:relative;
  transition:border-color .25s ease, transform .25s ease;
}
.card:hover{ border-color:var(--line-2); transform:translateY(-3px); }
.card .tag{ font-family:var(--mono); font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--cyan); }
.card h3{ font-family:var(--display); font-weight:700; font-size:23px; letter-spacing:-.01em; margin:14px 0 0; }
.card p{ color:var(--muted); font-size:15.5px; margin:12px 0 0; }
.card .meta{ margin-top:18px; padding-top:16px; border-top:1px solid var(--line); display:flex; flex-wrap:wrap; gap:8px; }
.chip{ font-family:var(--mono); font-size:11.5px; color:var(--faint); border:1px solid var(--line); border-radius:6px; padding:4px 9px; }
.node-mark{ position:absolute; top:24px; right:24px; opacity:.5; }

/* =========================== THE LOOP =========================== */
.loop{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; margin-top:48px; border:1px solid var(--line); border-radius:var(--r); overflow:hidden; }
.loop.three{ grid-template-columns:repeat(3,1fr); }   /* a genuine 3-step ladder, not 4 */
/* 4 steps tile cleanly as 2x2; 3 steps would leave an orphan cell, so they go straight to one column. */
@media (max-width:820px){ .loop{ grid-template-columns:1fr 1fr; } .loop.three{ grid-template-columns:1fr; } }
@media (max-width:520px){ .loop{ grid-template-columns:1fr; } }
.step{ padding:26px; border-right:1px solid var(--line); position:relative; background:var(--surface); }
.loop .step:last-child{ border-right:none; }
@media (max-width:820px){ .step{ border-bottom:1px solid var(--line); } }
.step .num{ font-family:var(--mono); font-size:13px; color:var(--gold); }
.step h4{ font-family:var(--display); font-weight:700; font-size:19px; margin:16px 0 0; }
.step p{ color:var(--muted); font-size:14.5px; margin:9px 0 0; }
.step .arrow{ position:absolute; top:28px; right:-9px; color:var(--line-2); z-index:2; background:var(--ink); }
@media (max-width:820px){ .step .arrow{ display:none; } }

/* =========================== PRINCIPLES (spec sheet) =========================== */
.spec{ margin-top:44px; border:1px solid var(--line); border-radius:var(--r); overflow:hidden; }
.spec-row{ display:grid; grid-template-columns:230px 1fr; gap:0; border-top:1px solid var(--line); }
.spec-row:first-child{ border-top:none; }
@media (max-width:720px){ .spec-row{ grid-template-columns:1fr; } }
.spec-k{ padding:22px 26px; background:var(--surface); border-right:1px solid var(--line);
  font-family:var(--mono); font-size:13px; letter-spacing:.04em; color:var(--text); display:flex; align-items:center; gap:10px; }
@media (max-width:720px){ .spec-k{ border-right:none; border-bottom:1px solid var(--line); padding-bottom:12px; } }
.spec-k .lead{ width:6px; height:6px; border-radius:50%; background:var(--gold); flex:none; }
.spec-v{ padding:22px 26px; color:var(--muted); font-size:15.5px; }
.spec-v b{ color:var(--text); font-weight:500; }

/* =========================== DOMAINS + PRODUCTS =========================== */
.badge{ font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; padding:4px 9px; border-radius:6px; white-space:nowrap; }
.badge.live{ color:var(--good); border:1px solid color-mix(in oklab, var(--good) 45%, transparent); background:color-mix(in oklab, var(--good) 12%, transparent); }
.badge.soon{ color:var(--cyan); border:1px solid var(--line-2); }
.badge.road{ color:var(--faint); border:1px solid var(--line); }

/* Four domain cards: 2x2 reads as a deliberate grid. Three columns would leave the 4th card
   orphaned on its own row (same reasoning as .loop vs .loop.three below). */
.domains{ display:grid; grid-template-columns:repeat(2,1fr); gap:18px; margin-top:48px; }
@media (max-width:900px){ .domains{ grid-template-columns:1fr; max-width:76ch; } }
.dom{ display:flex; flex-direction:column; }

.dom{
  background:linear-gradient(180deg, var(--surface), var(--ink));
  border:1px solid var(--line); border-radius:var(--r); padding:28px;
  transition:border-color .25s ease;
}
.dom:hover{ border-color:var(--line-2); }
.dom > header{ display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; }
.dom-k{ font-family:var(--display); font-weight:700; font-size:24px; letter-spacing:-.015em; }
.dom-p{ color:var(--muted); font-size:15.5px; margin:14px 0 0; }

.uses{ list-style:none; margin:22px 0 0; padding:0; display:flex; flex-direction:column; gap:0; }
.uses > li{ border-top:1px solid var(--line); padding:16px 0 0; margin-top:16px; }
.uses > li:first-child{ border-top:none; padding-top:0; margin-top:0; }
.uses b{ font-weight:600; font-size:15.5px; color:var(--text); }
.uses .badge{ margin-left:8px; vertical-align:2px; }
.uses .u-note{ display:block; color:var(--faint); font-size:14px; margin-top:6px; line-height:1.5; }
.uses a{ display:block; transition:color .2s ease; }
.uses a:hover b{ color:var(--gold); }
/* arrow rides the title line — not after the block-level note */
.uses a > b::after{ content:" ↗"; font-family:var(--mono); font-size:12px; color:var(--gold); }
.uses a.int > b::after{ content:" →"; }   /* internal link — no external-launch arrow */
.uses a:focus-visible{ outline:2px solid var(--gold); outline-offset:4px; border-radius:4px; }

.tail{ color:var(--muted); font-size:15.5px; margin:30px 0 0; max-width:70ch; }
.tail b{ color:var(--text); font-weight:500; }

/* =========================== CTA BAND =========================== */
.band{ border-top:1px solid var(--line); background:
   radial-gradient(700px 300px at 50% 0%, rgba(233,179,107,.10), transparent 70%); }
.band .wrap{ padding-block:clamp(56px,8vw,96px); text-align:center; }
.band h2{ font-family:var(--display); font-weight:800; font-size:clamp(28px,4.4vw,48px); letter-spacing:-.02em; text-wrap:balance; margin:0 auto; max-width:20ch; }
.band p{ color:var(--muted); margin:16px auto 0; max-width:52ch; }
.band .cta-row{ justify-content:center; }

/* =========================== FOOTER =========================== */
footer{ border-top:1px solid var(--line); padding-block:44px; }
.foot{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:18px; }
.foot .brand{ font-size:18px; }
.foot .meta{ font-family:var(--mono); font-size:13px; color:var(--faint); }
.foot a.link{ color:var(--muted); font-size:14px; }
.foot a.link:hover{ color:var(--gold); }
.foot-links{ display:flex; gap:22px; align-items:center; }

/* reveal — gated on `.js` (stamped by an inline script in <head>) so that without JavaScript
   every .reveal stays visible instead of the page rendering blank. */
.js .reveal{ opacity:0; transform:translateY(14px); transition:opacity .7s ease, transform .7s ease; }
.js .reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .js .reveal{ opacity:1; transform:none; transition:none; }
  .status .pulse{ animation:none; }
}

/* ============================================================================
   SUBPAGES (/retail, /contact)
   Shared shell: a compact page header replaces the homepage's canvas hero, so
   inner pages open on content rather than atmosphere.
   ========================================================================== */
.page-head{ border-bottom:1px solid var(--line); background:
  radial-gradient(760px 320px at 12% -30%, rgba(233,179,107,.09), transparent 65%); }
.page-head .wrap{ padding-block:clamp(52px,8vw,92px) clamp(36px,5vw,56px); }
.crumb{ font-family:var(--mono); font-size:12.5px; color:var(--faint); display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.crumb a{ color:var(--muted); }
.crumb a:hover{ color:var(--gold); }
.crumb .sep{ color:var(--line-2); }
h1.page-title{
  font-family:var(--display); font-weight:800;
  font-size:clamp(32px,5.4vw,58px); line-height:1.02; letter-spacing:-.03em;
  text-wrap:balance; margin:20px 0 0; max-width:22ch;
}
.page-lede{ color:var(--muted); font-size:clamp(16px,1.7vw,19.5px); line-height:1.55; max-width:64ch; margin:18px 0 0; }
.page-lede b{ color:var(--text); font-weight:500; }
.head-badges{ display:flex; flex-wrap:wrap; gap:9px; margin-top:22px; }

/* honesty banner — states plainly what is and isn't built yet */
.notice{
  display:flex; gap:14px; align-items:flex-start;
  border:1px solid var(--line-2); border-left:3px solid var(--gold);
  border-radius:10px; background:var(--surface);
  padding:18px 20px; margin-top:30px; max-width:78ch;
}
.notice .ico{ font-family:var(--mono); color:var(--gold); font-size:14px; line-height:1.5; flex:none; }
.notice p{ margin:0; color:var(--muted); font-size:15px; line-height:1.55; }
.notice b{ color:var(--text); font-weight:500; }

/* ---- four-stage anatomy: a vertical schematic with a connecting rail ---- */
.flow{ margin-top:44px; display:flex; flex-direction:column; gap:0; }
.stage{ display:grid; grid-template-columns:112px 1fr; gap:0; position:relative; }
@media (max-width:700px){ .stage{ grid-template-columns:1fr; } }
.stage-rail{ position:relative; padding-top:4px; }
@media (max-width:700px){ .stage-rail{ padding-bottom:14px; } }
.stage-rail .k{ font-family:var(--mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); }
.stage-rail::before{                       /* the rail dot */
  content:""; position:absolute; left:0; top:34px; width:9px; height:9px; border-radius:50%;
  background:var(--gold); box-shadow:0 0 0 4px color-mix(in oklab, var(--gold) 16%, transparent);
}
.stage-rail::after{                        /* the rail line to the next stage */
  content:""; position:absolute; left:4px; top:47px; bottom:-6px; width:1px; background:var(--line-2);
}
@media (max-width:700px){ .stage-rail::before, .stage-rail::after{ display:none; } }
.stage:last-child .stage-rail::after{ display:none; }
.stage-body{ padding:0 0 34px 0; }
@media (min-width:701px){ .stage-rail .k{ padding-left:22px; } .stage-rail::before{ top:4px; } .stage-rail::after{ top:19px; } }
.stage-body h3{ font-family:var(--display); font-weight:700; font-size:23px; letter-spacing:-.015em; margin:0; }
.stage-body > p{ color:var(--muted); font-size:15.5px; margin:10px 0 0; max-width:64ch; }
.stage-body > p b{ color:var(--text); font-weight:500; }
.rows{ list-style:none; margin:18px 0 0; padding:0; border:1px solid var(--line); border-radius:12px; overflow:hidden; }
.rows li{ display:grid; grid-template-columns:236px 1fr; gap:0; border-top:1px solid var(--line); background:var(--surface); }
.rows li:first-child{ border-top:none; }
@media (max-width:640px){ .rows li{ grid-template-columns:1fr; } }
.rows .r-k{ padding:14px 18px; font-family:var(--mono); font-size:12.5px; color:var(--text); border-right:1px solid var(--line); display:flex; align-items:center; }
@media (max-width:640px){ .rows .r-k{ border-right:none; padding-bottom:2px; } }
.rows .r-v{ padding:14px 18px; color:var(--muted); font-size:14.5px; line-height:1.5; }
.rows .r-v b{ color:var(--text); font-weight:500; }

/* ---- contact ---- */
.contact-grid{ display:grid; grid-template-columns:1.15fr 1fr; gap:22px; margin-top:44px; align-items:start; }
@media (max-width:860px){ .contact-grid{ grid-template-columns:1fr; } }
.mail-card{
  border:1px solid var(--line-2); border-radius:var(--r); padding:32px;
  background:linear-gradient(180deg, var(--surface-2), var(--surface));
}
.mail-card .k{ display:block; font-family:var(--mono); font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--gold); }
.mail-link{
  display:inline-flex; align-items:center; gap:12px; margin-top:16px;
  font-family:var(--display); font-weight:700; letter-spacing:-.02em;
  font-size:clamp(23px,3.4vw,34px); color:var(--text);
  border-bottom:1px solid var(--line-2); padding-bottom:5px;
  transition:color .2s ease, border-color .2s ease;
  overflow-wrap:anywhere;
}
.mail-link:hover{ color:var(--gold); border-color:var(--gold); }
.mail-link:focus-visible{ outline:2px solid var(--gold); outline-offset:4px; }
.mail-card p{ color:var(--muted); font-size:15px; margin:20px 0 0; }
.reasons{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:0; }
.reasons li{ border-top:1px solid var(--line); padding:18px 0; }
.reasons li:first-child{ border-top:none; padding-top:0; }
.reasons h4{ font-family:var(--display); font-weight:700; font-size:17.5px; margin:0; }
.reasons p{ color:var(--muted); font-size:14.5px; margin:7px 0 0; line-height:1.55; }

/* A section that follows .page-head doesn't need the full leading gap — the header already
   provides the separation, and the double space reads as an empty screen. */
.section.tight{ padding-block-start:clamp(36px,5vw,56px); }

/* ============================================================================
   NAMED PLATFORM PILLARS (Nylivo Graph / Core / Agents / Studio)
   ========================================================================== */
/* pillar card header: the tier tag and its honest status badge share one line */
.card .card-top{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.card .card-top .badge{ flex:none; }
.card h3 .sub{ display:block; font-family:var(--body); font-weight:450; font-size:14px;
  letter-spacing:0; color:var(--muted); margin-top:5px; }

/* Studio sits a tier ABOVE the other three — you build *with* it, you don't run *on* it — so it
   gets its own full-width row instead of being a fourth peer in the grid. Keeps the 3-col runtime
   row intact (and avoids the orphan-cell problem a 4th card would create at 3 columns). */
.pillar-studio{ margin-top:18px; }
.pillar-studio::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:2px;
  background:linear-gradient(180deg, var(--gold), transparent 70%);
  border-radius:var(--r) 0 0 var(--r);
}
.pillar-studio .node-mark{ opacity:.65; }
@media (min-width:901px){
  .pillar-studio > p{ max-width:72ch; }
}