:root{
  --ink:#0d2740;
  --muted:#6b7a86;
  --blush:#fdebf1;
  --teal:#7ECFDC;
  --ring:rgba(13,39,64,.06);


    --card: #ffffff;
  --page: #fbf9f6;                  /* gentle page tone */
  --teal-strong: #1393a8;           /* darker sibling of --teal */
  --teal-mid: #4a9fb0;              /* for gradients */
  --shadow: 0 10px 26px rgba(11,31,53,.10);
  --shadow-strong: 0 18px 50px rgba(11,31,53,.18);
}

/* Narrow container helper (matches your site) */
.container.narrow{ max-width: 980px; }

/* Hero with soft downward gradient */
.privacy-hero{
  background:
    radial-gradient(1200px 420px at 50% -12%, rgba(126,207,220,.18), rgba(126,207,220,0) 65%),
    linear-gradient(180deg, #f1dfdf 0%, var(--blush) 35%, #fff 100%);
  text-align:center;
}
.privacy-hero h1{
  font-family: "Cormorant Garamond", serif;
  color: var(--ink);
  font-weight: 700;

}
.privacy-hero .lead{
  color: var(--muted);
  font-weight: 500;
}







  /**************************************
    0) ROOT + GLOBAL UTILITIES
  **************************************/
  :root{
    --nav-teal:#7ECFDC;
    --nav-dark:#0d2740;
  }

  /* Basic header spacing used globally */
  .site-top {
    position: sticky; top:0; z-index:1000;
    background:#fff;
    border-bottom:1px solid rgba(0,0,0,.06);
    transition: background .25s ease, border-color .25s ease, box-shadow .25s ease;
  }
  .site-top .container{ min-height:68px; }

  /* Base brand link (also used outside header scope) */
  .brand {
    font-size: 1.5rem;
    font-weight: bold;
    text-decoration: none;
    color: #0d2740;
  }

  /* Generic hover micro-interactions */
  .btn{ transition: transform .25s ease, box-shadow .25s ease }
  .btn:hover{ transform: translateY(-3px) }

  /**************************************
    1) HEADER & NAV (site-top, brand, nav)
  **************************************/
  header.site-top .brand {
    font-size: 1.4rem;
    font-weight: 700;
  }
  header.site-top .brand span {
    font-size: 1.4rem;
  }

  /* Default/stuck header (solid) — already declared above with .site-top */

  /* Overlay variant: sits above hero, transparent, no border/shadow */
  .site-top--overlay{
    position:absolute; left:0; right:0; top:0;
    background: transparent;
    border-bottom-color: transparent;
  }
  .site-top.is-stuck{
    background:#fff;
    border-bottom-color: rgba(0,0,0,.06);
    box-shadow: 0 4px 18px rgba(0,0,0,.06);
  }

  /* Final overlay hard reset (wins via !important) */
  .site-top--overlay{
    background:transparent !important;
    border-bottom:0 !important;
    box-shadow:none !important;
  }
  .site-top--overlay.shadow-sm,
  .site-top--overlay[class*="shadow"]{
    box-shadow:none !important;
  }

  /* Brand + nav link visuals */
  .site-top .brand{ font-weight:700; font-size:1.6rem; color:var(--nav-dark); text-decoration:none; }
  .site-top .brand span{ color:var(--nav-teal); }

  .site-top .nav{ display:flex; gap:28px; align-items:center; }
  .site-top .nav a{
    position:relative; display:inline-block; padding:6px 2px;
    color:var(--nav-dark); text-decoration:none; font-weight:600; letter-spacing:.2px;
    transition:color .2s ease;
  }
  .site-top .nav a::after{
    content:""; position:absolute; left:0; bottom:-8px; height:2px; width:0;
    background:var(--nav-teal); transition:width .22s ease;
  }
  .site-top .nav a:hover{ color:#3aa8ba; }
  .site-top .nav a:hover::after{ width:100%; }
  .site-top .nav a.active{ color:var(--nav-teal); }
  .site-top .nav a.active::after{ width:100%; }

  /* Hamburger */
  .hamburger {
    font-size: 1.8rem;
    background: none;
    border: none;
    cursor: pointer;
    display: none;
    color: #0d2740;
  }
  .hamburger{ display:none; width:44px; height:44px; background:none; border:0; font-size:1.7rem; color:var(--nav-dark); }

  /* Mobile drawer */
  @media (max-width:991px){
    .hamburger{ display:inline-block; }
    .site-top .nav{
      position:fixed; top:0; right:0; width:280px; height:100vh;
      background:#fff; border-left:1px solid rgba(0,0,0,.08);
      box-shadow:-20px 0 40px rgba(0,0,0,.06);
      padding:80px 18px 18px; flex-direction:column; gap:12px;
      transform:translateX(100%); transition:transform .28s ease; z-index:1001;
    }
    .site-top.is-open .nav{ transform:translateX(0); }
    #site-nav{ transition: transform .28s ease }
  }

  /* Dim overlay for mobile drawer */
  .nav-dim{ position:fixed; inset:0; background:rgba(0,0,0,.28); z-index:1000;
    opacity:0; pointer-events:none; transition:opacity .25s ease; }
  .nav-dim.show{ opacity:1; pointer-events:auto; }

  /* Z-index layering for header/drawer/dimmer */
  .site-top { z-index: 2000; }
  @media (max-width: 991px){
    .site-top .nav { z-index: 2001; }
  }
  .nav-dim { z-index: 1500; }


/* ===== Form Card ===== */
.card{
  background:var(--card);
  border:1px solid var(--ring);
  border-radius: 16px;
  padding: 20px;
  box-shadow: var(--shadow);
}
.form-row{display:flex; flex-direction:column; gap:8px; margin-bottom:14px}
label{font-weight:600; font-size:.92rem}
input, textarea{
  width: 100%;
  border:1px solid var(--ring);
  background:#fff;
  border-radius:12px;
  padding:12px 14px;
  font:inherit;
  color:var(--ink);
  outline:none;
  transition: box-shadow .2s ease, border-color .2s ease, transform .02s;
}
input:focus, textarea:focus{
  border-color: var(--teal-strong);
  box-shadow: 0 0 0 4px rgba(126,207,220,.25);
}
.err{color:#b64040; min-height:1.1em; font-size:.85rem}

/* Button */
.btn{
  display:inline-flex; 
  align-items:center; 
  justify-content:center;   /* center label + icon */
  gap:10px;
  border:0; 
  border-radius:14px; 
  cursor:pointer;
  padding: 14px 18px; 
  font-weight:700;
  transition: transform .15s ease, box-shadow .2s ease, opacity .15s ease;
  width: 100%;              /* 👈 full width inside parent */
  font-size: 1rem;
}

.btn-teal{
  color:#07323a;
  background: linear-gradient(180deg, var(--teal) 0%, var(--teal-strong) 100%);
  box-shadow: var(--shadow);
}
.btn:hover{transform: translateY(-2px); box-shadow: var(--shadow-strong)}
.btn:disabled{opacity:.6; cursor:not-allowed}
.btn__icon{width:18px; height:18px}

/* Inline note */
.note{margin-top:10px; color:var(--muted); min-height:1.25em}

/* ===== Footer ===== */
.site-footer{
  border-top:1px solid var(--ring);
  padding: 22px 20px;
  background:#fff;
}
.site-footer .container{
  max-width:1120px; margin-inline:auto; text-align:center; color:var(--muted);
}

/* ===== Responsive ===== */
@media (max-width: 600px){
  .card{padding:16px}
  .btn{width:100%; justify-content:center}
}


/* Make the page background a touch warmer so the card pops */
body.app-body{
  background: var(--page);
}

/* -----------------------------------
   Hero tweaks – a little more contrast
----------------------------------- */
.privacy-hero{
  padding: 120px 0 20px;
  background:
    radial-gradient(1200px 420px at 50% -12%, rgba(126,207,220,.16), rgba(126,207,220,0) 65%),
    linear-gradient(180deg, #fff 0%, var(--blush) 46%, #fff 100%);
}

/* -----------------------------------
   Card: clearer separation from page
----------------------------------- */
.wrap{ max-width: 760px;margin: 22px auto 120px; padding: 0 20px; }

.card{
  background:
    linear-gradient(180deg, #ffffff 0%, #f9fbfc 100%); /* soft, not stark */
  border: 1px solid rgba(13,39,64,.08);
  border-radius: 18px;
  padding: 24px;
  box-shadow: var(--shadow);
}

/* Slightly stronger shadow on hover/focus within card */
.card:has(input:focus), .card:has(textarea:focus){
  box-shadow: 0 18px 50px rgba(11,31,53,.14);
}

/* -----------------------------------
   Form controls & label legibility
----------------------------------- */
.form-row{ gap: 10px; margin-bottom: 18px; }

label{
  font-weight: 700;
  font-size: 1.05rem;          /* bigger label */
  letter-spacing: .1px;
  color: var(--ink);
}

/* Inputs: a hair darker border + better radius */
input, textarea{
  border: 1px solid rgba(13,39,64,.12);
  background: #fff;
  border-radius: 14px;
  padding: 13px 2px;
  transition: box-shadow .2s ease, border-color .2s ease;
}

/* Focus ring – now uses defined --teal-strong */
input:focus, textarea:focus{
  border-color: var(--teal-strong);
  box-shadow: 0 0 0 4px rgba(19,147,168,.18);
  outline: none;
}

/* Subtle help/error text */
.err{ color:#b64040; min-height:1.1em; font-size:.9rem; }

/* -----------------------------------
   Primary button – match app gradient
----------------------------------- */
.btn{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  border:0;
  border-radius:14px;
  cursor:pointer;
  padding: 16px 18px;           /* a touch taller */
  font-weight:700;
  width:100%;
  font-size:1.05rem;
  transition: transform .15s ease, box-shadow .2s ease, opacity .15s ease;
}

.btn-teal{
  color:#ffffff; /* better contrast on teal */
  background: linear-gradient(180deg, #6ec3d0 0%, var(--teal-mid) 100%);
  box-shadow: 0 12px 28px rgba(78,159,176,.35);
}

.btn-teal:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 44px rgba(78,159,176,.48);
}

.btn:disabled{
  opacity:.65;
  cursor:not-allowed;
}

/* Button icon size */
.btn__icon{ width:20px; height:20px; }



/* -----------------------------------
   Responsive fine-tuning
----------------------------------- */
@media (max-width: 600px){
  .card{ padding:18px; }
  label{ font-size: 1rem; }
  .btn{ font-size:1rem; }
}



/* Card + page spacing tightened */
.wrap{ max-width:760px; margin: 18px auto 64px; }
.card{ padding: 18px; }

/* Labels slightly smaller and closer */
label{
  font-weight: 600;
  font-size: .98rem;
  margin-bottom: 2px;                  /* pulls field up */
}

/* Inputs/textarea a bit shorter */
input, textarea{
  padding: 10px 12px;
  border-radius: 12px;
}

/* Trim form-row spacing for mobile (desktop grid already removes it) */
.form-row{ gap: 6px; margin-bottom: 12px; }

/* Button a touch shorter */
.btn{ padding: 12px 16px; font-size: 1rem; }

/* Make the hero shorter so the page breathes less vertically */
.privacy-hero{ padding: 96px 0 16px; }

/* Optional: footer spacing a bit tighter */
.site-footer{ padding: 18px 16px; }