/* ══════════════════════════════════════════════════════════════════
   css/legal.css
   Shared shell for the three legal pages: /terms, /privacy, /refunds.

   The marketing pages (pricing.html, contact.html) each carry their own
   inline <style> because each has a different layout. The legal pages are
   the opposite case — identical chrome, identical typography, only the
   prose differs — so they share one stylesheet instead of triplicating it.

   Header, footer and brand lockup are copied verbatim from contact.html so
   a coach never feels like they left the site to read the small print.
   ══════════════════════════════════════════════════════════════════ */

*{box-sizing:border-box}
body{margin:0}
.page{font-family:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif;background:#eceef3;color:#14171f;min-height:100vh;-webkit-font-smoothing:antialiased;line-height:1.5}
a{color:#3a55e6}
.pwrap{max-width:1080px;margin:0 auto;padding:0 24px}

/* ── Header (matches contact.html / pricing.html) ─────────────────── */
.hdr{position:sticky;top:0;z-index:50;background:rgba(236,238,243,.85);backdrop-filter:saturate(140%) blur(12px);border-bottom:1px solid #e4e7ee}
.hdr-inner{max-width:1080px;margin:0 auto;padding:0 24px;height:64px;display:flex;align-items:center;gap:12px}
@font-face{font-family:'Bricolage Fallback';src:local('Arial');size-adjust:99.65%;ascent-override:93.4%;descent-override:27.1%;line-gap-override:0%}
.brandlock{display:flex;align-items:center;gap:11px;text-decoration:none;color:inherit}
.logo-mark{width:40px;height:40px;border-radius:13px;background:linear-gradient(150deg,#3a55e6,#2b40c4);color:#fff;display:flex;align-items:center;justify-content:center;font-family:'Bricolage Grotesque','Bricolage Fallback';font-weight:800;font-size:16px;box-shadow:0 8px 18px -8px rgba(58,85,230,.9);position:relative;flex:none}
.brandlock .logo-mark::after{content:"";position:absolute;top:8px;right:8px;width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.85)}
.brandlock-txt b{display:block;font-family:'Bricolage Grotesque','Bricolage Fallback';font-weight:800;font-size:19px;letter-spacing:-.02em;line-height:1}
.brandlock-txt small{display:block;font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#5b626f;margin-top:-1px}
.logo-mark.sm{width:32px;height:32px;border-radius:9px;font-size:11px;background:#3a55e6;box-shadow:none}
@media(max-width:700px){.brandlock .logo-mark{width:34px;height:34px;border-radius:11px;font-size:13px}.brandlock .logo-mark::after{top:7px;right:7px;width:5px;height:5px}.brandlock-txt b{font-size:16px}.brandlock-txt small{font-size:9px}}
.hdr-links{margin-left:auto;display:flex;align-items:center;gap:22px}
.hdr-links .navlink{font-size:15px;font-weight:700;color:#464d5a;text-decoration:none}
.hdr-links .navlink:hover{color:#3a55e6}
.cta{display:inline-flex;align-items:center;gap:8px;padding:11px 20px;border-radius:12px;font-size:15px;font-weight:800;color:#fff;text-decoration:none;background:linear-gradient(135deg,#3a55e6,#2b40c4);box-shadow:0 14px 30px -16px #3a55e6}
.cta.ghost{background:#fff;color:#2b40c4;border:1.5px solid #c9d2fb;box-shadow:none}
@media(max-width:640px){.hdr-links .navlink{display:none}}

/* ── Hero ─────────────────────────────────────────────────────────── */
.lhero{padding:52px 0 8px}
.crumbs{font-size:13px;color:#646b78;margin-bottom:14px}
.crumbs a{color:#646b78;text-decoration:none}
.eyebrow{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:#3a55e6;background:#e6eafe;border:1px solid #d4dbfb;border-radius:999px;padding:6px 14px}
h1{font-size:42px;line-height:1.06;font-weight:800;letter-spacing:-.03em;margin:18px 0 0;max-width:20ch;text-wrap:balance}
.lede{font-size:18px;color:#464d5a;margin:16px 0 0;line-height:1.6;max-width:62ch}
.updated{font-size:13.5px;color:#8a909c;margin-top:14px}

/* ── Document body ────────────────────────────────────────────────── */
/* Legal prose is read by people who are worried, and by reviewers who are
   skimming. Both are served by a narrow measure and loud headings. */
.doc{background:#fff;border:1px solid #e4e7ee;border-radius:20px;padding:40px 44px;margin-top:30px}
.doc h2{font-size:21px;font-weight:800;letter-spacing:-.01em;margin:38px 0 0;padding-top:26px;border-top:1px solid #f0f2f6}
.doc h2:first-child{margin-top:0;padding-top:0;border-top:none}
.doc h3{font-size:16.5px;font-weight:800;margin:24px 0 0;color:#2b40c4}
.doc p{font-size:15.5px;color:#3c4350;line-height:1.68;margin:12px 0 0;max-width:74ch}
.doc ul,.doc ol{margin:12px 0 0;padding-left:22px;max-width:74ch}
.doc li{font-size:15.5px;color:#3c4350;line-height:1.68;margin-top:7px}
.doc b,.doc strong{color:#14171f}
.doc a{color:#2b40c4;font-weight:700}

/* Key-value block for the operator identity / contact details. */
.idbox{background:#f7f8fb;border:1px solid #e4e7ee;border-radius:14px;padding:20px 22px;margin-top:16px}
.idbox .row{display:flex;gap:14px;padding:8px 0;font-size:15px;border-top:1px solid #eceef3}
.idbox .row:first-child{border-top:none;padding-top:0}
.idbox .k{flex:0 0 150px;color:#646b78;font-weight:700}
.idbox .v{color:#14171f}

/* Callout for the things a coach most needs to notice. */
.note{background:#fff8e9;border:1px solid #f4e2b8;border-radius:14px;padding:16px 20px;margin-top:18px;font-size:15px;color:#7a5b16;line-height:1.6}
.note b{color:#5f4610}
.note.good{background:#eefaf1;border-color:#c3e9d0;color:#1d6236}
.note.good b{color:#14512b}

/* Data / subprocessor table. Scrolls rather than squashing on a phone. */
.tablewrap{overflow-x:auto;margin-top:16px;border:1px solid #e4e7ee;border-radius:14px}
table{border-collapse:collapse;width:100%;min-width:560px;font-size:14.5px}
th,td{text-align:left;padding:13px 16px;border-top:1px solid #f0f2f6;vertical-align:top;color:#3c4350}
th{background:#f7f8fb;font-weight:800;color:#14171f;border-top:none;white-space:nowrap}
td b{color:#14171f}

/* Cross-links between the three documents. */
.seealso{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
.seealso a{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid #e4e7ee;border-radius:12px;padding:11px 18px;font-size:14.5px;font-weight:700;color:#2b40c4;text-decoration:none}
.seealso a:hover{border-color:#c9d2fb}

/* ── Footer (matches contact.html) ────────────────────────────────── */
.ftr{border-top:1px solid #e4e7ee;margin-top:60px}
.ftr-inner{max-width:1080px;margin:0 auto;padding:28px 24px;display:flex;gap:14px;align-items:center;flex-wrap:wrap;font-size:13px;color:#646b78}
.ftr a{color:#5b626f;text-decoration:none;font-weight:700}
.ftr-links{margin-left:auto;display:flex;gap:20px;flex-wrap:wrap}

@media(max-width:700px){
  h1{font-size:31px}
  .lede{font-size:16.5px}
  .lhero{padding-top:36px}
  .doc{padding:28px 22px;border-radius:16px}
  .doc h2{font-size:19px}
  .idbox .row{flex-direction:column;gap:2px}
  .idbox .k{flex:none}
  .ftr-inner{flex-direction:column;align-items:flex-start}
  .ftr-links{margin-left:0}
}