/* SpeakSmart AI — shared design system for the marketing/legal website.
   Palette matches the mobile app's theme.ts exactly. */

:root{
  --void:#05080F; --surface:#090D18; --elevated:#0D1422; --card:#111B2E; --card2:#162236;
  --border:#1A2C44; --borderHi:#25405E;

  --teal:#00CFBD; --tealLt:#52EDE3; --tealDk:#008F84; --tealGhost:rgba(0,207,189,0.10);
  --coral:#FF5740; --amber:#FFAF18;

  --t1:#E2EDF8; --t2:#7A93AE; --t3:#364E65;

  --maxw:1120px;
  --radius:18px;
  --radius-lg:26px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; background:var(--void); color:var(--t1);
  font-family:-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  line-height:1.6; -webkit-font-smoothing:antialiased;
}
a{color:var(--teal); text-decoration:none;}
a:hover{text-decoration:underline;}
img{max-width:100%; display:block;}

.wrap{max-width:var(--maxw); margin:0 auto; padding:0 28px;}

/* ── Header / nav ─────────────────────────────────────────────── */
.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(5,8,15,0.85); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
}
.nav{display:flex; align-items:center; justify-content:space-between; padding:18px 28px; max-width:var(--maxw); margin:0 auto;}
.brand{display:flex; align-items:center; gap:12px; font-weight:800; font-size:20px; color:var(--t1);}
.brand:hover{text-decoration:none;}
.brand .mark{width:38px; height:38px; border-radius:11px; flex-shrink:0;
  background:linear-gradient(135deg,#0A1640 0%,#0C2A6B 45%,#0A8E94 85%,#00CFBD 100%);
  display:flex; align-items:center; justify-content:center; font-size:18px;}
.navlinks{display:flex; gap:34px; align-items:center;}
.navlinks a{color:var(--t2); font-weight:600; font-size:15px;}
.navlinks a:hover, .navlinks a.active{color:var(--t1); text-decoration:none;}
.nav-cta{
  background:var(--teal); color:#04211E !important; font-weight:700; font-size:14px;
  padding:11px 22px; border-radius:999px;
}
.nav-cta:hover{background:var(--tealLt); text-decoration:none;}
.navtoggle{display:none; background:none; border:1px solid var(--border); border-radius:10px; color:var(--t1); font-size:22px; padding:6px 12px; cursor:pointer;}

@media (max-width:860px){
  .navlinks{
    position:absolute; top:100%; left:0; right:0; background:var(--surface);
    border-bottom:1px solid var(--border); flex-direction:column; gap:0;
    max-height:0; overflow:hidden; transition:max-height 0.25s ease;
  }
  .navlinks.open{max-height:400px;}
  .navlinks a{width:100%; padding:18px 28px; border-bottom:1px solid var(--border);}
  .nav-cta{margin:18px 28px; text-align:center;}
  .navtoggle{display:block;}
}
@media (max-width:480px){
  .nav{padding:14px 18px;}
  .brand{font-size:16px; gap:8px;}
  .brand .mark{width:32px; height:32px; font-size:15px; border-radius:9px;}
  .navtoggle{font-size:18px; padding:5px 10px;}
}

/* ── Footer ────────────────────────────────────────────────────── */
.site-footer{border-top:1px solid var(--border); padding:56px 0 36px; margin-top:80px; background:var(--surface);}
.footer-grid{display:flex; justify-content:space-between; gap:40px; flex-wrap:wrap;}
.footer-brand .mark{width:34px;height:34px;border-radius:10px;background:linear-gradient(135deg,#0A1640,#00CFBD);display:inline-flex;align-items:center;justify-content:center;margin-bottom:14px;}
.footer-brand p{color:var(--t2); font-size:14px; max-width:320px;}
.footer-cols{display:flex; gap:56px; flex-wrap:wrap;}
.footer-col h4{font-size:13px; text-transform:uppercase; letter-spacing:1px; color:var(--t2); margin:0 0 14px 0;}
.footer-col a{display:block; color:var(--t1); font-size:15px; margin-bottom:11px;}
.footer-col a:hover{color:var(--teal); text-decoration:none;}
.footer-bottom{margin-top:48px; padding-top:24px; border-top:1px solid var(--border); display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; color:var(--t3); font-size:13px;}
@media (max-width:600px){.footer-grid, .footer-cols{flex-direction:column; gap:32px;}}

/* ── Buttons ───────────────────────────────────────────────────── */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; font-weight:700; font-size:16px; padding:16px 32px; border-radius:999px; cursor:pointer; border:none;}
.btn-primary{background:var(--teal); color:#04211E;}
.btn-primary:hover{background:var(--tealLt); text-decoration:none;}
.btn-ghost{background:rgba(255,255,255,0.06); color:var(--t1); border:1px solid var(--borderHi);}
.btn-ghost:hover{background:rgba(255,255,255,0.1); text-decoration:none;}

/* ── Legal-page layout ─────────────────────────────────────────── */
.legal-hero{padding:64px 0 24px; border-bottom:1px solid var(--border); background:
  radial-gradient(circle at 85% 0%, rgba(0,207,189,0.12) 0%, rgba(0,207,189,0) 50%);}
.legal-hero h1{font-size:42px; margin:0 0 10px 0; letter-spacing:-0.5px;}
.legal-hero .meta{color:var(--t2); font-size:15px;}
.legal-body{padding:48px 0 100px; display:flex; gap:56px; align-items:flex-start;}
.legal-toc{flex:0 0 240px; position:sticky; top:110px;}
.legal-toc h4{font-size:12px; text-transform:uppercase; letter-spacing:1px; color:var(--t3); margin-bottom:14px;}
.legal-toc a{display:block; color:var(--t2); font-size:14px; padding:7px 0; border-left:2px solid transparent; padding-left:14px;}
.legal-toc a:hover{color:var(--t1); text-decoration:none;}
.legal-content{flex:1; min-width:0; max-width:760px;}
.legal-content h2{font-size:25px; margin:48px 0 16px 0; color:var(--t1); scroll-margin-top:110px;}
.legal-content h2:first-child{margin-top:0;}
.legal-content h3{font-size:18px; margin:28px 0 10px 0; color:var(--tealLt);}
.legal-content p, .legal-content li{color:var(--t2); font-size:15.5px;}
.legal-content ul{padding-left:22px;}
.legal-content li{margin-bottom:8px;}
.legal-content strong{color:var(--t1);}
.legal-content table{width:100%; border-collapse:collapse; margin:18px 0; font-size:14.5px;}
.legal-content th, .legal-content td{border:1px solid var(--border); padding:11px 14px; text-align:left; color:var(--t2);}
.legal-content th{color:var(--t1); background:var(--card);}
.callout{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:22px 26px; margin:24px 0;}
.callout.teal{border-color:rgba(0,207,189,0.35); background:var(--tealGhost);}
@media (max-width:900px){.legal-toc{display:none;} .legal-body{padding-top:32px;}}

/* ── Misc shared ──────────────────────────────────────────────── */
.section{padding:90px 0;}
.eyebrow{color:var(--teal); font-weight:700; font-size:13px; letter-spacing:2px; text-transform:uppercase; margin-bottom:14px;}
.section h2{font-size:36px; margin:0 0 16px 0; letter-spacing:-0.5px;}
.section .lead{color:var(--t2); font-size:17px; max-width:620px;}