/* GrowBro landing page
   Palette + type follow the store creative (Play 2026-09, App Store 2026-10):
   Montserrat headlines, the #97EA95 highlight pill, cream paper and forest green. */

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700 800;
  font-display: swap;
  src: url('/assets/fonts/montserrat/Montserrat-latin.woff2') format('woff2');
}

:root {
  --paper: #f4f5f2;
  --paper-2: #e9ede6;
  --mist: #e4f6e2;
  --leaf: #97ea95;
  --grow: #22c55e;
  --grow-deep: #15803d;
  --forest: #0f3a23;
  --forest-deep: #061a0d;   /* = the edge colour of the hero artwork */
  --forest-glow: #0b3820;   /* = the lit top centre of the hero artwork */
  --ink: #0b0f0c;
  --ink-2: #3f4a42;
  --ink-3: #6b746e;
  --line: rgba(11, 15, 12, 0.1);
  --pro: #0b0f0c;

  --display: 'Montserrat', 'Inter', system-ui, sans-serif;
  --body: 'Inter', system-ui, -apple-system, sans-serif;

  --measure: 34rem;
  --gutter: clamp(16px, 4vw, 40px);
  --wrap: 1180px;
  --nav-h: 72px;

  --radius-pill: 999px;
  --radius-phone: 42px;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body.no-scroll { overflow: hidden; }

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; }

:focus-visible {
  outline: 3px solid var(--grow);
  outline-offset: 3px;
}

.skip-link {
  position: absolute;
  left: 16px;
  top: -60px;
  z-index: 100;
  padding: 10px 16px;
  background: var(--ink);
  color: #fff;
  border-radius: var(--radius-pill);
}
.skip-link:focus { top: 12px; }

.wrap {
  width: min(100% - 2 * var(--gutter), var(--wrap));
  margin-inline: auto;
}

/* Type scale: Montserrat for display, Inter for everything else */
h1, h2, h3 { margin: 0; font-family: var(--display); font-weight: 800; letter-spacing: -0.02em; line-height: 1.05; }
h1 { font-size: clamp(2.5rem, 6.4vw, 4.6rem); }
h2 { font-size: clamp(2rem, 4.6vw, 3.25rem); }
h3 { font-size: clamp(1.4rem, 2.4vw, 1.85rem); line-height: 1.15; }
p { margin: 0; }
.lede { font-size: clamp(1.1rem, 1.6vw, 1.3rem); color: var(--ink-2); max-width: var(--measure); }

/* The highlight pill from the store screenshots. The heading isolates its own
   stacking context, so the pill can sit behind the heading's text (descenders of
   the line above paint over the green) while the nav (z-index 50) stays on top. */
h1, h2, h3 { position: relative; isolation: isolate; }
.hl {
  position: relative;
  z-index: -1;
  display: inline-block;
  padding: 0 0.28em 0.06em;
  margin-inline: -0.06em;
  border-radius: 0.32em;
  background: var(--leaf);
  color: var(--ink);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* Pro tag */
.tag-pro {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  background: var(--pro);
  color: var(--leaf);
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  vertical-align: middle;
}

/* Buttons + store badges */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 22px;
  border-radius: var(--radius-pill);
  border: 2px solid transparent;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  background: var(--ink);
  color: #fff;
  transition: transform 160ms ease, background-color 160ms ease;
}
.btn:hover { transform: translateY(-1px); }
.btn--leaf { background: var(--leaf); color: var(--ink); }
.btn--ghost { background: transparent; border-color: currentColor; }

.stores {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
}
.store-badge {
  display: inline-block;
  line-height: 0;
  border-radius: 8px;
  transition: transform 160ms ease;
}
.store-badge img { height: 56px; width: auto; }
.store-badge:hover { transform: translateY(-1px); }
.store-badge[hidden] { display: none; }

.store-soon {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 56px;
  padding: 0 18px 0 14px;
  border-radius: 8px;
  border: 1.5px solid rgba(255, 255, 255, 0.35);
  color: #fff;
  font-size: 0.95rem;
  line-height: 1.2;
}
.store-soon svg { width: 22px; height: 22px; flex: none; }
.store-soon small { display: block; font-size: 0.72rem; opacity: 0.75; }
.store-soon[hidden] { display: none; }
.on-paper .store-soon { border-color: rgba(11, 15, 12, 0.35); color: var(--ink); }

