/* ============================================================
   BaserowPDF — design tokens
   Palette mixes Baserow blue/cyan with PDF red (from the logo).
   Light is the default; [data-theme="dark"] is set on <html> by
   the early-init script in _nav.php (localStorage, else system
   preference) so there's no flash of the wrong theme.
   ============================================================ */

:root {
  --bg: #fbfcfe;
  --bg-band: #f3f6fb;
  --card: #ffffff;
  --surface-2: #f6f8fc;
  --border: #e4e9f2;
  --border-strong: #d2dae7;
  --ink: #121a26;
  --ink-soft: #2f3a49;
  --muted: #5a6675;

  --accent: #2f6fed;
  --accent-dark: #1d5adb;
  --accent-2: #22b8e6;
  --pdf: #e5322f;
  --green: #5aa14a;

  --danger: #d93025;
  --danger-dark: #b3261e;
  --danger-bg: #fdecea;
  --success: #1e7e34;
  --success-bg: #e9f7ef;

  --radius: 16px;
  --radius-sm: 12px;
  --radius-pill: 999px;

  --shadow-sm:
    0 1px 2px rgba(16, 24, 40, 0.05), 0 1px 3px rgba(16, 24, 40, 0.04);
  --shadow-card:
    0 1px 2px rgba(16, 24, 40, 0.04), 0 18px 40px -20px rgba(23, 37, 66, 0.22);
  --shadow-float:
    0 2px 6px rgba(16, 24, 40, 0.05), 0 34px 60px -24px rgba(23, 37, 66, 0.3);
  --grid-line: rgba(23, 37, 66, 0.05);

  --pill-blue-bg: #d7e6ff;
  --pill-blue-ink: #1e46a0;
  --pill-green-bg: #d8f3df;
  --pill-green-ink: #1f6b3a;
  --pill-red-bg: #ffe0e0;
  --pill-red-ink: #b02622;
  --pill-amber-bg: #ffeccc;
  --pill-amber-ink: #8a5a10;
  --pill-purple-bg: #ecdcfa;
  --pill-purple-ink: #6b21a8;
  --pill-cyan-bg: #d3f3f7;
  --pill-cyan-ink: #0e6e7a;
  --pill-orange-bg: #ffe4cc;
  --pill-orange-ink: #8a4a0a;

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

[data-theme="dark"] {
  --bg: #0a0e16;
  --bg-band: #0e131d;
  --card: #131a26;
  --surface-2: #171f2d;
  --border: #262f3f;
  --border-strong: #33405a;
  --ink: #eef2f8;
  --ink-soft: #c5cede;
  --muted: #94a1b4;

  --accent: #4d8bff;
  --accent-dark: #7aa8ff;
  --accent-2: #3fd0f5;

  --danger-bg: #3d1f1f;
  --success-bg: #17361f;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-card:
    0 1px 2px rgba(0, 0, 0, 0.4), 0 24px 50px -22px rgba(0, 0, 0, 0.7);
  --shadow-float:
    0 2px 8px rgba(0, 0, 0, 0.5), 0 40px 70px -26px rgba(0, 0, 0, 0.8);
  --grid-line: rgba(255, 255, 255, 0.045);

  --pill-blue-bg: #1b2f52;
  --pill-blue-ink: #bcd4ff;
  --pill-green-bg: #17361f;
  --pill-green-ink: #a9e6ba;
  --pill-red-bg: #3d1f1f;
  --pill-red-ink: #ffb7b3;
  --pill-amber-bg: #3a2c12;
  --pill-amber-ink: #f4cd8f;
  --pill-purple-bg: #3a1f52;
  --pill-purple-ink: #d9b3f5;
  --pill-cyan-bg: #123a3f;
  --pill-cyan-ink: #7fe0ea;
  --pill-orange-bg: #3d2712;
  --pill-orange-ink: #f5b876;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

/* overflow-x lives on html ONLY -- html and body both having a non-visible
   overflow value turns body into its own independent scrolling box (the
   page then scrolls "inside" body instead of the viewport), which is why
   the sticky nav stopped following the scroll and window.scrollY stayed 0
   for the back-to-top button. html alone still fully prevents the
   .bleed sections' occasional 1px horizontal overflow. */
html {
  overflow-x: hidden;
  scroll-behavior: smooth;
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  transition:
    background-color 0.2s ease,
    color 0.2s ease;
  -webkit-font-smoothing: antialiased;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  body {
    transition: none;
  }
}

a {
  color: var(--accent);
  text-decoration: none;
}
a:hover {
  color: color-mix(in srgb, var(--accent), var(--ink) 30%);
  text-decoration: underline;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-body);
  letter-spacing: -0.025em;
  font-weight: 700;
}
code,
pre,
kbd,
samp {
  font-family: var(--font-mono);
}

.container {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 20px;
}

.container-narrow {
  max-width: 560px;
  margin: 0 auto;
  padding: 0 20px;
}

/* Full-bleed helper: breaks a block out of .container's 960px cap so it can
   run edge to edge, then re-centers its own wider inner width. Used by every
   top-level landing section. */
.bleed {
  margin: 0 calc(50% - 50vw);
}
.wrap {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 28px;
}

/* ---- Nav ---- */

.nav {
  position: sticky;
  top: 0;
  z-index: 40;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.nav-inner {
  max-width: 1280px;
  margin: 0 auto;
  /* Tighter vertical padding buys room for a slightly bigger logo (see
     .brand-logo) without changing the bar's overall height (still ~61px:
     10 + 40 + 10 + the 1px border). */
  padding: 10px 28px;
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
}

/* Signed-in app nav: logo hard left (flush with the workbench's left panel —
   same 1400px / 28px gutter as .tpl-wrap), the setup stepper dead-centre,
   the account menu hard right. */
.nav-inner-app {
  max-width: 1400px;
  /* tighter vertical padding buys the room to enlarge the logo + stepper
     while the bar keeps its original ~61px height */
  padding: 9px 28px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 20px;
  flex-wrap: nowrap;
}
.nav-inner-app > .brand {
  justify-self: start;
}
.nav-inner-app > .nav-steps {
  justify-self: center;
}
.nav-inner-app > .nav-user {
  justify-self: end;
}

.brand {
  display: inline-flex;
  align-items: center;
}

.brand-logo {
  display: block;
  height: 40px;
  width: auto;
}
.brand-logo-lg {
  height: 44px;
}
.nav-inner-app .brand-logo {
  height: 42px;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-left: 4px;
}
.nav-links a {
  color: var(--muted);
  font-size: 14.5px;
  font-weight: 500;
}
.nav-links a:hover {
  color: var(--ink);
  text-decoration: none;
}

.nav-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 12px;
}

.theme-toggle {
  width: 38px;
  height: 38px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong);
  background: var(--card);
  color: var(--ink-soft);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition:
    border-color 0.16s ease,
    color 0.16s ease;
}

.theme-toggle:hover {
  border-color: var(--muted);
  color: var(--ink);
}
.theme-toggle svg {
  width: 18px;
  height: 18px;
  display: block;
}
[data-theme="light"] .theme-toggle .icon-sun,
:root:not([data-theme="dark"]) .theme-toggle .icon-sun {
  display: none;
}
[data-theme="dark"] .theme-toggle .icon-moon {
  display: none;
}

/* App nav — setup pipeline stepper (Connect table → Build report → Generate) */
.nav-steps {
  display: flex;
  align-items: center;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
.nav-step {
  display: flex;
  align-items: center;
}
.nav-step::after {
  content: "";
  width: 34px;
  height: 2px;
  margin: 0 12px;
  border-radius: 2px;
  background: var(--border-strong);
  transition: background-color 0.16s ease;
}
.nav-step:last-child::after {
  display: none;
}
.nav-step.is-done::after {
  background: var(--accent);
}

.nav-step > a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 5px 2px;
  color: var(--muted);
  font-size: 15px;
  font-weight: 600;
}
.nav-step > a:hover {
  color: var(--ink);
  text-decoration: none;
}

.nav-step-dot {
  position: relative;
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-pill);
  border: 2px solid var(--border-strong);
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition:
    background-color 0.16s ease,
    border-color 0.16s ease,
    color 0.16s ease,
    box-shadow 0.16s ease;
}
.nav-step-num {
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
}
.nav-step-check {
  width: 16px;
  height: 16px;
  display: none;
}

.nav-step.is-done .nav-step-dot {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.nav-step.is-done .nav-step-num {
  display: none;
}
.nav-step.is-done .nav-step-check {
  display: block;
}

.nav-step.is-active > a {
  color: var(--ink);
}
.nav-step.is-active .nav-step-dot {
  border-color: var(--accent);
  color: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 16%, transparent);
}
.nav-step.is-active.is-done .nav-step-dot {
  color: #fff;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 24%, transparent);
}

/* App nav — account menu (user-avatar button + dropdown) */
.nav-user {
  position: relative;
  display: inline-flex;
}

.nav-user-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 6px 3px 3px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  background: var(--card);
  color: var(--muted);
  cursor: pointer;
  transition:
    border-color 0.16s ease,
    color 0.16s ease;
}
.nav-user-btn:hover {
  border-color: var(--muted);
  color: var(--ink);
}
.nav-user-btn[aria-expanded="true"] {
  border-color: var(--accent);
  color: var(--ink);
}

.nav-user-av {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  flex: none;
}
.nav-user-av-fb {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-2);
  color: var(--muted);
}
.nav-user-av-fb svg {
  width: 17px;
  height: 17px;
}
.nav-user-caret {
  width: 13px;
  height: 13px;
  flex: none;
}

