/* ─────────────────────────────────────────────────────────────────
   heimdns.net — one-page splash site
   Palette + component language ported from the HeimDNS TUI
   (src/theme.rs) and the Poweradmin theme (custom_dark.css).
   ───────────────────────────────────────────────────────────────── */

/* Self-hosted JetBrains Mono (variable weight). Files live in assets/fonts/,
   subset per unicode-range the same way Google Fonts served them. */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url('fonts/jetbrains-mono-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url('fonts/jetbrains-mono-latin.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 {
  --hd-fg:        #ECEBE6;
  --hd-dim:       #8E92A1;
  --hd-faint:     #565A66;
  --hd-line:      #3A3D48;
  --hd-bg:        #07080B;
  --hd-bg-2:      #0E1015;
  --hd-accent:    #A6E3C4;
  --hd-accent2:   #C9A6E3;
  --hd-blue:      #7EB6E3;
  --hd-yellow:    #E3D28A;
  --hd-red:       #E38A8A;
  --hd-magenta:   #D99CD6;
  --hd-cyan:      #9CD9D6;
  --hd-orange:    #E3B07E;
  --hd-green:     #A6E3C4;
  --hd-on-accent: #07080B;

  --hd-mono: "JetBrains Mono", "Fira Code", "SF Mono", "Cascadia Code",
             "Berkeley Mono", ui-monospace, Menlo, Consolas, monospace;

  --gutter: 16px;
  --maxw: 1180px;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

/* ── Reset / base ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--hd-bg);
  color: var(--hd-fg);
  font-family: var(--hd-mono);
  font-feature-settings: "calt" 1, "liga" 0;
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
::selection { background: var(--hd-accent); color: var(--hd-on-accent); }
a { color: var(--hd-accent); text-decoration: none; }
a:hover { color: var(--hd-fg); text-decoration: underline; }
h1, h2, h3 { font-weight: 700; letter-spacing: .02em; margin: 0; line-height: 1.2; }
p { margin: 0; }
pre, code, kbd { font-family: inherit; }
button { font: inherit; }
:focus-visible { outline: 2px solid var(--hd-accent); outline-offset: 2px; }

.dim   { color: var(--hd-dim); }
.faint { color: var(--hd-faint); }
.ok    { color: var(--hd-accent); font-weight: 700; }
.pend  { color: var(--hd-yellow); font-weight: 700; }
.b     { font-weight: 700; }
.r     { text-align: right; }
.small { font-size: .85em; }
.spaced { letter-spacing: .12em; }
.c-accent  { color: var(--hd-accent); }
.c-accent2 { color: var(--hd-accent2); font-weight: 700; }
.c-yellow  { color: var(--hd-yellow); }
.hl { color: var(--hd-accent); }
.rule { color: var(--hd-line); }

/* Record-type colours — must match theme.rs */
.rt, .rt--A, .rt--AAAA, .rt--CNAME, .rt--MX, .rt--TXT, .rt--SRV, .rt--NS, .rt--CAA { font-weight: 700; }
.rt--A, .rt--NS { color: var(--hd-blue); }
.rt--AAAA       { color: var(--hd-magenta); }
.rt--CNAME      { color: var(--hd-yellow); }
.rt--MX         { color: var(--hd-orange); }
.rt--TXT        { color: var(--hd-green); }
.rt--SRV        { color: var(--hd-cyan); }
.rt--CAA        { color: var(--hd-accent2); }

/* Status markers — "● ok" / "◐ pending" */
.st { font-weight: 600; white-space: nowrap; }
.st--ok      { color: var(--hd-dim); }
.st--new     { color: var(--hd-accent); }
.st--pending { color: var(--hd-yellow); }
.st--idle    { color: var(--hd-faint); }
.st--del     { color: var(--hd-red); text-decoration: line-through; }

/* ── Buttons ──────────────────────────────────────────────────── */
.btn {
  display: inline-block;
  padding: .45em 1em;
  border: 1px solid var(--hd-line);
  border-radius: 0;
  background: transparent;
  color: var(--hd-fg);
  font-weight: 700;
  letter-spacing: .03em;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background .15s var(--ease), color .15s var(--ease), border-color .15s var(--ease), transform .15s var(--ease);
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--hd-accent); color: var(--hd-on-accent); border-color: var(--hd-accent); }
.btn--primary:hover { background: var(--hd-fg); border-color: var(--hd-fg); color: var(--hd-on-accent); }
.btn--secondary:hover { border-color: var(--hd-accent); color: var(--hd-accent); }
.btn--lg { padding: .7em 1.4em; font-size: 1.02em; }
.btn--sm { padding: .25em .7em; font-size: .85em; }
.btn[disabled] { opacity: .6; cursor: default; }

.kbd { color: var(--hd-accent2); font-weight: 700; }

/* ── Header ───────────────────────────────────────────────────── */
.hd-header {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 1.5rem;
  padding: .75rem max(var(--gutter), calc((100% - var(--maxw)) / 2));
  background: rgba(7, 8, 11, .92);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--hd-line);
}
.hd-brand { display: flex; flex-direction: column; gap: .1rem; line-height: 1.2; color: var(--hd-fg); text-decoration: none; margin-right: auto; }
.hd-brand:hover { text-decoration: none; }
.hd-brand__row1, .hd-brand__row2 { display: flex; align-items: baseline; gap: .5rem; }
.hd-brand__glyph    { color: var(--hd-accent);  font-weight: 700; }
.hd-brand__glyph--2 { color: var(--hd-accent2); font-weight: 700; }
.hd-brand__glyph--3 { color: var(--hd-accent2); }
.hd-brand__glyph--4 { color: var(--hd-faint); }
.hd-brand__name     { font-weight: 700; letter-spacing: .12em; }
.hd-brand__sep      { color: var(--hd-faint); }
.hd-brand__version  { color: var(--hd-dim); font-size: .85em; }
.hd-brand__tagline  { color: var(--hd-dim); font-size: .85em; }

