/* Nib site — single stylesheet. No build step, no framework, no external fonts.
   Two global themes on <html data-theme="dark|light">. Every color comes from
   a token below; components never hardcode a color. */

:root,
html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #08090b;
  --bg-2: #0f1115;
  --bg-3: #14171d;
  --line: #22262e;
  --line-soft: #1a1d23;
  --text: #f4f1ea;
  --muted: #8b909a;
  --muted-2: #7b8290;      /* lifted from #6b717c: 4.06:1 failed the 4.5:1 rule */
  --ember: #ff5c35;        /* solid fills, both themes */
  --ember-hover: #ff7048;
  --accent: #ff5c35;       /* links and text emphasis: theme-dependent */
  --on-ember: #0a0a0a;
  --mint: #6fe3c4;
  --amber: #ffb454;
  --on-mint: #06251c;      /* text on solid --mint fills */
  --on-amber: #2b1a00;     /* text on solid --amber fills */
  --err: #ff7a5c;
  --add-bg: rgba(111, 227, 196, 0.10);
  --add-tx: #6fe3c4;
  --del-bg: rgba(255, 92, 53, 0.10);
  --del-tx: #ff8b70;
  --header-bg: rgba(8, 9, 11, 0.82);
  --glow: rgba(255, 92, 53, 0.14);
  --shadow: rgba(0, 0, 0, 0.45);
  --focus-ring: rgba(255, 92, 53, 0.35);

  /* legacy aliases (older inline styles) */
  --ink: var(--bg);
  --ink-2: var(--bg-2);
  --ink-3: var(--bg-3);
  --paper: var(--text);
}

html[data-theme="light"] {
  color-scheme: light;
  --bg: #f4f1ea;
  --bg-2: #faf8f3;
  --bg-3: #ede9e0;
  --line: #d9d3c6;
  --line-soft: #e4dfd4;
  --text: #08090b;
  --muted: #5f6470;
  --muted-2: #666b75;
  --ember: #ff5c35;        /* solid fills stay #FF5C35 with dark text */
  --ember-hover: #ff7048;
  --accent: #c23a17;       /* darker ember for text on light ground; #d8431f only reached 3.93:1 */
  --on-ember: #0a0a0a;
  --mint: #17795f;
  --amber: #8a5a00;
  --on-mint: #ffffff;      /* light theme fills are darker, so text flips near-white */
  --on-amber: #ffffff;
  --err: #b2331a;
  --add-bg: rgba(23, 121, 95, 0.10);
  --add-tx: #17795f;
  --del-bg: rgba(216, 67, 31, 0.10);
  --del-tx: #b2331a;
  --header-bg: rgba(250, 248, 243, 0.85);
  --glow: rgba(216, 67, 31, 0.09);
  --shadow: rgba(40, 36, 28, 0.18);
  --focus-ring: rgba(216, 67, 31, 0.35);

  --ink: var(--bg);
  --ink-2: var(--bg-2);
  --ink-3: var(--bg-3);
  --paper: var(--text);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

/* classed elements set display, which would beat the UA [hidden] rule */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background 0.15s ease, color 0.15s ease;
}

:root {
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "SF Mono", "JetBrains Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --max: 1080px;
  --radius: 10px;
}

::selection { background: var(--ember); color: var(--on-ember); }

a { color: inherit; text-decoration: none; }
a:hover { color: var(--accent); }

h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; }
h1 { font-size: clamp(2.4rem, 5.2vw, 3.9rem); letter-spacing: -0.035em; }
h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); }
h3 { font-size: 1.1rem; }
p { margin: 0; }
code, pre, kbd { font-family: var(--font-mono); }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 24px; }

/* ---------- header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--header-bg);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line-soft);
}

.site-header .wrap {
  display: flex;
  align-items: center;
  gap: 26px;
  height: 64px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.brand-mark { width: 24px; height: 24px; display: block; object-fit: contain; }
/* the header/footer ship the white mark; recolor it on the light ground */
html[data-theme="light"] img.brand-mark { filter: brightness(0); }
.brand span { font-size: 1.15rem; }