/* Check chips (hero + private section) */
.chips { display: flex; flex-wrap: wrap; gap: 10px; padding: 0; margin: 0; list-style: none; }
.chips li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px 8px 12px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 0 0 1.5px rgba(151, 234, 149, 0.5);
  color: #fff;
  font-weight: 500;
  font-size: 0.95rem;
}
.chips svg { width: 18px; height: 18px; color: var(--leaf); }

/* ---------- Navigation ---------- */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  height: var(--nav-h);
  transition: background-color 200ms ease, box-shadow 200ms ease;
}
.nav.is-solid, .nav.is-open {
  background: rgba(244, 245, 242, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 var(--line);
}
/* While the menu covers the page the bar is plain paper: nothing shows through,
   and a backdrop-filter would make the bar the containing block of the fixed menu. */
.nav.is-open {
  background: var(--paper);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.nav__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--nav-h);
}
.nav__logo img { height: 32px; width: auto; }
.nav__logo .logo-light { display: block; }
.nav__logo .logo-dark { display: none; }
.nav.is-solid .nav__logo .logo-light, .nav.is-open .nav__logo .logo-light { display: none; }
.nav.is-solid .nav__logo .logo-dark, .nav.is-open .nav__logo .logo-dark { display: block; }

.nav__links { display: none; align-items: center; gap: 28px; margin: 0; padding: 0; list-style: none; }
.nav__links a { color: #fff; text-decoration: none; font-weight: 500; font-size: 0.95rem; }
.nav.is-solid .nav__links a { color: var(--ink); }
.nav__cta { display: none; }
.nav.is-solid .nav__cta { background: var(--ink); color: #fff; }

.nav__burger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  cursor: pointer;
}
.nav.is-solid .nav__burger, .nav.is-open .nav__burger { background: rgba(11, 15, 12, 0.06); color: var(--ink); }
.nav__burger svg { width: 24px; height: 24px; }
.nav__burger .icon-close { display: none; }
.nav.is-open .nav__burger .icon-close { display: block; }
.nav.is-open .nav__burger .icon-menu { display: none; }

/* Phone menu: a full-height sheet under the bar. Explicit height instead of
   inset, so it stays full-height even if the bar becomes its containing block. */
.nav__menu {
  display: none;
  position: fixed;
  top: var(--nav-h);
  left: 0;
  right: 0;
  height: calc(100vh - var(--nav-h));
  height: calc(100dvh - var(--nav-h));
  flex-direction: column;
  padding: 8px var(--gutter) max(20px, env(safe-area-inset-bottom));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  background: var(--paper);
}
.nav.is-open .nav__menu { display: flex; }
.nav__menu ul { margin: 0; padding: 0; list-style: none; }
.nav__menu li + li { border-top: 1px solid var(--line); }
.nav__menu ul a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 0;
  color: var(--ink);
  text-decoration: none;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: -0.01em;
}
.nav__menu ul a::after {
  content: '';
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--ink-3);
  border-bottom: 2px solid var(--ink-3);
  transform: rotate(-45deg);
  flex: none;
}
.nav__menu li.is-secondary a { font-family: var(--body); font-weight: 500; font-size: 1.05rem; color: var(--ink-2); }
.nav__menu li.is-secondary a::after { display: none; }
.nav__menu .btn-pro { margin-top: auto; }
.nav__menu .btn-pro + small { display: block; margin-top: 10px; text-align: center; color: var(--ink-3); font-size: 0.85rem; }

