/* Stand-alone stylesheet for the legal pages (terms, privacy, support). It copies the look of the marketing page
   (colours, header, glass card, footer) so these pages do not depend on the page's generated stylesheet, whose file
   name changes with every rebuild of the marketing site. Published as /legal.css. */
:root { --bg-color: #fbf9f6; --ink: #111111; --muted: rgba(17, 17, 17, .6); --line: rgba(17, 17, 17, .08); --accent: #ff6a00;
  --glass-bg: rgba(255, 255, 255, .65); --glass-border: rgba(255, 255, 255, .8); --glow-primary: rgba(255, 106, 0, .25);
  --sky: radial-gradient(1000px 600px at 20% 0%, rgba(255, 106, 0, .1), transparent 70%), radial-gradient(800px 500px at 100% 20%, rgba(45, 212, 191, .1), transparent 60%), radial-gradient(900px 600px at 50% 100%, #ffffff, transparent 60%); }
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; color: var(--ink); background: var(--bg-color); font-family: Outfit, system-ui, -apple-system, sans-serif; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
.wrap { min-height: 100%; background: var(--sky); position: relative; overflow: hidden; }
.container { width: min(1080px, calc(100% - 48px)); margin: 0 auto; position: relative; z-index: 1; }
header { display: flex; align-items: center; justify-content: space-between; padding: 24px 0; }
.brand { display: inline-flex; gap: 12px; align-items: center; font-weight: 800; font-size: 20px; letter-spacing: -.02em; }
.mark { width: 36px; height: 36px; border-radius: 12px; background: linear-gradient(135deg, #ff8a00, #e52e71); box-shadow: 0 8px 20px var(--glow-primary); }
.nav { display: flex; gap: 16px; align-items: center; font-size: 15px; font-weight: 600; }
.signin { color: var(--muted); font-weight: 600; transition: color .2s; }
.signin:hover { color: var(--ink); }
.cta { padding: 10px 18px; border-radius: 999px; background: var(--ink); color: #fff; font-weight: 700; transition: transform .2s, box-shadow .2s; }
.cta:hover { transform: scale(1.05); box-shadow: 0 10px 20px #1113; }
.card { border-radius: 24px; border: 1px solid var(--glass-border); background: var(--glass-bg); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); box-shadow: 0 24px 48px #11111114, inset 0 0 0 1px #ffffff80; overflow: hidden; }
footer { padding: 40px 0 60px; color: var(--muted); font-size: 14px; text-align: center; border-top: 1px solid var(--line); margin-top: 40px; }
footer a { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 640px) { .nav { gap: 12px; } }

.legal-card { max-width: 760px; margin: 8px auto 24px; padding: 36px 40px; }
.legal-card h1 { font-size: clamp(30px, 5vw, 42px); line-height: 1.1; letter-spacing: -.02em; margin: 0 0 6px; }
.legal-card h2 { font-size: 22px; line-height: 1.25; margin: 32px 0 8px; letter-spacing: -.01em; }
.legal-card p, .legal-card li { font-size: 16.5px; line-height: 1.6; color: var(--ink); }
.legal-card p { margin: 0 0 14px; }
.legal-card ul { margin: 0 0 14px; padding-left: 22px; }
.legal-card li { margin: 0 0 6px; }
.legal-card a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--accent); }
.legal-card a:hover { color: var(--accent); }
.legal-card table { width: 100%; border-collapse: collapse; margin: 0 0 18px; font-size: 15px; display: block; overflow-x: auto; }
.legal-card th, .legal-card td { text-align: left; vertical-align: top; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.legal-card th { font-weight: 700; white-space: nowrap; }
.legal-card em { color: var(--muted); }
.legal-card p.meta { color: var(--muted); font-size: 14px; margin-bottom: 22px; }
@media (max-width: 640px) { .legal-card { padding: 24px 20px; border-radius: 20px; } }