/* ============================================================
   LocallyAI — "Console"
   Design language modelled on dyad.sh: a single typeface
   (Geist), a warm near-black ground, elevated bordered cards
   in bento grids, small eyebrow pills over big section heads,
   rounded solid CTAs, and mini product-UI vignettes inside
   cards instead of illustrations. Accent is LocallyAI copper
   in the role dyad gives its violet.

   Deliberately single-theme (dark): every colour is painted
   explicitly, nothing inherited from the host.
   ============================================================ */

:root {
  --bg:        #131110;   /* page ground — warm near-black */
  --surface:   #1B1817;   /* card */
  --surface-2: #242020;   /* raised chip inside a card */
  --line:      #35302C;   /* card borders */
  --line-soft: #2A2624;   /* hairlines inside cards */
  --text:      #EDEAE5;   /* primary text */
  --muted:     #A9A29A;   /* secondary text — 7:1 on bg */
  --faint:     #7D766E;   /* tertiary/micro labels — 4.6:1 */
  --copper:    #C87137;   /* brand accent, lifted for dark ground */
  --copper-hi: #E09A63;   /* links, hovers, highlights */
  --copper-btn:#A4531F;   /* button fill — white text 4.9:1 */
  --green:     #7FB98A;   /* status: good */
  --amber:     #D9A662;   /* status: attention */

  --sans: 'Geist', 'Helvetica Neue', Arial, sans-serif;
  --mono: 'Geist Mono', ui-monospace, Menlo, monospace;

  --wrap: 74rem;
  --pad: clamp(1rem, 4vw, 2rem);
  --r: 12px;
  --r-lg: 16px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 5rem; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 1.0625rem;          /* 17px */
  line-height: 1.6;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; height: auto; }
figure { margin: 0; }

/* background dot matrix — fixed behind everything, drawn by bg.js */
#bg { position: fixed; inset: 0; z-index: -1; pointer-events: none; }

/* card reveals — slide in from alternating sides with a slight overshoot,
   applied by site.js; each landing pings the dot matrix */
.rv { opacity: 0; transform: translateX(-34px); }
.rv-r { transform: translateX(34px); }
.rv-in {
  opacity: 1; transform: none;
  /* 70% speed — the landing reads, rather than flashes */
  transition: opacity 0.72s ease, transform 0.93s cubic-bezier(0.22, 0.9, 0.3, 1.12);
}
@media (prefers-reduced-motion: reduce) {
  .rv, .rv-r { opacity: 1; transform: none; transition: none; }
}

/* line-art PNGs are copper-on-transparent; lift them on dark surfaces */
.art { filter: brightness(1.5) saturate(0.9); }

/* ---------------- type ---------------- */
h1, h2, h3, h4 { margin: 0 0 0.5em; color: var(--text); text-wrap: balance; }
h1 { font-size: clamp(2.5rem, 6.5vw, 4.5rem); font-weight: 800; line-height: 1.02; letter-spacing: -0.025em; }
h2 { font-size: clamp(1.65rem, 3.2vw, 2.25rem); font-weight: 700; line-height: 1.12; letter-spacing: -0.02em; }
h3 { font-size: 1.05rem; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; }
p { margin: 0 0 1em; max-width: 62ch; }
p:last-child { margin-bottom: 0; }

a { color: var(--copper-hi); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 0.16em; }
:focus-visible { outline: 2px solid var(--copper-hi); outline-offset: 3px; border-radius: 4px; }

ul, ol { margin: 0 0 1em; padding-left: 1.2em; max-width: 62ch; }
li { margin-bottom: 0.4em; }
li::marker { color: var(--copper); }
strong { font-weight: 600; color: var(--text); }

.sub { color: var(--muted); }
.sub a, a.u { color: var(--text); text-decoration: underline; text-underline-offset: 0.16em; text-decoration-color: var(--copper); }
.sub a:hover, a.u:hover { color: var(--copper-hi); }
.lede { font-size: clamp(1.1rem, 1.6vw, 1.25rem); line-height: 1.55; color: var(--muted); max-width: 56ch; }
.micro {
  font-family: var(--mono); font-size: 0.68rem; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint);
}

.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); }
.skip-link { position: absolute; top: -4rem; left: 0.5rem; z-index: 99; background: var(--text); color: var(--bg); padding: 0.6rem 1rem; border-radius: 8px; font-size: 0.85rem; font-weight: 600; }
.skip-link:focus { top: 0.5rem; text-decoration: none; }