/* The app's Pro button (ProUnlockButton: emerald to lime, sparkles, glow, shimmer sweep). */
.btn-pro {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 56px;
  padding: 0 20px;
  border-radius: 16px;
  border: 0;
  overflow: hidden;
  background: linear-gradient(135deg, #10b981, #84cc16);
  color: #fff;
  font-weight: 600;
  font-size: 1.05rem;
  text-decoration: none;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
  box-shadow: 0 4px 8px rgba(16, 185, 129, 0.4);
  transition: transform 160ms ease, box-shadow 160ms ease;
}
.btn-pro svg { width: 22px; height: 22px; flex: none; fill: #fff; }
.btn-pro:active { transform: scale(0.97); }
.btn-pro::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 60px;
  background: rgba(255, 255, 255, 0.3);
  transform: translateX(-120%) skewX(-20deg);
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .btn-pro::after { animation: shimmer 4s ease-in-out infinite; }
  @keyframes shimmer {
    0% { transform: translateX(-120%) skewX(-20deg); }
    37.5%, 100% { transform: translateX(calc(100vw)) skewX(-20deg); }
  }
}

@media (min-width: 900px) {
  .nav__links, .nav__cta { display: inline-flex; }
  .nav__burger, .nav__menu { display: none !important; }
  .nav__cta { background: var(--leaf); color: var(--ink); min-height: 42px; padding: 0 18px; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  padding: calc(var(--nav-h) + 48px) 0 0;
  background: var(--forest-deep);
  color: #fff;
  overflow: hidden;
}
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(90% 60% at 50% 0%, var(--forest) 0%, transparent 70%);
}
.hero__inner { position: relative; text-align: center; }
.hero h1 { margin-inline: auto; max-width: 14ch; }
.hero .lede { margin: 24px auto 0; color: rgba(255, 255, 255, 0.82); max-width: 38rem; }
.hero .stores { justify-content: center; margin-top: 32px; }
.hero .chips { justify-content: center; margin-top: 28px; }
.hero__note { margin-top: 18px; font-size: 0.9rem; color: rgba(255, 255, 255, 0.6); }

.hero__art {
  position: relative;
  margin: 44px auto 0;
  width: min(100%, 1400px);
}
.hero__art img { width: 100%; }
.hero__art::before {
  content: '';
  position: absolute;
  left: 20%;
  right: 20%;
  top: -160px;
  height: 320px;
  background: radial-gradient(50% 50% at 50% 50%, var(--forest-glow) 0%, transparent 100%);
}
.hero__art::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 30%;
  background: linear-gradient(to bottom, transparent, var(--forest-deep));
}
@media (prefers-reduced-motion: no-preference) {
  .hero__art { animation: rise 900ms cubic-bezier(0.2, 0.8, 0.2, 1) both 120ms; }
  @keyframes rise {
    from { opacity: 0; transform: translateY(40px); }
    to { opacity: 1; transform: none; }
  }
}

/* Diagonal band: the motif from the store frames. Sits between sections. */
.band {
  position: relative;
  height: clamp(80px, 12vw, 160px);
  overflow: hidden;
}
.band::before {
  content: '';
  position: absolute;
  left: -10%;
  right: -10%;
  top: 40%;
  height: 200%;
  background: var(--mist);
  transform: rotate(-4deg);
  transform-origin: left top;
}
.band--dark-top { background: var(--forest-deep); }
.band--to-dark::before { background: var(--forest-deep); }
.band--on-mist { background: var(--mist); }
.band--on-mist::before { background: var(--paper); }

/* ---------- Sections ---------- */
.section { padding: clamp(56px, 8vw, 110px) 0; }
.section--mist { background: var(--mist); }
.section__head { max-width: 42rem; margin-bottom: clamp(32px, 5vw, 64px); }
.section__head.center { margin-inline: auto; text-align: center; }
.section__head .lede { margin-top: 16px; }
.section__head.center .lede { margin-inline: auto; }

/* ---------- Feature chapters ---------- */
.chapter {
  display: grid;
  gap: 36px;
  align-items: center;
  padding: clamp(40px, 6vw, 80px) 0;
}
.chapter + .chapter { border-top: 1px solid var(--line); }
.chapter__copy h3 { max-width: 16ch; }
.chapter__copy h3 .tag-pro { margin-left: 10px; position: relative; top: -4px; }
.chapter__copy .lede { margin-top: 16px; font-size: 1.1rem; }
.chapter__copy ul {
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
  color: var(--ink-2);
}
.chapter__copy li { display: flex; gap: 12px; align-items: flex-start; }
.chapter__copy li svg { flex: none; width: 20px; height: 20px; margin-top: 3px; color: var(--grow-deep); }
.chapter__copy li strong { color: var(--ink); font-weight: 600; }