.nav-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 210px;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--card);
  box-shadow: var(--shadow-float);
  z-index: 50;
}
.nav-menu-head {
  padding: 7px 10px 8px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--border);
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nav-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 10px;
  border: 0;
  border-radius: 9px;
  background: none;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-soft);
  text-align: left;
  cursor: pointer;
}
.nav-menu-item:hover {
  background: var(--surface-2);
  color: var(--ink);
  text-decoration: none;
}
.nav-menu-item svg {
  width: 16px;
  height: 16px;
  flex: none;
  display: block;
  color: var(--muted);
}
.nav-menu-theme .icon-sun,
.nav-menu-theme .icon-moon {
  width: 16px;
  height: 16px;
}
:root:not([data-theme="dark"]) .nav-menu-theme .icon-sun {
  display: none;
}
[data-theme="dark"] .nav-menu-theme .icon-moon {
  display: none;
}

/* ---- Cards & sections (shared by every app screen) ---- */

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px;
  margin: 24px 0;
}

.page-header {
  margin: 36px 0 8px;
}
.page-header h1 {
  margin: 0 0 6px;
  font-size: 26px;
  color: var(--ink);
}
.page-header p {
  color: var(--muted);
  margin: 0;
}

/* ---- Connect: centred header over a green "current table" panel and the
       connect form, split by a plain "OR" on a divider line ---- */
.connect-page {
  padding-bottom: 40px;
}
.connect-head {
  max-width: 640px;
  margin: 40px auto 4px;
  padding: 0 20px;
  text-align: center;
}
.connect-head h1 {
  margin: 0 0 8px;
  font-size: 26px;
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.connect-head h1 .bw-icon {
  height: 28px;
  width: 28px;
}
.connect-head p {
  margin: 0;
  color: var(--muted);
}

/* No connection yet: no aside, no divider — just the form, centred. */
.connect-layout {
  max-width: 560px;
  margin: 0 auto;
  padding: 22px 28px 0;
}

/* Connected: two equal-width, equal-height panels, tops aligned. */
.connect-layout.has-or {
  max-width: 1120px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 40px;
  align-items: stretch;
}
.connect-layout.has-or .connect-aside,
.connect-layout.has-or .connect-main {
  display: flex;
  min-width: 0;
}
.connect-layout.has-or .connect-current,
.connect-layout.has-or .connect-main .card {
  flex: 1;
}

/* Both panels are cards, clearly lifted off the page; only the fill differs. */
.connect-main .card,
.connect-current {
  margin: 0;
  padding: 28px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow-float);
}
.connect-main .card {
  background: var(--card);
}
.connect-current {
  display: flex;
  flex-direction: column;
  background: var(--success-bg);
  box-shadow:
    inset 4px 0 0 var(--green),
    var(--shadow-float);
}
/* Line the form's first field label up with the panel's top padding. */
.connect-main .card form > label:first-of-type {
  margin-top: 0;
}

/* Mini titles: same typography as the form's field labels. */
.connect-current-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  margin: 0 0 6px;
}
.connect-current-name {
  margin: 0 0 4px;
  font-size: 16px;
  line-height: 1.4;
  color: var(--ink);
}
.connect-current-id {
  color: var(--muted);
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
}
.connect-current-meta {
  margin: 0 0 12px;
  font-size: 12.5px;
  color: var(--muted);
}
.connect-current-note {
  margin: 0 0 20px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--muted);
}
.connect-current .btn {
  margin-top: auto;
} /* pin to the bottom, level with the form's submit */

/* "OR" sitting on a full-height divider line — no badge. */
.connect-or {
  position: relative;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
}
.connect-or::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--border-strong);
}
.connect-or span {
  position: relative;
  z-index: 1;
  background: var(--bg);
  padding: 10px 6px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--muted);
}

@media (max-width: 900px) {
  .connect-page {
    padding-bottom: 32px;
  }
  .connect-layout,
  .connect-layout.has-or {
    max-width: 560px;
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .connect-layout.has-or .connect-aside,
  .connect-layout.has-or .connect-main {
    display: block;
  }
  .connect-layout.has-or .connect-current,
  .connect-layout.has-or .connect-main .card {
    flex: none;
  }
  .connect-current .btn {
    margin-top: 8px;
  }
  .connect-or {
    align-self: auto;
  }
  .connect-or::before {
    left: 0;
    right: 0;
    top: 50%;
    bottom: auto;
    width: auto;
    height: 2px;
  }
}

/* ---- Forms ---- */

label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  margin: 16px 0 6px;
}

label:first-child {
  margin-top: 0;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="url"],
input[type="color"],
input[type="file"],
select,
textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-family: inherit;
  background: var(--card);
  color: var(--ink);
}

textarea {
  resize: vertical;
  min-height: 70px;
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent);
}

.hint {
  font-size: 12.5px;
  color: var(--muted);
  margin-top: 5px;
}

.checkbox-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 10px 0;
}
.checkbox-row input {
  width: auto;
}
.checkbox-row label {
  margin: 0;
  font-weight: 500;
  color: var(--ink);
}

.checkbox-list {
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 6px 12px;
  max-height: 220px;
  overflow-y: auto;
}

.color-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.color-row input[type="color"] {
  width: 44px;
  height: 38px;
  padding: 3px;
}
.color-row input[type="text"] {
  flex: 1;
}

/* ---- Buttons ---- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--accent);
  color: #fff;
  border: 1px solid transparent;
  padding: 11px 20px;
  border-radius: var(--radius-sm);
  font-size: 14.5px;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--font-body);
  white-space: nowrap;
  box-shadow:
    0 1px 2px rgba(16, 24, 40, 0.14),
    0 10px 22px -10px color-mix(in srgb, var(--accent) 70%, transparent);
  transition:
    background-color 0.15s ease,
    transform 0.15s ease,
    box-shadow 0.15s ease,
    border-color 0.15s ease;
}

.btn:hover {
  background: var(--accent-dark);
  color: #fff;
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow:
    0 2px 4px rgba(16, 24, 40, 0.16),
    0 16px 30px -10px color-mix(in srgb, var(--accent) 78%, transparent);
}
.btn:active {
  transform: translateY(0);
}
.btn-secondary {
  background: var(--card);
  color: var(--ink);
  border-color: var(--border-strong);
  box-shadow: none;
}
.btn-secondary:hover {
  background: var(--surface-2);
  color: var(--ink);
  box-shadow: var(--shadow-sm);
}
.btn-danger {
  background: var(--danger);
  box-shadow: none;
}
.btn-danger:hover {
  background: var(--danger-dark);
  box-shadow: 0 6px 16px rgba(217, 48, 37, 0.25);
}
.btn-success {
  background: var(--green);
  box-shadow:
    0 1px 2px rgba(16, 24, 40, 0.14),
    0 10px 22px -10px color-mix(in srgb, var(--green) 70%, transparent);
}
.btn-success:hover {
  background: color-mix(in srgb, var(--green), #000 13%);
  box-shadow:
    0 2px 4px rgba(16, 24, 40, 0.16),
    0 16px 30px -10px color-mix(in srgb, var(--green) 78%, transparent);
}
.btn-block {
  width: 100%;
}
.btn-sm {
  padding: 6px 12px;
  font-size: 13px;
}
.btn[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
}
.btn[disabled]:hover {
  transform: none;
  box-shadow: none;
}
.btn-hero {
  padding: 15px 26px;
  font-size: 16px;
}
.btn svg {
  width: 17px;
  height: 17px;
}
/* A touch darker than the default .btn-secondary so it reads clearly as a
   grey button next to the green primary CTA, rather than blending into the
   hero's own light background. */
.btn-secondary.btn-hero {
  background: color-mix(in srgb, var(--surface-2), var(--ink) 6%);
  border-color: var(--border-strong);
}
.btn-secondary.btn-hero:hover {
  background: color-mix(in srgb, var(--surface-2), var(--ink) 12%);
}

@media (prefers-reduced-motion: reduce) {
  .btn {
    transition: background-color 0.15s ease;
  }
  .btn:hover {
    transform: none;
  }
}

.actions {
  display: flex;
  gap: 10px;
  margin-top: 18px;
  flex-wrap: wrap;
}

/* ---- Flash / alerts ---- */

.flash {
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  margin: 16px 0;
}
.flash-error {
  background: var(--danger-bg);
  color: var(--danger);
}
.flash-success {
  background: var(--success-bg);
  color: var(--success);
}

/* ============================================================
   Landing page — the one-pager
   ============================================================ */

