/* ===========================================================================
   Postlad — landing page
   Tokens implement brand/BRAND.md §4. Every text pair here is AA-verified.
   =========================================================================== */

:root {
  --bg:            #FAFAF8;
  --surface:       #FFFFFF;
  --sunken:        #F2F3F1;
  --border:        #DDDDD8;
  --border-strong: #8A959E;
  --text:          #202020;
  --muted:         #4E5A66;
  --accent:        #245C8D;
  --accent-strong: #1B4568;
  --on-accent:     #FFFFFF;
  --ok:            #1E7A46;

  --term-bg:    #14202C;
  --term-text:  #E9EEF3;
  --term-acc:   #6FB1E8;
  --term-dim:   #8798A8;
  --term-edge:  #24313F;

  --accent-wash: rgba(36, 92, 141, 0.08);
  --shadow: 0 1px 2px rgba(16,24,32,.05), 0 12px 32px -12px rgba(16,24,32,.16);

  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
               "Liberation Mono", monospace;

  --radius: 4px;

  --font-serif: Georgia, "Times New Roman", serif;

  /* masthead + footer: the same navy in both modes */
  --head-bg:     #1E2A38;
  --head-active: #2C3B4C;
  --head-text:   #FFFFFF;
  --head-muted:  #D9E2EC;
  --head-border: #4A5A6C;
  --wrap: 1120px;

  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:            #101820;
    --surface:       #182430;
    --sunken:        #1E2A38;
    --border:        #2C3B4C;
    --border-strong: #5C6E80;
    --text:          #EFF3F7;
    --muted:         #9FB0C0;
    --accent:        #7FB3E0;
    --accent-strong: #A5CBEC;
    --on-accent:     #0F1720;
    --ok:            #4FC08D;

    --term-bg:   #0B121A;
    --term-dim:  #7E92A5;
    --term-edge: #1C2836;

    --accent-wash: rgba(127, 179, 224, 0.14);
    --shadow: 0 1px 2px rgba(0,0,0,.4), 0 12px 32px -12px rgba(0,0,0,.6);
  }
}

/* --------------------------------------------------------------- base --- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { line-height: 1.12; margin: 0 0 .5em; font-weight: 700; }
h1 { font-family: var(--font-serif); font-size: clamp(2.3rem, 6.5vw, 3.6rem); letter-spacing: -.01em; line-height: 1.06; }
h2 { font-family: var(--font-serif); font-size: clamp(1.55rem, 4vw, 2.1rem); letter-spacing: -.005em; }
h3 { font-size: 1.125rem; font-weight: 650; letter-spacing: -.01em; }
p  { margin: 0 0 1rem; }

a { color: var(--accent); text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
a:hover { color: var(--accent-strong); }

code, pre { font-family: var(--font-mono); }

img, svg { max-width: 100%; }

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.skip {
  position: absolute; left: 12px; top: -60px; z-index: 20;
  background: var(--surface); color: var(--text);
  padding: 10px 16px; border-radius: 3px; border: 1px solid var(--border-strong);
  transition: top .15s;
}
.skip:focus { top: 12px; }

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

.eyebrow, .label {
  font-size: .75rem; font-weight: 600; letter-spacing: .09em;
  text-transform: uppercase; color: var(--muted);
}
.micro { font-size: .875rem; color: var(--muted); }
.section-lead {
  font-family: var(--font-serif);
  font-size: clamp(1.05rem, 2vw, 1.1875rem);
  color: var(--muted); max-width: 46em; margin-bottom: 2rem;
}
.lead {
  font-family: var(--font-serif);
  font-size: clamp(1.05rem, 2.2vw, 1.25rem);
  line-height: 1.55; color: var(--muted); max-width: 34em;
}

/* ------------------------------------------------------------ buttons --- */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: .5rem; padding: .8rem 1.35rem;
  font: inherit; font-weight: 600; line-height: 1.2;
  border-radius: 3px; border: 1.5px solid transparent;
  text-decoration: none; cursor: pointer;
  transition: background-color .15s, border-color .15s, color .15s;
}
.btn-primary { background: var(--accent); color: var(--on-accent); }
.btn-primary:hover { background: var(--accent-strong); color: var(--on-accent); }
.btn-ghost { border-color: var(--border-strong); color: var(--text); }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }
.btn-quiet {
  padding: .5rem .9rem; font-size: .9375rem;
  border-color: var(--border-strong); color: var(--text);
}
.btn-quiet:hover { border-color: var(--accent); color: var(--accent); }
.btn[disabled] { opacity: .6; cursor: default; }

