/* ============================================================
   SafeMeet — canonical design system
   Single source of truth shared by every page so the header,
   footer, type, color, cards, and prose match the homepage.
   Fonts: Bricolage Grotesque (display) + DM Sans (body).
   Load order: this file LAST so it wins over Tailwind/Inter.
   ============================================================ */

/* Minimal reset for pages that don't ship Tailwind's preflight. Scoped
   to .sm-ui so it never fights a framework reset on other pages. */
.sm-ui,.sm-ui *,.sm-ui *::before,.sm-ui *::after{box-sizing:border-box}
body.sm-ui{margin:0}
.sm-ui h1,.sm-ui h2,.sm-ui h3,.sm-ui h4,.sm-ui h5,.sm-ui h6,.sm-ui p,.sm-ui ul,.sm-ui ol,.sm-ui figure,.sm-ui blockquote{margin:0}
.sm-ui ul,.sm-ui ol{padding:0;list-style:none}
.sm-ui img{display:block;max-width:100%}
.sm-ui a{text-decoration:none;color:inherit}

:root{
  --bg:#060A12; --bg2:#0A0F1C; --bg3:#0F1628;
  --surface:rgba(255,255,255,.04); --surface-h:rgba(255,255,255,.07);
  --border:rgba(255,255,255,.07); --border-h:rgba(255,255,255,.15);
  --tx1:#EEF2FF; --tx2:rgba(238,242,255,.55); --tx3:rgba(238,242,255,.28);
  --green:#1ED760; --red:#FF4655; --blue:#3B8BFF; --blue-dim:rgba(59,139,255,.08);
  --amber:#F5A623; --grad-a:#1266FF; --grad-b:#7B44F2;
  --r-sm:10px; --r-md:16px; --r-lg:22px; --r-xl:30px;
  --ff-display:'Bricolage Grotesque',system-ui,sans-serif;
  --ff-body:'DM Sans',system-ui,sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);
}
[data-theme="light"]{
  --bg:#F2F5FC; --bg2:#E8EDF8; --bg3:#FFFFFF;
  --surface:rgba(0,0,0,.03); --surface-h:rgba(0,0,0,.06);
  --border:rgba(0,0,0,.08); --border-h:rgba(0,0,0,.16);
  --tx1:#090D1A; --tx2:rgba(9,13,26,.56); --tx3:rgba(9,13,26,.30);
  --blue:#1650CC; --blue-dim:rgba(22,80,204,.07); --amber:#C07A00;
  --grad-a:#0F4FD6; --grad-b:#6422D4;
}

/* Force the brand type, overriding Inter / Plus Jakarta / Tailwind
   defaults that made the secondary pages look foreign. Scoped to the
   element + headings (NOT *) so icon fonts (Font Awesome) and <code>
   keep their own family. */
/* Fonts only on the base — never force color/bg here, so pages that use
   Tailwind's `.dark` class for their own light/dark toggle keep working. */
.sm-ui{ font-family:var(--ff-body); -webkit-font-smoothing:antialiased; }
.sm-ui p,.sm-ui li,.sm-ui span,.sm-ui a,.sm-ui div,.sm-ui button,.sm-ui input,.sm-ui label,.sm-ui td,.sm-ui th{ font-family:var(--ff-body); }
.sm-ui h1,.sm-ui h2,.sm-ui h3,.sm-ui h4,.sm-ui h5,.sm-ui h6,.sm-ui .display{
  font-family:var(--ff-display); letter-spacing:-.025em; line-height:1.1;
}
/* brand dark surface only when the page is actually in dark mode */
html.dark .sm-ui{ background:var(--bg); color:var(--tx1); }
.sm-ui i,.sm-ui .fa,.sm-ui .fas,.sm-ui .far,.sm-ui .fab,.sm-ui [class^="fa-"],.sm-ui code,.sm-ui pre{ font-family:revert; }
.sm-ui a{ color:inherit; text-decoration:none; }
.sm-grad{ background:linear-gradient(120deg,var(--grad-a),var(--grad-b));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }

/* ---------- island nav ---------- */
.sm-nav{position:fixed;top:0;left:0;right:0;z-index:1000;height:60px;display:flex;align-items:center;
  justify-content:space-between;width:100%;max-width:100%;margin:0 auto;padding:0 28px;border:1px solid transparent;
  transition:max-width .5s var(--ease),width .5s var(--ease),border-radius .5s var(--ease),top .5s var(--ease),
  height .5s var(--ease),background .4s,box-shadow .4s,border-color .4s}
.sm-nav.scrolled{top:12px;width:calc(100% - 24px);max-width:1040px;height:54px;border-radius:18px;border-color:var(--border-h);
  background:color-mix(in srgb,var(--bg) 78%,transparent);backdrop-filter:blur(26px) saturate(1.4);
  -webkit-backdrop-filter:blur(26px) saturate(1.4);box-shadow:0 14px 44px rgba(0,0,0,.34),0 0 0 1px var(--border)}
