/* Shared styles for the legal pages (privacy.html, terms.html).
   Tokens, type and the header/footer match Index.html. */
:root{
  --black:#141413; --midnight:#1A1B2E; --primary:#8A90F8; --cloud:#D1D4FC;
  --white:#FFFFFF; --white-alt:#FCFCFC; --grey-text:#7D7C7F; --grey-in:#C4C4C4;
  --grey-brd:#E9E9E9; --grey-bg:#F5F6F8;
  --gutter:64px;
}
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; letter-spacing:-0.02em; }
html{ scroll-behavior:smooth; scroll-padding-top:104px; overflow-x:clip; }
body{
  font-family:'Geist', system-ui, -apple-system, sans-serif; line-height:1.2;
  color:var(--midnight); background:var(--white); -webkit-font-smoothing:antialiased;
}
img{ display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }
.serif{ font-family:'EB Garamond', Georgia, serif; font-style:italic; font-weight:500; }

/* Header — the white "Header on scroll" pill, always on */
.nav-wrap{ position:sticky; top:0; z-index:100; padding:16px var(--gutter) 0; display:flex; justify-content:center; }
.nav{
  width:100%; max-width:900.59px; padding:8px 8px 8px 11px;
  display:flex; align-items:center; justify-content:space-between;
  border-radius:100px; background:rgba(255,255,255,.92); border:1px solid var(--grey-brd);
  box-shadow:0 12px 32px -12px rgba(26,27,46,.18);
  -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
}
.brand{ display:flex; align-items:center; gap:9px; flex:none; }
.brand__mark{ width:30px; height:30px; }
.brand__word{ width:106.59px; height:24.338px; }
.nav__menu{ display:flex; gap:32px; }
.nav__menu a{ font-size:14px; font-weight:500; color:var(--black); transition:opacity .15s; }
.nav__menu a:hover{ opacity:.6; }
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:16px;
  height:35px; padding:16px; border-radius:100px; font-size:12px; font-weight:500; white-space:nowrap;
  background:var(--black); color:var(--white); transition:transform .15s ease;
}
.btn:hover{ transform:translateY(-1px); }
.btn img{ width:31px; height:12px; }

/* Page head */
.legal-head{ max-width:1122px; margin:96px auto 0; padding:0 var(--gutter); display:flex; flex-direction:column; align-items:center; gap:16px; text-align:center; }
.section-tag{
  display:inline-flex; align-items:center; height:24px; padding:4px 8px; border-radius:100px;
  background:var(--white-alt); border:1px solid var(--grey-brd); font-size:12px; color:var(--grey-text);
}
.legal-head h1{ font-size:48px; font-weight:500; line-height:1.05; }
.legal-head p{ font-size:16px; color:var(--grey-text); max-width:560px; line-height:1.4; }
.legal-meta{ font-size:12px; color:var(--grey-text); }

/* Body: sticky contents list + text */
.legal{
  max-width:1122px; margin:64px auto 0; padding:0 var(--gutter);
  display:grid; grid-template-columns:240px 1fr; gap:64px; align-items:start;
}
.toc{
  position:sticky; top:104px; padding:16px; border-radius:16px; background:var(--grey-bg);
  display:flex; flex-direction:column; gap:2px;
}
.toc__title{ font-size:12px; color:var(--grey-text); padding:4px 8px 8px; }
.toc a{ font-size:13px; line-height:1.3; color:var(--midnight); padding:6px 8px; border-radius:8px; transition:background .15s; }
.toc a:hover{ background:var(--white); }

.legal__body{ max-width:720px; }
.legal__summary{
  padding:20px; border-radius:16px; background:var(--white-alt); border:1px solid var(--grey-brd);
  margin-bottom:48px;
}
.legal__summary h2{ font-size:16px; font-weight:500; margin-bottom:12px; }
.legal__summary li{ font-size:14px; line-height:1.5; color:var(--midnight); padding-left:18px; position:relative; margin-top:6px; }
.legal__summary li::before{ content:""; position:absolute; left:2px; top:8px; width:6px; height:6px; border-radius:50%; background:var(--primary); }

