:root {
  color-scheme: light;
  --bg: #ffffff;
  --bg-elevated: #ffffff;
  --bg-subtle: #f5f6f8;
  --border: #e2e4e9;
  --text: #1c2027;
  --text-muted: #676d79;
  --accent: #2f6f5e;
  --accent-hover: #255a4c;
  --accent-soft: #e4f0ec;
  --shadow: 0 12px 32px rgba(20, 24, 32, 0.08);
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* Explicit choice (theme-toggle in site_nav(), stored in localStorage - see the inline script in
   render_page_start()) always wins over the OS preference below. */
:root[data-theme='dark'] {
  color-scheme: dark;
  --bg: #14171c;
  --bg-elevated: #1b1f26;
  --bg-subtle: #191d23;
  --border: #2b3038;
  --text: #e7e9ed;
  --text-muted: #9298a3;
  --accent: #4fa98a;
  --accent-hover: #66bb9e;
  --accent-soft: #1c2e29;
  --shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
}

/* :not([data-theme='light']) - an explicit light choice must opt out of this even when the OS
   itself prefers dark, same reasoning the Node ZenBooks app's own index.css uses. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    color-scheme: dark;
    --bg: #14171c;
    --bg-elevated: #1b1f26;
    --bg-subtle: #191d23;
    --border: #2b3038;
    --text: #e7e9ed;
    --text-muted: #9298a3;
    --accent: #4fa98a;
    --accent-hover: #66bb9e;
    --accent-soft: #1c2e29;
    --shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
  }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  line-height: 1.5;
}
h1, h2, h3, p { margin: 0; }
a { color: inherit; }
img, svg { display: block; max-width: 100%; }

* { scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--border); border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; }

.container {
  max-width: 1100px;
  margin: 0 auto;
  /* Vertical rhythm between stacked page sections (index.php/docs.php each chain several
     <section class="container">) - .hero's own padding rule (below, same specificity but later
     in this file) overrides this for the hero section specifically, so this only ever applies
     to the plainer sections that don't set their own. */
  padding: 72px 24px;
}

/* ---------------------------------------------------------------- buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  color: var(--text);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.1s ease, background 0.15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn-outline { background: none; border-color: var(--border); color: var(--text); }
.btn-outline:hover { background: var(--bg-elevated); }
.btn-sm { padding: 8px 16px; font-size: 13px; }

/* ---------------------------------------------------------------- header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.site-header-inner {
  position: relative;
  max-width: 1100px;
  margin: 0 auto;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.mobile-menu-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-elevated);
  color: var(--text);
  cursor: pointer;
}
.site-brand {
  display: flex;
  align-items: center;
  gap: 9px;
  font-weight: 800;
  font-size: 17px;
  text-decoration: none;
  letter-spacing: -0.01em;
}
.site-brand-mark {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background: var(--accent);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 800;
}
.site-nav {
  display: flex;
  align-items: center;
  gap: 28px;
}
.site-nav a:not(.btn) {
  text-decoration: none;
  color: var(--text-muted);
  font-size: 14px;
  font-weight: 600;
}
.site-nav a:not(.btn):hover { color: var(--text); }

/* Light/dark switcher (site_nav()) - same two-button sun/moon group as the Node ZenBooks app's
   own ThemeToggle, adapted to this site's plainer CSS variables. */
.theme-toggle {
  display: flex;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 2px;
  gap: 2px;
}
.theme-toggle button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: none;
  border-radius: 999px;
  background: none;
  color: var(--text-muted);
  cursor: pointer;
}
.theme-toggle button:hover { color: var(--text); }
.theme-toggle button.active { background: var(--accent); color: #fff; }

/* ---------------------------------------------------------------- hero */
.hero {
  padding: 90px 0 70px;
  text-align: center;
}
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 24px;
}
.hero h1 {
  font-size: clamp(32px, 5vw, 52px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
  max-width: 780px;
  margin: 0 auto;
}
.hero-subtitle {
  max-width: 600px;
  margin: 22px auto 0;
  font-size: 18px;
  color: var(--text-muted);
}
.hero-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 34px;
  flex-wrap: wrap;
}

/* ---------------------------------------------------------- product mock */
.mock-window {
  max-width: 920px;
  margin: 64px auto 0;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.mock-titlebar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
}
.mock-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--border); }
/* Two real screenshots (dashboard-light.png/dashboard-dark.png) rather than the CSS-drawn
   placeholder this used to be - one is hidden depending on the site's own light/dark theme (same
   :root[data-theme]/prefers-color-scheme rule this file's :root blocks already use), so the
   screenshot always matches whichever mode ZenBooks itself would actually be showing. Sets its
   own height from its intrinsic aspect ratio - no fixed height like the old placeholder body
   needed. */
