/* LexaBook site — light counter-top palette after proofmode.org, in LexaBook teal + amber. */
:root {
  --font-display: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --font-body: 'Public Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --fs-xs: 14px; --fs-sm: 16px; --fs-md: 20px; --fs-lg: 24px; --fs-xl: 30px; --fs-2xl: 46px; --fs-3xl: 72px;

  --paper: #f4f4f2;      /* page */
  --paper-2: #ebece7;    /* sunk surfaces */
  --card: #ffffff;
  --ink: #12302c;        /* text, dark buttons */
  --ink-2: #4b5f5b;      /* secondary text */
  --teal: #0e6b65;
  --teal-deep: #083f3b;
  --mint: #c9eee3;       /* light pill button */
  --mint-edge: #7fd3bb;
  --amber: #f5a524;
  --yes: #35b768;
  --no: #f08a4b;
  --line: rgba(18, 48, 44, 0.12);
  --focus: #f5a524;

  --space-1: 10px; --space-2: 12px; --space-3: 16px; --space-4: 20px; --space-5: 40px; --space-6: 88px;
  --radius-xs: 8px; --radius-md: 14px; --radius-pill: 999px;
  --dur-instant: 150ms; --dur-fast: 300ms;
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --max: 1240px;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--font-body); font-size: var(--fs-sm); line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; display: block; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 6px; }
.wrap { max-width: var(--max); margin: 0 auto; padding-inline: var(--space-4); }
.skip { position: absolute; left: -9999px; top: var(--space-2); background: var(--ink); color: #fff; padding: var(--space-1) var(--space-3); border-radius: var(--radius-xs); font-weight: 700; z-index: 100; }
.skip:focus { left: var(--space-3); }

/* ---------- buttons (pill, mono caps as in the reference) ---------- */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px;
  padding: 0 22px; border-radius: var(--radius-pill); border: 1.5px solid transparent;
  font: 600 15px/1 var(--font-mono); letter-spacing: 0.02em; text-transform: uppercase; text-decoration: none; white-space: nowrap;
  cursor: pointer; transition: transform var(--dur-instant) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), background var(--dur-instant);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(0.98); }
