/* =========================================================================
   The Oaxacan Coast Guide — marketing site
   Light theme only. Mobile-first. Plain CSS, no build step.
   ========================================================================= */

/* Self-hosted Koulen with the accented capitals Google Fonts' Koulen lacks
   (Á É Í Ó Ú Ñ Ü). This is the SAME patched font the app ships — converted to
   WOFF2 by build/make-koulen.py from android/.../koulen_regular.ttf (accents
   designed in tools/patch-koulen-accents.py). Figtree still comes from Google
   Fonts. Display text is uppercased in CSS, so caps-only coverage is enough. */
@font-face {
  font-family: "Koulen";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  /* ?v= cache-buster: bump this whenever the font file changes so browsers
     (which cache fonts aggressively) fetch the new one instead of a stale copy. */
  src: url("./assets/fonts/koulen-coast.woff2?v=6") format("woff2");
}

:root {
  /* Brand palette */
  --coral:  #eb565e;   /* primary / CTAs */
  --ocean:  #115D8C;   /* secondary */
  --ink:    #301F21;   /* text */
  --muted:  #888278;
  --card:   #F7F7F7;
  --border: #E5E5EA;
  --white:  #FFFFFF;
  --footer: #0D324A;   /* dark footer */

  /* Category accents (subtle touches) */
  --cat-food:       #D86A20;
  --cat-beaches:    #115D8C;
  --cat-activities: #3A6A38;
  --cat-nightlife:  #6A1850;
  --cat-services:   #888278;
  --cat-stay:       #F25E6B;

  /* Derived */
  --coral-dark: #d3444c;
  --ocean-dark: #0d4a70;

  /* Type */
  --font-display: "Koulen", "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-body:    "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Layout */
  --maxw: 1120px;
  --gap: clamp(1rem, 3vw, 2rem);
  --radius: 16px;
  --radius-sm: 12px;
  --shadow-sm: 0 1px 2px rgba(48, 31, 33, 0.06), 0 2px 8px rgba(48, 31, 33, 0.05);
  --shadow-md: 0 6px 24px rgba(48, 31, 33, 0.10);
  --shadow-lg: 0 20px 60px rgba(48, 31, 33, 0.18);
  --header-h: 64px;
}

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--ink);
  background: var(--white);
  line-height: 1.6;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg, picture { max-width: 100%; display: block; }
img { height: auto; }

a { color: var(--ocean); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3 { margin: 0 0 0.4em; line-height: 1.05; }

/* Koulen display headings — uppercase, like the app */
.display {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 1.02;
}

p { margin: 0 0 1rem; }
ul { margin: 0 0 1rem; padding-left: 1.2rem; }

/* ---------- Accessibility ---------- */
:focus-visible {
  outline: 3px solid var(--ocean);
  outline-offset: 2px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  left: 0; top: 0;
  transform: translateY(-120%);
  background: var(--coral);
  color: var(--white);
  padding: 0.7rem 1.1rem;
  border-radius: 0 0 var(--radius-sm) 0;
  z-index: 1000;
  font-weight: 600;
  transition: transform 0.15s ease;
}
.skip-link:focus { transform: translateY(0); text-decoration: none; }

.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;
}

/* ---------- Layout helpers ---------- */
.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: clamp(1.1rem, 5vw, 2.5rem);
}

