/* Self-hosted variable fonts (SIL OFL 1.1, see /fonts). Latin subset; no third-party font requests. */
@font-face{
  font-family:'Inter'; font-style:normal; font-weight:100 900; font-display:swap;
  src:url('fonts/inter-latin-wght-normal.woff2') format('woff2-variations'), url('fonts/inter-latin-wght-normal.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'JetBrains Mono'; font-style:normal; font-weight:100 800; font-display:swap;
  src:url('fonts/jetbrains-mono-latin-wght-normal.woff2') format('woff2-variations'), url('fonts/jetbrains-mono-latin-wght-normal.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root{
  color-scheme: dark;
  /* canvas + surfaces */
  --ink:        #08090d;
  --surface-1:  #0d1117;
  --surface-2:  #12161d;
  --surface-3:  #171c25;
  --border:     #262c36;
  --border-soft:#1c212a;

  /* text */
  --text-1: #e6edf3;
  --text-2: #9aa4b2;
  --text-3: #8a94a2;

  /* node-kind accents, exactly as categorized in the app */
  --k-trigger: #8aa9c9;   /* trigger: solid 3px  */
  --k-action:  #4d9eff;   /* action: solid 2px  */
  --k-logic:   #34d399;   /* logic: dashed 2px */
  --k-utility: #f59e0b;   /* utility: dotted 2px */
  --k-ai:      #a78bfa;   /* ai: double 3px */

  /* type */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --radius-s: 3px;
  --radius-m: 5px;
  --container: 1180px;

  --ease: cubic-bezier(.16,.84,.44,1);
}

*,*::before,*::after{ box-sizing: border-box; }
@view-transition{ navigation: auto; }
html{ scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *,*::before,*::after{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

body{
  margin:0;
  background: var(--ink);
  color: var(--text-1);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
}

/* Keyboard-only "skip to content" link. It sits fully above the viewport and is not clickable until it receives
   keyboard focus, so a mouse never sees or hits it; activating it moves focus to <main>. */
.skip-link{
  position:fixed; top:8px; left:8px; z-index:100;
  transform: translateY(calc(-100% - 16px)); pointer-events:none;
  background: var(--text-1); color: var(--ink);
  padding:10px 16px; border-radius: var(--radius-s);
  font-family: var(--font-sans); font-weight:600; font-size:14px;
  transition: transform .18s var(--ease);
}
.skip-link:focus-visible{ transform:none; pointer-events:auto; }
main:focus{ outline:none; }

/* ambient canvas texture, the same dotted grid the app's own
   workspace uses behind every workflow */
body::before{
  content:"";
  position: fixed; inset:0;
  background-image: radial-gradient(circle, rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events: none;
  z-index: 0;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 40%, transparent 100%);
}

h1,h2,h3,h4{ margin:0; font-weight: 700; letter-spacing: -0.02em; }
p{ margin:0; }
a{ color: inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
img,svg{ display:block; max-width:100%; }
button{ font-family: inherit; cursor:pointer; }

.wrap{ max-width: var(--container); margin: 0 auto; padding: 0 clamp(20px, 5vw, 32px); position:relative; z-index:1; }

.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family: var(--font-mono);
  font-size: 12px; font-weight:500;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-2);
}
.eyebrow::before{
  content:""; width:7px; height:7px; border-radius:1px;
  background: var(--dot, var(--k-logic));
  box-shadow: 0 0 0 3px rgba(255,255,255,0.14);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--dot, var(--k-logic)) 18%, transparent);
}

/* -------- kind-coded border grammar --------
   The app tells trigger/action/logic/utility/ai nodes apart with a
   distinct color AND border style, not color alone. Every card on
   this site reuses that exact grammar. */
.kind-trigger{ border: var(--kind-border, 3px solid) var(--k-trigger); }
.kind-action { border: var(--kind-border, 2px solid) var(--k-action); }
.kind-logic  { border: var(--kind-border, 2px dashed) var(--k-logic); }
.kind-utility{ border: var(--kind-border, 2px dotted) var(--k-utility); }
.kind-ai     { border: var(--kind-border, 3px double) var(--k-ai); }

.badge{
  display:inline-block; align-self:flex-start; flex-shrink:0;
  font-family: var(--font-mono); font-size: 10.5px; font-weight:600;
  letter-spacing: 0.1em; text-transform: uppercase;
  padding: 3px 7px; border-radius: 2px;
}
.badge-trigger{ color: var(--k-trigger); background: rgba(138,169,201,0.12); background: color-mix(in srgb, var(--k-trigger) 12%, transparent); }
.badge-action { color: var(--k-action);  background: rgba(77,158,255,0.12);  background: color-mix(in srgb, var(--k-action) 12%, transparent); }
.badge-logic  { color: var(--k-logic);   background: rgba(52,211,153,0.12);  background: color-mix(in srgb, var(--k-logic) 12%, transparent); }
.badge-utility{ color: var(--k-utility); background: rgba(245,158,11,0.12);  background: color-mix(in srgb, var(--k-utility) 12%, transparent); }
.badge-ai     { color: var(--k-ai);      background: rgba(167,139,250,0.12); background: color-mix(in srgb, var(--k-ai) 12%, transparent); }

.btn{
  display:inline-flex; align-items:center; gap:8px;
  font-family: var(--font-sans); font-weight:600; font-size:14.5px;
  padding: 12px 20px; border-radius: var(--radius-s);
  border: 1px solid transparent;
  transition: transform .18s var(--ease), border-color .18s var(--ease), background .18s var(--ease), color .18s var(--ease);
}
.btn:active{ transform: translateY(1px); }
.btn-primary{ background: var(--text-1); color: var(--ink); }
.btn-primary:hover{ background: var(--k-logic); }
.btn-ghost{ border-color: var(--border); color: var(--text-1); }
.btn-ghost:hover{ border-color: var(--text-2); background: var(--surface-2); }
.btn svg{ width:14px; height:14px; }

:focus-visible{ outline: 2px solid var(--k-action); outline-offset: 3px; }

.js .reveal{ opacity:0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.js .reveal.is-visible{ opacity:1; transform:none; }

/* Anchor jumps: land so a section's eyebrow sits one --anchor-gap below the fixed nav, instead of leaving the
   section's own top padding (plus the nav height) as empty space above the content. */
section{ position:relative; z-index:1; padding: 128px 0; --section-pad: 128px; scroll-margin-top: calc(var(--nav-h, 68px) + var(--anchor-gap, 32px) - var(--section-pad)); }
@media (max-width: 720px){ section{ padding: 84px 0; --section-pad: 84px; } }

.section-head{ max-width: 640px; margin-bottom: 56px; }
.section-head h2{ font-size: clamp(28px,4vw,42px); margin-top:14px; }
.section-head p{ color: var(--text-2); font-size:16.5px; margin-top:14px; max-width: 520px; }

/* ================= NAV ================= */
.nav{
  position: fixed; top:0; left:0; right:0; z-index: 50;
  border-bottom: 1px solid transparent;
  transition: border-color .3s, background .3s;
}
.nav.is-scrolled{ background: rgba(8,9,13,0.86); backdrop-filter: blur(10px); border-color: var(--border-soft); }
.nav-inner{ display:flex; align-items:center; justify-content:space-between; gap:24px; height:68px; max-width:1320px; }
.brand{ display:flex; align-items:center; gap:10px; font-weight:700; font-size:15.5px; letter-spacing:-0.01em; }
.brand svg{ width:24px; height:24px; }
.nav-links{ display:flex; align-items:center; gap:30px; }
.nav-links a{ font-size:14px; color: var(--text-2); transition: color .18s; }
.nav-links a:hover{ color: var(--text-1); }
.nav-cta{ display:flex; align-items:center; gap:10px; }
.nav-toggle{ display:none; background:none; border:none; color:var(--text-1); padding:11px; }
.nav-toggle svg{ width:22px; height:22px; }
.nav-toggle svg line{ transform-box: fill-box; transform-origin: 50% 50%; transition: transform .25s var(--ease), opacity .2s var(--ease); }
.nav.is-open .nti-top{ transform: translateY(6px) rotate(45deg); }
.nav.is-open .nti-mid{ opacity:0; }
.nav.is-open .nti-bot{ transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 1040px){
  .nav-links{
    position:fixed; inset: 68px 0 0 0; background: var(--ink);
    flex-direction:column; align-items:stretch; gap:0;
    padding: 8px max(32px, env(safe-area-inset-right, 0px)) calc(32px + env(safe-area-inset-bottom, 0px)) max(32px, env(safe-area-inset-left, 0px));
    border-top:1px solid var(--border-soft);
    overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch;
    transform: translateY(-8px); opacity:0; visibility:hidden;
    transition: opacity .2s, transform .2s, visibility 0s linear .2s;
  }
  .nav-links a{ display:block; width:100%; padding: 16px 0; border-bottom: 1px solid var(--text-3); font-size:16px; }
  .nav.is-open .nav-links{ opacity:1; transform:none; visibility:visible; transition-delay:0s; }
  .nav-toggle{ display:block; }
  .nav-cta .btn-ghost{ display:none; }
  .nav-links a.btn{ display:flex; justify-content:center; margin-top:16px; padding:14px 20px; border-bottom:0; }
  .nav-links a.btn-primary{ color:var(--ink); }
}
/* A Get Aerini button that sits inside the link list on the secondary pages is for the drawer only. */
@media (min-width:1041px){ .nav-drawer-cta{ display:none; } }

/* ================= HERO ================= */
.hero{ padding: 168px 0 96px; }
.hero-grid{ display:grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items:center; }
.hero h1{ font-size: clamp(36px, 5.4vw, 60px); line-height:1.05; margin-top:20px; }
.hero .lede{ color: var(--text-2); font-size: 18px; max-width: 480px; margin-top: 22px; line-height:1.6; }
.hero-ctas{ display:flex; gap:14px; margin-top:34px; flex-wrap:wrap; }

.hero-visual{ position:relative; }
.hero-panel{
  background: var(--surface-1); border:1px solid var(--border); border-radius: var(--radius-m);
  overflow:hidden; box-shadow: 0 30px 80px -20px rgba(0,0,0,0.6);
}
.hero-panel-head{
  display:flex; align-items:center; justify-content:space-between;
  padding: 10px 14px; border-bottom:1px solid var(--border);
  font-family: var(--font-mono); font-size:12px; color:var(--text-3);
}
.hero-panel-head .lights{ display:flex; gap:6px; }
.hero-panel-head .lights span{ width:8px;height:8px;border-radius:50%;background:var(--surface-3); }
.hero-canvas{ position:relative; height: 360px; }

@media (max-width: 980px){
  .hero-grid{ grid-template-columns: 1fr; }
  .hero-visual{ order:-1; }
  .hero{ padding-top: 140px; }
}

/* node graph inside the hero panel */
.hg-node{
  position:absolute; background:var(--surface-2); border-radius: var(--radius-s);
  font-family: var(--font-mono);
}
.hg-node-head{ display:flex; align-items:center; justify-content:space-between; padding:7px 9px; border-bottom:1px solid var(--border); }
.hg-node-head .name{ font-family: var(--font-sans); font-weight:600; font-size:12px; }
.hg-node-body{ padding:8px 9px; font-size:11px; color:var(--text-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hg-port{ width:7px;height:7px;border-radius:1px;background:var(--surface-3); transition: background .25s, box-shadow .25s; }
.hg-port.live{ background: var(--k-logic); box-shadow:0 0 0 3px rgba(52,211,153,0.25); box-shadow:0 0 0 3px color-mix(in srgb, var(--k-logic) 25%, transparent); }
.hg-wire{ position:absolute; fill:none; stroke: var(--text-3); stroke-opacity:.4; stroke-width:1.5; transition: stroke .3s, stroke-opacity .3s; }
.hg-wire.live{ stroke: var(--k-logic); stroke-opacity:1; }
.hg-pulse{ fill: var(--k-logic); filter: drop-shadow(0 0 4px var(--k-logic)); opacity:0; }
.hg-readout{
  position:absolute; left:14px; right:14px; bottom:12px;
  border-top:1px solid var(--border); padding-top:8px;
  display:flex; justify-content:space-between;
  font-family:var(--font-mono); font-size:11px; color:var(--text-3);
}
.hg-readout b{ color: var(--text-2); font-weight:500; }


/* ================= INTRO ================= */
.intro{ padding: 120px 0 60px; }
.intro-grid{ display:grid; grid-template-columns: 200px 1fr; gap:56px; align-items:start; }
.intro-grid h2{ font-size: clamp(26px,3.4vw,34px); line-height:1.2; }
.intro-copy{ font-size:19px; color: var(--text-2); line-height:1.7; max-width:640px; }
.intro-copy strong{ color:var(--text-1); font-weight:600; }
.intro-terms{ display:flex; gap:28px; margin-top:36px; flex-wrap:wrap; }
.intro-term{ font-family:var(--font-mono); font-size:12px; color:var(--text-3); max-width:160px; }
.intro-term b{ display:block; color:var(--text-1); font-family:var(--font-sans); font-size:14.5px; font-weight:600; margin-bottom:4px; }
@media (max-width:780px){ .intro-grid{ grid-template-columns:1fr; gap:20px; } }

/* ================= HOW IT WORKS (interactive demo) ================= */
.demo-shell{
  background: var(--surface-1); border:1px solid var(--border); border-radius: var(--radius-m);
  overflow:hidden;
}
.demo-top{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:14px;
  padding:16px 22px; border-bottom:1px solid var(--border);
}
.demo-top .name{ font-family:var(--font-mono); font-size:12.5px; color:var(--text-2); }
.demo-run{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-mono); font-size:12.5px; font-weight:600; letter-spacing:0.04em;
  background: var(--surface-3); border:1px solid var(--border); color:var(--text-1);
  padding:14px 16px; border-radius: var(--radius-s); transition:.18s;
}
.demo-run:hover{ border-color: var(--k-logic); color: var(--k-logic); }
.demo-run .rdot{ width:6px;height:6px;border-radius:50%; background:var(--text-3); }
.demo-run.running .rdot{ background: var(--k-logic); box-shadow:0 0 0 3px rgba(52,211,153,0.25); box-shadow:0 0 0 3px color-mix(in srgb, var(--k-logic) 25%, transparent); }
.demo-canvas{ position:relative; height: 300px; background-image: radial-gradient(circle, rgba(255,255,255,0.045) 1px, transparent 1px); background-size:22px 22px; }
.demo-node{
  position:absolute; width: 172px; background:var(--surface-2); border-radius:var(--radius-s);
}
.demo-node-head{ display:flex; align-items:center; justify-content:space-between; padding:8px 10px; border-bottom:1px solid var(--border); }
.demo-node-head .name{ font-weight:600; font-size:12.5px; }
.demo-node-body{ padding:9px 10px; font-family:var(--font-mono); font-size:10.5px; color:var(--text-3); height:34px; overflow:hidden; }
.demo-foot{
  border-top:1px solid var(--border); padding: 14px 22px;
  display:flex; gap:28px; flex-wrap:wrap;
  font-family:var(--font-mono); font-size:11.5px; color:var(--text-3);
}
.demo-foot b{ color: var(--k-logic); font-weight:500; }
.demo-steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:28px; }
.demo-step{ padding-top:14px; }
.demo-step .badge{ margin-bottom:10px; }
.demo-step p{ font-size:14px; color:var(--text-2); line-height:1.6; }
@media (max-width:780px){ .demo-steps{ grid-template-columns:1fr; } }

/* ================= CAPABILITY GRID ================= */
.cap-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--border); border:1px solid var(--border); border-radius:var(--radius-m); overflow:hidden; }
.cap-card{ background:var(--surface-1); padding:26px 24px; min-height:150px; display:flex; flex-direction:column; gap:12px; }
.cap-card h3{ font-size:16px; }
.cap-card p{ font-size:13.5px; color:var(--text-2); line-height:1.55; }
.cap-stat{ margin-top:20px; font-family:var(--font-mono); font-size:12.5px; color:var(--text-3); }
.cap-stat b{ color:var(--text-1); }
@media (min-width:881px){
  .cap-card:last-child:nth-child(3n+1){ grid-column: 1 / -1; }
  .cap-card:last-child:nth-child(3n+2){ grid-column: span 2; }
}
@media (max-width:880px){
  .cap-grid{ grid-template-columns:1fr 1fr; }
  .cap-card:last-child:nth-child(odd){ grid-column: 1 / -1; }
}
@media (max-width:560px){ .cap-grid{ grid-template-columns:1fr; } }

