/* ShareLista — shared shell + document styles for the legal / support pages.
   Mirrors the landing page's tokens and chrome (site/index.html) so /privacy,
   /terms, /support and /delete-account feel like the same site. */

:root{
  --teal:#14B8A6; --teal-dark:#0D9488; --teal-deep:#0F766E;
  --teal-tint:#CCFBF1; --teal-bg:#F0FDFA;
  --indigo:#4F46E5; --indigo-deep:#4338CA;
  --amber:#F59E0B; --amber-text:#B45309; --amber-tint:#FEF3C7;
  --navy:#0F172A; --slate-2:#475569;
  --gray:#64748B; --gray-light:#94A3B8;
  --border:#E6EAEF; --hair:rgba(15,23,42,.07);
  --bg:#F2F5F7; --white:#fff;
  --grad-teal:linear-gradient(140deg,#2DD4BF,#14B8A6 55%,#0D9488);
  --shadow-xs:0 0 16px -8px rgba(15,23,42,.25);
  --shadow-sm:0 1px 2px rgba(15,23,42,.03), 0 6px 20px -8px rgba(15,23,42,.13);
  --r:20px; --r-lg:28px; --pill:100px;
  --font:'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--navy);
  font-family:var(--font); font-size:17px; line-height:1.62; font-weight:400;
  overflow-x:hidden; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
a{color:inherit}
strong{font-weight:600; color:var(--navy)}
.wrap{max-width:1080px; margin:0 auto; padding:0 24px}

/* ---------- nav (floating pill, matches landing) ---------- */
.nav{position:sticky; top:14px; z-index:60; padding:14px 24px 0}
.nav__inner{
  display:flex; align-items:center; gap:26px; height:62px;
  max-width:1080px; margin:0 auto; padding:0 10px 0 20px;
  border-radius:var(--pill); border:1px solid var(--hair);
  background:rgba(255,255,255,.74); backdrop-filter:saturate(180%) blur(18px);
  -webkit-backdrop-filter:saturate(180%) blur(18px); box-shadow:var(--shadow-xs);
}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; font-weight:700; font-size:19px; letter-spacing:-.035em; color:var(--navy)}
.brand__tile{width:32px; height:32px; border-radius:11px; background:var(--grad-teal); display:grid; place-items:center; box-shadow:0 3px 10px -3px rgba(20,184,166,.7); flex:none}
.brand__tile svg{width:18px; height:18px}
.brand em{font-style:normal; color:var(--teal)}
.nav__links{display:flex; gap:24px; margin-left:auto; font-size:15px; font-weight:500}
.nav__links a{color:var(--slate-2); text-decoration:none; transition:color .15s}
.nav__links a:hover{color:var(--navy)}
.nav__cta{display:flex; gap:10px; align-items:center}
.nav__cta .text-link{font-size:15px; font-weight:500; color:var(--slate-2); text-decoration:none}
.nav__cta .text-link:hover{color:var(--navy)}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  height:56px; padding:0 30px; border-radius:var(--pill); border:0;
  font-family:var(--font); font-size:16.5px; font-weight:600; letter-spacing:-.012em;
  text-decoration:none; cursor:pointer; white-space:nowrap;
  transition:transform .18s cubic-bezier(.2,.7,.3,1), box-shadow .18s ease;
}
.btn:hover{transform:translateY(-2px)}
.btn--primary{background:var(--grad-teal); color:#fff; box-shadow:0 4px 14px -4px rgba(20,184,166,.5)}
.btn--primary:hover{box-shadow:0 10px 26px -8px rgba(20,184,166,.6)}
.btn--sm{height:44px; padding:0 22px; font-size:15px}
@media (max-width:1000px){
  .nav__links{display:none}
  .nav__cta .text-link{display:none}
  .nav__cta{margin-left:auto}
}

/* ---------- document ---------- */
.doc{max-width:760px; margin:0 auto; padding:56px 24px 40px}
.doc__eyebrow{display:inline-block; font-size:11.5px; font-weight:700; letter-spacing:.15em; text-transform:uppercase; color:var(--teal-deep); margin-bottom:16px}
.doc h1{font-size:clamp(34px,5.2vw,50px); font-weight:600; letter-spacing:-.035em; line-height:1.05; margin:0 0 10px}
.doc__updated{color:var(--gray); font-size:15px; margin:0 0 32px}
.doc h2{font-size:24px; font-weight:600; letter-spacing:-.022em; line-height:1.2; margin:44px 0 12px; color:var(--navy)}
.doc h3{font-size:18.5px; font-weight:600; letter-spacing:-.01em; margin:26px 0 8px; color:var(--navy)}
.doc p{color:var(--slate-2); line-height:1.7; margin:0 0 16px}
.doc ul{padding-left:22px; margin:0 0 16px; color:var(--slate-2)}
.doc li{margin:7px 0; line-height:1.65}
.doc a{color:var(--teal-deep); font-weight:600; text-decoration:none; border-bottom:1px solid rgba(15,118,110,.28)}
.doc a:hover{border-bottom-color:var(--teal-deep)}
.doc hr{border:0; border-top:1px solid var(--border); margin:36px 0}
.doc__lead{font-size:19px; color:var(--slate-2); line-height:1.62}

/* callout — the "short version" / important boxes */
.callout{background:var(--teal-bg); border:1px solid var(--teal-tint); border-radius:var(--r); padding:22px 24px; margin:24px 0}
.callout h2{margin-top:0}
.callout ul{margin-bottom:0}
.callout--amber{background:var(--amber-tint); border-color:#FBD38D}
.callout--amber strong{color:var(--amber-text)}

/* tidy tables (providers, rights) */
.doc__table{width:100%; border-collapse:collapse; margin:8px 0 24px; font-size:15.5px; overflow:hidden; border-radius:14px; border:1px solid var(--border)}
.doc__table th,.doc__table td{text-align:left; padding:12px 14px; border-bottom:1px solid var(--border); vertical-align:top; color:var(--slate-2)}
.doc__table th{background:var(--white); color:var(--navy); font-weight:700; font-size:13px; letter-spacing:.02em}
.doc__table tr:last-child td{border-bottom:0}
.doc__table td strong{color:var(--navy)}
.table-wrap{overflow-x:auto}

/* steps (delete-account) */
.steps{counter-reset:step; list-style:none; padding:0; margin:20px 0}
.steps li{position:relative; padding:0 0 18px 46px; color:var(--slate-2); line-height:1.6}
.steps li::before{counter-increment:step; content:counter(step); position:absolute; left:0; top:-2px; width:30px; height:30px; border-radius:9px; background:var(--grad-teal); color:#fff; font-weight:700; font-size:15px; display:grid; place-items:center; box-shadow:0 3px 10px -3px rgba(20,184,166,.7)}

/* contact card */
.contact-card{background:var(--white); border:1px solid var(--border); border-radius:var(--r-lg); padding:28px 26px; box-shadow:var(--shadow-sm); margin:22px 0}
.contact-card .email{font-size:22px; font-weight:700; letter-spacing:-.02em; color:var(--navy); text-decoration:none; border:0}
.contact-card .email:hover{color:var(--teal-deep)}

/* ---------- footer (matches landing) ---------- */
.footer{background:var(--navy); color:#CBD5E1; padding:72px 0 44px; font-size:15px}
.footer__grid{display:grid; grid-template-columns:1.4fr repeat(4,1fr); gap:40px}
.footer h4{font-size:11.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--gray-light); margin-bottom:18px; font-weight:700}
.footer ul{list-style:none; margin:0; padding:0}
.footer li + li{margin-top:12px}
.footer a{color:#CBD5E1; text-decoration:none; transition:color .15s}
.footer a:hover{color:#fff}
.footer .brand{color:#fff; margin-bottom:16px}
.footer__blurb{color:var(--gray-light); font-size:14.5px; max-width:30ch; line-height:1.6}
.footer__base{margin-top:56px; padding-top:28px; border-top:1px solid rgba(255,255,255,.1); display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between; color:var(--gray-light); font-size:14px}
@media (max-width:820px){ .footer__grid{grid-template-columns:1fr 1fr; gap:32px} }
@media (max-width:480px){ .footer__grid{grid-template-columns:1fr} }

/* standalone pentagon logo mark (replaces .brand__tile chip) */
.brand__mark{height:32px; width:auto; flex:none; display:block}