:root {
  --bg: #f2f2f2;
  --panel: #ffffff;
  --panel-2: #f4f4f4;
  --border: #e0e0e0;
  --text: #111111;
  --muted: #6b7280;
  --accent: #e8873b;   /* survey-marker orange */
  --accent-2: #4fb3d9; /* BGT water blue */
  --ok: #2f9e5b;
  --font-display: 'Roboto', system-ui, sans-serif;
  --font-mono: 'Roboto Mono', ui-monospace, monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-display);
}

#map {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: #e5e5e5;
}

/* Leaflet light tuning */
.leaflet-container { background: #e5e5e5; }
.leaflet-control-container .leaflet-draw-toolbar a {
  background-color: var(--panel);
  border-color: var(--border);
}
.leaflet-bar a, .leaflet-bar a:hover {
  background-color: var(--panel);
  color: var(--text);
  border-color: var(--border);
}

/* Zoom control: horizontal instead of Leaflet's default vertical stack,
   matched height with the search bar next to it, +/- not bold. */
.leaflet-control-zoom.leaflet-bar {
  display: flex;
  flex-direction: row;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 8px 20px rgba(0,0,0,0.12);
}
.leaflet-control-zoom.leaflet-bar a,
.leaflet-control-zoom.leaflet-bar a:focus {
  width: 40px;
  height: 40px;
  line-height: 40px;
  font-size: 16px;
  font-weight: 400;
  border-radius: 0;
  border: none;
  border-right: 1px solid var(--border);
  background-color: #ffffff !important;
  background: #ffffff !important;
  opacity: 1 !important;
}
.leaflet-control-zoom.leaflet-bar a:hover {
  width: 40px;
  height: 40px;
  line-height: 40px;
  font-size: 16px;
  font-weight: 400;
  border-radius: 0;
  border: none;
  border-right: 1px solid var(--border);
  background-color: var(--accent) !important;
  background: var(--accent) !important;
  opacity: 1 !important;
}
.leaflet-control-zoom.leaflet-bar a:last-child {
  border-right: none;
}

/* Match the left panel's 20px inset, and sit below the header bar */
.leaflet-top.leaflet-right {
  top: 92px;
  right: 20px;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.leaflet-top.leaflet-right .search-control {
  margin-top: 0;
}
.leaflet-top.leaflet-right .leaflet-control-zoom {
  margin-top: 0;
}

.search-control {
  width: 240px;
}
.search-control input {
  width: 100%;
  height: 40px;
  box-sizing: border-box;
  font-family: var(--font-display);
  font-size: 13px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0 12px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.12);
}
.search-control input::placeholder { color: var(--muted); }
.search-control input:focus { outline: none; border-color: var(--accent); }

.search-results {
  margin-top: 4px;
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(10px);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 8px 20px rgba(0,0,0,0.12);
}
.search-results.hidden { display: none; }
.search-item {
  padding: 9px 12px;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
  border-bottom: 1px solid var(--border);
}
.search-item:last-child { border-bottom: none; }
.search-item:hover { background: var(--panel-2); color: var(--accent); }
.search-empty {
  padding: 9px 12px;
  font-size: 12px;
  color: var(--muted);
}

#header-bar {
  position: absolute;
  top: 24px;
  left: 20px;
  right: 20px;
  height: 48px;
  z-index: 20; /* higher than #panel's 10 below — #panel comes later in the DOM, so at equal z-index it would otherwise win the stacking order and cover the mobile dropdown menu (a child of #header-bar) */
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(10px);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.15);
  padding: 0 28px;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.header-nav {
  display: flex;
  align-items: center;
  gap: 32px;
  width: 100%;
}
.header-nav-item {
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  text-decoration: none;
  cursor: pointer;
  transition: color 0.12s ease;
}
.header-nav-item:hover { color: var(--accent); }