/* ================= WHY CARDS ================= */
.why-list{ display:flex; flex-direction:column; }
.why-row{
  display:grid; grid-template-columns: 260px 1fr; gap:40px; padding: 34px 0;
  border-top:1px solid var(--border-soft);
}
.why-row:last-child{ border-bottom:1px solid var(--border-soft); }
.why-row h3{ font-size:19px; }
.why-row .badge{ margin-bottom:12px; }
.why-row p{ color:var(--text-2); font-size:15px; line-height:1.7; max-width:560px; }
.why-row .spec{ font-family:var(--font-mono); font-size:12px; color:var(--text-3); margin-top:12px; }
@media (max-width:780px){ .why-row{ grid-template-columns:1fr; gap:12px; } }

/* ================= OPEN SOURCE ================= */
.os-grid{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start; }
.os-copy p{ color:var(--text-2); font-size:16px; line-height:1.75; }
.os-copy p + p{ margin-top:16px; }
.license-card{ padding:26px; border-radius:var(--radius-m); border:1px solid var(--border); background:var(--surface-1); }
.license-card .lname{ font-family:var(--font-mono); font-size:12px; letter-spacing:0.06em; color:var(--text-3); text-transform:uppercase; }
.license-card h3{ font-size:20px; margin-top:8px; }
.license-card p{ font-size:14px; color:var(--text-2); margin-top:12px; line-height:1.6; }
.license-card .btn{ margin-top:18px; width:100%; justify-content:center; }
.license-card.is-optional{ background:var(--surface-3); }
.license-cards{ display:grid; gap:18px; }
@media (max-width:780px){ .os-grid{ grid-template-columns:1fr; } }

