/* =========================================================
   IOMA LABS — design tokens & shared styles
   Display face: Halogen (licensed .otf files, declared below).
   Body: Source Serif 4 · Labels/data: IBM Plex Mono (Google Fonts).
   Archivo remains in the display stack as a structural fallback.
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,500;0,8..60,600;0,8..60,700;1,8..60,400&family=IBM+Plex+Mono:wght@400;500;600&family=Archivo:wght@500;600;700;800&display=swap');

/* ---- Halogen (display) ---------------------------------- */
@font-face{ font-family:'Halogen'; font-weight:100; font-style:normal; font-display:swap; src:url('/__l5e/assets-v1/d07d46ee-16cf-4a16-b7d9-0b969a42eb89/Halogen-Hairline.otf') format('opentype'); }
@font-face{ font-family:'Halogen'; font-weight:100; font-style:italic; font-display:swap; src:url('/__l5e/assets-v1/5bf9bef2-8ff9-4b83-b24f-8b84e59e69ed/Halogen-HairlineOblique.otf') format('opentype'); }
@font-face{ font-family:'Halogen'; font-weight:200; font-style:normal; font-display:swap; src:url('/__l5e/assets-v1/2d02e57d-38b6-4266-83e9-d00820874b38/Halogen-Thin.otf') format('opentype'); }
@font-face{ font-family:'Halogen'; font-weight:200; font-style:italic; font-display:swap; src:url('/__l5e/assets-v1/943d3e4f-d577-4f33-9292-82d294dad9a9/Halogen-ThinOblique.otf') format('opentype'); }
@font-face{ font-family:'Halogen'; font-weight:300; font-style:normal; font-display:swap; src:url('/__l5e/assets-v1/e041982a-bb87-463d-a525-f82a23ea67b0/Halogen-Light.otf') format('opentype'); }
@font-face{ font-family:'Halogen'; font-weight:300; font-style:italic; font-display:swap; src:url('/__l5e/assets-v1/71de6d70-60a1-48a1-9cbf-81a8addbe660/Halogen-LightOblique.otf') format('opentype'); }
@font-face{ font-family:'Halogen'; font-weight:400; font-style:normal; font-display:swap; src:url('/__l5e/assets-v1/3779620a-6382-463d-8594-0871de20a912/Halogen-Regular.otf') format('opentype'); }
@font-face{ font-family:'Halogen'; font-weight:400; font-style:italic; font-display:swap; src:url('/__l5e/assets-v1/5c483b63-d870-4a2d-8179-af28c7be6cab/Halogen-RegularOblique.otf') format('opentype'); }
@font-face{ font-family:'Halogen'; font-weight:500; font-style:normal; font-display:swap; src:url('/__l5e/assets-v1/7fe2199f-fed7-4041-9017-5181eed6c49b/Halogen-Medium.otf') format('opentype'); }
@font-face{ font-family:'Halogen'; font-weight:500; font-style:italic; font-display:swap; src:url('/__l5e/assets-v1/b83d6c19-0d47-4d24-9ff0-b5bbd5f55cda/Halogen-MediumOblique.otf') format('opentype'); }
@font-face{ font-family:'Halogen'; font-weight:700; font-style:normal; font-display:swap; src:url('/__l5e/assets-v1/2dd4d128-3b1c-4e09-81b9-9f01e4eec12e/Halogen-Bold.otf') format('opentype'); }
@font-face{ font-family:'Halogen'; font-weight:700; font-style:italic; font-display:swap; src:url('/__l5e/assets-v1/aa83524d-695d-4e2a-a100-b56548dc28d9/Halogen-BoldOblique.otf') format('opentype'); }
@font-face{ font-family:'Halogen'; font-weight:900; font-style:normal; font-display:swap; src:url('/__l5e/assets-v1/70555688-1f10-456d-89e3-0cb89a16f7a0/Halogen-Black.otf') format('opentype'); }
@font-face{ font-family:'Halogen'; font-weight:900; font-style:italic; font-display:swap; src:url('/__l5e/assets-v1/cefa04ca-0191-45cb-9977-165d79f94524/Halogen-BlackOblique.otf') format('opentype'); }