/* Default (desktop) display for the links wrapper — makes it behave
   exactly like the individual <a> tags used to (each its own flex item
   with .header-nav's own 32px gap) now that they're grouped inside this
   div for the mobile dropdown (see #header-menu-toggle below and the
   @media block for what changes on mobile). Without this explicit
   flex+gap, the div would fall back to its default block display,
   breaking the desktop row into a single bunched-up box. */
#header-nav-links { display: flex; align-items: center; gap: 32px; }

.header-brand {
  color: var(--accent);
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  padding-right: 20px;
  border-right: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 6px;
}
.header-brand:hover { opacity: 0.8; }
.header-logo-mark {
  height: 30px;
  width: auto;
  display: block;
}
.header-logo-right {
  display: flex;
  align-items: center;
  margin-left: auto;
}

#panel {
  position: absolute;
  top: 92px;
  left: 20px;
  bottom: 24px;
  width: 360px;
  z-index: 10;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(10px);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 24px;
  overflow-y: auto;
  box-shadow: 0 20px 50px rgba(0,0,0,0.15);
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--accent);
  text-transform: uppercase;
}

h1 {
  font-size: 24px;
  margin: 8px 0 10px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.lede {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
  margin: 0 0 24px;
}

.panel-info {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
}
.panel-info summary {
  cursor: pointer;
  font-weight: 500;
  padding: 2px 0;
}
.panel-info ul {
  margin: 8px 0 0;
  padding-left: 18px;
}
.panel-info li { margin: 4px 0; }

.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.step {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px 0;
  border-top: 1px solid var(--border);
  opacity: 0.45;
  transition: opacity 0.2s ease;
}
.step-header {
  display: flex;
  align-items: baseline;
  gap: 14px;
}
.step-header > div {
  flex: 1 1 0%;
  min-width: 0;
}

.step.active, .step.done {
  opacity: 1;
}

.step-num {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--accent);
  flex-shrink: 0;
}

.step h2 {
  font-size: 15px;
  margin: 0 0 4px;
  font-weight: 600;
}

.step p {
  font-size: 13px;
  color: var(--muted);
  margin: 0 0 10px;
  line-height: 1.45;
}

button {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
  background: var(--accent);
  color: #1a1206;
  border: none;
  border-radius: 8px;
  padding: 10px 16px;
  cursor: pointer;
  transition: transform 0.08s ease, opacity 0.15s ease;
}

button:hover:not(:disabled) { transform: translateY(-1px); }
button:disabled { opacity: 0.35; cursor: not-allowed; }

button.ghost {
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--border);
  margin-top: 20px;
  width: 100%;
}
button.ghost:hover { color: var(--text); border-color: var(--muted); }

button.ghost-inline {
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--border);
  margin-left: 8px;
}
button.ghost-inline:hover { color: #e0645f; border-color: #e0645f; }
button.ghost-inline.hidden { display: none; }

.status {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--muted);
  margin-top: 4px;
  min-height: 16px;
}
.status.ok { color: var(--ok); }
.status.warn { color: #e0a23b; }
.status.err { color: #e0645f; }

#rd-hud {
  position: absolute;
  right: 20px;
  bottom: 24px;
  z-index: 10;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 14px;
  font-family: var(--font-mono);
  font-size: 12px;
  display: none;
  gap: 10px;
  align-items: baseline;
  box-shadow: 0 8px 20px rgba(0,0,0,0.12);
}
#rd-hud.visible { display: flex; }
.rd-label { color: var(--accent); letter-spacing: 0.06em; }
#rd-coords { color: var(--text); }

/* Hamburger toggle button — hidden on desktop, shown only inside the
   mobile @media block below. Three-line icon built from plain <span>s
   rather than an icon font/SVG sprite, to avoid one more asset just for
   this. */
#header-menu-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  gap: 5px;
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  flex-shrink: 0;
}
#header-menu-toggle span {
  display: block;
  height: 2px;
  background: var(--text);
  border-radius: 1px;
}