/* ================= COMMUNITY ================= */
.ladder{ display:flex; flex-wrap:wrap; gap:0; margin-top:20px; }
.ladder-step{
  flex:1; min-width:150px; padding:18px 20px; border-top:2px solid var(--border);
  position:relative;
}
.ladder-step .n{ font-family:var(--font-mono); font-size:12px; color:var(--text-3); }
.ladder-step h3{ font-size:15px; margin-top:8px; }
.ladder-step p{ font-size:12.5px; color:var(--text-2); margin-top:6px; line-height:1.5; }
.community-grid{ display:grid; grid-template-columns:1.1fr 0.9fr; gap:48px; margin-top:56px; }
.poll-card{ background:var(--surface-1); border-radius:var(--radius-m); padding:26px; }
.poll-card .lname{ font-family:var(--font-mono); font-size:12px; color:var(--text-3); letter-spacing:0.06em; text-transform:uppercase; }
.poll-card h3{ font-size:17px; margin-top:10px; }
.poll-card p{ font-size:13.5px; color:var(--text-2); margin-top:10px; line-height:1.6; }
.roadmap-list{ display:flex; flex-direction:column; gap:0; }
.roadmap-item{ display:flex; gap:14px; padding:14px 0; border-top:1px solid var(--border-soft); font-size:14px; }
.roadmap-item:last-child{ border-bottom:1px solid var(--border-soft); }
.roadmap-item .badge{ flex-shrink:0; height:fit-content; }
@media (max-width:900px){ .community-grid{ grid-template-columns:1fr; } }