/* --------------------------------------------------------------- head --- */

.site-head {
  position: sticky; top: 0; z-index: 10;
  background: var(--head-bg);
  color: var(--head-text);
  border-bottom: 1px solid var(--head-bg);
}
.site-head .btn-quiet { color: var(--head-text); border-color: var(--head-border); }
.site-head .btn-quiet:hover { color: var(--head-text); border-color: var(--head-text); }
/* the last header action (Create account) is the one filled button up there */
.site-head .head-nav .btn-quiet:last-child {
  background: var(--head-text); color: var(--head-bg);
  border-color: var(--head-text); font-weight: 700;
}
.site-head .head-nav .btn-quiet:last-child:hover { background: var(--head-muted); border-color: var(--head-muted); color: var(--head-bg); }
.head-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; min-height: 64px;
}
.head-nav { display: flex; align-items: center; gap: .5rem; }
@media (max-width: 560px) { .hide-narrow { display: none; } }
.brand { display: flex; align-items: center; gap: .6rem; text-decoration: none; color: var(--head-text); }
/* the head-only tile, not the full mascot — see BRAND.md §7 on minimum sizes */
.brand-mascot { width: 32px; height: 32px; border-radius: 7px; display: block; }
.brand-mark { width: 116px; height: auto; display: block; }
.brand-dot { fill: #7FB3E0; }

/* Once session.js confirms a signed-in account, the public header becomes the
   same piece of furniture as the app bar. The signed-out page stays useful and
   indexable without JavaScript. */
.is-signed-in .site-head { background: var(--head-bg); }
.is-signed-in .head-inner { max-width: 1180px; min-height: 58px; }
.app-head-nav { gap: 2px; margin-right: auto; margin-left: .8rem; }
.app-nav-link {
  color: var(--head-muted); text-decoration: none; white-space: nowrap;
  font-size: .9375rem; font-weight: 550; line-height: 1.2;
  padding: 7px 12px; border-radius: 3px;
}
.app-nav-link:hover,
.app-nav-link[aria-current="page"] { color: var(--head-text); background: var(--head-active); }
@media (max-width: 719px) {
  .is-signed-in .head-inner { flex-wrap: wrap; padding: 8px 16px; gap: 8px 14px; }
  .is-signed-in .app-head-nav {
    order: 3; width: 100%; margin: 0; overflow-x: auto;
    border-top: 1px solid var(--head-border); padding-top: 6px;
  }
}

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

.hero { padding: clamp(2.5rem, 7vw, 5rem) 0 clamp(2.5rem, 6vw, 4.5rem); }
.hero-grid { display: grid; gap: clamp(2rem, 5vw, 3.5rem); align-items: center; }
@media (min-width: 940px) {
  .hero-grid { grid-template-columns: 1fr 1.06fr; }
}

.eyebrow { display: flex; align-items: center; gap: .5rem; margin-bottom: 1.1rem; }
.pip {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent); flex: none;
}
.pip-ok { background: var(--ok); animation: pulse 2.4s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }

.hero-cta { display: flex; flex-wrap: wrap; gap: .75rem; margin: 1.75rem 0 1rem; }

/* ---------------------------------------------------------- demo card --- */

.demo { margin: 0; }
.demo-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.demo-note { margin: .85rem 2px 0; }
/* Was an <a> to a live stream, now a plain <div> (2026-08-08). The rule stays:
   it is what makes the chart block sit flush inside the card, and the colour
   and text-decoration resets keep working if it becomes a link again. */
.demo-link { display: block; color: inherit; text-decoration: none; }