.eyebrow {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.eyebrow::before {
  content: "";
  width: 18px;
  height: 1px;
  background: var(--accent);
  display: block;
}

.sec-head {
  max-width: 680px;
  margin: 0 0 30px;
}
.sec-head.center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.sec-head.center .eyebrow {
  justify-content: center;
}
.sec-head.right {
  margin-left: auto;
  margin-right: 0;
  text-align: right;
}
.sec-head.right .eyebrow {
  flex-direction: row-reverse;
  justify-content: flex-end;
}
.sec-head h2 {
  font-size: clamp(1.875rem, 1.35rem + 2.2vw, 2.25rem);
  font-weight: 700;
  line-height: 1.15;
  margin: 14px 0 14px;
  color: var(--ink);
  text-wrap: balance;
}
.sec-head p {
  font-size: 18px;
  line-height: 1.6;
  color: var(--muted);
  text-wrap: pretty;
}

.landing-block {
  padding: 60px 0;
  position: relative;
  scroll-margin-top: 76px;
}
.landing-block-tight {
  padding-top: 0;
}
.landing-block.band {
  background: var(--bg-band);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

/* ---- Hero ---- */

/* The hero is meant to read in one glance with no scroll — deliberately NOT
   vertically centred in the viewport (that just pushes everything down by
   half the leftover space); it starts right under the nav with modest
   padding, and stays short enough to fit on its own: a smaller single-line
   title, a tight actions block, and a screen-wide but height-budgeted
   demo — see .hero-copy / .hero-actions / .stage below. */
.hero {
  position: relative;
  overflow: hidden;
  padding: 20px 0 30px;
}
.hero .wrap {
  max-width: 1480px;
}
.hero-in {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Title + description left, actions right, one row. */
.hero-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 32px;
  flex-wrap: wrap;
}
/* No max-width here on purpose: h1 is white-space: nowrap (one line, per
   spec), and leaving hero-copy's min size at its content's natural
   min-content width means flexbox wraps hero-actions onto its own row
   instead of clipping/overflowing the title when space is tight — see the
   960px breakpoint below for the narrower, single-column case. */
.hero-copy {
  flex: 1 1 440px;
}
.hero-copy h1 {
  font-size: clamp(1.5rem, 0.85rem + 2.2vw, 2.15rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0 0 10px;
  color: var(--ink);
  white-space: nowrap;
}
.hero-copy h1 .grad {
  background: linear-gradient(96deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
@media (forced-colors: active) {
  .hero-copy h1 .grad {
    background: none;
    color: LinkText;
    -webkit-text-fill-color: LinkText;
  }
}
.hero-copy .lead {
  font-size: clamp(1rem, 0.9rem + 0.4vw, 1.1rem);
  max-width: 480px;
  margin: 0;
  color: var(--ink-soft);
  line-height: 1.55;
}

.hero-actions {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}
.trust-line {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 5px;
  font-size: 14px;
  color: var(--muted);
  list-style: none;
  padding: 0;
  margin: 0;
}
.trust-line li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.trust-line svg {
  width: 14px;
  height: 14px;
  color: var(--green);
  flex: none;
}

/* ---- Hero morph stage: the whole table, then the whole PDF, on a loop ----
   Both views sit absolutely stacked in the same box — so the table's row-1
   cells and the PDF's target slots are both real, measurable layout at all
   times (getBoundingClientRect needs that for the FLIP fly-in — see
   landing.js) — and crossfade via .is-active. .morph-table carries
   .is-active in the markup itself, so the table is what's shown at rest,
   with no JS required. */
.morph-stage {
  position: relative;
  width: 100%;
  min-height: clamp(490px, 58vh, 640px);
}
.panel {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-float);
  overflow: hidden;
}
.morph-view {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.6s ease;
  pointer-events: none;
}
.morph-view.is-active {
  opacity: 1;
  z-index: 2;
  pointer-events: auto;
}

/* Both view headers share one light bar treatment so the table and the PDF
   read as the same kind of "screen" — icon and label sit close together,
   the way Baserow's own toolbar and a real document title bar both do. */
.panel-label,
.bw-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  font: 700 16px/1 var(--font-body);
  color: var(--ink-soft);
}
.panel-label img {
  width: 19px;
  height: 19px;
  display: block;
  flex: none;
}

/* Baserow's own real icon mark, with their name spelled out right next to
   it — a truthful "this is your Baserow table" reference (nominative use
   of their mark for a real, live integration), not a copy of anyone's
   entertainment IP. */
.bw-bar-view {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: inherit;
}
.bw-icon {
  height: 20px;
  width: 20px;
  display: block;
  flex: none;
}
.bw-bar-more {
  margin-left: auto;
  opacity: 0.6;
  display: flex;
}
.bw-bar-more svg {
  width: 16px;
  height: 16px;
}

.mock-table.wide {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  font-size: 13px;
}
.mock-table.wide th {
  font-family: var(--font-body);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 10.5px;
  color: var(--muted);
  text-align: left;
  padding: 11px 14px;
  border-bottom: 1px solid var(--border);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mock-table .ic {
  width: 12px;
  height: 12px;
  margin: 0 5px -2px 0;
  color: var(--muted);
  flex: none;
}
.mock-table.wide td {
  padding: 14px;
  color: var(--ink-soft);
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.mock-table tr:last-child td {
  border-bottom: 0;
}
/* Extra real rows below the animated one, for density — muted so the eye
   still lands on the row that's actually becoming the PDF. */
.mock-table tr.dim td {
  color: var(--muted);
}
.mock-table tr.dim .pill {
  opacity: 0.8;
}
/* A real grid view truncates a long cell rather than wrapping the row tall —
   used on the case-title column, which can run long. */
.mock-table td.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mock-table .thumb {
  display: block;
  width: 42px;
  height: 30px;
  border-radius: 3px;
  object-fit: cover;
  border: 1px solid var(--border);
}

.pill {
  display: inline-block;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
}
.pill.b {
  background: var(--pill-blue-bg);
  color: var(--pill-blue-ink);
}
.pill.g {
  background: var(--pill-green-bg);
  color: var(--pill-green-ink);
}
.pill.r {
  background: var(--pill-red-bg);
  color: var(--pill-red-ink);
}
.pill.a {
  background: var(--pill-amber-bg);
  color: var(--pill-amber-ink);
}
.pill.p {
  background: var(--pill-purple-bg);
  color: var(--pill-purple-ink);
}
.pill.c {
  background: var(--pill-cyan-bg);
  color: var(--pill-cyan-ink);
}
.pill.o {
  background: var(--pill-orange-bg);
  color: var(--pill-orange-ink);
}

/* A wide, landscape-page layout (report text left, photo right) rather than
   a tall portrait stack — matches the app's own landscape export mode. */
.pdf-doc {
  padding: 22px 30px;
  max-width: 1040px;
  margin: 0 auto;
}
.pdf-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.pdf-brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 14px;
  color: var(--accent);
}
/* A neutral placeholder graphic, not a real or invented logo — swap
   public/assets/report-logo-placeholder.svg for a real brand mark. */
.pdf-mark {
  width: 40px;
  height: 40px;
  display: block;
  flex: none;
}
.pdf-date {
  font-size: 10px;
  color: var(--muted);
  font-family: var(--font-body);
}
.pdf-rule {
  height: 3px;
  background: var(--accent);
  border-radius: 2px;
  margin: 10px 0 16px;
}
.pdf-body {
  display: flex;
  gap: 28px;
  align-items: stretch;
}
.pdf-main {
  flex: 1 1 0;
  min-width: 0;
}
.pdf-title {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 17px;
  line-height: 1.3;
  color: var(--ink);
  margin-bottom: 12px;
}
.pdf-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 11px 18px;
  margin-top: 12px;
}
.pdf-title + .pdf-grid {
  margin-top: 0;
}
.pdf-field .k {
  font-family: var(--font-body);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin-bottom: 4px;
}
.pdf-field .v {
  font-size: 12px;
  color: var(--ink-soft);
}
.pdf-stars {
  color: #f2b100;
  letter-spacing: 1px;
  font-size: 13px;
}
.pdf-yes {
  color: var(--success);
  font-weight: 700;
}
.pdf-sub {
  margin-top: 14px;
}
.pdf-sub .k {
  font-family: var(--font-body);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin-bottom: 5px;
}
.pdf-sub table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--border);
  font-size: 10px;
}
.pdf-sub th {
  background: var(--surface-2);
  text-align: left;
  padding: 4px 7px;
  font-weight: 700;
  color: var(--ink-soft);
  font-family: var(--font-body);
}
.pdf-sub td {
  padding: 4px 7px;
  border-top: 1px solid var(--border);
  color: var(--ink-soft);
}
.pdf-photo {
  flex: 0 0 clamp(180px, 26vw, 300px);
}
.pdf-photo img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 160px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--border);
}
.pdf-foot {
  margin-top: 14px;
  padding-top: 9px;
  border-top: 1px solid var(--border);
  font-size: 10.5px;
  color: var(--muted);
  font-family: var(--font-body);
}

/* The five fields that physically fly in from the table (see landing.js) —
   hidden until the ghost lands, then they simply appear in place. */
.dst-slot {
  opacity: 0;
  transition: opacity 0.2s ease;
}
.dst-slot.revealed {
  opacity: 1;
}
/* Everything else in the report settles in once the PDF view is active. */
.wave {
  opacity: 0;
  transform: translateY(6px);
  transition:
    opacity 0.4s ease,
    transform 0.4s ease;
}
.wave.in {
  opacity: 1;
  transform: translateY(0);
}

/* Fixed-position FLIP clones — sized/positioned from real measured rects in
   JS, so this holds up regardless of viewport width or content length. */
.ghost {
  position: fixed;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  z-index: 50;
  transition: opacity 0.18s ease;
  overflow: hidden;
}
.ghost.show {
  visibility: visible;
  opacity: 1;
}
.ghost-case {
  font-family: var(--font-body);
  font-weight: 700;
  color: var(--ink);
  display: flex;
  align-items: center;
}
.ghost-plain {
  font-family: var(--font-body);
  font-size: 12.5px;
  color: var(--ink-soft);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.ghost-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 4px;
  display: block;
}

/* ---- Scroll-reveal (every section below the fold) ----
   Same progressive-enhancement contract as the hero stage: only
   .reveal-ready ever hides content pre-reveal, and only once JS confirms
   motion is wanted. Without JS, or with reduced motion, everything shows. */
.reveal-ready .reveal {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 0.55s ease,
    transform 0.55s ease;
}
.reveal-ready .reveal.in-view {
  opacity: 1;
  transform: none;
}
.reveal-ready .reveal-group .reveal-item {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 0.55s ease,
    transform 0.55s ease;
}
.reveal-ready .reveal-group.in-view .reveal-item {
  opacity: 1;
  transform: none;
}
.reveal-ready .reveal-group.in-view .reveal-item:nth-child(1) {
  transition-delay: 0s;
}
.reveal-ready .reveal-group.in-view .reveal-item:nth-child(2) {
  transition-delay: 0.07s;
}
.reveal-ready .reveal-group.in-view .reveal-item:nth-child(3) {
  transition-delay: 0.14s;
}
.reveal-ready .reveal-group.in-view .reveal-item:nth-child(4) {
  transition-delay: 0.21s;
}
.reveal-ready .reveal-group.in-view .reveal-item:nth-child(5) {
  transition-delay: 0.28s;
}
.reveal-ready .reveal-group.in-view .reveal-item:nth-child(6) {
  transition-delay: 0.35s;
}