/* ================= SUPPORT ================= */
.support-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--border); border:1px solid var(--border); border-radius:var(--radius-m); overflow:hidden; margin-top:48px; }
@media (max-width:640px){ .support-grid{ grid-template-columns:1fr; } }
.support-col{ background:var(--surface-1); padding:32px; }
.support-col .tag{ font-family:var(--font-mono); font-size:12px; letter-spacing:0.08em; text-transform:uppercase; color:var(--text-3); }
.support-col h2, .support-col h3{ font-size:22px; margin-top:10px; }
.support-col ul{ margin-top:22px; display:flex; flex-direction:column; gap:13px; }
.support-col li{ display:flex; gap:10px; font-size:14.5px; color:var(--text-2); line-height:1.5; }
.support-col li svg{ flex-shrink:0; width:15px; height:15px; margin-top:2px; color: var(--k-logic); }
.support-col.is-supporter li svg{ color: var(--k-ai); }
.tier-row{ display:flex; gap:10px; margin-top:24px; flex-wrap:wrap; }
.tier{ font-family:var(--font-mono); font-size:12px; padding:6px 12px; border-radius:2px; border:1px dotted var(--k-utility); color:var(--k-utility); }
.support-col .btn{ margin-top:24px; }
.reward-note{ margin-top:20px; padding-top:20px; border-top:1px dashed var(--border); font-size:12.5px; color:var(--text-3); line-height:1.6; }

