/* ============================================================
   SecureGuard — brand stylesheet
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@500;600;700;800&family=Inter:wght@400;500;600;700&display=swap');

:root{
  --blue:       #2D78EE;
  --blue-deep:  #1C4FC4;
  --cyan:       #6FE0FF;
  --navy:       #1B1F35;
  --ink-soft:   #454A6B;
  --muted:      #5B5F7C;
  --paper:      #F3F6FD;
  --green:      #1B8A4F;
  --green-bg:   #F3FBF6;
  --green-line: #CDEEDB;
  --orange:     #FBA841;
  --purple:     #838EFD;
  --purple2:    #B47DEC;
  --mint:       #4CE78C;
  --line:       rgba(27,31,53,0.10);
  --line-soft:  rgba(27,31,53,0.06);
  --line-dark:  rgba(255,255,255,.12);
  --gradient:   linear-gradient(160deg,#2D78EE 0%,#1C4FC4 100%);
  --shadow:     0 30px 80px -32px rgba(20,40,110,.35);
  --shadow-sm:  0 14px 40px -26px rgba(20,40,110,.22);
  --radius-lg:  28px;
  --radius-md:  18px;
  --radius-sm:  10px;
  --maxw:       1220px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:#fff;
  color:var(--navy);
  font-family:'Inter',system-ui,sans-serif;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; }

h1,h2,h3,h4{
  font-family:'Plus Jakarta Sans',system-ui,sans-serif;
  font-weight:800;
  line-height:1.15;
  letter-spacing:-0.01em;
  margin:0 0 .5em;
  color:var(--navy);
}
h1{ font-size:clamp(2rem,4.2vw,2.8rem); }
h2{ font-size:clamp(1.6rem,2.8vw,2.05rem); }
h3{ font-size:1.02rem; }
p{ margin:0 0 1em; color:var(--ink-soft); }
.lede{ font-size:1.08rem; color:var(--ink-soft); max-width:480px; }

.eyebrow{
  font-family:'Plus Jakarta Sans',sans-serif;
  font-weight:800;
  font-size:.78rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--blue);
  display:block;
  margin-bottom:10px;
}

.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 40px; }
section{ padding:88px 0 0; }
@media (max-width:760px){ section{ padding:56px 0 0; } }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6em;
  padding:14px 26px;
  border-radius:999px;
  font-family:'Plus Jakarta Sans',sans-serif;
  font-weight:700;
  font-size:.92rem;
  text-decoration:none;
  border:1px solid transparent;
  cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease, filter .18s ease;
  white-space:nowrap;
}
.btn-gradient{ background:var(--gradient); color:#fff; }
.btn-gradient:hover{ filter:brightness(1.06); transform:translateY(-2px); box-shadow:0 16px 34px -16px rgba(45,120,238,.5); }
.btn-white{ background:#fff; color:var(--blue-deep); }
.btn-white:hover{ background:#EEF3FE; transform:translateY(-2px); }
.btn-ghost{ background:transparent; color:var(--navy); border-color:var(--line); }
.btn-ghost:hover{ border-color:var(--navy); }
.btn-sm{ padding:10px 18px; font-size:.86rem; }

.store{
  display:inline-flex; align-items:center; gap:10px;
  background:#fff; color:var(--blue-deep);
  padding:13px 22px; border-radius:14px;
  font-family:'Plus Jakarta Sans',sans-serif;
  text-decoration:none;
}
.store small{ display:block; font-size:.65rem; color:#6B7BB8; font-weight:500; }
.store strong{ font-size:1rem; font-weight:700; }
.store:hover{ background:#EEF3FE; }

/* ---------- Nav ---------- */
header.site{
  background:#fff;
  border-bottom:1px solid var(--line-soft);
  /* Deliberately NOT position:sticky. Two targeted fixes for sticky-header
     bugs (missing -webkit-backdrop-filter, then removing backdrop-filter
     entirely) were each confirmed dead on a real device via screen
     recording, and the header kept detaching from the top and rendering
     mid-content during scroll on iOS Safari regardless. The homepage's
     header (.on-gradient below) was already static for unrelated reasons
     and never once showed this bug in any of the reports — that's the
     tell. Rather than guess a third root cause blind, sticky positioning
     itself is removed here. The header now scrolls away with the page,
     the same as it already did on the homepage. This makes the whole bug
     class structurally impossible instead of patching around it again.
  */
}
header.site.on-gradient{ background:transparent; border-bottom:1px solid rgba(255,255,255,.14); }
.nav{ display:flex; align-items:center; justify-content:space-between; padding:22px 0; }
.brand{ display:flex; align-items:center; gap:10px; text-decoration:none; }
.brand img{ width:34px; height:34px; border-radius:9px; }
.brand span{ font-family:'Plus Jakarta Sans',sans-serif; font-weight:800; font-size:1.1rem; color:var(--navy); }
.on-gradient .brand span{ color:#fff; }
.nav-links{ display:flex; align-items:center; gap:26px; }
.nav-links a{ text-decoration:none; color:var(--ink-soft); font-size:.94rem; font-weight:500; }
.nav-links a:hover{ color:var(--navy); }
.on-gradient .nav-links a{ color:rgba(255,255,255,.88); }
.on-gradient .nav-links a:hover{ color:#fff; }

/* ---------- Footer ---------- */
footer.site{ background:var(--navy); color:#9BA0C2; padding:56px 0 26px; margin-top:96px; }
footer.site a{ color:#D8DCF5; text-decoration:none; }
footer.site a:hover{ color:var(--cyan); }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; padding-bottom:30px; border-bottom:1px solid var(--line-dark); }
.footer-grid h4{ color:#fff; font-family:'Plus Jakarta Sans',sans-serif; font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; margin-bottom:12px; font-weight:700; opacity:.65; }
.footer-grid ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px; font-size:.92rem; }
.footer-brand{ display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.footer-brand img{ width:28px; height:28px; border-radius:8px; }
.footer-brand span{ font-family:'Plus Jakarta Sans',sans-serif; font-weight:800; color:#fff; }
.footer-bottom{ padding-top:22px; font-size:.82rem; color:#5A5F84; }

/* ---------- Hero ---------- */
.hero-band{ background:var(--gradient); }
.hero{ display:grid; grid-template-columns:1.05fr .95fr; gap:40px; align-items:center; padding:20px 0 64px; }
.hero h1{ color:#fff; }
.hero .lede{ color:rgba(255,255,255,.88); }
.hero-shot{ display:flex; justify-content:center; }
.hero-shot img{ width:82%; border-radius:34px; box-shadow:var(--shadow); }
.trust-note{ font-size:.76rem; color:rgba(255,255,255,.62); margin-top:6px; }
.trust{ font-size:.86rem; color:rgba(255,255,255,.8); }
.trust b{ color:#fff; }

/* ---------- Cards & grids ---------- */
.trustbar{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:18px; padding:24px 32px; background:var(--paper); border-radius:20px; font-size:.9rem; color:var(--ink-soft); }
.trustbar b{ font-family:'Plus Jakarta Sans',sans-serif; color:var(--navy); }

.feat-row{ display:flex; gap:28px; align-items:flex-start; padding:30px 0; border-top:1px solid var(--line-soft); }
.feat-row:first-of-type{ border-top:none; }
.feat-num{ font-family:'Plus Jakarta Sans',sans-serif; font-weight:800; color:#B9C5EC; font-size:1.3rem; flex:none; width:44px; }
.feat-row h3{ margin:0 0 8px; }
.feat-row p{ font-size:.94rem; margin:0; max-width:600px; }

.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:20px; min-width:0; }
.seccard{ background:var(--paper); border-radius:18px; padding:22px; display:flex; align-items:center; gap:16px; }
.sec-icon{ width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:1.15rem; flex:none; }
.seccard .name{ font-weight:700; font-family:'Plus Jakarta Sans',sans-serif; font-size:.96rem; }
.seccard .status{ color:#2FAE68; font-size:.84rem; font-weight:600; }

.pill{ background:var(--paper); color:var(--muted); font-size:.85rem; padding:9px 16px; border-radius:999px; display:inline-flex; align-items:center; gap:6px; }
.pill.optimal{ background:#EAF1FD; color:var(--blue); font-weight:700; }

.privacy-box{ border-radius:20px; padding:28px; }
.privacy-box.good{ background:var(--green-bg); border:1px solid var(--green-line); }
.privacy-box.info{ background:var(--paper); border:1px solid #D9E3F8; }
.privacy-box h3{ margin-bottom:14px; }
.privacy-box ul{ margin:0; padding-left:20px; color:#3A4256; font-size:.94rem; line-height:1.9; }

.contact-box{ border-radius:20px; padding:26px; }
.contact-box.support{ background:var(--paper); border:1px solid #D9E3F8; }
.contact-box.privacy{ background:var(--green-bg); border:1px solid var(--green-line); }
.contact-box a.mail{ font-family:'Plus Jakarta Sans',sans-serif; font-weight:700; text-decoration:none; font-size:1.02rem; }
.contact-box.support a.mail{ color:var(--blue); }
.contact-box.privacy a.mail{ color:var(--green); }

.faq-wrap{ background:var(--paper); border-radius:22px; padding:8px 28px; }
.faq-item{ border-bottom:1px solid #E9ECF7; padding:20px 0; }
.faq-item:last-child{ border-bottom:none; }
.faq-item h3{ margin:0 0 6px; }
.faq-item p{ margin:0; font-size:.9rem; }

.callout{ background:var(--paper); border-radius:16px; padding:20px 24px; margin-top:20px; font-size:.88rem; color:var(--muted); }
.callout strong{ color:var(--navy); }

/* ---------- Legal pages ---------- */
.legal-hero{ padding:70px 0 36px; background:var(--paper); }
.legal-meta{ color:var(--muted); font-size:.9rem; font-weight:600; }
.legal-body{ padding:40px 0 100px; }
.legal-layout{ display:grid; grid-template-columns:240px 1fr; gap:52px; align-items:start; }
.legal-toc{ position:sticky; top:96px; background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-md); padding:22px; }
.legal-toc h4{ font-family:'Plus Jakarta Sans',sans-serif; font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-bottom:14px; }
.legal-toc ol{ list-style:none; margin:0; padding:0; counter-reset:toc; display:flex; flex-direction:column; gap:10px; }
.legal-toc li{ counter-increment:toc; }
.legal-toc a{ text-decoration:none; color:var(--ink-soft); font-size:.88rem; display:flex; gap:8px; }
.legal-toc a::before{ content:counter(toc); font-family:'Plus Jakarta Sans',sans-serif; font-weight:700; color:var(--blue); font-size:.78rem; }
.legal-toc a:hover{ color:var(--navy); }

.legal-content{ background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); padding:44px 48px; min-width:0; }
.legal-content h2{ font-size:1.28rem; margin-top:2.2em; padding-top:1.5em; border-top:1px solid var(--line-soft); scroll-margin-top:100px; }
.legal-content h2:first-child{ margin-top:0; border-top:none; padding-top:0; }
.legal-content h3{ font-size:1rem; margin-top:1.5em; }
.legal-content p, .legal-content li{ color:var(--ink-soft); }
.legal-content ul, .legal-content ol{ padding-left:1.3em; }
.legal-content li{ margin-bottom:.5em; }
.legal-content table{ width:100%; border-collapse:collapse; margin:1.4em 0; font-size:.9rem; }
.legal-content th, .legal-content td{ text-align:left; padding:10px 14px; border-bottom:1px solid var(--line-soft); vertical-align:top; }
.legal-content thead th{ font-family:'Plus Jakarta Sans',sans-serif; font-size:.7rem; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); }
.legal-content strong{ color:var(--navy); }
.legal-callout{ background:#EAF1FD; border:1px solid #C7D8F7; border-radius:var(--radius-sm); padding:18px 20px; margin:1.6em 0; font-size:.94rem; color:var(--ink-soft); }
.legal-callout strong{ color:var(--blue-deep); }

.contact-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin:2em 0; }
.contact-tile{ border:1px solid var(--line); border-radius:var(--radius-md); padding:20px; background:var(--paper); }
.contact-tile .eyebrow{ margin-bottom:.5em; }
.contact-tile a.mail{ font-family:'Plus Jakarta Sans',sans-serif; font-weight:700; color:var(--blue); text-decoration:none; word-break:break-all; }

.text-center{ text-align:center; }
.center-col{ max-width:760px; margin:0 auto; }
.gallery{ display:flex; gap:20px; overflow-x:auto; padding:10px 4px 20px; }
.gallery img{ height:400px; border-radius:24px; box-shadow:var(--shadow); flex:none; }
@media (max-width:700px){ .gallery img{ height:320px; } }

/* ============================================================
   MOBILE OVERRIDES — deliberately last in the file.
   For equal CSS specificity, the LAST rule in source order wins,
   even inside a media query — an override written before the rule
   it overrides gets silently cancelled out. Every mobile rule
   stays down here for that reason, several with !important as a
   second line of defence against future edits reordering things.
   ============================================================ */
@media (max-width:900px){
  .wrap{ padding:0 22px !important; }
  .nav-links{ display:none !important; }
  .hero{ grid-template-columns:1fr !important; gap:28px; padding-bottom:48px; }
  .hero > div:last-child{ order:-1; }
  .hero-shot img{ width:100%; }
  .grid-2{ grid-template-columns:1fr !important; }
  .footer-grid{ grid-template-columns:1fr 1fr !important; gap:28px; }
  .legal-layout{ grid-template-columns:1fr !important; }
  .legal-toc{ position:static !important; top:auto; width:100%; min-width:0; }
  .legal-content{ padding:32px !important; }
  .contact-grid{ grid-template-columns:1fr !important; }
}
@media (max-width:600px){
  .footer-grid{ grid-template-columns:1fr !important; }
  .legal-content{ padding:24px 20px !important; }
  .legal-content table{ display:block; overflow-x:auto; }
}
@media (max-width:400px){
  /* Secondary header CTA (Privacy requests / Email support / Email us) collides
     with the brand name at the narrowest phone widths (iPhone SE class).
     Safe to hide here — every one of these emails is also shown prominently
     in-page (contact tiles / Support section), so nothing is lost. The
     primary "Get the app" button on the homepage uses .btn-white, a
     different class, and is untouched by this rule. */
  .nav .btn-ghost, .nav .btn-gradient{ display:none !important; }
}