@media (prefers-reduced-motion: reduce) {
  /* JS never starts the morph loop for these visitors (see landing.js) — the
     table view's default .is-active state is the whole story, so nothing
     here needs to fight a running animation; this just guarantees any
     mid-reveal field/ghost can't get stuck half-hidden. */
  .dst-slot,
  .wave {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .ghost {
    display: none;
  }
  .reveal-ready .reveal,
  .reveal-ready .reveal-group .reveal-item {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ---- Trust strip ---- */

.strip-note {
  text-align: center;
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 16px;
}
.strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.strip .chip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 15px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--card);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-soft);
}
.strip .chip svg {
  width: 15px;
  height: 15px;
  color: var(--accent);
  flex: none;
}

/* ---- How it works ---- */

.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.step {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px 22px;
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    border-color 0.18s ease;
}
.step:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-card);
}
.step-badge {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}
.step-badge svg {
  width: 20px;
  height: 20px;
}
.step-eyebrow {
  display: block;
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
/* Connect = accent blue, Customize = purple, Generate = green — a small
   colour progression that mirrors the order of the three steps. */
.step-connect .step-badge { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); }
.step-connect .step-eyebrow { color: var(--accent); }
.step-connect:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--border-strong)); }
.step-customize .step-badge { background: color-mix(in srgb, #8c40bb 14%, transparent); color: #8c40bb; }
.step-customize .step-eyebrow { color: #8c40bb; }
.step-customize:hover { border-color: color-mix(in srgb, #8c40bb 40%, var(--border-strong)); }
.step-generate .step-badge { background: color-mix(in srgb, var(--success) 14%, transparent); color: var(--success); }
.step-generate .step-eyebrow { color: var(--success); }
.step-generate:hover { border-color: color-mix(in srgb, var(--success) 40%, var(--border-strong)); }

@keyframes step-badge-pop {
  0% { transform: scale(0.4) rotate(-8deg); opacity: 0; }
  60% { transform: scale(1.15) rotate(3deg); opacity: 1; }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}
.reveal-ready .reveal-group.in-view .step:nth-child(1) .step-badge { animation: step-badge-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both; animation-delay: 0.18s; }
.reveal-ready .reveal-group.in-view .step:nth-child(2) .step-badge { animation: step-badge-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both; animation-delay: 0.25s; }
.reveal-ready .reveal-group.in-view .step:nth-child(3) .step-badge { animation: step-badge-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both; animation-delay: 0.32s; }
@media (prefers-reduced-motion: reduce) {
  .step-badge { animation: none !important; }
}
.step h3 {
  font-size: 17px;
  margin: 0 0 8px;
  color: var(--ink);
}
.step p {
  font-size: 13.5px;
  color: var(--muted);
  margin: 0;
}
.step code {
  font-family: var(--font-body);
  font-size: 11.5px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  padding: 1px 5px;
  border-radius: 5px;
  color: var(--ink-soft);
}

/* ---- Field mapping bento ---- */

.bento {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 24px;
}
.b-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 26px;
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    border-color 0.18s ease;
}
.b-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-card);
  border-color: var(--border-strong);
}
.b-card .ico {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  color: var(--accent);
  margin-bottom: 16px;
}
.b-card .ico svg {
  width: 20px;
  height: 20px;
}
.b-card h3 {
  font-size: 18px;
  margin: 0 0 9px;
  color: var(--ink);
}
.b-card p {
  font-size: 14px;
  color: var(--muted);
  margin: 0;
}
.b-card.col-2 {
  grid-column: span 2;
}
.b-card.col-3 {
  grid-column: span 3;
}
.b-card.col-4 {
  grid-column: span 4;
}
.b-card.col-6 {
  grid-column: span 6;
}

.demo-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 14px;
}
.flat-vs {
  margin-top: 12px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  font-size: 12px;
}
.flat-vs .col {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 13px;
  background: var(--surface-2);
}
.flat-vs .tag {
  font-family: var(--font-body);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}
.flat-vs .plain {
  color: var(--muted);
  font-family: var(--font-body);
  font-size: 11px;
  line-height: 1.7;
}

.mini-sub {
  margin-top: 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  font-size: 11.5px;
}
.mini-sub .hd {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  background: var(--surface-2);
  font-weight: 700;
  color: var(--ink-soft);
}
.mini-sub .hd span,
.mini-sub .rw span {
  padding: 6px 10px;
}
.mini-sub .rw {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  border-top: 1px solid var(--border);
  color: var(--ink-soft);
}

.type-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px 22px;
  margin-top: 14px;
}
.type-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--ink-soft);
}
.type-row b {
  font-weight: 600;
}
.type-row .out {
  margin-left: auto;
  font-family: var(--font-body);
  font-size: 11.5px;
  color: var(--muted);
}
.type-row .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-2);
  flex: none;
}

/* ---- Screenshots ---- */

/* ---- "See it before you export" tour: full-width, 3-slide carousel ---- */

.tour-section { padding-bottom: 8px; }
.tour {
  width: 100%;
  box-sizing: border-box;
  padding: 0 20px;
}
.tour-tabs {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 24px;
}
.tour-tab {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 8px 16px;
  cursor: pointer;
  transition:
    color 0.15s ease,
    border-color 0.15s ease,
    background-color 0.15s ease;
}
.tour-tab:hover {
  color: var(--ink);
  border-color: var(--border-strong);
}
.tour-tab.is-active {
  color: #fff;
  background: var(--accent);
  border-color: var(--accent);
}

.tour-viewport {
  position: relative;
  max-width: 1800px;
  margin: 0 auto;
}
.tour-track {
  display: flex;
  transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}
.tour-slide {
  flex: 0 0 100%;
  min-width: 0;
  box-sizing: border-box;
  padding: 0 12px;
}
.tour-slide .browser {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  /* height is also set inline by JS (matched to the tallest of the 3
     slides) so Connect/Template/Generate all read as one screen size;
     this is just the pre-JS/no-JS fallback so nothing looks broken. */
  min-height: 460px;
}
.tour-slide .browser .body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}
@media (prefers-reduced-motion: reduce) {
  .tour-track {
    transition: none;
  }
}

.tour-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  background: var(--card);
  color: var(--ink-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: var(--shadow-card);
  transition:
    color 0.15s ease,
    border-color 0.15s ease,
    opacity 0.15s ease;
}
.tour-arrow:hover {
  color: var(--accent);
  border-color: var(--accent);
}
.tour-arrow:disabled {
  opacity: 0.35;
  cursor: default;
}
.tour-arrow-prev {
  left: 4px;
}
.tour-arrow-next {
  right: 4px;
}
.tour-arrow svg {
  width: 20px;
  height: 20px;
}

.tour-form-card {
  max-width: 420px;
  width: 100%;
  margin: auto auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 10px 0;
}
.tour-form-head {
  text-align: center;
  margin-bottom: 2px;
}
.tour-form-title {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 15px;
  color: var(--ink);
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.tour-form-title .bw-icon {
  height: 17px;
  width: 17px;
}
.tour-form-sub {
  font-size: 12px;
  color: var(--muted);
}
.tour-form-adv {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
}
.tour-form-adv summary {
  cursor: pointer;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--muted);
  display: flex;
  align-items: center;
  justify-content: space-between;
  list-style: none;
}
.tour-form-adv summary::-webkit-details-marker {
  display: none;
}
.tour-form-adv summary .chev {
  width: 14px;
  height: 14px;
  flex: none;
  transition: transform 0.18s ease;
}
.tour-form-adv[open] summary .chev {
  transform: rotate(180deg);
}
.tour-form-adv .fld {
  margin-top: 12px;
}
.tour-form-submit {
  text-align: center;
  margin-top: 4px;
}

@media (max-width: 860px) {
  .tour-arrow {
    display: none;
  }
  .tour-tab {
    font-size: 11.5px;
    padding: 6px 11px;
  }
}