:root{
  /* ---- color: surfaces & ink ---- */
  --paper:        #F5F6F1;
  --paper-raised: #FFFFFF;
  --paper-sunken: #ECEEE6;
  --ink:          #15191E;
  --ink-soft:     #51585F;
  --ink-faint:    #8B9097;
  --rule:         #DCDED5;
  --rule-strong:  #C5C8BC;

  /* ---- color: brand accents ---- */
  --accent:       #2B3F8C;
  --accent-ink:   #1E2C63;
  --accent-soft:  #E6E9F4;
  --amber:        #B9722A;
  --amber-soft:   #F3E4CF;

  /* ---- color: architecture tiers (used consistently in every diagram) ---- */
  --tier-substrate:    #A97D49;
  --tier-specialist:   #5E7F73;
  --tier-assembly:     #5A6F99;
  --tier-appraisal:    #8B6B8D;
  --tier-articulation: #2B3F8C;

  /* ---- type ---- */
  --font-display: 'Halogen', 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --font-body:    'Source Serif 4', Georgia, 'Times New Roman', serif;
  --font-mono:    'IBM Plex Mono', 'SFMono-Regular', Menlo, Consolas, monospace;

  --text-xs:  0.75rem;
  --text-sm:  0.875rem;
  --text-base:1rem;
  --text-lg:  1.15rem;
  --text-xl:  1.4rem;
  --text-2xl: clamp(1.6rem, 1.3rem + 1.2vw, 2.15rem);
  --text-3xl: clamp(2.1rem, 1.6rem + 2vw, 3rem);
  --text-4xl: clamp(2.6rem, 1.8rem + 3.4vw, 4.4rem);

  /* ---- spacing scale (8px base) ---- */
  --s-1: 8px;   --s-2: 16px;  --s-3: 24px;  --s-4: 32px;
  --s-5: 48px;  --s-6: 64px;  --s-7: 88px;  --s-8: 120px;

  --rail-w: 150px;
  --maxw: 1240px;
  --radius: 4px;

  --shadow-card: 0 1px 2px rgba(21,25,30,.04);
  --shadow-lift: 0 14px 40px -22px rgba(21,25,30,.45);

  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------------------------------------------------------
   Reset
   --------------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important; }
}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:var(--text-base);
  line-height:1.6;
  font-optical-sizing:auto;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}
img,svg{ display:block; max-width:100%; }
a{ color:inherit; }
h1,h2,h3,h4{ font-family:var(--font-display); font-weight:700; line-height:1.08; margin:0; letter-spacing:-0.015em; text-wrap:balance; }
p{ margin:0; text-wrap:pretty; }
ul{ margin:0; padding:0; list-style:none; }
button{ font:inherit; }
::selection{ background:var(--accent); color:#fff; }
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:2px; }

/* ---------------------------------------------------------
   Layout primitives
   --------------------------------------------------------- */
.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 28px; }
.rail-grid{
  display:grid;
  grid-template-columns: var(--rail-w) 1fr;
  gap: 0 28px;
}
@media (max-width:780px){
  .rail-grid{ grid-template-columns: 1fr; }
  .rail-grid .rail{ margin-bottom:10px; }
}
.rail{
  font-family:var(--font-mono);
  font-size:var(--text-xs);
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--ink-faint);
  padding-top:.3em;
  white-space:nowrap;
}
@media (min-width:781px){
  .rail::before{
    content:""; display:block; width:20px; height:1px; background:var(--rule-strong); margin-bottom:12px;
  }
}
@media (max-width:780px){ .rail{ white-space:normal; } }
.eyebrow{
  font-family:var(--font-mono);
  font-size:var(--text-xs);
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--accent);
  white-space:nowrap;
  display:inline-flex;
  align-items:center;
  gap:.5em;
  margin-bottom:1em;
}
.eyebrow::before{
  content:"";
  width:7px; height:7px;
  background:var(--accent);
  display:inline-block;
}
section{ padding:88px 0; border-bottom:1px solid var(--rule); }
section:last-of-type{ border-bottom:none; }
@media (max-width:780px){ section{ padding:56px 0; } }

.section-head{ max-width:680px; margin-bottom:48px; }
.section-head h2{ font-size:var(--text-3xl); }
.section-head .lede{ font-size:var(--text-lg); color:var(--ink-soft); margin-top:18px; }

/* ---------------------------------------------------------
   Nav  — carries the 5-tier identity strip along its top edge
   --------------------------------------------------------- */
