/* ==========================================================================
   GutenFields — marketing site
   Concept: "The type case" — a printer's specimen for a code-first block tool.
   Type:  IBM Plex Sans (display/body) · IBM Plex Mono (code/labels) · Plex Serif (quote)
   ========================================================================== */

/* ---- Fonts (self-hosted — no Google Fonts, no CDN, nothing to block) ---- */
@font-face { font-family: "Plex Sans"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/sans-400.woff2") format("woff2"); }
@font-face { font-family: "Plex Sans"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("fonts/sans-500.woff2") format("woff2"); }
@font-face { font-family: "Plex Sans"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("fonts/sans-600.woff2") format("woff2"); }
@font-face { font-family: "Plex Sans"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("fonts/sans-700.woff2") format("woff2"); }
@font-face { font-family: "Plex Mono"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/mono-400.woff2") format("woff2"); }
@font-face { font-family: "Plex Mono"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("fonts/mono-500.woff2") format("woff2"); }
@font-face { font-family: "Plex Mono"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("fonts/mono-600.woff2") format("woff2"); }
@font-face { font-family: "Plex Serif"; font-style: italic; font-weight: 400; font-display: swap;
  src: url("fonts/serif-400i.woff2") format("woff2"); }

/* ---- Design tokens ------------------------------------------------------- */
:root {
  /* Neutrals — cool, biased toward the blueprint accent (never pure grey) */
  --paper:      #f1f4f8;
  --surface:    #ffffff;
  --surface-2:  #f7f9fb;
  --ink:        #111820;
  --ink-soft:   #4b5a6a;
  --ink-faint:  #7c8a99;
  --line:       #dbe2ea;
  --line-soft:  #e8edf2;

  /* Brand */
  --accent:     #2b5fe3;   /* blueprint blue */
  --accent-ink: #1a3fa8;   /* accent that reads as text on paper */
  --accent-wash:#e7edfd;
  --brass:      #a9772a;   /* movable-type metal / the "IF" conditional badge */
  --brass-wash: #f4ead6;

  /* Code surface (kept consistent across themes — it's an object, like a print) */
  --code-bg:    #0d1420;
  --code-fg:    #d7dee8;
  --code-line:  #1e293b;
  --code-dim:   #6b7a90;
  --code-blue:  #7aa2ff;
  --code-brass: #e0a64a;
  --code-green: #6fcf97;
  --code-pink:  #e58fb0;

  --radius:     14px;
  --radius-sm:  9px;
  --maxw:       1120px;
  --gutter:     clamp(20px, 5vw, 48px);

  --shadow-sm:  0 1px 2px rgba(17, 24, 32, .05), 0 1px 1px rgba(17, 24, 32, .04);
  --shadow-md:  0 14px 40px -18px rgba(20, 33, 61, .28), 0 4px 12px -8px rgba(20, 33, 61, .18);
  --shadow-lg:  0 30px 70px -30px rgba(15, 26, 51, .40), 0 8px 24px -14px rgba(15, 26, 51, .22);

  --ff-sans: "Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --ff-mono: "Plex Mono", ui-monospace, "SF Mono", "SFMono-Regular", Menlo, Consolas, monospace;
  --ff-serif:"Plex Serif", Georgia, "Times New Roman", serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper:      #0b1017;
    --surface:    #121a25;
    --surface-2:  #0f1720;
    --ink:        #e9eef4;
    --ink-soft:   #9fb0c1;
    --ink-faint:  #6c7d8f;
    --line:       #22303f;
    --line-soft:  #1a2431;
    --accent:     #6a94ff;
    --accent-ink: #a8c2ff;
    --accent-wash:#16233d;
    --brass:      #dca648;
    --brass-wash: #2a2411;
    --shadow-sm:  0 1px 2px rgba(0,0,0,.4);
    --shadow-md:  0 16px 44px -20px rgba(0,0,0,.7), 0 4px 12px -8px rgba(0,0,0,.5);
    --shadow-lg:  0 34px 80px -34px rgba(0,0,0,.8), 0 10px 26px -16px rgba(0,0,0,.6);
  }
}

/* Explicit toggle wins over the media query in both directions */
:root[data-theme="light"] {
  --paper:#f1f4f8; --surface:#fff; --surface-2:#f7f9fb;
  --ink:#111820; --ink-soft:#4b5a6a; --ink-faint:#7c8a99;
  --line:#dbe2ea; --line-soft:#e8edf2;
  --accent:#2b5fe3; --accent-ink:#1a3fa8; --accent-wash:#e7edfd;
  --brass:#a9772a; --brass-wash:#f4ead6;
  --shadow-sm:0 1px 2px rgba(17,24,32,.05),0 1px 1px rgba(17,24,32,.04);
  --shadow-md:0 14px 40px -18px rgba(20,33,61,.28),0 4px 12px -8px rgba(20,33,61,.18);
  --shadow-lg:0 30px 70px -30px rgba(15,26,51,.40),0 8px 24px -14px rgba(15,26,51,.22);
}
:root[data-theme="dark"] {
  --paper:#0b1017; --surface:#121a25; --surface-2:#0f1720;
  --ink:#e9eef4; --ink-soft:#9fb0c1; --ink-faint:#6c7d8f;
  --line:#22303f; --line-soft:#1a2431;
  --accent:#6a94ff; --accent-ink:#a8c2ff; --accent-wash:#16233d;
  --brass:#dca648; --brass-wash:#2a2411;
  --shadow-sm:0 1px 2px rgba(0,0,0,.4);
  --shadow-md:0 16px 44px -20px rgba(0,0,0,.7),0 4px 12px -8px rgba(0,0,0,.5);
  --shadow-lg:0 34px 80px -34px rgba(0,0,0,.8),0 10px 26px -16px rgba(0,0,0,.6);
}

/* ---- Reset / base -------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  font-family: var(--ff-sans);
  font-size: clamp(16px, 1rem + .1vw, 17px);
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
h1, h2, h3, h4 { margin: 0; font-weight: 600; line-height: 1.1; letter-spacing: -.02em; text-wrap: balance; }
p { margin: 0; }
a { color: var(--accent-ink); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
img { max-width: 100%; display: block; }
/* An author-level `display` beats the UA rule for [hidden], and the portal
   toggles whole panels with it — .btn, .acct__who and friends would otherwise
   stay on screen while marked hidden. */
[hidden] { display: none !important; }
::selection { background: color-mix(in srgb, var(--accent) 22%, transparent); }
:focus-visible { outline: 2.5px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

/* ---- Layout helpers ------------------------------------------------------ */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
/* Grid/flex children must be allowed to shrink below their content's intrinsic
   width, or a code panel's longest <pre> line stretches its track past the viewport. */
.hero__grid > *, .showcase > *, .split > *, .transform > *, .pipe > *,
.showcase__aside, .hero__media, .split__copy, .split__media { min-width: 0; }
.code, .blockcard, .shot { min-width: 0; max-width: 100%; }
.section { padding-block: clamp(64px, 9vw, 120px); }
.section--tight { padding-block: clamp(48px, 6vw, 80px); }
.eyebrow {
  font-family: var(--ff-mono); font-size: .72rem; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase; color: var(--accent-ink);
  display: inline-flex; align-items: center; gap: .55em;
}
.eyebrow::before { content: ""; width: 22px; height: 1px; background: currentColor; opacity: .5; }
.section-head { max-width: 62ch; margin-bottom: clamp(36px, 5vw, 56px); }
.section-head h2 { font-size: clamp(1.7rem, 1.2rem + 2.2vw, 2.6rem); margin-top: 14px; }
.section-head p { margin-top: 16px; font-size: 1.075rem; color: var(--ink-soft); max-width: 60ch; }

/* ---- Buttons ------------------------------------------------------------- */
.btn {
  --_bg: var(--accent); --_fg: #fff;
  display: inline-flex; align-items: center; gap: .5em;
  font-family: var(--ff-sans); font-size: .95rem; font-weight: 600; line-height: 1;
  padding: .82em 1.25em; border-radius: 10px; border: 1px solid transparent;
  background: var(--_bg); color: var(--_fg); cursor: pointer;
  transition: transform .16s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
  white-space: nowrap;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn:active { transform: translateY(0); }
.btn--primary { box-shadow: 0 8px 22px -12px color-mix(in srgb, var(--accent) 80%, transparent); }
.btn--ghost { --_bg: transparent; --_fg: var(--ink); border-color: var(--line); }
.btn--ghost:hover { border-color: var(--accent); color: var(--accent-ink); box-shadow: var(--shadow-sm); background: var(--surface); }
.btn svg { width: 1.05em; height: 1.05em; }
.btn--sm { font-size: .875rem; padding: .62em 1em; }

/* ---- Header -------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--paper) 82%, transparent);
  backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s ease, background .3s ease;
}
.site-header[data-scrolled="true"] { border-bottom-color: var(--line); }
.nav { display: flex; align-items: center; gap: 28px; height: 66px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); font-weight: 600; letter-spacing: -.02em; font-size: 1.06rem; }
.brand:hover { text-decoration: none; }
.brand__mark { width: 30px; height: 30px; flex: none; }
.brand b { font-weight: 700; }
.brand span { color: var(--accent-ink); }
.nav__links { display: flex; align-items: center; gap: 4px; margin-left: 8px; }
.nav__links a {
  color: var(--ink-soft); font-size: .93rem; font-weight: 500;
  padding: 8px 12px; border-radius: 8px;
  /* A nav label never wraps. Allowed to, "How it works" breaks over two lines
     and the row silently "fits" at a width where it plainly does not — which is
     how the sideways scroll hid in plain sight. */
  white-space: nowrap;
}
.nav__links a:hover { color: var(--ink); background: var(--surface-2); text-decoration: none; }
.nav__spacer { flex: 1; }
.nav__actions { display: flex; align-items: center; gap: 10px; }
.theme-toggle {
  width: 38px; height: 38px; display: inline-grid; place-items: center;
  border: 1px solid var(--line); border-radius: 9px; background: var(--surface);
  color: var(--ink-soft); cursor: pointer; transition: color .2s, border-color .2s, background .2s;
}
.theme-toggle:hover { color: var(--ink); border-color: var(--accent); }
.theme-toggle svg { width: 18px; height: 18px; }
.theme-toggle .icon-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .icon-sun { display: block; }
  :root:not([data-theme="light"]) .theme-toggle .icon-moon { display: none; }
}
.nav__toggle { display: none; }

/* ---- Hero ---------------------------------------------------------------- */
.hero { position: relative; padding-top: clamp(48px, 7vw, 84px); padding-bottom: clamp(56px, 8vw, 104px); overflow: hidden; }
.hero__grid {
  display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 60px); align-items: center;
}
.hero__copy { max-width: 34rem; }
.hero h1 {
  font-size: clamp(2.4rem, 1.5rem + 3.9vw, 4rem);
  line-height: 1.03; margin-top: 22px;
}
.hero h1 .mono { font-family: var(--ff-mono); font-weight: 500; letter-spacing: -.04em; }
.hero h1 .u { position: relative; white-space: nowrap; }
.hero h1 .u::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: .07em; height: .11em;
  background: var(--brass); border-radius: 2px; opacity: .9;
}
.hero__lede { margin-top: 22px; font-size: 1.16rem; line-height: 1.55; color: var(--ink-soft); }
.hero__lede b { color: var(--ink); font-weight: 600; }
.hero__cta { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 12px; }
.hero__meta {
  margin-top: 24px; display: flex; flex-wrap: wrap; gap: 8px 20px;
  font-family: var(--ff-mono); font-size: .8rem; color: var(--ink-faint);
}
.hero__meta span { display: inline-flex; align-items: center; gap: .5em; }
.hero__meta .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--brass); }
.hero__meta .dot--blue { background: var(--accent); }
.hero__meta .dot--green { background: #34a06a; }

/* Hero transform: code -> block */
.transform { position: relative; display: grid; gap: 0; }
.transform__arrow {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  z-index: 3; width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center; background: var(--surface); color: var(--accent);
  border: 1px solid var(--line); box-shadow: var(--shadow-md);
}
.transform__arrow svg { width: 22px; height: 22px; }

/* ---- Code panels --------------------------------------------------------- */
.code {
  background: var(--code-bg); color: var(--code-fg); border-radius: var(--radius);
  border: 1px solid var(--code-line); box-shadow: var(--shadow-lg); overflow: hidden;
  font-family: var(--ff-mono); font-size: .84rem; line-height: 1.75;
}
.code__bar {
  display: flex; align-items: center; gap: 8px; padding: 11px 15px;
  border-bottom: 1px solid var(--code-line); background: rgba(255,255,255,.02);
}
.code__dots { display: inline-flex; gap: 6px; }
.code__dots i { width: 11px; height: 11px; border-radius: 50%; background: #33415a; }
.code__name { margin-left: 6px; color: var(--code-dim); font-size: .76rem; letter-spacing: .02em; }
.code__copy {
  margin-left: auto; display: inline-flex; align-items: center; gap: 6px;
  background: transparent; border: 1px solid var(--code-line); color: var(--code-dim);
  font-family: var(--ff-mono); font-size: .72rem; padding: 4px 9px; border-radius: 7px; cursor: pointer;
  transition: color .2s, border-color .2s;
}
.code__copy:hover { color: var(--code-fg); border-color: #3b4a63; }
.code__copy.is-done { color: var(--code-green); border-color: var(--code-green); }
.code pre { margin: 0; padding: 18px 20px; overflow-x: auto; }
.code code { font-family: inherit; white-space: pre; }
.tok-key { color: var(--code-pink); }
.tok-fn  { color: var(--code-blue); }
.tok-str { color: var(--code-green); }
.tok-arr { color: var(--code-brass); }
.tok-com { color: var(--code-dim); font-style: italic; }
.tok-var { color: #9ad0ff; }
.tok-punc{ color: #8194ad; }
.cl { display: block; }

/* Mini rendered "block" preview that the code becomes */
.blockcard {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-md); overflow: hidden;
}
.blockcard__chrome {
  display: flex; align-items: center; gap: 8px; padding: 10px 14px;
  border-bottom: 1px solid var(--line-soft); background: var(--surface-2);
  font-family: var(--ff-mono); font-size: .72rem; color: var(--ink-faint);
}
.blockcard__chrome .wp { width: 15px; height: 15px; border-radius: 3px; background: var(--ink); flex: none; }
.blockcard__body { padding: 18px; display: grid; gap: 14px; }
.blockcard__tag {
  justify-self: start; font-family: var(--ff-mono); font-size: .64rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--accent-ink); background: var(--accent-wash);
  padding: 3px 8px; border-radius: 5px;
}
.field { display: grid; gap: 6px; }
.field label { font-family: var(--ff-mono); font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); }
.field .control {
  border: 1px solid var(--line); border-radius: 7px; padding: 9px 11px;
  background: var(--surface); color: var(--ink-soft); font-size: .82rem; min-height: 20px;
}
.field .control--tall { min-height: 44px; }
.field-row { display: flex; align-items: center; gap: 10px; }
.field-row .toggle { width: 34px; height: 19px; border-radius: 20px; background: var(--accent); position: relative; flex: none; }
.field-row .toggle::after { content:""; position: absolute; right: 3px; top: 3px; width: 13px; height: 13px; border-radius: 50%; background: #fff; }
.field-row span { font-family: var(--ff-mono); font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
.field-swatch { width: 24px; height: 24px; border-radius: 6px; border: 1px solid var(--line); background: #2271b1; flex: none; }

/* ---- Marquee logos-ish trust strip (facts, not fake logos) --------------- */
.facts { border-block: 1px solid var(--line); background: var(--surface-2); }
.facts__grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--line); border-inline: 1px solid var(--line);
}
.fact { background: var(--surface-2); padding: 22px 20px; text-align: center; }
.fact b { display: block; font-family: var(--ff-mono); font-size: 1.7rem; font-weight: 600; color: var(--ink); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.fact span { display: block; margin-top: 4px; font-size: .82rem; color: var(--ink-soft); }

/* ---- Pipeline (how it works) --------------------------------------------- */
.pipe { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; counter-reset: step; }
.pipe__step {
  position: relative; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 24px 22px 26px; box-shadow: var(--shadow-sm);
}
.pipe__step::before {
  counter-increment: step; content: counter(step, decimal-leading-zero);
  font-family: var(--ff-mono); font-size: .8rem; font-weight: 600; color: var(--accent);
  letter-spacing: .05em;
}
.pipe__step h3 { font-size: 1.12rem; margin-top: 14px; }
/* The last step's copy names a template path with no spaces in it. Without this
   the path sets the track's minimum width, so the whole four-column grid stayed
   339px per column and pushed the page sideways at every viewport under 1400. */
.pipe__step code { overflow-wrap: anywhere; }
.pipe__step p { margin-top: 9px; font-size: .95rem; color: var(--ink-soft); }
.pipe__step .glyph { position: absolute; top: 20px; right: 20px; color: var(--ink-faint); opacity: .5; }
.pipe__step .glyph svg { width: 22px; height: 22px; }
.pipe__step:not(:last-child)::after {
  content: ""; position: absolute; right: -13px; top: 50%; z-index: 2;
  width: 26px; height: 1px; background: var(--line);
}

/* ---- Split (two ways) ---------------------------------------------------- */
.split { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(28px, 4vw, 52px); align-items: center; }
.split--reverse .split__media { order: -1; }
.ways { display: grid; gap: 16px; }
.way {
  display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: start;
  padding: 20px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.way__icon { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: var(--accent-wash); color: var(--accent-ink); flex: none; }
.way__icon svg { width: 20px; height: 20px; }
.way h3 { font-size: 1.08rem; display: flex; align-items: center; gap: 10px; }
.way h3 .pill { font-family: var(--ff-mono); font-size: .6rem; letter-spacing: .1em; text-transform: uppercase; padding: 2px 7px; border-radius: 5px; background: var(--surface-2); color: var(--ink-faint); border: 1px solid var(--line); }
.way p { margin-top: 8px; font-size: .95rem; color: var(--ink-soft); }
.way__note { margin-top: 18px; font-size: .92rem; color: var(--ink-soft); padding-left: 16px; border-left: 2px solid var(--brass); }
.way__note b { color: var(--ink); font-weight: 600; }

/* Framed screenshot */
.shot {
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow-lg); background: var(--surface);
}
.shot__bar { display: flex; align-items: center; gap: 8px; padding: 9px 13px; border-bottom: 1px solid var(--line-soft); background: var(--surface-2); }
.shot__bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--line); }
.shot__bar span { margin-left: 8px; font-family: var(--ff-mono); font-size: .72rem; color: var(--ink-faint); }
.shot img { width: 100%; height: auto; }
.shot--plain { border-radius: var(--radius); }
.shot--plain img { border-radius: 0; }

/* ---- Feature grid -------------------------------------------------------- */
.features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.feature {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 26px 24px; box-shadow: var(--shadow-sm);
  transition: transform .18s ease, box-shadow .2s ease, border-color .2s ease;
}
.feature:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); }
.feature__icon { width: 42px; height: 42px; border-radius: 11px; display: grid; place-items: center; background: var(--accent-wash); color: var(--accent-ink); margin-bottom: 18px; }
.feature__icon svg { width: 21px; height: 21px; }
.feature h3 { font-size: 1.1rem; }
.feature p { margin-top: 10px; font-size: .95rem; color: var(--ink-soft); }
.feature code { font-family: var(--ff-mono); font-size: .85em; background: var(--surface-2); padding: .1em .4em; border-radius: 5px; color: var(--accent-ink); border: 1px solid var(--line-soft); }

