/* SafeMeet use-case pages — shares the homepage design language
   (Bricolage Grotesque / DM Sans, same token names and scale). */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}

:root{
  --bg:#060A12; --bg2:#0A0F1C; --bg3:#0F1628;
  --surface:rgba(255,255,255,0.04); --surface-h:rgba(255,255,255,0.07);
  --border:rgba(255,255,255,0.07); --border-h:rgba(255,255,255,0.15);
  --tx1:#EEF2FF; --tx2:rgba(238,242,255,0.55); --tx3:rgba(238,242,255,0.28);
  --green:#1ED760; --red:#FF4655; --blue:#3B8BFF; --blue-dim:rgba(59,139,255,0.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-expo:cubic-bezier(0.16,1,0.3,1);
}
[data-theme="light"]{
  --bg:#F2F5FC; --bg2:#E8EDF8; --bg3:#FFFFFF;
  --surface:rgba(0,0,0,0.03); --surface-h:rgba(0,0,0,0.06);
  --border:rgba(0,0,0,0.08); --border-h:rgba(0,0,0,0.16);
  --tx1:#090D1A; --tx2:rgba(9,13,26,0.56); --tx3:rgba(9,13,26,0.30);
  --blue:#1650CC; --blue-dim:rgba(22,80,204,0.07); --amber:#C07A00;
  --grad-a:#0F4FD6; --grad-b:#6422D4;
}

body{font-family:var(--ff-body);background:var(--bg);color:var(--tx1);
  -webkit-font-smoothing:antialiased;line-height:1.6;overflow-x:hidden}

.wrap{max-width:1080px;margin:0 auto;padding:0 24px}
@media(min-width:760px){.wrap{padding:0 40px}}

/* nav */
.nav{position:sticky;top:0;z-index:40;height:60px;display:flex;align-items:center;
  width:100%;max-width:100%;margin:0 auto;border:1px solid transparent;
  background:color-mix(in srgb,var(--bg) 70%,transparent);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  transition:max-width .5s var(--ease-expo),width .5s var(--ease-expo),border-radius .5s var(--ease-expo),top .5s var(--ease-expo),height .5s var(--ease-expo),border-color .4s var(--ease-expo),box-shadow .4s var(--ease-expo),background .4s var(--ease-expo)}
.nav.scrolled{top:12px;width:calc(100% - 24px);max-width:1040px;height:52px;border-radius:18px;
  border-color:var(--border-h);box-shadow:0 14px 44px rgba(0,0,0,0.32),0 0 0 1px var(--border)}
@media(prefers-reduced-motion:reduce){.nav{transition:background .2s,border-color .2s}}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;width:100%}
.nav-logo{display:flex;align-items:center;gap:8px;font-family:var(--ff-display);
  font-weight:700;letter-spacing:-0.02em;font-size:1.02rem}
