/* Legal pages: /privacy-policy, /terms, /cookie-policy, /sms-policy.
   Figma frames 3694:22114 (privacy-policy), 3694:22286 (terms-and-conditions),
   3694:22461 (cookie-policy), 3672:16464 (sms-and-privacy-disclosure), in the
   2026-09-24 copy of More Better's master. All four share one template:
   a Magnolia page header (514px tall on the 1440 frame, nav overlaid, copy
   bottom-aligned) and an 800px editorial column. */

/* The slab ends in 32px rounded corners with a hairline round it; main is
   white so the corners read against the page, not the magnolia body. */
main { background: var(--white, #fff); }
.lg-header {
  background: var(--magnolia, #FDF9F1);
  border: 1px solid var(--neutral-200, #F1EDE5); border-top: 0;
  border-radius: 0 0 32px 32px;
  min-height: 514px;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 16px;
  padding: 160px calc(100vw * 120 / 1440) 64px;
  box-sizing: border-box;
}
.lg-eyebrow {
  font-family: 'Work Sans', system-ui, sans-serif;
  font-size: 14px; font-weight: 600; line-height: normal;
  text-transform: uppercase;
  color: var(--neutral-600, #5C534D);
  margin: 0;
}
.lg-header .ty-h2 { max-width: 1200px; }
.lg-sub {
  font-family: 'Work Sans', system-ui, sans-serif;
  font-size: 20px; line-height: 1.6;
  color: var(--neutral-600, #5C534D);
  max-width: 800px; margin: 0;
}

.lg-body {
  background: var(--white, #fff);
  padding: 80px 24px 96px;
}
.lg-col {
  max-width: 800px; margin: 0 auto;
  display: flex; flex-direction: column; gap: 40px;
}
.lg-intro {
  font-size: 18px; line-height: 1.6;
  color: var(--neutral-700, #3D342F);
  margin: 0;
}
/* theme.css pads every <section> 96px; these are sub-sections of one column. */
.lg-sec { display: flex; flex-direction: column; gap: 16px; padding: 0; }
.lg-sec p, .lg-sec li {
  /* Figma sets these 16px lines on a 26px grid (4 lines = 104px). */
  font-size: 16px; line-height: 26px;
  color: var(--neutral-600, #5C534D);
  margin: 0;
}
/* The frames set links in the muted body colour. A thin neutral underline
   stays so a link is not told apart by nothing at all (WCAG 1.4.1). */
.lg-sec a, .lg-intro a {
  color: inherit;
  text-decoration: underline; text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--neutral-400, #D0C4B8);
}
.lg-sec a:hover { color: var(--carbon, #28201C); text-decoration-color: currentColor; }
.lg-sec a:focus-visible, .lg-intro a:focus-visible {
  outline: 2px solid var(--carbon, #28201C); outline-offset: 2px; border-radius: 2px;
}

/* Sunny-50 callout: the SMS sharing sentence, the data security line, the
   501(c)(3) line, the cookie list. */
.lg-callout {
  background: var(--sunny-50, #FBF7E7);
  border-radius: 12px;
  padding: 20px;
}
.lg-callout p, .lg-callout li { color: var(--carbon, #28201C); }
.lg-callout--strong p { font-weight: 600; }
.lg-callout ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.lg-callout li { padding-left: 16px; position: relative; }
.lg-callout li::before { content: "\2022"; position: absolute; left: 0; }
.lg-callout li strong { font-weight: 600; }

/* Cookie list (3694:22477): the first entry is the emphasised line, 16px
   SemiBold Carbon; the rest are Body Small, muted, bullet in the text run. */
.lg-callout--list li { padding-left: 0; font-size: 14px; line-height: 1.6; color: var(--neutral-600, #5C534D); }
.lg-callout--list li::before { position: static; content: "\2022\00a0"; }
.lg-callout--list li strong { font-weight: 400; }
.lg-callout--list li:first-child { font-size: 16px; font-weight: 600; color: var(--carbon, #28201C); }
.lg-callout--list li:first-child strong { font-weight: 600; }

.lg-sec.lg-contact {
  border-top: 1px solid var(--neutral-200, #F1EDE5);
  padding-top: 24px;
}
.lg-contact strong { font-weight: 600; color: var(--neutral-700, #3D342F); }


@media (max-width: 1100px) {
  .lg-header { min-height: 440px; padding: 150px 40px 56px; }
}
/* Phones: Figma mobile frames 3949:31373 (terms), 3949:31632 (privacy),
   3949:31118 (cookies), 3945:13704 (SMS). The header copy starts 224px down
   (where the frame has its breadcrumb; the page keeps its label there), the
   title is the mobile H3, the lede is the H7 display style in Carbon, and the
   slab ends in 32px rounded corners with a hairline. Body: 56/24 padding,
   40px between sections, 22px headings, 16px text, 14px callouts. */
@media (max-width: 720px) {
  .lg-header { min-height: 0; padding: 224px 23px 56px; gap: 12px; }
  .lg-eyebrow { line-height: 22px; }
  .lg-sub {
    font-family: 'Fredoka', system-ui, sans-serif; font-weight: 500;
    font-size: 22px; line-height: 1.3; color: var(--carbon, #28201C);
  }
  .lg-body { padding: 56px 24px 56px; }
  .lg-col { gap: 40px; }
  .lg-intro { font-size: 16px; }
  .lg-sec { gap: 12px; }
  .lg-sec .ty-h5 { font-size: 22px; line-height: 1.3; }
  .lg-callout p, .lg-callout li { font-size: 14px; line-height: 1.6; }
  .lg-callout--list li:first-child { font-size: 14px; }
  /* Contact block: "Email:" and "Mailing Address:" each start a line, and
     neither label breaks in two. */
  .lg-contact p > strong { white-space: nowrap; }
  .lg-contact p > strong::before { content: "\A"; white-space: pre; }
}

/* Breadcrumb above the title, as in the legal frames (was a category label). */
.lg-crumb { margin: 0 0 8px; flex-wrap: wrap; }
.lg-crumb a { padding-block: 4px; margin-block: -4px; }