.term { background: var(--term-bg); color: var(--term-text); }
.term-bar {
  display: flex; align-items: center; gap: 6px;
  padding: 10px 14px; border-bottom: 1px solid var(--term-edge);
}
.term-bar .dot { width: 10px; height: 10px; border-radius: 50%; background: #3D4C5C; }
.term-bar .d1 { background: #3D4C5C; }
.term-title {
  margin-left: auto; font-family: var(--font-mono);
  font-size: .75rem; color: var(--term-dim);
}
.term-body {
  margin: 0; padding: 16px 14px 18px;
  /* the floor keeps the GET line on one row at 390px */
  font-size: clamp(.66rem, 1.5vw, .875rem);
  line-height: 1.75; white-space: pre-wrap; word-break: break-all;
}
.term .dim { color: var(--term-dim); }
.term .cmd { color: var(--term-acc); }
.term .ok  { color: var(--term-text); }
.term .resp { opacity: 0; transition: opacity .25s; }
.term .resp.on { opacity: 1; }
.caret {
  display: inline-block; width: .55em; height: 1.05em;
  background: var(--term-acc); vertical-align: -.18em; margin-left: 1px;
  animation: blink 1.05s steps(1) infinite;
}
.caret.done { animation: none; opacity: 0; }
@keyframes blink { 0%,49% { opacity: 1; } 50%,100% { opacity: 0; } }

.chart-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 1rem; padding: 14px 16px 6px;
}
.stream-name { display: block; font-family: var(--font-mono); font-size: .9375rem; }
.readout { text-align: right; }
.live {
  display: flex; align-items: center; justify-content: flex-end; gap: .38rem;
  font-size: .75rem; font-weight: 600; letter-spacing: .09em;
  text-transform: uppercase; color: var(--ok);
}
.value { font-size: 1.6rem; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.unit { font-size: .95rem; font-weight: 600; color: var(--muted); margin-left: 2px; }

.chart { display: block; width: 100%; height: auto; }
.chart .grid { stroke: var(--border); stroke-width: 1.5; }
.chart .line {
  fill: none; stroke: var(--accent); stroke-width: 4;
  stroke-linecap: round; stroke-linejoin: round;
}
.chart .area { fill: var(--accent-wash); stroke: none; }
.chart .head { fill: var(--accent); stroke: var(--surface); stroke-width: 3.5; }

/* -------------------------------------------------------------- bands --- */

.band { padding: clamp(3rem, 7vw, 5rem) 0; border-top: 1px solid var(--border); }
.band.alt { background: var(--sunken); }

/* ---------------------------------------------------------------steps --- */

.steps {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
}
.step {
  background: var(--surface); border: 1px solid var(--border);
  border-top: 3px solid var(--accent);
  border-radius: var(--radius); padding: 1.5rem 1.4rem 1.4rem;
  display: flex; flex-direction: column;
}
.step-n {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--accent); color: var(--on-accent);
  font-size: .9rem; font-weight: 700; margin-bottom: .9rem;
}
.step p { color: var(--muted); flex: 1; }
.snip {
  margin: 1rem 0 0; padding: .75rem .85rem;
  background: var(--term-bg); color: var(--term-text);
  border-radius: 4px; font-size: clamp(.7rem, 1.5vw, .8125rem);
  line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere;
}
.snip .hl { color: var(--term-acc); }

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

.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.compare {
  width: 100%; min-width: 620px;
  border-collapse: separate; border-spacing: 0;
  background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden; font-size: .9375rem;
}
.compare th, .compare td {
  padding: .9rem 1rem; text-align: left; vertical-align: top;
  border-bottom: 1px solid var(--border);
}
.compare thead th {
  background: var(--head-bg); font-size: .75rem; font-weight: 600;
  letter-spacing: .07em; text-transform: uppercase; color: var(--head-text);
  white-space: nowrap;
}
.compare tbody th { font-weight: 650; white-space: nowrap; }
.compare tbody tr:last-child th, .compare tbody tr:last-child td { border-bottom: 0; }
.compare tr.us { background: var(--accent-wash); }
.compare tr.us th, .compare tr.us td { color: var(--text); }
.compare .na { color: var(--muted); font-style: italic; }
.tag {
  display: inline-block; margin-left: .4rem; padding: .1rem .45rem;
  border: 1px solid var(--accent); border-radius: 5px;
  font-size: .6875rem; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--accent); vertical-align: 2px;
}
.table-note { margin-top: 1rem; max-width: 60em; }

/* ------------------------------------------------------------ promise --- */

.promise-wrap { display: flex; align-items: center; gap: 2.5rem; }
.promise { flex: 1; min-width: 0; }
.promise-lad { width: clamp(110px, 14vw, 160px); height: auto; flex: none; }
@media (max-width: 720px) { .promise-lad { display: none; } }