.site-nav{
  position:sticky; top:0; z-index:50;
  background:rgba(245,246,241,0.86);
  backdrop-filter:blur(10px) saturate(1.1);
  -webkit-backdrop-filter:blur(10px) saturate(1.1);
  border-bottom:1px solid var(--rule);
}
.site-nav::before{
  content:""; display:block; height:3px;
  background:linear-gradient(90deg,
    var(--tier-substrate) 0 20%,
    var(--tier-specialist) 20% 40%,
    var(--tier-assembly) 40% 60%,
    var(--tier-appraisal) 60% 80%,
    var(--tier-articulation) 80% 100%);
}
.site-nav .wrap{
  display:flex; align-items:center; justify-content:space-between;
  height:74px;
}
.brand{
  display:flex; align-items:center; gap:10px; white-space:nowrap; flex:none;
  font-family:var(--font-display); font-weight:800;
  font-size:1.15rem; letter-spacing:-0.01em;
  text-decoration:none; color:var(--ink);
}
.brand .mark{ width:22px; height:22px; }
.nav-links{ display:flex; align-items:center; gap:26px; }
.nav-links a:not(.nav-cta){
  font-family:var(--font-mono); font-size:.82rem;
  letter-spacing:.06em; text-transform:uppercase;
  text-decoration:none; color:var(--ink-soft);
  position:relative; padding:4px 0;
  transition:color .18s var(--ease);
}
.nav-links a:not(.nav-cta)::after{
  content:""; position:absolute; left:0; right:0; bottom:-3px;
  height:2px; background:var(--accent);
  transform:scaleX(0); transform-origin:left;
  transition:transform .22s var(--ease);
}
.nav-links a:not(.nav-cta):hover{ color:var(--ink); }
.nav-links a:not(.nav-cta):hover::after{ transform:scaleX(1); }
.nav-links a.active{ color:var(--accent); }
.nav-links a.active::after{ transform:scaleX(1); }
.nav-cta{
  font-family:var(--font-mono); font-size:.78rem; letter-spacing:.05em; text-transform:uppercase; white-space:nowrap;
  border:1px solid var(--ink); padding:10px 18px;
  text-decoration:none; color:var(--ink);
  transition:background .18s var(--ease), color .18s var(--ease);
}
.nav-cta:hover{ background:var(--ink); color:var(--paper); }
.nav-toggle{ display:none; background:none; border:none; cursor:pointer; padding:8px; color:var(--ink); }
.nav-toggle svg{ width:22px; height:22px; }

