/* public/legal.css — the legal pages (privacy, terms, refund policy) wear the
   landing page's face. Every token, the nav, the buttons and the footer below
   are copied from public/landing.html so the three pages and the landing read
   as one site. Zach, 2026-09-12: "the privacy policy and terms of use on the
   landing page must visually match Eidice."

   The content rules at the bottom keep the classes the three pages already
   use (.meta, .callout, .sms-box, .promise-box, .section-tag ...) and map the
   pages' old gold/cream names onto the Eidice tokens, so the copy is untouched
   and only the look changes. */

:root {
  --eid-canvas:#F7F5F0;
  --eid-surface:#FFFFFF;
  --eid-ink-900:#152219;
  --eid-ink-700:#2E3B34;
  --eid-ink-600:#3C4A42;
  --eid-ink-500:#56655C;
  --eid-ink-400:#7A877E;
  --eid-ink-300:#98A49B;
  --eid-hairline:rgba(31,46,38,.08);
  --eid-emerald-950:#07281C;
  --eid-emerald-900:#0B3D2C;
  --eid-emerald-800:#0C4A34;
  --eid-emerald-700:#0E6B4A;
  --eid-emerald-600:#157F5A;
  --eid-emerald-500:#2E9B74;
  --eid-emerald-300:#7FC4A8;
  --eid-emerald-200:#A9D9C4;
  --eid-emerald-100:#E3F2EA;
  --eid-emerald-050:#F0F8F4;
  --eid-action-solid:#0E6B4A;
  --eid-brand-anchor:#157F5A;
  --eid-radius-card:20px;
  --eid-radius-nested:16px;
  --eid-radius-control:12px;
  --eid-radius-pill:999px;
  --eid-shadow-e1:0 1px 2px rgba(24,39,31,.04),0 10px 24px -14px rgba(24,39,31,.10);
  --eid-dur-fast:120ms;
  --eid-ease:cubic-bezier(.2,.8,.2,1);
  --bg: var(--eid-canvas);
  --ink: var(--eid-ink-900);
  --ink-2: var(--eid-ink-700);
  --muted: var(--eid-ink-500);
  --muted-2: var(--eid-ink-400);
  --line: var(--eid-hairline);
  --card: var(--eid-surface);
  --accent: #0C6A49;
  --font-primary: "IBM Plex Sans", sans-serif;

  /* The names the legal pages' content markup was written against. */
  --text: var(--ink);
  --text-dim: var(--muted);
  --text-dimmer: var(--muted-2);
  --border: rgba(31,46,38,.12);
  --surface: #F4F0E8;
  --gold: var(--accent);
  --gold-dim: var(--eid-emerald-050);
  --gold-border: var(--eid-emerald-200);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-primary);
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
img, svg { max-width: 100%; }
button { font: inherit; cursor: pointer; }
main { display: block; }
.container {
  width: min(1120px, calc(100% - 40px));
  margin: 0 auto;
}
:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 2px var(--eid-canvas), 0 0 0 4.5px var(--eid-brand-anchor);
}