.chapter__art { display: flex; justify-content: center; }
.phones { display: flex; justify-content: center; align-items: flex-end; gap: 20px; }
.phone {
  width: min(100%, 270px);
  padding: 10px;
  border-radius: var(--radius-phone);
  background: #141514;
  box-shadow: 0 30px 60px -20px rgba(8, 31, 20, 0.45), inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.phone img { width: 100%; border-radius: calc(var(--radius-phone) - 10px); aspect-ratio: 1080 / 2400; object-fit: cover; }
.phone--back { width: min(100%, 230px); margin-bottom: 56px; }
.phones--pair .phone { width: min(52%, 270px); }
.phones--pair .phone--back { width: min(44%, 230px); margin-bottom: 12%; }

@media (min-width: 820px) {
  .chapter { grid-template-columns: 1fr 1fr; gap: 56px; }
  .chapter--flip .chapter__copy { order: 2; }
  .chapter--flip .chapter__art { order: 1; }
  .phones--pair { margin-left: -20px; }
  .phones--pair .phone--back { margin-bottom: 56px; }
}

/* ---------- Private section ---------- */
.private {
  background: var(--forest-deep);
  color: #fff;
}
.private .section__head { color: #fff; }
.private .lede { color: rgba(255, 255, 255, 0.78); }
.private__grid { display: grid; gap: 40px; align-items: center; }
.private__facts { display: grid; gap: 28px; margin: 0; padding: 0; list-style: none; }
.private__facts h3 { color: var(--leaf); font-size: 1.3rem; }
.private__facts p { margin-top: 8px; color: rgba(255, 255, 255, 0.78); max-width: 30rem; }
.private .phone { background: #1d2a21; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.6), inset 0 0 0 1px rgba(255, 255, 255, 0.12); }
@media (min-width: 820px) {
  .private__grid { grid-template-columns: 1.1fr 1fr; gap: 64px; }
}

/* ---------- Reviews ---------- */
.reviews { display: grid; gap: 28px; }
.review {
  margin: 0;
  padding: 28px 0 0;
  border-top: 2px solid var(--ink);
  display: grid;
  gap: 18px;
  align-content: start;
}
.review__stars { display: flex; gap: 3px; color: var(--grow-deep); }
.review__stars svg { width: 18px; height: 18px; }
.review blockquote { margin: 0; font-size: 1.1rem; line-height: 1.5; }
.review footer { color: var(--ink-3); font-size: 0.92rem; }
.review footer b { color: var(--ink); font-weight: 600; }
.reviews__link { margin-top: 36px; text-align: center; }
.reviews__link a { font-weight: 600; color: var(--grow-deep); }
@media (min-width: 820px) { .reviews { grid-template-columns: repeat(3, 1fr); gap: 40px; } }

/* ---------- Pricing ---------- */
.plans { display: grid; gap: 20px; }
.plan {
  padding: 28px;
  border-radius: 24px;
  background: #fff;
  border: 1.5px solid var(--line);
}
.plan--pro { background: var(--ink); color: #fff; border-color: var(--ink); }
.plan__name { font-family: var(--display); font-weight: 800; font-size: 1.1rem; }
.plan__price { margin-top: 10px; font-family: var(--display); font-weight: 800; font-size: 2.6rem; letter-spacing: -0.03em; line-height: 1; }
.plan__price small { font-family: var(--body); font-weight: 500; font-size: 1rem; letter-spacing: 0; margin-left: 8px; color: var(--ink-3); }
.plan--pro .plan__price small { color: rgba(255, 255, 255, 0.7); }
.plan__sub { margin-top: 8px; color: var(--ink-3); }
.plan--pro .plan__sub { color: rgba(255, 255, 255, 0.7); }
.plan ul { margin: 22px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.plan li { display: flex; gap: 10px; align-items: flex-start; }
.plan li svg { flex: none; width: 20px; height: 20px; margin-top: 3px; color: var(--grow-deep); }
.plan--pro li svg { color: var(--leaf); }
.plan .btn { margin-top: 24px; width: 100%; }
.plan--free { display: flex; flex-direction: column; }
.plan--free .btn { margin-top: auto; padding-top: 0; }
.plan--free ul { margin-bottom: 24px; }
.plan--free .btn--ghost { color: var(--ink); }
@media (min-width: 820px) { .plans { grid-template-columns: 1fr 1fr; gap: 28px; } .plan { padding: 36px; } }

.compare { margin-top: 48px; overflow-x: auto; }
.compare table { width: 100%; border-collapse: collapse; font-size: 0.97rem; }
.compare th, .compare td { padding: 14px 12px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.compare th { font-weight: 600; }
.compare thead th { font-family: var(--display); font-weight: 800; font-size: 1rem; }
.compare td:nth-child(2), .compare td:nth-child(3), .compare th:nth-child(2), .compare th:nth-child(3) { text-align: center; width: 22%; }
.compare th:nth-child(3), .compare td:nth-child(3) { background: rgba(151, 234, 149, 0.22); }
.compare svg { width: 20px; height: 20px; vertical-align: middle; }
.compare .yes { color: var(--grow-deep); }
.compare .no { color: rgba(11, 15, 12, 0.3); }
.compare__note { margin-top: 16px; font-size: 0.9rem; color: var(--ink-3); }

/* ---------- FAQ ---------- */
.faq { max-width: 46rem; margin-inline: auto; }
.faq details { border-top: 1px solid var(--line); }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 20px 0;
  font-weight: 600;
  font-size: 1.08rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary svg { flex: none; width: 20px; height: 20px; transition: transform 200ms ease; }
.faq details[open] summary svg { transform: rotate(45deg); }
.faq details > div { padding: 0 0 22px; color: var(--ink-2); max-width: 40rem; }
.faq details > div p + p { margin-top: 10px; }
.faq a { color: var(--grow-deep); font-weight: 600; }

/* ---------- Download + contact ---------- */
.download { text-align: center; }
.download .stores { justify-content: center; margin-top: 28px; }
.download__meta { margin-top: 20px; color: var(--ink-3); font-size: 0.95rem; }
.contact { margin-top: clamp(40px, 6vw, 72px); padding-top: 40px; border-top: 1px solid var(--line); text-align: center; }
.contact a { font-weight: 600; color: var(--grow-deep); }

/* ---------- Footer ---------- */
.footer { background: var(--forest-deep); color: rgba(255, 255, 255, 0.7); padding: 48px 0 32px; font-size: 0.92rem; }
.footer__grid { display: grid; gap: 32px; }
.footer__brand img { height: 28px; width: auto; }
.footer__brand p { margin-top: 14px; max-width: 24rem; }
.footer h4 { margin: 0 0 12px; color: #fff; font-size: 0.95rem; font-weight: 600; }
.footer ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.footer a { text-decoration: none; }
.footer a:hover { color: #fff; }
.footer__legal { margin-top: 40px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, 0.12); display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; }
@media (min-width: 720px) { .footer__grid { grid-template-columns: 2fr 1fr 1fr 1fr; } }

/* ---------- Age gate ---------- */
.gate {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgba(8, 31, 20, 0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 0;
  transition: opacity 240ms ease;
}
.gate.is-visible { opacity: 1; }
.gate[hidden] { display: none; }
.gate__card {
  width: min(100%, 440px);
  padding: 36px 28px;
  border-radius: 24px;
  background: var(--paper);
  color: var(--ink);
  text-align: center;
}
.gate__card h2 { font-size: 1.6rem; }
.gate__card p { margin-top: 12px; color: var(--ink-2); }
.gate__card .btn { width: 100%; margin-top: 12px; }
.gate__card .btn--ghost { color: var(--ink); }
.gate__card small { display: block; margin-top: 18px; color: var(--ink-3); font-size: 0.8rem; line-height: 1.4; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ---------- Legal pages (privacy, terms, imprint) ---------- */
.legal__nav { height: var(--nav-h); border-bottom: 1px solid var(--line); background: var(--paper); }
.legal__nav .wrap { display: flex; align-items: center; justify-content: space-between; height: 100%; }
.legal__nav img { height: 28px; width: auto; }
.legal__nav a { text-decoration: none; font-weight: 500; }
.legal__main { padding: clamp(40px, 6vw, 72px) 0 clamp(48px, 8vw, 96px); max-width: 46rem; }
.legal__main h1 { font-size: clamp(2.2rem, 5vw, 3.2rem); }
.legal__subtitle { margin-top: 12px; color: var(--ink-3); }
.legal__body { margin-top: clamp(32px, 5vw, 48px); color: var(--ink-2); }
.legal__body section + section { margin-top: 40px; }
.legal__body h2 { font-size: 1.5rem; color: var(--ink); margin-bottom: 14px; }
.legal__body h3 { font-family: var(--body); font-weight: 600; font-size: 1.08rem; color: var(--ink); margin: 22px 0 8px; }
.legal__body p + p, .legal__body ul + p, .legal__body p + ul { margin-top: 12px; }
.legal__body ul { padding-left: 1.3em; }
.legal__body li + li { margin-top: 6px; }
.legal__body a { color: var(--grow-deep); font-weight: 600; }
.legal__body strong { color: var(--ink); font-weight: 600; }
.legal__box { margin-top: 16px; padding: 20px 22px; border-radius: 16px; background: #fff; border: 1.5px solid var(--line); }
.legal__box p + p { margin-top: 8px; }
.legal__updated { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--line); }
.legal__small { font-size: 0.9rem; color: var(--ink-3); }
.legal__back { margin-top: 48px; }
.legal .footer__legal { margin-top: 0; padding-top: 0; border-top: 0; }
.legal .footer a { color: inherit; }