.browser {
  background: var(--card);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.browser .bar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 10px 13px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
}
.browser .bar i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  display: block;
}
/* macOS traffic-light dots — real close/minimize/maximize colors. */
.browser .bar i:nth-child(1) { background: #ff5f57; }
.browser .bar i:nth-child(2) { background: #febc2e; }
.browser .bar i:nth-child(3) { background: #28c840; }
.browser .bar .addr {
  margin-left: 10px;
  flex: 1;
  font-family: var(--font-body);
  font-size: 10.5px;
  color: var(--muted);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 4px 9px;
}
.browser .body {
  padding: 18px;
}

.tpl-shot {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.tpl-shot .form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.fld .lab {
  font-size: 10px;
  font-family: var(--font-body);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin-bottom: 5px;
}
.fld .inp {
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  padding: 7px 9px;
  font-size: 11.5px;
  color: var(--ink-soft);
  background: var(--bg);
}
.checks {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.chk {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  color: var(--ink-soft);
}
.chk .box {
  width: 14px;
  height: 14px;
  border-radius: 4px;
  border: 1px solid var(--border-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.chk.on .box {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.chk .box svg {
  width: 10px;
  height: 10px;
}
.swatches {
  display: flex;
  gap: 6px;
}
.swatch {
  width: 20px;
  height: 20px;
  border-radius: 6px;
  border: 1px solid rgba(0, 0, 0, 0.12);
}
.swatch.sel {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
.tpl-shot .preview {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px;
}

.genrow {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 6px;
  border-bottom: 1px solid var(--border);
  font-size: 12px;
  color: var(--ink-soft);
}
.genrow .box {
  width: 14px;
  height: 14px;
  border-radius: 4px;
  border: 1px solid var(--border-strong);
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
.genrow.on .box {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.genrow .box svg {
  width: 10px;
  height: 10px;
}
.genrow .nm {
  flex: 1;
}
.genrow .mini-btn {
  font-family: var(--font-body);
  font-size: 10px;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  padding: 3px 8px;
  color: var(--muted);
}
.shot-progress {
  margin-top: 14px;
}
.shot-progress .track {
  height: 8px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  overflow: hidden;
}
.shot-progress .fill {
  height: 100%;
  width: 28%;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
}
.shot-progress .cap {
  display: flex;
  justify-content: space-between;
  margin-top: 7px;
  font-family: var(--font-body);
  font-size: 10.5px;
  color: var(--muted);
}

/* ---- /template + /generate mockups: match the real app's own chrome ---- */

.tpl-shot-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
}
.tpl-shot-conn {
  font-size: 10px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tpl-shot-conn b {
  color: var(--ink);
  font-weight: 600;
}
.tpl-shot-id {
  opacity: 0.75;
}
.tpl-shot-save {
  flex: none;
  font-size: 10.5px;
  padding: 5px 10px;
}
.tpl-shot-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-bottom: 8px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--border);
  font-size: 10px;
}
.tpl-shot-prow {
  color: var(--ink-soft);
}
.tpl-shot-prow b {
  color: var(--ink);
  font-weight: 600;
}
.tpl-shot-mode {
  flex: none;
  color: var(--muted);
  background: var(--card);
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  padding: 3px 8px;
  font-weight: 600;
}

.gen-shot-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.gen-shot-search {
  flex: 1;
}
.gen-shot-pp {
  flex: none;
  font-size: 11px;
  color: var(--muted);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 10px;
  white-space: nowrap;
}
.gen-shot-col {
  flex: 0 0 92px;
  text-align: right;
  font-size: 11px;
  color: var(--muted);
}
.gen-shot-pdf-col {
  flex: 0 0 30px;
  text-align: center;
}
.genrow.gen-shot-head {
  font-weight: 700;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  padding-bottom: 7px;
  border-bottom: 2px solid var(--border-strong);
}
.gen-shot-sorted {
  color: var(--ink);
}
.gen-shot-arrow {
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: 4px;
  vertical-align: middle;
  border-left: 3px solid transparent;
  border-right: 3px solid transparent;
  border-bottom: 4px solid currentColor;
}

/* ---- Security / token handling ---- */

.sec-split {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 36px;
  align-items: center;
}
.sec-split.reverse > *:first-child {
  order: 2;
}
.sec-split.reverse > *:last-child {
  order: 1;
}
.sec-shield {
  width: 46px;
  height: 46px;
  border-radius: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--green) 12%, transparent);
  color: var(--green);
  margin-bottom: 16px;
}
.sec-shield svg {
  width: 24px;
  height: 24px;
}
.sec-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.sec-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.sec-ico {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--green) 14%, transparent);
}
.sec-item svg {
  width: 16px;
  height: 16px;
  color: var(--green);
  flex: none;
}
.sec-item p {
  font-size: 14px;
  color: var(--ink-soft);
  margin: 0;
}
.sec-item p b {
  color: var(--ink);
  font-weight: 600;
}

/* ---- FAQ ---- */

.faq {
  max-width: 760px;
  margin: 0 auto;
  border-top: 1px solid var(--border);
}
.faq details {
  border-bottom: 1px solid var(--border);
}
.faq summary {
  list-style: none;
  cursor: pointer;
  padding: 16px 4px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 18px;
  letter-spacing: -0.01em;
  color: var(--ink);
  transition: color 0.15s ease;
}
.faq summary::-webkit-details-marker {
  display: none;
}
.faq summary:hover {
  color: var(--accent);
}
.faq summary .chev {
  flex: none;
  width: 20px;
  height: 20px;
  color: var(--muted);
  transition: transform 0.2s ease;
}
.faq details[open] summary .chev {
  transform: rotate(180deg);
}
.faq details p {
  padding: 0 4px 16px;
  font-size: 14.5px;
  color: var(--muted);
  max-width: 660px;
  margin: 0;
}

/* ---- Closing CTA ---- */

.closing-cta {
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  padding: 52px 40px;
  text-align: center;
  border: 1px solid var(--border);
  background: var(--card);
  box-shadow: var(--shadow-card);
}
.closing-cta-newsletter {
  padding: 40px;
}
.closing-cta-newsletter h2 {
  font-size: 24px;
}
.closing-cta h2 {
  position: relative;
  font-size: 34px;
  margin: 0 0 12px;
  color: var(--ink);
}
.closing-cta p {
  position: relative;
  font-size: 16px;
  margin: 0 0 22px;
  color: var(--muted);
}
.closing-cta .btn {
  position: relative;
}

.cta-subscribe-note {
  font-size: 14px;
  margin: 0 0 14px;
  color: var(--muted);
}
.cta-subscribe-form {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}
.cta-subscribe-form input[type="email"] {
  width: auto;
  flex: 1;
  min-width: 220px;
  max-width: 320px;
}
.cta-subscribe-form .btn {
  flex: none;
}
.cta-subscribe-status {
  min-height: 1.2em;
  margin: 12px 0 0;
  font-size: 13px;
}
.cta-subscribe-status.ok {
  color: var(--success);
}
.cta-subscribe-status.err {
  color: var(--danger);
}

/* ---- Footer ---- */

footer.site-footer {
  text-align: center;
  color: var(--muted);
  font-size: 13px;
  padding: 40px 0 60px;
}
footer.site-footer a,
.foot-base a {
  color: var(--accent);
  font-weight: 600;
}
footer.site-footer a:hover,
.foot-base a:hover {
  text-decoration: underline;
}

/* ---- Back to top ---- */

.back-to-top {
  position: fixed;
  /* Right offset is a fallback only -- JS measures the dashneb "Report a
     bug" pill once it mounts and sets an exact inline `right` so this sits
     snugly next to it, same bottom baseline. */
  right: 172px;
  bottom: 20px;
  width: 42px;
  height: 42px;
  border: none;
  border-radius: 50%;
  background: var(--green);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow:
    0 1px 2px rgba(16, 24, 40, 0.14),
    0 10px 22px -10px color-mix(in srgb, var(--green) 70%, transparent);
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition:
    opacity 0.18s ease,
    transform 0.18s ease,
    background-color 0.15s ease;
  z-index: 999999;
}
.back-to-top.is-visible {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.back-to-top:hover {
  background: color-mix(in srgb, var(--green), #000 13%);
}
.back-to-top svg {
  width: 18px;
  height: 18px;
}
@media (max-width: 560px) {
  .back-to-top {
    bottom: 14px;
    width: 38px;
    height: 38px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .back-to-top {
    transition: opacity 0.18s ease;
  }
}

.landing-footer {
  border-top: 1px solid var(--border);
  padding: 44px 0 0;
  background: var(--bg-band);
}
.landing-footer-in {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  justify-content: space-between;
  padding-bottom: 40px;
}
.landing-footer .brand {
  margin-bottom: 12px;
}
.landing-footer .blurb {
  font-size: 13px;
  max-width: 300px;
  color: var(--muted);
  margin: 0;
}
.foot-cols {
  display: flex;
  gap: 56px;
  flex-wrap: wrap;
}
.foot-col h3 {
  font-family: var(--font-body);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 12px;
  font-weight: 500;
}
.foot-col a {
  display: block;
  color: var(--ink-soft);
  font-size: 13.5px;
  margin-bottom: 9px;
}
.foot-col a:hover {
  color: var(--accent);
  text-decoration: none;
}
.foot-base {
  max-width: 1280px;
  margin: 0 auto;
  padding: 18px 28px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 12px;
  color: var(--muted);
  font-family: var(--font-body);
}

/* ---- Row picker / batch generate table ---- */

/* ---- Generate: control bar ---- */
.gen-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 20px 0 14px;
}
.gen-search {
  position: relative;
  flex: 1 1 240px;
  min-width: 180px;
}
.gen-search svg {
  position: absolute;
  left: 11px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: var(--muted);
  pointer-events: none;
}
.gen-search input {
  width: 100%;
  padding: 9px 12px 9px 34px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--card);
  color: var(--ink);
  font: inherit;
  font-size: 14px;
}
.gen-search input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent);
}
.gen-perpage {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 13px;
  color: var(--muted);
  white-space: nowrap;
}
.gen-perpage select {
  padding: 8px 26px 8px 10px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--card);
  color: var(--ink);
  font: inherit;
  font-size: 13px;
}
.gen-count {
  margin-left: auto;
  font-size: 12.5px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.gen-hint {
  margin: 12px 2px 0;
  font-size: 12.5px;
  color: var(--muted);
}

/* ---- Generate: row table ---- */
.gen-card {
  padding: 0;
  overflow: hidden;
}
.row-table-scroll {
  overflow-x: auto;
}
.row-table.app-table {
  font-size: 14px;
  width: 100%;
  border-collapse: collapse;
}
.row-table.app-table th,
.row-table.app-table td {
  text-align: left;
  padding: 11px 14px;
}
.row-table.app-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--surface-2);
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 2px solid var(--border-strong);
}
.row-table.app-table tbody tr {
  border-bottom: 1px solid var(--border);
  transition: background-color 0.1s ease;
}
.row-table.app-table tbody tr:last-child {
  border-bottom: 0;
}
.row-table.app-table tbody tr.is-alt {
  background: color-mix(in srgb, var(--muted) 4%, var(--card));
}
.row-table.app-table tbody tr:hover {
  background: color-mix(in srgb, var(--accent) 7%, var(--card));
}
.row-table.app-table tbody tr.is-selected {
  background: color-mix(in srgb, var(--accent) 13%, var(--card));
  box-shadow: inset 3px 0 0 var(--accent);
}

.gen-check-col {
  width: 40px;
  text-align: center !important;
}
.gen-check-col input {
  width: auto;
  margin: 0;
  vertical-align: middle;
}
.row-table .gen-id {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.gen-title-cell {
  font-weight: 500;
  color: var(--ink);
}
.gen-stamp-col {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  color: var(--ink-soft);
  font-size: 13px;
}
.gen-dash {
  color: var(--muted);
}

/* Per-row "open the PDF" action — an icon, not a pill. */
.gen-pdf-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: var(--radius-sm);
  color: var(--muted);
  transition:
    background-color 0.12s ease,
    color 0.12s ease;
}
.gen-pdf-link:hover {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent);
}
.gen-pdf-link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
.gen-pdf-link svg {
  width: 17px;
  height: 17px;
}
.gen-pdf-link img {
  width: 18px;
  height: 18px;
  display: block;
}

th.gen-sort {
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
th.gen-sort:hover {
  color: var(--ink);
}
th.gen-sort.is-sorted {
  color: var(--accent);
}
.gen-arrow {
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: 6px;
  vertical-align: middle;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  opacity: 0;
}
th.gen-sort.is-sorted .gen-arrow {
  opacity: 1;
  border-bottom: 5px solid currentColor;
}
th.gen-sort.is-sorted.is-desc .gen-arrow {
  border-bottom: 0;
  border-top: 5px solid currentColor;
}

.row-status {
  font-size: 12.5px;
  font-weight: 500;
}
.row-status.is-idle {
  color: var(--muted);
  font-weight: 400;
}
.row-status.ok {
  color: var(--success);
}
.row-status.error {
  color: var(--danger);
}

.gen-empty {
  padding: 32px 16px;
  text-align: center;
  color: var(--muted);
  font-size: 13.5px;
}

.gen-pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding: 12px 14px;
  border-top: 1px solid var(--border);
  background: var(--surface-2);
}
.gen-pager:empty {
  display: none;
}
.gen-pager-info {
  font-size: 12.5px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.gen-pager-nav {
  display: flex;
  align-items: center;
  gap: 4px;
}
.gen-page {
  min-width: 30px;
  padding: 5px 8px;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  background: var(--card);
  color: var(--ink-soft);
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
}
.gen-page:hover:not(:disabled):not(.is-current) {
  border-color: var(--muted);
  color: var(--ink);
}
.gen-page.is-current {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  cursor: default;
}
.gen-page:disabled {
  opacity: 0.4;
  cursor: default;
}
.gen-page-gap {
  padding: 0 2px;
  color: var(--muted);
}

.progress-wrap {
  height: 8px;
  background: var(--border);
  border-radius: 4px;
  overflow: hidden;
  margin: 14px 0;
  display: none;
}
.progress-bar {
  height: 100%;
  width: 100%;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.2s;
}

.toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin: 18px 0;
}

/* ---- Template preview split ---- */

.template-grid {
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 24px;
  align-items: start;
}
.preview-pane iframe {
  width: 100%;
  height: 80vh;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card);
}
.logo-current {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.logo-current img {
  max-height: 32px;
}

/* ---- Admin stats ---- */

table.stats {
  border-collapse: collapse;
  width: 100%;
}
table.stats td,
table.stats th {
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  font-size: 13.5px;
  text-align: left;
}

.stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin: 20px 0;
}
.stat-tile {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
}
.stat-tile .n {
  font-size: 26px;
  font-weight: 700;
  font-family: var(--font-body);
  color: var(--ink);
}
.stat-tile .l {
  font-size: 12.5px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-top: 4px;
}

