:root{
  --serif:Georgia,'Iowan Old Style','Times New Roman',serif;
  --sans:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --mono:'SF Mono','JetBrains Mono',ui-monospace,'Courier New',monospace;
  --top:#123a45;--bg:#0b1e28;--bg2:#081820;
  --surface:#123039;--surface2:#16414c;
  --line:rgba(242,193,78,.16);--line-soft:rgba(255,255,255,.08);
  --gold:#f2c14e;--gold-bright:#f8d273;--cream:#f3eedf;--muted:#8ca6ad;--sage:#a9c6a0;--ink:#08131b;--danger:#e2777a;
  --maxw:1080px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;font-family:var(--sans);color:var(--cream);line-height:1.65;
  background:radial-gradient(90% 55% at 50% -8%,var(--top) 0%,var(--bg) 45%,var(--bg2) 100%);
  background-attachment:fixed;-webkit-font-smoothing:antialiased;
}
a{color:var(--gold);text-decoration:none;}
a:hover{text-decoration:underline;}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px;}
h1,h2,h3{font-family:var(--serif);font-weight:600;color:var(--cream);letter-spacing:-.01em;line-height:1.1;text-wrap:balance;margin:0;}
h1{font-size:clamp(32px,6vw,52px);}
h2{font-size:clamp(24px,3.6vw,34px);}
h3{font-size:19px;}
p{margin:0;}
.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);}
.muted{color:var(--muted);}
.small{font-size:13px;}
img{max-width:100%;}