.ticks { list-style: none; margin: 0 0 1.75rem; padding: 0; display: grid; gap: .7rem; }
.ticks li { display: flex; align-items: flex-start; gap: .7rem; color: var(--muted); }
.ticks strong { color: var(--text); font-weight: 650; }
.tick {
  flex: none; width: 20px; height: 20px; margin-top: 3px; border-radius: 50%;
  background: var(--ok);
  -webkit-mask: var(--tick-svg) center / 13px 13px no-repeat,
                linear-gradient(#000 0 0);
  mask: var(--tick-svg) center / 13px 13px no-repeat, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  --tick-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 8.6 6 12.5 14 3.8' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.promise-line {
  margin: 0; padding-top: 1.4rem; border-top: 1px solid var(--border);
  font-size: clamp(1.05rem, 2.4vw, 1.3rem); font-weight: 650; letter-spacing: -.01em;
}

/* ----------------------------------------------------------- waitlist --- */

.wl { margin: 0 0 .5rem; max-width: 560px; }
.wl-row { display: flex; flex-wrap: wrap; gap: .6rem; }
.wl input[type="email"] {
  flex: 1 1 260px; min-width: 0;
  padding: .8rem 1rem; font: inherit;
  color: var(--text); background: var(--surface);
  border: 1.5px solid var(--border-strong); border-radius: 3px;
}
.wl input[type="email"]::placeholder { color: var(--muted); }
.wl input[type="email"]:focus-visible { border-color: var(--accent); }
.wl input[type="email"][aria-invalid="true"] { border-color: var(--accent); }

.hp {
  position: absolute; left: -9999px; top: 0;
  width: 1px; height: 1px; overflow: hidden; opacity: 0;
}

.wl-status { min-height: 1.5rem; font-size: .9375rem; margin: .35rem 0 0; }
.wl-status.err { color: var(--accent); }
.wl-status.ok  { color: var(--ok); font-weight: 600; }

/* --------------------------------------------------------------- foot --- */

.site-foot {
  background: var(--head-bg); color: var(--head-muted);
  border-top: 0; padding: 2.5rem 0 3rem;
}
.site-foot a { color: var(--head-muted); }
.site-foot a:hover { color: var(--head-text); }
.foot-inner {
  display: flex; flex-wrap: wrap; gap: .5rem 1.5rem;
  align-items: baseline; justify-content: space-between;
}
.foot-line { margin: 0; font-weight: 600; color: var(--head-text); }
.foot-meta { margin: 0; color: var(--head-muted); font-size: .9375rem; }
.foot-meta .sep { margin: 0 .5rem; }

/* =========================================================================
   ARTICLE PAGES
   The guides (/esp32-send-data-to-cloud, /raspberry-pi-data-logger, …) share
   this block with the landing page. Same tokens, same head, same foot — the
   only new ideas here are a reading measure, a code figure and a notice box.
   No page forks this file; if a guide needs something, it goes here.
   ========================================================================= */

/* --------------------------------------------------------- guides nav --- */
/* One line on the landing page. Deliberately not a card grid. */

.guides { margin: 2.25rem 0 0; padding-top: 1.5rem; border-top: 1px solid var(--border); }
.guides h3 { margin-bottom: .6rem; }
.guides-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: .5rem 1.1rem;
  font-size: .9375rem;
}
.guides-list li { display: flex; align-items: baseline; gap: .5rem; }
.guides-list li + li::before {
  content: "·"; color: var(--border-strong);
}

/* -------------------------------------------------- guides index page --- */
/* PLAN.md §9f item 6. `/guides` is a card list, unlike the one-line `.guides`
   nav above, because this page's whole job is helping somebody choose — and
   nobody can choose between five titles with no idea what is behind them.

   Same tokens, same surfaces, same borders as every other block in this file.
   It is a `.gcard` rather than a reused `.demo-card` because that one is a
   chart frame with a chart's padding, and borrowing it would make the two
   look related when they are not. */

.gindex { display: grid; gap: 1rem; margin: 2rem 0 0; }
@media (min-width: 760px) { .gindex { grid-template-columns: 1fr 1fr; } }

