/* ==========================================================================
   WeRentr Legal Center — Global Stylesheet  (v2 · refined green)
   Brand accent: #2CC093  ·  Modern · Premium · Trustworthy · Enterprise-grade
   ========================================================================== */

/* ---------- Design Tokens ---------- */
:root {
  /* Brand */
  --wr-accent:        #2CC093;
  --wr-accent-dark:   #1f9c76;
  --wr-accent-darker: #15795b;
  --wr-accent-deep:   #0f5f48;
  --wr-accent-tint:   #ecf8f3;
  --wr-accent-tint-2: #f4faf7;
  --wr-accent-ring:   rgba(44, 192, 147, 0.32);

  /* Header gradient (refined, deeper green with depth) */
  --wr-head-a: #2bbf91;
  --wr-head-b: #1ba87d;

  /* Neutrals (cooler, more premium) */
  --wr-ink:        #0c1713;
  --wr-text:       #33433d;
  --wr-text-muted: #687a73;
  --wr-line:       #e6ece9;
  --wr-line-soft:  #eef3f1;
  --wr-bg:         #ffffff;
  --wr-bg-soft:    #f7faf9;

  /* Layout */
  --wr-max:        1180px;
  --wr-header-h:   80px;
  --wr-radius:     16px;
  --wr-radius-sm:  10px;

  /* Type */
  --wr-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
             Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", sans-serif;

  /* Shadow */
  --wr-shadow-sm: 0 1px 2px rgba(12, 23, 19, 0.05);
  --wr-shadow:    0 8px 30px rgba(12, 23, 19, 0.08);
  --wr-shadow-lg: 0 22px 60px rgba(12, 23, 19, 0.14);
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--wr-header-h) + 28px);
  -webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