.nav {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-left: auto;
  font-size: 0.92rem;
  color: var(--muted);
}

.nav a { white-space: nowrap; }
.nav a:hover { color: var(--text); }
.nav a[aria-current="page"] { color: var(--text); }

.header-actions {
  display: flex;
  align-items: center;
  gap: 14px;
}

.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  padding: 0;
  transition: color 0.15s, border-color 0.15s;
}

/* The GitHub mark is the same circular control as the theme button, so the
   two icons read as one group rather than a button plus a stray glyph. */
.header-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  padding: 0;
  transition: color 0.15s, border-color 0.15s;
}

.header-icon:hover { color: var(--text); border-color: var(--muted-2); }
.header-icon:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.header-icon svg { width: 17px; height: 17px; }

.theme-toggle:hover { color: var(--text); border-color: var(--muted-2); }
.theme-toggle:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.theme-toggle svg { width: 16px; height: 16px; }

html[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
html[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
html[data-theme="light"] .theme-toggle .icon-sun { display: none; }
html[data-theme="light"] .theme-toggle .icon-moon { display: block; }

.signin-link { font-size: 0.92rem; color: var(--muted); white-space: nowrap; }
.signin-link:hover { color: var(--text); }

.header-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--text);
  font-size: 0.9rem;
  white-space: nowrap;
  transition: border-color 0.15s, background 0.15s;
}

.header-cta:hover { border-color: var(--ember); background: var(--glow); color: var(--text); }

.header-cta-mobile { display: none; }

/* ---------- hero ---------- */

.hero { padding: 88px 0 64px; position: relative; overflow: hidden; }

.hero::before {
  content: "";
  position: absolute;
  inset: -30% 40% auto -10%;
  height: 520px;
  background: radial-gradient(circle at 30% 30%, var(--glow), transparent 62%);
  pointer-events: none;
}

.hero .wrap { position: relative; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 26px;
}

.eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--mint); }

.hero h1 { max-width: 17ch; }
.hero h1 em { font-style: normal; color: var(--accent); }

.hero .lede {
  margin-top: 22px;
  max-width: 54ch;
  color: var(--muted);
  font-size: 1.1rem;
}

.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 12px 20px;
  border-radius: var(--radius);
  font-size: 0.95rem;
  font-weight: 500;
  border: 1px solid transparent;
  transition: transform 0.12s, background 0.15s, border-color 0.15s, color 0.15s;
}

.btn:active { transform: translateY(1px); }

.btn-primary { background: var(--ember); color: var(--on-ember); font-weight: 600; }
.btn-primary:hover { background: var(--ember-hover); color: var(--on-ember); }

.btn-ghost { border-color: var(--line); color: var(--text); }
.btn-ghost:hover { border-color: var(--muted-2); color: var(--text); }

.btn[disabled], .btn.is-disabled {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
}

.hero-meta {
  margin-top: 22px;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  font-size: 0.84rem;
  color: var(--muted-2);
}
.hero-meta span { display: inline-flex; align-items: center; gap: 7px; }
.hero-meta svg { width: 14px; height: 14px; color: var(--mint); flex: none; }

/* ---------- app shot (real screenshot of the desktop client) ---------- */

.app-shot {
  margin-top: 56px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--bg-2);
  overflow: hidden;
  box-shadow: 0 24px 60px var(--shadow);
  line-height: 0;
}

.app-shot img {
  display: block;
  width: 100%;
  height: auto;
}

/* One capture per theme: a light screenshot on the dark page (or the reverse)
   reads as a broken image, so only the matching one is rendered. */
html[data-theme="dark"] .app-shot-light,
html[data-theme="light"] .app-shot-dark { display: none; }

/* ---------- model wall ---------- */

.model-wall-section { position: relative; }