/* ── buttons, as on the landing ─────────────────────────────────────────── */
.btn-primary,
.btn-secondary {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: var(--eid-radius-pill);
  padding: 12px 22px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.1;
  text-align: center;
  transition: transform var(--eid-dur-fast) var(--eid-ease), border-color var(--eid-dur-fast) var(--eid-ease), background var(--eid-dur-fast) var(--eid-ease), color var(--eid-dur-fast) var(--eid-ease);
}
.btn-primary { color: #fff; border: 1px solid var(--eid-action-solid); background: var(--eid-action-solid); }
.btn-secondary { color: var(--ink); border: 1px solid rgba(31,46,38,.14); background: #fff; }
.btn-primary:hover, .btn-secondary:hover { transform: translateY(-1px); }
.btn-primary:hover { background: #0C5F41; border-color: #0C5F41; }
.btn-primary:active { background: #0B523A; border-color: #0B523A; }
.btn-secondary:hover { background: #F4F6F3; }

/* ── the nav, as on the landing ─────────────────────────────────────────── */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  margin: 12px auto 0;
  width: min(1120px, calc(100% - 28px));
  border: 1px solid rgba(31,46,38,.09);
  border-radius: var(--eid-radius-pill);
  background: rgba(255,255,255,.94);
  box-shadow: var(--eid-shadow-e1);
}
.nav-inner {
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  width: 100%;
  padding: 0 12px 0 18px;
}
.logo img { display: block; height: 48px; width: auto; }
.nav-links {
  display: flex;
  align-items: center;
  gap: 24px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 600;
}
.nav-links a:hover { color: var(--ink); }
.nav-login {
  min-height: 40px;
  padding: 10px 18px;
  color: var(--ink-2);
  border: 1px solid rgba(31,46,38,.14);
  background: rgba(255,255,255,.72);
}
.nav-login:hover { background: #fff; }
.nav-login-mobile { display: none; }
/* CSS-only mobile menu: a hidden checkbox drives the toggle, no script
   (legal pages carry zero inline script under CSP; see OW-1777). */
.mobile-menu-toggle {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  overflow: hidden;
}
.hamburger {
  display: none;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: var(--eid-radius-control);
  background: #fff;
  color: var(--ink);
  cursor: pointer;
}
.mobile-menu-toggle:focus-visible ~ .nav-inner .hamburger {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}
.mobile-menu {
  display: none;
  flex-direction: column;
  gap: 10px;
  padding: 16px 20px 20px;
  border-top: 1px solid var(--line);
  background: rgba(255,255,255,.96);
}
.mobile-menu-toggle:checked ~ .mobile-menu { display: flex; }
.mobile-menu a { padding: 8px 0; font-weight: 800; color: var(--ink-2); }
.mobile-menu .btn-primary { width: 100%; padding: 12px 18px; color: #fff; }
@media (max-width: 860px) {
  .nav-links { display: none; }
  .hamburger { display: inline-flex; align-items: center; justify-content: center; }
  .nav-inner { gap: 8px; padding: 0 10px 0 12px; }
  .nav-login-mobile {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    margin-left: auto;
    padding: 10px 14px;
    white-space: nowrap;
  }
  .nav-login-mobile, .hamburger { flex: 0 0 auto; }
  .logo { min-width: 0; }
}
@media (max-width: 400px) {
  .logo img { height: 40px; }
  .nav-inner { gap: 6px; padding: 0 8px 0 10px; }
  .nav-login-mobile { padding: 10px 12px; font-size: 14px; }
  .site-nav { width: calc(100% - 20px); margin-top: 8px; border-radius: 22px; }
}

/* ── the footer, as on the landing ──────────────────────────────────────── */
footer {
  border-top: 1px solid var(--line);
  background: #fff;
  padding: 48px 0 24px;
  margin-top: 64px;
}
.footer-grid { display: grid; gap: 18px; grid-template-columns: 1.5fr 1fr 1fr 1fr; align-items: start; }
.footer-brand p, .dre-block, .footer-bottom { color: var(--muted); font-size: 13px; line-height: 1.55; }
.footer-brand p { margin: 14px 0; }
.footer-col h3 { margin: 0 0 12px; color: var(--ink); font-size: 13px; letter-spacing: .1em; text-transform: uppercase; }
.footer-col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 9px; }
.footer-col a { color: var(--muted); font-size: 14px; }
.footer-col a:hover { color: var(--accent); }
.footer-bottom {
  display: flex;
  gap: 14px;
  justify-content: space-between;
  margin-top: 34px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.legal-mini { display: flex; gap: 14px; flex-wrap: wrap; }
@media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } .footer-bottom { flex-direction: column; } }

/* ── the document itself ────────────────────────────────────────────────── */
/* overflow-wrap: a legal page carries email addresses and URLs a phone cannot
   fit on one line; without this they run past the viewport and the page pans. */
.legal-main { max-width: 800px; margin: 0 auto; padding: 56px 24px 24px; overflow-wrap: anywhere; }
footer .footer-col a, footer .dre-block { overflow-wrap: anywhere; }
.legal-main h1 {
  margin: 0 0 8px;
  font-size: clamp(34px, 5vw, 48px);
  line-height: 1.08;
  letter-spacing: -.012em;
  font-weight: 600;
  color: var(--ink);
}
.meta {
  display: inline-flex;
  color: var(--eid-ink-400);
  font-size: 12px;
  line-height: 1.4;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 36px;
}
.legal-main h2 { margin: 40px 0 12px; font-size: 22px; line-height: 1.2; letter-spacing: -.01em; font-weight: 600; color: var(--ink); }
.legal-main h3 { margin: 22px 0 6px; font-size: 16px; line-height: 1.3; font-weight: 700; color: var(--ink); }
.legal-main p { margin: 0 0 12px; color: var(--ink-2); white-space: pre-line; }
.legal-main ul, .legal-main ol { margin: 12px 0 12px 24px; padding: 0; color: var(--ink-2); }
.legal-main li { margin-bottom: 6px; }
.legal-main a { color: var(--accent); font-weight: 600; }
.legal-main a:hover { text-decoration: underline; }
.legal-main address { font-style: normal; color: var(--ink-2); }
.legal-main strong { color: var(--ink); }
.section-tag { display: inline-block; font-size: 11px; font-weight: 800; color: var(--accent); text-transform: uppercase; letter-spacing: .12em; margin-bottom: 8px; }
h2.sms { color: var(--accent); }
.policy-link { font-weight: 700; }
.gold-link { color: var(--accent); }

/* Callouts: one white card with an emerald edge, the way the landing's cards sit on the canvas. */
.callout, .sms-box, .promise-box {
  background: var(--card);
  border: 1px solid var(--eid-emerald-200);
  border-left: 4px solid var(--eid-action-solid);
  border-radius: var(--eid-radius-nested);
  padding: 20px 24px;
  margin: 24px 0 32px;
  box-shadow: var(--eid-shadow-e1);
  scroll-margin-top: 96px;
}
.callout strong { color: var(--accent); }
.sms-box h2, .promise-box h2 { margin-top: 0; color: var(--accent); font-size: 22px; }
.sms-box .label { font-size: 11px; font-weight: 700; color: var(--accent); text-transform: uppercase; letter-spacing: .06em; margin: 16px 0 4px; }
.sms-box .value { font-size: 15px; color: var(--ink-2); margin-bottom: 8px; }
.sms-box .bold { font-weight: 800; font-size: 16px; color: var(--ink); }
.promise-box .lede { font-size: 17px; font-weight: 600; color: var(--ink); margin-bottom: 12px; }
.promise-box .detail { font-size: 15px; color: var(--ink-2); margin-bottom: 0; }

@media (max-width: 600px) {
  .legal-main { padding: 36px 18px 16px; }
  .legal-main h2 { font-size: 19px; }
}