.legal__body section{ padding-bottom:40px; margin-bottom:40px; border-bottom:1px solid var(--grey-brd); }
.legal__body section:last-child{ border-bottom:0; }
.legal__body h2{ font-size:22px; font-weight:500; line-height:1.2; margin-bottom:16px; }
.legal__body h3{ font-size:16px; font-weight:500; margin:24px 0 8px; }
.legal__body p, .legal__body li{ font-size:15px; line-height:1.6; color:#3A3B4A; }
.legal__body p + p{ margin-top:12px; }
.legal__body ul{ margin-top:8px; }
.legal__body ul li{ padding-left:18px; position:relative; margin-top:6px; }
.legal__body ul li::before{ content:""; position:absolute; left:2px; top:10px; width:5px; height:5px; border-radius:50%; background:var(--grey-in); }
.legal__body strong{ font-weight:500; color:var(--midnight); }
.legal__body a{ color:var(--primary); text-decoration:underline; text-underline-offset:2px; }
.legal__body table{ width:100%; border-collapse:collapse; margin-top:12px; font-size:14px; }
.legal__body th, .legal__body td{ text-align:left; vertical-align:top; padding:10px 12px; border-bottom:1px solid var(--grey-brd); line-height:1.45; color:#3A3B4A; }
.legal__body th{ font-weight:500; color:var(--midnight); background:var(--grey-bg); }
.placeholder{ background:var(--cloud); color:var(--midnight); padding:0 4px; border-radius:4px; }

/* CTA banner + footer — identical to the homepage (part of the site footer).
   Copied from Index.html; the legal pages add their own side gutters because
   they don't pad the whole body like the homepage does. */
@keyframes bob-sm{ 0%,100%{ translate:0 0; } 50%{ translate:0 -6px; } }
.btn--dark{ background:var(--black); color:var(--white); }
.cta-banner .btn{ height:45px; padding:16px 24px; font-size:14px; }
.btn__stores{ width:31px; height:12px; flex:none; }
.closing{ position:relative; margin-top:192px; }
.cta-banner{
  position:relative; z-index:2;
  width:100%; max-width:1107px; height:340px; margin-inline:auto;
  background:var(--primary); border-radius:32px;
}
.cta-banner__content{
  position:absolute; left:64px; top:50%; transform:translateY(-50%);
  display:flex; flex-direction:column; align-items:flex-start; gap:16px;
}
.cta-banner__title{ font-size:32px; font-weight:500; line-height:1; color:var(--midnight); }
.cta-banner__sub{ font-size:16px; color:var(--midnight); }

.cta-art{
  position:absolute; right:41.97px; top:calc(50% - 14.15px); transform:translateY(-50%);
  width:451.03px; height:466.09px; pointer-events:none;
}
.cta-art__union{ position:absolute; left:0; top:3.57px; width:436.12px; height:436.131px; }
.cta-art__glass{ position:absolute; left:24.15px; top:0; width:392.04px; height:430.32px; overflow:hidden; }
/* Figma crop of the 1500px glass render (image ed283a) in its 392 × 430 frame */
.cta-art__glass img{ position:absolute; left:-13.79%; top:-7.27%; width:128.96%; height:117.48%; }
.cta-tag{ animation:bob-sm 5s ease-in-out infinite; }
.cta-tag--profit{ animation-delay:-1.2s; } .cta-tag--expense{ animation-delay:-2.6s; } .cta-tag--sold{ animation-delay:-3.8s; }
.cta-tag{
  position:absolute; display:flex; align-items:center; justify-content:center; gap:9.24px;
  padding:13.2px; border-radius:132px;
  background:linear-gradient(270deg, #FFFFFF 0%, #FFEBCA 50%, #CBCEFC 100%);
  font-size:15.84px; font-weight:500; color:var(--midnight); white-space:nowrap;
}
.cta-tag img{ width:13.2px; height:13.2px; flex:none; }
.cta-tag--stock{ left:1px;      top:34.39px;  transform:rotate(3deg); }
.cta-tag--profit{ left:297.69px; top:60.41px;  transform:rotate(-3deg); }
.cta-tag--expense{ left:272.06px; top:270.34px; transform:rotate(3deg); }
.cta-tag--sold{ left:11.54px;  top:346.43px; transform:rotate(-3deg); }

.footer{
  position:relative; margin-top:-91px; padding-top:91px;
  background:var(--midnight); color:var(--white);
}
.footer__inner{
  width:100%; max-width:986px; margin-inline:auto; padding-top:96px;
  display:flex; flex-direction:column; align-items:center; gap:43px;
}
.footer__cols{ display:flex; align-items:flex-start; justify-content:center; gap:150px; width:100%; }
.footer__col{ flex:none; }  /* sized to its text so the visible menu is what gets centred */
.footer__col h4{ font-size:16px; font-weight:500; margin-bottom:8px; }
.footer__col li{ margin-bottom:8px; }
.footer__col a{ font-size:14px; transition:opacity .15s; }
.footer__col a:hover{ opacity:.65; }

.ask-bar{
  width:100%; background:var(--cloud); border-radius:32px; padding:16px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.ask-bar__label{ font-size:14px; font-weight:500; color:var(--midnight); white-space:nowrap; }
.ask-bar__link{ display:flex; align-items:center; gap:4px; flex:none; transition:opacity .15s; }
.ask-bar__link:hover{ opacity:.7; }
.ask-bar__link img{ height:24px; width:auto; flex:none; }
.ask-bar__link span{ font-size:14px; color:var(--midnight); white-space:nowrap; }

.footer__rule{ margin-top:34px; border-top:1px solid rgba(255,255,255,.12); }
.footer__legal{ padding:39px 0 40px; text-align:center; font-size:14px; color:var(--grey-in); }
.cta-banner{ width:calc(100% - 2 * var(--gutter)); }
.footer{ padding-inline:var(--gutter); }
.footer__rule{ margin-inline:calc(var(--gutter) * -1); }
.footer__col a[aria-current="page"]{ opacity:.65; }

@media (max-width:1180px){
  .cta-banner{ height:auto; padding:48px 0 0; display:flow-root; }
  .cta-banner__content{ position:static; transform:none; padding:0 40px; }
  .cta-banner__title{ font-size:clamp(24px,4.5vw,32px); }
  .cta-art{ position:relative; right:auto; top:auto; transform:none; margin:24px auto -60px; zoom:.8; }
  .footer__cols{ flex-wrap:wrap; gap:40px 48px; }
  .ask-bar{ flex-wrap:wrap; justify-content:flex-start; }
  .ask-bar__label{ width:100%; }
}
@media (max-width:760px){
  .cta-banner{ padding:40px 0 0; }
  .cta-banner__content{ padding:0 24px; }
  .cta-banner__title .serif{ display:block; }
  .cta-art{ zoom:.66; margin:60px auto -68px; }
  .footer__inner{ padding-top:110px; }
  .footer__cols{ display:grid; grid-template-columns:1fr 1fr; gap:32px 24px; justify-items:start; }
  .ask-bar{ display:grid; grid-template-columns:1fr 1fr; gap:14px 8px; border-radius:24px; padding:20px; }
  .ask-bar__label{ grid-column:1 / -1; }
}

@media (max-width:900px){
  :root{ --gutter:20px; }
  .nav__menu{ display:none; }
  .legal-head{ margin-top:64px; }
  .legal-head h1{ font-size:36px; }
  .legal{ grid-template-columns:1fr; gap:32px; margin-top:40px; }
  .toc{ position:static; }
}