.hd-nav { display: flex; gap: .25rem; }
.hd-nav a {
  color: var(--hd-dim); text-transform: uppercase; font-size: .78rem; font-weight: 700;
  letter-spacing: .08em; padding: .5rem .8rem; border-bottom: 2px solid transparent;
  transition: color .15s, border-color .15s;
}
.hd-nav a:hover { color: var(--hd-fg); text-decoration: none; }
.hd-nav a.is-active { color: var(--hd-accent); border-bottom-color: var(--hd-accent); }

.hd-header__actions { display: flex; gap: .5rem; }
.hd-menu-toggle { display: none; background: none; border: 1px solid var(--hd-line); color: var(--hd-fg); padding: .3rem .6rem; cursor: pointer; }

/* ── Sections ─────────────────────────────────────────────────── */
.section { padding: 6rem var(--gutter); }
.section--alt { background: var(--hd-bg-2); border-top: 1px solid var(--hd-line); border-bottom: 1px solid var(--hd-line); }
.section__inner { max-width: var(--maxw); margin: 0 auto; }
.section__inner--narrow { max-width: 640px; }
.section__title { font-size: 1.6rem; margin-bottom: .75rem; }
/* Section marker: one block glyph from the brand logo, tinted per section. */
.section__title .rule { margin-right: .3em; font-weight: 700; color: var(--hd-accent); }
.section__title .rule--accent2 { color: var(--hd-accent2); }
.section__title .rule--blue    { color: var(--hd-blue); }
.section__title .rule--yellow  { color: var(--hd-yellow); }
.section__title .rule--red     { color: var(--hd-red); }
.section__lead { color: var(--hd-dim); max-width: 60ch; margin-bottom: 3rem; }

.grid { display: grid; gap: 1.5rem; }
.grid--3 { grid-template-columns: repeat(3, 1fr); }

