/* ─────────────────────────────────────────────────────────
   ClaroWise — Legal Pages Stylesheet
   Used by privacy.html, terms.html, cookies.html
───────────────────────────────────────────────────────── */
:root {
  --teal:       #2a8fa4;
  --teal-deep:  #1d6e80;
  --teal-mid:   #3aa5bb;
  --teal-pale:  #e6f4f7;
  --teal-mist:  #f2fafc;
  --white:      #ffffff;
  --off-white:  #f8f7f4;
  --warm-bg:    #f4f2ee;
  --slate:      #4a5568;
  --slate-lt:   #718096;
  --charcoal:   #2d3748;
  --dark:       #1a202c;
  --border:     #e2e8f0;
  --border-teal:rgba(42,143,164,0.18);
  --r-sm: 8px; --r-md: 14px; --r-lg: 22px; --r-xl: 40px;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:'Plus Jakarta Sans',sans-serif;
  background:var(--off-white);
  color:var(--charcoal);
  line-height:1.7;
  overflow-x:hidden;
}

a{color:var(--teal);text-decoration:none;transition:color .2s;}
a:hover{color:var(--teal-deep);text-decoration:underline;}

/* ── HEADER ── */
header{
  position:sticky;top:0;z-index:100;
  background:rgba(255,255,255,.96);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(42,143,164,.1);
  padding:0 1.5rem;
}
.header-inner{
  max-width:1080px;margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;
  height:72px;gap:2rem;
}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;flex-shrink:0;}
.logo:hover{text-decoration:none;}
.logo-mark{
  width:44px;height:44px;border-radius:50%;
  object-fit:cover;flex-shrink:0;display:block;
}
.logo-wordmark{
  font-family:'Futura','Futura PT','Jost','Century Gothic','Trebuchet MS','Avenir Next',sans-serif;
  font-size:1.45rem;font-weight:500;color:var(--teal-deep);
  letter-spacing:.005em;line-height:1;
}
.header-nav{display:flex;align-items:center;gap:.125rem;}
.header-nav a{
  font-size:.875rem;font-weight:500;color:var(--slate);
  padding:.45rem .8rem;border-radius:var(--r-sm);
  transition:all .2s;white-space:nowrap;
}
.header-nav a:hover{color:var(--teal);background:var(--teal-mist);text-decoration:none;}

/* ── BUTTONS ── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-family:'Plus Jakarta Sans',sans-serif;font-weight:600;
  border:none;border-radius:var(--r-xl);cursor:pointer;
  text-decoration:none;transition:all .25s ease;letter-spacing:.01em;
  padding:.625rem 1.25rem;font-size:.875rem;
}
.btn:hover{text-decoration:none;}
.btn-primary{
  background:var(--teal);color:#fff;
  box-shadow:0 4px 18px rgba(42,143,164,.28);
}
.btn-primary:hover{
  background:var(--teal-deep);transform:translateY(-1px);
  box-shadow:0 6px 26px rgba(42,143,164,.35);color:#fff;
}
.btn-ghost{background:transparent;color:var(--teal);border:1.5px solid var(--teal);}
.btn-ghost:hover{background:var(--teal-mist);}

/* ── LEGAL PAGE LAYOUT ── */
.legal-page{
  min-height:60vh;
  padding:5rem 1.5rem 5rem;
  background:linear-gradient(180deg,var(--teal-mist) 0%,var(--off-white) 280px);
}
.legal-inner{
  max-width:780px;margin:0 auto;
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  padding:3.5rem;
  box-shadow:0 8px 32px rgba(42,143,164,0.06);
}

.back-link{
  display:inline-flex;align-items:center;gap:.4rem;
  font-size:.85rem;font-weight:500;color:var(--slate-lt);
  margin-bottom:2rem;
  text-decoration:none;
}
.back-link:hover{color:var(--teal);text-decoration:none;}

.legal-eyebrow{
  display:inline-block;
  font-size:.7rem;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--teal);
  background:var(--teal-pale);
  padding:.3rem .75rem;border-radius:var(--r-xl);
  margin-bottom:1.25rem;
}

.legal-page h1{
  font-family:'Lora',serif;
  font-size:clamp(2rem,4vw,2.75rem);
  font-weight:500;
  letter-spacing:-0.02em;
  line-height:1.15;
  color:var(--dark);
  margin-bottom:.75rem;
}

.legal-meta{
  font-size:.85rem;color:var(--slate-lt);
  margin-bottom:2.5rem;
  padding-bottom:2.5rem;
  border-bottom:1px solid var(--border);
}

.legal-intro{
  background:var(--teal-mist);
  border:1px solid var(--border-teal);
  border-radius:var(--r-md);
  padding:1.5rem 1.75rem;
  margin-bottom:3rem;
}
.legal-intro p{
  font-size:.975rem;
  color:var(--charcoal);
  line-height:1.7;
  margin:0;
  font-weight:400;
}

.legal-page section{
  margin-bottom:2.75rem;
}
.legal-page section:last-of-type{
  margin-bottom:0;
}