/* ---- Account dashboard ---- */

.acct-grid {
  --acct-blue: #608bc7; /* the "build report" workbench blue */
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 18px;
  margin: 18px 0 48px;
}
.acct-grid .card {
  margin: 0;
  padding: 20px;
  border-top: 3px solid var(--acct-blue);
  background: color-mix(in srgb, var(--acct-blue) 4%, var(--card));
}
.acct-grid .acct-stats {
  grid-column: 1 / -1;
}
.acct-grid .acct-security {
  grid-column: 1 / -1;
}

.acct-grid h3 {
  margin: 0 0 12px;
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--acct-blue);
}
.acct-dim {
  color: var(--muted);
  font-weight: 400;
}

/* the live metric card leans on the brighter brand accent instead */
.acct-usage {
  border-top-color: var(--accent);
}
.acct-usage h3 {
  color: var(--accent);
}

/* identity */
.acct-id-main {
  display: flex;
  align-items: center;
  gap: 14px;
}
.acct-avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
  display: block;
}
.acct-avatar-fb {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-2);
  color: var(--muted);
}
.acct-avatar-fb svg {
  width: 26px;
  height: 26px;
}
.acct-email {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  word-break: break-all;
}
.acct-badge {
  display: inline-block;
  margin-top: 6px;
  padding: 2px 9px;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--acct-blue) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--acct-blue) 32%, transparent);
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-soft);
}
.acct-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
  margin: 16px 0 0;
}
.acct-meta > div {
  min-width: 0;
}
.acct-meta dt {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}
.acct-meta dd {
  margin: 2px 0 0;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
}

/* usage */
.acct-usage-n {
  margin: 0 0 8px;
  font-size: 13px;
  color: var(--muted);
}
.acct-usage-n strong {
  font-size: 22px;
  font-weight: 700;
  color: var(--ink);
}
.acct-meter {
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  overflow: hidden;
}
.acct-meter span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--accent);
}
.acct-meter.is-high span {
  background: var(--danger);
}
.acct-usage-hint {
  margin: 8px 0 0;
  font-size: 12px;
  color: var(--muted);
}
.acct-usage-30 {
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  font-size: 13px;
  color: var(--muted);
}
.acct-usage-30 strong {
  color: var(--ink);
  font-weight: 700;
}

/* stat tiles — faint wash + coloured number, keyed to the workbench palette */
.acct-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.acct-stat {
  background: color-mix(in srgb, var(--acct-blue) 7%, var(--card));
  border: 1px solid color-mix(in srgb, var(--acct-blue) 20%, var(--border));
  border-radius: var(--radius-sm);
  padding: 15px 16px;
}
.acct-stat .n {
  font-size: 22px;
  font-weight: 700;
  color: var(--acct-blue);
  line-height: 1.15;
}
.acct-stat .l {
  font-size: 11.5px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-top: 4px;
}
/* first tile counts PDFs — echo the PDF red */
.acct-stat:first-child {
  background: color-mix(in srgb, var(--pdf) 6%, var(--card));
  border-color: color-mix(in srgb, var(--pdf) 20%, var(--border));
}
.acct-stat:first-child .n {
  color: var(--pdf);
}

/* key / value rows */
.acct-kv {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 8px 0;
  border-top: 1px solid var(--border);
  font-size: 13px;
  color: var(--ink);
}
.acct-kv:first-of-type {
  border-top: 0;
  padding-top: 0;
}
.acct-kv > span:first-child {
  color: var(--muted);
  flex: none;
}
.acct-kv strong {
  font-weight: 600;
  text-align: right;
}
.acct-kv code {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-soft);
  word-break: break-all;
  text-align: right;
}
.acct-conn .btn,
.acct-tpl .btn {
  margin-top: 14px;
}

.acct-details {
  margin-top: 14px;
}
.acct-details summary {
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--accent);
  list-style: none;
}
.acct-details summary::-webkit-details-marker {
  display: none;
}
.acct-details summary::before {
  content: "+ ";
}
.acct-details[open] summary::before {
  content: "\2212 ";
}
.acct-token-form {
  margin-top: 10px;
}
.acct-token-form label {
  margin-top: 12px;
}
.acct-token-form .actions {
  margin-top: 14px;
}

/* security + danger */
.acct-security {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px 32px;
}
.acct-sec-col .hint {
  margin-bottom: 12px;
}
.acct-danger {
  border-left: 3px solid color-mix(in srgb, var(--danger) 45%, transparent);
  padding-left: 18px;
}
.acct-danger h3 {
  color: var(--danger);
}

@media (max-width: 860px) {
  .acct-grid {
    grid-template-columns: 1fr;
  }
  .acct-stats {
    grid-template-columns: repeat(2, 1fr);
  }
  .acct-security {
    grid-template-columns: 1fr;
  }
  .acct-danger {
    border-left: 0;
    border-top: 3px solid color-mix(in srgb, var(--danger) 45%, transparent);
    padding-left: 0;
    padding-top: 16px;
  }
}

/* ---- Responsive ---- */

