/* ============================================================
   Clenox — 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{
  --ink:        #12142B;
  --ink-soft:   #454A6B;
  --muted:      #5B5F7C;
  --paper:      #F5F6FB;
  --blue:       #5EA1FF;
  --purple:     #4434F7;
  --violet:     #7B5CFA;
  --gradient:   linear-gradient(135deg,#5EA1FF 0%,#4434F7 55%,#7B5CFA 100%);
  --navy:       #12142B;
  --navy-soft:  #1B1E3D;
  --green:      #00B67A;
  --line:       rgba(18,20,43,0.10);
  --line-soft:  rgba(18,20,43,0.06);
  --line-dark:  rgba(255,255,255,.12);
  --shadow:     0 30px 80px -32px rgba(40,30,120,.35);
  --shadow-sm:  0 14px 40px -26px rgba(20,20,60,.25);
  --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(--ink);
  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.14;
  letter-spacing:-0.01em;
  margin:0 0 .5em;
  color:var(--ink);
}
h1{ font-size:clamp(2rem,4.2vw,3rem); }
h2{ font-size:clamp(1.6rem,2.8vw,2.1rem); }
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:500px; }

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

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

/* ---------- 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(68,52,247,.5); }
.btn-white{ background:#fff; color:var(--purple); }
.btn-white:hover{ background:#EDEBFF; transform:translateY(-2px); }
.btn-navy{ background:var(--navy); color:#fff; }
.btn-navy:hover{ background:var(--navy-soft); transform:translateY(-2px); }
.btn-ghost{ background:transparent; color:var(--ink); border-color:var(--line); }
.btn-ghost:hover{ border-color:var(--ink); }
.btn-sm{ padding:10px 18px; font-size:.86rem; }

.store-badge{
  display:inline-flex; align-items:center; gap:12px;
  padding:12px 22px 12px 18px;
  border-radius:14px;
  background:var(--navy);
  color:#fff;
  text-decoration:none;
}
.store-badge .lines{ display:flex; flex-direction:column; line-height:1.15; }
.store-badge .lines small{ font-size:.65rem; color:#9CA0C7; font-weight:500; }
.store-badge .lines strong{ font-size:1.02rem; font-family:'Plus Jakarta Sans',sans-serif; }
.store-badge:hover{ background:var(--navy-soft); }

/* ---------- Nav ---------- */
header.site{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.82);
  backdrop-filter:blur(14px) saturate(1.4);
  border-bottom:1px solid var(--line-soft);
}
header.site.on-gradient{
  background:transparent;
  border-bottom:1px solid rgba(255,255,255,.16);
  position:static;
}
.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(--ink); }
.on-gradient .brand span{ color:#fff; }
.nav-links{ display:flex; align-items:center; gap:28px; }
.nav-links a{ text-decoration:none; color:var(--ink-soft); font-size:.94rem; font-weight:500; }
.nav-links a:hover{ color:var(--ink); }
.on-gradient .nav-links a{ color:rgba(255,255,255,.88); }
.on-gradient .nav-links a:hover{ color:#fff; }
@media (max-width:820px){ .nav-links{ display:none; } }

/* ---------- Footer ---------- */
footer.site{
  background:var(--navy);
  color:#9CA0C7;
  padding:56px 0 26px;
  margin-top:96px;
}
footer.site a{ color:#D8DCF5; text-decoration:none; }
footer.site a:hover{ color:var(--blue); }
.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:.7;}
.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{
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px;
  padding-top:22px; font-size:.82rem; color:#6B6F94;
}

/* ---------- Hero ---------- */
.hero-band{ background:var(--gradient); padding-bottom:80px; }
.hero-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:40px; align-items:center; padding-top:20px; }
.sticker{
  display:inline-block; background:#fff; color:var(--ink); font-family:'Plus Jakarta Sans',sans-serif; font-weight:800;
  padding:14px 24px; border-radius:20px; font-size:1.6rem; box-shadow:0 20px 40px -18px rgba(0,0,0,.35);
  transform:rotate(-2deg); margin-bottom:16px; line-height:1.25;
}
.hero-grid h1{ color:#fff; margin:8px 0 18px; }
.hero-grid p.lede{ color:rgba(255,255,255,.9); }
.hero-grid .trust{ font-size:.86rem; color:rgba(255,255,255,.82); }
.hero-grid .trust b{ color:#fff; }
.hero-shot{ border-radius:28px; overflow:hidden; box-shadow:var(--shadow); }
.hero-shot img{ width:100%; display:block; }

/* ---------- Cards / grids ---------- */
.card{ background:var(--paper); border-radius:20px; padding:26px; }
.grid-4{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:28px; }
.ficon{ width:46px; height:46px; border-radius:13px; background:var(--gradient); display:flex; align-items:center; justify-content:center; font-size:1.2rem; margin-bottom:14px; }
.card h3{ margin:0 0 8px; }
.card p{ font-size:.88rem; margin:0; line-height:1.5; }

.tcard{ background:#fff; border-radius:18px; padding:22px; box-shadow:var(--shadow-sm); }
.tcard .name{ font-weight:700; font-family:'Plus Jakarta Sans',sans-serif; margin-bottom:4px; }
.tcard .stars{ color:var(--green); letter-spacing:2px; margin-bottom:8px; font-size:.9rem; }
.tcard p{ font-size:.86rem; margin:0; }

/* ---------- Dark band ---------- */
.band-navy{ background:var(--navy); padding:88px 0; }
.band-navy h2{ color:#fff; }
.band-navy p{ color:#B8BEDC; }
.band-navy .eyebrow{ color:#8FA8FF; }
.check-panel{ background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); border-radius:20px; padding:26px; }
.check-panel .row{ display:flex; gap:10px; color:#D8DCF5; font-size:.92rem; margin-bottom:12px; }
.check-panel .row:last-child{ margin-bottom:0; }

/* ---------- Gallery ---------- */
.gallery{ display:flex; gap:20px; overflow-x:auto; padding:10px 4px 20px; scrollbar-width:thin; }
.gallery img{ height:420px; border-radius:24px; box-shadow:var(--shadow); flex:none; }
@media (max-width:700px){ .gallery img{ height:340px; } }

/* ---------- FAQ ---------- */
.faq-item{ border-bottom:1px solid var(--line-soft); padding:20px 0; }
.faq-item h3{ margin-bottom:.4em; }
.faq-item p{ margin:0; }

/* ---------- 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(--purple); font-size:.78rem; }
.legal-toc a:hover{ color:var(--ink); }

.legal-content{ background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); padding:44px 48px; }
.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(--ink); }
.callout{ background:#F1F0FF; border:1px solid rgba(68,52,247,.18); border-radius:var(--radius-sm); padding:18px 20px; margin:1.6em 0; font-size:.94rem; color:var(--ink-soft); }
.callout strong{ color:var(--purple); }
.placeholder{ background:#FFF4E4; border:1px dashed #C99A3B; color:#7A5417; padding:2px 6px; border-radius:5px; font-family:monospace; font-size:.85em; }

.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(--purple); text-decoration:none; word-break:break-all; }

.hr{ height:1px; background:var(--line-soft); border:none; margin:2.4em 0; }
.text-center{ text-align:center; }
.center-col{ max-width:720px; margin:0 auto; }

/* ============================================================
   MOBILE OVERRIDES
   Placed last on purpose: for equal CSS specificity, the LAST rule
   in source order wins the cascade — even inside a media query.
   An override written before the rule it overrides gets silently
   cancelled out. Every mobile rule below stays at the bottom of
   this file for that reason. Some also carry !important as a
   second line of defence against future edits reordering things.
   ============================================================ */
@media (max-width:900px){
  .hero-grid{ grid-template-columns:1fr !important; gap:28px; }
  .hero-grid > div:last-child{ order:-1; }
  .sticker{ display:none; }
  .grid-4{ grid-template-columns:1fr 1fr !important; gap:14px; }
  .footer-grid{ grid-template-columns:1fr 1fr !important; gap:28px; }
  .grid-2{ grid-template-columns:1fr !important; }
  .band-navy .grid-2{ gap:28px; }
  .legal-layout{ grid-template-columns:1fr !important; }
  .legal-toc{ position:static !important; top:auto; width:100%; min-width:0; }
  .legal-content{ min-width:0; }
  .legal-content table{ display:block; overflow-x:auto; }
  .contact-grid{ grid-template-columns:1fr !important; }
}
@media (max-width:600px){
  .grid-4{ grid-template-columns:1fr !important; }
  .legal-content{ padding:28px 22px !important; }
}