/* =========================================================================
   EdgeFound / Legal : shared styles for Terms, Privacy, Refund.
   Builds on /why/why.css (typography, theme tokens, base nav rules) and
   adds (a) the v2-landing chrome bits that /why/ doesn't carry (nav-left
   wrapper, nav-link-muted, mobile nav toggle + drawer) so the banner +
   footer match the v2 landing exactly, and (b) the legal-document-specific
   bits : numbered sections, callout cards, neat list spacing.
   ========================================================================= */

/* === v2 NAV CHROME (matches landing v2 exactly) === */
.nav-left{display:flex;align-items:center}
.nav-link-muted{color:var(--muted);position:relative}
.nav-link-muted::after{
  content:'';position:absolute;bottom:-2px;left:50%;right:50%;height:1px;
  background:var(--dark);transition:left .35s cubic-bezier(.4,0,.2,1),right .35s cubic-bezier(.4,0,.2,1);
}
.nav-link-muted:hover::after{left:0;right:0}
.nav-link-muted:hover{color:var(--dark)}
[data-theme="dark"] .nav-link-muted::after{background:#E8E4DD}
[data-theme="dark"] .nav-link-muted:hover{color:#E8E4DD}
.nav-toggle{display:none;background:none;border:none;cursor:pointer;width:24px;height:18px;position:relative}
.nav-toggle span{display:block;width:24px;height:2px;background:var(--dark);position:absolute;left:0;transition:all .3s}
.nav-toggle span:first-child{top:0}
.nav-toggle span:last-child{bottom:0}
.nav-toggle.active span:first-child{top:8px;transform:rotate(45deg)}
.nav-toggle.active span:last-child{bottom:8px;transform:rotate(-45deg)}
[data-theme="dark"] .nav-toggle span{background:#E8E4DD}
.nav-mobile{display:none;flex-direction:column;padding:16px 24px 24px;gap:16px;font-size:15px;font-weight:500;border-top:1px solid var(--border)}
.nav-mobile.open{display:flex}
.nav-mobile a{color:var(--muted);padding:4px 0}
.nav-mobile .nav-cta{text-align:center;margin-top:8px}
@media(max-width:760px){
  .nav-links{display:none}
  .nav-toggle{display:block}
}

/* Footer styles now live in why.css (matched to v2 exactly). No overrides needed
   here — legal pages share the same chrome as the /why/ corpus. */


/* === PAGE HEADER (kicker + title + meta) === */
.legal-hero{padding:120px 24px 48px;max-width:780px;margin:0 auto;text-align:left}
.legal-kicker{font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin-bottom:24px}
.legal-title{font-family:var(--font-serif);font-weight:300;font-size:clamp(40px,6vw,64px);line-height:1.05;color:var(--dark);margin-bottom:16px;letter-spacing:-.01em}
.legal-meta{font-size:13px;color:var(--muted);letter-spacing:.04em;border-top:1px solid var(--border);padding-top:20px;margin-top:12px}
.legal-meta strong{color:var(--dark);font-weight:500}

/* === DOCUMENT BODY === */
.legal-doc{max-width:780px;margin:0 auto;padding:0 24px 96px}

/* Each numbered section. Number sits to the left, title + body to the right.
   On narrow screens the number stacks above the heading. */
.legal-section{
  display:grid;grid-template-columns:64px 1fr;gap:24px;
  padding:32px 0;border-top:1px solid var(--border);
}
.legal-section:first-of-type{border-top:none}
.legal-section-num{
  font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;
  color:var(--gold);padding-top:6px;
}
.legal-section-num.is-blank{visibility:hidden}
.legal-section-content h2{
  font-family:var(--font-serif);font-weight:400;
  font-size:clamp(22px,2.8vw,28px);line-height:1.2;
  color:var(--dark);margin:0 0 16px;letter-spacing:-.005em;
}
.legal-section-content p{
  font-family:var(--font-sans);font-size:15px;line-height:1.75;
  color:var(--muted);margin:0 0 14px;
}
.legal-section-content p:last-child{margin-bottom:0}
.legal-section-content p strong{color:var(--dark);font-weight:600}
.legal-section-content a{color:var(--gold);border-bottom:1px solid rgba(184,150,12,.35);transition:border-color .25s,opacity .2s}
.legal-section-content a:hover{border-color:var(--gold);opacity:.7}
.legal-section-content ul{
  margin:8px 0 14px;padding-left:22px;
  font-family:var(--font-sans);font-size:15px;line-height:1.75;color:var(--muted);
}
.legal-section-content ul li{margin-bottom:8px}
.legal-section-content ul li strong{color:var(--dark);font-weight:600}
.legal-section-content em{font-style:italic;color:var(--muted-light)}

/* Callout card : structured key/value list (used for lawful bases, retention, cookies). */
.legal-card{
  background:var(--card);border:1px solid var(--border);border-radius:10px;
  padding:22px 26px;margin:6px 0 14px;
  font-family:var(--font-sans);font-size:14px;line-height:1.75;
  display:flex;flex-direction:column;gap:14px;
}
.legal-card-row{display:flex;flex-direction:column;gap:2px}
.legal-card-row .k{color:var(--dark);font-weight:600}
.legal-card-row .v{color:var(--muted)}

/* Sub-provider block : Paddle / MetaAPI / Hetzner / Resend style cards. */
.legal-provider{
  background:var(--card);border:1px solid var(--border);border-radius:10px;
  padding:18px 22px;margin:10px 0;
}
.legal-provider .name{font-family:var(--font-sans);font-size:15px;font-weight:600;color:var(--dark);margin-bottom:4px}
.legal-provider .desc{font-family:var(--font-sans);font-size:14px;line-height:1.7;color:var(--muted);margin:0}

/* Model withdrawal form box (Terms annex). */
.legal-form-box{
  background:var(--card);border:1px solid var(--border);border-radius:10px;
  padding:24px 28px;margin:10px 0;
  font-family:var(--font-sans);font-size:14px;line-height:1.8;color:var(--dark-soft);
}
.legal-form-box p{margin:0 0 6px;color:var(--dark-soft)}

/* === MOBILE === */
@media(max-width:700px){
  .legal-hero{padding:110px 20px 40px}
  .legal-doc{padding:0 20px 64px}
  .legal-section{grid-template-columns:1fr;gap:6px;padding:28px 0}
  .legal-section-num{padding-top:0}
}