/* NwTwin site, bright startup design system (same system as ctrlpi-cloud).
   Mobile-first: base rules target small (iPhone) screens; the min-width
   blocks at the end restore the tablet/desktop layout. */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --blue: #2563eb;
  --emerald: #10b981;
  --cyan: #06b6d4;
  --violet: #8b5cf6;
  --amber: #f59e0b;
  --rose: #ec4899;
  --brand: rgb(210, 79, 73);
  --brand-dark: rgb(163, 53, 48);
  --ink: #0f172a;
  --slate: #475569;
  --muted: #94a3b8;
  --bg: #f8fafc;
  --card: #ffffff;
  --line: rgba(15, 23, 42, 0.08);
  --radius: 20px;
  --shadow: 0 8px 32px rgba(31, 38, 135, 0.08);
  --shadow-lift: 0 16px 48px rgba(31, 38, 135, 0.14);
}

/* overflow-x: hidden - the hero glow blobs extend past the viewport edges
   by design; without this they make the whole page scroll sideways on phones */
html { scroll-behavior: smooth; overflow-y: scroll; overflow-x: hidden; }

body {
  font-family: 'Inter', -apple-system, sans-serif;
  color: var(--ink);
  background:
    radial-gradient(1000px 500px at 85% -5%, rgba(6, 182, 212, 0.10), transparent 60%),
    radial-gradient(900px 500px at 0% 10%, rgba(16, 185, 129, 0.10), transparent 55%),
    radial-gradient(800px 600px at 55% 105%, rgba(139, 92, 246, 0.07), transparent 60%),
    var(--bg);
  line-height: 1.6;
  min-height: 100vh;
}

h1, h2, h3, h4 { font-family: 'Plus Jakarta Sans', sans-serif; letter-spacing: -0.02em; line-height: 1.15; }
code, pre { font-family: 'JetBrains Mono', monospace; }
a { color: var(--blue); text-decoration: none; }
img, svg { max-width: 100%; }

.wrap { max-width: 760px; margin: 0 auto; padding: 0 20px; }