.model-wall {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* The open-weight families get their own five-up row: flex-basis keeps them
   from stretching into the wide chips above, and the row wraps to 3+2 and
   then to one column as the viewport narrows. */
.model-wall.five-up .model-chip {
  flex: 1 1 160px;
  min-width: 0;
  padding: 12px 16px;
  gap: 10px;
}

.model-chip {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg-2);
  min-width: 200px;
  flex: 1 1 200px;
  max-width: 260px;
}

.model-chip .glyph {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--on-ember);
  background: var(--ember);
  flex: none;
}
.model-chip:nth-child(2) .glyph { background: var(--mint); color: var(--on-mint); }
.model-chip:nth-child(3) .glyph { background: var(--amber); color: var(--on-amber); }
.model-chip:nth-child(4) .glyph { background: var(--text); color: var(--bg); }

/* Explicit tones for the five-up row: its children restart at :first-child,
   so the positional rules above would repeat the same colours twice. */
.model-chip .glyph.tone-mint { background: var(--mint); color: var(--on-mint); }
.model-chip .glyph.tone-amber { background: var(--amber); color: var(--on-amber); }
.model-chip .glyph.tone-text { background: var(--text); color: var(--bg); }
.model-chip .glyph.tone-line { background: var(--bg-3); color: var(--text); border: 1px solid var(--line); }

.model-chip .name { font-weight: 600; font-size: 0.95rem; line-height: 1.3; }
.model-chip .vendor { color: var(--muted-2); font-size: 0.78rem; line-height: 1.3; }

.model-wall-note {
  margin-top: 16px;
  color: var(--muted);
  font-size: 0.9rem;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 18px;
}
.model-wall-note strong { color: var(--text); font-weight: 500; }

/* ---------- sections ---------- */

section { padding: 78px 0; border-top: 1px solid var(--line-soft); }

.section-head { max-width: 660px; margin-bottom: 40px; }
.section-head .kicker {
  font-size: 0.78rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 14px;
  font-weight: 600;
}
.section-head p { margin-top: 14px; color: var(--muted); }

.grid { display: grid; gap: 16px; }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.card {
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-2);
}

.card h3 { margin-bottom: 8px; }
.card p { color: var(--muted); font-size: 0.92rem; }
.card .icon { width: 30px; height: 30px; margin-bottom: 16px; color: var(--accent); }

.notice {
  border: 1px solid var(--line);
  border-left: 2px solid var(--amber);
  border-radius: 0 8px 8px 0;
  background: var(--bg-2);
  padding: 13px 16px;
  font-size: 0.88rem;
  color: var(--muted);
}

/* ---------- pricing ---------- */

.trial-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  margin-bottom: 30px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-2);
  font-size: 0.9rem;
}
.trial-banner strong { color: var(--text); }
.trial-banner .btn { margin-left: auto; padding: 8px 14px; font-size: 0.85rem; }

.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: stretch; }

.plan {
  padding: 26px 22px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg-2);
  display: flex;
  flex-direction: column;
  height: 100%;
}

.plan.featured { border-color: var(--ember); background: linear-gradient(180deg, var(--glow), var(--bg-2) 44%); }

/* Every card reserves the badge row, so the three prices sit on one line even
   though only Pro carries a badge. The placeholder has to occupy the same box
   as the real badge — same padding, line box and margin — or the two outer
   cards ride ~37px higher than the featured one and the row looks broken. */
.plan .tag,
.plan .tag-empty {
  align-self: flex-start;
  display: inline-block;
  min-height: 22px;
  /* Explicit line box: the badge carries text and the placeholder does not,
     and without this the two line boxes differ by 2px, which is enough to
     shift the name and price on the outer cards. */
  line-height: 16px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 14px;
}

.plan .tag {
  background: var(--ember);
  color: var(--on-ember);
}

.plan .tag-empty {
  background: transparent;
  border: 1px solid transparent;
  color: transparent;
}