.gcard {
  display: flex; flex-direction: column; gap: .5rem;
  padding: 1.25rem 1.35rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  text-decoration: none; color: inherit;
}
.gcard:hover { border-color: var(--accent); }
.gcard h3 { margin: 0; font-size: 1.0625rem; letter-spacing: -.01em; }
.gcard p { margin: 0; color: var(--muted); font-size: .9375rem; }
.gcard .gmeta {
  margin-top: auto; padding-top: .55rem;
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  font-size: .8125rem; color: var(--muted);
}
.gcard .gkind {
  font-size: .75rem; font-weight: 650; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted); border: 1px solid var(--border); border-radius: 999px; padding: .15rem .6rem;
}
.gcard .gmore { margin-left: auto; color: var(--accent); font-weight: 600; }

/* -------------------------------------------------- guides workspace --- */

.guide-page { text-wrap: pretty; }
.guide-workspace { max-width: 1180px; margin: 0 auto; padding: 28px 20px 72px; }
.guide-layout { display: grid; gap: 28px; }
@media (min-width: 940px) {
  .guide-layout { grid-template-columns: 230px minmax(0, 1fr); align-items: start; }
}
.guide-rail { display: grid; gap: 14px; }
@media (min-width: 940px) { .guide-rail { position: sticky; top: 86px; } }
.guide-rail-card {
  padding: 16px; border: 1px solid var(--border); border-radius: 4px;
  background: var(--sunken);
}
.guide-rail-card img { display: block; width: 78px; height: 78px; margin: -4px auto 8px; }
.guide-rail-card h2 { font-size: 1rem; margin-bottom: .35rem; }
.guide-rail-card p { color: var(--muted); font-size: .8125rem; margin: 0; }
.guide-rail-nav { display: grid; gap: 3px; }
.guide-rail-nav a {
  color: var(--muted); text-decoration: none; font-size: .875rem; font-weight: 600;
  padding: 7px 10px; border-radius: 3px;
}
.guide-rail-nav a:hover { color: var(--text); background: var(--sunken); }
@media (max-width: 939px) {
  .guide-rail { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
  .guide-rail-card { display: grid; grid-template-columns: 66px 1fr; column-gap: 12px; align-items: center; }
  .guide-rail-card img { grid-row: 1 / 3; width: 62px; height: 62px; margin: 0; }
  .guide-rail-nav { grid-template-columns: repeat(4, auto); align-content: center; justify-content: end; }
}
@media (max-width: 680px) {
  .guide-workspace { padding: 20px 16px 56px; }
  .guide-rail { grid-template-columns: 1fr; }
  .guide-rail-nav { grid-template-columns: repeat(2, 1fr); justify-content: stretch; }
}

.guide-main { min-width: 0; }
.guide-hero {
  position: relative; overflow: hidden; min-height: 260px;
  border: 1px solid var(--border); border-radius: 4px; padding: clamp(24px, 5vw, 42px);
  background: var(--surface); box-shadow: var(--shadow);
  display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(220px, .8fr); gap: 24px; align-items: center;
}
.guide-hero h1 { max-width: 13ch; font-size: clamp(2rem, 5vw, 3.25rem); }
.guide-hero .lead { font-size: 1.0625rem; margin: 0; }
.guide-hero-art { min-height: 190px; position: relative; display: grid; place-items: center; }
.guide-hero-art svg { width: 100%; height: auto; overflow: visible; }
.guide-hero-art .wire { fill: none; stroke: var(--accent); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 7 9; }
.guide-hero-art .board { fill: var(--sunken); stroke: var(--border-strong); stroke-width: 2; }
.guide-hero-art .screen { fill: var(--surface); stroke: var(--border-strong); stroke-width: 2; }
.guide-hero-art .trace { fill: none; stroke: var(--accent); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.guide-hero-art img { position: absolute; right: -4px; bottom: -18px; width: 82px; height: 82px; }
@media (max-width: 700px) {
  .guide-hero { grid-template-columns: 1fr; }
  .guide-hero-art { min-height: 150px; }
}

.guide-section { margin-top: 32px; scroll-margin-top: 88px; }
.guide-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
.guide-section-head h2 { font-size: 1.25rem; margin: 0; }
.guide-section-head p { color: var(--muted); font-size: .8125rem; margin: 0; }
.guide-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 680px) { .guide-grid { grid-template-columns: 1fr; } }
.guide-card {
  min-width: 0; position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: 10px; min-height: 218px;
  padding: 0 18px 17px; color: inherit; text-decoration: none;
  background: var(--surface); border: 1px solid var(--border); border-radius: 4px;
  transition: transform .15s, border-color .15s, box-shadow .15s;
}
.guide-card:hover { color: inherit; border-color: var(--accent); transform: translateY(-2px); box-shadow: var(--shadow); }
.guide-card h3 { font-size: 1.0625rem; margin: 0; }
.guide-card p { color: var(--muted); font-size: .875rem; line-height: 1.55; margin: 0; }
.guide-card .gmeta { margin-top: auto; display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: .75rem; }
.guide-card .gmore { margin-left: auto; color: var(--accent); font-weight: 700; }
.guide-thumb {
  height: 76px; margin: 0 -18px 2px; padding: 12px 18px;
  background: var(--sunken); border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
}
.guide-thumb svg { width: 112px; height: 52px; color: var(--accent); }
.guide-thumb .topic {
  font-family: var(--font-mono); color: var(--muted); font-size: .6875rem;
  letter-spacing: .08em; text-transform: uppercase;
}
.guide-thumb .chip { fill: var(--surface); stroke: var(--border-strong); stroke-width: 2; }
.guide-thumb .pin { stroke: var(--border-strong); stroke-width: 2; }
.guide-thumb .signal { fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.guide-bottom {
  margin-top: 34px; padding: 22px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px;
  background: var(--sunken); border: 1px solid var(--border); border-radius: 4px;
}
.guide-bottom div { flex: 1 1 380px; }
.guide-bottom h2 { font-size: 1.125rem; margin-bottom: .35rem; }
.guide-bottom p { color: var(--muted); font-size: .875rem; margin: 0; }

/* Diagrams on guide pages are inline SVG: crisp, theme-aware, accessible and
   copy-safe. They illustrate wiring and flow; they never pretend to be a photo
   of hardware that has not been bench-tested. */
.guide-visual { margin: 1.6rem 0 1.9rem; }
.guide-visual-frame {
  overflow: hidden; padding: 14px; background: var(--surface);
  border: 1px solid var(--border); border-radius: 4px;
}
.guide-visual svg { display: block; width: 100%; height: auto; }
.guide-visual figcaption { margin-top: .65rem; color: var(--muted); font-size: .8125rem; }
.guide-visual .device { fill: var(--sunken); stroke: var(--border-strong); stroke-width: 2; }
.guide-visual .part { fill: var(--surface); stroke: var(--border-strong); stroke-width: 2; }
.guide-visual .wire { fill: none; stroke: var(--accent); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.guide-visual .wire.alt { stroke: var(--ok); }
.guide-visual .wire.ground { stroke: var(--text); }
.guide-visual .label { fill: var(--text); font-family: var(--font-mono); font-size: 13px; letter-spacing: 0; text-transform: none; }
.guide-visual .small { fill: var(--muted); font-family: var(--font-sans); font-size: 12px; }
.guide-visual .accent-fill { fill: var(--accent); }

/* ------------------------------------------------------ article shell --- */

/* ~65ch of prose. `--wrap` still governs the head and foot, so the page
   furniture lines up with the landing page even though the text does not. */
.reading { max-width: 42rem; margin: 0 auto; padding: 0 24px; }

.article { padding: clamp(2rem, 5vw, 3.25rem) 0 clamp(2.5rem, 6vw, 4rem); }

.crumbs {
  font-size: .875rem; color: var(--muted);
  margin: 0 0 1.25rem;
}
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--accent); }
.crumbs .sep { margin: 0 .45rem; }

.article h1 {
  font-size: clamp(2rem, 5.2vw, 2.9rem);
  letter-spacing: -.025em; line-height: 1.06;
  margin-bottom: .6rem;
}
.article .lead { max-width: none; margin-bottom: 1.25rem; }

.byline {
  font-size: .8125rem; color: var(--muted);
  margin: 0 0 2rem; padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--border);
}
.byline .sep { margin: 0 .5rem; }