/* ================= DOWNLOAD ================= */
.platform-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:1px; background:var(--border); border:1px solid var(--border); border-radius:var(--radius-m); overflow:hidden; }
.platform-card{ background:var(--surface-1); padding:28px 22px; display:flex; flex-direction:column; gap:16px; }
.platform-card svg{ width:26px; height:26px; color:var(--text-2); }
.platform-card h3{ font-size:15.5px; }
.platform-card .sub{ font-family:var(--font-mono); font-size:12px; color:var(--text-3); }
.platform-card a{ margin-top:auto; font-family:var(--font-mono); font-size:12.5px; color:var(--k-action); display:flex; align-items:center; gap:6px; }
.platform-card a:hover{ color:var(--k-logic); }
@media (max-width:780px){ .platform-grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:480px){ .platform-grid{ grid-template-columns:1fr; } }
.dl-note{ margin-top:30px; font-size:13.5px; color:var(--text-3); font-family:var(--font-mono); line-height:1.7; }
.dl-note code{ background:var(--surface-2); padding:2px 7px; border-radius:2px; color:var(--text-2); overflow-wrap:break-word; }

/* ================= FAQ ================= */
.faq-list{ max-width:760px; }
.faq-item{ border-top:1px solid var(--border-soft); }
.faq-item:last-child{ border-bottom:1px solid var(--border-soft); }
.faq-q{
  width:100%; background:none; border:none; text-align:left; color:var(--text-1);
  display:flex; justify-content:space-between; align-items:center; gap:20px;
  padding: 22px 0; font-size:16px; font-weight:600;
}
.faq-q svg{ width:16px; height:16px; flex-shrink:0; color:var(--text-3); transition: transform .25s var(--ease); }
.faq-item.is-open .faq-q svg{ transform: rotate(45deg); color: var(--k-logic); }
.faq-a{ display:grid; grid-template-rows:0fr; visibility:hidden; transition: grid-template-rows .3s var(--ease), visibility 0s linear .3s; }
.faq-item.is-open .faq-a{ grid-template-rows:1fr; visibility:visible; transition-delay:0s; }
.faq-a-inner{ min-height:0; overflow:hidden; color:var(--text-2); font-size:14.5px; line-height:1.7; max-width:640px; }
.faq-a-inner::after{ content:""; display:block; height:22px; }

/* ================= FINAL CTA ================= */
.final-cta{ text-align:center; padding: 140px 0; }
.final-cta h2{ font-size: clamp(30px,5vw,50px); max-width:680px; margin:18px auto 0; }
.final-cta .lede{ color:var(--text-2); font-size:16.5px; max-width:480px; margin: 18px auto 0; }
.final-cta .hero-ctas{ justify-content:center; margin-top:30px; }

/* ================= FOOTER ================= */
footer{ border-top:1px solid var(--border-soft); padding: 64px 0 40px; position:relative; z-index:1; }
.section-head h1{ font-size: clamp(28px,4vw,42px); margin-top:14px; }

.policy{ max-width: 720px; }
.policy .updated{ color: var(--text-3); font-family: var(--font-mono); font-size:13px; margin-bottom:40px; }
.policy h2{ font-size: 21px; margin-top:44px; margin-bottom:14px; }
.policy h2:first-of-type{ margin-top:0; }
.policy p{ color: var(--text-2); font-size:15.5px; line-height:1.75; margin-bottom:14px; }
.policy ul{ margin:0 0 14px; padding-left:20px; color: var(--text-2); font-size:15.5px; line-height:1.75; }
.policy li{ margin-bottom:6px; }
.policy a{ color: var(--text-1); text-decoration:underline; text-underline-offset:3px; text-decoration-color: var(--border); }
.policy a:hover{ text-decoration-color: var(--text-1); }
.policy strong{ color: var(--text-1); }
.policy code{ background: var(--surface-2); padding:2px 7px; border-radius:2px; font-family: var(--font-mono); font-size:14px; color: var(--text-1); }

.contact-methods{ display:grid; gap:16px; margin-top:32px; max-width:560px; }
.contact-method{ display:flex; align-items:flex-start; gap:14px; padding:18px 20px; background: var(--surface-1); border:1px solid var(--border-soft); border-radius: var(--radius-m); min-width:0; }
.contact-method svg{ width:20px; height:20px; flex-shrink:0; margin-top:2px; color: var(--k-action); }
.contact-method > div{ min-width:0; }
.contact-method h2{ font-size:14.5px; margin-bottom:4px; }
.contact-method p{ color: var(--text-3); font-size:13.5px; margin-bottom:8px; line-height:1.6; }
.contact-method a{ color: var(--text-1); font-family: var(--font-mono); font-size:13.5px; text-decoration:underline; text-underline-offset:3px; text-decoration-color: var(--border); overflow-wrap:break-word; }
.contact-method a:hover{ text-decoration-color: var(--text-1); }