.plan .name {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
  margin-bottom: 8px;
}
.plan .price { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; }
.plan .price .now { font-size: 2.35rem; font-weight: 700; letter-spacing: -0.03em; }
.plan .price .per { color: var(--muted-2); font-size: 0.88rem; }

/* List price the current period is discounted from. */
.plan .price .was {
  color: var(--muted-2);
  font-size: 1rem;
  font-weight: 400;
  text-decoration: line-through;
  text-decoration-thickness: 1.5px;
  text-decoration-color: var(--muted-2);
}

.plan .price .save {
  align-self: center;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--add-bg);
  border: 1px solid var(--mint);
  color: var(--mint);
  font-size: 0.7rem;
  font-weight: 500;
}

.plan .sub-price {
  margin-top: 4px;
  color: var(--muted-2);
  font-size: 0.78rem;
}

/* ---------- billing interval switch ---------- */

.billing-row {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.billing-switch {
  display: inline-flex;
  padding: 3px;
  gap: 2px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg-3);
}

.billing-switch button {
  padding: 7px 18px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 0.86rem;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.billing-switch button:hover { color: var(--text); }

.billing-switch button.active {
  background: var(--bg-2);
  color: var(--text);
  box-shadow: 0 1px 3px var(--shadow);
}

.billing-note { color: var(--muted-2); font-size: 0.82rem; }

.plan .credits {
  margin: 18px 0;
  padding: 12px 14px;
  border-radius: 8px;
  background: var(--bg-3);
  border: 1px solid var(--line-soft);
}
.plan .credits b { font-size: 1.25rem; letter-spacing: -0.02em; }
.plan .credits span { display: block; color: var(--muted-2); font-size: 0.78rem; margin-top: 3px; }

.plan ul { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 9px; }
.plan li { font-size: 0.86rem; color: var(--muted); display: flex; gap: 9px; }
.plan li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--mint); margin-top: 8px; flex: none; }

.plan .btn { margin-top: auto; justify-content: center; }

.plans-note { margin-top: 22px; color: var(--muted-2); font-size: 0.82rem; }
.plans-note a { color: var(--accent); }

/* ---------- usage explainer ---------- */

.usage-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }

.usage-example {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-2);
  overflow: hidden;
}
.usage-example header { padding: 14px 18px; border-bottom: 1px solid var(--line-soft); font-size: 0.8rem; color: var(--muted); }
.usage-example .row { display: flex; justify-content: space-between; gap: 16px; padding: 13px 18px; border-bottom: 1px solid var(--line-soft); font-size: 0.88rem; }
.usage-example .row:last-child { border-bottom: 0; }
.usage-example .row .k { color: var(--muted); }
.usage-example .row .v { font-family: var(--font-mono); font-size: 0.85rem; }
.usage-example .row.total { background: var(--bg-3); }
.usage-example .row.total .v { color: var(--accent); }

/* ---------- table ---------- */

.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-2); }
table { width: 100%; border-collapse: collapse; font-size: 0.89rem; }
thead th {
  text-align: left;
  padding: 13px 16px;
  background: var(--bg-3);
  color: var(--muted);
  font-weight: 500;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--line);
}
tbody td { padding: 13px 16px; border-bottom: 1px solid var(--line-soft); color: var(--muted); }
tbody tr:last-child td { border-bottom: 0; }
tbody td:first-child { color: var(--text); }

/* ---------- downloads ---------- */

.dl-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }

.dl-card {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg-2);
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  /* A long filename inside the card must wrap or break, never widen the
     grid track: minmax(0,1fr) on the grid alone is not enough once a child
     sets a min-content floor. */
  min-width: 0;
}

.dl-os { display: flex; align-items: center; gap: 12px; }
.dl-os svg { width: 26px; height: 26px; color: var(--text); flex: none; }
.dl-os .os-name { font-weight: 600; font-size: 1.02rem; }
.dl-os .os-arch { color: var(--muted-2); font-size: 0.8rem; display: block; font-weight: 400; }