/* ── Nav ── */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(248, 250, 252, 0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.nav-inner { display: flex; align-items: center; gap: 16px; height: 64px; padding: 0 18px; }
.logo { display: flex; align-items: center; gap: 7px; margin-right: auto; }
/* NT tile, the same red-on-white-letters mark as the favicon, so the browser tab
   and the header read as one thing. The wordmark beside it stays red on the page
   background. */
/* Named .nt-tile, not .badge: site.css already has a .badge pill whose gap and
   padding would leak in. Centred with line-height rather than flex, so the N and
   the T stay one text run and cannot be pushed apart by an inherited gap. */
.logo .nt-tile {
  flex: 0 0 auto;
  display: inline-block; text-align: center;
  width: 29px; height: 29px; line-height: 29px; border-radius: 7px;
  background: var(--brand); color: #fff;
  /* System stack, not Plus Jakarta Sans: its N and T are narrower and sit
     better in the tile. Deliberately identical to the app's navbar mark. */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-weight: 800; font-size: 0.95rem; letter-spacing: -0.5px;
}
.logo .nt-tile i { font-style: italic; }
/* Ink into brand red across the wordmark, the same background-clip:text trick
   the hero headline uses on "Before it breaks". The children inherit the
   transparent colour rather than setting their own, or they would paint over
   the gradient they are supposed to be revealing. */
.logo .mark {
  font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: 1.35rem;
  letter-spacing: -0.5px;
  background: linear-gradient(95deg, var(--ink) 0%, var(--ink) 30%, var(--brand) 95%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.logo .mark .tw { color: inherit; margin-left: 2px; }
.nav a.link { display: none; font-size: 0.9rem; font-weight: 600; color: var(--slate); transition: color 0.15s; }
.nav a.link:hover { color: var(--blue); }
.nav .gh, .cta-row .gh {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  background: linear-gradient(135deg, #1e293b, var(--ink)); color: #fff; border-radius: 50%;
  transition: transform 0.12s, box-shadow 0.15s;
}
.nav .gh:hover, .cta-row .gh:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(15, 23, 42, 0.3); }
.nav .gh svg, .cta-row .gh svg { width: 18px; height: 18px; fill: currentColor; }
.nav .npmb, .cta-row .npmb { background: linear-gradient(135deg, var(--rose), #dc2626); }
.nav .npmb { margin-left: -6px; }
.nav .npmb:hover, .cta-row .npmb:hover { box-shadow: 0 6px 18px rgba(220, 38, 38, 0.4); }

/* On the beta page the GitHub and npm marks are shown but not linked yet, so
   they are spans rather than anchors. Dimmed and stripped of the hover lift, so
   they read as "not open yet" instead of as a link that does nothing. */
.nav span.gh, .cta-row span.gh { opacity: 0.45; cursor: default; }
.nav span.gh:hover, .cta-row span.gh:hover { transform: none; box-shadow: none; }

/* ── Hero ── */
.hero { padding: 44px 20px 48px; text-align: center; }
.hero .eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(16, 185, 129, 0.1); border: 1px solid rgba(16, 185, 129, 0.25);
  color: #059669; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.04em;
  padding: 6px 16px; border-radius: 99px; margin-bottom: 26px;
}
.hero h1 { font-size: clamp(2.1rem, 6vw, 3.9rem); font-weight: 800; max-width: 850px; margin: 0 auto 22px; }
.hero h1 .grad {
  background: linear-gradient(280deg, #ef4444 10%, #dc2626 50%, #991b1b 90%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero .sub { font-size: 1.05rem; color: var(--slate); max-width: 660px; margin: 0 auto 38px; }
.cta-row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.btn {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 0.95rem; font-weight: 700; padding: 13px 26px; border-radius: 14px;
  transition: transform 0.12s, box-shadow 0.15s;
}
.btn:hover { transform: translateY(-2px); }
.btn.primary { background: linear-gradient(100deg, var(--blue), var(--cyan)); color: #fff; box-shadow: 0 8px 24px rgba(37, 99, 235, 0.35); }
.btn.primary:hover { box-shadow: 0 12px 30px rgba(37, 99, 235, 0.45); }
.hero .cta-row .btn {
  border-radius: 10px; padding: 14px 30px;
  transition: transform 0.18s cubic-bezier(.2,.8,.2,1), background 0.18s, border-color 0.18s, box-shadow 0.18s;
}
.hero .cta-row .btn.primary { background: transparent; color: #059669; border: 1.5px solid rgba(16, 185, 129, 0.45); box-shadow: none; }
.hero .cta-row .btn.ghost { background: transparent; color: var(--blue); border: 1.5px solid rgba(37, 99, 235, 0.4); box-shadow: none; }
.hero .cta-row .btn:hover { transform: translateY(-2px); }
.hero .cta-row .btn.primary:hover { background: rgba(16, 185, 129, 0.1); border-color: var(--emerald); box-shadow: 0 8px 24px rgba(16, 185, 129, 0.18); }
.hero .cta-row .btn.ghost:hover { background: rgba(37, 99, 235, 0.08); border-color: var(--blue); box-shadow: 0 8px 24px rgba(37, 99, 235, 0.18); }
.btn.ghost { background: var(--card); color: var(--ink); border: 1.5px solid var(--line); box-shadow: var(--shadow); transition: transform 0.12s, box-shadow 0.15s, border-color 0.15s, color 0.15s; }
.btn.ghost:hover { border-color: var(--blue); color: var(--blue); }

/* ── Sections ── */
section { padding: 52px 0; }
.sec-head { text-align: center; max-width: 660px; margin: 0 auto 36px; }
.sec-head .kicker {
  font-size: 0.78rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase;
  margin-bottom: 12px; display: block;
}
.sec-head h2 { font-size: clamp(1.7rem, 4vw, 2.4rem); font-weight: 800; margin-bottom: 14px; }
.sec-head p { color: var(--slate); font-size: 1.05rem; }
.k-blue { color: var(--blue); } .k-green { color: #059669; } .k-cyan { color: #0891b2; }
.k-violet { color: var(--violet); } .k-amber { color: #d97706; } .k-rose { color: var(--rose); }

/* ── Cards ── */
.grid { display: grid; gap: 16px; }
.grid.cols-3, .grid.cols-2 { grid-template-columns: 1fr; }

.card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 22px; box-shadow: var(--shadow); transition: transform 0.15s, box-shadow 0.2s;
  display: flex; flex-direction: column;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.card .icon {
  width: 52px; height: 52px; border-radius: 14px; font-size: 1.5rem;
  display: flex; align-items: center; justify-content: center; margin-bottom: 18px;
}
.card .icon svg, .doc-hero .icon svg {
  width: 55%; height: 55%; stroke: currentColor; fill: none;
  stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
.icon.i-blue { background: rgba(37, 99, 235, 0.12); color: var(--blue); }
.icon.i-green { background: rgba(16, 185, 129, 0.14); color: var(--emerald); }
.icon.i-cyan { background: rgba(6, 182, 212, 0.14); color: var(--cyan); }
.icon.i-violet { background: rgba(139, 92, 246, 0.13); color: var(--violet); }
.icon.i-amber { background: rgba(245, 158, 11, 0.15); color: var(--amber); }
.icon.i-rose { background: rgba(236, 72, 153, 0.12); color: var(--rose); }
.card h3 { font-size: 1.15rem; font-weight: 800; margin-bottom: 8px; }
.card h3 code { font-size: 0.95em; background: none; padding: 0; color: inherit; }
.card p { color: var(--slate); font-size: 0.92rem; flex: 1; }
.card .links { display: flex; gap: 14px; margin-top: 18px; flex-wrap: wrap; align-items: center; }
.card .links a { font-size: 0.85rem; font-weight: 700; display: inline-flex; align-items: center; gap: 5px; }
.card .links a.more { margin-right: auto; }
.card .links a.ext { color: var(--slate); }
.card .links a.ext:hover { color: var(--ink); }
.card .links a.ext svg { width: 16px; height: 16px; fill: currentColor; }
/* npm icons match the nav's rose/red npm button */
.card .links a.ext[aria-label="npm"] { color: #dc2626; }
.card .links a.ext[aria-label="npm"]:hover { color: #b91c1c; }
.tag {
  display: inline-block; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.06em;
  padding: 3px 10px; border-radius: 99px; margin-bottom: 14px; width: fit-content;
}
.tag.t-bridge { background: rgba(37, 99, 235, 0.12); color: #1d4ed8; }
.tag.t-soon { background: rgba(236, 72, 153, 0.12); color: #be185d; }
.tag.t-meta { background: var(--bg); color: var(--muted); border: 1px solid var(--line); }

/* ── How it works ── */
.flow {
  background: var(--card); border: 1px solid var(--line); border-radius: 24px;
  padding: 14px; box-shadow: var(--shadow);
}
/* The schematic is an inline SVG so it stays crisp at any size and needs no
   asset pipeline. Below 641px it is hidden rather than shrunk or scrolled: at
   phone width its labels are illegible and a cut-off diagram reads as broken -
   the numbered steps underneath say the same thing in readable type. */
.flow .diagram { display: none; overflow-x: auto; }
.flow .diagram svg { display: block; min-width: 620px; max-width: 820px; margin: 0 auto; height: auto; }
.steps { counter-reset: step; margin-top: 0; }
.step { display: flex; gap: 18px; padding: 18px 0; border-top: 1px solid var(--line); }
.step:first-child { border-top: none; }
.step .num {
  counter-increment: step; flex-shrink: 0;
  width: 34px; height: 34px; border-radius: 10px; font-weight: 800; font-size: 0.9rem;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(120deg, var(--blue), var(--cyan)); color: #fff;
}
.step .num::before { content: counter(step); }
.step h4 { font-size: 1rem; margin-bottom: 4px; }
.step p { color: var(--slate); font-size: 0.92rem; }

/* ── Doc pages ── */
.doc-hero { padding: 44px 20px 32px; }
/* A page that opens with a breadcrumb does not need the full hero lead-in as
   well: the crumb is already a line of text sitting where the whitespace was.
   Only the top is overridden, so the responsive left/right/bottom padding still
   applies, and the higher specificity beats the desktop rule at both widths. */
.doc-hero.tight { padding-top: 20px; }
.crumb { font-size: 0.85rem; font-weight: 700; color: var(--slate); display: inline-flex; align-items: center; gap: 6px; margin-bottom: 26px; }
.crumb:hover { color: var(--blue); }
.doc-hero .title-row { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.doc-hero .icon { width: 52px; height: 52px; border-radius: 15px; font-size: 1.5rem; display: flex; align-items: center; justify-content: center; }
.doc-hero h1 { font-size: clamp(1.9rem, 5vw, 2.7rem); font-weight: 800; overflow-wrap: anywhere; }
/* The NT mark in a page title, in place of the generic .icon tile. The brand
   belongs in the hero, but spelling "NwTwin" out beside the headline made two
   equal-weight phrases compete; as a mark it reads as the logo it is. Sized to
   match .doc-hero .icon exactly so the row keeps its rhythm. */
.doc-hero .nt-tile {
  flex: 0 0 auto;
  display: inline-block; text-align: center;
  width: 52px; height: 52px; line-height: 52px; border-radius: 15px;
  background: var(--brand); color: #fff;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-weight: 800; font-size: 1.35rem; letter-spacing: -0.8px;
}
.doc-hero .nt-tile i { font-style: italic; }

/* Named .beta-pill, not .badge: that class carries its own padding and gap,
   tuned for the key/value marks in the row under the title. */
.doc-hero .beta-pill {
  display: inline-flex; align-items: center;
  padding: 5px 13px; border-radius: 99px;
  font-size: 0.72rem; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase;
  color: #fff; background: var(--brand);
}
.doc-hero .tagline { color: var(--slate); font-size: 1rem; max-width: 720px; margin-top: 16px; }
/* The beta page's tagline is three sentences where the licence page's is one
   line, so at the shared size it stops reading as a subtitle and starts
   competing with the headline. Only that one takes .sm. */
.doc-hero .tagline.sm { font-size: 0.88rem; line-height: 1.65; }
.badges { display: flex; gap: 9px; flex-wrap: wrap; margin-top: 20px; align-items: center; }
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.76rem; font-weight: 700; padding: 5px 13px; border-radius: 99px;
  background: var(--card); border: 1px solid var(--line); color: var(--slate);
}
.badge svg { width: 13px; height: 13px; flex-shrink: 0; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* Two-sided badges, the shape project READMEs already use (shields.io: a neutral
   label on the left, a coloured value on the right). Corners are a small radius
   rather than the full 99px pill - a two-tone split reads as one object only if
   the halves meet squarely. */
.badge.kv { padding: 0; border: 0; background: none; overflow: hidden; border-radius: 7px; align-items: stretch; gap: 0; }
.badge.kv .k, .badge.kv .v { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; }
.badge.kv .k { background: #5b6472; color: #fff; font-weight: 600; }
.badge.kv .v { background: var(--slate); color: #fff; font-weight: 700; }
.badge.kv .v.blue    { background: var(--blue); }
.badge.kv .v.emerald { background: var(--emerald); }
.badge.kv .v.violet  { background: var(--violet); }
.badge.kv .v.amber   { background: var(--amber); }
.badge.kv .v.rose    { background: var(--rose); }
.badge.kv .v.cyan    { background: var(--cyan); }
.badge.kv svg { stroke: #fff; }
.badge b { color: var(--ink); }
.doc-hero .cta-row { justify-content: flex-start; margin-top: 26px; align-items: center; }
.btn.sm { padding: 10px 20px; font-size: 0.88rem; border-radius: 12px; }
.btn svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.doc { padding: 8px 20px 56px; }
.doc h2 { font-size: 1.45rem; font-weight: 800; margin: 44px 0 16px; }
.doc h2:first-child { margin-top: 0; }
.doc h3 { font-size: 1.08rem; font-weight: 800; margin: 26px 0 10px; }
.doc p { color: var(--slate); margin-bottom: 14px; max-width: 780px; }
.doc p code, .doc li code, .doc td code {
  background: rgba(37, 99, 235, 0.08); color: #1d4ed8;
  padding: 1px 7px; border-radius: 6px; font-size: 0.86em;
}
.doc p code.chip-gray { background: rgba(15, 23, 42, 0.06); color: var(--slate); }
.doc ul { color: var(--slate); margin: 0 0 14px 4px; list-style: none; }
.doc ul li { padding-left: 26px; position: relative; margin-bottom: 9px; }
.doc ul li::before { content: ''; position: absolute; left: 4px; top: 9px; width: 8px; height: 8px; border-radius: 3px; background: linear-gradient(120deg, var(--emerald), var(--cyan)); }
.doc pre {
  background: #0b1120; color: #e2e8f0; border-radius: 16px; padding: 16px;
  font-size: 0.84rem; line-height: 1.65; overflow-x: auto; margin: 0 0 20px;
  box-shadow: var(--shadow);
}
.doc pre .cm { color: #64748b; }
.doc pre .k { color: #34d399; }
.doc pre .s { color: #7dd3fc; }
/* Copy-to-clipboard button overlaid on a .doc pre, wrapped in .code-block */
.code-block { position: relative; margin: 0 0 20px; }
.code-block pre { margin: 0; padding-right: 46px; }
.copy-btn {
  position: absolute; top: 10px; right: 10px; width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center; padding: 0;
  background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 7px; color: #94a3b8; cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.copy-btn:hover { background: rgba(255, 255, 255, 0.14); color: #e2e8f0; }
.copy-btn svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.copy-btn.copied { color: var(--emerald); border-color: rgba(16, 185, 129, 0.4); }
/* GitHub / npm icons merged into the .badges row: smaller than the hero variant */
.badges .gh {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; background: linear-gradient(135deg, #1e293b, var(--ink));
  color: #fff; border-radius: 50%; transition: transform 0.15s, box-shadow 0.15s;
}
.badges .gh:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(15, 23, 42, 0.3); }
.badges .gh svg { width: 13px; height: 13px; fill: currentColor; }
.badges .npmb { background: linear-gradient(135deg, var(--rose), #dc2626); }
.badges .npmb:hover { box-shadow: 0 6px 18px rgba(220, 38, 38, 0.4); }
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 16px; background: var(--card); box-shadow: var(--shadow); margin: 0 0 20px; }
.doc table { border-collapse: collapse; width: 100%; font-size: 0.88rem; }
.doc th { text-align: left; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); padding: 10px 12px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.doc td { padding: 10px 12px; border-bottom: 1px solid var(--line); color: var(--slate); vertical-align: top; }
.doc tr:last-child td { border-bottom: none; }
.doc td:first-child { white-space: nowrap; font-weight: 600; color: var(--ink); }
.callout {
  display: flex; gap: 14px; background: rgba(6, 182, 212, 0.07);
  border: 1px solid rgba(6, 182, 212, 0.22); border-radius: 16px;
  padding: 14px 16px; margin: 0 0 20px; font-size: 0.92rem; color: var(--slate);
}
.callout .ico { flex-shrink: 0; color: var(--cyan); }
.callout .ico svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.callout b { color: var(--ink); }
.callout.warn { background: rgba(236, 72, 153, 0.08); border-color: rgba(236, 72, 153, 0.28); }
.callout.warn .ico { color: var(--rose); }

.chat-ico { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; vertical-align: -3px; margin-right: 4px; }

/* ── Motion & modern touches ── */
@keyframes fadeUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
.fade-1, .fade-2, .fade-3, .fade-4 { animation: fadeUp 0.7s cubic-bezier(0.16, 1, 0.3, 1) both; }
.fade-2 { animation-delay: 0.12s; }
.fade-3 { animation-delay: 0.24s; }
.fade-4 { animation-delay: 0.36s; }
@media (prefers-reduced-motion: reduce) {
  .fade-1, .fade-2, .fade-3, .fade-4 { animation: none; }
}
.dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--emerald); animation: pulse 1.8s ease-in-out infinite; flex-shrink: 0;
}

/* Glow blobs behind the hero. On phones the hero spans the full viewport, so
   clip the blobs' horizontal bleed there - otherwise they widen the page. */
.hero { position: relative; overflow-x: clip; }
.hero .blob {
  position: absolute; border-radius: 50%; filter: blur(70px); z-index: -1; pointer-events: none;
}
.hero .blob.b1 { width: 380px; height: 380px; top: -60px; left: -120px; background: rgba(6, 182, 212, 0.18); }
.hero .blob.b2 { width: 320px; height: 320px; top: 40px; right: -100px; background: rgba(139, 92, 246, 0.14); }
.hero .blob.b3 { width: 260px; height: 260px; bottom: -120px; left: 38%; background: rgba(16, 185, 129, 0.16); }

/* Hero terminal mock */
.term {
  max-width: 760px; margin: 40px auto 0; text-align: left;
  background: #0b1120; border-radius: 18px; overflow: hidden;
  box-shadow: 0 24px 64px rgba(15, 23, 42, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.term .bar {
  display: flex; align-items: center; gap: 7px; padding: 12px 16px;
  background: rgba(255, 255, 255, 0.04); border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.term .bar i { width: 11px; height: 11px; border-radius: 50%; }
.term .bar i:nth-child(1) { background: #f87171; }
.term .bar i:nth-child(2) { background: #fbbf24; }
.term .bar i:nth-child(3) { background: #34d399; }
.term .bar span { margin-left: 8px; font-family: 'JetBrains Mono', monospace; font-size: 0.72rem; color: #64748b; }
.term pre {
  padding: 14px 16px; font-size: 0.74rem; line-height: 1.75; color: #e2e8f0;
  overflow-x: auto; font-family: 'JetBrains Mono', monospace;
}
.term .p { color: #34d399; }
.term .c { color: #7dd3fc; }
.term .d { color: #64748b; }
.term .w { color: #fbbf24; }

/* Card accent bar on hover */
.card { position: relative; overflow: hidden; }
.card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--blue), var(--cyan), var(--emerald));
  opacity: 0; transition: opacity 0.2s;
}
.card:hover::before { opacity: 1; }

/* ── Contact ── */
/* ── Coming soon / subscribe ── */
.subscribe { text-align: center; padding-bottom: 16px; }
.subscribe .kicker { font-size: 0.78rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 12px; display: block; }
.subscribe h2 { font-size: 1.9rem; margin-bottom: 10px; }
.subscribe > .wrap > p { color: var(--slate); max-width: 520px; margin: 0 auto 24px; }
.subscribe-form { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; max-width: 520px; margin: 0 auto; }
.subscribe-form input[type="email"] {
  flex: 1; min-width: 220px; font-size: 0.95rem; font-family: inherit; color: var(--ink);
  padding: 13px 18px; border-radius: 10px; border: 1.5px solid var(--line); background: var(--card);
}
.subscribe-form input[type="email"]:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15); }
.subscribe-form input[name="website"] { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.subscribe-form .btn.primary { background: transparent; color: #059669; border: 1.5px solid rgba(16, 185, 129, 0.45); box-shadow: none; cursor: pointer; font-family: inherit; }
.subscribe-form .btn.primary:hover { background: rgba(16, 185, 129, 0.1); border-color: var(--emerald); box-shadow: 0 8px 24px rgba(16, 185, 129, 0.18); }
.subscribe-form .btn[disabled] { opacity: 0.6; cursor: default; transform: none; }
/* Early-adopter opt-in. Sits outside .subscribe-form on purpose: the form is a
   centred flex row sized for the field and the button, and a full-width label
   inside it would either stretch that row or wrap into it. */
/* Sized to sit on one line under the 520px form on desktop, and tucked close to
   the field so it reads as part of it. It still wraps on narrow screens rather
   than forcing the page sideways. The left padding is the email field's border
   plus its text padding (1.5px + 18px), so the checkbox lines up with the
   placeholder text above rather than with the field's outer edge. */
.beta-opt {
  display: flex; align-items: center; gap: 8px;
  max-width: 520px; margin: 8px auto 0; padding-left: 19.5px;
  text-align: left; color: var(--slate); font-size: 0.78rem;
  cursor: pointer;
}
.beta-opt input[type="checkbox"] {
  flex: 0 0 auto; width: 15px; height: 15px; margin: 0;
  accent-color: var(--emerald); cursor: pointer;
}
.beta-opt:hover span { color: var(--ink); }

.subscribe-msg { min-height: 1.4em; margin-top: 68px; font-size: 1.05rem; font-weight: 700; }
/* Reserve no space at all until there is something to say, so the gap above the
   footer contact line stays tight on a fresh page load. */
.subscribe-msg:empty { min-height: 0; margin-top: 0; }
.subscribe-msg.ok { color: var(--emerald); }
.subscribe-msg.err { color: var(--rose); }

/* ── Pre-footer (contact line, above the footer's border) ── */
.pre-foot { display: flex; align-items: baseline; justify-content: center; gap: 8px; padding-top: 40px; }
.pre-foot a { font-size: 0.95rem; font-weight: 700; color: var(--blue); }
.pre-foot a:hover { color: var(--brand); }
.foot-note { font-size: 0.88rem; font-weight: 600; color: var(--slate); }

/* ── Footer ── */
footer { border-top: 1px solid var(--line); padding: 20px 0 52px; margin-top: 40px; }
.foot { display: flex; align-items: center; justify-content: center; gap: 24px; flex-wrap: wrap; }
.foot a { font-size: 0.88rem; font-weight: 600; color: var(--muted); }
.foot a:hover { color: var(--blue); }
.foot .copy { width: 100%; font-size: 0.8rem; color: var(--muted); margin-top: 0; text-align: center; }

/* ── ≥641px: two-column card grids, and the schematic appears ── */
@media (min-width: 641px) {
  .grid.cols-3, .grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
  .flow .diagram { display: block; }
  .steps { margin-top: 28px; }
}

/* ── ≥761px: tablet/desktop spacing & full nav ── */
@media (min-width: 761px) {
  .wrap { padding: 0 24px; }
  .nav-inner { gap: 28px; padding: 0 28px; }
  .nav a.link { display: inline; }
  .nav .npmb { margin-left: -18px; }
  .hero { padding: 64px 24px; overflow-x: visible; }
  .hero .sub { font-size: 1.18rem; }
  .term { margin: 52px auto 0; }
  .term pre { padding: 18px 22px; font-size: 0.8rem; }
  section { padding: 72px 0; }
  .sec-head { margin-bottom: 48px; }
  .grid { gap: 22px; }
  .card { padding: 28px; }
  .flow { padding: 40px; }
  .steps { margin-top: 40px; }
  .doc-hero { padding: 64px 24px 40px; }
  .doc-hero .icon { width: 64px; height: 64px; border-radius: 18px; font-size: 1.9rem; }
  .doc-hero .tagline { font-size: 1.1rem; }
  .doc-hero .tagline.sm { font-size: 0.95rem; }
  .doc { padding: 8px 24px 72px; }
  .doc pre { padding: 20px 24px; }
  .doc th { padding: 12px 18px; }
  .doc td { padding: 11px 18px; }
  .callout { padding: 16px 20px; }
}

/* ── ≥901px: three-column card grid ── */
@media (min-width: 901px) {
  .grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
}