body {
  margin: 0;
  font-family: var(--wr-font);
  font-size: 16.5px;
  line-height: 1.75;
  color: var(--wr-text);
  background: var(--wr-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
  overflow-x: hidden; /* guard against accidental horizontal scroll on mobile */
}

img { max-width: 100%; display: block; }
a { color: var(--wr-accent-darker); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }

/* Long URLs / emails should wrap, never force horizontal scroll */
.wr-article a, .wr-card a, .wr-table a { word-break: break-word; overflow-wrap: anywhere; }

/* ---------- Accessibility helpers ---------- */
.wr-skip-link {
  position: absolute; left: 16px; top: -60px; z-index: 200;
  background: var(--wr-ink); color: #fff; padding: 10px 16px;
  border-radius: 8px; transition: top 0.2s ease; font-weight: 600;
}
.wr-skip-link:focus { top: 12px; text-decoration: none; }

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

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

/* ---------- Header ---------- */
.wr-header {
  position: sticky; top: 0; z-index: 100;
  background: linear-gradient(180deg, var(--wr-head-a) 0%, var(--wr-head-b) 100%);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.18),
              0 1px 0 rgba(12,23,19,0.04),
              0 10px 30px -18px rgba(12,23,19,0.55);
}
.wr-header__inner {
  max-width: var(--wr-max); margin: 0 auto; height: var(--wr-header-h);
  padding: 0 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.wr-logo {
  display: inline-flex; align-items: center; gap: 11px;
  color: #fff; font-weight: 800; font-size: 19px; letter-spacing: -0.025em;
}
.wr-logo:hover { text-decoration: none; }
.wr-logo__mark {
  width: 32px; height: 32px; border-radius: 9px; flex: none;
  background: #fff; color: var(--wr-accent-darker);
  display: grid; place-items: center; font-weight: 900; font-size: 17px;
  box-shadow: 0 3px 8px rgba(12,23,19,0.22), inset 0 0 0 1px rgba(12,23,19,0.04);
}
.wr-logo__dot { color: rgba(255,255,255,0.66); }

/* Image logo (full lockup) — header (green) + footer (dark) both want a light logo */
.wr-logo__img { display: block; height: 48px; width: auto; }
.wr-footer .wr-logo__img { height: 40px; }
@media (max-width: 480px) { .wr-logo__img { height: 38px; } }

/* Text wordmark (multi-color, matches the iOS splash treatment) — header on green */
.wr-wordmark {
  font-weight: 900; font-size: 27px; line-height: 1; letter-spacing: -0.04em; white-space: nowrap;
}
.wr-wordmark__we    { color: #003D35; } /* deep green */
.wr-wordmark__rentr { color: #FDFCF5; } /* cream */
.wr-wordmark__dot   { color: #003D35; } /* deep green */
/* Footer sits on dark ink — flip to the iOS dark-splash colors */
.wr-footer .wr-wordmark { font-size: 24px; }
.wr-footer .wr-wordmark__we,
.wr-footer .wr-wordmark__dot { color: #2CC093; } /* accent green */
.wr-footer .wr-wordmark__rentr { color: #FDFCF5; } /* cream */
@media (max-width: 480px) { .wr-wordmark { font-size: 22px; } }

.wr-nav { display: flex; align-items: center; gap: 2px; }
.wr-nav a {
  color: rgba(255,255,255,0.92); font-weight: 600; font-size: 14.5px;
  padding: 8px 13px; border-radius: 8px; white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease;
}
.wr-nav a:hover { background: rgba(255,255,255,0.16); color: #fff; text-decoration: none; }
.wr-nav a[aria-current="page"] {
  background: #fff; color: var(--wr-accent-darker); font-weight: 700;
  box-shadow: 0 2px 8px rgba(12,23,19,0.16);
}

.wr-nav-toggle {
  display: none; background: rgba(255,255,255,0.16); border: 0; color: #fff;
  width: 42px; height: 42px; border-radius: 10px; cursor: pointer; flex: none;
  align-items: center; justify-content: center;
}
.wr-nav-toggle svg { width: 22px; height: 22px; }

/* ---------- Hero / page header (clean white, accent used sparingly) ---------- */
.wr-hero { background: #fff; border-bottom: 1px solid var(--wr-line); }
.wr-hero__inner { max-width: var(--wr-max); margin: 0 auto; padding: 64px 24px 46px; }
.wr-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--wr-accent-darker); background: var(--wr-accent-tint);
  padding: 7px 13px; border-radius: 999px; margin-bottom: 22px;
}
.wr-eyebrow::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--wr-accent); box-shadow: 0 0 0 3px var(--wr-accent-ring);
}
.wr-hero h1 {
  margin: 0 0 14px; font-size: clamp(2.1rem, 4.4vw, 3.1rem); line-height: 1.08;
  letter-spacing: -0.035em; color: var(--wr-ink); font-weight: 800; overflow-wrap: break-word;
}
.wr-hero__lead { margin: 0; max-width: 720px; font-size: 1.12rem; line-height: 1.65; color: var(--wr-text-muted); }
.wr-hero__meta {
  margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--wr-line-soft);
  display: flex; flex-wrap: wrap; gap: 8px 28px; font-size: 0.9rem; color: var(--wr-text-muted);
}
.wr-hero__meta strong { color: var(--wr-text); font-weight: 700; }

/* ---------- Layout: content + TOC ---------- */
.wr-shell {
  max-width: var(--wr-max); margin: 0 auto; padding: 52px 24px 88px;
  display: grid; grid-template-columns: 264px minmax(0, 1fr); gap: 56px; align-items: start;
}

/* TOC */
.wr-toc {
  position: sticky; top: calc(var(--wr-header-h) + 28px); align-self: start;
  max-height: calc(100vh - var(--wr-header-h) - 56px); overflow-y: auto; padding-right: 6px;
}
.wr-toc__title {
  font-size: 11px; font-weight: 800; letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--wr-text-muted); margin: 0 0 14px;
}
.wr-toc ol { list-style: none; margin: 0; padding: 0; }
.wr-toc li { margin: 0; }
.wr-toc a {
  display: block; padding: 7px 14px; border-left: 2px solid var(--wr-line);
  color: var(--wr-text-muted); font-size: 13.5px; line-height: 1.45;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.wr-toc a:hover { color: var(--wr-accent-darker); text-decoration: none; background: var(--wr-bg-soft); }
.wr-toc a.is-active {
  color: var(--wr-accent-deep); border-left-color: var(--wr-accent);
  background: var(--wr-accent-tint); font-weight: 600;
}

/* Collapsible "On this page": tap-to-toggle on mobile, always-open static heading on desktop */
.wr-toc__d > summary.wr-toc__title {
  cursor: pointer; list-style: none; user-select: none;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.wr-toc__d > summary.wr-toc__title::-webkit-details-marker { display: none; }
.wr-toc__d > summary.wr-toc__title::after {
  content: ""; width: 8px; height: 8px; flex: none; margin-bottom: 2px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg); transition: transform 0.25s ease;
}
.wr-toc__d[open] > summary.wr-toc__title::after { transform: rotate(-135deg); margin: 3px 0 0; }

@media (min-width: 961px) {
  .wr-toc__d > nav { display: block !important; }   /* always expanded on desktop */
  .wr-toc__d > summary.wr-toc__title { cursor: default; pointer-events: none; }
  .wr-toc__d > summary.wr-toc__title::after { display: none; }
}

/* ---------- Article ---------- */
.wr-article { min-width: 0; max-width: 760px; }

/* Editorial section rhythm: hairline divider between sections */
.wr-article > section {
  padding-top: 44px; margin-top: 44px; border-top: 1px solid var(--wr-line-soft);
  scroll-margin-top: calc(var(--wr-header-h) + 28px);
}
.wr-article > section:first-of-type { padding-top: 0; margin-top: 0; border-top: 0; }

.wr-article h2 {
  margin: 0 0 18px; font-size: 1.55rem; line-height: 1.25; letter-spacing: -0.025em;
  color: var(--wr-ink); font-weight: 800;
}
.wr-article h3 { margin: 30px 0 10px; font-size: 1.18rem; letter-spacing: -0.01em; color: var(--wr-ink); font-weight: 700; }
.wr-article h4 { margin: 22px 0 8px; font-size: 1.02rem; color: var(--wr-ink); font-weight: 700; }
.wr-article p { margin: 0 0 16px; }
.wr-article ul, .wr-article ol { margin: 0 0 18px; padding-left: 22px; }
.wr-article li { margin: 0 0 9px; }
.wr-article li::marker { color: var(--wr-accent-dark); }
.wr-article strong { color: var(--wr-ink); font-weight: 700; }

/* Section number as a refined chip */
.wr-article h2 .wr-num {
  display: inline-grid; place-items: center; min-width: 1.9em; height: 1.9em; padding: 0 0.4em;
  margin-right: 0.6em; border-radius: 8px; font-size: 0.78em; font-weight: 800;
  color: var(--wr-accent-deep); background: var(--wr-accent-tint);
  font-variant-numeric: tabular-nums; vertical-align: 0.12em;
}
.wr-article h3 .wr-num { color: var(--wr-accent-dark); font-weight: 800; margin-right: 0.45em; font-variant-numeric: tabular-nums; }

/* Callout / disclaimer box */
.wr-callout {
  position: relative; border: 1px solid var(--wr-line); background: var(--wr-bg-soft);
  border-radius: var(--wr-radius); padding: 20px 22px; margin: 0 0 24px;
}
.wr-callout--accent {
  border-color: rgba(44,192,147,0.35); background: var(--wr-accent-tint);
  border-left: 4px solid var(--wr-accent);
}
.wr-callout--warn { border-color: #f0dca8; background: #fdf8ea; border-left: 4px solid #e3b341; }
.wr-callout__title { font-weight: 800; color: var(--wr-ink); margin: 0 0 6px; font-size: 0.98rem; letter-spacing: -0.01em; }
.wr-callout p:last-child, .wr-callout ul:last-child { margin-bottom: 0; }

/* Table */
.wr-table-wrap {
  overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 0 22px;
  border: 1px solid var(--wr-line); border-radius: var(--wr-radius); box-shadow: var(--wr-shadow-sm);
}
table.wr-table { width: 100%; border-collapse: collapse; font-size: 0.94rem; min-width: 520px; }
.wr-table th, .wr-table td { text-align: left; padding: 13px 18px; border-bottom: 1px solid var(--wr-line-soft); vertical-align: top; }
.wr-table thead th { background: var(--wr-bg-soft); color: var(--wr-ink); font-weight: 700; border-bottom: 1px solid var(--wr-line); }
.wr-table tbody tr:hover { background: var(--wr-accent-tint-2); }
.wr-table tr:last-child td { border-bottom: 0; }

/* Definition list */
.wr-defs { margin: 0 0 18px; }
.wr-defs dt { font-weight: 700; color: var(--wr-ink); margin-top: 16px; }
.wr-defs dd { margin: 3px 0 0; padding-left: 0; color: var(--wr-text); }

/* Back-to-top */
.wr-totop { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 0.85rem; color: var(--wr-text-muted); }

/* Contact cards */
.wr-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin: 0 0 24px; }
.wr-card {
  border: 1px solid var(--wr-line); border-radius: var(--wr-radius); padding: 22px; background: #fff;
  box-shadow: var(--wr-shadow-sm); transition: box-shadow 0.18s ease, transform 0.18s ease, border-color 0.18s ease;
}
.wr-card:hover { box-shadow: var(--wr-shadow); transform: translateY(-2px); border-color: rgba(44,192,147,0.4); }
.wr-card h3 { margin: 0 0 6px; font-size: 1.05rem; }
.wr-card p { margin: 0 0 4px; color: var(--wr-text-muted); font-size: 0.94rem; }
.wr-card a { font-weight: 600; }

/* Contact form */
.wr-form { display: grid; gap: 18px; max-width: 640px; }
.wr-field { display: grid; gap: 7px; }
.wr-field label { font-weight: 600; color: var(--wr-ink); font-size: 0.94rem; }
.wr-field .req { color: #c0392b; }
.wr-field input, .wr-field select, .wr-field textarea {
  font: inherit; font-size: 16px; padding: 12px 14px; border: 1px solid var(--wr-line);
  border-radius: var(--wr-radius-sm); background: #fff; color: var(--wr-text); width: 100%;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.wr-field textarea { min-height: 140px; resize: vertical; }
/* Match the select's height to the text inputs + give it a clean single chevron */
.wr-field input, .wr-field select { height: 50px; }
.wr-field select {
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  padding-right: 42px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235b6f68' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 16px;
}
.wr-field input:focus, .wr-field select:focus, .wr-field textarea:focus {
  outline: none; border-color: var(--wr-accent); box-shadow: 0 0 0 3px var(--wr-accent-ring);
}
.wr-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: linear-gradient(180deg, var(--wr-head-a), var(--wr-head-b)); color: #fff;
  font-weight: 700; font-size: 1rem; border: 0; border-radius: var(--wr-radius-sm);
  padding: 13px 26px; cursor: pointer;
  box-shadow: 0 6px 16px -6px rgba(27,168,125,0.6);
  transition: filter 0.15s ease, transform 0.05s ease, box-shadow 0.15s ease;
}
.wr-btn:hover { filter: brightness(1.04); text-decoration: none; box-shadow: 0 10px 22px -8px rgba(27,168,125,0.7); }
.wr-btn:active { transform: translateY(1px); }
.wr-btn:disabled {
  cursor: wait; opacity: 0.72; filter: grayscale(0.2); box-shadow: none;
}
.wr-honeypot { display: none !important; }
.wr-form-status {
  border: 1px solid var(--wr-line); border-radius: var(--wr-radius-sm);
  padding: 12px 14px; font-size: 0.94rem; line-height: 1.5;
}
.wr-form-status--info {
  background: var(--wr-bg-soft); color: var(--wr-text);
}
.wr-form-status--success {
  background: var(--wr-accent-tint); border-color: rgba(44,192,147,0.38); color: var(--wr-accent-deep);
}
.wr-form-status--error {
  background: #fff3f1; border-color: #f2c1bb; color: #9f2f24;
}

/* FAQ */
.wr-faq { border: 1px solid var(--wr-line); border-radius: var(--wr-radius); overflow: hidden; margin: 0 0 24px; box-shadow: var(--wr-shadow-sm); }
.wr-faq details { border-bottom: 1px solid var(--wr-line-soft); }
.wr-faq details:last-child { border-bottom: 0; }
.wr-faq summary {
  cursor: pointer; padding: 17px 20px; font-weight: 700; color: var(--wr-ink);
  list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 12px;
  transition: background 0.15s ease;
}
.wr-faq summary:hover { background: var(--wr-bg-soft); }
.wr-faq summary::-webkit-details-marker { display: none; }
.wr-faq summary::after { content: "+"; font-size: 1.4rem; color: var(--wr-accent-dark); font-weight: 400; line-height: 1; flex: none; }
.wr-faq details[open] summary::after { content: "\2013"; }
.wr-faq .wr-faq__body { padding: 0 20px 18px; color: var(--wr-text-muted); }
.wr-faq .wr-faq__body p:last-child { margin-bottom: 0; }

/* ---------- Footer ---------- */
.wr-footer { background: var(--wr-ink); color: #c2d2cb; margin-top: auto; }
.wr-footer__inner {
  max-width: var(--wr-max); margin: 0 auto; padding: 56px 24px 40px;
  display: grid; grid-template-columns: 1.4fr 1fr; gap: 40px;
}
.wr-footer__brand .wr-logo { color: #fff; }
.wr-footer__brand .wr-logo__mark {
  background: linear-gradient(180deg, var(--wr-head-a), var(--wr-head-b)); color: #fff; box-shadow: none;
}
.wr-footer__tag { margin: 16px 0 0; max-width: 380px; font-size: 0.92rem; line-height: 1.65; color: #93a89f; }
.wr-footer__nav h4 { margin: 0 0 16px; color: #fff; font-size: 0.78rem; letter-spacing: 0.13em; text-transform: uppercase; }
.wr-footer__nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.wr-footer__nav a { color: #c2d2cb; font-size: 0.94rem; }
.wr-footer__nav a:hover { color: #fff; }
.wr-footer__bottom { border-top: 1px solid rgba(255,255,255,0.09); }
.wr-footer__bottom-inner {
  max-width: var(--wr-max); margin: 0 auto; padding: 22px 24px;
  display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: space-between; align-items: center;
  font-size: 0.85rem; color: #809a90;
}

/* Sticky-footer frame */
.wr-page { display: flex; flex-direction: column; min-height: 100vh; }

/* ==========================================================================
   RESPONSIVE  —  mobile-first, solid down to 320px
   Breakpoints: 1024 (tablet TOC), 768 (stack/menu), 480 (small phones)
   ========================================================================== */

/* Tablet / small laptop: tighten the two-column gap */
@media (max-width: 1024px) {
  .wr-shell { grid-template-columns: 232px minmax(0, 1fr); gap: 40px; }
}

/* TOC collapses above content; single column */
@media (max-width: 960px) {
  .wr-shell { grid-template-columns: 1fr; gap: 0; }
  .wr-toc {
    position: static; max-height: none; margin-bottom: 32px; padding: 0;
    border: 1px solid var(--wr-line); border-radius: var(--wr-radius);
    background: var(--wr-bg-soft); overflow: hidden;
  }
  /* Collapsed = a clean, compact tap-bar; the summary provides the padding */
  .wr-toc__d > summary.wr-toc__title {
    margin: 0; padding: 15px 18px; font-size: 12px; color: var(--wr-text);
  }
  .wr-toc__d[open] > summary.wr-toc__title { border-bottom: 1px solid var(--wr-line); }
  .wr-toc__d > nav { padding: 12px 18px 14px; }
  .wr-toc ol { columns: 2; column-gap: 24px; } /* compact two-up index on tablets */
  .wr-toc a { break-inside: avoid; }
  .wr-article { max-width: none; }
}

/* Phones: slide-down nav menu, single-column index, comfortable spacing */
@media (max-width: 768px) {
  body { font-size: 16px; line-height: 1.7; }
  .wr-header__inner { padding: 0 16px; }
  /* Mobile menu: smoothly expands DOWN from the bottom of the header (no overlap, slower) */
  .wr-nav {
    position: fixed; inset: var(--wr-header-h) 0 auto 0; flex-direction: column; align-items: stretch;
    gap: 0; background: var(--wr-head-b); padding: 0 10px;
    overflow: hidden; max-height: 0;
    transition: max-height 0.42s cubic-bezier(0.22, 1, 0.36, 1),
                padding   0.42s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .wr-nav.is-open {
    max-height: 22rem; padding: 8px 10px 14px; overflow-y: auto;
    box-shadow: var(--wr-shadow-lg);
  }
  .wr-nav a { padding: 14px 16px; border-radius: 8px; font-size: 16px; }
  .wr-nav a[aria-current="page"] { box-shadow: none; }
  .wr-nav-toggle { display: inline-flex; }

  .wr-hero__inner { padding: 40px 16px 30px; }
  .wr-hero__meta { gap: 6px 0; flex-direction: column; }

  .wr-shell { padding: 32px 16px 56px; }
  .wr-toc ol { columns: 1; }
  .wr-article > section { padding-top: 32px; margin-top: 32px; }
  .wr-article h2 { font-size: 1.4rem; }
  .wr-article h3 { font-size: 1.1rem; }

  .wr-cards { grid-template-columns: 1fr; }
  .wr-footer__inner { grid-template-columns: 1fr; gap: 30px; padding: 44px 16px 32px; }
  .wr-footer__bottom-inner { padding: 18px 16px; }
}

/* Small phones (≤480px) and very small (≤360px): protect from overflow */
@media (max-width: 480px) {
  :root { --wr-header-h: 66px; }
  .wr-logo { font-size: 17px; gap: 9px; }
  .wr-logo__mark { width: 30px; height: 30px; font-size: 16px; }
  .wr-hero h1 { font-size: 1.85rem; letter-spacing: -0.03em; }
  .wr-hero__lead { font-size: 1.02rem; }
  .wr-eyebrow { font-size: 11px; margin-bottom: 18px; }
  .wr-article h2 .wr-num { min-width: 1.7em; height: 1.7em; }
  .wr-callout, .wr-card { padding: 16px 16px; }
  .wr-faq summary { padding: 15px 16px; }
  .wr-faq .wr-faq__body { padding: 0 16px 16px; }
  .wr-btn { width: 100%; } /* full-width tap target on small phones */
}

@media print {
  .wr-header, .wr-nav-toggle, .wr-toc, .wr-footer, .wr-skip-link { display: none !important; }
  body { font-size: 12pt; color: #000; }
  .wr-shell { display: block; padding: 0; }
  .wr-article > section { border-top: 0; }
  a { color: #000; text-decoration: underline; }
}

/* ==========================================================================
   DARK SCHEME — follows the device preference (no manual toggle).
   Token-level: redefine the design tokens, then patch the few components
   that hard-code light values. The green header, green buttons, and the
   dark footer are fixed brand surfaces and stay the same in both themes.
   Values match the homepage dark scheme in home.css — keep them in sync.
   ========================================================================== */
@media (prefers-color-scheme: dark) {
  :root {
    --wr-ink:        #f2f7f4;
    --wr-text:       #c9d6d0;
    --wr-text-muted: #8fa39a;
    --wr-line:       #1d2c26;
    --wr-line-soft:  #17241f;
    --wr-bg:         #0a1411;
    --wr-bg-soft:    #0f1b17;
    --wr-accent-tint:   #10241d;
    --wr-accent-tint-2: #0d1e18;
    --wr-accent-darker: #45d3a8;
    --wr-accent-deep:   #6fdfbd;
    --wr-shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
    --wr-shadow:    0 8px 30px rgba(0,0,0,0.45);
    --wr-shadow-lg: 0 22px 60px rgba(0,0,0,0.6);
  }

  /* Fixed dark surfaces that referenced the (now light) ink token */
  .wr-footer    { background: #0a1310; }
  .wr-skip-link { background: #0a1310; }

  /* Components that hard-code light backgrounds */
  .wr-hero { background: var(--wr-bg); }
  .wr-card { background: #101d18; }
  .wr-field input, .wr-field select, .wr-field textarea { background: #101d18; }

  /* Warning callout: keep the amber identity on a dark ground */
  .wr-callout--warn { background: #221b0c; border-color: #4a3d1a; border-left-color: #e3b341; }

  /* Form error status */
  .wr-form-status--error { background: #2a1512; border-color: #5c2a24; color: #f0a89e; }
}