.section { padding-block: clamp(3.5rem, 8vw, 6.5rem); }
.section--tint { background: linear-gradient(180deg, #fbfbfa, var(--card)); }

[id] { scroll-margin-top: calc(var(--header-h) + 16px); }

.eyebrow {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--coral);
  font-size: 0.95rem;
  margin: 0 0 0.8rem;
}

.section-head { max-width: 46ch; margin-bottom: 2.5rem; }
.section-head.center { max-width: 60ch; margin-inline: auto; text-align: center; }

h2.display { font-size: clamp(2rem, 5.5vw, 3.4rem); }
h3.display { font-size: clamp(1.15rem, 2.4vw, 1.5rem); }

.lead { font-size: 1.12rem; color: #4a3c3e; }
.muted { color: var(--muted); }

/* ---------- Coast schematic motif (six dots W→E) ---------- */
.coast-motif {
  display: flex;
  align-items: center;
  gap: 0;
  width: clamp(160px, 40%, 260px);
  height: 14px;
  margin: 0 0 1.4rem;
}
.section-head.center .coast-motif { margin-inline: auto; }
.coast-motif .line {
  flex: 1;
  height: 1px;
  background: #aaa;
}
.coast-motif .dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--ocean);
  flex: none;
}
/* Endpoint markers: coral map pins (W + E ends of the schematic). Same mask
   technique as .feature .ficon .ficon-glyph, tinted coral. translateY floats
   the pin down so it sits on top of the line; z-index keeps it above the
   lines (which paint after it in DOM order). */
.coast-motif .dot:first-child,
.coast-motif .dot:last-child {
  position: relative;
  z-index: 1;
  width: 30px;
  height: 30px;
  border-radius: 0;
  background-color: var(--coral);
  -webkit-mask: url("./assets/ic_map_pin.svg") center / contain no-repeat;
          mask: url("./assets/ic_map_pin.svg") center / contain no-repeat;
  transform: translateY(-18%);
}
/* The pin's visible tip sits at the horizontal centre of its 30px box, so the
   adjacent line would otherwise start ~15px (half the box) shy of the tip.
   Pull the two endpoint-adjacent lines back under their pin so the schematic
   line runs to the bottom of the pin. (Dots and lines are both spans, so the
   line is targeted by child position: 2nd child = first line after the W pin,
   2nd-to-last child = last line before the E pin.) */
.coast-motif .line:nth-child(2)      { margin-left: -15px; }
.coast-motif .line:nth-last-child(2) { margin-right: -15px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1rem;
  padding: 0.8rem 1.4rem;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
  text-decoration: none;
  line-height: 1;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }

.btn--primary { background: var(--coral); color: var(--white); }
.btn--primary:hover { background: var(--coral-dark); color: var(--white); }

.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--border);
}
.btn--ghost:hover { background: var(--card); color: var(--ink); }

.btn--ocean { background: var(--ocean); color: var(--white); }
.btn--ocean:hover { background: var(--ocean-dark); color: var(--white); }

/* ---------- Store badges (coming soon) ---------- */
.store-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin-top: 1.6rem;
}
.store-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  background: var(--ink);
  color: var(--white);
  border-radius: 12px;
  padding: 0.6rem 1.1rem;
  border: 1px solid rgba(255,255,255,0.08);
  opacity: 0.72;
  cursor: not-allowed;
  user-select: none;
  min-width: 200px;
}
.store-badge svg { flex: none; fill: currentColor; }
.store-badge .sb-text { display: flex; flex-direction: column; line-height: 1.15; text-align: left; }
.store-badge .sb-top { font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.8; }
.store-badge .sb-bottom { font-size: 1.05rem; font-weight: 600; }

/* ============================== HEADER ============================== */
/* At the very top of the page the header is tall with a 100px logo and a
   TRANSPARENT background, so the hero tint (which extends up behind it via
   body::before) shows through and it reads as part of the first section — no
   distinct colour band. Once scrolled it smoothly shrinks and gains a white
   background + dropshadow, sticking to the top. `.scrolled` is toggled by
   main.js. Links stay vertically centred on the logo in both states. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: transparent;
  transition: background .25s ease, box-shadow .25s ease;
}
.site-header.scrolled {
  background: var(--white);
  box-shadow: var(--shadow-md);      /* dropshadow appears once scrolled */
}
.header-inner {
  height: 128px;                     /* tall at the top of the page */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  transition: height .25s ease;
}
.site-header.scrolled .header-inner { height: var(--header-h); }
.brand { display: inline-flex; align-items: center; }
.brand img { height: 100px; width: auto; transition: height .25s ease; }
.site-header.scrolled .brand img { height: 50px; }
/* Keep the header compact on mobile (the menu drawer opens from --header-h),
   so the enlarge-at-top effect is desktop-only. */