@media (max-width: 560px) {
  /* Header now STAYS VISIBLE on mobile (previously display:none — see
     header-menu.js and #header-nav-links below for what replaced that):
     the nav links collapse behind a hamburger toggle instead of
     disappearing outright. overflow was only ever hidden to clip
     content to the bar's own rounded corners on desktop — with the
     dropdown menu now living just below the bar (not inside it), it
     needs to be allowed to actually show there instead of getting
     clipped by the header's own box. */
  #header-bar { left: 12px; right: 12px; top: 12px; padding: 0 16px; overflow: visible; }
  .header-brand { padding-right: 12px; font-size: 13px; }
  .header-logo-mark { height: 24px; }
  #header-menu-toggle { display: flex; }
  #header-nav-links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 8px;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    background: rgba(255, 255, 255, 0.97);
    backdrop-filter: blur(10px);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.15);
    padding: 10px;
  }
  #header-nav-links.open { display: flex; }
  #header-nav-links .header-nav-item {
    padding: 11px 12px;
    border-radius: 8px;
  }
  #header-nav-links .header-nav-item:hover { background: rgba(0,0,0,0.04); }

  #panel { left: 12px; right: 12px; top: 84px; bottom: auto; width: auto; max-height: 46vh; padding: 16px; }
  #rd-hud { display: none !important; }
  .lang-toggle button { padding: 5px 6px; font-size: 10px; }
  h1 { font-size: 18px; margin: 6px 0 6px; }
  .lede { font-size: 12.5px; line-height: 1.4; margin: 0 0 14px; }
  .eyebrow { font-size: 10px; }
}

.segmented {
  display: flex;
  width: 100%;
  margin: 0 auto;
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  background: var(--panel);
}
.segment {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: var(--text);
  border: none;
  border-radius: 0;
  border-right: 1px solid var(--border);
  font-size: 10px;
  font-weight: 500;
  line-height: 1.3;
  padding: 9px 4px;
  white-space: normal;
  word-break: normal;
  overflow-wrap: normal;
  text-align: center;
  transition: background 0.12s ease, color 0.12s ease;
}
.segment:last-child { border-right: none; }
.segment:hover:not(:disabled) { background: var(--accent); color: #1a1206; transform: none; }
.segment:active:not(:disabled) { background: var(--accent); color: #1a1206; }
.segment.segment-active { background: var(--accent); color: #1a1206; }
.segment:disabled { opacity: 0.4; cursor: not-allowed; }

.segment-caret {
  flex: 0 0 22px !important; /* overrides the flex:1 1 0 every other .segment shares, so this stays narrow while the rest split the remaining space evenly */
  font-size: 11px;
  padding: 9px 0;
}

#drawModeDropdown {
  position: fixed;
  z-index: 200;
  min-width: 180px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.18);
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
#drawModeDropdown.hidden { display: none; }
#drawModeDropdown button {
  text-align: left;
  background: transparent;
  border: none;
  border-radius: 7px;
  padding: 9px 10px;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
}
#drawModeDropdown button:hover { background: var(--accent); color: #1a1206; }
#drawModeDropdown button.draw-mode-active { font-weight: 700; }

.edit-actions {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}
.edit-actions.hidden { display: none; }
.edit-action-save {
  flex: 1 1 auto;
  background: var(--accent);
  color: #1a1206;
}
.edit-action-cancel {
  flex: 1 1 auto;
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--border);
}
.edit-action-cancel:hover { color: var(--text); border-color: var(--muted); }

/* ---- Area picker modal ---- */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(8, 12, 17, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
}
.modal-overlay.hidden { display: none; }

/* Area picker specifically: no dark overlay and left-aligned rather than
   centered, so the map stays visible on the right — needed so candidate
   wijk/buurt polygons drawn on the map are actually visible while picking,
   not hidden behind the usual modal backdrop. */
#areaPickerModal {
  background: transparent;
  justify-content: flex-start;
  padding-left: 20px;
  pointer-events: none; /* let clicks reach the map outside the modal box itself */
}
#areaPickerModal .modal {
  pointer-events: auto;
  box-shadow: 0 20px 60px rgba(0,0,0,0.35);
}