.nav-logo span{background:linear-gradient(135deg,var(--grad-a),var(--grad-b));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.nav-cta{font-family:var(--ff-body);font-weight:600;font-size:0.82rem;color:#fff;
  background:linear-gradient(135deg,var(--grad-a),var(--grad-b));
  padding:9px 18px;border-radius:999px;transition:transform .2s var(--ease-expo)}
.nav-cta:hover{transform:translateY(-1px)}

/* breadcrumb */
.crumb{font-size:0.76rem;color:var(--tx3);padding:22px 0 0}
.crumb a{color:var(--tx2)}
.crumb a:hover{color:var(--tx1)}

/* hero */
.uc-hero{padding:clamp(40px,7vw,84px) 0 clamp(32px,5vw,56px)}
.eyebrow{display:inline-block;font-size:0.72rem;font-weight:600;letter-spacing:0.14em;
  text-transform:uppercase;color:var(--tx3);margin-bottom:18px}
.uc-hero h1{font-family:var(--ff-display);font-weight:800;letter-spacing:-0.03em;
  font-size:clamp(2rem,5.4vw,3.4rem);line-height:1.05;color:var(--tx1);max-width:18ch}
.uc-hero h1 .grad{background:linear-gradient(120deg,var(--grad-a),var(--grad-b));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.uc-lede{font-size:clamp(1.02rem,1.6vw,1.18rem);line-height:1.7;color:var(--tx2);
  max-width:60ch;margin-top:20px}
.uc-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px;align-items:center}
.btn{font-family:var(--ff-body);font-weight:600;font-size:0.92rem;padding:13px 24px;
  border-radius:999px;transition:transform .2s var(--ease-expo),border-color .2s,background .2s;
  display:inline-flex;align-items:center;gap:8px;min-height:44px}
.btn-primary{color:#fff;background:linear-gradient(135deg,var(--grad-a),var(--grad-b))}
.btn-primary:hover{transform:translateY(-2px)}
.btn-ghost{color:var(--tx2);border:1px solid var(--border-h);background:var(--surface)}
.btn-ghost:hover{color:var(--tx1);border-color:var(--blue);background:var(--blue-dim)}

/* stat strip */
.uc-stat-strip{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
.uc-stat{flex:1;min-width:150px;background:var(--bg3);border:1px solid var(--border);
  border-radius:var(--r-md);padding:18px 20px}
.uc-stat b{display:block;font-family:var(--ff-display);font-weight:700;font-size:1.5rem;
  color:var(--tx1);font-variant-numeric:tabular-nums}
.uc-stat span{font-size:0.78rem;color:var(--tx2);line-height:1.5}
.uc-stat em{display:block;font-size:0.64rem;color:var(--tx3);font-style:italic;margin-top:4px}

/* sections */
.uc-sec{padding:clamp(40px,6vw,72px) 0;border-top:1px solid var(--border)}
.uc-sec h2{font-family:var(--ff-display);font-weight:700;letter-spacing:-0.025em;
  font-size:clamp(1.5rem,3vw,2.1rem);line-height:1.12;color:var(--tx1);max-width:20ch}
.uc-sec p{color:var(--tx2);font-size:1rem;line-height:1.74;max-width:64ch;margin-top:16px}
.uc-sec p strong{color:var(--tx1);font-weight:600}

/* flow steps */
.flow{display:grid;gap:14px;margin-top:30px;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.flow-step{background:var(--bg3);border:1px solid var(--border);border-radius:var(--r-lg);
  padding:22px 20px;position:relative;transition:border-color .2s,transform .3s var(--ease-expo)}
.flow-step:hover{border-color:var(--border-h);transform:translateY(-3px)}
.flow-step .n{font-family:var(--ff-display);font-weight:700;font-size:0.78rem;color:var(--blue);
  letter-spacing:0.08em}
.flow-step h3{font-family:var(--ff-display);font-weight:700;font-size:1.04rem;color:var(--tx1);
  margin:10px 0 8px}
.flow-step p{font-size:0.88rem;color:var(--tx2);line-height:1.6;margin:0}

/* feature list */
.feat{display:grid;gap:13px;margin-top:26px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.feat li{list-style:none;display:flex;gap:12px;align-items:flex-start;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);padding:16px 18px}
.feat svg{width:20px;height:20px;flex:none;stroke:var(--green);fill:none;stroke-width:2;margin-top:1px}
.feat b{font-family:var(--ff-display);font-size:0.92rem;color:var(--tx1);display:block;margin-bottom:3px}
.feat span{font-size:0.84rem;color:var(--tx2);line-height:1.55}

/* faq */
.faq details{border-bottom:1px solid var(--border);padding:18px 0}
.faq summary{font-family:var(--ff-display);font-weight:600;font-size:1rem;color:var(--tx1);
  cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';color:var(--tx3);font-size:1.3rem;transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{color:var(--tx2);font-size:0.94rem;line-height:1.7;margin-top:12px;max-width:64ch}

/* cta band */
.uc-cta{margin:clamp(40px,6vw,72px) 0;background:linear-gradient(135deg,
  color-mix(in srgb,var(--bg3) 88%,var(--grad-a)),
  color-mix(in srgb,var(--bg3) 88%,var(--grad-b)));
  border:1px solid var(--border-h);border-radius:var(--r-xl);
  padding:clamp(32px,5vw,52px);text-align:center}
.uc-cta h2{font-family:var(--ff-display);font-weight:800;letter-spacing:-0.025em;
  font-size:clamp(1.5rem,3.4vw,2.3rem);color:var(--tx1);margin:0 auto;max-width:20ch}
.uc-cta p{color:var(--tx2);margin:14px auto 26px;max-width:52ch}

/* scan-to-install (desktop) */
.scan{display:none;align-items:center;gap:18px;justify-content:center;margin-top:8px}
@media(min-width:860px){.scan{display:inline-flex}}
.scan-qr{width:104px;height:104px;border-radius:var(--r-md);background:#fff;padding:8px;flex:none}
.scan-qr img{width:100%;height:100%;image-rendering:pixelated}
.scan-txt{text-align:left}
.scan-txt b{font-family:var(--ff-display);color:var(--tx1);font-size:0.96rem;display:block}
.scan-txt span{font-size:0.82rem;color:var(--tx2)}

/* footer */
.uc-foot{border-top:1px solid var(--border);padding:40px 0 50px;margin-top:20px}
.uc-foot .links{display:flex;flex-wrap:wrap;gap:18px;font-size:0.82rem}
.uc-foot .links a{color:var(--tx2)}
.uc-foot .links a:hover{color:var(--tx1)}
.uc-foot .related{margin-top:24px;font-size:0.82rem;color:var(--tx2)}
.uc-foot .related a{color:var(--blue)}
.uc-disclaimer{font-size:0.7rem;line-height:1.7;color:var(--tx3);margin-top:24px;max-width:80ch}
.uc-copy{font-size:0.74rem;color:var(--tx3);margin-top:18px}

@media(prefers-reduced-motion:reduce){*{transition:none!important}}