@media (max-width: 820px) {
  .header-inner { height: var(--header-h); }
  .brand img { height: 42px; }
}

.nav { display: flex; align-items: center; gap: 1.5rem; }
.nav-links { display: flex; align-items: center; gap: 1.4rem; list-style: none; margin: 0; padding: 0; }
.nav-links a {
  color: var(--ink);
  font-weight: 500;
  font-size: 0.97rem;
  padding: 0.4rem 0;
  position: relative;
}
.nav-links a:hover { color: var(--coral); text-decoration: none; }
.nav-links a[aria-current="true"] { color: var(--coral); }
.nav-links a[aria-current="true"]::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 2px;
  background: var(--coral);
  border-radius: 2px;
}

.nav-cta { padding: 0.55rem 1.1rem; }

/* Hamburger */
.nav-toggle {
  display: none;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 10px;
  width: 44px; height: 44px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--ink);
}
.nav-toggle svg { width: 22px; height: 22px; }
.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded="true"] .icon-open { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: block; }

@media (max-width: 820px) {
  .nav-toggle { display: inline-flex; }
  .nav {
    position: fixed;
    inset: var(--header-h) 0 auto 0;
    background: var(--white);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-md);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0.5rem 0 1.2rem;
    transform: translateY(-130%);
    transition: transform 0.22s ease;
    visibility: hidden;
  }
  .nav.open { transform: translateY(0); visibility: visible; }
  .nav-links {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding-inline: clamp(1.1rem, 5vw, 2.5rem);
  }
  .nav-links li { border-bottom: 1px solid var(--border); }
  .nav-links a { display: block; padding: 0.95rem 0; font-size: 1.05rem; }
  .nav-cta {
    margin: 1rem clamp(1.1rem, 5vw, 2.5rem) 0;
    text-align: center;
  }
}

/* ============================== HERO ============================== */
.hero {
  padding-top: clamp(2.5rem, 6vw, 4.5rem);
  padding-bottom: clamp(2.5rem, 6vw, 4.5rem);
  /* Background moved to body::before so the same tint spans BEHIND the
     transparent header too — the sticky nav then blends into the first
     section with no colour band at the header/hero seam. */
}
/* Page-top hero tint, behind all content (incl. the transparent header). It
   fades to transparent well before the second section, whose own opaque
   background covers whatever remains. */
body::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 720px;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(120% 90% at 80% -10%, rgba(17,93,140,0.07), transparent 60%),
    radial-gradient(90% 80% at 0% 0%, rgba(235,86,94,0.06), transparent 55%);
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

.hero h1.display {
  font-size: clamp(2.6rem, 8vw, 5rem);
  margin-bottom: 1.1rem;
}
.hero .subhead {
  font-size: clamp(1.05rem, 1.6vw, 1.22rem);
  color: #4a3c3e;
  max-width: 34ch;
}