.foot-grid{ display:grid; grid-template-columns:1.3fr 1fr 1fr 1fr; gap:40px; }
.foot-brand{ display:flex; align-items:center; gap:9px; font-weight:700; font-size:15px; margin-bottom:14px; }
.foot-brand svg{ width:20px;height:20px; }
.foot-desc{ font-size:13.5px; color:var(--text-3); max-width:260px; line-height:1.6; }
.foot-col .foot-label{ font-family:var(--font-mono); font-size:12px; letter-spacing:0.08em; text-transform:uppercase; color:var(--text-3); margin-bottom:16px; font-weight:600; }
.foot-col a{ display:block; font-size:13.5px; color:var(--text-2); padding:6px 0; transition:color .18s; }
.foot-col a:hover{ color:var(--text-1); }
.foot-bottom{
  margin-top:56px; padding-top:24px; border-top:1px solid var(--border-soft);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px;
  font-family:var(--font-mono); font-size:11.5px; color:var(--text-3);
}
@media (max-width:780px){ .foot-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:480px){ .foot-grid{ grid-template-columns:1fr; } }

/* ticker */
.ticker-wrap{
  border-top:1px solid var(--border-soft); border-bottom:1px solid var(--border-soft);
  overflow:hidden; padding: 18px 0; background: var(--surface-1);
}
.ticker{ display:flex; width:max-content; gap:40px; animation: ticker 32s linear infinite; }
@media (prefers-reduced-motion: reduce){ .ticker{ animation:none; } }
.ticker span{
  font-family: var(--font-mono); font-size:12.5px; letter-spacing:0.05em;
  color: var(--text-2); white-space:nowrap; display:flex; align-items:center; gap:40px;
}
.ticker span::after{ content:"·"; color: var(--border); margin-left:40px; }
@keyframes ticker{ to{ transform: translateX(-50%); } }

/* ================= ASCII WIREFRAME (primary, below "What it is") ================= */
.ascii-feature{
  border-top:1px solid var(--border-soft); border-bottom:1px solid var(--border-soft);
  background: var(--surface-1);
}
.ascii-feature-inner{ height: clamp(240px, 34vw, 380px); position:relative; }
.ascii-feature canvas{ display:block; width:100%; height:100%; }
.ascii-feature-caption{
  position:absolute; left:0; right:0; bottom:10px; margin:0;
  text-align:center; font-family:var(--font-mono); font-size:12px;
  letter-spacing:0.04em; color:var(--text-3); pointer-events:none;
}
.ascii-feature-caption a{ pointer-events:auto; color:var(--text-2); text-decoration:underline; text-underline-offset:2px; text-decoration-color:var(--border); }
.ascii-feature-caption a:hover{ color:var(--text-1); }
.ascii-feature-caption.is-archived{ color:var(--text-2); }

/* ================= AMBIENT ASCII BACKGROUNDS (community + why) ================= */
#community, #why{ position:relative; }
.ascii-ambient{ position:absolute; z-index:0; pointer-events:none; }
.ascii-ambient canvas{ display:block; width:100%; height:100%; }
#community .ascii-ambient{ top:0; right:0; width:min(460px, 55vw); height:min(460px, 55vw); opacity:0.85; }
#why .ascii-ambient{ inset:0; opacity:0.12; }
@media (max-width:900px){
  #community .ascii-ambient{
    position:static; width:100%; height:clamp(140px, 42vw, 220px); opacity:0.6; margin-bottom:20px;
    -webkit-mask-image: linear-gradient(to bottom, #000 65%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 65%, transparent 100%);
  }
}

/* ================= MOBILE BOTTOM CTA BAR ================= */
.mobile-cta-bar{
  display:none; position:fixed; left:0; right:0; bottom:0; z-index:60;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  background: rgba(8,9,13,0.92); backdrop-filter: blur(10px);
  border-top:1px solid var(--border-soft);
  transform: translateY(100%); transition: transform .25s var(--ease);
}
.mobile-cta-bar.is-visible{ transform:none; }
.mobile-cta-bar .btn{ width:100%; justify-content:center; }
@media (max-width:640px){ .mobile-cta-bar{ display:block; } .nav-cta .btn-primary{ display:none; } }
.nav.is-open ~ .mobile-cta-bar{ transform: translateY(100%); }

/* ================= PRICING ================= */
.support-col.is-commercial li svg{ color: var(--k-ai); }
.faq-a-inner a, .dl-note a{ color: var(--text-1); text-decoration:underline; text-underline-offset:3px; text-decoration-color: var(--border); }
.faq-a-inner a:hover, .dl-note a:hover{ text-decoration-color: var(--text-1); }
.price-block{ display:flex; align-items:baseline; gap:9px; margin-top:20px; }
.price-amount{ font-family:var(--font-sans); font-weight:800; font-size:36px; color:var(--text-1); }
.price-unit{ font-family:var(--font-mono); font-size:12px; letter-spacing:0.06em; text-transform:uppercase; color:var(--text-3); }

/* ================= HOVER SPOTLIGHT (cards) ================= */
.spot{ position:relative; overflow:hidden; }
.spot::before{
  content:""; position:absolute; inset:0; opacity:0; pointer-events:none;
  background: radial-gradient(240px circle at var(--mx,50%) var(--my,50%), rgba(255,255,255,0.07), transparent 72%);
  transition: opacity .35s var(--ease);
}
.spot:hover::before, .spot.is-tapped::before{ opacity:1; }
.spot > *{ position:relative; z-index:1; }