.btn-dark { background: var(--ink); color: #fff; }
.btn-dark:hover { box-shadow: 0 8px 24px -6px rgba(14, 107, 101, 0.55), 0 0 0 4px rgba(14, 107, 101, 0.12); }
.btn-mint { background: var(--mint); color: var(--ink); border-color: var(--mint-edge); }
.btn-mint:hover { box-shadow: 0 8px 24px -6px rgba(53, 183, 104, 0.45), 0 0 0 4px rgba(127, 211, 187, 0.3); }
.btn-amber { background: var(--amber); color: var(--ink); }
.btn-amber:hover { box-shadow: 0 10px 30px -6px rgba(245, 165, 36, 0.7), 0 0 0 4px rgba(245, 165, 36, 0.2); }
.btn-ghost-light { color: #fff; border-color: rgba(255, 255, 255, 0.35); }
.btn-ghost-light:hover { border-color: #fff; box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.12); }
.btn[aria-disabled='true'] { cursor: default; }
.btn[aria-disabled='true']:hover { transform: none; }

/* ---------- header ---------- */
.site-header { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--paper) 88%, transparent); backdrop-filter: saturate(1.4) blur(12px); padding-top: env(safe-area-inset-top, 0px); transition: box-shadow var(--dur-fast); }
.site-header.scrolled { box-shadow: 0 1px 0 var(--line), 0 10px 30px -18px rgba(18, 48, 44, 0.35); }
.site-header .wrap { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--space-3); min-height: 76px; }
.brand { display: inline-flex; align-items: center; gap: var(--space-2); text-decoration: none; justify-self: start; }
.brand img { width: 40px; height: 40px; border-radius: 10px; box-shadow: 0 4px 14px -4px rgba(14, 107, 101, 0.6); transition: transform var(--dur-fast) var(--ease-out); }
.brand:hover img { transform: rotate(-6deg) scale(1.05); }
.brand span { font: 600 30px/1 var(--font-display); letter-spacing: -0.01em; }
.nav { display: flex; align-items: center; gap: 6px; }
.nav-item { position: relative; }
.nav-link {
  display: inline-flex; align-items: center; gap: 6px; padding: 10px 14px; border-radius: var(--radius-pill); border: 0; background: none;
  font: 500 17px/1 var(--font-body); color: var(--ink); text-decoration: none; cursor: pointer; transition: background var(--dur-instant);
}
.nav-link:hover, .nav-link[aria-expanded='true'], .nav-link[aria-current='page'] { background: rgba(14, 107, 101, 0.08); }
.nav-link svg { width: 14px; height: 14px; transition: transform var(--dur-fast) var(--ease-out); }
.nav-link[aria-expanded='true'] svg { transform: rotate(180deg); }
.menu {
  position: absolute; top: calc(100% + 10px); left: 50%; width: 340px; padding: 8px; list-style: none; margin: 0;
  background: var(--card); border-radius: var(--radius-md); box-shadow: 0 24px 60px -20px rgba(18, 48, 44, 0.35), 0 0 0 1px var(--line);
  opacity: 0; visibility: hidden; transform: translate(-50%, -6px) scale(0.98); transform-origin: top center;
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), visibility 0s linear var(--dur-fast);
}
/* invisible bridge over the gap so the hover menu doesn't close on the way down */
.menu::before { content: ''; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
.menu.open { opacity: 1; visibility: visible; transform: translate(-50%, 0) scale(1); transition-delay: 0s; }
.menu a { display: grid; grid-template-columns: 40px 1fr; gap: 12px; align-items: center; padding: 10px; border-radius: 10px; text-decoration: none; transition: background var(--dur-instant); }
.menu a:hover, .menu a:focus-visible { background: var(--paper); }
.menu .ico { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: var(--mint); color: var(--teal); }
.menu .ico svg { width: 20px; height: 20px; }
.menu strong { display: block; font-size: 15px; }
.menu small { display: block; color: var(--ink-2); font-size: 13px; line-height: 1.35; }
.header-cta { display: flex; gap: 10px; justify-self: end; }
.menu-toggle { display: none; justify-self: end; }
@media (max-width: 1060px) {
  .site-header .wrap { grid-template-columns: 1fr auto; }
  .menu-toggle { display: inline-flex; }
  .nav, .header-cta { display: none; }
  .site-header.open .nav { display: flex; flex-direction: column; align-items: stretch; grid-column: 1 / -1; padding-bottom: var(--space-2); }
  .site-header.open .header-cta { display: flex; grid-column: 1 / -1; justify-self: stretch; padding-bottom: var(--space-4); }
  .site-header.open .header-cta .btn { flex: 1; }
  .nav-link { width: 100%; justify-content: space-between; font-size: 18px; padding: 14px 8px; border-radius: 10px; }
  .menu { position: static; width: auto; transform: none; box-shadow: none; padding: 0 0 8px; display: none; opacity: 1; visibility: visible; }
  .menu.open { display: block; transform: none; }
  .brand span { font-size: 26px; }
}

/* ---------- hero ---------- */
.hero { position: relative; text-align: center; padding-top: var(--space-6); overflow: hidden; }
.hero::before {
  /* soft brand glow behind the headline */
  content: ''; position: absolute; inset: -20% 10% auto; height: 620px; z-index: -1; pointer-events: none;
  background:
    radial-gradient(40% 60% at 30% 40%, rgba(127, 211, 187, 0.55), transparent 70%),
    radial-gradient(35% 55% at 72% 35%, rgba(245, 165, 36, 0.28), transparent 70%);
  filter: blur(30px);
}
.hero h1 {
  font: 600 clamp(44px, 7.4vw, var(--fs-3xl))/1.02 var(--font-display); font-variation-settings: 'SOFT' 50, 'WONK' 0;
  letter-spacing: -0.025em; margin: 0 auto; max-width: 16ch; text-wrap: balance;
}
.hero .lead { font-size: clamp(18px, 2vw, 21px); color: var(--ink-2); max-width: 54ch; margin: var(--space-4) auto var(--space-5); text-wrap: pretty; }
.hero .actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); }