.dl-badge {
  margin-left: auto;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  /* "Coming soon" wrapped to two lines in a third-width card, which made the
     macOS header twice as tall as the other two. */
  white-space: nowrap;
  flex: none;
}
.dl-badge.ok { background: var(--add-bg); color: var(--mint); border: 1px solid var(--mint); }
.dl-badge.soon { background: transparent; color: var(--muted-2); border: 1px dashed var(--line); }

.dl-card .btn { justify-content: center; }

/* Secondary artifacts of the same release (Linux ships an AppImage and a
   .deb). Rendered from the manifest's `alternates`; hidden until then. */
.dl-alts {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  color: var(--muted-2);
  overflow-wrap: anywhere;
}
.dl-alts a { color: var(--accent); }

.dl-meta { display: grid; gap: 6px; font-family: var(--font-mono); font-size: 0.76rem; color: var(--muted-2); }
.dl-meta .row { display: flex; gap: 10px; align-items: baseline; min-width: 0; }
.dl-meta .k { flex: none; width: 62px; color: var(--muted-2); text-transform: uppercase; font-size: 0.66rem; letter-spacing: 0.06em; font-family: var(--font-sans); }
/* The AppImage filename is longer than the card is wide. Truncating it with
   an ellipsis hid the part that distinguishes the artifact, so it wraps onto
   a second line instead, breaking between words and only inside a token when
   there is no other option. */
.dl-meta .v { min-width: 0; overflow-wrap: break-word; }
.dl-meta .sha-row .v { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.copy-sm {
  border: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: 0.7rem;
  padding: 2px 7px;
  border-radius: 5px;
  flex: none;
}
.copy-sm:hover { color: var(--text); background: var(--bg-3); }

.sha-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
.sha-row .v { flex: 1; min-width: 0; }

.dl-req { margin: 0; padding-left: 18px; color: var(--muted); font-size: 0.86rem; }
.dl-req li { margin: 4px 0; }

/* ---------- faq ---------- */

.faq { display: grid; gap: 0; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); padding: 18px 0; }
.faq summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  font-size: 0.98rem;
  font-weight: 500;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--accent); font-size: 1.2rem; line-height: 1; }
.faq details[open] summary::after { content: "−"; }
.faq .answer { margin-top: 12px; color: var(--muted); font-size: 0.92rem; max-width: 72ch; }
.faq .answer a { color: var(--accent); }

/* ---------- cta ---------- */

.cta {
  text-align: center;
  padding: 96px 0;
  border-top: 1px solid var(--line-soft);
}
.cta h2 { margin-bottom: 14px; }
.cta p { color: var(--muted); max-width: 46ch; margin: 0 auto 30px; }
.cta-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ---------- footer ---------- */

.site-footer { border-top: 1px solid var(--line-soft); padding: 44px 0 36px; }
.footer-grid { display: flex; flex-wrap: wrap; gap: 40px; justify-content: space-between; }
.footer-brand { max-width: 280px; }
.footer-brand p { color: var(--muted-2); font-size: 0.84rem; margin-top: 12px; }
.footer-cols { display: flex; gap: 56px; flex-wrap: wrap; }
.footer-col h4 { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted-2); margin-bottom: 12px; font-weight: 500; }
.footer-col a { display: block; color: var(--muted); font-size: 0.86rem; padding: 4px 0; }
.footer-col a:hover { color: var(--text); }
.footer-bottom {
  margin-top: 40px;
  padding-top: 22px;
  border-top: 1px solid var(--line-soft);
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
  color: var(--muted-2);
  font-size: 0.8rem;
}

/* ---------- docs ---------- */