/* nav */
.nav{position:sticky;top:0;z-index:30;backdrop-filter:blur(10px);background:rgba(8,20,27,.78);border-bottom:1px solid var(--line-soft);}
.navrow{display:flex;align-items:center;gap:14px;height:64px;}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--serif);font-weight:600;font-size:19px;color:var(--cream);}
.brand:hover{text-decoration:none;}
.glyph{width:34px;height:34px;border-radius:9px;background:linear-gradient(160deg,#17414d,#0c222c);display:flex;align-items:center;justify-content:center;box-shadow:inset 0 0 0 1px var(--line);}
.glyph.small{width:28px;height:28px;}
/* real Safeinest logo (nest + birds) */
.logo{width:36px;height:36px;border-radius:9px;display:block;box-shadow:0 2px 10px rgba(0,0,0,.35);}
.logo.sm{width:30px;height:30px;}
.hero-logo{width:104px;height:104px;border-radius:26px;margin:0 0 6px;box-shadow:0 10px 40px rgba(0,0,0,.45);}

/* app-store download badges */
.stores{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px;}
.stores.center{justify-content:center;}
.store{display:inline-flex;align-items:center;gap:11px;background:#0a1015;color:var(--cream);border:1px solid var(--line);border-radius:14px;padding:10px 18px;min-width:186px;}
.store:hover{text-decoration:none;border-color:var(--gold);background:#0d151b;}
.store svg{flex:none;}
.store .t{display:flex;flex-direction:column;line-height:1.15;}
.store .t small{font-size:11px;color:var(--muted);letter-spacing:.02em;}
.store .t b{font-size:16px;font-weight:650;font-family:var(--sans);}
.store .soon{margin-left:auto;font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);border:1px solid var(--line);border-radius:20px;padding:2px 7px;}
.store.dim{opacity:.72;}
.links{margin-left:auto;display:flex;align-items:center;gap:24px;}
.links a{font-size:14.5px;color:var(--muted);}
.links a:hover,.links a[aria-current=page]{color:var(--cream);text-decoration:none;}
.navtog,.menu{display:none;}
.menu{margin-left:auto;font-size:24px;color:var(--cream);cursor:pointer;line-height:1;padding:6px;}

.btn{display:inline-flex;align-items:center;gap:8px;font-weight:700;border-radius:14px;padding:13px 22px;cursor:pointer;border:none;font-size:15px;font-family:var(--sans);}
.btn:hover{text-decoration:none;}
.btn.gold{background:linear-gradient(180deg,var(--gold-bright),var(--gold));color:var(--ink);box-shadow:0 0 34px rgba(242,193,78,.26);}
.btn.ghost{background:transparent;color:var(--cream);border:1px solid var(--line);}
.btn.sm{padding:9px 15px;font-size:13.5px;border-radius:11px;}

/* hero + sections */
section{padding:64px 0;}
/* The hero is CENTRED like every band below it — a left-hugging hero over
   centred sections is what made the page read as crooked. */
.hero{padding:84px 0 56px;text-align:center;}
.hero .wrap{display:flex;flex-direction:column;align-items:center;}
/* Centred flex children take their FIT-CONTENT width, which can exceed the
   container on a phone — every child is capped at the container's width. */
.hero .wrap>*{max-width:100%;}
.hero h1{margin:14px 0 0;max-width:min(16ch,100%);}
.hero .lede{font-size:19px;color:#c9d6d9;margin:18px auto 0;max-width:min(56ch,100%);}
/* width:100% matters: inside the centred flex column the badges row would
   otherwise take its max-content width (both badges side by side) and drag
   the whole page wider than a phone screen. */
.hero .stores{justify-content:center;width:100%;}
.cta{display:flex;gap:12px;margin-top:28px;flex-wrap:wrap;}
.fine{font-family:var(--mono);font-size:11.5px;letter-spacing:.04em;color:var(--muted);margin-top:18px;}
.band.alt{background:rgba(8,20,27,.4);border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);}
.sec-head{max-width:640px;margin:0 auto 40px;text-align:center;}
.sec-head h2{margin-top:10px;}
.sec-head p{margin-top:12px;font-size:16px;}
.more{margin-top:30px;text-align:center;}

.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
.grid.feats{grid-template-columns:repeat(2,1fr);}
.feat{border:1px solid var(--line-soft);border-radius:18px;padding:24px;
  background:linear-gradient(180deg,rgba(22,65,76,.36),rgba(18,48,57,.5));
  transition:border-color .2s ease,transform .2s ease;}
.feat:hover{border-color:var(--line);transform:translateY(-2px);}
/* One quiet gold accent per card, so the grid reads as one family. */
.feat::before{content:"";display:block;width:34px;height:3px;border-radius:2px;
  background:linear-gradient(90deg,var(--gold),rgba(242,193,78,0));margin-bottom:14px;}
.feat h3{font-size:18px;}
.feat p{color:var(--muted);font-size:14.5px;margin-top:8px;}

/* Same width as the feature grid above — every band lines up on one rail. */
.two{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
.card{border-radius:18px;padding:24px;border:1px solid var(--line-soft);
  background:linear-gradient(180deg,rgba(22,65,76,.36),rgba(18,48,57,.5));}
.card.ok{border-color:rgba(169,198,160,.32);}
.card.no{border-color:rgba(140,166,173,.32);}
.card h3{display:flex;align-items:center;gap:10px;}
.card h3::before{content:"";width:10px;height:10px;border-radius:50%;flex:none;}
.card.ok h3::before{background:var(--sage);box-shadow:0 0 12px rgba(169,198,160,.5);}
.card.no h3::before{background:var(--muted);}
.card ul{margin:14px 0 0;padding-left:18px;}
.card li{margin-bottom:8px;color:#cfdadd;font-size:14.5px;}

/* prose (content pages) */
.prose{max-width:760px;padding-top:26px;padding-bottom:8px;}
.prose h1{margin:10px 0 0;}
.prose .lead{font-size:19px;color:#c9d6d9;margin:16px 0 8px;}
.prose h2{margin:34px 0 10px;font-size:clamp(21px,3vw,27px);}
.prose p{margin:0 0 14px;color:#dbe4e6;font-size:16.5px;}
.prose ul,.prose ol{margin:0 0 16px;padding-left:22px;color:#dbe4e6;}
.prose li{margin-bottom:9px;font-size:16px;}
.prose a{text-decoration:underline;}
.steps{list-style:decimal;padding-left:22px;margin:6px 0 16px;}
.steps li{margin-bottom:9px;color:#dbe4e6;}
/* The homepage "how it works" — three numbered CARDS on the same rail as the
   feature grid, instead of a bare list floating in a centred band. */
.steps.big{list-style:none;counter-reset:step;display:grid;grid-template-columns:repeat(3,1fr);
  gap:18px;max-width:none;margin:0;padding:0;font-size:15px;}
.steps.big li{margin:0;padding:24px;border:1px solid var(--line-soft);border-radius:18px;
  background:linear-gradient(180deg,rgba(22,65,76,.36),rgba(18,48,57,.5));color:#cfdadd;}
.steps.big li::before{content:counter(step);counter-increment:step;
  display:flex;align-items:center;justify-content:center;width:36px;height:36px;
  border-radius:50%;background:linear-gradient(180deg,var(--gold-bright),var(--gold));
  color:var(--ink);font-family:var(--sans);font-weight:700;font-size:16px;margin-bottom:14px;}
.steps.big li strong{display:block;font-family:var(--serif);font-size:18px;
  color:var(--cream);margin-bottom:6px;}
.updated{font-family:var(--mono);font-size:12px;letter-spacing:.05em;color:var(--muted);margin:6px 0 22px;}
.doc p{font-size:15.5px;}
.qa{border-top:1px solid var(--line-soft);padding:20px 0;}
.qa h2{font-size:20px;margin:0 0 8px;}
.qa p{margin:0;color:#cfdadd;}

/* breadcrumb */
.crumbs{max-width:760px;margin:0 auto;padding:18px 22px 0;font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;align-items:center;}
.crumbs a{color:var(--muted);}
.crumbs [aria-current=page]{color:var(--cream);}

.cta-inline{margin:30px 0 10px;display:flex;gap:12px;flex-wrap:wrap;}
.cta-inline.center{justify-content:center;}
.cta-band{text-align:center;border-top:1px solid var(--line-soft);}
.cta-band h2{max-width:16ch;margin:12px auto 0;}
.cta-band p{margin-top:12px;}
.cta-band .cta{justify-content:center;}

/* header language dropdown (injected by backend/scripts/build-site.mjs) */
.langdd{position:relative;}
.langdd summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:6px;
  font-size:13px;color:var(--muted);border:1px solid var(--line-soft);border-radius:11px;padding:8px 13px;}
.langdd summary::-webkit-details-marker{display:none;}
.langdd summary::after{content:"▾";font-size:10px;color:var(--muted);}
.langdd[open] summary,.langdd summary:hover{color:var(--cream);border-color:var(--line);}
.langdd-menu{position:absolute;right:0;top:calc(100% + 10px);background:#0d1b23;
  border:1px solid var(--line-soft);border-radius:12px;padding:8px;
  display:grid;grid-template-columns:1fr 1fr;gap:2px 12px;min-width:240px;z-index:40;
  box-shadow:0 12px 30px rgba(0,0,0,.45);}
[dir="rtl"] .langdd-menu{right:auto;left:0;}
.langdd-menu a,.langdd-menu span[aria-current]{font-size:13px;padding:5px 8px;border-radius:8px;white-space:nowrap;}
.langdd-menu a{color:var(--muted);}
.langdd-menu a:hover{color:var(--cream);background:rgba(255,255,255,.05);text-decoration:none;}
.langdd-menu span[aria-current]{color:var(--gold);}
@media(max-width:820px){
  .langdd{margin-top:8px;}
  .langdd-menu{position:static;box-shadow:none;background:transparent;border:none;min-width:0;}
}

/* language switcher (injected by backend/scripts/build-site.mjs) */
.langs{display:flex;flex-wrap:wrap;gap:6px 14px;width:100%;font-size:13px;margin-top:4px;}
.langs a{color:var(--muted);}
.langs a:hover{color:var(--cream);text-decoration:none;}
.langs span[aria-current]{color:var(--gold);}

/* right-to-left languages (Arabic, Urdu) — dir="rtl" is set on <html> */
[dir="rtl"] .card ul,[dir="rtl"] .prose ul,[dir="rtl"] .prose ol,
[dir="rtl"] .steps{padding-left:0;padding-right:22px;}
[dir="rtl"] .crumbs ol{padding:0;}
/* letter-spacing breaks joined Arabic-script text — flatten it there */
[dir="rtl"] .eyebrow,[dir="rtl"] .fine,[dir="rtl"] .updated,[dir="rtl"] .cp,
[dir="rtl"] .crumbs{letter-spacing:0;}
/* Urdu reads best in a Nastaliq face with taller lines; falls back safely */
html[lang="ur"] body{font-family:'Noto Nastaliq Urdu','Urdu Typesetting','Jameel Noori Nastaleeq',var(--sans);line-height:2;}
html[lang="ur"] h1,html[lang="ur"] h2,html[lang="ur"] h3{line-height:1.6;}

footer{border-top:1px solid var(--line-soft);padding:30px 0;margin-top:24px;}
.foot{display:flex;flex-wrap:wrap;gap:14px 22px;align-items:center;justify-content:space-between;}
.flinks{display:flex;flex-wrap:wrap;gap:18px;font-size:14px;}
.flinks a{color:var(--muted);}
.foot .cp{font-family:var(--mono);font-size:11.5px;letter-spacing:.04em;color:var(--muted);width:100%;}

@media(max-width:820px){
  .grid,.grid.feats{grid-template-columns:1fr 1fr;}
  .two,.steps.big{grid-template-columns:1fr;}
  .hero{padding:64px 0 44px;}
  .links{display:none;position:absolute;top:64px;left:0;right:0;flex-direction:column;align-items:flex-start;gap:0;background:rgba(8,20,27,.98);border-bottom:1px solid var(--line-soft);padding:8px 22px 16px;}
  .navtog:checked ~ .links{display:flex;}
  .links a{padding:12px 0;width:100%;font-size:16px;}
  .links .btn{margin-top:8px;}
  .menu{display:block;}
}
@media(max-width:560px){
  .grid,.grid.feats{grid-template-columns:1fr;}
  /* Badges may shrink below their comfortable width rather than push the
     page wider than the screen. */
  .store{min-width:0;flex:1 1 150px;}
}

/* print — used to make the per-language PDF guides (scripts/build-guide-pdfs.mjs).
   Paper is white: flip the palette or the guide eats a cartridge. */
@media print{
  body{background:#fff !important;color:#20313a;font-size:12.5px;}
  h1,h2,h3{color:#10222b;}
  a{color:#8a6410;text-decoration:none;}
  .eyebrow{color:#8a6410;}
  .muted,.prose p,.prose li,.steps li{color:#33444d;}
  .updated,.fine{color:#5c6e77;}
  .nav,footer,.langs,.langdd,.cta-inline,.stores,.crumbs,.menu{display:none !important;}
  section{padding:18px 0;}
  .card,.feat{background:#fff;border-color:#d8dde0;break-inside:avoid;}
  .card li{color:#33444d;}
}