/* collage */
.collage { text-align: left; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-4); align-items: center; max-width: 1540px; margin: 72px auto 0; padding: 0 var(--space-5) 96px; }
.tile { position: relative; margin: 0; border-radius: 4px; aspect-ratio: 240 / 276; overflow: visible; transition: transform var(--dur-fast) var(--ease-out); }
.tile.tall { aspect-ratio: 240 / 360; }
.tile:hover { transform: translateY(-6px) rotate(-0.6deg); }
.tile .scene { position: absolute; inset: 0; border-radius: 4px; overflow: hidden; box-shadow: 0 30px 50px -30px rgba(18, 48, 44, 0.55); }
.scene-amber { background: radial-gradient(120% 80% at 20% 0%, #ffd27a, #f5a524 45%, #c46f05); }
.scene-teal { background: radial-gradient(120% 90% at 80% 0%, #1fa596, #0e6b65 50%, #063b38); }
.scene-ink { background: linear-gradient(160deg, #1d3c38, #0b1f1c); }
.scene-mint { background: linear-gradient(165deg, #e9fbf4, #b8e9da 55%, #7fd3bb); }
.scene-peach { background: radial-gradient(110% 80% at 30% 10%, #ffe1cc, #f6b48a 60%, #e98154); }
.scene-paper { background: linear-gradient(180deg, #fffdf8, #eceae2); }

/* floating metadata pills (icon circle + label + badge) */
.pills { position: absolute; left: 8%; display: grid; gap: 8px; justify-items: start; z-index: 2; }
.pills.bottom { bottom: -44px; }
.pills.top { top: -40px; left: 10%; }
.pill { display: inline-flex; align-items: center; gap: 4px; filter: drop-shadow(0 6px 14px rgba(18, 48, 44, 0.18)); }
.pill .i { width: 40px; height: 40px; border-radius: 50%; background: #fff; display: grid; place-items: center; color: var(--ink); flex: none; }
.pill .i svg { width: 18px; height: 18px; }
.pill .t { background: #fff; border-radius: var(--radius-pill); padding: 10px 16px; font-size: 14.5px; white-space: nowrap; color: var(--ink); }
.pill .b { border-radius: var(--radius-pill); padding: 10px 12px; font-size: 14px; font-weight: 600; color: #fff; margin-left: -2px; }
.pill .b.yes { background: var(--yes); }
.pill .b.no { background: var(--no); }

/* page-load: tiles rise in a stagger, then pills pop — the one orchestrated moment */
@media (prefers-reduced-motion: no-preference) {
  .js .tile { opacity: 0; transform: translateY(28px); }
  .js .tile .pill { opacity: 0; transform: translateY(8px) scale(0.96); }
  .js.loaded .tile { opacity: 1; transform: none; transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out); transition-delay: calc(var(--i) * 90ms); }
  .js.loaded .tile .pill { opacity: 1; transform: none; transition: opacity 400ms var(--ease-out), transform 400ms var(--ease-out); transition-delay: calc(700ms + var(--p) * 110ms); }
  .js.loaded .tile:hover { transform: translateY(-6px) rotate(-0.6deg); transition-delay: 0s; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; animation: none !important; } }

@media (max-width: 1100px) {
  .collage { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 80px; padding-inline: var(--space-4); }
}
@media (max-width: 640px) {
  .collage { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); row-gap: 150px; margin-top: 48px; }
  .tile.hide-sm { display: none; }
  .pill .t { font-size: 13px; padding: 8px 12px; }
  .pill .i { width: 34px; height: 34px; }
  .pill .b { padding: 8px 10px; font-size: 13px; }
  .pills { left: 4%; }
}

/* scene contents */
.scene .ledger { position: absolute; inset: 14% 10% auto; display: grid; gap: 8px; }
.scene .ledger div { display: flex; justify-content: space-between; background: rgba(255, 255, 255, 0.94); border-radius: 8px; padding: 9px 11px; font-size: 13px; font-weight: 600; color: var(--ink); }
.scene .ledger .g { color: #138046; } .scene .ledger .r { color: #c2261b; }
.scene .qrbox { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: 12px; color: #fff; font-weight: 700; }
.scene .qrbox img { width: 62%; background: #fff; border-radius: 10px; padding: 8px; box-shadow: 0 0 0 6px rgba(245, 165, 36, 0.35), 0 0 40px rgba(245, 165, 36, 0.35); }
.scene .big { position: absolute; left: 10%; right: 10%; bottom: 12%; color: var(--ink); }
.scene .big strong { display: block; font: 600 34px/1 var(--font-display); }
.scene .big span { font-size: 13px; color: var(--ink-2); }
.scene .bubble { position: absolute; left: 9%; right: 12%; top: 16%; background: #fff; border-radius: 16px 16px 16px 4px; padding: 12px; font-size: 13px; line-height: 1.4; color: var(--ink); }
.scene .bubble + .bubble { top: auto; bottom: 14%; left: 22%; right: 9%; border-radius: 16px 16px 4px 16px; background: #dcf8c6; }
.scene .billpaper { position: absolute; inset: 10% 12%; background: #fff; border-radius: 6px; padding: 12px; box-shadow: 0 10px 25px -12px rgba(0, 0, 0, 0.35); font-size: 12px; color: var(--ink); display: grid; align-content: start; gap: 6px; }
.scene .billpaper b { font-family: var(--font-display); font-size: 15px; }
.scene .billpaper div { display: flex; justify-content: space-between; border-bottom: 1px dashed var(--line); padding-bottom: 5px; }
.scene .billpaper .tot { border: 0; font-weight: 700; font-size: 14px; }
.scene .billpaper .pay { display: flex; align-items: center; gap: 8px; border: 0; justify-content: flex-start; margin-top: 4px; color: var(--ink-2); font-size: 11px; }
.scene .billpaper .pay img { width: 46px; height: 46px; }
.scene .shelf { position: absolute; inset: 0; }

/* pixel-block band closing the hero (reference motif), in brand teal */
.pixels { display: block; width: 100%; height: auto; color: var(--teal); margin-top: -40px; }

/* ---------- sections ---------- */
.section { padding-block: var(--space-6); }
.section-head { max-width: 640px; margin: 0 auto var(--space-5); text-align: center; }
.section-head h2 { font: 600 clamp(32px, 4.6vw, var(--fs-2xl))/1.08 var(--font-display); letter-spacing: -0.02em; margin: 0 0 var(--space-3); text-wrap: balance; }
.section-head p { color: var(--ink-2); font-size: 19px; margin: 0; text-wrap: pretty; }

.band-teal { background: var(--teal); color: #fff; position: relative; overflow: hidden; }
.band-teal::after { content: ''; position: absolute; width: 520px; height: 520px; right: -140px; top: -180px; border-radius: 50%; background: radial-gradient(circle, rgba(245, 165, 36, 0.35), transparent 65%); pointer-events: none; }
.band-teal .section-head p { color: rgba(255, 255, 255, 0.86); }

/* four counter jobs, on the teal band directly under the pixels */
.jobs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); position: relative; z-index: 1; }
@media (max-width: 960px) { .jobs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .jobs { grid-template-columns: 1fr; } }
.job { padding: var(--space-4); border-radius: var(--radius-md); background: rgba(255, 255, 255, 0.07); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14); transition: background var(--dur-fast), box-shadow var(--dur-fast); }
.job:hover { background: rgba(255, 255, 255, 0.11); box-shadow: inset 0 0 0 1px rgba(245, 165, 36, 0.6), 0 0 40px -12px rgba(245, 165, 36, 0.6); }
.job .ico { width: 44px; height: 44px; border-radius: 12px; background: var(--amber); color: var(--ink); display: grid; place-items: center; margin-bottom: var(--space-3); }
.job .ico svg { width: 22px; height: 22px; }
.job h3 { margin: 0 0 6px; font: 600 22px/1.2 var(--font-display); }
.job p { margin: 0; color: rgba(255, 255, 255, 0.82); }

/* feature rows */
.feature { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; padding-block: 56px; }
.feature + .feature { border-top: 1px solid var(--line); }
.feature.flip .feature-art { order: -1; }
@media (max-width: 880px) { .feature { grid-template-columns: 1fr; gap: var(--space-5); } .feature.flip .feature-art { order: 0; } }
.feature .kicker { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--teal); margin: 0 0 var(--space-2); }
.feature .kicker::before { content: ''; width: 10px; height: 10px; border-radius: 3px; background: var(--amber); }
.feature h3 { font: 600 clamp(28px, 3.4vw, 38px)/1.1 var(--font-display); letter-spacing: -0.015em; margin: 0 0 var(--space-3); }
.feature p { color: var(--ink-2); margin: 0 0 var(--space-3); font-size: 17px; max-width: 52ch; }
.feature ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.feature li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: start; }
.feature li::before { content: ''; width: 22px; height: 22px; border-radius: 50%; background: var(--mint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230e6b65' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/14px no-repeat; margin-top: 1px; }
.feature-art { position: relative; border-radius: 20px; padding: 28px; background: linear-gradient(160deg, #ffffff, #eef3f1); box-shadow: 0 40px 80px -40px rgba(18, 48, 44, 0.45), 0 0 0 1px var(--line); }
.feature-art::before { content: ''; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; background: linear-gradient(140deg, rgba(127, 211, 187, 0.9), transparent 40%, rgba(245, 165, 36, 0.7)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }
.row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: 14px 4px; border-bottom: 1px solid var(--line); font-size: 15px; }
.row:last-child { border-bottom: 0; }
.row strong { font-variant-numeric: tabular-nums; }
.tag { display: inline-block; padding: 3px 10px; border-radius: var(--radius-pill); font-size: 12.5px; font-weight: 600; background: var(--paper-2); margin-right: 6px; }
.tag.red { background: #fde4df; color: #a3271c; } .tag.amber { background: #fff0d2; color: #8a5300; }
.g { color: #138046; } .r { color: #c2261b; } .a { color: #b26f00; }
.qr-card { text-align: center; }
.qr-card img { width: 180px; margin: 0 auto 14px; border-radius: 12px; padding: 10px; background: #fff; box-shadow: 0 0 0 1px var(--line), 0 0 50px -10px rgba(245, 165, 36, 0.7); }
.qr-card strong { font: 600 36px/1 var(--font-display); color: var(--teal); }
.qr-card p { margin: 8px 0 0; color: var(--ink-2); font-size: 14px; }

/* steps: a real sequence, so numbered */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); counter-reset: step; }
@media (max-width: 880px) { .steps { grid-template-columns: 1fr; } }
.step { position: relative; background: var(--card); border-radius: 18px; padding: 28px; box-shadow: 0 0 0 1px var(--line); transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast); }
.step:hover { transform: translateY(-4px); box-shadow: 0 0 0 1px var(--mint-edge), 0 24px 50px -24px rgba(14, 107, 101, 0.5); }
.step::before { counter-increment: step; content: counter(step); display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--ink); color: #fff; font: 600 20px/1 var(--font-display); margin-bottom: var(--space-3); }
.step h3 { margin: 0 0 8px; font: 600 22px/1.2 var(--font-display); }
.step p { margin: 0; color: var(--ink-2); }

/* privacy band */
.band-deep { background: radial-gradient(90% 120% at 10% 0%, #0f5a54, var(--teal-deep) 55%, #052a27); color: #fff; }
.band-deep .section-head p { color: rgba(255, 255, 255, 0.85); }
.band-deep a { color: var(--amber); }
.promises { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); }
@media (max-width: 960px) { .promises { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .promises { grid-template-columns: 1fr; } }
.promise { border-top: 2px solid var(--amber); padding-top: var(--space-3); }
.promise h3 { margin: 0 0 6px; font: 600 21px/1.2 var(--font-display); }
.promise p { margin: 0; color: rgba(255, 255, 255, 0.82); }

/* closing call to action */
.cta-card { position: relative; overflow: hidden; text-align: center; border-radius: 28px; padding: 72px var(--space-4); background: var(--ink); color: #fff; }
.cta-card::before { content: ''; position: absolute; inset: auto -10% -60% -10%; height: 120%; background: radial-gradient(50% 50% at 50% 50%, rgba(245, 165, 36, 0.45), transparent 70%); pointer-events: none; }
.cta-card > * { position: relative; }
.cta-card h2 { font: 600 clamp(32px, 4.6vw, var(--fs-2xl))/1.08 var(--font-display); margin: 0 0 var(--space-3); }
.cta-card p { color: rgba(255, 255, 255, 0.82); margin: 0 auto var(--space-5); max-width: 46ch; font-size: 19px; }
.cta-card .actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); }

/* ---------- legal pages ---------- */
.legal { max-width: 780px; margin: 0 auto; padding: var(--space-5) var(--space-4) var(--space-6); }
.legal .label { color: var(--teal); font-weight: 600; margin: 0 0 var(--space-2); }
.legal h1 { font: 600 clamp(36px, 6vw, var(--fs-2xl))/1.08 var(--font-display); letter-spacing: -0.02em; margin: 0 0 var(--space-2); }
.legal .meta { color: var(--ink-2); margin: 0 0 var(--space-5); }
.legal h2 { font: 600 var(--fs-lg)/1.25 var(--font-display); margin: var(--space-5) 0 var(--space-2); }
.legal h3 { font-size: 18px; margin: var(--space-4) 0 8px; }
.legal p, .legal li { color: #2c3f3b; line-height: 1.65; }
.legal ul, .legal ol { padding-left: 1.3em; }
.legal li { margin-bottom: 8px; }
.legal a { color: var(--teal); font-weight: 600; }
.legal .table-wrap { overflow-x: auto; border-radius: var(--radius-md); background: var(--card); box-shadow: 0 0 0 1px var(--line); margin: var(--space-3) 0; }
.legal table { width: 100%; border-collapse: collapse; font-size: var(--fs-xs); }
.legal th, .legal td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
.legal tr:last-child td { border-bottom: 0; }
.legal th { background: var(--paper-2); }
.callout { background: var(--mint); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); margin: var(--space-4) 0; box-shadow: inset 4px 0 0 var(--teal); }
.callout p { margin: 0; color: var(--ink); }

/* ---------- footer ---------- */
.site-footer { background: var(--ink); color: #fff; padding-block: 64px calc(var(--space-5) + env(safe-area-inset-bottom, 0px)); }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--space-4); }
@media (max-width: 760px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
.footer-grid .brand span { color: #fff; }
.footer-grid h4 { margin: 0 0 var(--space-2); font-size: 15px; color: var(--mint); }
.footer-grid ul { list-style: none; margin: 0; padding: 0; }
.footer-grid li { margin-bottom: 8px; }
.footer-grid a { text-decoration: none; color: rgba(255, 255, 255, 0.78); font-size: 15px; }
.footer-grid a:hover { color: #fff; text-decoration: underline; }
.footer-grid p { color: rgba(255, 255, 255, 0.65); font-size: 15px; max-width: 32ch; }
.footer-note { margin-top: var(--space-5); padding-top: var(--space-4); border-top: 1px solid rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.6); font-size: 14px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2); }