.doc { padding: 64px 0 96px; }
.doc-layout { display: grid; grid-template-columns: 200px 1fr; gap: 56px; align-items: start; }
.doc-nav { position: sticky; top: 88px; display: grid; gap: 4px; font-size: 0.88rem; }
.doc-nav a { color: var(--muted); padding: 6px 0; }
.doc-nav a:hover { color: var(--text); }
.doc-nav a.active { color: var(--text); }
.doc-nav .group { margin-top: 18px; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted-2); }
.doc-body { max-width: 720px; }
.doc-body h1 { font-size: 2.1rem; margin-bottom: 12px; }
.doc-body .sub { color: var(--muted); margin-bottom: 42px; }
.doc-body h2 { font-size: 1.35rem; margin: 44px 0 14px; padding-top: 8px; }
.doc-body h3 { margin: 28px 0 10px; }
.doc-body p { color: var(--muted); margin: 12px 0; }
.doc-body ul, .doc-body ol { color: var(--muted); padding-left: 20px; margin: 12px 0; }
.doc-body li { margin: 6px 0; }
.doc-body a { color: var(--accent); }
.doc-body pre {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 16px 18px;
  overflow-x: auto;
  font-size: 0.85rem;
  line-height: 1.7;
  margin: 16px 0;
  color: var(--text);
}
.doc-body code { background: var(--bg-3); padding: 2px 6px; border-radius: 4px; font-size: 0.86em; color: var(--text); }
.doc-body pre code { background: none; padding: 0; }
.doc-body table { margin: 18px 0; }
.doc-body .note {
  border-left: 2px solid var(--accent);
  background: var(--bg-2);
  padding: 14px 18px;
  border-radius: 0 8px 8px 0;
  margin: 20px 0;
  font-size: 0.9rem;
  color: var(--muted);
}

/* ---------- legal ---------- */

.legal { padding: 64px 0 96px; }
.legal .wrap { max-width: 760px; }
.legal h1 { font-size: 2rem; margin-bottom: 8px; }
.legal .meta { color: var(--muted-2); font-size: 0.85rem; margin-bottom: 40px; }
.legal h2 { font-size: 1.15rem; margin: 36px 0 10px; }
.legal p, .legal li { color: var(--muted); font-size: 0.94rem; margin: 10px 0; }
.legal ul { padding-left: 20px; }
.legal strong { color: var(--text); }
.legal a { color: var(--accent); }

/* ---------- auth pages ---------- */

.auth {
  min-height: calc(100vh - 65px);
  display: grid;
  place-items: center;
  padding: 56px 0 72px;
}

.auth-card {
  width: 100%;
  /* Wide enough that the signup form's email/password/code rows and the
     hint lines never wrap on a laptop; the card used to be 430px and every
     hint broke mid-sentence. */
  max-width: 560px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--bg-2);
  padding: 38px 40px;
}

.auth-card h1 { font-size: 1.55rem; margin-bottom: 8px; }
.auth-card .auth-sub { color: var(--muted); font-size: 0.92rem; margin-bottom: 26px; }
.auth-card .auth-sub a, .auth-foot a { color: var(--accent); }
.auth-foot { margin-top: 20px; color: var(--muted); font-size: 0.88rem; text-align: center; }

.field { margin-bottom: 16px; }
.field label { display: block; font-size: 0.84rem; color: var(--muted); margin-bottom: 6px; }
.field .hint { color: var(--muted-2); font-size: 0.78rem; margin-top: 6px; }

.input {
  width: 100%;
  padding: 11px 14px;
  background: var(--bg-3);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  font: inherit;
  font-size: 0.95rem;
}

.input:focus { outline: none; border-color: var(--ember); box-shadow: 0 0 0 3px var(--focus-ring); }
.input::placeholder { color: var(--muted-2); }

.input-code {
  font-family: var(--font-mono);
  font-size: 1.25rem;
  letter-spacing: 0.35em;
  text-align: center;
  text-transform: uppercase;
}