@media (max-width:880px){
  .nav-links{
    position:fixed; top:77px; left:0; right:0;
    height:calc(100vh - 77px); height:calc(100dvh - 77px);
    overflow-y:auto; background:var(--paper);
    flex-direction:column; align-items:flex-start; gap:0;
    padding:8px 28px 28px; transform:translateY(-8px); opacity:0; pointer-events:none;
    transition:opacity .2s var(--ease), transform .2s var(--ease);
    border-top:1px solid var(--rule);
  }
  .nav-links a{ width:100%; padding:16px 0; border-bottom:1px solid var(--rule); font-size:.95rem; opacity:0; transform:translateY(6px); transition:opacity .25s var(--ease), transform .25s var(--ease); }
  .nav-links a:not(.nav-cta)::after{ display:none; }
  .nav-cta{ display:none; }
  .nav-links .nav-cta{ display:block; width:100%; text-align:center; margin-top:18px; padding:15px 22px; border:1px solid var(--ink); }
  .nav-toggle{ display:block; }

  .nav-links.open{ opacity:1; transform:translateY(0); pointer-events:auto; }
  .nav-links.open a{ opacity:1; transform:translateY(0); }
  .nav-links.open a:nth-child(1){ transition-delay:.04s; }
  .nav-links.open a:nth-child(2){ transition-delay:.08s; }
  .nav-links.open a:nth-child(3){ transition-delay:.12s; }
  .nav-links.open a:nth-child(4){ transition-delay:.16s; }
  .nav-links.open a:nth-child(5){ transition-delay:.20s; }
  .nav-links.open a:nth-child(6){ transition-delay:.24s; }
  body.nav-open{ overflow:hidden; }

  .nav-toggle svg{ transition:transform .25s var(--ease); }
  .nav-toggle .bar{ transform-origin:center; transition:transform .25s var(--ease), opacity .2s var(--ease); }
  .nav-toggle[aria-expanded="true"] .bar-top{ transform:translateY(6px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] .bar-mid{ opacity:0; }
  .nav-toggle[aria-expanded="true"] .bar-bot{ transform:translateY(-6px) rotate(-45deg); }
}

/* ---------------------------------------------------------
   Buttons
   --------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--font-mono); font-size:.82rem; letter-spacing:.05em; text-transform:uppercase;
  text-decoration:none; padding:13px 22px; border:1px solid var(--ink);
  transition:background .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease), transform .12s var(--ease);
}
.btn:active{ transform:translateY(1px); }
.btn-primary{ background:var(--ink); color:var(--paper); }
.btn-primary:hover{ background:var(--accent); border-color:var(--accent); }
.btn-ghost{ background:transparent; color:var(--ink); }
.btn-ghost:hover{ background:var(--ink); color:var(--paper); }
.btn-row{ display:flex; gap:14px; flex-wrap:wrap; }

/* ---------------------------------------------------------
   Hero
   --------------------------------------------------------- */
.hero{ padding:72px 0 96px; border-bottom:1px solid var(--rule); }
.hero-head{ max-width:760px; margin-bottom:18px; }
.hero h1{ font-size:var(--text-4xl); }
.hero .lede{ font-size:var(--text-lg); color:var(--ink-soft); margin-top:22px; max-width:620px; }
.hero .btn-row{ margin-top:36px; }
.hero-figure{ margin-top:64px; }
.fig-caption{
  font-family:var(--font-mono); font-size:.78rem; color:var(--ink-faint);
  letter-spacing:.03em; margin-top:14px; padding-top:14px; border-top:1px solid var(--rule);
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
}

/* ---------------------------------------------------------
   Diagram (the architecture schematic — reused at multiple sizes)
   --------------------------------------------------------- */
.diagram{ width:100%; height:auto; }
.diagram .tier-label{ font-family:var(--font-mono); font-size:11px; letter-spacing:.04em; }
.diagram .tier-num{ font-family:var(--font-mono); font-size:11px; fill:var(--ink-faint); }

/* interactive schematic: stage + legend layout */
.schematic-stage{
  display:grid; grid-template-columns: 1fr 300px; gap:0;
  border:1px solid var(--rule); background:var(--paper-raised);
}
.schematic-stage .diagram{ padding:28px 30px; border-right:1px solid var(--rule); }
@media (max-width:880px){
  .schematic-stage{ grid-template-columns:1fr; }
  .schematic-stage .diagram{ border-right:none; border-bottom:1px solid var(--rule); }
}

.diagram--interactive .tier{ cursor:pointer; transition:opacity .25s var(--ease); }
.diagram--interactive.has-active .tier:not(.is-active){ opacity:.22; }
.diagram--interactive .tier .tier-band{ transition:fill-opacity .2s var(--ease); }

.schematic-legend{ padding:22px 22px 24px; display:flex; flex-direction:column; }
.legend-kicker{
  font-family:var(--font-mono); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-faint); margin-bottom:14px; display:flex; align-items:center; gap:8px;
}
.legend-kicker::before{ content:""; width:6px; height:6px; background:var(--accent); }
.legend-list{ display:flex; flex-direction:column; }
.legend-item{
  display:flex; align-items:center; gap:11px; width:100%;
  text-align:left; background:none; border:none; cursor:pointer;
  padding:11px 12px; border-left:2px solid transparent;
  font-family:var(--font-mono); font-size:.78rem; letter-spacing:.02em; color:var(--ink-soft);
  transition:background .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease);
}
.legend-item .lg-num{ color:var(--ink-faint); font-size:.72rem; min-width:18px; }
.legend-item .lg-dot{ width:9px; height:9px; border-radius:50%; flex:none; }
.legend-item .lg-name{ line-height:1.3; }
.legend-item:hover{ background:var(--paper); color:var(--ink); }
.legend-item.is-active{ background:var(--paper-sunken); color:var(--ink); border-left-color:var(--lg-color, var(--accent)); }
.legend-readout{
  margin-top:16px; padding-top:16px; border-top:1px solid var(--rule);
  min-height:96px;
}
.legend-readout .ro-tag{
  font-family:var(--font-mono); font-size:.68rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ro-color, var(--ink-faint)); display:inline-flex; align-items:center; gap:7px; margin-bottom:9px;
}
.legend-readout .ro-tag::before{ content:""; width:8px; height:8px; border-radius:50%; background:var(--ro-color, var(--ink-faint)); }
.legend-readout .ro-text{ font-size:.95rem; color:var(--ink-soft); line-height:1.5; }
.legend-readout.is-idle .ro-text{ color:var(--ink-faint); font-style:italic; }