/* Device */
.device-wrap {
  position: relative;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.device-wrap .device {
  width: clamp(220px, 70vw, 340px);
  filter: drop-shadow(0 28px 50px rgba(48,31,33,0.28));
  position: relative;
  z-index: 2;
}
/* Angled phone behind (a second screenshot) */
.device-wrap .device--back {
  position: absolute;
  z-index: 1;
  width: clamp(190px, 60vw, 330px);
  transform: rotate(-8deg) translateX(-33%);
  filter: drop-shadow(0 20px 40px rgba(48,31,33,0.20)) saturate(0.9);
}

@media (max-width:1024px) {
  .hero-grid { grid-template-columns: 1fr 0.5fr; }
  .hero h1.display { font-size: clamp(2.6rem, 8vw, 4rem); }
  .device-wrap .device { max-width: 85%; }
  .device-wrap .device--back { transform: rotate(-6deg) translateX(-23%); }
}

@media (max-width: 820px) {
  .hero { padding-top: 30px; }
  .hero-grid { grid-template-columns: 1fr; text-align: center; }
  .hero .subhead { margin-inline: auto; }
  .hero .store-badges { justify-content: center; }
  .hero .coast-motif { margin-inline: auto; }
  .device-wrap { order: -1; margin-bottom: 6px; justify-content: center; }
  .device-wrap .device { max-width: 55vw; }
  .device-wrap .device--back { display: none; }
}

/* ============================== COAST (towns) ============================== */
.town-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(0.8rem, 2vw, 1.2rem);
}
@media (min-width: 720px) {
  .town-grid { grid-template-columns: repeat(3, 1fr); }
}
.town-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.3rem 1.3rem 1.4rem;
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.town-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--ocean);
}
.town-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.town-card .town-name {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: clamp(1.2rem, 2.6vw, 1.55rem);
  letter-spacing: 0.01em;
  margin: 0 0 0.3rem;
  color: var(--ink);
}
.town-card .town-tag { margin: 0; color: var(--muted); font-size: 0.95rem; line-height: 1.4; }

.town-caption { text-align: center; margin-top: 1.6rem; font-style: italic; color: var(--muted); }

/* ============================== FEATURES ============================== */
.feature-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1rem, 2.5vw, 1.6rem);
}
@media (min-width: 640px) { .feature-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .feature-grid { grid-template-columns: repeat(3, 1fr); } }

.feature {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.6rem;
  box-shadow: var(--shadow-sm);
}
.feature .ficon {
  width: 44px; height: 44px;
  border-radius: 12px;
  display: grid; place-items: center;
  color: var(--ocean);
  margin-bottom: 12px;
}
.feature .ficon .ficon-glyph {
  width: 40px;
  height: 40px;
  background-color: var(--ocean);
  -webkit-mask: var(--icon) center / contain no-repeat;
          mask: var(--icon) center / contain no-repeat;
}
.feature h3 { font-size: 1.18rem; font-family: var(--font-body); font-weight: 600; text-transform: none; letter-spacing: 0; margin-bottom: 0.5rem; line-height: 1.25; }
.feature p { margin: 0; color: #4a3c3e; font-size: 14px; }

/* Two-column feature layout: phone left, content right (mirrors the hero, flipped) */
.feature-layout {
  display: grid;
  grid-template-columns: 0.65fr 1.35fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
.feature-layout .feature-grid { grid-template-columns: repeat(2, 1fr); }

@media (max-width: 900px) {
  .feature-layout { grid-template-columns: 1fr; }
  .feature-layout .feature-phone { order: -1; }   /* phone above content on mobile, like the hero */
}
@media (max-width: 560px) {
  .feature-layout .feature-grid { grid-template-columns: 1fr; }
}

/* Shared phone screenshot (features + transport) — matches the hero device look */
.phone-shot {
  display: block;
  width: clamp(220px, 60vw, 320px);
  height: auto;
  margin-inline: auto;
  filter: drop-shadow(0 28px 50px rgba(48,31,33,0.28));
}

/* ============================== TRANSPORT ============================== */
.transport {
  display: grid;
  grid-template-columns: 1.35fr 0.65fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
/* Cap the copy at the same measure the section headers use (46ch) so the text
   stops well short of the image instead of running the full column width. */
.transport-copy { max-width: 46ch; }
@media (max-width: 820px) { .transport { grid-template-columns: 1fr; } }

.pullquote {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: clamp(1.4rem, 3.2vw, 2.1rem);
  line-height: 1.1;
  color: var(--ocean);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 2rem 1.8rem;
  box-shadow: var(--shadow-sm);
  margin: 0;
}
.pullquote .coast-motif { width: 100%; margin-top: 1.4rem; margin-bottom: 0; }

/* ============================== PARTNERS ============================== */
.partner-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1rem, 3vw, 1.8rem);
}
@media (max-width: 720px) { .partner-grid { grid-template-columns: 1fr; } }
.partner-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 2rem;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
}
.partner-card h3 { font-family: var(--font-body); font-weight: 600; text-transform: none; letter-spacing: 0; font-size: 1.35rem; }
.partner-card p { color: #4a3c3e; flex: 1; }
.partner-card .btn { align-self: flex-start; margin-top: 0.6rem; }

/* ============================== DOWNLOAD ============================== */
.download-cta { text-align: center; }
.download-cta .store-badges { justify-content: center; }

/* ============================== FOOTER ============================== */
.site-footer {
  background: var(--footer);
  color: rgba(255,255,255,0.78);
  padding-block: clamp(3rem, 6vw, 4.5rem) 1.5rem;
}
.site-footer a { color: rgba(255,255,255,0.78); }
.site-footer a:hover { color: var(--white); }
.footer-top {
  display: grid;
  grid-template-columns: 1.4fr repeat(4, 1fr);
  gap: clamp(1.5rem, 4vw, 2.5rem);
  padding-bottom: 2.5rem;
  border-bottom: 1px solid rgba(255,255,255,0.12);
}
@media (max-width: 900px) { .footer-top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .footer-top { grid-template-columns: 1fr; } }

.footer-brand { text-align: center; }
.footer-brand img { height: auto; width: 130px; display: inline; }
.footer-brand p { max-width: 28ch; margin-inline: auto; padding-top: 8px; color: rgba(255,255,255,0.62); font-size: 0.95rem; }

.footer-col h4 {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.9rem;
  color: var(--white);
  margin: 0 0 0.9rem;
}
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col li { margin-bottom: 0.55rem; }
.footer-col a { font-size: 0.95rem; }

.footer-affiliate {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.55);
  max-width: 70ch;
  margin: 1.8rem 0 0;
}
.footer-affiliate a { color: rgba(255,255,255,0.78); text-decoration: underline; }

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  padding-top: 1.5rem;
  font-size: 0.88rem;
  color: rgba(255,255,255,0.55);
}
.curator-login {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 999px;
  padding: 0.45rem 1rem;
  color: rgba(255,255,255,0.85);
  font-weight: 500;
}
.curator-login:hover { background: rgba(255,255,255,0.08); color: var(--white); text-decoration: none; }

