/* Aencor landing site — one stylesheet for every page.
   Carried from Nic's NIC-61 prototype `index.html`. Three changes, all forced
   by the rules in the design's section 3: the inline <style> became this file;
   the two gauge ticks moved from `style="left:..."` to the .tick-call and
   .tick-restore classes below; and the Google Fonts <link> became the
   self-hosted @font-face rules at the top. The Squarespace variant's
   `#aencor-lp` scoping is not carried — nothing here shares a page with
   another stylesheet. The prototype's .email, .email-row and .copy rules are
   gone with the address they styled: there is no public address. */

/* ── self-hosted faces ──────────────────────────────────────────────────
   Downloaded from google/fonts, converted to woff2, OFL text beside each.
   Fraunces is variable on wght 100-900 and opsz 9-144, so one file covers
   the display weights; `font-variation-settings` pins its two non-registered
   axes to the instance the prototype's Google Fonts URL served (SOFT 0,
   WONK 0) — the font's own defaults are wght 900 and WONK 1, which would
   render every heading black and wonky if left to the file. */
@font-face{
  font-family:"Fraunces";
  src:url("fonts/fraunces-variable.woff2") format("woff2");
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
  font-variation-settings:"SOFT" 0, "WONK" 0;
}
@font-face{
  font-family:"Fraunces";
  src:url("fonts/fraunces-italic-variable.woff2") format("woff2");
  font-weight:100 900;
  font-style:italic;
  font-display:swap;
  font-variation-settings:"SOFT" 0, "WONK" 0;
}
@font-face{
  font-family:"Instrument Sans";
  src:url("fonts/instrument-sans-variable.woff2") format("woff2");
  font-weight:400 700;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"DM Mono";
  src:url("fonts/dm-mono-regular.woff2") format("woff2");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"DM Mono";
  src:url("fonts/dm-mono-medium.woff2") format("woff2");
  font-weight:500;
  font-style:normal;
  font-display:swap;
}