/* ---------------------------------------------------------
   Cards
   --------------------------------------------------------- */
.grid{ display:grid; gap:1px; background:var(--rule); border:1px solid var(--rule); }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-2{ grid-template-columns:repeat(2,1fr); }
@media (max-width:880px){ .grid-3{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .grid-3,.grid-2{ grid-template-columns:1fr; } }

.card{ background:var(--paper-raised); padding:32px 28px; transition:background .2s var(--ease), box-shadow .2s var(--ease); position:relative; }
.grid .card:hover{ background:var(--paper); box-shadow:inset 0 2px 0 var(--accent); z-index:1; }
.card .tier-chip{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink-soft); margin-bottom:16px;
}
.card .tier-chip .dot{ width:8px; height:8px; border-radius:50%; }
.card h3{ font-size:1.25rem; margin-bottom:10px; }
.card p{ color:var(--ink-soft); font-size:.97rem; }

/* ---------------------------------------------------------
   Tier list (research page deep walkthrough)
   --------------------------------------------------------- */
.tier-row{
  display:grid; grid-template-columns: 64px 1fr; gap:26px;
  padding:36px 0; border-bottom:1px solid var(--rule);
}
.tier-row:first-of-type{ padding-top:0; }
.tier-row:last-of-type{ border-bottom:none; }
.tier-row .num{
  font-family:var(--font-mono); font-size:1rem; color:var(--ink-faint); padding-top:.2em;
}
.tier-row h3{
  font-size:1.5rem; display:flex; align-items:center; gap:12px; margin-bottom:10px;
}
.tier-row .dot{ width:10px; height:10px; border-radius:50%; flex:none; }
.tier-row p{ color:var(--ink-soft); max-width:680px; }
.tier-row p + p{ margin-top:12px; }
@media (max-width:600px){ .tier-row{ grid-template-columns:1fr; } }

/* ---------------------------------------------------------
   Quote / callout
   --------------------------------------------------------- */
.callout{
  border-left:2px solid var(--accent); padding:4px 0 4px 28px; max-width:680px;
}
.callout p{ font-size:var(--text-lg); }
.callout cite{ display:block; margin-top:14px; font-family:var(--font-mono); font-size:.8rem; font-style:normal; color:var(--ink-faint); }

/* ---------------------------------------------------------
   Comparison table
   --------------------------------------------------------- */
.cmp-table{ width:100%; border-collapse:collapse; }
.cmp-table th,.cmp-table td{
  text-align:left; padding:16px 18px; border-bottom:1px solid var(--rule); font-size:.95rem;
  vertical-align:top;
}
.cmp-table th{ font-family:var(--font-mono); font-size:.75rem; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-faint); font-weight:500; }
.cmp-table thead th{ background:var(--paper-sunken); }
.cmp-table tbody tr{ transition:background .15s var(--ease); }
.cmp-table tbody tr:hover{ background:var(--paper-raised); }
.cmp-table td.label{ font-family:var(--font-mono); font-size:.82rem; color:var(--ink-soft); white-space:nowrap; }
.cmp-table tr:last-child td{ border-bottom:none; }
.table-wrap{ overflow-x:auto; border:1px solid var(--rule); }
.table-wrap .cmp-table{ min-width:560px; }
.table-wrap th:first-child, .table-wrap td:first-child{ padding-left:24px; }

/* ---------------------------------------------------------
   Status / roadmap
   --------------------------------------------------------- */
