/* HawkEye website, in the desktop app's own look (desktop_app/assets/style.css):
   black, sharp corners, Bahnschrift headlines, mono labels, and the app's
   titlebar, ticker and sidebar, so the app feels familiar after the site.
   Text colors stay at or above WCAG AA contrast (4.5:1) on every
   background they sit on. */
:root{
  color-scheme:dark;
  --bg:#000000; --bg2:#0A0A0A; --side:#050505;
  --surface:rgba(255,255,255,0.035); --surface2:rgba(255,255,255,0.06);
  --line:rgba(255,255,255,0.08); --border:rgba(255,255,255,0.12); --border2:rgba(255,255,255,0.20);
  --accent:#7C3AED; --accent2:#9D5CFF; --accent3:#00C2FF; --accent-hi:#B794FF;
  --accent-rgb:124,58,237; --accent-hi-rgb:183,148,255;
  --text:#FFFFFF; --text2:#ADADAD; --text3:#8C8C96; --label:#A8A8B0;
  --green:#14F195; --red:#FF4757; --gold:#F5C518;
  /* System faces only, as in the app: nothing loaded from a font service. */
  --font:'Segoe UI Variable Text','Segoe UI',system-ui,-apple-system,'Ubuntu',sans-serif;
  --display:'Bahnschrift','Segoe UI Variable Display','Segoe UI',system-ui,sans-serif;
  --mono:'JetBrains Mono','Cascadia Mono','Consolas','Ubuntu Mono',monospace;
  --ease-out:cubic-bezier(0.23,1,0.32,1);
  --ease-drawer:cubic-bezier(0.32,0.72,0,1);
  --tb:36px; --tk:32px; --top:68px; --side-w:220px;
}
*,*::before,*::after{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth; scroll-padding-top:calc(var(--top) + 20px);}
body{font-family:var(--font); background:var(--bg); color:var(--text); line-height:1.55; -webkit-font-smoothing:antialiased; overflow-x:hidden;}
a{color:inherit; text-decoration:none;}
img,svg{max-width:100%; display:block;}
ul,ol{list-style:none;}
button{font:inherit; color:inherit; cursor:pointer; background:none; border:0;}
:focus-visible{outline:2px solid var(--accent-hi); outline-offset:2px;}
main:focus{outline:none;}
main a:not([class]){color:var(--accent-hi); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:0.2em;}
main a:not([class]):hover{color:var(--text);}
::selection{background:rgba(var(--accent-rgb),0.45);}
.visually-hidden{position:absolute !important; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;}
.skip-link{position:fixed; left:16px; top:-80px; z-index:3000; padding:10px 18px; background:#fff; color:#000; font-weight:800;}
.skip-link:focus{top:8px;}
@keyframes dot-pulse{0%,100%{opacity:1;}50%{opacity:.5;}}
@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;}
}

/* TITLEBAR: the app's frameless titlebar */
.titlebar{
  position:sticky; top:0; z-index:1000; height:var(--tb);
  display:flex; align-items:center; gap:14px; padding:0 6px 0 14px;
  background:#000; border-bottom:1px solid var(--border);
}
.tb-title{display:flex; align-items:center; gap:8px; font-size:10.5px; font-weight:700; letter-spacing:2px; color:var(--text3); white-space:nowrap; transition:color 150ms ease;}
.tb-title:hover{color:var(--text);}
.tb-title img{width:22px; height:22px; object-fit:contain;}
.tb-status{display:flex; align-items:center; gap:6px; font-family:var(--mono); font-size:10px; color:var(--text3); white-space:nowrap;}
.tb-dot{width:6px; height:6px; border-radius:50%; background:var(--green); box-shadow:0 0 6px var(--green); animation:dot-pulse 1.8s ease-in-out infinite;}
.tb-sp{flex:1;}
.tb-cta{display:inline-flex; align-items:center; gap:7px; height:26px; padding:0 14px; background:#fff; color:#000; border:1px solid #fff;
  font-size:12px; font-weight:800; white-space:nowrap; transition:box-shadow 250ms var(--ease-out), transform 120ms var(--ease-out);}