.article h2 {
  font-size: clamp(1.35rem, 3.2vw, 1.7rem);
  margin-top: 2.75rem;
}
.article h3 {
  font-size: 1.0625rem; font-weight: 650;
  margin-top: 1.9rem;
}
.article h2 + p, .article h3 + p { margin-top: 0; }

.article p, .article li { max-width: 40rem; }
.article ul, .article ol { margin: 0 0 1.15rem; padding-left: 1.35rem; }
.article li { margin-bottom: .5rem; }
.article li > ul, .article li > ol { margin-top: .5rem; }

.article hr {
  border: 0; border-top: 1px solid var(--border);
  margin: 2.25rem 0;
}

/* A section-closing provenance line: "Last checked August 2026 …" */
.checked {
  font-size: .875rem; color: var(--muted); font-style: italic;
  margin: -.25rem 0 1.5rem;
}
.checked a { color: var(--muted); }
.checked a:hover { color: var(--accent); }

/* --------------------------------------------------------- notice box --- */
/* Product-state notices. `.notice-live` is the launched-state banner that
   replaced the old pre-launch block; `.note` is a caveat inside the flow. */

.notice, .note {
  margin: 1.5rem 0; padding: 1rem 1.15rem;
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent);
  border-radius: 3px;
  background: var(--surface);
  font-size: .9375rem;
}
.notice > :last-child, .note > :last-child { margin-bottom: 0; }
.notice-live { border-left-color: var(--ok); }
.notice-live .pip { display: inline-block; vertical-align: middle; margin-right: .4rem; }
.note {
  border-left-color: var(--border-strong);
  background: var(--sunken);
  color: var(--muted);
}
.note strong { color: var(--text); }