/* ---------------- shell ---------------- */
.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--pad); }
.section { padding-block: clamp(3.25rem, 7vw, 5.5rem); }

/* eyebrow pill + section head */
.pill {
  display: inline-flex; align-items: center; gap: 0.45rem;
  font-size: 0.78rem; font-weight: 600; letter-spacing: 0.02em;
  color: var(--copper-hi); background: rgba(200, 113, 55, 0.12);
  border: 1px solid rgba(200, 113, 55, 0.35);
  padding: 0.28rem 0.75rem; border-radius: 999px;
  margin-bottom: 1.1rem;
}
.head { max-width: 44rem; margin-bottom: clamp(1.75rem, 3.5vw, 2.75rem); }
.head p { color: var(--muted); }
.head--center { margin-inline: auto; text-align: center; }
.head--center p { margin-inline: auto; }

/* ---------------- nav ---------------- */
.top {
  position: sticky; top: 0; z-index: 40;
  background: rgba(19, 17, 16, 0.88);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line-soft);
}
.top__in {
  max-width: var(--wrap); margin-inline: auto; padding-inline: var(--pad);
  display: flex; align-items: center; gap: 1.25rem; min-height: 3.6rem;
}
.brand { font-size: 1.15rem; font-weight: 700; letter-spacing: -0.03em; color: var(--text); white-space: nowrap; display: inline-flex; align-items: baseline; }
.brand:hover { text-decoration: none; }
.brand em { font-style: normal; color: var(--copper-hi); }
.top nav { display: flex; align-items: center; gap: 0.25rem; margin-left: auto; }
.top nav a {
  font-size: 0.88rem; font-weight: 500; color: var(--muted);
  padding: 0.45rem 0.7rem; border-radius: 8px;
}
.top nav a:hover { color: var(--text); background: var(--surface-2); text-decoration: none; }
.top nav a[aria-current="page"] { color: var(--text); background: var(--surface); }
.top nav a.cta {
  background: var(--copper-btn); color: #FFF7F0; font-weight: 600;
  margin-left: 0.5rem;
}
.top nav a.cta:hover { background: #B45D26; color: #FFF7F0; }
.menu-btn { display: none; }

@media (max-width: 56rem) {
  .menu-btn {
    display: block; margin-left: auto;
    background: var(--surface-2); color: var(--text); border: 1px solid var(--line);
    font-family: var(--sans); font-size: 0.85rem; font-weight: 600;
    padding: 0.45rem 0.9rem; border-radius: 8px; cursor: pointer;
  }
  .top nav {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0.15rem;
    background: var(--bg); border-bottom: 1px solid var(--line);
    padding: 0.75rem var(--pad) 1rem; margin: 0;
  }
  .top nav.is-open { display: flex; }
  .top nav a { padding: 0.7rem 0.75rem; font-size: 1rem; }
  .top nav a.cta { margin-left: 0; text-align: center; margin-top: 0.5rem; }
}

/* ---------------- hero ---------------- */
.hero { padding-block: clamp(3rem, 7vw, 5.5rem) clamp(2.5rem, 5vw, 4rem); }
.hero .lede { margin-top: 0.75rem; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; margin-top: 1.75rem; }
.hero__proof { margin-top: 1.1rem; }

/* ---------------- buttons ---------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  font-family: var(--sans); font-size: 0.95rem; font-weight: 600;
  padding: 0.72rem 1.35rem; border-radius: 10px;
  background: var(--copper-btn); color: #FFF7F0; border: 1px solid transparent;
}
.btn:hover { background: #B45D26; text-decoration: none; color: #FFF7F0; }
.btn--ghost { background: var(--surface); color: var(--text); border-color: var(--line); }
.btn--ghost:hover { background: var(--surface-2); }
.btn small { display: block; font-weight: 400; font-size: 0.72rem; opacity: 0.85; }

/* ---------------- app window (hero centrepiece) ---------------- */
.window {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.6);
}
.window__bar {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.6rem 0.9rem;
  background: var(--surface-2);
  border-bottom: 1px solid var(--line-soft);
}
.window__dots { display: flex; gap: 0.35rem; }
.window__dots i { width: 0.7rem; height: 0.7rem; border-radius: 50%; background: var(--line); }
.window__dots i:nth-child(1) { background: #C4574E; }
.window__dots i:nth-child(2) { background: #C9A24A; }
.window__dots i:nth-child(3) { background: #6FA86F; }
.window__title { font-family: var(--mono); font-size: 0.7rem; color: var(--faint); margin-inline: auto; letter-spacing: 0.06em; }
.window__body { padding: clamp(1.25rem, 3vw, 2.25rem); }

/* ---------------- bento grids ---------------- */
.grid { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 56rem) {
  .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .grid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .span-2 { grid-column: span 2; }
  .span-3 { grid-column: span 3; }
  .span-4 { grid-column: span 4; }
  .span-5 { grid-column: span 5; }
}
.grid--top { align-items: start; }

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 1.35rem;
  display: flex; flex-direction: column; gap: 0.55rem;
}
.card > p { color: var(--muted); font-size: 0.95rem; max-width: none; }
.card h3 { margin: 0; }
.card--pad { padding: clamp(1.35rem, 3vw, 2rem); }
.card--accent { border-color: rgba(200, 113, 55, 0.5); }
.card__art { margin-top: auto; padding-top: 0.75rem; }

/* ---------------- mini product-UI vignettes ---------------- */
.ui { margin-top: auto; padding-top: 0.9rem; display: flex; flex-direction: column; gap: 0.45rem; }
.ui__row {
  display: flex; align-items: center; gap: 0.6rem;
  background: var(--surface-2); border: 1px solid var(--line-soft);
  border-radius: 8px; padding: 0.5rem 0.7rem;
  font-family: var(--mono); font-size: 0.72rem; color: var(--muted);
}
.ui__row b { color: var(--text); font-weight: 500; }
.ui__row .end { margin-left: auto; color: var(--faint); }
.chip {
  display: inline-flex; align-items: center; gap: 0.35rem;
  font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.04em;
  padding: 0.18rem 0.55rem; border-radius: 999px;
  border: 1px solid var(--line); color: var(--muted); white-space: nowrap;
}
.chip--on { color: var(--green); border-color: rgba(127, 185, 138, 0.4); }
.chip--on::before { content: "●"; font-size: 0.55em; }
.chip--warn { color: var(--amber); border-color: rgba(217, 166, 98, 0.4); }
.chip--copper { color: var(--copper-hi); border-color: rgba(200, 113, 55, 0.45); }

/* Console mockup — mirrors the real product chrome */
.conrail {
  display: flex; align-items: center; gap: 0.5rem;
  padding-bottom: 0.85rem; border-bottom: 1px solid var(--line-soft); margin-bottom: 1.1rem;
}
.conrail i { width: 1.15rem; height: 1.15rem; border: 1px solid var(--line); border-radius: 4px; display: block; }
.conrail i.on { border-color: var(--copper); background: rgba(200, 113, 55, 0.14); }
.conrail .dev {
  font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.1em;
  background: var(--copper-btn); color: #FFF7F0; padding: 0.16rem 0.42rem; border-radius: 4px;
}
.conrail .me {
  margin-left: auto; width: 1.35rem; height: 1.35rem; border-radius: 50%;
  background: var(--surface-2); border: 1px solid var(--line);
  font-family: var(--mono); font-size: 0.58rem; color: var(--muted);
  display: flex; align-items: center; justify-content: center;
}
.conhead { display: flex; align-items: baseline; gap: 0.75rem; flex-wrap: wrap; }
.conhead .t { font-size: 1.25rem; font-weight: 700; letter-spacing: -0.02em; }
.conhead .acts { margin-left: auto; display: flex; gap: 0.45rem; }
.contabs {
  display: flex; gap: 1.2rem; font-size: 0.8rem; font-weight: 600; color: var(--faint);
  border-bottom: 1px solid var(--line-soft); margin: 0.9rem 0 0.95rem;
}
.contabs b { color: var(--text); border-bottom: 2px solid var(--copper); padding-bottom: 0.5rem; margin-bottom: -1px; font-weight: 600; }
.contabs span { padding-bottom: 0.5rem; }

/* prompt mock (hero window) */
.prompt {
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: 10px; padding: 0.85rem 1rem;
  display: flex; align-items: center; gap: 0.75rem;
  color: var(--muted); font-size: 0.95rem;
}
.prompt .btn { margin-left: auto; padding: 0.45rem 0.95rem; font-size: 0.85rem; flex: none; }
.suggest { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.8rem; }

/* ---------------- data rows (specs & prices) ---------------- */
.rows { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.rows > div {
  display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; align-items: baseline;
  padding: 0.85rem 1.1rem; background: var(--surface);
}
.rows > div + div { border-top: 1px solid var(--line-soft); }
.rows dt { font-size: 0.85rem; font-weight: 500; color: var(--muted); min-width: 11rem; }
.rows dd { margin: 0; margin-left: auto; font-family: var(--mono); font-size: 0.85rem; color: var(--text); text-align: right; }
.rows dd em { font-style: normal; color: var(--faint); }
@media (max-width: 36rem) { .rows dd { margin-left: 0; text-align: left; width: 100%; } }
dl.rows { margin: 0; }

/* ---------------- memory bar ---------------- */
.membar { display: flex; height: 2.1rem; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.membar span { display: block; min-width: 2px; }
.membar span + span { border-left: 1px solid var(--bg); }
.membar .m1 { background: rgba(200, 113, 55, 0.85); }
.membar .m2 { background: rgba(200, 113, 55, 0.6); }
.membar .m3 { background: rgba(200, 113, 55, 0.4); }
.membar .m4 { background: rgba(200, 113, 55, 0.22); }
.membar .sys { background: repeating-linear-gradient(45deg, rgba(169,162,154,0.5) 0 3px, rgba(169,162,154,0.15) 3px 7px); }
.membar .spare { background: var(--surface-2); }
.membar__key {
  list-style: none; padding: 0; margin: 0.7rem 0 0;
  display: flex; flex-wrap: wrap; gap: 0.3rem 1.1rem;
  font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.03em;
  text-transform: uppercase; color: var(--faint); max-width: none;
}
.membar__key li { display: flex; gap: 0.4rem; align-items: baseline; margin: 0; }
.membar__key i { width: 0.65rem; height: 0.65rem; flex: none; border-radius: 2px; border: 1px solid var(--faint); }
.membar__key b { color: var(--muted); font-weight: 500; }

/* ---------------- schematics (inline SVG, reused) ---------------- */
.schematic { width: 100%; height: auto; }
.schematic text { font-family: var(--mono); fill: var(--copper-hi); }
.schematic .lbl { font-size: 15px; letter-spacing: 0.05em; text-transform: uppercase; }
.schematic .lbl--sm { font-size: 13px; }
@media (max-width: 45rem) { .schematic .lbl { font-size: 17px; } .schematic .lbl--sm { font-size: 15px; } }
.schematic .lbl--stone { fill: var(--faint); }
.schematic .lbl--ink { fill: var(--text); }
.schematic .ln { fill: none; stroke: var(--copper); stroke-width: 1.25; }
.schematic .ln--thin { stroke-width: 0.9; }
.schematic .ln--ink { stroke: var(--muted); stroke-width: 1.4; }
.schematic .ln--stone { stroke: var(--faint); stroke-width: 0.9; }
.schematic .fill-wash { fill: rgba(200, 113, 55, 0.1); }
.schematic .dot { fill: var(--copper-hi); }
@media (prefers-reduced-motion: no-preference) {
  .schematic .draw { stroke-dasharray: var(--len, 600); stroke-dashoffset: var(--len, 600); }
  .schematic.is-drawn .draw { animation: draw 1.1s cubic-bezier(0.22,0.61,0.36,1) forwards; animation-delay: var(--delay, 0s); }
  .schematic .fade { opacity: 0; }
  .schematic.is-drawn .fade { animation: fadein 0.45s ease forwards; animation-delay: var(--delay, 0.4s); }
}
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes fadein { to { opacity: 1; } }

/* ---------------- FAQ ---------------- */
.faq { display: flex; flex-direction: column; gap: 0.6rem; max-width: 46rem; }
.faq details { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); }
.faq summary {
  list-style: none; cursor: pointer; position: relative;
  padding: 0.95rem 3rem 0.95rem 1.15rem;
  font-weight: 600; font-size: 0.98rem; letter-spacing: -0.01em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: 1.1rem; top: 0.82rem;
  font-size: 1.15rem; font-weight: 400; color: var(--copper-hi);
}
.faq details[open] summary::after { content: "–"; }
.faq details > div { padding: 0 1.15rem 1.05rem; color: var(--muted); font-size: 0.95rem; }
.faq details > div p { max-width: none; }

/* ---------------- article (guides) ---------------- */
.article { max-width: 40rem; }
.article p, .article li { color: #D6D1CA; }
.article h2 { margin-top: 2em; font-size: clamp(1.35rem, 2.2vw, 1.7rem); }
.article h3 { margin-top: 1.6em; font-size: 1.1rem; }
.article blockquote { margin: 1.75rem 0; padding: 0.9rem 1.15rem; background: var(--surface); border-left: 3px solid var(--copper); border-radius: 0 var(--r) var(--r) 0; }
.article .note { font-size: 0.88rem; color: var(--muted); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 0.9rem 1.1rem; }
.article .rows dt { min-width: 8rem; }

.byline { display: flex; gap: 0.8rem; align-items: center; }
.byline__face { width: 2.6rem; height: 2.6rem; flex: none; border-radius: 50%; border: 1px solid var(--line); background: var(--surface-2); font-family: var(--mono); font-size: 0.48rem; color: var(--faint); display: flex; align-items: center; justify-content: center; text-align: center; }
.byline p { margin: 0; }
.byline .name { font-weight: 600; font-size: 0.95rem; }
.byline .bio { font-size: 0.8rem; color: var(--muted); }

.note { font-size: 0.88rem; color: var(--muted); }
.crumbs { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.04em; color: var(--faint); margin: 0 0 1.25rem; }
.crumbs a { color: var(--faint); }
.crumbs a:hover { color: var(--copper-hi); }
.crumbs span { margin-inline: 0.4rem; opacity: 0.5; }

/* ---------------- quote block ---------------- */
.quote {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: clamp(1.5rem, 4vw, 2.5rem); max-width: 46rem; margin-inline: auto;
}
.quote p.q { font-size: clamp(1.1rem, 1.8vw, 1.3rem); line-height: 1.5; color: var(--text); max-width: none; }

/* ---------------- pricing cards ---------------- */
.price-card { position: relative; }
.price-card .amount { font-size: 1.9rem; font-weight: 700; letter-spacing: -0.02em; margin: 0.2rem 0 0.1rem; }
.price-card .amount small { font-size: 0.85rem; font-weight: 500; color: var(--muted); letter-spacing: 0; }
.price-card ul { list-style: none; padding: 0; margin: 0.6rem 0 0; font-size: 0.92rem; color: var(--muted); max-width: none; }
.price-card li { padding-left: 1.25rem; position: relative; margin-bottom: 0.45rem; }
.price-card li::before { content: "✓"; position: absolute; left: 0; color: var(--copper-hi); font-weight: 600; }
.flag {
  position: absolute; top: -0.7rem; left: 1.1rem;
  font-family: var(--mono); font-size: 0.6rem; font-weight: 500; letter-spacing: 0.12em;
  background: var(--copper-btn); color: #FFF7F0;
  padding: 0.22rem 0.6rem; border-radius: 999px;
}

/* ---------------- form ---------------- */
.form label { display: block; font-size: 0.82rem; font-weight: 600; color: var(--muted); margin-bottom: 0.35rem; }
.form input, .form textarea {
  width: 100%; font-family: var(--sans); font-size: 0.95rem; color: var(--text);
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 8px;
  padding: 0.65rem 0.8rem; margin-bottom: 1.1rem;
}
.form input:focus, .form textarea:focus { outline: 2px solid var(--copper); outline-offset: 0; border-color: transparent; }
.form textarea { min-height: 6rem; resize: vertical; }
.form ::placeholder { color: var(--faint); }
.form .hp { position: absolute; left: -9999px; }

/* Once sent, the form centres the confirmation in whatever height it has.
   On the two-column contact layout the card is stretched by the taller left
   column, so the message sits level with the contact details. Stacked on
   mobile the card has no row to fill and closes up around the message. */
/* flex:1 matters — .card is a column flex container, so without it the form
   sits at content height and the message pins to the top of a stretched card. */
.form--done { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; }
.form--done .form__done { width: 100%; }

/* Inline confirmation that replaces the form after a successful send.
   Reuses the status language already on the site: green for good, amber for
   attention, mono micro label over a raised chip ground. */
.form__done {
  background: var(--surface-2);
  border: 1px solid rgba(127, 185, 138, 0.38);
  border-radius: var(--r);
  padding: 1.15rem 1.25rem;
}
/* Focus moves here programmatically so screen readers land on the result.
   :focus-visible keeps the ring for keyboard users without painting a copper
   alert border over a green success panel for everyone who used a mouse. */
.form__done:focus { outline: none; }
.form__done:focus-visible { outline: 2px solid var(--copper); outline-offset: 2px; }
.form__done-tag {
  font-family: var(--mono); font-size: 0.68rem; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--green);
  display: flex; align-items: center; gap: 0.45rem; margin: 0 0 0.5rem;
}
.form__done-tag::before { content: "\25CF"; font-size: 0.55em; }
.form__done-body { margin: 0; font-size: 0.95rem; line-height: 1.6; color: var(--text); }

.form__done--error { border-color: rgba(217, 166, 98, 0.42); margin-bottom: 1.1rem; }
.form__done--error .form__done-tag { color: var(--amber); }
.form__done--error .form__done-body { color: var(--muted); }

/* ---------------- footer ---------------- */
.foot { border-top: 1px solid var(--line-soft); margin-top: clamp(3rem, 6vw, 5rem); padding: clamp(2.25rem, 4vw, 3.25rem) 0 6.5rem; }
.foot__grid { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr)); }
.foot h4 { font-size: 0.78rem; font-weight: 600; color: var(--faint); letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: 0.9rem; }
.foot ul { list-style: none; padding: 0; margin: 0; }
.foot li { margin-bottom: 0.5rem; }
.foot a { color: var(--muted); font-size: 0.9rem; }
.foot a:hover { color: var(--text); }
.foot .brand { font-size: 1.2rem; }
.foot__nap { font-size: 0.84rem; color: var(--faint); line-height: 1.8; margin-top: 0.75rem; }
.foot__nap a { font-size: 0.84rem; color: var(--muted); }
.foot__legal {
  display: flex; flex-wrap: wrap; gap: 0.5rem 2rem; justify-content: space-between;
  border-top: 1px solid var(--line-soft); margin-top: 2.25rem; padding-top: 1.25rem;
  font-size: 0.8rem; color: var(--faint);
}
.foot__legal a { color: var(--faint); font-size: 0.8rem; }

/* ---------------- mobile dock ---------------- */
.dock { display: none; }
@media (max-width: 55rem) {
  .dock {
    display: flex; position: fixed; inset: auto 0 0 0; z-index: 50;
    background: rgba(19, 17, 16, 0.92); backdrop-filter: blur(10px);
    border-top: 1px solid var(--line);
    padding: 0.55rem var(--pad) calc(0.55rem + env(safe-area-inset-bottom));
    gap: 0.8rem; align-items: center; justify-content: space-between;
  }
  .dock .micro { flex: none; }
  .dock .btn { flex: 1; }
  body { padding-bottom: 4.4rem; }
  .foot { padding-bottom: 2.5rem; }
}
@media print { .dock, .top { display: none; } }

/* footnotes */
.footnotes { border-top: 1px solid var(--line-soft); margin-top: 2rem; padding-top: 1rem; max-width: 62ch; }
.footnotes ol { padding-left: 1.2rem; margin: 0; }
.footnotes li { font-size: 0.78rem; line-height: 1.65; color: var(--faint); }
sup a { font-size: 0.72em; }

/* real screenshots — window--shot frames a full capture, .shot is a bare cropped figure */
.window--shot img { display: block; width: 100%; height: auto; }
.shot { margin: 0; text-align: center; }
.shot img {
  width: 100%; max-width: 54rem; height: auto; margin-inline: auto;
  border: 1px solid var(--line); border-radius: var(--r);
  background: #131110;
}
.shot figcaption { margin-top: 0.7rem; color: var(--faint); }
.shot--plain img { border: none; background: transparent; border-radius: 0; }

/* screenshot slot — a reserved frame for a real Console/CLI capture */
.shotwait {
  border: 1px dashed var(--line);
  border-radius: var(--r);
  background: rgba(27, 24, 23, 0.5);
  padding: 2.25rem 1.5rem;
  display: flex; flex-direction: column; gap: 0.4rem;
  align-items: center; justify-content: center; text-align: center;
  min-height: 11rem;
}
.shotwait .micro { color: var(--copper-hi); }
.shotwait p { color: var(--faint); font-size: 0.85rem; max-width: 44ch; margin: 0; }