.status-line{ display:flex; align-items:center; gap:10px; font-family:var(--font-mono); font-size:.8rem; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-soft); }
.status-line .dot{ width:8px; height:8px; border-radius:50%; background:var(--amber); position:relative; }
.status-line .dot::after{
  content:""; position:absolute; inset:-4px; border-radius:50%; border:1px solid var(--amber); opacity:.5;
  animation:pulse 2.4s var(--ease) infinite;
}
.status-line.live .dot{ background:#4F7A5C; }
.status-line.live .dot::after{ border-color:#4F7A5C; }
@keyframes pulse{ 0%{ transform:scale(.7); opacity:.6; } 70%{ transform:scale(1.6); opacity:0; } 100%{ opacity:0; } }

.roadmap{ border-left:1px solid var(--rule-strong); margin-left:6px; }
.roadmap li{ position:relative; padding:0 0 40px 32px; }
.roadmap li:last-child{ padding-bottom:0; }
.roadmap li::before{
  content:""; position:absolute; left:-5px; top:4px; width:9px; height:9px; border-radius:50%;
  background:var(--paper); border:2px solid var(--accent);
}
.roadmap .when{ font-family:var(--font-mono); font-size:.75rem; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:6px; }
.roadmap h4{ font-size:1.1rem; margin-bottom:6px; }
.roadmap p{ color:var(--ink-soft); font-size:.95rem; max-width:560px; }

/* ---------------------------------------------------------
   Team / role cards
   --------------------------------------------------------- */
.avatar{
  width:100%; aspect-ratio:1; background:var(--paper-sunken);
  border:1px solid var(--rule); display:flex; align-items:center; justify-content:center;
  margin-bottom:18px; position:relative; overflow:hidden;
}
.avatar svg{ width:38%; height:38%; opacity:.35; }
.team-card h3{ font-size:1.05rem; margin-bottom:2px; }
.team-card .role{ font-family:var(--font-mono); font-size:.78rem; color:var(--ink-faint); text-transform:uppercase; letter-spacing:.04em; }
.placeholder-tag{
  font-family:var(--font-mono); font-size:.68rem; letter-spacing:.05em; text-transform:uppercase;
  color:var(--amber); border:1px solid var(--amber-soft); background:var(--amber-soft);
  padding:3px 8px; display:inline-block; margin-top:10px;
}

.role-row{
  display:flex; justify-content:space-between; align-items:center; gap:24px;
  padding:26px 0; border-bottom:1px solid var(--rule);
  transition:padding-left .2s var(--ease);
}
.role-row:last-child{ border-bottom:none; }
.role-row:hover{ padding-left:8px; }
.role-row .meta{ font-family:var(--font-mono); font-size:.78rem; color:var(--ink-faint); margin-top:6px; letter-spacing:.03em; }
.role-row h3{ font-size:1.15rem; }
@media (max-width:600px){ .role-row{ flex-direction:column; align-items:flex-start; gap:14px; } .role-row:hover{ padding-left:0; } }

/* ---------------------------------------------------------
   CTA band
   --------------------------------------------------------- */
.cta-band{ background:var(--ink); color:var(--paper); border-bottom:none; }
.cta-band h2{ color:var(--paper); font-size:var(--text-3xl); max-width:560px; }
.cta-band p{ color:#B9BEC6; margin-top:16px; max-width:520px; font-size:var(--text-lg); }
.cta-band .btn-primary{ background:var(--paper); color:var(--ink); border-color:var(--paper); }
.cta-band .btn-primary:hover{ background:var(--accent); color:var(--paper); border-color:var(--accent); }
.cta-band .btn-ghost{ color:var(--paper); border-color:#454C55; }
.cta-band .btn-ghost:hover{ background:var(--paper); color:var(--ink); }

/* ---------------------------------------------------------
   Footer
   --------------------------------------------------------- */
footer{ background:var(--paper-sunken); border-top:1px solid var(--rule); padding:64px 0 28px; }
.footer-grid{ display:grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap:40px; padding-bottom:48px; }
@media (max-width:780px){ .footer-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:480px){ .footer-grid{ grid-template-columns:1fr; } }
.footer-brand .brand{ margin-bottom:14px; }
.footer-brand p{ color:var(--ink-soft); font-size:.92rem; max-width:280px; }
.footer-col h4{ font-family:var(--font-mono); font-size:.72rem; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:16px; font-weight:500; }
.footer-col a{ display:block; text-decoration:none; color:var(--ink-soft); font-size:.92rem; padding:6px 0; transition:color .15s var(--ease); }
.footer-col a:hover{ color:var(--accent); }
.footer-bottom{ display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; padding-top:28px; border-top:1px solid var(--rule-strong); }
.footer-bottom p{ font-family:var(--font-mono); font-size:.74rem; color:var(--ink-faint); letter-spacing:.02em; }

/* ---------------------------------------------------------
   Reveal-on-scroll
   --------------------------------------------------------- */
.reveal{ opacity:0; transform:translateY(14px); transition:opacity .6s var(--ease), transform .6s var(--ease); }
.reveal.in{ opacity:1; transform:translateY(0); }

/* ---------------------------------------------------------
   Page intro (non-home pages)
   --------------------------------------------------------- */
.page-intro{ padding:64px 0 80px; border-bottom:1px solid var(--rule); }
.page-intro h1{ font-size:var(--text-4xl); max-width:760px; }
.page-intro .lede{ font-size:var(--text-lg); color:var(--ink-soft); margin-top:22px; max-width:620px; }

/* =========================================================
   STYLE GUIDE  (design-system.html)
   ========================================================= */
.ds-toc{
  display:flex; flex-wrap:wrap; gap:8px 10px; margin-top:30px;
}
.ds-toc a{
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.05em; text-transform:uppercase;
  color:var(--ink-soft); text-decoration:none; border:1px solid var(--rule-strong);
  padding:7px 13px; transition:background .15s var(--ease), color .15s var(--ease), border-color .15s var(--ease);
}
.ds-toc a:hover{ background:var(--ink); color:var(--paper); border-color:var(--ink); }

.ds-block{ margin-bottom:18px; }
.ds-block + .ds-block{ margin-top:40px; }
.ds-label{
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-faint); margin-bottom:18px; padding-bottom:10px; border-bottom:1px solid var(--rule);
}

/* swatches */
.swatch-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:1px; background:var(--rule); border:1px solid var(--rule); }
.swatch{ background:var(--paper-raised); padding:0; }
.swatch .chip{ height:88px; border-bottom:1px solid var(--rule); }
.swatch .chip.bordered{ box-shadow:inset 0 0 0 1px var(--rule); }
.swatch .meta{ padding:13px 14px 16px; }
.swatch .sw-name{ font-family:var(--font-display); font-weight:700; font-size:.95rem; }
.swatch .sw-token{ font-family:var(--font-mono); font-size:.72rem; color:var(--accent); margin-top:4px; }
.swatch .sw-hex{ font-family:var(--font-mono); font-size:.72rem; color:var(--ink-faint); margin-top:2px; text-transform:uppercase; }
.swatch .sw-use{ font-size:.82rem; color:var(--ink-soft); margin-top:8px; line-height:1.45; }

/* type specimens */
.spec{ border:1px solid var(--rule); }
.spec-row{ display:grid; grid-template-columns:130px 1fr; gap:24px; padding:24px; border-bottom:1px solid var(--rule); align-items:baseline; }
.spec-row:last-child{ border-bottom:none; }
.spec-row .spec-meta{ font-family:var(--font-mono); font-size:.72rem; color:var(--ink-faint); line-height:1.6; padding-top:.4em; }
.spec-row .spec-meta b{ color:var(--ink-soft); font-weight:500; display:block; }
.spec-sample{ color:var(--ink); }
.spec-sample.display{ font-family:var(--font-display); font-weight:700; line-height:1.05; letter-spacing:-0.015em; }
.spec-sample.body{ font-family:var(--font-body); line-height:1.6; color:var(--ink-soft); }
.spec-sample.mono{ font-family:var(--font-mono); letter-spacing:.02em; }
@media (max-width:600px){ .spec-row{ grid-template-columns:1fr; gap:10px; } }

.family-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--rule); border:1px solid var(--rule); }
@media (max-width:780px){ .family-grid{ grid-template-columns:1fr; } }
.family-card{ background:var(--paper-raised); padding:28px; }
.family-card .fc-big{ font-size:3rem; line-height:1; margin-bottom:18px; }
.family-card .fc-big.display{ font-family:var(--font-display); font-weight:700; }
.family-card .fc-big.body{ font-family:var(--font-body); }
.family-card .fc-big.mono{ font-family:var(--font-mono); }
.family-card .fc-name{ font-family:var(--font-display); font-weight:700; font-size:1.05rem; }
.family-card .fc-role{ font-family:var(--font-mono); font-size:.72rem; color:var(--ink-faint); text-transform:uppercase; letter-spacing:.05em; margin-top:4px; }
.family-card .fc-set{ font-size:.85rem; color:var(--ink-soft); margin-top:12px; word-spacing:.05em; }