/* ---- Type specimen (21 field types) -------------------------------------- */
.specimen { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 20px; }
.tc {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 22px; box-shadow: var(--shadow-sm);
}
.tc__label { font-family: var(--ff-mono); font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: var(--brass); display: flex; align-items: center; gap: 8px; }
.tc__label::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--brass); }
.tc__count { margin-left: auto; color: var(--ink-faint); }
.tc__list { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 7px; }
.tc__list li {
  font-family: var(--ff-mono); font-size: .82rem; color: var(--ink);
  background: var(--surface-2); border: 1px solid var(--line-soft);
  padding: 4px 9px; border-radius: 7px;
}
.tc__list li b { color: var(--accent-ink); font-weight: 500; }

/* ---- Template showcase --------------------------------------------------- */
.showcase { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: stretch; }
.showcase .code { align-self: stretch; }
.showcase__aside { display: flex; flex-direction: column; gap: 18px; justify-content: center; }
.showcase__aside h2 { font-size: clamp(1.6rem, 1.2rem + 1.8vw, 2.3rem); }
.showcase__aside p { color: var(--ink-soft); font-size: 1.05rem; }
.helperlist { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.helperlist code { font-family: var(--ff-mono); font-size: .8rem; background: var(--surface); border: 1px solid var(--line); color: var(--ink); padding: 5px 10px; border-radius: 8px; }
.helperlist code b { color: var(--accent-ink); font-weight: 500; }

/* ---- Pull quote (editorial serif moment) --------------------------------- */
.quote { text-align: center; max-width: 40ch; margin-inline: auto; }
.quote p { font-family: var(--ff-serif); font-style: italic; font-size: clamp(1.5rem, 1.1rem + 1.9vw, 2.15rem); line-height: 1.32; color: var(--ink); letter-spacing: -.01em; }
.quote .mark { font-family: var(--ff-serif); font-style: italic; font-size: 3rem; color: var(--brass); line-height: 0; display: block; height: 1.1rem; }

/* ---- Gallery ------------------------------------------------------------- */
.gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.gallery figure { margin: 0; }
.gallery figcaption { margin-top: 12px; font-size: .9rem; color: var(--ink-soft); }
.gallery figcaption b { color: var(--ink); font-weight: 600; font-family: var(--ff-mono); font-size: .82rem; letter-spacing: .02em; }

/* ---- "No" band ----------------------------------------------------------- */
.nos { background: var(--code-bg); color: #cfd8e6; border-radius: 0; }
.nos .wrap { padding-block: clamp(56px, 8vw, 96px); }
.nos .eyebrow { color: var(--code-brass); }
.nos h2 { color: #fff; font-size: clamp(1.7rem, 1.2rem + 2.2vw, 2.5rem); max-width: 20ch; }
.nos__grid { margin-top: 40px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--code-line); border: 1px solid var(--code-line); border-radius: var(--radius); overflow: hidden; }
.no { background: var(--code-bg); padding: 26px 26px; display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: start; }
.no__x { width: 30px; height: 30px; border-radius: 8px; background: rgba(224,166,74,.12); color: var(--code-brass); display: grid; place-items: center; flex: none; }
.no__x svg { width: 16px; height: 16px; }
.no h3 { color: #fff; font-size: 1.06rem; }
.no p { margin-top: 7px; font-size: .93rem; color: #93a3ba; }
.no code { font-family: var(--ff-mono); background: rgba(255,255,255,.06); padding: .1em .4em; border-radius: 5px; color: #cbd6e6; font-size: .85em; }

/* ---- FAQ ----------------------------------------------------------------- */
.faq { display: grid; gap: 0; max-width: 800px; margin-inline: auto; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none; cursor: pointer; padding: 22px 4px 22px 0; display: flex;
  align-items: center; gap: 16px; font-weight: 600; font-size: 1.08rem; color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; margin-left: auto; flex: none; width: 12px; height: 12px;
  border-right: 2px solid var(--ink-faint); border-bottom: 2px solid var(--ink-faint);
  transform: rotate(45deg); transition: transform .25s ease; margin-top: -4px;
}
.faq details[open] summary::after { transform: rotate(-135deg); margin-top: 2px; }
.faq summary .q { font-family: var(--ff-mono); color: var(--accent); font-size: .9rem; flex: none; }
.faq__a { padding: 0 40px 24px 40px; color: var(--ink-soft); font-size: 1rem; line-height: 1.65; }
.faq__a code { font-family: var(--ff-mono); font-size: .85em; background: var(--surface-2); padding: .1em .4em; border-radius: 5px; color: var(--accent-ink); border: 1px solid var(--line-soft); }

/* ---- CTA ----------------------------------------------------------------- */
.cta {
  position: relative; overflow: hidden; text-align: center;
  background:
    radial-gradient(120% 140% at 50% 0%, color-mix(in srgb, var(--accent) 14%, var(--surface)) 0%, var(--surface) 55%);
  border: 1px solid var(--line); border-radius: 22px; padding: clamp(44px, 6vw, 76px) var(--gutter);
  box-shadow: var(--shadow-md);
}
.cta h2 { font-size: clamp(1.9rem, 1.3rem + 2.6vw, 3rem); max-width: 18ch; margin-inline: auto; }
.cta p { margin: 18px auto 0; max-width: 52ch; color: var(--ink-soft); font-size: 1.1rem; }
.cta__actions { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.cta__code {
  margin: 26px auto 0; max-width: 460px; display: flex; align-items: center; gap: 12px;
  background: var(--code-bg); color: var(--code-fg); font-family: var(--ff-mono); font-size: .86rem;
  padding: 13px 16px; border-radius: 11px; text-align: left; border: 1px solid var(--code-line);
}
.cta__code .prompt { color: var(--code-green); }
.cta__code .cmd { color: var(--code-fg); flex: 1; }
.cta__code button { margin-left: auto; background: transparent; border: 1px solid var(--code-line); color: var(--code-dim); border-radius: 7px; padding: 5px 8px; cursor: pointer; }
.cta__code button:hover { color: #fff; }
.cta__code button.is-done { color: var(--code-green); border-color: var(--code-green); }

/* ---- Footer -------------------------------------------------------------- */
.site-footer { border-top: 1px solid var(--line); background: var(--surface-2); }
.footer { display: grid; grid-template-columns: 1.5fr repeat(4, 1fr); gap: 40px 32px; padding-block: 56px 40px; }
.footer__brand .brand { font-size: 1.1rem; }
.footer__brand p { margin-top: 14px; font-size: .92rem; color: var(--ink-soft); max-width: 34ch; }
/* Ownership credit — the wordmark is the link, the sentence beside it is not. */
.footer__brand .footer__owner {
  margin-top: 20px; max-width: none; font-size: .82rem; color: var(--ink-faint);
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px;
}
.footer__owner a { display: inline-flex; flex: none; }
.footer__owner img { height: 14px; width: auto; }  /* cap height matched to the sentence beside it */
.footer__col h4 { font-family: var(--ff-mono); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); font-weight: 500; }
.footer__col ul { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 11px; }
.footer__col a { color: var(--ink-soft); font-size: .93rem; }
.footer__col a:hover { color: var(--ink); }
.footer__bar { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; justify-content: space-between; padding-block: 22px; border-top: 1px solid var(--line); font-size: .85rem; color: var(--ink-faint); }
.footer__bar p { font-family: var(--ff-mono); font-size: .78rem; }
.footer__bar .made { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.footer__bar .made b { color: var(--ink-soft); font-weight: 500; }

/* ---- Pricing page -------------------------------------------------------- */
.price-hero { text-align: center; padding-top: clamp(40px, 6vw, 72px); padding-bottom: clamp(20px, 3vw, 32px); }
.price-hero .eyebrow { justify-content: center; }
.price-hero h1 { font-size: clamp(2.1rem, 1.4rem + 3vw, 3.4rem); margin-top: 18px; }
.price-hero p { margin: 20px auto 0; max-width: 54ch; color: var(--ink-soft); font-size: 1.14rem; }

/* Three paid tiers. 1024px rather than the page's full 1120px so the cards
   stay readable columns rather than stretching into banners. */
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; max-width: 1024px; margin: 0 auto; align-items: stretch; }
.plan {
  position: relative; background: var(--surface); border: 1px solid var(--line);
  border-radius: 18px; padding: 30px 26px; box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column; gap: 18px;
}
.plan--featured { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); box-shadow: var(--shadow-md); }
.plan--featured::before {
  content: "Most agencies"; position: absolute; top: -11px; left: 30px;
  font-family: var(--ff-mono); font-size: .64rem; letter-spacing: .12em; text-transform: uppercase;
  background: var(--accent); color: #fff; padding: 4px 10px; border-radius: 6px;
}
.plan__name { font-family: var(--ff-mono); font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-ink); }
.plan__price { display: flex; align-items: baseline; gap: 8px; }
.plan__price b { font-size: 2.6rem; font-weight: 700; letter-spacing: -.03em; color: var(--ink); font-variant-numeric: tabular-nums; }
.plan__price .per { font-family: var(--ff-mono); font-size: .82rem; color: var(--ink-faint); }
.plan__tag { font-size: .95rem; color: var(--ink-soft); }
.plan__list { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 12px; }
.plan__list li { display: grid; grid-template-columns: auto 1fr; gap: 11px; align-items: start; font-size: .95rem; color: var(--ink); }
.plan__list li svg { width: 18px; height: 18px; color: var(--accent); margin-top: 2px; flex: none; }
.plan__list li.muted { color: var(--ink-faint); }
.plan__list li.muted svg { color: var(--ink-faint); }
.plan__cta { margin-top: auto; }
.plan__cta .btn { width: 100%; justify-content: center; }
.plan__fine { font-size: .8rem; color: var(--ink-faint); text-align: center; }

/* The free edition. A band rather than a fourth card: it is a different kind of
   thing — a WordPress.org download, not a purchase — and putting it above the
   paid cards makes the page read the way the funnel actually runs. */
.plan-free {
  max-width: 1024px; margin: 0 auto 22px; background: var(--surface-2);
  border: 1px solid var(--line); border-left: 3px solid var(--brass);
  border-radius: 18px; padding: 26px 30px;
  display: grid; grid-template-columns: 1fr auto; gap: 20px 32px; align-items: center;
}
.plan-free h3 { font-size: 1.2rem; }
.plan-free p { margin-top: 8px; color: var(--ink-soft); font-size: .95rem; max-width: 62ch; }
.plan-free__price {
  font-family: var(--ff-mono); font-size: .78rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--accent-ink);
}
.plan-free .btn { white-space: nowrap; }

/* Where "buy again next year" lives now: once, under the cards, as a fact about
   the model rather than a bullet in every tier that reads like a warning. */
.plans-note {
  max-width: 1024px; margin: 18px auto 0; text-align: center;
  font-size: .86rem; color: var(--ink-faint); line-height: 1.6;
}
.plans-note b { color: var(--ink-soft); font-weight: 600; }

.support {
  max-width: 860px; margin: 40px auto 0; background: var(--surface-2);
  border: 1px solid var(--line); border-radius: 18px; padding: 30px 34px;
  border-left: 3px solid var(--brass);
}
.support h3 { font-size: 1.3rem; }
.support p { margin-top: 10px; color: var(--ink-soft); font-size: 1rem; max-width: 68ch; }

.pnote { max-width: 760px; margin: 40px auto 0; display: grid; gap: 14px; }
.pnote__row { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start; padding: 18px 20px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; }
.pnote__row svg { width: 20px; height: 20px; color: var(--accent); margin-top: 2px; flex: none; }
.pnote__row h4 { font-size: 1rem; }
.pnote__row p { margin-top: 5px; font-size: .92rem; color: var(--ink-soft); }
.pnote__row code { font-family: var(--ff-mono); font-size: .85em; background: var(--surface-2); padding: .1em .4em; border-radius: 5px; color: var(--accent-ink); border: 1px solid var(--line-soft); }

/* Three columns need more room than two did, so they get tighter rather than
   fewer: two columns would leave the featured tier either orphaned on its own
   row or spanning both and punching holes in the grid, and three narrow cards
   read better than either. Below that it is one column — a full-width card at
   tablet size is a banner, so the stack keeps a card's width. */
@media (max-width: 900px) {
  .plans { gap: 14px; }
  .plan { padding: 26px 20px; }
  .plan__price b { font-size: 2.2rem; }
  .plan__list li { font-size: .9rem; }
}
@media (max-width: 760px) {
  .plans { grid-template-columns: 1fr; max-width: 460px; gap: 20px; }
  .plan { padding: 30px 26px; }
  .plan__price b { font-size: 2.6rem; }
  .plan-free { grid-template-columns: 1fr; padding: 24px; max-width: 460px; }
  .support { padding: 26px 24px; }
}

/* "Pro" markers on docs.html. Small and matter-of-fact: the free edition is a
   real plugin, so these say which of the four features a licence adds rather
   than decorating the page with a sales pitch. */
.pro-tag {
  display: inline-block; vertical-align: baseline;
  font-family: var(--ff-mono); font-size: .6rem; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--brass); background: color-mix(in srgb, var(--brass) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--brass) 40%, transparent);
  border-radius: 5px; padding: .1em .4em; margin-left: .4em;
}
h2 .pro-tag { font-size: .48em; position: relative; top: -.35em; }
.pro-note {
  margin-top: 10px; padding: 12px 16px; font-size: .92rem; color: var(--ink-soft);
  background: var(--surface-2); border: 1px solid var(--line);
  border-left: 3px solid var(--brass); border-radius: 10px;
}

/* ---- Account portal & admin console -------------------------------------- */
/* Shared by account.html and admin.html. Same type case as the rest of the
   site: mono for anything machine-shaped (keys, hostnames, dates), sans for
   anything a person wrote. */

.acct { padding-block: clamp(32px, 5vw, 56px) clamp(56px, 8vw, 96px); }
.acct__head { display: flex; flex-wrap: wrap; gap: 16px 24px; align-items: end; justify-content: space-between; margin-bottom: 28px; }
.acct__head h1 { font-size: clamp(1.7rem, 1.2rem + 2.2vw, 2.5rem); margin-top: 14px; }
.acct__head p { margin-top: 12px; color: var(--ink-soft); max-width: 56ch; }
.acct__who { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-family: var(--ff-mono); font-size: .82rem; color: var(--ink-faint); }
.acct__who b { color: var(--ink); font-weight: 500; }

/* Sign-in */
.signin { max-width: 480px; margin: 8px auto 0; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 32px 30px; box-shadow: var(--shadow-sm); }
.signin h2 { font-size: 1.35rem; }
.signin > p { margin-top: 10px; color: var(--ink-soft); font-size: .95rem; }
.signin form { margin-top: 22px; display: grid; gap: 12px; }
.signin .btn { width: 100%; justify-content: center; }
.signin__alt { margin-top: 16px; font-size: .86rem; color: var(--ink-faint); text-align: center; }
.signin__alt button { background: none; border: 0; padding: 0; color: var(--accent-ink); font: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }

/* Form controls */
.inp {
  width: 100%; font: inherit; font-size: .95rem; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: .68em .8em;
}
.inp:focus-visible { outline: 2.5px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.inp--code { font-family: var(--ff-mono); letter-spacing: .38em; text-transform: uppercase; text-align: center; font-size: 1.15rem; }
.inp--mono { font-family: var(--ff-mono); font-size: .86rem; }
select.inp { appearance: none; padding-right: 2em;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 15px) 52%, calc(100% - 10px) 52%; background-size: 5px 5px; background-repeat: no-repeat; }
.lbl { display: block; font-family: var(--ff-mono); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 6px; }

.btn--danger { --_bg: transparent; --_fg: #b32d2e; border-color: color-mix(in srgb, #b32d2e 35%, var(--line)); }
.btn--danger:hover { --_bg: #b32d2e; --_fg: #fff; border-color: #b32d2e; }
:root[data-theme="dark"] .btn--danger { --_fg: #ff8f8f; }
.btn--tiny { font-size: .78rem; padding: .5em .8em; border-radius: 8px; }
.btn[disabled] { opacity: .55; pointer-events: none; }

/* Flash messages */
.flash { margin: 0 0 20px; padding: 13px 16px; border-radius: var(--radius-sm); font-size: .92rem; border: 1px solid var(--line); background: var(--surface-2); color: var(--ink-soft); }
.flash--ok { border-color: color-mix(in srgb, #1a7f37 40%, var(--line)); background: color-mix(in srgb, #1a7f37 8%, var(--surface)); color: var(--ink); }
.flash--err { border-color: color-mix(in srgb, #b32d2e 40%, var(--line)); background: color-mix(in srgb, #b32d2e 8%, var(--surface)); color: var(--ink); }

/* Licence card */
.lics { display: grid; gap: 20px; }
.lic { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow-sm); overflow: hidden; }
.lic--lapsed { border-color: color-mix(in srgb, var(--brass) 45%, var(--line)); }
.lic__head { display: flex; flex-wrap: wrap; gap: 14px 20px; align-items: center; justify-content: space-between; padding: 20px 24px; border-bottom: 1px solid var(--line-soft); background: var(--surface-2); }
.lic__key { display: flex; align-items: center; gap: 10px; font-family: var(--ff-mono); font-size: 1rem; letter-spacing: -.01em; color: var(--ink); word-break: break-all; }
.lic__copy { background: transparent; border: 1px solid var(--line); border-radius: 7px; color: var(--ink-faint); padding: 4px 7px; cursor: pointer; line-height: 0; flex: none; }
.lic__copy:hover { color: var(--accent-ink); border-color: var(--accent); }
.lic__copy.is-done { color: #1a7f37; border-color: #1a7f37; }
.lic__copy svg { width: 13px; height: 13px; }
.lic__badges { display: flex; flex-wrap: wrap; gap: 7px; }
.lic__body { padding: 20px 24px 24px; }

.badge { font-family: var(--ff-mono); font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; padding: 4px 9px; border-radius: 6px; border: 1px solid var(--line); background: var(--surface); color: var(--ink-soft); white-space: nowrap; }
.badge--accent { border-color: color-mix(in srgb, var(--accent) 50%, var(--line)); background: var(--accent-wash); color: var(--accent-ink); }
.badge--ok { border-color: color-mix(in srgb, #1a7f37 45%, var(--line)); background: color-mix(in srgb, #1a7f37 10%, var(--surface)); color: #1a7f37; }
.badge--warn { border-color: color-mix(in srgb, var(--brass) 55%, var(--line)); background: var(--brass-wash); color: var(--brass); }
.badge--err { border-color: color-mix(in srgb, #b32d2e 45%, var(--line)); background: color-mix(in srgb, #b32d2e 10%, var(--surface)); color: #b32d2e; }
:root[data-theme="dark"] .badge--ok { color: #6fcf97; }
:root[data-theme="dark"] .badge--err { color: #ff8f8f; }

/* Seat counters */
.seats { display: flex; flex-wrap: wrap; gap: 10px 28px; padding-bottom: 18px; margin-bottom: 4px; border-bottom: 1px dashed var(--line); }
.seat { font-size: .86rem; color: var(--ink-soft); }
.seat b { display: block; font-family: var(--ff-mono); font-size: 1.25rem; color: var(--ink); font-variant-numeric: tabular-nums; font-weight: 600; }
.seat--free b { color: var(--brass); }

/* Site list */
.sites { list-style: none; margin: 0; padding: 0; }
.site { display: grid; grid-template-columns: 1fr auto; gap: 10px 16px; align-items: center; padding: 15px 0; border-bottom: 1px solid var(--line-soft); }
.site:last-child { border-bottom: 0; }
.site__url { font-family: var(--ff-mono); font-size: .92rem; color: var(--ink); word-break: break-all; }
.site__meta { margin-top: 5px; display: flex; flex-wrap: wrap; gap: 6px 12px; font-size: .78rem; color: var(--ink-faint); }
.site__actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: end; }
/* Wide enough for the longest option ("Development (free)") to clear the
   dropdown arrow drawn in the padding. */
.site__actions .inp { width: auto; min-width: 12em; font-size: .82rem; padding: .45em 2.2em .45em .7em; }

.addsite { margin-top: 18px; padding-top: 18px; border-top: 1px dashed var(--line); display: grid; grid-template-columns: 2fr 1fr auto; gap: 10px; align-items: end; }
.addsite .btn { white-space: nowrap; }

.empty { text-align: center; padding: 48px 24px; background: var(--surface); border: 1px dashed var(--line); border-radius: 18px; }
.empty h2 { font-size: 1.3rem; }
.empty p { margin: 12px auto 22px; max-width: 46ch; color: var(--ink-soft); }

/* The note explaining free dev/staging seats */
/* The download card. Sits above the licence list because it answers the
   question someone arrives with; the licences below are what they come back
   for later. Stacks on narrow screens so the button never squeezes the text. */
.dl { display: flex; flex-wrap: wrap; gap: 16px 24px; align-items: center; justify-content: space-between; margin-bottom: 22px; background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: 16px; padding: 22px 26px; box-shadow: var(--shadow-sm); }
.dl__text { min-width: min(100%, 24ch); }
.dl__text h2 { font-size: 1.15rem; }
.dl__text p { margin-top: 7px; color: var(--ink-soft); font-size: .93rem; max-width: 60ch; }
.dl__text p b { color: var(--ink); font-weight: 500; }
.dl__action { display: flex; gap: 10px; flex-wrap: wrap; }
.dl--lapsed { border-left-color: var(--brass); }

.devnote { margin-top: 28px; background: var(--surface-2); border: 1px solid var(--line); border-left: 3px solid var(--brass); border-radius: 14px; padding: 22px 26px; }
.devnote h3 { font-size: 1.08rem; }
.devnote p { margin-top: 9px; color: var(--ink-soft); font-size: .93rem; max-width: 74ch; }
.devnote code { font-family: var(--ff-mono); font-size: .85em; background: var(--surface); padding: .12em .45em; border-radius: 5px; color: var(--accent-ink); border: 1px solid var(--line-soft); }

/* Admin console */
/* Real gaps rather than the 1px-hairline-grid trick: the tile count doesn't
   divide evenly into every viewport, and a part-filled last row would show the
   grid's own background as an empty grey block. */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: 10px; margin-bottom: 26px; }
.stat { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 16px 16px; }
.stat b { display: block; font-family: var(--ff-mono); font-size: 1.5rem; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.stat span { display: block; margin-top: 3px; font-size: .78rem; color: var(--ink-faint); }

.toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 20px; }
.toolbar .inp { flex: 1; min-width: 220px; }

.tablewrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
table.grid { width: 100%; border-collapse: collapse; font-size: .88rem; min-width: 640px; }
table.grid th, table.grid td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
table.grid th { font-family: var(--ff-mono); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); font-weight: 500; background: var(--surface-2); position: sticky; top: 0; }
table.grid tbody tr:last-child td { border-bottom: 0; }
table.grid tbody tr:hover { background: var(--surface-2); }
table.grid .mono { font-family: var(--ff-mono); font-size: .84rem; word-break: break-all; }
table.grid .grid__empty { color: var(--ink-faint); }
/* Used in tables and in the licence lists on an account, so it is not scoped
   to either. Keys and addresses stay on one line and widen their column
   instead: the table already scrolls sideways, and a licence key broken across
   four lines is unreadable in a way a scrollbar is not. */
.linkish { background: none; border: 0; padding: 0; font: inherit; color: var(--accent-ink); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; font-family: var(--ff-mono); font-size: .84rem; text-align: left; white-space: nowrap; }
.linkish:hover { color: var(--accent); }

.pager { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 14px; font-family: var(--ff-mono); font-size: .78rem; color: var(--ink-faint); }

.panel { margin-top: 26px; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 24px 26px; box-shadow: var(--shadow-sm); }
.panel h2 { font-size: 1.2rem; }
.panel h3 { font-size: .95rem; margin-top: 24px; }
.panel h4 { font-family: var(--ff-mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); font-weight: 500; }
.panel > .site__meta { margin-top: 8px; max-width: 82ch; }
/* Bleeds to the panel's edges, so the padding here has to undo the panel's. */
.panel__head { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; justify-content: space-between;
  margin: -24px -26px 18px; padding: 17px 26px; border-bottom: 1px solid var(--line-soft);
  background: var(--surface-2); border-radius: 17px 17px 0 0; }
.panel__head h2 { font-size: 1.1rem; }
.panel__actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 18px; }
.panel__grid { margin-top: 16px; display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; align-items: end; }
.panel__grid .btn { justify-self: start; }
.checkline { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; font-size: .88rem; color: var(--ink-soft); }
.checkline input { accent-color: var(--accent); }

.facts-inline { display: flex; flex-wrap: wrap; gap: 14px 30px; margin-top: 18px; padding-bottom: 18px; border-bottom: 1px dashed var(--line); }
.facts-inline .lbl { margin-bottom: 3px; }
.facts-inline b { font-family: var(--ff-mono); font-size: .95rem; font-weight: 500; color: var(--ink); }

.log { list-style: none; margin: 12px 0 0; padding: 0; max-height: 320px; overflow-y: auto; font-family: var(--ff-mono); font-size: .78rem; }
.log li { padding: 7px 0; border-bottom: 1px solid var(--line-soft); color: var(--ink-soft); display: grid; grid-template-columns: 10.5em 11em 1fr; gap: 10px; }
.log li:last-child { border-bottom: 0; }
.log .t { color: var(--ink-faint); }
.log .k { color: var(--accent-ink); }

/* Console tabs */
.tabs { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 26px; border-bottom: 1px solid var(--line); }
.tab { appearance: none; background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px;
  padding: 10px 15px; font: inherit; font-size: .93rem; color: var(--ink-faint); cursor: pointer; border-radius: 9px 9px 0 0; }
.tab:hover { color: var(--ink); background: var(--surface-2); }
.tab.is-on { color: var(--accent-ink); border-bottom-color: var(--accent); }
.tab:focus-visible { outline: 2.5px solid var(--accent); outline-offset: -2px; }
.pane__note { margin-bottom: 20px; max-width: 78ch; color: var(--ink-soft); font-size: .92rem; }

/* Reports */
.range { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; }
.range .inp { flex: none; width: auto; min-width: 0; }
.presets { display: flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }
#reportBody[aria-busy="true"] { opacity: .5; }
.report__caption { font-family: var(--ff-mono); font-size: .76rem; color: var(--ink-faint); }
.report h3 { margin-top: 28px; }
.report .tablewrap { margin-top: 12px; }
.report__split { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 20px 28px; margin-top: 24px; }
.stats--tight { grid-template-columns: repeat(auto-fit, minmax(108px, 1fr)); margin: 18px 0 0; }
.stats--tight .stat { padding: 13px 14px; }
.stats--tight .stat b { font-size: 1.22rem; }

.breakdown__list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 11px; }
.breakdown__head { display: flex; gap: 12px; justify-content: space-between; align-items: baseline; font-size: .84rem; color: var(--ink-soft); }
.breakdown__head b { font-family: var(--ff-mono); font-size: .76rem; font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.breakdown__track { margin-top: 5px; height: 6px; border-radius: 3px; background: var(--surface-2); border: 1px solid var(--line-soft); overflow: hidden; }
.breakdown__fill { height: 100%; background: var(--accent); }

/* Charts. Hand-built SVG — see assets/admin-reports.js. Everything is in
   viewBox units, so the type size here is relative to a 200-unit-tall chart,
   not to the page. */
/* The SVG scales to its box, which means its type shrinks with it. Below the
   min-width the chart scrolls sideways instead — the same bargain the tables
   make, and better than axis labels nobody can read. */
.chart { margin: 14px 0 0; overflow-x: auto; }
.chart__svg { display: block; width: 100%; min-width: 560px; height: auto; }
.chart__grid { stroke: var(--line); stroke-width: .6; }
.chart__axis { font-family: var(--ff-mono); font-size: 8px; fill: var(--ink-faint); }
.chart__bar { transition: opacity .15s ease; }
.chart__bar:hover { opacity: .72; }
.chart__bar--a { fill: var(--accent); }
.chart__bar--b { fill: var(--brass); }
.legend { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 12px; font-size: .8rem; color: var(--ink-soft); }
.legend__key { display: inline-flex; align-items: center; gap: 7px; }
.legend__swatch { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.legend__swatch--a { background: var(--accent); }
.legend__swatch--b { background: var(--brass); }

@media (max-width: 760px) {
  .site { grid-template-columns: 1fr; }
  .site__actions { justify-content: start; }
  .addsite { grid-template-columns: 1fr; }
  .log li { grid-template-columns: 1fr; gap: 2px; }
  .presets { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .chart__bar { transition: none; }
}

/* ---- Scroll reveal ------------------------------------------------------- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; transition: none; }
  .btn, .feature { transition: none; }
}

/* ---- Responsive ---------------------------------------------------------- */
/* The nav row had no give between the phone menu and a roomy desktop: full
   spacing all the way down to 760px, and past its own width it pushed the whole
   page sideways rather than adapting — 180px of it at 761px, on every page.
   Two changes. Tighten the spacing through the middle, so the links survive a
   small laptop rather than a full-width one. And hand over to the menu button at
   960px, which is where the widest nav (index and docs, seven links) still has
   room to spare: measured, that row needs 880px to make a single line at all and
   960px to do it without butting against the theme toggle. Lower the number and
   you get the packed row back; the labels can no longer wrap to disguise it. */
@media (max-width: 1100px) {
  .nav { gap: 14px; }
  .nav__links { gap: 0; margin-left: 0; }
  .nav__links a { padding: 8px 8px; font-size: .89rem; }
}
@media (max-width: 1000px) {
  .footer { grid-template-columns: 1fr 1fr; gap: 32px; }
  .footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 960px) {
  .nav__links { display: none; }
  .nav__toggle {
    display: inline-grid; place-items: center; width: 38px; height: 38px;
    border: 1px solid var(--line); border-radius: 9px; background: var(--surface); color: var(--ink); cursor: pointer;
  }
  .nav__toggle svg { width: 20px; height: 20px; }
  .nav[data-open="true"] .nav__links {
    display: flex; flex-direction: column; align-items: stretch; gap: 2px;
    position: absolute; left: var(--gutter); right: var(--gutter); top: 70px;
    background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
    padding: 8px; box-shadow: var(--shadow-lg); margin: 0;
  }
  .nav[data-open="true"] .nav__links a { padding: 12px 14px; }
}
@media (max-width: 900px) {
  .hero__grid { grid-template-columns: 1fr; gap: 40px; }
  .hero__copy { max-width: 40rem; }
  .transform { max-width: 520px; }
  .split { grid-template-columns: 1fr; gap: 32px; }
  .split--reverse .split__media { order: 0; }
  .showcase { grid-template-columns: 1fr; }
  .pipe { grid-template-columns: 1fr 1fr; }
  .pipe__step:not(:last-child)::after { display: none; }
  .features { grid-template-columns: 1fr 1fr; }
  .gallery { grid-template-columns: 1fr; }
  .facts__grid { grid-template-columns: 1fr 1fr; }
  .nos__grid { grid-template-columns: 1fr; }
}
/* The header CTA outlives the menu button. Once the links are behind it the row
   is brand, toggle and button with room to spare, and this is the page's primary
   action — it goes only when the row is genuinely narrow. */
@media (max-width: 620px) {
  .nav__cta-desktop { display: none; }
}
@media (max-width: 560px) {
  .features { grid-template-columns: 1fr; }
  .pipe { grid-template-columns: 1fr; }
  .facts__grid { grid-template-columns: 1fr 1fr; }
  .gallery { grid-template-columns: 1fr; }
  .footer { grid-template-columns: 1fr; }
  .faq__a { padding-left: 0; padding-right: 0; }
  .hero__cta .btn { flex: 1; justify-content: center; }
}

/* ==========================================================================
   Documentation (docs.html)
   The manual lives on the site, not in a repository README: the people who
   need it have bought the plugin, not cloned the source.
   ========================================================================== */
.docs-hero { padding-block: clamp(34px, 5vw, 60px) clamp(24px, 3vw, 34px); border-bottom: 1px solid var(--line); background: var(--surface-2); }
.docs-hero h1 { font-size: clamp(2rem, 1.4rem + 2.4vw, 2.9rem); margin-top: 16px; }
.docs-hero p { margin-top: 18px; max-width: 62ch; color: var(--ink-soft); font-size: 1.1rem; }
.docs-hero__meta { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 9px 16px; font-family: var(--ff-mono); font-size: .76rem; letter-spacing: .02em; color: var(--ink-faint); }
.docs-hero__meta span { display: inline-flex; align-items: center; gap: .55em; }
.docs-hero__meta i { width: 6px; height: 6px; border-radius: 50%; background: var(--brass); flex: none; }
.docs-hero__meta i.b { background: var(--accent); }

.docs { display: grid; grid-template-columns: 234px minmax(0, 1fr); gap: clamp(28px, 4vw, 56px); align-items: start; padding-block: clamp(30px, 4vw, 48px) clamp(56px, 8vw, 96px); }

/* Sidebar contents */
.docs__side { position: sticky; top: 82px; }
.docs__side h2 { font-family: var(--ff-mono); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); font-weight: 500; }
.docs__toc { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 1px; max-height: calc(100vh - 160px); overflow-y: auto; }
.docs__toc a { display: block; padding: 6px 13px; font-size: .9rem; color: var(--ink-soft); border-left: 2px solid var(--line); border-radius: 0 7px 7px 0; }
.docs__toc a:hover { color: var(--ink); background: var(--surface-2); text-decoration: none; }
.docs__toc a[aria-current="true"] { color: var(--accent-ink); border-left-color: var(--accent); background: var(--accent-wash); }
.docs__aside { margin-top: 22px; padding: 15px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); font-size: .85rem; color: var(--ink-soft); }
.docs__aside b { display: block; color: var(--ink); font-weight: 600; font-size: .9rem; }
.docs__aside p { margin-top: 7px; }

/* Prose */
.docs__body { min-width: 0; max-width: 78ch; }
.docs__body > section { scroll-margin-top: 88px; padding-bottom: clamp(28px, 4vw, 44px); }
.docs__body > section + section { border-top: 1px solid var(--line); padding-top: clamp(34px, 4vw, 52px); }
.docs__body h2 { font-size: clamp(1.5rem, 1.2rem + 1.1vw, 1.95rem); }
.docs__body h3 { font-size: 1.14rem; margin-top: 34px; }
.docs__body h4 { font-size: .99rem; margin-top: 26px; }
.docs__body p { margin-top: 14px; color: var(--ink-soft); }
.docs__body p b, .docs__body li b, .docs__body td b { color: var(--ink); font-weight: 600; }
.docs__body ul, .docs__body ol { margin: 14px 0 0; padding-left: 21px; color: var(--ink-soft); display: grid; gap: 9px; }
.docs__body li { min-width: 0; }
.docs__body li::marker { color: var(--ink-faint); }
/* Inline code is often a path or a signature with no spaces in it — let it
   break rather than push the page sideways on a phone. */
.docs__body code { font-family: var(--ff-mono); font-size: .85em; background: var(--surface-2); padding: .1em .4em; border-radius: 5px; color: var(--accent-ink); border: 1px solid var(--line-soft); overflow-wrap: anywhere; }
.docs__body .lede { font-size: 1.08rem; color: var(--ink-soft); }
.docs__body .code { margin-top: 20px; box-shadow: var(--shadow-md); }
.docs__body .code code { background: none; border: 0; padding: 0; color: inherit; font-size: inherit; }
.docs__body .tablewrap { margin-top: 20px; }
.docs__body table.grid td code { white-space: nowrap; }
/* The reference tables scroll sideways in their own box, not vertically, so a
   sticky header row would only slide under the translucent site header. */
.docs__body table.grid th { position: static; }
.docs__body table.grid { min-width: 560px; }
.docs__body .faq { margin-top: 20px; max-width: none; }
.docs__body hr { margin: 34px 0 0; border: 0; border-top: 1px dashed var(--line); }

/* A callout for the things that bite: nesting limits, escaping, priority 5 */
.note { margin-top: 20px; padding: 16px 20px; background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--brass); border-radius: 12px; }
.note h4, .note p:first-child { margin-top: 0; }
.note h4 { font-size: .95rem; }
.note p { margin-top: 8px; font-size: .93rem; }
.note--accent { border-left-color: var(--accent); }

/* Numbered "do this, then this" runs */
.docs__steps { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 14px; counter-reset: dstep; }
.docs__steps li { position: relative; padding-left: 44px; color: var(--ink-soft); }
.docs__steps li::before {
  counter-increment: dstep; content: counter(dstep);
  position: absolute; left: 0; top: -1px; width: 28px; height: 28px; border-radius: 8px;
  display: grid; place-items: center; background: var(--accent-wash); color: var(--accent-ink);
  font-family: var(--ff-mono); font-size: .8rem; font-weight: 500;
}
.docs__steps li b { color: var(--ink); font-weight: 600; }

@media (max-width: 900px) {
  .docs { grid-template-columns: 1fr; gap: 22px; }
  .docs__side { position: static; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); padding: 18px 20px; }
  .docs__toc { max-height: none; grid-auto-flow: column; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); grid-template-rows: repeat(7, auto); gap: 2px 10px; }
  .docs__aside { display: none; }
}
@media (max-width: 560px) {
  /* Fourteen entries stacked would push the first paragraph off a phone screen,
     so let them pair up into two columns instead. */
  .docs__toc { grid-auto-flow: row; grid-template-rows: none; grid-template-columns: repeat(auto-fill, minmax(138px, 1fr)); }
}