.mock-screenshot { display: block; width: 100%; height: auto; }
.mock-screenshot-dark { display: none; }
:root[data-theme='dark'] .mock-screenshot-light { display: none; }
:root[data-theme='dark'] .mock-screenshot-dark { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .mock-screenshot-light { display: none; }
  :root:not([data-theme='light']) .mock-screenshot-dark { display: block; }
}

/* ------------------------------------------------------------- sections */
section { padding: 80px 0; }
.section-header { text-align: center; max-width: 620px; margin: 0 auto 48px; }
.section-kicker {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 10px;
}
.section-header h2 { font-size: clamp(26px, 3.5vw, 36px); font-weight: 800; letter-spacing: -0.02em; text-wrap: balance; }
.section-header p { margin-top: 14px; color: var(--text-muted); font-size: 16px; }

/* ------------------------------------------------------------ features */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
/* For a feature-grid with exactly 2 cards (docs.php) - repeat(3, 1fr) with only 2 items leaves an
   empty third column, reading as left-aligned/unfinished rather than 2 cards filling the row. */
.feature-grid-2 { grid-template-columns: repeat(2, 1fr); }
.feature-card {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 26px;
  background: var(--bg-elevated);
}
.feature-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--accent-soft);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}
.feature-card h3 { font-size: 16px; font-weight: 700; margin-bottom: 8px; }
.feature-card p { color: var(--text-muted); font-size: 14px; }

/* --------------------------------------------------------- how it works */
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  position: relative;
}
.step { position: relative; }
.step-number {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 14px;
  margin-bottom: 16px;
}
.step h3 { font-size: 16px; font-weight: 700; margin-bottom: 8px; }
.step p { color: var(--text-muted); font-size: 14px; }
.step-targets { display: flex; gap: 6px; margin-top: 12px; flex-wrap: wrap; }
.step-target {
  font-size: 12px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  color: var(--text-muted);
}