/* component demo wells */
.demo{ border:1px solid var(--rule); background:var(--paper-raised); padding:34px 30px; }
.demo + .ds-label{ margin-top:40px; }
.demo-row{ display:flex; flex-wrap:wrap; gap:16px; align-items:center; }
.demo-note{ font-family:var(--font-mono); font-size:.74rem; color:var(--ink-faint); margin-top:16px; }

/* spacing scale viz */
.space-row{ display:flex; align-items:center; gap:18px; padding:11px 0; border-bottom:1px solid var(--rule); }
.space-row:last-child{ border-bottom:none; }
.space-row .bar{ height:14px; background:var(--accent-soft); border:1px solid var(--accent); }
.space-row .lab{ font-family:var(--font-mono); font-size:.76rem; color:var(--ink-soft); min-width:120px; }
.space-row .px{ font-family:var(--font-mono); font-size:.76rem; color:var(--ink-faint); }

/* ---------------------------------------------------------
   Thesis / essay prose + stat grid (research page)
   --------------------------------------------------------- */
.prose{ max-width:680px; }
.prose p{ color:var(--ink-soft); font-size:1.02rem; }
.prose p + p{ margin-top:18px; }
.prose strong{ color:var(--ink); font-weight:600; }
.lead-list{ margin:22px 0 0; display:flex; flex-direction:column; gap:14px; max-width:680px; }
.lead-list li{ position:relative; padding-left:22px; color:var(--ink-soft); font-size:1.02rem; }
.lead-list li::before{ content:""; position:absolute; left:0; top:.62em; width:10px; height:1px; background:var(--accent); }
.lead-list b{ color:var(--ink); font-weight:600; }