@media (max-width: 960px) {
  .hero-top {
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
  }
  .hero-actions {
    align-items: flex-start;
  }
  /* Alone on its own full-width row now, so the title needs a smaller,
     viewport-scaled size to still fit on one line down to phone widths. */
  .hero-copy h1 {
    font-size: clamp(0.95rem, 4.4vw, 1.5rem);
  }
  .morph-stage {
    min-height: clamp(420px, 90vh, 760px);
  }
  .steps {
    grid-template-columns: repeat(2, 1fr);
  }
  .bento {
    grid-template-columns: repeat(2, 1fr);
  }
  .b-card.col-2,
  .b-card.col-3,
  .b-card.col-4,
  .b-card.col-6 {
    grid-column: span 2;
  }
  .shots {
    grid-template-columns: 1fr;
  }
  .use-cases {
    grid-template-columns: repeat(2, 1fr);
  }
  .type-list {
    grid-template-columns: repeat(2, 1fr);
  }
  .sec-split {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .facts {
    grid-template-columns: 1fr;
  }
  .template-grid {
    grid-template-columns: 1fr;
  }
  .stat-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .nav-links {
    display: none;
  }
}

@media (max-width: 760px) {
  .card {
    padding: 20px;
  }
  .toolbar {
    flex-direction: column;
    align-items: stretch;
  }
}

/* Demo stage on phones: the 5-column grid table gets cramped before the
   viewport does, so it scrolls horizontally inside its own panel rather
   than shrinking illegibly or breaking the page-wide no-scroll rule. */
@media (max-width: 640px) {
  .morph-table {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .mock-table.wide {
    min-width: 560px;
    font-size: 12px;
  }
  .mock-table.wide th,
  .mock-table.wide td {
    padding: 10px;
  }
  .pdf-doc {
    padding: 16px 18px;
  }
  .pdf-grid {
    grid-template-columns: 1fr;
  }
}

/* Stepper stays usable when the nav gets tight — dots only, no labels. */
@media (max-width: 820px) {
  .nav-inner {
    gap: 16px;
  }
  .nav-inner-app {
    gap: 12px;
  }
  .nav-step-label {
    display: none;
  }
  .nav-step > a {
    gap: 0;
  }
  .nav-step::after {
    width: 16px;
    margin: 0 7px;
  }
}

@media (max-width: 520px) {
  .nav-inner-app {
    padding: 8px 16px;
    gap: 8px;
  }
  .nav-inner-app .brand-logo {
    height: 36px;
  }
  .nav-step-dot {
    width: 26px;
    height: 26px;
  }
  .nav-step::after {
    width: 10px;
    margin: 0 5px;
  }
  .nav-user-btn {
    padding: 3px;
  }
  .nav-user-caret {
    display: none;
  }
}

@media (max-width: 560px) {
  .landing-block {
    padding: 64px 0;
  }
  .wrap {
    padding: 0 20px;
  }
  .steps,
  .bento,
  .use-cases,
  .type-list,
  .tpl-shot {
    grid-template-columns: 1fr;
  }
  .b-card.col-2,
  .b-card.col-3,
  .b-card.col-4,
  .b-card.col-6 {
    grid-column: span 1;
  }
  .flat-vs {
    grid-template-columns: 1fr;
  }
  .foot-cols {
    gap: 32px;
  }
  .closing-cta {
    padding: 44px 22px;
  }
}

/* ============================================================
   /template — Split Workbench
   Wider config panel (collapsible groups, searchable + drag-to-
   reorder field list) beside a sticky live preview.
   ============================================================ */

.tpl-wrap {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 28px 60px;
}

.tpl-workbench {
  display: grid;
  grid-template-columns: 452px 1fr;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--card);
  margin-top: 18px;
  min-height: 640px;
}

/* config panel */
.tpl-config {
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.tpl-config form {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}
.tpl-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px 24px;
  flex-wrap: wrap;
  margin: 18px 0 6px;
}
.tpl-ph-text {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.tpl-page-header h1 {
  font-size: 19px;
  margin: 0;
  color: var(--ink);
}
.tpl-ph-text > span {
  font-size: 12.5px;
  color: var(--muted);
}
.tpl-ph-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
}
.tpl-ph-actions .btn {
  white-space: nowrap;
}
.tpl-th-num {
  font-size: 10.5px;
  color: var(--muted);
  opacity: 0.8;
}

.app-toast {
  position: fixed;
  top: 74px;
  left: 50%;
  z-index: 100;
  display: inline-flex;
  gap: 8px;
  align-items: center;
  padding: 9px 18px;
  border-radius: 999px;
  background: var(--success);
  color: #fff;
  font-size: 12.5px;
  font-weight: 600;
  box-shadow: var(--shadow-card);
  pointer-events: none;
  animation: app-toast-life 4s ease forwards;
}
@keyframes app-toast-life {
  0% {
    opacity: 0;
    transform: translate(-50%, -8px);
  }
  8%,
  78% {
    opacity: 1;
    transform: translate(-50%, 0);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -8px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .app-toast {
    animation: none;
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

.tpl-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.tpl-config-scroll {
  padding: 14px 16px 6px;
  overflow: auto;
  flex: 1;
}

.tpl-group {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  margin-bottom: 10px;
  overflow: hidden;
}
.tpl-group > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 12px;
  font-weight: 600;
  font-size: 13px;
  background: #608bc7;
  color: #fff;
}
.tpl-group > summary::-webkit-details-marker {
  display: none;
}
.tpl-group > summary:hover {
  background: #5580bd;
}
.tpl-gi {
  width: 26px;
  height: 26px;
  flex: none;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
}
.tpl-gi svg {
  width: 15px;
  height: 15px;
}
.tpl-chev {
  margin-left: auto;
  width: 16px;
  height: 16px;
  color: currentColor;
  opacity: 0.85;
  transition: transform 0.18s ease;
  flex: none;
}
.tpl-group[open] > summary .tpl-chev {
  transform: rotate(180deg);
}
.tpl-group-body {
  padding: 12px 12px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.tpl-field label {
  display: block;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ink-soft);
  margin: 0 0 5px;
}
.tpl-field label .hint {
  font-weight: 400;
}
.tpl-field .hint {
  font-size: 11px;
  color: var(--muted);
  margin: 4px 0 0;
}
.tpl-field input[type="text"],
.tpl-field input[type="file"],
.tpl-field select {
  margin: 0;
}

.tpl-flist-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.tpl-flist-tools {
  display: flex;
  gap: 4px;
}
.tpl-linkbtn {
  border: 0;
  background: transparent;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 6px;
}
.tpl-linkbtn:hover {
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}

.tpl-search {
  position: relative;
  margin: 6px 0 8px;
}
.tpl-search svg {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  color: var(--muted);
  pointer-events: none;
}
.tpl-search input {
  width: 100%;
  font-family: inherit;
  font-size: 12.5px;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--border-strong);
  border-radius: 9px;
  padding: 8px 10px 8px 30px;
}

.tpl-flist {
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow-y: auto;
  max-height: 260px;
}
/* .tpl-frow is a <label> nested in .tpl-field, so it must out-specify the
   `.tpl-field label` rule above (which would otherwise force display:block). */
.tpl-flist .tpl-frow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 9px 11px;
  border-top: 1px solid var(--border);
  font-size: 12.5px;
  font-weight: 400;
  color: var(--ink);
  cursor: pointer;
  user-select: none;
  background: var(--card);
}
.tpl-flist .tpl-frow:first-child {
  border-top: 0;
}
.tpl-frow.is-dragging {
  opacity: 0.5;
}
.tpl-frow.is-title {
  background: color-mix(in srgb, var(--accent) 7%, transparent);
  cursor: default;
}
.tpl-grip {
  color: var(--muted);
  display: flex;
  flex: none;
  width: 12px;
}
.tpl-grip svg {
  width: 12px;
  height: 15px;
}
.tpl-frow.is-title .tpl-grip {
  visibility: hidden;
}
.tpl-cb-input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  pointer-events: none;
}
.tpl-cb {
  width: 16px;
  height: 16px;
  flex: none;
  border-radius: 5px;
  border: 1.5px solid var(--border-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}
.tpl-cb svg {
  width: 10px;
  height: 10px;
  opacity: 0;
}
.tpl-frow.is-on .tpl-cb {
  background: var(--accent);
  border-color: var(--accent);
}
.tpl-frow.is-on .tpl-cb svg {
  opacity: 1;
}
.tpl-frow.is-title .tpl-cb {
  visibility: hidden;
}
.tpl-fname {
  color: var(--ink);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tpl-frow:not(.is-on):not(.is-title) .tpl-fname {
  color: var(--muted);
  font-weight: 400;
}
.tpl-ftype {
  margin-left: auto;
  flex: none;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--muted);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 2px 8px;
}
.tpl-badge {
  margin-left: auto;
  flex: none;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--accent);
}

.tpl-toggle-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12.5px;
  color: var(--ink);
  cursor: pointer;
  user-select: none;
}
.tpl-toggle-row input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}
.tpl-toggle {
  width: 34px;
  height: 20px;
  border-radius: 999px;
  background: var(--border-strong);
  position: relative;
  flex: none;
  transition: background 0.16s ease;
}
.tpl-toggle::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  transition: left 0.16s ease;
}
.tpl-toggle-row input:checked + .tpl-toggle {
  background: var(--accent);
}
.tpl-toggle-row input:checked + .tpl-toggle::after {
  left: 16px;
}

.tpl-savebar {
  position: sticky;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-top: 1px solid var(--border);
  background: color-mix(in srgb, var(--card) 92%, transparent);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.tpl-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  color: var(--muted);
}
.tpl-status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #e0a207;
}

/* preview */
.tpl-preview {
  display: flex;
  flex-direction: column;
  background: var(--bg-band);
  min-width: 0;
}
.tpl-pv-toolbar {
  --ctl-h: 32px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  border-bottom: 1px solid var(--border);
}
.tpl-pv-select {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  height: var(--ctl-h);
  font-size: 12.5px;
  line-height: 1;
  color: var(--ink);
  flex: none;
}
.tpl-pv-select .k {
  color: var(--muted);
  font-weight: 600;
  white-space: nowrap;
}
.tpl-pv-select select {
  appearance: none;
  -webkit-appearance: none;
  font-family: inherit;
  font-size: 12.5px;
  line-height: 1;
  color: var(--ink);
  background: var(--card)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%235a6675' stroke-width='2'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E")
    no-repeat right 8px center;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  height: var(--ctl-h);
  padding: 0 26px 0 10px;
  max-width: 240px;
  box-sizing: border-box;
}

.tpl-pv-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  height: var(--ctl-h);
}
.tpl-pv-info {
  font-size: 11.5px;
  color: var(--muted);
}