.legal-page h2{
  font-family:'Lora',serif;
  font-size:1.375rem;
  font-weight:500;
  letter-spacing:-0.01em;
  color:var(--dark);
  margin-bottom:.875rem;
  line-height:1.3;
}

.legal-page p{
  font-size:.975rem;
  color:var(--slate);
  line-height:1.75;
  margin-bottom:1rem;
  font-weight:400;
}
.legal-page p:last-child{margin-bottom:0;}

.legal-page ul{
  margin:1rem 0 1.25rem 0;
  padding-left:0;
  list-style:none;
}
.legal-page ul li{
  position:relative;
  padding-left:1.5rem;
  font-size:.95rem;
  color:var(--slate);
  line-height:1.7;
  margin-bottom:.625rem;
}
.legal-page ul li::before{
  content:'';
  position:absolute;
  left:0;top:.7rem;
  width:6px;height:6px;
  border-radius:50%;
  background:var(--teal);
}

.legal-page strong{
  color:var(--dark);
  font-weight:600;
}

/* ── COOKIE TABLE ── */
.cookie-table{
  border:1px solid var(--border);
  border-radius:var(--r-md);
  overflow:hidden;
  margin:1.5rem 0;
}
.cookie-row{
  display:grid;
  grid-template-columns:1fr 2fr 1fr;
  gap:1rem;
  padding:1.125rem 1.25rem;
  border-bottom:1px solid var(--border);
  font-size:.875rem;
  line-height:1.6;
}
.cookie-row:last-child{border-bottom:none;}
.cookie-row-head{
  background:var(--teal-mist);
  font-weight:700;
  color:var(--teal-deep);
  font-size:.75rem;
  letter-spacing:.06em;
  text-transform:uppercase;
}

/* ── FOOTER CTA INSIDE PAGE ── */
.legal-footer-cta{
  margin-top:3.5rem;
  padding-top:2.5rem;
  border-top:1px solid var(--border);
  display:flex;
  gap:.875rem;
  flex-wrap:wrap;
  align-items:center;
  justify-content:flex-start;
}

/* ── FOOTER ── */
footer{
  background:var(--dark);
  color:rgba(255,255,255,.55);
  padding:2.5rem 1.5rem;
}
.footer-inner{max-width:1080px;margin:0 auto;}
.footer-bottom{
  display:flex;align-items:center;justify-content:space-between;
  font-size:.8rem;flex-wrap:wrap;gap:1rem;
}
.footer-legal{display:flex;gap:1.5rem;}
.footer-legal a{
  color:rgba(255,255,255,.55);
  text-decoration:none;
  transition:color .2s;
}
.footer-legal a:hover{color:rgba(255,255,255,.9);text-decoration:none;}

/* ── RESPONSIVE ── */
@media(max-width:768px){
  .header-nav{display:none;}
  .header-inner{height:64px;gap:.5rem;padding-right:0;}
  .header-inner .btn{
    padding:.5rem .85rem;
    font-size:.75rem;
    white-space:nowrap;
  }
  .logo{gap:8px;}
  .logo-mark{width:36px;height:36px;}
  .logo-wordmark{font-size:1.15rem;}

  .legal-page{padding:2.5rem 1rem 3rem;}
  .legal-inner{padding:2rem 1.5rem;border-radius:var(--r-md);}
  .legal-page h1{font-size:1.75rem;}
  .legal-page h2{font-size:1.2rem;}
  .legal-page p{font-size:.925rem;}
  .legal-page ul li{font-size:.9rem;}
  .legal-intro{padding:1.125rem 1.25rem;}
  .legal-intro p{font-size:.925rem;}
  .legal-meta{margin-bottom:1.75rem;padding-bottom:1.75rem;}
  .legal-page section{margin-bottom:2rem;}

  /* Stack cookie table rows on mobile */
  .cookie-row{grid-template-columns:1fr;gap:.5rem;padding:1rem 1.125rem;}
  .cookie-row-head{display:none;}
  .cookie-row > div::before{
    display:block;font-size:.65rem;font-weight:700;
    letter-spacing:.08em;text-transform:uppercase;
    color:var(--teal);margin-bottom:.25rem;
  }
  .cookie-row > div:nth-child(1)::before{content:'Type';}
  .cookie-row > div:nth-child(2)::before{content:'Purpose';}
  .cookie-row > div:nth-child(3)::before{content:'Duration';}

  .legal-footer-cta{flex-direction:column;align-items:stretch;}
  .legal-footer-cta .btn{width:100%;}

  .footer-bottom{flex-direction:column;text-align:center;gap:.875rem;}
  .footer-legal{justify-content:center;flex-wrap:wrap;gap:1rem;}
}

@media(max-width:480px){
  .header-inner{padding:0 1rem;}
  .header-inner .btn{padding:.45rem .7rem;font-size:.7rem;}
  .logo-wordmark{font-size:1rem;}
  .logo-mark{width:32px;height:32px;}

  .legal-inner{padding:1.5rem 1.25rem;}
  .legal-page h1{font-size:1.5rem;}
  .legal-page h2{font-size:1.125rem;}
}