/* ── Pane block — mirrors pane_block() in src/ui.rs ───────────── */
.pane {
  position: relative;
  background: var(--hd-bg-2);
  border: 1px solid var(--hd-line);
  padding: 1.6rem 1.4rem 1.4rem;
  transition: border-color .2s var(--ease), transform .25s var(--ease);
}
.pane--focus { border: 2px solid var(--hd-accent); }
.pane--warn { border: 2px solid var(--hd-yellow); }
.pane--warn > .pane__title { color: var(--hd-yellow); }
.pane__title {
  position: absolute; top: -.7em; left: .9rem;
  background: var(--hd-bg-2);
  padding: 0 .45rem;
  color: var(--hd-accent); font-weight: 700; font-size: .85em; letter-spacing: .04em;
}
.section:not(.section--alt) .pane__title { background: var(--hd-bg); }
.section--alt .pane { background: var(--hd-bg); }
.section--alt .pane__title { background: var(--hd-bg); }
.pane__count { color: var(--hd-dim); font-weight: 400; }
.pane h3 { font-size: 1.05rem; margin: .5rem 0 .5rem; }
.pane p { color: var(--hd-dim); font-size: .92em; }
.pane__glyph { font-size: 1.6rem; font-weight: 700; line-height: 1; }
#features .pane:hover { border-color: var(--hd-accent); transform: translateY(-3px); }
#features .pane:hover::before { content: "▸"; position: absolute; left: -1em; top: 1.4rem; color: var(--hd-accent); font-weight: 700; }

/* ── Hero ─────────────────────────────────────────────────────── */
.hero { position: relative; overflow: hidden; padding: 5rem var(--gutter) 4.5rem; display: flex; flex-direction: column; justify-content: center; }
.hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: .9; }
.hero__inner { position: relative; max-width: var(--maxw); margin: 0 auto; display: grid; grid-template-columns: 1.05fr 1fr; gap: 3rem; align-items: center; width: 100%; }
.hero__copy { max-width: 62ch; min-width: 0; }
.eyebrow { color: var(--hd-dim); font-size: .85em; letter-spacing: .08em; text-transform: lowercase; margin-bottom: 1.2rem; }
.eyebrow__glyph { color: var(--hd-accent2); font-weight: 700; }
.hero__title { font-size: clamp(2rem, 4.2vw, 3.1rem); margin-bottom: 1.4rem; }
.hero__lead { color: var(--hd-dim); font-size: 1.05em; max-width: 56ch; margin-bottom: 2rem; }
.hero__cta { display: flex; flex-wrap: wrap; gap: .75rem; margin-bottom: 2rem; }
.hero__scroll { position: absolute; bottom: 1.2rem; left: 0; right: 0; text-align: center; font-size: .8em; animation: bob 2.4s ease-in-out infinite; }
.hero__scroll b { color: var(--hd-accent2); }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } }

.statusline { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem 1.6rem; color: var(--hd-dim); font-size: .85em; }
.statusline--center { justify-content: center; margin-top: 3rem; }

/* ── Motion demo (hero) ───────────────────────────────────────────
   .hero__demo holds the grid slot (aspect-ratio matches the stage).
   .hero__demo-frame normally fills it; when opened (app.js, FLIP) it becomes
   position: fixed and animates up to ~1180px over a backdrop. */