:root{
  --bg0:#0a0c0f; --bg1:#0f1217; --bg2:#151920;
  --line:#1e2d3d; --line-acc:#2a4060;
  --text:#c8d4e0; --dim:#7590a8; --bright:#eef4fa;
  --accent:#00aaff; --accent-ink:#04121c; --accent-soft:#00aaff1a;
  --gold:#c8a850; --green:#00cc88; --red:#ff5566; --amber:#ffaa00;
  --font-display:"Fraunces", Georgia, "Times New Roman", serif;
  --font-ui:"Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono:"DM Mono", "SFMono-Regular", Consolas, monospace;
  --header-h:64px;
  color-scheme:dark;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; background:var(--bg0); color:var(--text);
  font-family:var(--font-ui); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
body::before{content:""; position:fixed; inset:0 0 auto; height:env(safe-area-inset-top,0px); z-index:10; background:var(--bg1);}
::selection{background:#0066aa; color:var(--bright);}
h1,h2,h3{text-wrap:balance; margin:0; color:var(--bright);}
p{margin:0;}
a{color:var(--accent);}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px;}

.wrap{
  max-width:1160px; margin:0 auto; width:100%;
  padding-left:max(16px, env(safe-area-inset-left,0px));
  padding-right:max(16px, env(safe-area-inset-right,0px));
}
[id]{scroll-margin-top:calc(var(--header-h) + 8px);}

/* ── header + tabs ──────────────────────────────────────── */
header.top{
  position:sticky; top:env(safe-area-inset-top,0px); z-index:5;
  background:var(--bg1); border-bottom:1px solid var(--line);
}
header.top .wrap{display:flex; align-items:center; gap:8px 28px; min-height:var(--header-h); flex-wrap:wrap;}
.brand{display:flex; align-items:baseline; gap:10px; text-decoration:none;}
.brand b{font-family:var(--font-display); font-weight:600; font-size:22px; color:var(--bright);}
.brand span{font-size:10.5px; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; color:var(--gold);}
nav.tabs{display:flex; gap:2px; flex:1; align-self:stretch; overflow-x:auto; scrollbar-width:none;}
nav.tabs::-webkit-scrollbar{display:none;}
nav.tabs a{
  display:flex; align-items:center; padding:0 14px; white-space:nowrap; text-decoration:none;
  font-size:12px; font-weight:700; letter-spacing:0.07em; text-transform:uppercase;
  color:var(--dim); border-bottom:2px solid transparent;
}
nav.tabs a:hover{color:var(--bright);}
nav.tabs a[aria-current="true"]{color:var(--bright); border-bottom-color:var(--accent);}
.head-ctas{display:flex; gap:8px; align-items:center;}

.btn{
  display:inline-flex; align-items:center; text-decoration:none; cursor:pointer;
  font-family:var(--font-ui); font-weight:700; font-size:14px; letter-spacing:0.02em;
  padding:11px 20px; border-radius:5px; border:1px solid var(--accent);
  background:var(--accent); color:var(--accent-ink); white-space:nowrap;
}
.btn:hover{background:#33bbff;}
.btn.ghost{background:transparent; color:var(--bright); border-color:var(--line-acc);}
.btn.ghost:hover{border-color:var(--accent); background:var(--accent-soft);}
.btn.small{padding:8px 14px; font-size:13px;}
.btn[disabled]{opacity:0.5; cursor:not-allowed;}
.btn[disabled]:hover{background:var(--accent);}

/* ── shared section bits ────────────────────────────────── */
.eyebrow{font-size:11.5px; font-weight:700; letter-spacing:0.14em; text-transform:uppercase; color:var(--gold);}
section.band{padding-block:80px; border-bottom:1px solid var(--line);}
.sec-title{font-family:var(--font-display); font-weight:500; font-size:clamp(30px, 3.8vw, 44px); line-height:1.1; margin:12px 0 40px;}

/* ── hero ───────────────────────────────────────────────── */
.hero{padding-block:72px; border-bottom:1px solid var(--line);}
.hero-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:56px; align-items:center;}
.hero h1{
  font-family:var(--font-display); font-weight:500; font-size:clamp(40px, 5.6vw, 66px);
  line-height:1.03; letter-spacing:-0.015em; margin-top:18px;
}
.hero h1 em{font-style:italic; color:var(--accent);}
.hero .lede{margin-top:20px; font-size:18px; max-width:28em;}
.ctas{display:flex; gap:12px; flex-wrap:wrap; margin-top:30px;}

/* the monitor */
.monitor{background:var(--bg1); border:1px solid var(--line-acc); border-radius:6px; overflow:hidden; box-shadow:0 30px 60px -30px #000a;}
.mon-head{display:flex; justify-content:space-between; align-items:center; gap:12px; padding:12px 18px; border-bottom:1px solid var(--line); background:var(--bg2);}
.mon-head h2{font-family:var(--font-ui); font-size:11px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:var(--dim);}
.mon-head .tag{font-family:var(--font-mono); font-size:10.5px; color:var(--gold);}
.mon-body{padding:18px; display:flex; flex-direction:column; gap:16px;}
.kv{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:12px;}
.kv div{display:flex; flex-direction:column; gap:2px; min-width:0;}
.kv .k{font-size:9.5px; font-weight:700; letter-spacing:0.09em; text-transform:uppercase; color:var(--dim);}
.kv .v{font-family:var(--font-mono); font-variant-numeric:tabular-nums; font-size:14px; color:var(--bright); overflow-wrap:anywhere;}
.slider-row{display:flex; flex-direction:column; gap:8px; padding:14px; background:var(--bg0); border:1px solid var(--line); border-radius:5px;}
.slider-row .lbl{display:flex; justify-content:space-between; gap:10px; font-size:12px; color:var(--dim);}
.slider-row .lbl output{font-family:var(--font-mono); color:var(--bright);}
input[type=range]{width:100%; accent-color:var(--accent);}
.gauge{position:relative; height:46px;}
.gauge .track{position:absolute; left:0; right:0; top:10px; height:10px; border-radius:2px;
  background:linear-gradient(90deg, #ff556640 0 37.5%, #ffaa0033 37.5% 62.5%, #00cc8833 62.5%);}
.gauge .fill{position:absolute; left:0; top:10px; height:10px; border-radius:2px; background:var(--bright); transition:width .25s ease;}
.gauge .tick{position:absolute; top:4px; width:1px; height:22px; background:var(--dim);}
.gauge .tick span{position:absolute; top:24px; transform:translateX(-50%); font-family:var(--font-mono); font-size:10px; color:var(--dim); white-space:nowrap;}
/* The two offsets the prototype carried as style="left:..." attributes. */
.gauge .tick-call{left:37.5%;}
.gauge .tick-restore{left:62.5%;}
.status-row{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;}
.pill{font-size:11px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; padding:4px 10px; border-radius:3px; border:1px solid;}
.pill.ok{color:var(--green); border-color:#00cc8855; background:#00cc8814;}
.pill.watch{color:var(--amber); border-color:#ffaa0055; background:#ffaa0014;}
.pill.call{color:var(--red); border-color:#ff556655; background:#ff556614;}
.ratio{font-family:var(--font-mono); font-size:28px; color:var(--bright); font-variant-numeric:tabular-nums;}
.ratio small{font-size:12px; color:var(--dim); margin-left:6px;}
.call-box{border:1px solid var(--line); border-left:2px solid var(--gold); border-radius:4px; padding:12px 14px; display:flex; flex-direction:column; gap:4px; background:var(--bg0);}
.call-box .k{font-size:9.5px; font-weight:700; letter-spacing:0.09em; text-transform:uppercase; color:var(--gold);}
.call-box .amt{font-family:var(--font-mono); font-size:20px; color:var(--bright); font-variant-numeric:tabular-nums;}
.mon-foot{padding:10px 18px; border-top:1px solid var(--line); font-size:11px; color:var(--dim);}

/* ── why CoreRM, security: one auto-fitting grid serves four items and three ── */
.pillars{display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:32px;}
.pillars div{display:flex; flex-direction:column; gap:8px; border-top:1px solid var(--line-acc); padding-top:20px; min-width:0;}
.pillars h3{font-family:var(--font-ui); font-size:18px; font-weight:600;}
.pillars p{font-size:15px; color:var(--dim);}

/* ── margin loans: a real sequence, so it is numbered ──── */
.steps{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); border:1px solid var(--line); border-radius:6px; overflow:hidden;}
.steps li{padding:24px 22px; display:flex; flex-direction:column; gap:8px; background:var(--bg1); min-width:0;}
.steps li + li{border-left:1px solid var(--line);}
.steps .n{font-family:var(--font-mono); font-size:12px; color:var(--gold);}
.steps h3{font-family:var(--font-ui); font-size:18px; font-weight:600;}
.steps p{font-size:14.5px; color:var(--dim);}

/* ── screenshot slots: named, and invisible until a copy change fills them ── */
.shot{margin:32px 0 0; padding:0;}
.shot:empty{display:none;}
.shot img{display:block; width:100%; height:auto; border:1px solid var(--line); border-radius:6px;}
.shot figcaption{margin-top:8px; font-size:13px; color:var(--dim);}

/* ── repo and swaps ─────────────────────────────────────── */
.split{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:24px;}
.product{background:var(--bg1); border:1px solid var(--line); border-radius:6px; padding:28px; display:flex; flex-direction:column; gap:16px; min-width:0;}
.product .code{font-family:var(--font-mono); font-size:11px; color:var(--gold); letter-spacing:0.06em;}
.product h3{font-family:var(--font-display); font-weight:500; font-size:26px;}
.product ul{list-style:none; margin:0; padding:0;}
.product li{padding:11px 0; border-top:1px solid var(--line); font-size:15px; color:var(--bright);}

/* ── controls ───────────────────────────────────────────── */
.ledger{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:40px;}
.ledger div{display:flex; flex-direction:column; gap:8px; border-top:1px solid var(--line-acc); padding-top:20px; min-width:0;}
.ledger .k{font-family:var(--font-mono); font-size:13px; color:var(--accent);}
.ledger h3{font-family:var(--font-ui); font-size:18px; font-weight:600;}
.ledger p{font-size:15px; color:var(--dim);}

/* ── demo band ──────────────────────────────────────────── */
.demo{padding-block:88px; background:var(--bg1);}
.demo-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:56px; align-items:start;}
.demo h2{font-family:var(--font-display); font-weight:500; font-size:clamp(34px, 4.4vw, 52px); line-height:1.05; margin-top:12px;}
.agenda{list-style:none; margin:16px 0 0; padding:0; display:flex; flex-direction:column; gap:10px;}
.agenda li{display:flex; gap:12px; font-size:15px;}
.agenda li::before{content:"\2713"; color:var(--green); font-weight:700;}
.card{background:var(--bg0); border:1px solid var(--line-acc); border-radius:6px; padding:28px; display:flex; flex-direction:column; gap:8px;}
.card .k{font-size:10.5px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:var(--dim);}

/* ── the inner pages: contact and privacy ───────────────── */
.page{padding-block:64px;}
.page h1{font-family:var(--font-display); font-weight:500; font-size:clamp(32px, 4vw, 48px); line-height:1.08; margin-top:12px;}
.page .lede{margin-top:16px; font-size:18px; max-width:40em;}
.prose{margin-top:32px; max-width:46em; display:flex; flex-direction:column; gap:20px;}
.prose h2{font-family:var(--font-ui); font-size:18px; font-weight:700; letter-spacing:0.02em;}
.prose p, .prose li{font-size:15.5px; color:var(--text);}
.prose ul{margin:8px 0 0; padding-left:20px; display:flex; flex-direction:column; gap:6px;}
.prose .updated{font-size:13px; color:var(--dim);}

/* ── the form ───────────────────────────────────────────── */
.form{margin-top:32px; max-width:34em; display:flex; flex-direction:column; gap:20px;}
.field{display:flex; flex-direction:column; gap:6px; border:0; margin:0; padding:0; min-width:0;}
.field > label, .field > legend{font-size:12.5px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:var(--dim); padding:0;}
.field .opt{font-weight:400; letter-spacing:0.02em; text-transform:none; color:var(--dim);}
.field input[type=text], .field input[type=email], .field input[type=tel], .field textarea{
  font-family:var(--font-ui); font-size:16px; color:var(--bright);
  background:var(--bg1); border:1px solid var(--line-acc); border-radius:5px;
  padding:11px 12px; width:100%;
}
.field textarea{resize:vertical; min-height:7em; line-height:1.5;}
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"]{border-color:var(--red);}
.check, .field > .check{display:flex; align-items:flex-start; gap:10px; font-size:15px; color:var(--text); font-weight:400; letter-spacing:normal; text-transform:none;}
.check input{margin-top:4px; accent-color:var(--accent); flex:0 0 auto;}
.consent{max-width:34em;}
.err{font-size:13px; color:var(--red); min-height:0;}
.err:empty{display:none;}
.status{margin-top:4px; font-size:15px; color:var(--dim);}
.status:empty{display:none;}
.status.ok{color:var(--green);}
.status.bad{color:var(--red);}
.status.warn{color:var(--amber);}
#turnstile{min-height:0;}

/* The honeypot. Visually gone, off the tab order, hidden from assistive
   technology, and still in the DOM for anything that fills every input it
   finds. `display:none` is deliberately NOT used: some bots skip those. */
.hp{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0;
}

/* ── 404 ────────────────────────────────────────────────── */
.notfound{padding-block:120px; display:flex; flex-direction:column; gap:12px; align-items:flex-start;}
.notfound h1{font-family:var(--font-display); font-weight:500; font-size:clamp(34px, 4.6vw, 54px); line-height:1.05;}

/* ── footer ─────────────────────────────────────────────── */
footer{padding-block:32px; font-size:13px; color:var(--dim);}
footer .wrap{display:flex; justify-content:space-between; gap:12px 24px; flex-wrap:wrap; align-items:baseline;}
footer b{font-family:var(--font-display); color:var(--bright); font-weight:600;}
.foot-links{display:flex; gap:18px; flex-wrap:wrap;}

@media (max-width:960px){
  :root{--header-h:104px;}
  header.top .wrap{justify-content:space-between; padding-top:10px;}
  nav.tabs{order:3; flex:1 0 100%; height:44px; margin:0 -14px;}
  .hero-grid, .demo-grid, .split{grid-template-columns:minmax(0,1fr);}
  .steps{grid-template-columns:repeat(2, minmax(0,1fr));}
  .steps li:nth-child(3){border-left:none;}
  .steps li:nth-child(n+3){border-top:1px solid var(--line);}
  .ledger{grid-template-columns:minmax(0,1fr); gap:24px;}
  .hero{padding-block:48px;}
  section.band, .demo{padding-block:60px;}
}
@media (max-width:560px){
  .steps{grid-template-columns:minmax(0,1fr);}
  .steps li + li{border-left:none; border-top:1px solid var(--line);}
  .kv{grid-template-columns:repeat(2, minmax(0,1fr));}
}
@media (prefers-reduced-motion:reduce){
  .gauge .fill{transition:none;}
  html{scroll-behavior:auto;}
}