.tpl-zoom {
  display: flex;
  align-items: stretch;
  height: var(--ctl-h);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  overflow: hidden;
  background: var(--card);
  box-sizing: border-box;
}
.tpl-zoom button {
  border: 0;
  background: transparent;
  color: var(--ink-soft);
  width: 24px;
  font-size: 15px;
  cursor: pointer;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.tpl-zoom button:hover {
  background: var(--surface-2);
}
.tpl-zoom span {
  font-size: 11.5px;
  color: var(--muted);
  padding: 0 3px;
  min-width: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.tpl-pv-stage {
  flex: 1;
  overflow: auto;
  padding: 16px 18px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}
.tpl-pv-frame {
  --z: 1;
  width: 100%;
  max-width: 1000px;
  position: relative;
}
.tpl-pv-frame iframe {
  display: block;
  width: 100%;
  height: calc(100vh - 210px);
  min-height: 640px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--shadow-card);
  transform: scale(var(--z));
  transform-origin: top center;
  transition:
    transform 0.15s ease,
    opacity 0.15s ease;
}
.tpl-pv-frame.is-updating iframe {
  opacity: 0.5;
}
.tpl-pv-frame.is-updating::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 4;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  background-size: 42% 100%;
  background-repeat: no-repeat;
  animation: tpl-bar 1.05s ease-in-out infinite;
}
@keyframes tpl-bar {
  0% {
    background-position: -45% 0;
  }
  100% {
    background-position: 145% 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .tpl-pv-frame.is-updating::before {
    animation: none;
    background-position: 0 0;
    background-size: 100% 100%;
    opacity: 0.35;
  }
}
.tpl-pv-frame.is-updating::after {
  content: "Updating preview…";
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: #fff;
  background: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent), #000 16%);
  border-radius: 999px;
  padding: 6px 14px;
  box-shadow:
    0 2px 10px -2px color-mix(in srgb, var(--accent) 55%, transparent),
    0 1px 2px rgba(0, 0, 0, 0.25);
  animation: tpl-pulse 1.1s ease-in-out infinite;
}
@keyframes tpl-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.72;
  }
}
@media (prefers-reduced-motion: reduce) {
  .tpl-pv-frame.is-updating::after {
    animation: none;
  }
}
/* First render does a full Baserow.io table read before the PDF — say so. */
.tpl-pv-frame.is-first-load.is-updating::after {
  content: "Loading Baserow.io table…";
}
.tpl-pv-error {
  margin: 0 18px 16px;
  padding: 10px 14px;
  border: 1px solid var(--danger);
  background: var(--danger-bg);
  color: var(--danger);
  border-radius: var(--radius-sm);
  font-size: 12.5px;
}

.tpl-logo-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border: 1px solid var(--border-strong);
  border-radius: 9px;
  background: var(--surface-2);
  cursor: pointer;
  transition:
    border-color 0.14s ease,
    background 0.14s ease;
}
.tpl-logo-controls:hover {
  border-color: var(--muted);
  background: color-mix(in srgb, var(--surface-2), var(--ink) 3%);
}
.tpl-logo-thumb {
  position: relative;
  flex: none;
  width: 34px;
  height: 24px;
  border-radius: 4px;
  background: #fff;
  border: 1px solid var(--border-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: var(--muted);
}
.tpl-logo-thumb img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  display: none;
}
.tpl-logo-thumb.has-img img {
  display: block;
}
.tpl-logo-thumb.has-img .tpl-logo-ph {
  display: none;
}
.tpl-logo-ph {
  width: 14px;
  height: 14px;
}
.tpl-logo-name {
  font-size: 11.5px;
  color: var(--muted);
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tpl-logo-choose {
  flex: none;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  padding: 3px 9px;
  color: var(--ink-soft);
  cursor: pointer;
}
.tpl-logo-choose:hover {
  border-color: var(--muted);
  color: var(--ink);
  background: transparent;
}
.tpl-logo-remove {
  flex: none;
  color: var(--danger);
}
.tpl-logo-remove:hover {
  background: var(--danger-bg);
}

.tpl-seg {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  overflow: hidden;
  background: var(--card);
}
.tpl-seg button {
  border: 0;
  background: transparent;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  padding: 0 12px;
  cursor: pointer;
  line-height: 1;
  display: inline-flex;
  align-items: center;
}
.tpl-seg button:hover {
  color: var(--ink);
}
.tpl-seg button + button {
  border-left: 1px solid var(--border-strong);
}
.tpl-seg button.is-on {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent);
}
.tpl-seg.tpl-seg-sm button {
  font-size: 11px;
  padding: 0 11px;
}
.tpl-pv-right .tpl-seg {
  height: var(--ctl-h);
  box-sizing: border-box;
}

@media (max-width: 1040px) {
  .tpl-workbench {
    grid-template-columns: 1fr;
  }
  .tpl-config {
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }
  .tpl-pv-frame iframe {
    height: 78vh;
  }
}

/* ---- Shared "Report a bug" widget (dashneb widget.js) ----
   widget.js injects its own <style> with fixed dark colours tuned for the
   other EBLYN sites. These rules re-skin the floating button and the modal
   in BaserowPDF's tokens. The [data-theme] prefix does double duty: it
   raises specificity above the widget's single-class rules (so load order
   doesn't matter), and since the tokens flip per theme the same rules
   cover light and dark. */

[data-theme] .eblyn-bw-btn {
  background: var(--accent);
  color: #fff;
  font-family: var(--font-body);
  border-radius: var(--radius-pill);
  box-shadow:
    0 1px 2px rgba(16, 24, 40, 0.14),
    0 12px 26px -10px color-mix(in srgb, var(--accent) 72%, transparent);
}
[data-theme] .eblyn-bw-btn:hover {
  background: var(--accent-dark);
}

[data-theme] .eblyn-bw-modal {
  background: var(--card);
  color: var(--ink);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-float);
}
[data-theme] .eblyn-bw-modal h2 {
  color: var(--ink);
}

[data-theme] .eblyn-bw-close {
  color: var(--muted);
}
[data-theme] .eblyn-bw-close:hover {
  color: var(--ink);
}

[data-theme] .eblyn-bw-project {
  color: var(--muted);
}
[data-theme] .eblyn-bw-project b {
  color: var(--accent);
}

[data-theme] .eblyn-bw-form label {
  color: var(--muted);
}

[data-theme] .eblyn-bw-form input,
[data-theme] .eblyn-bw-form textarea {
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  color: var(--ink);
}
[data-theme] .eblyn-bw-form input:focus,
[data-theme] .eblyn-bw-form textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent);
}

[data-theme] .eblyn-bw-send {
  background: var(--accent);
  color: #fff;
}
[data-theme] .eblyn-bw-send:hover {
  background: var(--accent-dark);
  opacity: 1;
}

[data-theme] .eblyn-bw-status.success {
  color: var(--success);
}
[data-theme] .eblyn-bw-status.error {
  color: var(--danger);
}
/* --success is a dark green tuned for light backgrounds; lift it on the
   dark modal so the (transient) success line stays legible. */
[data-theme="dark"] .eblyn-bw-status.success {
  color: #3ec17a;
}

[data-theme] .eblyn-bw-count {
  color: var(--muted);
}

/* ============================================================
   /health — status page
   ============================================================ */

.health-page {
  padding-bottom: 60px;
}
.health-banner {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: 20px 22px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--card);
  margin: 24px 0;
}
.health-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  flex: none;
  box-shadow: 0 0 0 5px transparent;
}
.health-banner.is-ok .health-dot { background: var(--success); box-shadow: 0 0 0 5px color-mix(in srgb, var(--success) 16%, transparent); }
.health-banner.is-degraded .health-dot { background: #c98a04; box-shadow: 0 0 0 5px color-mix(in srgb, #c98a04 16%, transparent); }
.health-banner.is-down .health-dot { background: var(--danger); box-shadow: 0 0 0 5px color-mix(in srgb, var(--danger) 16%, transparent); }
.health-banner.is-ok { border-color: color-mix(in srgb, var(--success) 30%, var(--border)); }
.health-banner.is-degraded { border-color: color-mix(in srgb, #c98a04 30%, var(--border)); }
.health-banner.is-down { border-color: color-mix(in srgb, var(--danger) 30%, var(--border)); }
.health-banner-label {
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
}
.health-banner-note {
  font-size: 13px;
  color: var(--muted);
  margin-top: 2px;
}
.health-banner-meta {
  margin-left: auto;
  display: flex;
  gap: 16px;
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
  flex-wrap: wrap;
}

.health-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin: 24px 0;
}
.health-tile {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--card);
}
.health-tile-icon {
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.health-tile-icon svg { width: 14px; height: 14px; }
.health-tile.is-ok .health-tile-icon { background: color-mix(in srgb, var(--success) 16%, transparent); color: var(--success); }
.health-tile.is-warn .health-tile-icon { background: color-mix(in srgb, #c98a04 16%, transparent); color: #c98a04; }
.health-tile.is-down .health-tile-icon { background: color-mix(in srgb, var(--danger) 16%, transparent); color: var(--danger); }
.health-tile-label {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
}

.health-footnote {
  font-size: 12.5px;
  color: var(--muted);
  margin-top: 12px;
}

@media (max-width: 760px) {
  .health-grid { grid-template-columns: 1fr; }
  .health-banner-meta { margin-left: 0; }
}

/* ============================================================
   Legal pages (/privacy) — plain prose
   ============================================================ */

.legal {
  padding-bottom: 60px;
}
.legal-updated {
  font-size: 12.5px;
  color: var(--muted);
}
.legal h2 {
  font-size: 19px;
  margin: 34px 0 10px;
  color: var(--ink);
}
.legal h2:first-of-type {
  margin-top: 20px;
}
.legal p,
.legal li {
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--ink-soft);
}
.legal ul {
  padding-left: 20px;
  margin: 10px 0;
}
.legal li {
  margin-bottom: 8px;
}
.legal li b {
  color: var(--ink);
}