.hero__demo { position: relative; min-width: 0; width: 100%; aspect-ratio: 1280 / 800; }
.hero__demo-frame {
  position: absolute; inset: 0; z-index: 1;
  border: 1px solid var(--hd-line);
  background: var(--hd-bg);
  box-shadow: 0 0 0 1px var(--hd-bg), 0 40px 100px -40px rgba(166, 227, 196, .22);
  cursor: zoom-in;
  transform-origin: 0 0;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.hero__demo-frame:hover, .hero__demo-frame:focus-visible { border-color: var(--hd-accent); box-shadow: 0 0 0 1px var(--hd-bg), 0 40px 100px -30px rgba(166, 227, 196, .35); outline: 0; }
.hero__demo-frame:focus-visible { box-shadow: 0 0 0 1px var(--hd-bg), 0 0 0 3px var(--hd-accent); }
.hero__stage { width: 100%; min-width: 0; }
.hero__demo-hint, .hero__demo-close {
  position: absolute; z-index: 2; right: .6rem; bottom: .6rem;
  padding: .2em .6em; border: 1px solid var(--hd-line); background: rgba(14, 16, 21, .92);
  color: var(--hd-fg); font-size: .8em; white-space: nowrap;
  opacity: 0; transform: translateY(4px); transition: opacity .2s var(--ease), transform .2s var(--ease);
  pointer-events: none;
}
.hero__demo-hint b, .hero__demo-close b { color: var(--hd-accent2); }
.hero__demo-frame:hover .hero__demo-hint, .hero__demo-frame:focus-visible .hero__demo-hint { opacity: 1; transform: none; }
.hero__demo-close { right: .6rem; bottom: auto; top: .6rem; }
.hero__demo-frame.is-open { position: fixed; z-index: 90; cursor: zoom-out; box-shadow: 0 0 0 1px var(--hd-bg), 0 60px 160px -40px rgba(166, 227, 196, .35); border-color: var(--hd-accent); }
.hero__demo-frame.is-open .hero__demo-hint { display: none; }
.hero__demo-frame.is-open .hero__demo-close { opacity: 1; transform: none; transition-delay: .3s; }
.hero__demo-frame.is-moving { transition: transform .45s var(--ease), border-color .2s var(--ease), box-shadow .45s var(--ease); }
.hero__demo-bg { position: fixed; inset: 0; z-index: 80; background: rgba(7, 8, 11, .82); backdrop-filter: blur(4px); opacity: 0; transition: opacity .35s var(--ease); }
.hero__demo-bg[hidden] { display: none; }
.hero__demo-bg.is-in { opacity: 1; }
body.is-demo-open { overflow: hidden; }

/* ── TUI panel (interfaces · tui tab) ─────────────────────────── */
.tui-demo { min-width: 0; max-width: 760px; }
.tui {
  background: var(--hd-bg);
  border: 1px solid var(--hd-line);
  padding: 1rem 1rem .8rem;
  font-size: .8rem;
  line-height: 1.55;
  box-shadow: 0 0 0 1px var(--hd-bg), 0 30px 80px -30px rgba(166, 227, 196, .18);
}
.tui__logo { display: flex; gap: .5rem; align-items: baseline; margin-bottom: 1.2rem; flex-wrap: wrap; }
.tui__logo-glyph { color: var(--hd-accent); font-weight: 700; }
.tui__logo-name  { font-weight: 700; }
.tui__logo-sep   { color: var(--hd-faint); }
.tui__logo-dim   { color: var(--hd-dim); }
.tui__logo-right { margin-left: auto; }
.tui__pane { position: relative; border: 1px solid var(--hd-line); padding: 1rem .8rem .6rem; min-height: 15.5em; }
.tui__pane--focus { border: 2px solid var(--hd-accent); }
.tui__pane-title { position: absolute; top: -.75em; left: .6rem; background: var(--hd-bg); padding: 0 .4rem; color: var(--hd-accent); font-weight: 700; }
.tui__pane-count { color: var(--hd-dim); font-weight: 400; }
.tui__search { border: 2px solid var(--hd-yellow); padding: .1rem .5rem; margin-bottom: .6rem; color: var(--hd-fg); }
.tui__search-label { color: var(--hd-yellow); font-weight: 700; margin-right: .4rem; }
.tui__caret { display: inline-block; width: .55em; height: 1.1em; vertical-align: -.2em; background: var(--hd-fg); animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.tui__table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.tui__table th { text-align: left; color: var(--hd-accent2); font-weight: 700; padding: 0 .4rem .4rem; font-size: .95em; }
.tui__table th.r { text-align: right; }
.tui__table td { padding: .05rem .4rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tui__table th:nth-child(1), .tui__table td:nth-child(1) { width: 5em; }
.tui__table th:nth-child(2), .tui__table td:nth-child(2) { width: 4.2em; }
.tui__table th:nth-child(4), .tui__table td:nth-child(4) { width: 4.4em; }
.tui__table th:nth-child(5), .tui__table td:nth-child(5) { width: 5.6em; }
.tui__table tr { transition: opacity .25s var(--ease); }
.tui__table tr.is-hidden { display: none; }
.tui__table tr.is-selected td { background: var(--hd-accent); color: var(--hd-on-accent) !important; font-weight: 700; }
.tui__table tr.is-selected td:first-child::before { content: "▸ "; }
.tui__table tr.is-new { animation: rowin .3s var(--ease); }
@keyframes rowin { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: none; } }
.tui__keyhints { display: flex; align-items: center; gap: .9rem; border: 1px solid var(--hd-line); margin-top: .7rem; padding: .25rem .6rem; color: var(--hd-dim); flex-wrap: wrap; }
.tui__mode { background: var(--hd-accent); color: var(--hd-on-accent); font-weight: 700; padding: 0 .6em; letter-spacing: .08em; transition: background .2s; }
.tui__mode--insert { background: var(--hd-blue); }
.tui__mode--search { background: var(--hd-yellow); }
.tui__mode--delete { background: var(--hd-red); }
.tui__hints { display: flex; gap: .9rem; flex-wrap: wrap; }
.tui__hints b { color: var(--hd-accent2); }
.tui__pending { margin-left: auto; color: var(--hd-yellow); }

/* ── Tabs (three ways in) ─────────────────────────────────────── */
.tabs__bar { display: flex; align-items: center; gap: .1rem; margin-bottom: 1.8rem; flex-wrap: wrap; }
.tabs__cell { background: transparent; border: 0; color: var(--hd-dim); font-weight: 700; padding: .2em .9em; cursor: pointer; letter-spacing: .04em; transition: background .15s, color .15s; }
.tabs__cell:hover { color: var(--hd-fg); }
.tabs__cell.is-selected { background: var(--hd-accent); color: var(--hd-on-accent); }
.tabs__sep { color: var(--hd-line); }
.tabs__hint { margin-left: auto; font-size: .8em; }
.tabs__panel { display: none; }
.tabs__panel.is-active { display: block; animation: fadein .3s var(--ease); }
@keyframes fadein { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.code {
  margin: 0 0 1rem;
  padding: 1rem 1.1rem;
  background: var(--hd-bg);
  border: 1px solid var(--hd-line);
  color: var(--hd-fg);
  font-size: .85em;
  line-height: 1.6;
  overflow-x: auto;
  white-space: pre;
}
.section--alt .code { background: var(--hd-bg-2); }
.code--diff .del { color: var(--hd-red); }
.code--diff .add { color: var(--hd-accent); }
.code--diff .b { color: var(--hd-fg); }

/* Static web UI mock (interfaces · web ui tab) — mirrors the real shell:
   header / sidebar / zone view / key-hint bar. Values from heimdns-webui index.css. */
.webmock { border: 1px solid var(--hd-line); margin-bottom: 1rem; font-size: .78em; line-height: 1.5; background: var(--hd-bg); overflow: hidden; }
.webmock__header { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .45rem .8rem; border-bottom: 1px solid var(--hd-line); flex-wrap: wrap; }
.webmock__brand { display: flex; flex-direction: column; line-height: 1.2; }
.webmock__brand-row { display: flex; gap: .5rem; align-items: baseline; }
.webmock__brand-row .dim { font-size: .85em; }
.webmock__right { display: flex; gap: .9rem; align-items: center; font-size: .9em; }
.webmock__btn { display: inline-block; border: 1px solid var(--hd-line); padding: .05em .5em; font-weight: 700; white-space: nowrap; }
.webmock__btn--primary { background: var(--hd-accent); color: var(--hd-on-accent); border-color: var(--hd-accent); }
.webmock__body { display: grid; grid-template-columns: 13.5em 1fr; min-height: 0; }
.webmock__side { border-right: 1px solid var(--hd-line); padding: .4rem 0; display: flex; flex-direction: column; }
.webmock__nav { display: flex; gap: .5rem; align-items: center; padding: .1rem .7rem; border-left: 2px solid transparent; font-weight: 700; letter-spacing: .06em; font-size: .8em; }
.webmock__nav .dim { width: .9em; text-align: center; font-weight: 400; letter-spacing: 0; font-size: 1.25em; }
.webmock__nav .faint { margin-left: auto; font-weight: 400; font-size: .95em; letter-spacing: 0; }
.webmock__nav--active { border-left-color: var(--hd-accent); background: var(--hd-bg-2); color: var(--hd-accent); }
.webmock__zones-head { display: flex; justify-content: space-between; border-top: 1px solid var(--hd-line); margin-top: .5rem; padding: .5rem .7rem .15rem; font-size: .75em; letter-spacing: .12em; text-transform: uppercase; color: var(--hd-dim); }
.webmock__new { text-transform: none; letter-spacing: 0; }
.webmock__zone { display: flex; justify-content: space-between; gap: .5rem; padding: .1rem .7rem; border-left: 2px solid transparent; }
.webmock__zone--active { border-left-color: var(--hd-accent); background: var(--hd-bg-2); color: var(--hd-accent); }
.webmock__side-foot { margin-top: auto; border-top: 1px solid var(--hd-line); padding: .4rem .7rem 0; font-size: .85em; }
.webmock__main { padding: .6rem .8rem .7rem; min-width: 0; }
.webmock__zone-head { display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; margin-bottom: .8rem; }
.webmock__zone-head .b { font-size: 1.2em; }
.webmock__zone-actions { margin-left: auto; display: flex; gap: .4rem; align-items: center; }
.webmock__filter { border: 1px solid var(--hd-line); background: var(--hd-bg-2); padding: .05em .5em; min-width: 8em; }
.webmock__table { border: 1px solid var(--hd-line); padding: .3rem 0 .2rem; }
.webmock__row { display: grid; grid-template-columns: 3.4em minmax(5em, 1fr) minmax(0, 3fr) 3em 5.2em; gap: .6em; padding: .05rem .6rem; border-left: 2px solid transparent; white-space: nowrap; }
.webmock__row > span { overflow: hidden; text-overflow: ellipsis; }
.webmock__row--head { color: var(--hd-dim); text-transform: uppercase; font-size: .75em; letter-spacing: .08em; border-bottom: 1px solid var(--hd-line); margin-bottom: .2rem; }
.webmock__row--sel { background: var(--hd-bg-2); border-left-color: var(--hd-accent); }
.webmock__row--new { color: var(--hd-accent); }
.webmock__row--sub { padding-top: 0; padding-bottom: 0; }
.webmock__row .rt--A, .webmock__row .rt--MX, .webmock__row .rt--TXT, .webmock__row .rt--CNAME { font-weight: 700; }
.webmock__footer { display: flex; align-items: center; gap: 1rem; border-top: 1px solid var(--hd-line); background: var(--hd-bg-2); padding: .25rem .6rem; color: var(--hd-dim); font-size: .9em; flex-wrap: wrap; }
.webmock__mode { background: var(--hd-accent); color: var(--hd-on-accent); font-weight: 700; padding: 0 .5em; letter-spacing: .08em; }
.webmock__hints { display: flex; gap: .8rem; flex-wrap: wrap; flex: 1; }
.webmock__hints b { color: var(--hd-accent2); }

/* ── Propagation ──────────────────────────────────────────────── */
.prop { display: grid; grid-template-columns: 1.2fr 1fr; gap: 2rem; }
.prop__actions { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; font-size: .9em; }
.prop__actions .btn { margin-left: auto; }
.pops { list-style: none; margin: .4rem 0 1rem; padding: 0; }
.pop { display: grid; grid-template-columns: 1fr 6.5em 4em; gap: .5rem; padding: .3rem .2rem; border-bottom: 1px solid transparent; transition: background .2s; }
.pop.is-live { background: rgba(166, 227, 196, .06); }
.pop__name { font-weight: 700; }
.pop__lat { text-align: right; }
.prop__bar { font-size: .9em; letter-spacing: -.02em; color: var(--hd-accent); white-space: nowrap; overflow: hidden; }

/* ── Sign-up form — mirrors field_block() ─────────────────────── */
.signup { display: flex; flex-direction: column; gap: 1.25rem; padding: 2rem 1.6rem 1.6rem; }
.field { display: block; position: relative; }
.field__label { display: block; color: var(--hd-dim); font-size: .85em; letter-spacing: .04em; margin-bottom: .35rem; transition: color .15s; }
.field:focus-within .field__label { color: var(--hd-accent); font-weight: 700; }
.field__input {
  width: 100%;
  background: var(--hd-bg);
  color: var(--hd-fg);
  border: 1px solid var(--hd-line);
  border-radius: 0;
  padding: .6rem .8rem;
  font: inherit;
  outline: 0;
  transition: border-color .15s;
  appearance: none;
}
.field__input:focus { border: 2px solid var(--hd-accent); padding: calc(.6rem - 1px) calc(.8rem - 1px); }
.field__input::placeholder { color: var(--hd-faint); }
.field__input.is-invalid { border-color: var(--hd-red); }
.field__hint { position: absolute; right: .8rem; bottom: .65rem; font-size: .8em; color: var(--hd-accent); pointer-events: none; }
.field__hint.is-bad { color: var(--hd-red); }
select.field__input { background-image: linear-gradient(45deg, transparent 50%, var(--hd-dim) 50%), linear-gradient(135deg, var(--hd-dim) 50%, transparent 50%); background-position: calc(100% - 18px) 55%, calc(100% - 13px) 55%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 2.2rem; }
select.field__input option { background: var(--hd-bg); color: var(--hd-fg); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.signup__progress { font-size: .85em; color: var(--hd-accent); display: flex; flex-direction: column; gap: .1rem; white-space: nowrap; overflow: hidden; }
.signup__actions { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }

/* ── Footer / keyhint bar ─────────────────────────────────────── */
.hd-footer { padding: 2rem var(--gutter) 2.5rem; max-width: var(--maxw); margin: 0 auto; }
.keyhints { display: flex; align-items: center; gap: 1rem; border: 1px solid var(--hd-line); padding: .4rem .8rem; font-size: .85em; color: var(--hd-dim); flex-wrap: wrap; }
.keyhints__mode { background: var(--hd-accent); color: var(--hd-on-accent); font-weight: 700; padding: .05em .6em; letter-spacing: .08em; transition: background .2s; }
.keyhints__mode--insert { background: var(--hd-blue); }
.keyhints__hints { display: flex; gap: 1rem; flex-wrap: wrap; }
.keyhints__hints b { color: var(--hd-accent2); }
.keyhints__status { margin-left: auto; }
.hd-foot { display: flex; gap: .6rem; align-items: baseline; flex-wrap: wrap; margin-top: 1rem; font-size: .85em; color: var(--hd-dim); }
/* Full two-row brand in the footer, same markup as the header; drops to its own line with links below. */
.hd-brand--foot { font-size: calc(1em / .85); margin-right: 0; width: 100%; margin-bottom: .4rem; }
.hd-foot__sep { color: var(--hd-faint); }
.hd-foot__right { margin-left: auto; }

/* ── Modal — thick-bordered centred Block ─────────────────────── */
.modal { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: var(--gutter); background: rgba(7, 8, 11, .7); }
.modal[hidden] { display: none; }
.modal__box { position: relative; background: var(--hd-bg-2); border: 2px solid var(--hd-accent); padding: 1.8rem 1.6rem 1.2rem; max-width: 480px; width: 100%; animation: fadein .2s var(--ease); }
.modal__box--error { border-color: var(--hd-red); }
.modal__box--error .modal__title { color: var(--hd-red); }
.modal__title { position: absolute; top: -.7em; left: .9rem; background: var(--hd-bg-2); padding: 0 .45rem; color: var(--hd-accent); font-weight: 700; font-size: .85em; }
.modal__body { margin-bottom: 1rem; }
.modal__body p + p { margin-top: .6rem; }
.modal__foot { font-size: .85em; }

/* ── Scroll reveal ────────────────────────────────────────────── */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }
.reveal--delay { transition-delay: .15s; }
.grid .reveal:nth-child(2) { transition-delay: .08s; }
.grid .reveal:nth-child(3) { transition-delay: .16s; }
.grid .reveal:nth-child(4) { transition-delay: .24s; }
.grid .reveal:nth-child(5) { transition-delay: .32s; }
.grid .reveal:nth-child(6) { transition-delay: .40s; }

/* ── Responsive ───────────────────────────────────────────────── */
@media (max-width: 1000px) {
  .hero__inner { grid-template-columns: 1fr; gap: 2.5rem; }
  .hero__demo { max-width: 720px; }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .prop { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .hd-header { flex-wrap: wrap; gap: .75rem; }
  .hd-nav { display: none; width: 100%; flex-direction: column; border-top: 1px solid var(--hd-line); padding-top: .5rem; }
  .hd-nav.is-open { display: flex; }
  .hd-header__actions { display: none; }
  .hd-menu-toggle { display: inline-block; }
  .hero { padding-top: 3.5rem; min-height: 0; }
  .hero__scroll { display: none; }
  .section { padding: 4rem var(--gutter); }
  .grid--3 { grid-template-columns: 1fr; }
  .tui { font-size: .72rem; }
  .webmock__body { grid-template-columns: 1fr; }
  .webmock__side { display: none; }
  .webmock__row > span:nth-child(4), .webmock__row > span:nth-child(5) { display: none; }
  .webmock__row { grid-template-columns: 3.4em minmax(4em, 1fr) minmax(0, 3fr); }
  .tui__table th:nth-child(5), .tui__table td:nth-child(5) { display: none; }
  .keyhints__status { margin-left: 0; }
  .hd-foot__right { margin-left: 0; width: 100%; }
}

/* ── Agents / MCP ───────────────────────────────────────────────
   .chat is a static chat transcript inside a .code block; .tools is the
   tool list in the agents section. Colours reuse the record/status tokens. */
.chat { line-height: 1.55; }
.chat__you   { color: var(--hd-accent2); font-weight: 700; }
.chat__agent { color: var(--hd-accent); font-weight: 700; }
.chat__tool  { color: var(--hd-blue); font-weight: 700; }
.chat .del   { color: var(--hd-red); }
.chat .add   { color: var(--hd-accent); }
.code--tight { font-size: .8em; padding: .8rem .9rem; }
#agents .pane .code { margin-bottom: .9rem; }
.tools { list-style: none; margin: .4rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .45rem; font-size: .9em; }
.tools li { display: flex; gap: .5rem; align-items: baseline; flex-wrap: wrap; }
.tools b { color: var(--hd-fg); }
.tools--plain li { display: block; color: var(--hd-dim); line-height: 1.5; }
.tools--plain li > .ok, .tools--plain li > .pend { margin-right: .45em; }
.tools--plain b { color: var(--hd-fg); }
/* grid items default to min-width:auto, so a <pre> would widen the column past the viewport */
.grid > .pane { min-width: 0; }
.tag { display: inline-block; min-width: 3.4em; text-align: center; padding: 0 .4em; font-size: .78em; font-weight: 700; letter-spacing: .06em; border: 1px solid currentColor; }
.tag--read  { color: var(--hd-dim); }
.tag--live  { color: var(--hd-cyan); }
.tag--write { color: var(--hd-yellow); }
.tag--res   { color: var(--hd-accent2); }

/* ── Reduced motion ───────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .hero__scroll, .tui__caret { animation: none; }
  .hero__bg { display: none; }
  * { transition-duration: .01ms !important; }
}