/* ------------------------------------------------------- code figures --- */

.code {
  margin: 1.35rem 0 1.6rem;
  background: var(--term-bg);
  border: 1px solid var(--term-edge);
  border-radius: 4px;
  overflow: hidden;
}
.code-head {
  display: flex; align-items: center; gap: .75rem;
  padding: .5rem .75rem .5rem .9rem;
  border-bottom: 1px solid var(--term-edge);
}
.code-lang {
  font-family: var(--font-mono); font-size: .6875rem;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--term-dim);
}
.code-name {
  font-family: var(--font-mono); font-size: .75rem;
  color: var(--term-text); margin-left: auto;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* The button is injected by article.js; without JS the head is just a label. */
.code-copy {
  margin-left: auto; flex: none;
  font: inherit; font-size: .75rem; font-weight: 600;
  font-family: var(--font-sans);
  padding: .25rem .6rem; cursor: pointer;
  color: var(--term-dim); background: transparent;
  border: 1px solid var(--term-edge); border-radius: 3px;
  transition: color .15s, border-color .15s;
}
.code-name + .code-copy { margin-left: .75rem; }
.code-copy:hover { color: var(--term-text); border-color: var(--term-dim); }
.code-copy[data-state="done"] { color: var(--term-acc); border-color: var(--term-acc); }
.code pre {
  margin: 0; padding: .95rem 1rem 1.1rem;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  color: var(--term-text);
  font-size: .8125rem; line-height: 1.65;
  tab-size: 2;
}
@media (max-width: 560px) {
  .code pre { font-size: .75rem; }
}

/* Inline code, in prose and in table cells. */
.article :not(pre) > code,
.article table code {
  font-size: .875em;
  padding: .12em .35em;
  border-radius: 5px;
  background: var(--sunken);
  border: 1px solid var(--border);
  overflow-wrap: anywhere;
}

/* ---------------------------------------------------- pricing cards --- */
/* /pricing leads with the three plans as cards a buyer can act on without
   reading the comparison table. Deliberately no "most popular" highlight —
   test/pricing.test.ts forbids it and the page's whole stance is that the
   reader picks, not the layout. */

.plans {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  margin: 2rem 0 2.25rem;
}
.plan-card {
  display: flex; flex-direction: column;
  padding: 1.5rem 1.4rem 1.35rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.plan-name { margin: 0 0 .15rem; font-size: 1.0625rem; letter-spacing: .01em; }
.plan-price {
  margin: 0 0 .9rem; font-size: 2.1rem; font-weight: 700;
  letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}
.plan-per { font-size: .95rem; font-weight: 600; color: var(--muted); letter-spacing: 0; }
.plan-facts {
  list-style: none; margin: 0 0 1.25rem; padding: 0;
  display: grid; gap: .45rem; font-size: .9375rem; color: var(--muted);
}
.plan-facts li { padding-left: 1.15rem; position: relative; }
.plan-facts li::before {
  content: ""; position: absolute; left: 0; top: .52em;
  width: 7px; height: 7px; border-radius: 50%; background: var(--accent);
}
.plan-cta { margin-top: auto; }
.plan-foot { margin: .6rem 0 0; }

/* --------------------------------------------------- article tables --- */
/* Reuses .compare from the landing page; these are the article-only tweaks. */

.article .table-scroll { margin: 1.35rem 0 .5rem; }
/* A six-column comparison does not fit a reading measure. `.wide` lets one
   element break the 42rem column and use the page width instead, capped so it
   never exceeds the landing page's wrapper. Everything else stays narrow. */
.reading > .wide {
  width: min(var(--wrap), calc(100vw - 3rem));
  margin-left: 50%;
  transform: translateX(-50%);
}
.article .compare { min-width: 34rem; font-size: .875rem; }
.article .compare td, .article .compare th { padding: .7rem .85rem; }
.article .compare tbody th { white-space: normal; min-width: 8rem; }

/* --------------------------------------------------------- CTA block --- */

.cta {
  margin: 2.5rem 0 0; padding: 1.6rem 1.5rem;
  background: var(--sunken);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.cta h2 { margin-top: 0; }
.cta .btn { margin-top: .35rem; }

/* ----------------------------------------------------- related pages --- */

.related { margin-top: 2.5rem; }
.related ul { list-style: none; margin: 0; padding: 0; }
.related li {
  margin: 0 0 .9rem; padding-left: 1.1rem;
  border-left: 2px solid var(--border);
}
.related a { font-weight: 600; }
.related p { margin: .15rem 0 0; font-size: .9375rem; color: var(--muted); }

/* ---------------------------------------------------- reduced motion --- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .caret { display: none; }
}

/* --------------------------------------------------------- status page --- */
/* SPEC.md §11.3. Four colours and a dot; a status page that needs a design
   system is a status page somebody will hesitate to change during an incident. */

.status-headline {
  font-size: clamp(1.25rem, 3vw, 1.75rem); font-weight: 700;
  margin: .25rem 0 .35rem; letter-spacing: -.01em;
}
.status-headline.operational { color: var(--ok, #0F6B45); }
.status-headline.degraded    { color: #B5892A; }
.status-headline.down        { color: #C25353; }
.status-headline.unknown     { color: var(--muted); }

.status-meta { color: var(--muted); font-size: .9375rem; margin: 0 0 1.5rem; }

.status-list { list-style: none; margin: 0 0 2rem; padding: 0; }
.status-row {
  display: flex; align-items: center; gap: .6rem;
  padding: .6rem 0; border-bottom: 1px solid var(--border);
}
.status-note { color: var(--muted); font-size: .875rem; }

.status-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.status-dot.operational { background: var(--ok, #0F6B45); }
.status-dot.degraded    { background: #B5892A; }
.status-dot.down        { background: #C25353; }
/* Outlined rather than filled: "we do not know" must not look like a state. */
.status-dot.unknown     { background: transparent; border: 2px solid var(--border-strong, #8C8375); }

/* ---------------------------------------------------------------------------
   The "set up a device" call-out — guides.html, above the library.

   Deliberately not a `.guide-card`: a guide is something you read, this is a
   tool that writes code for the board in your hand, and the two should not look
   like the same offer. It borrows the hero's shape so the page still reads as
   one page.
   --------------------------------------------------------------------------- */
.setup-cta {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: 28px 40px;
  align-items: start;
  padding: 28px 30px;
  margin: 0 0 34px;
  background: var(--surface, #fff);
  border: 1px solid var(--accent, #245C8D);
  border-radius: 14px;
}
.setup-cta h2 { margin: 6px 0 10px; }
.setup-cta p { margin: 0 0 16px; color: var(--muted, #4E5A66); max-width: 54ch; }
.setup-cta .btn { margin-top: 2px; }
.setup-cta-list {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.9375rem;
  color: var(--muted, #4E5A66);
}
.setup-cta-list li {
  padding: 9px 0 9px 22px;
  border-top: 1px solid var(--border, #DDDDD8);
  position: relative;
}
.setup-cta-list li:first-child { border-top: 0; }
.setup-cta-list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 17px;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--accent, #245C8D);
}
/* index.html, "How it works" step 1: the one line pointing at the wizard. */
.step-aside {
  margin: 10px 0 0;
  font-size: 0.875rem;
  color: var(--muted, #4E5A66);
}
@media (max-width: 760px) {
  .setup-cta { grid-template-columns: 1fr; padding: 22px 20px; }
}