/* ============================================================
   BELLA — LEGAL PAGES (Terms of Use, Privacy Policy)
   Long-form readable layout on the Amate cream palette, Larken
   throughout. Shared between /terms-of-use and /privacy-policy.
   ============================================================ */

@font-face{font-family:'larken';src:url('/assets/fonts/larken/Larken-Light.woff2') format('woff2');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'larken';src:url('/assets/fonts/larken/Larken-LightItalic.woff2') format('woff2');font-weight:300;font-style:italic;font-display:swap}
@font-face{font-family:'larken';src:url('/assets/fonts/larken/Larken-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'larken';src:url('/assets/fonts/larken/Larken-RegularItalic.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'larken';src:url('/assets/fonts/larken/Larken-Medium.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
/* Aktiv Grotesk — Latin subset of a static Medium instance (wght 500, wdth 100). The variable file is retained at /assets/fonts/aktiv-grotesk/AktivGroteskVF_W_WghtWdth.woff2 but no longer shipped. */
@font-face{font-family:'aktiv-grotesk-extended';src:url('/assets/fonts/aktiv-grotesk/AktivGrotesk-Medium-LatinSubset.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}

:root {
  /* Match the homepage Vision / Story / Collection band: Patrick's
     paler --bg and the same --ink text colour. */
  --bg:     #fdfdfd;
  --ink:    #3A271B;
  --amate:  #EEDFCF;
  --near:   #0A0A0A;
  --footer: #281D17;
  --font-display: 'larken', Georgia, serif;
  --font-body:    'larken', Georgia, serif;
  --font-label:   'aktiv-grotesk-extended', 'Arial Narrow', sans-serif;
  --gutter:  clamp(1.25rem, 5vw, 4rem);
  --maxw:    720px;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 300;
  font-size: clamp(15.5px, 1vw, 16.5px);
  line-height: 1.7;
  letter-spacing: 0.005em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ============================================================
   HEADER — Bella lockup on the cream surface, links back home.
   ============================================================ */
.legal-header {
  border-bottom: 1px solid rgba(58, 39, 27, 0.12);
}
.legal-header-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 22px var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}
.legal-header-logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  flex: 0 0 auto;
}
.hdr-lockup {
  display: block;
  width: 116px;
  aspect-ratio: 272.4 / 68.4;
  background-color: var(--ink);
  -webkit-mask: url('/assets/imagery/sprint-11/logos/bella-lockup-reduced.svg') center / contain no-repeat;
          mask: url('/assets/imagery/sprint-11/logos/bella-lockup-reduced.svg') center / contain no-repeat;
}
.legal-header-back {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(14px, 1.05vw, 16px);
  color: var(--ink);
  text-decoration: none;
  position: relative;
  padding-bottom: 3px;
  opacity: 0.88;
  transition: opacity 200ms ease;
}
.legal-header-back::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: 0;
  height: 1px; background: var(--ink); transition: right 280ms ease;
}
.legal-header-back:hover { opacity: 1; }
.legal-header-back:hover::after { right: 0; }

/* ============================================================
   ARTICLE — long-form legal content
   ============================================================ */
.legal-page {
  padding: clamp(2.5rem, 5vw, 4.5rem) var(--gutter) clamp(4rem, 7vw, 6rem);
}
.legal-content {
  max-width: var(--maxw);
  margin: 0 auto;
}
.legal-intro { margin-bottom: clamp(2rem, 4vw, 2.75rem); }
.legal-eyebrow {
  margin: 0 0 1.4em;
  font-family: var(--font-label);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.24em;
  font-size: 11px;
  color: var(--ink);
  opacity: 0.72;
}
.legal-title {
  margin: 0 0 0.5em;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(36px, 6vw, 56px);
  line-height: 1.1;
  letter-spacing: -0.005em;
  color: var(--ink);
}
.legal-effective {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(14.5px, 1vw, 16px);
  opacity: 0.75;
}
.legal-lead {
  margin: 0 0 clamp(2.25rem, 4vw, 3rem);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(16.5px, 1.1vw, 18px);
  line-height: 1.65;
}
.legal-content section + section { margin-top: clamp(2rem, 3.5vw, 2.6rem); }
.legal-content h2 {
  margin: 0 0 0.85em;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(20px, 2vw, 24px);
  line-height: 1.25;
  letter-spacing: -0.002em;
  color: var(--ink);
}
.legal-content h3 {
  margin: 1.4em 0 0.5em;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(16.5px, 1.4vw, 18.5px);
  line-height: 1.35;
  color: var(--ink);
}
.legal-content p { margin: 0 0 1em; }
.legal-content p + h3 { margin-top: 1.6em; }
.legal-content ul {
  padding-left: 1.6em;
  margin: 0 0 1.1em;
  list-style: disc;
}
.legal-content li { margin: 0.35em 0; padding-left: 0.15em; }
.legal-content li::marker { color: var(--ink); opacity: 0.55; }
.legal-content a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 0.5px;
  transition: opacity 200ms ease;
}
.legal-content a:hover { opacity: 0.7; }
.legal-content strong { font-weight: 500; }
.legal-content em { font-style: italic; }
/* All-caps legal blocks (warranty disclaimer, liability cap, etc.) */
.legal-content p.legal-caps {
  font-size: 0.94em;
  line-height: 1.6;
  letter-spacing: 0.01em;
}
/* TBD placeholder we cannot fill yet (e.g. [website URL]) — keep
   visible as a clearly-marked square so the lawyer sees it on review. */
.legal-tbd {
  display: inline;
  padding: 1px 6px;
  background: rgba(58, 39, 27, 0.09);
  border-bottom: 1px dashed rgba(58, 39, 27, 0.5);
  font-family: var(--font-label);
  font-weight: 500;
  font-size: 0.88em;
  letter-spacing: 0.04em;
  color: var(--ink);
}
/* Contact block at the end */
.legal-content address {
  margin: 0;
  font-style: normal;
  line-height: 1.6;
}

/* ============================================================
   FOOTER — mirrors the homepage footer (Mexican Oak band).
   ============================================================ */
footer {
  background: var(--footer);
  color: var(--amate);
  padding: clamp(3.5rem, 6vw, 5.5rem) var(--gutter);
  text-align: center;
}
.foot-lockup {
  display: inline-block;
  width: 132px;
  background-color: var(--amate);
  -webkit-mask: url('/assets/bella-lockup.svg') center / contain no-repeat;
          mask: url('/assets/bella-lockup.svg') center / contain no-repeat;
  aspect-ratio: 280 / 130;
}
.foot-social {
  display: flex; align-items: center; justify-content: center;
  gap: 26px; margin-top: 32px;
}
.foot-social a {
  display: block;
  color: var(--amate);
  opacity: 0.78;
  transition: opacity 200ms ease;
}
.foot-social a:hover { opacity: 1; }
.foot-social svg { width: 19px; height: 19px; display: block; fill: currentColor; }
.foot-rule { display: block; width: 38px; height: 1px; margin: 40px auto; background: rgba(238,223,207,0.32); }
.foot-meta { display: flex; align-items: center; justify-content: center; gap: 18px; }
.foot-link {
  font-family: var(--font-label);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.24em;
  font-size: 10.5px;
  color: var(--amate);
  text-decoration: none;
  opacity: 0.82;
  padding-left: 0.24em;
  transition: opacity 200ms ease;
}
.foot-link:hover { opacity: 1; }
.foot-dot { width: 3px; height: 3px; border-radius: 50%; background: rgba(238,223,207,0.45); }
.foot-address {
  margin: 22px 0 0;
  font-family: var(--font-display);
  font-weight: 300;
  font-style: normal;
  font-size: 15px;
  letter-spacing: 0.02em;
  color: var(--amate);
  opacity: 0.66;
}

@media (max-width: 600px) {
  .foot-meta { flex-direction: column; gap: 14px; }
  .foot-dot { display: none; }
  .legal-header-inner { padding: 18px var(--gutter); }
  .hdr-lockup { width: 104px; }
}