.sm-nav .logo{display:flex;align-items:center;gap:9px;font-family:var(--ff-display);font-weight:700;letter-spacing:-.02em;font-size:1.05rem;color:var(--tx1)}
.sm-nav .logo b{background:linear-gradient(135deg,var(--grad-a),var(--grad-b));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;font-weight:700}
.sm-nav .links{display:flex;align-items:center;gap:4px}
.sm-nav .links a{font-size:.82rem;font-weight:500;color:var(--tx2);padding:7px 12px;border-radius:8px;transition:color .15s,background .15s}
.sm-nav .links a:hover{color:var(--tx1);background:var(--surface-h)}
.sm-nav .cta{display:inline-flex;align-items:center;width:auto;flex:none;font-weight:600;font-size:.82rem;line-height:1;color:#fff;
  background:linear-gradient(135deg,var(--grad-a),var(--grad-b));padding:9px 18px;border-radius:999px;box-shadow:none;transition:transform .2s var(--ease)}
.sm-nav .cta:hover{transform:translateY(-1px)}
@media(max-width:1024px){.sm-nav .links{display:none}}
@media(max-width:760px){.sm-nav{padding:0 18px}}

/* page top padding so content clears the fixed nav */
.sm-page{padding-top:88px}

/* ---------- buttons ---------- */
.sm-btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--ff-body);font-weight:600;font-size:.92rem;
  padding:13px 24px;border-radius:999px;min-height:44px;cursor:pointer;transition:transform .2s var(--ease),border-color .2s,background .2s}
.sm-btn-primary{color:#fff;background:linear-gradient(135deg,var(--grad-a),var(--grad-b));box-shadow:0 8px 30px rgba(59,139,255,.28)}
.sm-btn-primary:hover{transform:translateY(-2px)}
.sm-btn-ghost{color:var(--tx1);border:1px solid var(--border-h);background:var(--surface)}
.sm-btn-ghost:hover{border-color:var(--blue);background:var(--blue-dim)}

/* ---------- card / glass (replaces boxy panels) ---------- */
.sm-card{background:var(--bg3);border:1px solid var(--border);border-radius:var(--r-lg);padding:26px 24px;
  box-shadow:0 2px 14px rgba(0,0,0,.28);transition:border-color .25s,transform .3s var(--ease)}
.sm-glass{background:color-mix(in srgb,var(--bg3) 70%,transparent);backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);border:1px solid var(--border);border-radius:var(--r-lg)}

/* ---------- legal / long-form prose ---------- */
.sm-prose{max-width:760px;margin:0 auto;padding:0 24px;color:var(--tx2);font-size:1rem;line-height:1.8}
.sm-prose h1{font-family:var(--ff-display);font-weight:800;letter-spacing:-.035em;color:var(--tx1);
  font-size:clamp(2rem,5vw,3rem);line-height:1.05;margin-bottom:10px}
.sm-prose .updated{color:var(--tx3);font-size:.84rem;margin-bottom:40px}
.sm-prose h2{font-family:var(--ff-display);font-weight:700;color:var(--tx1);font-size:1.45rem;margin:42px 0 14px;letter-spacing:-.02em}
.sm-prose h3{font-family:var(--ff-display);font-weight:600;color:var(--tx1);font-size:1.12rem;margin:26px 0 10px}
.sm-prose p{margin:0 0 16px}
.sm-prose ul{margin:0 0 18px;padding-left:22px;list-style:disc}
.sm-prose ol{margin:0 0 18px;padding-left:22px;list-style:decimal}
.sm-prose li::marker{color:var(--tx3)}
.sm-prose li{margin:0 0 9px}
.sm-prose a{color:var(--blue);border-bottom:1px solid var(--border-h)}
.sm-prose a:hover{border-color:var(--blue)}
.sm-prose strong{color:var(--tx1);font-weight:600}
.sm-prose hr{border:none;border-top:1px solid var(--border);margin:36px 0}
.sm-prose code{font-family:ui-monospace,monospace;font-size:.88em;background:var(--surface);
  padding:2px 7px;border-radius:6px;color:var(--tx1)}