.stat-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:1px; background:var(--rule); border:1px solid var(--rule); margin-top:10px; }
.stat{ background:var(--paper-raised); padding:26px 24px; }
.stat .fig{ font-family:var(--font-display); font-weight:700; font-size:2.1rem; line-height:1; letter-spacing:-0.02em; color:var(--ink); }
.stat .src{ font-family:var(--font-mono); font-size:.7rem; color:var(--ink-faint); text-transform:uppercase; letter-spacing:.04em; margin-top:8px; }
.stat p{ color:var(--ink-soft); font-size:.9rem; margin-top:10px; }

/* ---------------------------------------------------------
   FAQ (partners page)
   --------------------------------------------------------- */
.faq{ border-top:1px solid var(--rule); }
.faq details{ border-bottom:1px solid var(--rule); }
.faq summary{
  list-style:none; cursor:pointer; padding:24px 0; display:flex; gap:20px; align-items:baseline;
  font-family:var(--font-display); font-weight:700; font-size:1.18rem; color:var(--ink);
  letter-spacing:-0.01em; transition:color .15s var(--ease);
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary .q-num{ font-family:var(--font-mono); font-size:.8rem; font-weight:500; color:var(--ink-faint); padding-top:.25em; min-width:30px; }
.faq summary .q-txt{ flex:1; text-wrap:balance; }
.faq summary .q-ic{ flex:none; width:16px; height:16px; position:relative; margin-top:.4em; }
.faq summary .q-ic::before,
.faq summary .q-ic::after{ content:""; position:absolute; background:var(--accent); transition:transform .25s var(--ease), opacity .2s var(--ease); }
.faq summary .q-ic::before{ left:0; right:0; top:7px; height:2px; }
.faq summary .q-ic::after{ top:0; bottom:0; left:7px; width:2px; }
.faq details[open] summary .q-ic::after{ transform:scaleY(0); opacity:0; }
.faq summary:hover{ color:var(--accent); }
.faq .a{ padding:0 0 26px 50px; max-width:680px; }
.faq .a p{ color:var(--ink-soft); font-size:1.0rem; }
.faq .a p + p{ margin-top:14px; }
@media (max-width:600px){ .faq .a{ padding-left:0; } }

/* track header — investor / government split */
.track-head{ display:flex; align-items:center; gap:14px; margin-bottom:8px; }
.track-head .tk-tag{
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase;
  color:#fff; background:var(--accent); padding:5px 11px;
}
.track-head .tk-tag.gov{ background:var(--tier-substrate); }

/* ---------------------------------------------------------
   Integration diagram (Tessera page)
   --------------------------------------------------------- */
.int-diagram{ width:100%; height:auto; border:1px solid var(--rule); background:var(--paper-raised); padding:26px 30px; }
.int-diagram text{ font-family:var(--font-mono); }