.modal {
  width: 480px;
  max-width: calc(100vw - 40px);
  height: 640px;
  max-height: calc(100vh - 40px);
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 30px 70px rgba(0,0,0,0.5);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.modal-header h2 { margin: 0; font-size: 17px; font-weight: 700; }
.modal-close {
  background: transparent;
  border: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 15px;
  padding: 4px 8px;
}
.modal-close:hover { color: var(--text); }

.modal-tabs {
  display: flex;
  gap: 4px;
  padding: 12px 20px 0;
  flex-shrink: 0;
}
.modal-tab {
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--muted);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
  padding: 8px 10px;
  cursor: pointer;
}
.modal-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
.modal-tab:hover:not(.active) { color: var(--text); }

.modal-search {
  margin: 14px 20px 8px;
  font-family: var(--font-display);
  font-size: 13px;
  background: var(--panel-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 9px 12px;
  flex-shrink: 0;
}
.modal-search:focus { outline: none; border-color: var(--accent); }

.modal-list {
  flex: 1;
  overflow-y: auto;
  padding: 0 20px 10px;
}
.modal-loading, .modal-empty {
  color: var(--muted);
  font-size: 13px;
  padding: 20px 0;
  text-align: center;
}

.area-group { border-bottom: 1px solid var(--border); }
.area-group-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 4px;
  cursor: pointer;
  user-select: none;
}
.area-group-header:hover .area-group-name { color: var(--accent); }
.area-group-arrow { font-size: 10px; color: var(--muted); width: 12px; flex-shrink: 0; }
.area-group-name { font-size: 13px; font-weight: 600; flex: 1; }
.area-group-count { font-family: var(--font-mono); font-size: 11px; color: var(--muted); }
.area-group-children { padding: 2px 0 8px 22px; display: none; }
.area-group-children.expanded { display: block; }
.area-current-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  color: var(--accent);
  background: rgba(232, 135, 59, 0.12);
  border-radius: 4px;
  padding: 1px 6px;
  margin-left: 4px;
  vertical-align: middle;
}
.area-group-children.single {
  padding: 0 0 8px 22px;
}

.area-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
  font-size: 13px;
  cursor: pointer;
}
.area-item input { accent-color: var(--accent); width: 14px; height: 14px; flex-shrink: 0; }
.area-item span { flex: 1; }
.area-item:hover { color: var(--accent); }

.modal-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 20px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}
.modal-summary { font-size: 12px; color: var(--muted); }
#areaApplyBtn:disabled { opacity: 0.35; cursor: not-allowed; }

/* Hover-over-polygon area readout (see bindAreaTooltip in app.js) —
   matches the drawn polygon's own outline color (#e8873b) rather than
   Leaflet's default white/black tooltip styling. */
.area-tooltip {
  background: var(--accent);
  color: #fff;
  border: none;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  padding: 4px 9px;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.18);
}
.area-tooltip::before { border-top-color: var(--accent); }

/* ---- Square draw mode's scale-info tooltip — permanent (not
   hover-only, unlike .area-tooltip above), centered on the square,
   showing side length + what that becomes at a few common 3D-print
   scales ---- */
.square-scale-tooltip-wrap {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
}
.square-scale-tooltip-wrap::before { display: none; } /* no little pointer arrow — this one sits centered ON the shape, not hovering above a point */
.square-scale-tooltip {
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 12px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.18);
  font-family: var(--font-mono);
  min-width: 132px;
}
.scale-side {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  color: var(--text);
  text-align: center;
  margin-bottom: 6px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}