/* ================= CURSOR (desktop, fine pointer only — touch keeps native) ================= */
@media (hover:hover) and (pointer:fine){
  html{
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='2' fill='%239aa4b2'/%3E%3Cpath d='M12 2v5M12 17v5M2 12h5M17 12h5' stroke='%239aa4b2' stroke-width='1.4' stroke-linecap='round' opacity='0.8'/%3E%3C/svg%3E") 12 12, auto;
  }
  a, button{
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Crect x='7' y='7' width='10' height='10' rx='2' fill='%2334d399' stroke='%2308090d' stroke-width='1.5'/%3E%3Cpath d='M17 12h5M12 2v5M12 17v5M2 12h5' stroke='%2334d399' stroke-width='1.4' stroke-linecap='round' opacity='0.55'/%3E%3C/svg%3E") 12 12, pointer;
  }
}

/* download notes + hero platform line */
.hero-plat{ margin:28px 0 0; font-family:var(--font-mono); font-size:12px; letter-spacing:.04em; color:var(--text-2); }
.install-notes{ list-style:none; margin:28px 0 0; padding:0; max-width:760px; display:grid; gap:10px; }
.install-notes li{ border-left:2px solid var(--border); padding:2px 0 2px 14px; color:var(--text-2); font-size:14px; line-height:1.55; }
.install-notes b{ color:var(--text-1); font-weight:600; }
:focus-visible{ outline:2px solid var(--k-action); outline-offset:3px; }


/* ---- utilities (replace former inline style attributes so the CSP can forbid inline styles) ---- */
.eb-trigger{ --dot:var(--k-trigger) !important; }
.eb-action{ --dot:var(--k-action) !important; }
.eb-logic{ --dot:var(--k-logic) !important; }
.eb-utility{ --dot:var(--k-utility) !important; }
.eb-ai{ --dot:var(--k-ai) !important; }
.bc-trigger{ border-color:var(--k-trigger) !important; }
.bc-action{ border-color:var(--k-action) !important; }
.bc-logic{ border-color:var(--k-logic) !important; }
.bc-ai{ border-color:var(--k-ai) !important; }
.bc-utility{ border-color:var(--k-utility) !important; }
.mt-14{ margin-top:14px !important; } .mt-18{ margin-top:18px !important; } .mt-22{ margin-top:22px !important; }
.mt-24{ margin-top:24px !important; } .mt-26{ margin-top:26px !important; } .mt-28{ margin-top:28px !important; }
.mt-32{ margin-top:32px !important; } .mt-36{ margin-top:36px !important; }
.mb-0{ margin-bottom:0 !important; }
.pt-160{ padding-top:160px !important; }
.pt-200{ padding-top:200px !important; } .pb-140{ padding-bottom:140px !important; }
.u-center{ text-align:center !important; }
.u-mx-auto{ margin-left:auto !important; margin-right:auto !important; }
.u-jc-center{ justify-content:center !important; }
.u-text-1{ color:var(--text-1) !important; }
.note-narrow{ color:var(--text-2) !important; max-width:520px !important; margin:14px auto 0 !important; }
.roadmap-label{ font-family:var(--font-mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--text-3); }
.roadmap-label-gap{ margin-top:22px; display:block; }

@media print{
  .nav, .mobile-cta-bar, .ticker-wrap, .ascii-feature, .ascii-ambient, .hero-visual, .demo-shell{ display:none !important; }
  body{ background:#fff; color:#000; }
  .js .reveal{ opacity:1 !important; transform:none !important; }
}


/* ================= AI AGENTS (MCP) ================= */
.hero-new{ display:flex; flex-wrap:wrap; align-items:center; gap:2px 12px; margin-top:22px; }
.hero-new-tag{ font-family:var(--font-mono); font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--text-1); border:1px solid var(--text-3); padding:3px 8px; border-radius:2px; }
.hero-new a{ display:inline-flex; align-items:center; min-height:44px; color:var(--text-1); font-size:15px; text-decoration:underline; text-decoration-color:var(--border); text-underline-offset:4px; }
.hero-new a:hover{ text-decoration-color:var(--text-1); }