/* ============================== LEGAL / CONTENT PAGES ============================== */
.content-main { padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.content-column { max-width: 72ch; margin-inline: auto; }
.content-column h1.display { font-size: clamp(2rem, 6vw, 3rem); margin-bottom: 0.5rem; }

.legal-meta {
  color: var(--muted);
  font-size: 0.92rem;
  margin: 0 0 0.4rem;
}
.content-column .coast-motif { margin-top: 1.4rem; margin-bottom: 2rem; }

/* Rendered markdown */
.legal-body { font-size: 1.02rem; }
.legal-body p,
.legal-body ul,
.legal-body ol { max-width: 65ch; }
.legal-body h1 { font-size: 1.7rem; margin-top: 2rem; }
.legal-body h2 { font-size: 1.35rem; margin-top: 2rem; }
.legal-body h3 { font-size: 1.12rem; margin-top: 1.6rem; }
.legal-body h1, .legal-body h2, .legal-body h3 {
  font-family: var(--font-body); font-weight: 600; text-transform: none; letter-spacing: 0; line-height: 1.25;
}
.legal-body a { color: var(--ocean); text-decoration: underline; }
.legal-body ul, .legal-body ol { padding-left: 1.4rem; }
.legal-body li { margin-bottom: 0.4rem; }
.legal-body hr {
  border: 0;
  border-top: 1px solid var(--border);
  margin: 2rem 0;
}
.legal-body blockquote {
  margin: 1.2rem 0;
  padding: 0.4rem 0 0.4rem 1.1rem;
  border-left: 3px solid var(--coral);
  color: #4a3c3e;
}
.legal-body code {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.1em 0.35em;
  font-size: 0.9em;
}

.legal-status { color: var(--muted); font-size: 0.9rem; margin-top: 0.5rem; min-height: 1.2em; }
.legal-status[hidden] { display: none; }