.form-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  font-size: 0.86rem;
  margin: 4px 0 18px;
  color: var(--muted);
}
.form-row a { color: var(--accent); }
.form-row label { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; }
.form-row input[type="checkbox"] { accent-color: var(--ember); width: 15px; height: 15px; }

.btn-block { width: 100%; justify-content: center; }

.msg {
  display: none;
  padding: 11px 14px;
  border-radius: 8px;
  font-size: 0.88rem;
  margin-bottom: 16px;
  line-height: 1.5;
}
.msg.show { display: block; }
.msg-err { border: 1px solid var(--err); color: var(--err); background: var(--del-bg); }
.msg-ok { border: 1px solid var(--mint); color: var(--mint); background: var(--add-bg); }
.msg-info { border: 1px solid var(--line); color: var(--muted); background: var(--bg-3); }

.code-send { display: flex; gap: 10px; align-items: center; }
.code-send .input { flex: 1; }

/* ---------- Cloudflare Turnstile ----------
   The widget is injected by the auth pages only when the admin console
   switches Turnstile on. It gets its own row so the iframe never collides
   with the submit button, and its fixed 300px width is left alone. */

.turnstile-slot { margin: 4px 0 18px; min-height: 0; }
.turnstile-slot:empty { display: none; }
.turnstile-slot .cf-turnstile { min-height: 65px; }

.link-btn {
  border: 0;
  background: transparent;
  color: var(--accent);
  cursor: pointer;
  font: inherit;
  font-size: 0.84rem;
  padding: 6px 8px;
  border-radius: 6px;
  white-space: nowrap;
}
.link-btn:hover { background: var(--bg-3); }
.link-btn[disabled] { color: var(--muted-2); cursor: not-allowed; }

/* ---------- device page ---------- */

/* Confirmation block shown after approving: the code is never displayed, so
   the page's job ends with a clear "you're done" and one way back to the app. */
.device-done {
  padding: 20px;
  border: 1px solid var(--mint);
  border-radius: 10px;
  background: var(--add-bg);
}

.device-done strong {
  display: block;
  color: var(--text);
  font-size: 1.05rem;
  margin-bottom: 6px;
}

.device-done p { color: var(--muted); font-size: 0.9rem; }

.device-done-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}

.device-open-hint {
  margin-top: 14px;
  color: var(--muted-2);
  font-size: 0.84rem;
  line-height: 1.5;
}

.device-meta { color: var(--muted-2); font-size: 0.82rem; text-align: center; margin-top: 16px; }
.device-meta .req { color: var(--err); }

/* ---------- status page ---------- */

.status-row { display: flex; align-items: center; gap: 12px; padding: 16px 0; border-bottom: 1px solid var(--line-soft); font-size: 0.95rem; }
.status-row .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--mint); flex: none; }
.status-row .dot.warn { background: var(--amber); }
.status-row .dot.down { background: var(--err); }
.status-row .comp { flex: 1; }
.status-row .st { color: var(--mint); font-size: 0.86rem; }

/* ---------- responsive ---------- */

@media (max-width: 980px) {
  .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dl-grid { grid-template-columns: 1fr; }
  .grid-3 { grid-template-columns: 1fr; }
  .usage-grid { grid-template-columns: 1fr; gap: 28px; }
  .doc-layout { grid-template-columns: 1fr; gap: 28px; }
  .doc-nav { position: static; display: flex; flex-wrap: wrap; gap: 14px; }
  .doc-nav .group { display: none; }
}

@media (max-width: 680px) {
  .nav { display: none; }
  .signin-link { display: none; }
  .header-actions { margin-left: auto; gap: 10px; }
  .header-cta-mobile { display: inline-flex; }
  .hero { padding: 56px 0 44px; }
  .plans { grid-template-columns: 1fr; }
  .grid-2 { grid-template-columns: 1fr; }
  section { padding: 56px 0; }
  .auth-card { padding: 26px 20px; }
  .trial-banner .btn { margin-left: 0; }
  .app-shot { margin-top: 36px; }
}