#agents .section-head{ max-width:680px; }
#agents .section-head p{ max-width:600px; }
#agents code{ font-family:var(--font-mono); font-size:.92em; color:var(--text-1); overflow-wrap:anywhere; }
.agent-modes{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.agent-mode{ background:var(--surface-1); border:1px solid var(--border); border-radius:var(--radius-m); padding:26px; display:flex; flex-direction:column; gap:12px; }
.agent-mode h3{ font-size:19px; }
.agent-mode p{ font-size:15px; color:var(--text-2); line-height:1.65; }
.agent-mode .spec{ font-family:var(--font-mono); font-size:12.5px; color:var(--text-3); margin-top:auto; padding-top:14px; border-top:1px solid var(--border-soft); }
.agent-block{ margin-top:56px; }
.agent-label{ display:block; font-family:var(--font-mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--text-3); }
.tool-list{ margin:14px 0 0; border-top:1px solid var(--border-soft); }
.tool-row{ display:grid; grid-template-columns:210px 1fr; gap:8px 28px; padding:18px 0; border-bottom:1px solid var(--border-soft); }
.tool-row dt{ font-weight:600; font-size:15px; }
.tool-row dt small{ display:block; margin-top:4px; font-family:var(--font-mono); font-size:12px; font-weight:400; color:var(--text-3); }
.tool-row dd{ margin:0; display:flex; flex-wrap:wrap; gap:8px; }
.tool-row code{ padding:4px 8px; background:var(--surface-2); border:1px solid var(--border); border-radius:2px; font-size:13px; }
.guard-list{ display:grid; grid-template-columns:1fr 1fr; gap:1px; margin-top:14px; background:var(--border); border:1px solid var(--border); border-radius:var(--radius-m); overflow:hidden; }
.guard-list li{ background:var(--surface-1); padding:22px 24px; font-size:15px; line-height:1.65; color:var(--text-2); }
.guard-list b{ display:block; margin-bottom:6px; font-size:16px; color:var(--text-1); }
.codebox{ margin-top:14px; background:var(--surface-1); border:1px solid var(--border); border-radius:var(--radius-m); }
.codebox-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:2px 4px 2px 14px; border-bottom:1px solid var(--border); font-family:var(--font-mono); font-size:12px; color:var(--text-3); }
.code-scroll{ margin:0; padding:14px; font-family:var(--font-mono); font-size:13px; line-height:1.7; white-space:pre-wrap; overflow-wrap:anywhere; color:var(--text-1); }
.code-scroll code{ font-size:inherit; }
.copy-btn{ min-height:44px; min-width:76px; padding:0 14px; font:600 13px var(--font-mono); color:var(--text-1); background:none; border:1px solid transparent; border-radius:var(--radius-s); }
.copy-btn:hover{ background:var(--surface-3); border-color:var(--border); }
.copy-btn.is-done{ color:var(--k-logic); }
.agent-note{ margin-top:18px; max-width:70ch; font-size:15px; line-height:1.7; color:var(--text-2); }
.agent-note a{ color:var(--text-1); text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--border); }
.agent-note a:hover{ text-decoration-color:var(--text-1); }
.agent-cta{ display:flex; flex-wrap:wrap; gap:14px; margin-top:32px; }
@media (max-width:720px){
  .agent-modes, .guard-list{ grid-template-columns:1fr; }
  .tool-row{ grid-template-columns:1fr; }
  .agent-block{ margin-top:44px; }
}
@media (max-width:640px){
  .agent-cta .btn{ flex:1 1 100%; justify-content:center; }
  .agent-mode, .guard-list li{ padding:20px; }
}

/* Eight nav links plus two buttons (the primary one reads "Get Aerini for <OS>") need about 1190px of row; below
   1341px of viewport they do not fit, so tighten the links and drop the secondary "View source" button there (it
   stays in the hero and footer). */
@media (min-width:1041px) and (max-width:1340px){
  .nav-links{ gap:20px; }
  .nav-cta .btn-ghost{ display:none; }
}
@media (min-width:1041px) and (max-width:1100px){
  .nav-links{ gap:16px; }
}

/* ================= DEVICE POLISH ================= */
html{ background:var(--ink); -webkit-text-size-adjust:100%; text-size-adjust:100%; }
html.nav-open{ overflow:hidden; }
a, button, summary{ touch-action:manipulation; }
.wrap{
  padding-left:max(clamp(20px, 5vw, 32px), env(safe-area-inset-left, 0px));
  padding-right:max(clamp(20px, 5vw, 32px), env(safe-area-inset-right, 0px));
}
.mobile-cta-bar{
  padding-left:max(16px, env(safe-area-inset-left, 0px));
  padding-right:max(16px, env(safe-area-inset-right, 0px));
}
@media (pointer:coarse), (max-width:900px){
  .brand, .foot-brand{ min-height:44px; }
  .foot-col a{ display:flex; align-items:center; min-height:44px; padding:0; }
  .platform-card a{ display:inline-flex; align-items:center; min-height:44px; }
}
@media (max-width:640px){
  .cap-card p, .poll-card p, .license-card p, .ladder-step p, .roadmap-item, .support-col li, .reward-note,
  .install-notes li, .dl-note, .foot-desc, .foot-col a, .faq-a-inner, .why-row p, .os-copy p{ font-size:15px; }
  .badge{ font-size:11.5px; }
  .foot-bottom{ font-size:12px; }
}
@media (max-height:480px) and (orientation:landscape){
  .hero{ padding-top:104px; }
}

.cap-group-label{ font-family:var(--font-mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--text-3); margin:0 0 14px; }
.cap-grid + .cap-group-label{ margin-top:48px; }
.cap-card .spec{ font-family:var(--font-mono); font-size:12px; line-height:1.55; color:var(--text-3); margin-top:auto; padding-top:12px; border-top:1px solid var(--border-soft); }
.first-cta{ display:flex; flex-wrap:wrap; gap:12px; margin-top:32px; }
.first-next{ margin-top:48px; }
.first-next .cap-card{ min-height:0; }
.cap-links{ list-style:none; margin:0; padding:0; display:grid; gap:8px; font-size:13.5px; line-height:1.5; }
.cap-links a{ color:var(--text-1); text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--border); }
.cap-links a:hover{ text-decoration-color:var(--text-1); }
.agent-more{ margin-top:56px; border-top:1px solid var(--border); padding-top:20px; }
.agent-more summary{ cursor:pointer; font-family:var(--font-mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--text-2); }
.agent-more summary:hover{ color:var(--text-1); }
.agent-more .agent-block{ margin-top:28px; }