/*
 * Legal pages (Privacy Policy, Terms & Conditions).
 * Loaded only by privacy-policy.html and terms-and-conditions.html, so the
 * approved homepage is untouched. Everything here reuses the shared tokens,
 * fonts, navigation and footer already defined in site.css; only the
 * page-body layout and text-heavy typography are new.
 *
 * Figma frames: Privacy 12672:7946 (1440), 12672:7429 (810), 12669:6161 (390);
 * Terms 12672:8871 (1440), 12672:8681 (810), 12672:8593 (390).
 * Content column: 80px side margins from 521px up (capped at Figma's 1280px),
 * 32px at 390 — matching the Body frames measured in those files.
 */

.legal-head{position:relative;width:100%;background:var(--cream)}

.legal{
  position:relative;
  width:100%;
  background:var(--cream);
  overflow:hidden;
}
.legal-inner{position:relative;z-index:2}

/* Figma: content starts 30px below the nav bar at every breakpoint. */
.legal-title{
  margin:0;
  padding-top:30px;
  color:var(--rose);
  font:400 153px/.8085 Monigue,sans-serif;
  text-transform:uppercase;
  text-align:center;
}
.legal-title span{display:block}
.legal-title span:last-child{font-size:.625em;line-height:.78}

.legal-body{
  width:min(1280px,calc(100% - 160px));
  margin:81px auto 0;
  padding-bottom:120px;
  text-align:left;
  color:var(--dark);
  font-size:22px;
  line-height:1.35;
}
.legal-body > * + *{margin-top:20px}
.legal-body h2{
  margin:44px 0 0;
  color:var(--rose);
  font-size:28px;
  font-weight:700;
  line-height:1.2;
}
.legal-body h2:first-child{margin-top:0}
.legal-body p{margin:0}
.legal-body ul{margin:0;padding-left:1.3em;list-style:disc}
.legal-body li + li{margin-top:8px}
.legal-updated{font-weight:700}
.legal-contact a{color:inherit}

/* The single decorative heart that continues into the footer, per the
 * "Privacy/T&Cs …px-Background Decorations" frames. decorations.js positions
 * the heart inside this strip and keeps it locked to the footer heart. */
.legal-decor{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:346px;
  z-index:0;
  overflow:hidden;
  pointer-events:none;
}

@media (min-width:2000px){
  .legal-body{padding-bottom:140px}
}

/* 1200 frame */
@media (min-width:901px) and (max-width:1250px){
  .legal-title{font-size:118px}
  .legal-body{margin-top:63px;font-size:18px;padding-bottom:100px}
  .legal-body h2{font-size:22px;margin-top:36px}
  .legal-body > * + *{margin-top:16px}
}

/* 810 frame */
@media (min-width:521px) and (max-width:900px){
  .legal-title{font-size:86px}
  .legal-body{margin-top:56px;font-size:13px;line-height:1.4;padding-bottom:80px}
  .legal-body h2{font-size:15px;margin-top:26px}
  .legal-body > * + *{margin-top:12px}
  .legal-body li + li{margin-top:6px}
  .legal-decor{height:346px}
}

/* 390 frame */
@media (max-width:520px){
  .legal-title{padding-top:30px;font-size:86px}
  .legal-body{
    width:min(326px,calc(100% - 64px));
    margin-top:56px;
    font-size:12px;
    line-height:1.55;
    padding-bottom:64px;
  }
  .legal-body h2{font-size:15px;margin-top:24px}
  .legal-body > * + *{margin-top:11px}
  .legal-body li + li{margin-top:5px}
}