.tb-cta svg{width:14px; height:14px;}
.tb-cta:hover{box-shadow:0 0 22px rgba(var(--accent-rgb),0.45);}
.tb-cta:active{transform:scale(.97);}
.tb-cta[aria-current="page"]{box-shadow:inset 0 -3px 0 var(--accent2);}
.menu-btn{display:none; width:36px; height:28px; align-items:center; justify-content:center; color:var(--text2); border:1px solid var(--border);}
.menu-btn:hover{color:#fff; border-color:var(--border2);}
.menu-btn svg{width:18px; height:18px;}
.menu-btn[aria-expanded="true"] .i-open, .menu-btn[aria-expanded="false"] .i-close{display:none;}

/* TICKER: the app's strip, carrying the platforms instead of prices */
.ticker{position:sticky; top:var(--tb); z-index:990; height:var(--tk); display:flex; overflow:hidden; background:#000; border-bottom:1px solid var(--border);}
.ticker-track{display:flex; align-items:center; flex:none; animation:ticker 80s linear infinite; will-change:transform;}
.ticker-set{display:flex; align-items:center; gap:5px; padding-right:5px; flex:none;}
.ticker-track .ticker-set:first-child{padding-left:8px;}
@keyframes ticker{to{transform:translate3d(-50%,0,0);}}
.ticker:hover .ticker-track, .ticker:focus-within .ticker-track, .still .ticker-track{animation-play-state:paused;}
.tick-pill{display:inline-flex; align-items:center; gap:6px; padding:3px 10px; flex:none;
  font:700 10px/1.4 var(--mono); border:1px solid rgba(255,255,255,0.07); background:rgba(255,255,255,0.03); white-space:nowrap;}
.tick-pill::before{content:''; width:6px; height:6px; background:var(--c);}
.tick-pill b{color:var(--text); font-weight:800; letter-spacing:.3px;}
.tick-pill i{font-style:normal; color:var(--text3); letter-spacing:.6px;}
.motion-btn{position:absolute; right:0; top:0; bottom:0; z-index:2; width:40px; display:flex; align-items:center; justify-content:center;
  background:#000; border-left:1px solid var(--border); color:var(--text3); transition:color 150ms ease;}
.motion-btn::before{content:''; position:absolute; right:100%; top:0; bottom:0; width:40px; pointer-events:none; background:linear-gradient(90deg, transparent, #000);}
.motion-btn:hover{color:#fff;}
.motion-btn:focus-visible{outline-offset:-4px;}   /* the strip clips anything outside it */
.motion-btn svg{width:14px; height:14px;}
.motion-btn[aria-pressed="true"] .i-pause, .motion-btn[aria-pressed="false"] .i-play{display:none;}
.motion-btn[aria-pressed="true"]{color:var(--accent-hi);}

/* SHELL: sidebar + page */
.shell{display:grid; grid-template-columns:var(--side-w) minmax(0,1fr); align-items:start;}
.page{min-width:0; min-height:calc(100vh - var(--top)); display:flex; flex-direction:column; container:page / inline-size;}
main{flex:1; display:block;}

/* SIDEBAR: the app's sidebar */
.sidebar{
  position:sticky; top:var(--top); height:calc(100vh - var(--top)); overflow-y:auto; overflow-x:hidden;
  display:flex; flex-direction:column; padding:16px 14px; background:var(--side); border-right:1px solid var(--line);
  scrollbar-width:thin; scrollbar-color:rgba(255,255,255,0.18) transparent;
}
.brand{display:flex; align-items:center; gap:10px; padding:6px 6px 16px;}
.brand img{width:38px; height:38px; object-fit:contain; flex:none;}
.brand-text{display:block; font-weight:800; font-size:14px; letter-spacing:2px;}
.brand-sub{display:block; font-family:var(--mono); font-size:9px; color:var(--text3); letter-spacing:1.5px;}
.status-pill{display:flex; align-items:center; gap:8px; padding:9px 12px; margin-bottom:14px; font-size:11px; color:var(--text2);
  background:rgba(255,255,255,0.04); border:1px solid var(--line);}
.status-dot{width:7px; height:7px; border-radius:50%; flex:none; background:var(--green); box-shadow:0 0 8px var(--green); animation:dot-pulse 1.8s ease-in-out infinite;}
.side-nav{display:flex; flex-direction:column; gap:3px;}
.nav-item{position:relative; display:flex; align-items:center; gap:11px; padding:10px 12px; font-size:13px; font-weight:600; color:var(--text3);
  transition:color 150ms ease, background-color 150ms ease;}
.nav-item svg{width:16px; height:16px; flex:none; opacity:.7;}
.nav-item:hover{background:rgba(255,255,255,0.05); color:var(--text2);}
.nav-item[aria-current="page"]{background:rgba(255,255,255,0.06); color:#fff; box-shadow:inset 3px 0 0 var(--accent2);}
.nav-item[aria-current="page"] svg{opacity:1;}
.nav-item.discord{color:#8C9EFF;}
.nav-item.discord:hover{color:#B3C0FF;}
.nav-section{font-family:var(--mono); font-size:9.5px; letter-spacing:1.5px; text-transform:uppercase; color:var(--text3); margin:14px 12px 5px;}
.side-foot{margin-top:auto; padding-top:18px;}
.side-foot .btn{width:100%;}

/* BUTTONS: the app's .btn (ghost) and .btn-premium (white) */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px; height:44px; padding:0 24px; white-space:nowrap;
  font-family:var(--font); font-weight:700; font-size:13.5px; color:#fff; background:transparent; border:1px solid var(--border2);
  transition:transform 120ms var(--ease-out), color 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
}
.btn svg{width:16px; height:16px; flex:none;}
.btn:hover{border-color:#fff; box-shadow:0 0 0 1px rgba(255,255,255,0.5), 0 0 18px rgba(var(--accent-rgb),0.22);}
.btn:active{transform:scale(.97);}
.btn:disabled{opacity:.5; cursor:default; transform:none;}
.btn-primary{background:#fff; border-color:#fff; color:#000; font-weight:800;}
.btn-primary:hover{box-shadow:0 0 22px rgba(var(--accent-rgb),0.4);}
.btn-sm{height:34px; padding:0 16px; font-size:12px;}
.btn-block{width:100%; height:auto; min-height:44px; padding:11px 18px; white-space:normal; text-align:center; line-height:1.35;}
.btn-row{display:flex; flex-wrap:wrap; gap:12px; margin-top:24px;}

/* TYPE: the app's eyebrow, headings and section heads */
.eyebrow{display:inline-flex; align-items:baseline; gap:10px; margin-bottom:14px;
  font-size:11px; font-weight:700; letter-spacing:1.6px; text-transform:uppercase; color:var(--label);}
/* on the first line's baseline, lifted to the capitals' middle: stays beside the first line when a label wraps */
.eyebrow::before{content:''; width:18px; height:2px; background:var(--accent2); flex:none; position:relative; top:-0.32em;}
.grad{color:var(--accent-hi);}
h1,h2,.price-amt,.footer-cta h2{font-family:var(--display); font-stretch:87.5%; font-weight:700;}
.section{position:relative; padding:88px 0;}
.section-alt{background:var(--bg2); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.section-tight{padding-top:8px;}
.section-head{max-width:700px; margin-bottom:40px;}
.section-head h2{font-size:clamp(26px, 2.6vw, 34px); line-height:1.1; letter-spacing:-0.2px; margin-bottom:12px;}
.section-head p{color:var(--text2); font-size:15px; line-height:1.65;}
.fineprint{margin-top:18px; font-size:12.5px; color:var(--text3); line-height:1.6; max-width:820px;}
.more-link{margin-top:28px; font-size:14px; font-weight:600;}
.container{width:100%; max-width:1320px; margin:0 auto; padding:0 44px;}
.split{display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center;}
.split h2{font-size:clamp(26px, 2.6vw, 34px); line-height:1.1; letter-spacing:-0.2px; margin-bottom:14px;}
.split p{color:var(--text2); line-height:1.65;}
.split h3{font-size:16px; font-weight:700; margin-bottom:14px;}
.split.top{align-items:start;}
.split.after{margin-top:40px; align-items:start;}
.stack-top{margin-top:28px;}

/* PAGE HERO: the app's page-hero (every page but Home) */
.page-hero{position:relative; padding:72px 0 56px; overflow:hidden;
  background:radial-gradient(ellipse 760px 460px at 82% 0%, rgba(var(--accent-rgb),0.18) 0%, transparent 62%);}
.page-hero::after{content:''; position:absolute; width:320px; height:200px; right:6%; bottom:-60px; border-radius:50%; pointer-events:none;
  background:rgba(0,194,255,0.07); filter:blur(60px);}
.page-hero .container{position:relative; z-index:1;}
.page-hero h1{font-size:clamp(34px, 3.8vw, 48px); line-height:1.06; letter-spacing:-0.3px; max-width:860px; margin-bottom:14px;}
.page-hero h1 .grad{display:block;}
.page-hero .lead{color:var(--text2); max-width:640px; font-size:15.5px; line-height:1.65;}

/* GRID + CARDS: the app's glass tiles */
.grid{--min:260px; display:grid; gap:16px; grid-template-columns:repeat(auto-fit, minmax(min(100%, var(--min)), 1fr));}
.card{position:relative; padding:24px; background:linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.01)); border:1px solid var(--line);}
.card h2{font-size:21px; line-height:1.15; margin-bottom:8px;}
.card h3{font-size:15.5px; font-weight:700; margin-bottom:8px;}
.card p{font-size:14px; color:var(--text2); line-height:1.6;}
.card .checks{margin-top:16px;}
.card .more-link{margin-top:18px; font-size:13.5px;}
.icon-badge{width:40px; height:40px; display:flex; align-items:center; justify-content:center; flex:none; margin-bottom:16px;
  background:rgba(255,255,255,0.05); border:1px solid var(--border2);}
.icon-badge svg{width:19px; height:19px; color:var(--accent2);}
.plan-tag{display:inline-block; margin-bottom:12px; padding:3px 8px; font:700 10px/1.4 var(--mono); letter-spacing:.8px; text-transform:uppercase;
  color:var(--accent-hi); border:1px solid rgba(var(--accent-hi-rgb),0.4); background:rgba(var(--accent-hi-rgb),0.06);}
.checks{display:flex; flex-direction:column; gap:10px;}
.checks li{position:relative; padding-left:28px; font-size:14px; color:var(--text2); line-height:1.55;}
.checks li::before{
  content:""; position:absolute; left:0; top:2px; width:17px; height:17px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2314F195' stroke-width='2.8' stroke-linecap='square' stroke-linejoin='miter'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E") center/contain no-repeat;
}
.checks li strong{color:var(--text);}
.checks.big li{font-size:15px;}

/* PLATFORMS */
.platforms{display:flex; flex-wrap:wrap; gap:8px;}
.platforms li{display:inline-flex; align-items:center; gap:9px; padding:9px 14px; font-weight:600; font-size:13.5px;
  background:var(--surface); border:1px solid var(--line);}
.platforms li::before{content:""; width:8px; height:8px; background:var(--c);}
/* The Terminal page's lineup: the app's launch tiles, minus the Launch button */
.term-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap:14px;}
.t-card{--brand:124,58,237; position:relative; display:flex; align-items:center; gap:12px; padding:16px;
  background:linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.01)); border:1px solid var(--line);}
.t-card::after{content:''; position:absolute; left:0; right:0; top:-1px; height:1px; background:linear-gradient(90deg, rgba(var(--brand),0), rgba(var(--brand),.9) 50%, rgba(var(--brand),0));}
.t-icon{width:38px; height:38px; flex:none; display:flex; align-items:center; justify-content:center;
  font:900 15px var(--display); color:rgb(var(--brand)); background:rgba(var(--brand),.14); border:1px solid rgba(var(--brand),.32);}
.t-id{min-width:0; display:flex; flex-direction:column; gap:6px;}
.t-name{font-size:14px; font-weight:700; color:var(--text);}
.t-meta{display:flex; flex-wrap:wrap; align-items:center; gap:4px;}
.t-tag{font:700 9px/1.4 var(--mono); letter-spacing:.8px; padding:2px 6px; color:var(--text3); border:1px solid rgba(255,255,255,.12);}
.t-chain{font:600 9px/1.4 var(--mono); color:var(--text3); padding:2px 5px; background:rgba(255,255,255,.05);}

/* PROSE (docs, legal, about) */
.prose{max-width:760px;}
.prose > :first-child{margin-top:0;}
.prose h2{font-size:25px; line-height:1.2; letter-spacing:-0.1px; margin:46px 0 12px;}
.prose h3{font-size:16.5px; font-weight:700; margin:26px 0 8px;}
.prose p, .prose li{color:var(--text2); font-size:15px; line-height:1.75;}
.prose p{margin-bottom:12px;}
.prose ul, .prose ol{padding-left:22px; margin:0 0 16px;}
.prose ul{list-style:square;}
.prose ol{list-style:decimal;}
.prose li{margin-bottom:6px; padding-left:4px;}
.prose li::marker{color:var(--accent2);}
.prose strong{color:var(--text);}
.prose code{font-family:var(--mono); font-size:13px; color:#E8E8EE; background:#141418; padding:2px 7px;}
.prose pre{background:var(--bg2); border:1px solid var(--border2); border-left:3px solid var(--accent2); padding:14px 16px; margin:0 0 16px; white-space:pre-wrap; word-break:break-all;}
.prose pre code{background:none; padding:0;}
.callout{border:1px solid rgba(var(--accent-hi-rgb),0.35); border-left:3px solid var(--accent-hi); background:#0B0B0E; padding:22px 24px; margin:0 0 36px;}
.prose .callout h2{margin-top:0;}
.doc-grid{display:grid; grid-template-columns:220px minmax(0,1fr); gap:48px; align-items:start;}
/* pinned beside the text; a long list scrolls inside itself, so every link can take focus in view */
.toc{position:sticky; top:calc(var(--top) + 24px); max-height:calc(100vh - var(--top) - 48px); overflow-y:auto; overscroll-behavior:contain;
  font-size:13px; border-left:1px solid var(--line); scrollbar-width:thin; scrollbar-color:rgba(255,255,255,0.18) transparent;}
main .toc a:focus-visible{outline-offset:-2px;}
.toc p{font-family:var(--mono); font-size:9.5px; letter-spacing:1.5px; text-transform:uppercase; color:var(--text3); margin:0 0 8px 14px;}
main .toc a{display:block; padding:7px 14px; margin-left:-1px; color:var(--text3); text-decoration:none; border-left:1px solid transparent;
  transition:color 150ms ease, border-color 150ms ease, background-color 150ms ease;}
main .toc a:hover{color:var(--text); background:rgba(255,255,255,0.04); border-left-color:var(--accent2);}
details.notes{margin-top:28px; border:1px solid var(--line); background:var(--surface);}
details.notes summary{display:flex; align-items:center; gap:10px; cursor:pointer; padding:16px 20px; font-weight:700; list-style:none;}
details.notes summary::-webkit-details-marker{display:none;}
details.notes summary:hover{background:rgba(255,255,255,0.03);}
details.notes summary svg{width:17px; height:17px; color:var(--accent2); transition:transform 200ms var(--ease-out);}
details.notes[open] summary svg{transform:rotate(90deg);}
details.notes .prose{padding:0 20px 8px;}

/* TABLES */
.data-table{width:100%; border-collapse:collapse; table-layout:fixed; font-size:14px;}
.data-table caption{text-align:left; font-size:12.5px; color:var(--text3); padding-bottom:10px;}
.data-table th, .data-table td{padding:13px 14px; text-align:left; vertical-align:top; border-bottom:1px solid var(--line); line-height:1.5;}
.data-table thead th{font-family:var(--mono); font-size:10.5px; font-weight:700; letter-spacing:1.2px; text-transform:uppercase; color:var(--text3); border-bottom-color:var(--border2);}
.data-table thead th:first-child{width:36%;}
.data-table tbody th{font-weight:600; color:var(--text);}
.data-table tbody tr:hover{background:rgba(255,255,255,0.02);}
.data-table td{color:var(--text2);}
.data-table svg{width:18px; height:18px;}
.data-table .yes{color:var(--green);}
.data-table .no{color:var(--text3);}

/* PRICING: the app's plan cards (Settings > Subscription, Marketplace) */
.price-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; align-items:stretch;}
.price-card{position:relative; display:flex; flex-direction:column; padding:26px; background:rgba(255,255,255,0.03); border:1px solid var(--line);}
.price-card.featured{border-color:rgba(var(--accent-hi-rgb),0.6); background:linear-gradient(180deg, rgba(var(--accent-hi-rgb),0.08), rgba(var(--accent-hi-rgb),0.015));}
.price-flag{position:absolute; top:-1px; right:-1px; padding:4px 9px; font-size:9.5px; font-weight:800; letter-spacing:1px; text-transform:uppercase; color:#07070B; background:#fff;}
.price-tier{font-size:16px; font-weight:700;}
.price-amt{font-size:42px; line-height:1.05; margin:12px 0 4px; color:var(--text); font-variant-numeric:tabular-nums;}
.card .price-amt{font-size:34px; margin:6px 0 8px;}
.price-amt span{font-family:var(--font); font-stretch:100%; font-size:13px; color:var(--text3); font-weight:600; margin-left:2px;}
.price-sub{font-size:12.5px; color:var(--text3); font-variant-numeric:tabular-nums;}
.price-alt{font-size:12.5px; color:var(--text3); margin-top:2px;}
.plan-desc{font-size:13.5px; color:var(--text2); margin-top:14px; line-height:1.55;}
.price-card .checks{margin:20px 0 24px;}
.price-card .btn{margin-top:auto;}
.plan-terms{font-size:11.5px; color:var(--text3); margin-top:12px; line-height:1.55;}
.pack{display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; margin-top:16px;}
.pack h3{margin-bottom:4px;}
.pack .price-amt{font-size:30px; margin:0;}
.pack > div:first-child{flex:1 1 320px; min-width:0;}
.pack .plan-tag{margin:2px 0 6px;}
/* screenshots of the app on Home (build_site.py SHOTS): shown once their PNGs are in assets/img */
.shots{display:grid; gap:16px; grid-template-columns:repeat(auto-fit, minmax(min(100%, 420px), 1fr));}
.shot{margin:0; border:1px solid var(--line); background:var(--surface);}
.shot img{display:block; width:100%; height:auto;}
.shot figcaption{padding:10px 14px; font-size:13px; color:var(--text2);}

/* FOOTER */
.site-footer{position:relative; border-top:1px solid var(--line); background:var(--bg); padding-top:48px;}
/* the closing call to action, in the app's Get Started panel */
.footer-cta{display:flex; align-items:center; justify-content:space-between; gap:24px 40px; flex-wrap:wrap; padding:30px 32px; margin-bottom:48px;
  border:1px solid var(--border2); background:linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.01)), radial-gradient(ellipse 520px 220px at 100% 0%, rgba(var(--accent-rgb),0.16), transparent 70%);}
.footer-cta h2{font-size:clamp(24px, 2.4vw, 30px); line-height:1.1; margin-bottom:6px;}
.footer-cta p{color:var(--text2); font-size:14.5px;}
.footer-bottom{display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap:24px 48px; padding-bottom:36px;}
.footer-brand{display:flex; align-items:center; gap:10px; font-size:11.5px; font-weight:800; letter-spacing:2px;}
.footer-brand img{width:28px; height:28px; object-fit:contain;}
.footer-nav{display:flex; flex-direction:column; gap:12px;}
.footer-links{display:flex; gap:6px 26px; flex-wrap:wrap; font-size:13.5px; color:var(--text2);}
.footer-links a{display:inline-block; padding:3px 0; transition:color 150ms ease;}
.footer-links a:hover, .footer-links a[aria-current="page"]{color:var(--text);}
.footer-links.legal{font-size:12.5px; color:var(--text3);}
/* the app's status bar, carrying the site's fine print */
.footer-legal{border-top:1px solid var(--border); padding:10px 44px 12px; font-family:var(--mono); font-size:11px; line-height:1.6; color:var(--text3);}

/* HOME HERO: the app's Home hero
   z-index: 0 gradient (on .hero), 1 fog, 2 WebGL canvas, 5 content.
   Layers 0 to 2 are pointer-events:none, so nothing decorative can take a
   click meant for the content. */
.hero{position:relative; padding:84px 0 76px; overflow:hidden;
  background:radial-gradient(ellipse 760px 560px at 78% 8%, rgba(var(--accent-rgb),0.20) 0%, transparent 60%), var(--bg);}
#hero-fog{position:absolute; inset:0; z-index:1; pointer-events:none; overflow:hidden;}
#hero-fog span{position:absolute; border-radius:50%; filter:blur(50px); opacity:0.4;}   /* static, as in the app: a drifting blur costs every frame */
#hero-fog span:nth-child(1){width:320px; height:200px; background:rgba(var(--accent-rgb),0.3); left:-4%; top:2%;}
#hero-fog span:nth-child(2){width:280px; height:180px; background:rgba(0,194,255,0.14); right:-4%; top:34%;}
#hero-fog span:nth-child(3){width:240px; height:160px; background:rgba(20,241,149,0.08); left:38%; bottom:-14%;}
#hero-webgl{position:absolute; inset:0; z-index:2; pointer-events:none;}
#hero-webgl canvas{display:block; width:100% !important; height:100% !important;}
.hero-grid{position:relative; z-index:5; display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:48px; align-items:center;}
.hero-copy h1{font-size:clamp(40px, 4.6vw, 62px); line-height:1.03; letter-spacing:-0.4px; margin:2px 0 18px;}
.hero-copy h1 .grad{display:block;}
.hero-copy > p{font-size:15.5px; color:var(--text2); max-width:540px; line-height:1.65; margin-bottom:22px;}
.hero-features{display:flex; flex-wrap:wrap; gap:12px 20px; margin-bottom:28px;}
.hero-features li{display:flex; align-items:center; gap:7px; font-size:12.5px; font-weight:600; color:var(--text2);}
.hero-features svg{width:15px; height:15px; color:var(--accent2); flex:none;}
.hero-ctas{display:flex; gap:12px; margin-bottom:34px; flex-wrap:wrap;}
.hero-stats{display:flex; flex-wrap:wrap; gap:16px 36px;}
.hero-stats b{display:block; font:800 22px/1.2 var(--mono); color:var(--text);}
.hero-stats span{display:block; font-size:11.5px; color:var(--text3); margin-top:2px;}

/* APP ILLUSTRATION (Home hero): the HawkEye window */
.app-mock{position:relative; z-index:5; background:#000; border:1px solid var(--border2);
  box-shadow:0 40px 90px rgba(0,0,0,0.7), 0 0 60px -20px rgba(var(--accent-rgb),0.45); overflow:hidden;}
.am-bar{display:flex; align-items:center; justify-content:space-between; height:32px; padding:0 10px 0 12px; border-bottom:1px solid var(--border);}
.am-brand{display:flex; align-items:center; gap:7px; font-size:9.5px; font-weight:700; letter-spacing:1.8px; color:var(--text3);}
.am-brand img{width:15px; height:15px;}
.am-live{display:flex; align-items:center; gap:5px; margin-left:10px; font:400 9px var(--mono); letter-spacing:0; color:var(--text3);}
.am-live::before{content:''; width:5px; height:5px; border-radius:50%; background:var(--green); box-shadow:0 0 5px var(--green);}
.am-dots{display:flex; gap:12px; color:var(--text3);}
.am-dots svg{width:10px; height:10px;}
.am-body{display:grid; grid-template-columns:150px minmax(0,1fr); min-height:340px;}
.am-tabs{display:flex; flex-direction:column; gap:2px; padding:10px 8px; background:var(--side); border-right:1px solid var(--line);}
.am-tab{display:flex; align-items:center; gap:8px; padding:7px 9px; font-size:11.5px; font-weight:600; color:var(--text3);}
.am-tab::before{content:""; width:7px; height:7px; background:var(--c); flex:none;}
.am-tab.on{background:rgba(255,255,255,0.06); color:var(--text); box-shadow:inset 2px 0 0 var(--accent2);}
.am-more{padding:6px 9px; font:400 10px var(--mono); color:var(--text3);}
.am-main{position:relative; padding:12px;}
.am-url{display:flex; align-items:center; gap:8px; margin-bottom:10px; padding:6px 10px; font:400 10.5px var(--mono); color:var(--text2);
  background:rgba(255,255,255,0.04); border:1px solid var(--line);}
.am-shield{margin-left:auto; display:flex; align-items:center; gap:5px; color:var(--green); font-family:var(--font); font-weight:700;}
.am-shield svg{width:13px; height:13px;}
.am-chart{height:200px; background:var(--side); border:1px solid var(--line); overflow:hidden;}
.am-chart svg{width:100%; height:100%;}
.am-bot{position:absolute; right:12px; bottom:12px; width:66%; padding:12px; background:rgba(8,8,12,0.96);
  border:1px solid rgba(var(--accent-hi-rgb),0.4); box-shadow:0 18px 40px rgba(0,0,0,0.6);}
.am-bot-h{display:flex; align-items:center; gap:7px; margin-bottom:6px; font-size:12px; font-weight:800;}
.am-bot-h svg{width:15px; height:15px; color:var(--accent-hi);}
.am-msg{margin-top:6px; padding:8px 10px; font-size:11.5px; line-height:1.5;}
.am-msg.you{margin-left:24%; background:rgba(255,255,255,0.08); color:var(--text);}
.am-msg.bot{background:rgba(var(--accent-rgb),0.18); color:#DCD3F5; border-left:2px solid var(--accent-hi);}

/* TERMINAL PAGE CHART */
.chart-shell{background:#000; border:1px solid var(--border2); overflow:hidden; box-shadow:0 30px 80px rgba(0,0,0,0.6);}
.chart-bar{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; padding:12px 14px; border-bottom:1px solid var(--border);}
.pair-select{display:flex; flex-wrap:wrap; gap:2px; padding:3px; border:1px solid var(--border2); background:rgba(255,255,255,0.03);}
.pair-btn{padding:7px 14px; font-size:12px; font-weight:700; font-family:var(--mono); color:var(--text3); transition:color 150ms ease, background-color 150ms ease;}
.pair-btn:hover{color:var(--text);}
.pair-btn[aria-pressed="true"]{background:rgba(var(--accent-hi-rgb),0.22); color:#fff;}
.chart-credit{font:400 11px var(--mono); color:var(--text3);}
.chart-box{height:560px;}
.chart-ph{height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px; padding:24px; text-align:center; color:var(--text2); font-size:14px;
  background:radial-gradient(ellipse 500px 260px at 50% 60%, rgba(var(--accent-rgb),0.12), transparent 70%);}

/* RESPONSIVE 
   Below 1100 px the sidebar becomes a drawer behind the Menu button, as in
   the app's narrow layout. The page's own width drives the content layout. */
/* Phones and tablets (below 1100 px), in the admin panel's way: a touch-sized
   titlebar (44 px targets) under the notch's safe area, the strip scrolls away
   with the page, and the drawer has a fading scrim, follows a swipe (app.js)
   and keeps the page behind it still. Desktop widths never reach these rules. */
html{-webkit-text-size-adjust:100%; text-size-adjust:100%;}
.table-scroll{position:relative; overflow-x:auto; overscroll-behavior-x:contain;}   /* relative: the table's visually hidden labels stay inside the box */
.toc-btn{display:none;}
@media (max-width:1099px){
  :root{--tb:calc(56px + env(safe-area-inset-top, 0px)); --tk:45px; --top:var(--tb);}
  a, button, summary, label{-webkit-tap-highlight-color:transparent;}
  .titlebar{gap:10px; padding:env(safe-area-inset-top, 0px) max(6px, env(safe-area-inset-right, 0px)) 0 max(8px, env(safe-area-inset-left, 0px));}
  .tb-title{min-height:44px; min-width:44px; padding:0 6px; justify-content:center;}
  .tb-cta{height:44px; padding:0 16px; font-size:13px;}
  .tb-cta svg{width:16px; height:16px;}
  .menu-btn{width:44px; height:44px;}
  .menu-btn svg{width:20px; height:20px;}
  .ticker{position:relative; top:0;}
  .tick-pill{padding:5px 10px;}
  .motion-btn{width:calc(44px + env(safe-area-inset-right, 0px)); padding-right:env(safe-area-inset-right, 0px);}
  .shell{display:block;}
  .menu-btn{display:inline-flex;}
  .sidebar{position:fixed; z-index:996; top:var(--tb); left:0; bottom:0; height:auto; width:min(300px, 86vw);
    padding:16px 14px calc(16px + env(safe-area-inset-bottom, 0px)) max(14px, env(safe-area-inset-left, 0px)); overscroll-behavior:contain;
    box-shadow:24px 0 60px rgba(0,0,0,0.6); transform:translateX(-102%); visibility:hidden;
    transition:transform 300ms var(--ease-drawer), visibility 0s linear 300ms;}
  .menu-open .sidebar{transform:none; visibility:visible; transition:transform 300ms var(--ease-drawer), visibility 0s;}
  .nav-item{min-height:44px;}
  .scrim{position:fixed; inset:var(--tb) 0 0; z-index:995; background:rgba(0,0,0,0.6); opacity:0; visibility:hidden;
    transition:opacity 300ms ease, visibility 0s linear 300ms;}
  .menu-open .scrim{opacity:1; visibility:visible; transition:opacity 300ms ease;}
  .menu-open body{overflow:hidden;}
  .page{min-height:calc(100vh - var(--top));}
  .container{padding-left:max(44px, env(safe-area-inset-left, 0px)); padding-right:max(44px, env(safe-area-inset-right, 0px));}
  .footer-legal{padding:10px max(44px, env(safe-area-inset-right, 0px)) calc(12px + env(safe-area-inset-bottom, 0px)) max(44px, env(safe-area-inset-left, 0px));}
  .footer-links{gap:0 24px;}
  .footer-links a{display:inline-flex; align-items:center; min-height:44px; padding:0;}
  .footer-brand{min-height:44px;}
  .pair-btn{min-height:44px;}
  main .toc a{display:flex; align-items:center; min-height:44px;}
}
/* phones on their side: a slimmer bar, so the page keeps most of the height */
@media (max-width:1099px) and (max-height:500px){
  :root{--tb:calc(48px + env(safe-area-inset-top, 0px));}
}
@media (max-width:860px){
  /* Docs and legal pages: the section list folds behind a button (app.js), so the text comes first */
  .toc{border:1px solid var(--line); background:var(--surface); max-height:none;}
  .toc > p{display:none;}
  .toc-btn{display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; min-height:48px; padding:0 16px;
    font-weight:700; font-size:14px; text-align:left;}
  .toc-btn svg{width:18px; height:18px; flex:none; color:var(--accent2); transition:transform 200ms var(--ease-out);}
  .toc-btn[aria-expanded="true"] svg{transform:rotate(180deg);}
  .toc:has(.toc-btn[aria-expanded="false"]) ul{display:none;}
  .toc ul{padding-bottom:8px; border-top:1px solid var(--line);}
  main .toc a{padding:12px 16px; margin-left:0; border-left:0;}
}
@media (max-width:720px){
  .tb-status{display:none;}
  .tb-title span{display:none;}
  .container{padding-left:max(16px, env(safe-area-inset-left, 0px)); padding-right:max(16px, env(safe-area-inset-right, 0px));}
  .footer-legal{padding-left:max(16px, env(safe-area-inset-left, 0px)); padding-right:max(16px, env(safe-area-inset-right, 0px)); font-size:12px;}
  .prose, .card, .beta-steps{overflow-wrap:break-word;}
  .prose code{overflow-wrap:anywhere;}
  .t-tag, .t-chain{font-size:10px;}
  .section{padding:60px 0;}
  .section-tight{padding-top:4px;}
  .page-hero{padding:48px 0 40px;}
  .hero{padding:48px 0 56px;}
  .footer-cta{padding:24px 20px;}
  .card, .price-card{padding:20px;}
  .chart-box{height:440px;}
  .btn{padding:0 18px;}
}
@container page (max-width:1020px){
  .hero{padding-top:210px;}   /* the hawk's band above the headline (hero-scene.js) */
  .hero-grid{grid-template-columns:1fr; gap:44px;}
  .app-mock{max-width:640px;}
  .price-grid{grid-template-columns:minmax(0,560px);}
}
@container page (max-width:860px){
  .split{grid-template-columns:1fr; gap:28px;}
  .doc-grid{grid-template-columns:1fr; gap:28px;}
  .toc{position:static;}
}
@container page (max-width:560px){
  .term-grid{grid-template-columns:1fr 1fr; gap:10px;}
  .t-card{flex-direction:column; align-items:flex-start; padding:14px;}
  .am-body{grid-template-columns:1fr;}
  .am-tabs{display:none;}
  .am-bot{width:84%;}
  .data-table{font-size:13px;}
  .data-table th, .data-table td{padding:11px 7px;}
  .data-table thead th:first-child{width:44%;}
  /* four columns don't fit a phone: the table scrolls sideways in its own box, the feature names stay put */
  .data-table:has(thead th:nth-child(4)){min-width:600px;}
  .data-table:has(thead th:nth-child(4)) thead th:first-child{width:30%;}
  .data-table:has(thead th:nth-child(4)) tr > :first-child{position:sticky; left:0; z-index:1; background:var(--bg); box-shadow:inset -1px 0 0 var(--line);}
}

/* V2 Beta waitlist (beta.html) */
.beta-form{display:flex; flex-direction:column; gap:10px; margin-top:6px;}
.beta-form label{font-size:12.5px; font-weight:700; color:var(--label); letter-spacing:.3px;}
.beta-form input[type="email"]{width:100%; min-height:46px; padding:11px 13px; font:16px/1.3 var(--font); color:var(--text); background:#050505; border:1px solid var(--border2); border-radius:0;}
.beta-form input[type="email"]:focus{border-color:var(--accent-hi); outline:2px solid var(--accent-hi); outline-offset:1px;}
.beta-form .beta-consent{display:flex; gap:10px; align-items:flex-start; font-weight:400; font-size:13.5px; line-height:1.55; color:var(--text2); letter-spacing:0; cursor:pointer; margin-top:4px;}
.beta-consent input{flex:none; width:20px; height:20px; margin-top:1px; accent-color:var(--accent2); cursor:pointer;}
.beta-form .btn{align-self:flex-start; margin-top:6px; min-height:46px;}
.beta-form .btn:disabled{opacity:.6; cursor:wait;}
.beta-hp{position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden;}
.beta-check{min-height:65px;}
.beta-check:empty{display:none;}
.beta-msg{min-height:1.5em; font-size:14px; line-height:1.55; color:var(--text2);}
.beta-msg.ok{color:var(--green);}
.beta-msg.bad{color:#FF8A95;}
.beta-steps{list-style:none; counter-reset:beta; display:grid; gap:14px; grid-template-columns:repeat(auto-fit, minmax(min(100%, 230px), 1fr)); padding:0;}
.beta-steps li{counter-increment:beta; position:relative; padding:22px 20px 20px; border:1px solid var(--line); background:linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.01));}
.beta-steps li::before{content:"0" counter(beta); display:block; font:700 11px/1 var(--mono); letter-spacing:1.5px; color:var(--accent-hi); margin-bottom:12px;}
.beta-steps h3{font-size:15.5px; margin-bottom:6px;}
.beta-steps p{font-size:14px; color:var(--text2); line-height:1.6;}
@media (max-width:720px){
  /* the waitlist form on a phone: a full-width button and a bigger box to tick */
  .beta-form input[type="email"]{min-height:50px;}
  .beta-form .beta-consent{padding:6px 0;}
  .beta-consent input{width:24px; height:24px; margin-top:0;}
  .beta-form .btn{align-self:stretch; min-height:50px;}
}
.beta-card code, .beta-steps code, .card code{font-family:var(--mono); font-size:.92em; color:var(--text); background:rgba(255,255,255,.06); padding:1px 5px;}