.scale-side-input {
  width: 62px;
  font: inherit;
  font-weight: 700;
  color: var(--text);
  background: var(--panel-2, #fff);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 2px 4px;
  text-align: right;
  cursor: text; /* overrides the "grab" cursor .square-scale-tooltip-wrap's shape underneath uses, now that the shape itself is draggable */
}
.scale-side-input:focus { border-color: var(--accent); outline: none; }
/* Hides the number input's up/down spinner arrows in Chrome/Safari —
   they're fiddly at this size and stepping by 10 one click at a time
   isn't a useful way to reach e.g. 1000 anyway; typing a value directly
   is the actual point of this field. */
.scale-side-input::-webkit-outer-spin-button,
.scale-side-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.scale-side-input { -moz-appearance: textfield; } /* Firefox's equivalent spinner-hiding */
.scale-side-mirror { font-weight: 700; }
.scale-row {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  font-size: 11px;
  color: var(--muted);
  padding: 1px 0;
}
.scale-row.scale-fits {
  color: var(--accent);
  font-weight: 700;
}

/* NL/EN taalknop — zelfde design tokens als de rest van de header. */
.lang-toggle {
  display: flex;
  border-radius: 6px;
  overflow: hidden;
  flex-shrink: 0;
}
.lang-toggle button {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  background: var(--panel-2);
  color: var(--muted);
  border: none;
  padding: 6px 9px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.lang-toggle button.active {
  background: var(--accent);
  color: #1a1206;
}
.lang-toggle button:not(.active):hover {
  color: var(--text);
}

/* ============================================================
   Real scrolling content pages (over-ons.html, and any future
   plain-article page) — distinct from index.html/viewer.html's
   fixed-viewport map layout, where #header-bar's own
   `position: absolute` is fine since nothing there ever scrolls.
   Scoped to body.page-scroll so none of this touches those pages.
   ============================================================ */

/* #header-bar's own look (colors/blur/border/shadow/padding, and its
   @media (max-width: 560px) block above) is untouched — position is
   the only thing that needs to differ here, so the header stays
   visible while the page scrolls instead of scrolling away with it. */
body.page-scroll #header-bar {
  position: fixed;
}

body.page-scroll .content-page {
  /* Clears the fixed header: header's own top (24px) + height (48px)
     + the same ~20px gap #panel uses below it elsewhere. */
  margin: 92px auto 64px;
  max-width: 680px;
  padding: 0 24px;
}

body.page-scroll .content-page h1 {
  font-size: 28px;
  margin: 0 0 8px;
}

body.page-scroll .faq {
  margin-top: 32px;
}

body.page-scroll .faq h2 {
  font-size: 20px;
  font-weight: 700;
  margin: 0 0 20px;
  letter-spacing: -0.01em;
}

body.page-scroll .faq-item {
  padding: 20px 0;
  border-top: 1px solid var(--border);
}
body.page-scroll .faq-item:last-child {
  padding-bottom: 0;
}

body.page-scroll .faq-item h3 {
  font-size: 15px;
  font-weight: 700;
  margin: 0 0 8px;
  color: var(--text);
}

body.page-scroll .faq-item p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--muted);
  margin: 0;
}

@media (max-width: 560px) {
  /* Matches the existing mobile #header-bar override just above
     (top: 12px, smaller bar) — clearance shrinks to match. */
  body.page-scroll .content-page {
    margin-top: 72px;
    padding: 0 16px;
  }
  body.page-scroll .content-page h1 { font-size: 22px; }
}

/* City/example landing pages (voorbeeld-*.html) reuse the same
   body.page-scroll / .content-page layout as over-ons.html — no new
   layout rules needed, just the two extra bits those pages use that
   over-ons.html didn't: a CTA link and in-page section headings. */

body.page-scroll .content-page .cta {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
  background: var(--accent);
  color: #1a1206;
  border-radius: 8px;
  padding: 10px 16px;
  text-decoration: none;
  transition: transform 0.08s ease, opacity 0.15s ease;
  margin: 4px 0 32px;
}
body.page-scroll .content-page .cta:hover {
  transform: translateY(-1px);
}

body.page-scroll .content-page section h2 {
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 10px;
  letter-spacing: -0.01em;
}

body.page-scroll .content-page section p,
body.page-scroll .content-page > p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--muted);
}

body.page-scroll .content-page section {
  margin-bottom: 32px;
}