/* -------------------------------------------------------------- get started */
.get-started-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.get-started-card {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg-elevated);
  padding: 24px;
  /* A grid item's default min-width is auto (its content's intrinsic min width), not 0 - the
     pre.code-block inside has unbreakable lines (white-space: pre) that are wider than a phone
     screen, so without this the whole grid - and the page - was forced wider than the viewport
     instead of letting the pre's own overflow-x: auto handle it. */
  min-width: 0;
}
.get-started-card h3 { font-size: 16px; font-weight: 700; margin-bottom: 6px; }
.get-started-card p { color: var(--text-muted); font-size: 14px; margin-bottom: 16px; }
pre.code-block {
  background: #0f1115;
  color: #d6e2e0;
  border-radius: 8px;
  padding: 16px;
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.6;
  overflow-x: auto;
  margin: 0;
}
pre.code-block .comment { color: #6b7583; }
pre.code-block .accent { color: #6fd6b5; }

/* --------------------------------------------------------------- footer */
.site-footer { border-top: 1px solid var(--border); padding: 48px 0; }
.site-footer-inner { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.site-footer-brand { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 15px; }
.site-footer-inner p { color: var(--text-muted); font-size: 14px; }
.site-footer-links { display: flex; gap: 20px; margin-top: 4px; }
.site-footer-links a { font-size: 13px; font-weight: 600; color: var(--text-muted); text-decoration: none; }
.site-footer-links a:hover { color: var(--accent); }

/* ------------------------------------------------------ account menu (header) */
.account-menu { position: relative; }
.account-menu-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.account-menu-trigger:hover { background: var(--bg-subtle); }
.account-menu-popup {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 160px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow);
  padding: 6px;
  z-index: 30;
}
.account-menu.open .account-menu-popup { display: block; }
.account-menu-popup a,
.account-menu-popup .link-button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px 10px;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  font-family: inherit;
}
.account-menu-popup a:hover,
.account-menu-popup .link-button:hover { background: var(--bg-subtle); }

/* ------------------------------------------------------------- auth pages */
.auth-main {
  display: flex;
  justify-content: center;
  padding: 70px 24px 100px;
}
.auth-shell {
  width: 100%;
  max-width: 400px;
  text-align: center;
}
.auth-shell h1 { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; }
.auth-subtitle { margin-top: 8px; color: var(--text-muted); font-size: 14px; }
.auth-form {
  margin-top: 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  text-align: left;
}
.auth-footer { margin-top: 20px; font-size: 13px; color: var(--text-muted); }

.form-field { display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.form-field input {
  font-family: inherit;
  font-size: 14px;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
}
.form-field input:focus { outline: none; border-color: var(--accent); }
.form-field-hint { font-size: 12px; font-weight: 400; color: var(--text-muted); }

.btn-submit { width: 100%; }
.link-strong { color: var(--accent); font-weight: 700; text-decoration: none; }
.link-strong:hover { text-decoration: underline; }

.form-message { padding: 10px 14px; border-radius: 8px; font-size: 13px; font-weight: 600; }
.form-message-error { background: #fbe9e7; color: #c0392b; }
.form-message-success { background: var(--accent-soft); color: var(--accent); }
@media (prefers-color-scheme: dark) {
  .form-message-error { background: #2e1e1c; color: #e5766a; }
}

/* ------------------------------------------------------------ account page */
.account-main { padding: 40px 24px; max-width: 760px; }
.account-section { margin-bottom: 40px; }
.account-section h1 { font-size: 24px; font-weight: 700; letter-spacing: -0.01em; margin: 0 0 24px; }
.account-section h2 { font-size: 18px; margin: 0 0 16px; }
.account-section-subtitle { font-size: 13px; color: var(--text-muted); margin: -10px 0 16px; }
.account-form { margin-top: 20px; }
.account-form-actions { display: flex; justify-content: flex-end; margin-top: 4px; }
.account-password-row { display: flex; align-items: center; gap: 14px; }
.account-password-dots { color: var(--text-muted); letter-spacing: 2px; }
.account-password-row button.link-strong { background: none; border: none; padding: 0; font: inherit; cursor: pointer; }
.account-logout-form { margin-top: 20px; }
.installs-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.installs-table th, .installs-table td { border-bottom: 1px solid var(--border); padding: 8px 6px; text-align: left; }
.installs-table td:last-child, .installs-table th:last-child { text-align: right; }
.installs-table .btn { padding: 4px 10px; font-size: 12px; }
.license-key-value {
  display: block;
  margin-top: 8px;
  padding: 8px 10px;
  border-radius: 6px;
  background: var(--bg);
  font-family: monospace;
  font-size: 13px;
  word-break: break-all;
}

/* Plan cards - shared by the homepage's #pricing section (.pricing-grid) and account.php's Plan
   section (.plan-status-row/.plan-grid); .plan-card itself and its children are common to both. */
.plan-status-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin: -10px 0 16px; }
.plan-status-row .account-section-subtitle { margin: 0; }
.plan-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.pricing-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.plan-card {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.plan-card--current { border-color: var(--accent); }
.plan-card h3 { font-size: 15px; font-weight: 700; }
.plan-card-audience { font-size: 12px; color: var(--text-muted); margin: -4px 0 0; }
.plan-card-limits { list-style: none; margin: 0; padding: 0; font-size: 13px; color: var(--text-muted); flex: 1; display: flex; flex-direction: column; gap: 4px; }
.plan-card-limits li { padding-left: 14px; position: relative; }
.plan-card-limits li::before { content: '\2022'; position: absolute; left: 0; color: var(--accent); }
/* margin-top: auto pushes this to the card's bottom whenever there's no .plan-card-limits list
   above it to already do that via its own flex: 1 (Enterprise+'s card - see index.php/
   account.php's own isCustomPricing check - has no list at all), so its price/action block still
   lines up with every other card's instead of floating right under the audience text. Inert
   (computes to zero extra space) on every other card, since flex: 1 above already claimed it. */
.plan-card-actions { display: flex; flex-direction: column; gap: 8px; margin-top: auto; }
.plan-card-actions .btn { width: 100%; }
.plan-manage-billing { margin-top: 16px; }

.pricing-card-price { font-size: 15px; margin-top: auto; }
.pricing-card-price strong { font-size: 22px; font-weight: 800; }
.pricing-card-annual { display: block; font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.pricing-grid .btn { width: 100%; margin-top: 4px; }

.password-dialog {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 24px;
  width: 100%;
  max-width: 380px;
  color: var(--text);
  background: var(--bg-elevated);
}
.password-dialog::backdrop { background: rgba(10, 12, 16, 0.45); }
.password-dialog h2 { font-size: 18px; margin: 0 0 18px; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }

/* ------------------------------------------------------------- responsive */
@media (max-width: 860px) {
  .feature-grid, .steps, .get-started-grid { grid-template-columns: 1fr; }
  .plan-grid { grid-template-columns: 1fr; }
  .pricing-grid { grid-template-columns: repeat(2, 1fr); }

  .mobile-menu-toggle { display: inline-flex; }
  /* Collapses to a dropdown panel instead of just hiding every link with nothing replacing
     them - anchored by .site-header-inner's position: relative above. Toggled by
     [data-mobile-menu-toggle] - see site_nav()'s own inline script. */
  .site-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding: 8px 24px 20px;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow);
  }
  .site-nav.open { display: flex; }
  .site-nav a:not(.btn) { display: block; padding: 10px 0; }
  .site-nav .btn { align-self: flex-start; margin-top: 6px; }
  .theme-toggle { align-self: flex-start; margin-top: 6px; }
  .account-menu { width: 100%; }
  .account-menu-trigger { width: 100%; justify-content: flex-start; }
  .account-menu-popup { position: static; box-shadow: none; border: none; padding: 0 0 0 12px; }
}

@media (max-width: 560px) {
  .pricing-grid { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------------- docs (user manual) */
/* Sidebar + content two-column layout, new to the site (no prior page used a sidebar before
   this) - built from the same CSS custom properties as everything else here rather than a new
   design language. .docs-main widens past .container's usual 1100px so the content column isn't
   cramped once the 240px sidebar is taken out of it. */
.docs-main { max-width: 1280px; padding-top: 40px; padding-bottom: 72px; }
.docs-layout { display: grid; grid-template-columns: 240px 1fr; gap: 48px; align-items: start; }
.docs-sidebar {
  position: sticky;
  top: 24px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  font-size: 14px;
  /* Own scroll region once the sidebar's content is taller than the viewport (e.g. a short
     window with the full nav expanded) - keeps it reachable instead of running off-screen. */
  max-height: calc(100vh - 48px);
  overflow-y: auto;
}
.docs-sidebar-title {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.docs-sidebar-section { display: flex; flex-direction: column; }
.docs-sidebar-section a {
  display: block;
  padding: 6px 10px;
  margin: 0 -10px;
  border-radius: 6px;
  color: var(--text-muted);
  text-decoration: none;
}
.docs-sidebar-section a:hover { background: var(--bg-subtle); color: var(--text); }
.docs-sidebar-section a.active { background: var(--accent-soft); color: var(--accent); font-weight: 700; }
/* Admin is a deliberately distinct group, not just another section - a visible rule + heavier
   label sets it apart as "different audience" the same way the app's own sidebar breaks admin
   pages out under a "SYSTEM ADMIN" heading below a divider. */
.docs-sidebar-section.docs-sidebar-admin {
  margin-top: 4px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}

.docs-content { min-width: 0; max-width: 760px; }
.docs-content h1 { font-size: clamp(26px, 3vw, 34px); font-weight: 800; letter-spacing: -0.02em; margin-bottom: 8px; }
.docs-content .docs-lede { color: var(--text-muted); font-size: 16px; margin-bottom: 32px; }
.docs-content h2 { font-size: 21px; font-weight: 700; margin: 40px 0 12px; scroll-margin-top: 24px; }
.docs-content h2:first-of-type { margin-top: 0; }
.docs-content h3 { font-size: 16px; font-weight: 700; margin: 24px 0 8px; scroll-margin-top: 24px; }
.docs-content p { margin: 0 0 14px; color: var(--text); font-size: 15px; line-height: 1.65; }
.docs-content p.docs-muted { color: var(--text-muted); }
.docs-content ul, .docs-content ol { margin: 0 0 14px; padding-left: 22px; font-size: 15px; line-height: 1.65; }
.docs-content li { margin-bottom: 6px; }
.docs-content code {
  font-family: var(--mono);
  font-size: 0.9em;
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1px 5px;
}
.docs-content pre.code-block { margin-bottom: 16px; }
.docs-content strong { font-weight: 700; }
.docs-content a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }

.docs-note {
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  background: var(--bg-subtle);
  border-radius: 8px;
  padding: 14px 16px;
  margin: 0 0 20px;
  font-size: 14px;
}
.docs-note p:last-child { margin-bottom: 0; }
.docs-note-warn { border-left-color: #c15b3a; }

.docs-screenshot {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow);
  margin: 8px 0 24px;
}
.docs-screenshot-caption {
  margin-top: -16px;
  margin-bottom: 24px;
  font-size: 13px;
  color: var(--text-muted);
  text-align: center;
}

.docs-pager {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
}
.docs-pager a {
  flex: 1;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
  text-decoration: none;
  color: var(--text);
  font-size: 14px;
}
.docs-pager a:hover { background: var(--bg-subtle); }
.docs-pager-label { display: block; font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 4px; }
.docs-pager-next { text-align: right; }

.docs-index-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin: 16px 0 36px;
}
/* .feature-card doubling as a link (docs.php's index grid) - the card itself carries the
   hover/click affordance, so the underline .docs-content a normally adds would be redundant
   noise on every card title. */
a.feature-card { text-decoration: none; display: block; transition: transform 0.1s ease, border-color 0.15s ease; }
a.feature-card:hover { transform: translateY(-2px); border-color: var(--accent); }
a.feature-card h3 { color: var(--accent); }

@media (max-width: 860px) {
  .docs-layout { grid-template-columns: 1fr; }
  .docs-sidebar {
    position: static;
    max-height: none;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 16px 28px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 8px;
  }
  .docs-index-grid { grid-template-columns: 1fr; }
}