/* ---------- footer ---------- */
.sm-footer{border-top:1px solid var(--border);background:var(--bg);margin-top:60px}
.sm-footer .inner{max-width:1100px;margin:0 auto;padding:42px 28px}
.sm-footer .top{display:flex;flex-wrap:wrap;gap:32px;justify-content:space-between}
.sm-footer .brand{display:flex;align-items:center;gap:9px;font-family:var(--ff-display);font-weight:700;font-size:1.05rem}
.sm-footer .brand b{background:linear-gradient(135deg,var(--grad-a),var(--grad-b));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.sm-footer .links{display:flex;flex-wrap:wrap;gap:22px}
.sm-footer .links a{font-size:.83rem;color:var(--tx2);transition:color .15s}
.sm-footer .links a:hover{color:var(--tx1)}
.sm-footer .disclaimer{font-size:.7rem;line-height:1.7;color:var(--tx3);margin-top:26px;max-width:96ch}
.sm-footer .copy{font-size:.74rem;color:var(--tx3);margin-top:16px;border-top:1px solid var(--border);padding-top:18px;display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between}
.sm-footer .grid{display:grid;grid-template-columns:1.5fr repeat(3,1fr);gap:34px}
@media(max-width:760px){.sm-footer .grid{grid-template-columns:1fr 1fr;gap:28px}}
.sm-footer .col h6{font-family:var(--ff-display);font-size:.78rem;font-weight:700;color:var(--tx1);margin-bottom:14px;text-transform:uppercase;letter-spacing:.08em}
.sm-footer .col ul{list-style:none;display:flex;flex-direction:column;gap:9px}
.sm-footer .col a{font-size:.82rem;color:var(--tx2);transition:color .15s}
.sm-footer .col a:hover{color:var(--tx1)}
.sm-footer .tagline{font-size:.84rem;color:var(--tx2);line-height:1.7;margin-top:12px;max-width:34ch}

/* ---------- secondary-page de-box ----------
   Legacy consent / audio / profile pages used slate hard panels and
   tight rounded-xl buttons. Remap their `.card`, buttons, and glass nav
   to brand glass + pill buttons so they stop looking foreign/boxy. */
.sm-ui .card{border-radius:var(--r-xl)!important}
html.dark .sm-ui .card{
  background:color-mix(in srgb,var(--bg3) 78%,transparent)!important;
  border:1px solid var(--border)!important;
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  box-shadow:0 18px 60px rgba(0,0,0,.34)!important;
}
html:not(.dark) .sm-ui .card{
  background:#fff!important;border:1px solid rgba(0,0,0,.08)!important;
  box-shadow:0 18px 50px rgba(0,0,0,.09)!important;
}
.sm-ui .btn-primary{background:linear-gradient(135deg,var(--grad-a),var(--grad-b))!important;border:none!important;color:#fff!important;border-radius:999px!important}
.sm-ui .btn-secondary{background:var(--surface)!important;border:1px solid var(--border-h)!important;color:var(--tx1)!important;border-radius:999px!important}
html.dark .sm-ui .glass-nav{background:color-mix(in srgb,var(--bg) 72%,transparent)!important;border-bottom:1px solid var(--border)!important;backdrop-filter:blur(24px) saturate(1.4)!important;-webkit-backdrop-filter:blur(24px) saturate(1.4)!important}
.sm-ui audio{border-radius:14px}

/* ---------- split layout (fills the width on single-action pages) ----------
   Left = brand context pane, right = the action card. Replaces the tiny
   marooned max-w-md card that left big empty margins on desktop. */
.sm-split{display:grid;grid-template-columns:1fr;align-items:center;gap:42px;
  max-width:1180px;margin:0 auto;padding:120px 32px 70px;min-height:100vh;min-height:100dvh}
@media(min-width:900px){.sm-split{grid-template-columns:1.05fr .95fr;gap:68px}}
.sm-split-brand .eyebrow{display:inline-block;font-size:.72rem;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--blue);margin-bottom:18px}
.sm-split-brand h1{font-family:var(--ff-display);font-weight:800;letter-spacing:-.035em;
  font-size:clamp(2.2rem,5vw,3.6rem);line-height:1.04;max-width:15ch}
html.dark .sm-split-brand h1{color:var(--tx1)}
.sm-split-brand h1 .g{background:linear-gradient(120deg,var(--grad-a),var(--grad-b));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.sm-split-brand p{font-size:clamp(1rem,1.5vw,1.18rem);line-height:1.7;color:var(--tx2);max-width:46ch;margin-top:22px}
.sm-split-brand .trust{display:flex;align-items:center;gap:10px;margin-top:30px;font-size:.8rem;color:var(--tx3);letter-spacing:.04em}
.sm-split-brand .trust svg{width:16px;height:16px;stroke:var(--blue);fill:none;stroke-width:2}
.sm-split-action{display:flex;justify-content:center}
@media(min-width:900px){.sm-split-action{justify-content:flex-end}.sm-split-brand{order:0}}
.sm-split-action>*{width:100%;max-width:460px}

/* ---------- doc layout (legal pages — sticky TOC fills the side) ---------- */
.sm-doc{display:grid;grid-template-columns:1fr;gap:40px;max-width:1140px;margin:0 auto;padding:0 28px}
@media(min-width:980px){.sm-doc{grid-template-columns:230px 1fr;gap:64px;align-items:start}}
.sm-toc{display:none}
@media(min-width:980px){.sm-toc{display:block;position:sticky;top:96px;align-self:start}}
.sm-toc .lbl{font-size:.7rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--tx3);margin-bottom:16px}
.sm-toc a{display:block;font-size:.84rem;color:var(--tx2);padding:7px 0;border-left:2px solid var(--border);padding-left:14px;transition:color .15s,border-color .15s}
.sm-toc a:hover,.sm-toc a.active{color:var(--tx1);border-color:var(--blue)}
.sm-doc .sm-prose{max-width:760px;margin:0;padding:0}

/* unify any page footer background to the brand surface in dark mode */
html.dark .sm-ui footer{background:var(--bg)!important;border-top-color:var(--border)!important}

@media(prefers-reduced-motion:reduce){.sm-nav{transition:background .2s,border-color .2s}}