@font-face {
  font-family: 'General Sans';
  src: url('assets/fonts/GeneralSans-Bold.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: 'General Sans';
  src: url('assets/fonts/GeneralSans-Medium.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
}

:root {
  --navy: #0A0E17;
  --aqua: #00E0C2;
  --aqua-muted: #2FBFA8;
  --aqua-hover: #5FF0DD;
  --foam: #F5F7FA;
  --ink-on-fill: #04121E;
  --body-web: #A3ACBA;
  --nav-link: #C9D0DA;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  background: var(--navy);
  color: var(--foam);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
               "Helvetica Neue", Arial, sans-serif;
  overflow-x: hidden;
}

body {
  position: relative;
}

/* Fine grain so large flat navy areas read as material, not flat CSS color. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.045;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

a { color: inherit; text-decoration: none; }

/* ---------- Nav ---------- */

.nav {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px clamp(20px, 5vw, 64px);
  background: rgba(10, 14, 23, 0.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.nav-logo img {
  height: 38px;
  width: auto;
  display: block;
}

.appstore-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px;
  border-radius: 12px;
  background: var(--foam);
  color: var(--ink-on-fill);
  transition: background 0.2s ease, transform 0.2s ease;
}

.appstore-btn:hover {
  background: var(--aqua-hover);
  transform: translateY(-1px);
}

.appstore-btn .apple-mark {
  width: 22px;
  height: 22px;
  fill: var(--ink-on-fill);
  flex-shrink: 0;
}

.appstore-btn-text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

.appstore-btn-text small {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.01em;
}

.appstore-btn-text strong {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* ---------- Hero ---------- */

.hero {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 40px 24px 80px;
  min-height: 88vh;
  justify-content: center;
  /* Navy at top easing to near-black (matching the water photo's own dark
     tone) toward the bottom, so the photo's edges blend into the page
     instead of sitting on a flat navy that reads as a distinct rectangle. */
  background: linear-gradient(to bottom, var(--navy) 0%, var(--navy) 25%, #000000 90%);
}

.eyebrow-quote {
  font-size: clamp(19px, 2.3vw, 29px);
  font-weight: 400;
  color: var(--aqua);
  letter-spacing: -0.015em;
  line-height: 1.35;
  max-width: 640px;
  margin: 0 auto;
}

.eyebrow-attribution {
  margin: 14px auto clamp(4px, 0.5vh, 16px);
  font-size: 14px;
  color: var(--body-web);
  letter-spacing: 0.01em;
}

.eyebrow-attribution em {
  font-style: italic;
}

.headline-row {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 1700px;
}

.headline-row h1 {
  position: relative;
  font-family: 'General Sans', -apple-system, sans-serif;
  font-size: clamp(70px, 12.5vw, 190px);
  line-height: 1;
  letter-spacing: -0.05em;
  color: var(--aqua-muted);
  white-space: nowrap;
  transform: translate(clamp(30px, 5vw, 70px), clamp(-85px, -8vh, -40px));
  /* A clearly visible tonal shift across the letterforms, light to dark. */
  background: linear-gradient(160deg, #8FF5E3 0%, var(--aqua-muted) 50%, #0B5E51 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.headline-row .wake {
  font-weight: 700;
  flex: 1 1 0;
  text-align: right;
}

.headline-row .lab {
  font-weight: 500;
  flex: 1 1 0;
  text-align: left;
}

.phone-wrap {
  position: relative;
  z-index: 2;
  flex-shrink: 0;
  width: clamp(600px, 75vw, 1380px);
  margin-left: clamp(-565px, -46.5vw, -325px);
  margin-right: clamp(-565px, -46.5vw, -325px);
}

.phone-wrap::before {
  content: none;
}

/* The vertical (top/bottom) fade lives on this wrapper and the horizontal
   (left/right) fade lives on .phone-img itself — two nested single-axis
   masks instead of one element with mask-composite:intersect, because that
   property silently fails to combine two gradient masks in this renderer. */
.phone-fade-v {
  display: block;
  width: 100%;
  /* Eased (slow-start) curve rather than a plain 2-stop linear fade: the
     water is already near-black, so a linear alpha ramp reads as "fully
     there" until alpha gets very low, then the bright highlights vanish
     all at once in a thin band — looking like a hard cutoff even though
     the alpha itself is gradual. Spreading the low-alpha range over more
     of the height lets the highlights taper out instead of snapping off. */
  -webkit-mask-image: linear-gradient(
    to bottom,
    black 40%,
    rgba(0, 0, 0, 0.9) 58%,
    rgba(0, 0, 0, 0.65) 70%,
    rgba(0, 0, 0, 0.4) 80%,
    rgba(0, 0, 0, 0.2) 88%,
    rgba(0, 0, 0, 0.07) 95%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to bottom,
    black 40%,
    rgba(0, 0, 0, 0.9) 58%,
    rgba(0, 0, 0, 0.65) 70%,
    rgba(0, 0, 0, 0.4) 80%,
    rgba(0, 0, 0, 0.2) 88%,
    rgba(0, 0, 0, 0.07) 95%,
    transparent 100%
  );
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.phone-img {
  display: block;
  width: 100%;
  height: auto;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 4%, black 96%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, black 4%, black 96%, transparent 100%);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

/* A second copy of the same photo, run through an animated SVG displacement
   filter, masked to ONLY the water that's a safe 60px+ away from the phone's
   actual edge (see water-ripple-mask.png) — so distortion can never reach
   the phone, no matter how the ripple moves. */
.water-ripple {
  position: absolute;
  inset: 0;
  width: 100%;
  height: auto;
  pointer-events: none;
  filter: url(#water-distort);
  -webkit-mask-image: url('assets/water-ripple-mask.png?v=1');
  mask-image: url('assets/water-ripple-mask.png?v=1');
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

@media (prefers-reduced-motion: reduce) {
  .water-ripple {
    display: none;
  }
}

/* Flat, slightly transparent dark panel over just the bottom of the water,
   fading in from the clear phone/water area above — softens the water
   photo's hard bottom edge instead of relying on the mask fade alone. */
.water-bottom-overlay {
  position: absolute;
  /* Break out of .phone-wrap's own (narrower-than-viewport) width so the
     darkening spans the full page — otherwise it only covers the width of
     the water image itself, leaving a visibly lighter band to its left and
     right where only the hero's own background gradient applies, which
     reads as the water sitting inside a darker "box". */
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  bottom: 0;
  height: 35%;
  pointer-events: none;
  background: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.75) 60%, rgba(0, 0, 0, 0.75) 100%);
}

/* Hand-silhouette tint overlay — disabled for the current hero image (a
   standalone device render, no hand), since the mask was shaped for the
   previous hand+phone photo and would not match this image's silhouette. */
.phone-wrap::after {
  content: none;
}

/* ---------- Responsive ---------- */

@media (max-width: 860px) {
  .headline-row {
    flex-direction: column;
    gap: clamp(4px, 1vh, 10px);
  }

  .headline-row h1 {
    font-size: clamp(60px, 18vw, 120px);
    white-space: normal;
    /* The desktop row layout pulls the text up/right to tuck it against the
       phone image — at this breakpoint the row stacks vertically instead,
       so that offset is no longer wanted and was overlapping the quote
       above it. */
    transform: none;
  }

  .phone-wrap {
    width: clamp(240px, 62vw, 340px);
    /* Desktop overlaps the phone over the text by sitting all three in one
       row; stacked on mobile they'd otherwise just sit in sequence with no
       overlap at all, so pull the phone up/down into Wake/Lab instead. */
    margin: clamp(-70px, -10vh, -40px) 0;
  }

  .nav {
    padding: 20px 20px;
  }

  .nav-logo img {
    height: 28px;
  }

  .appstore-btn-text strong {
    font-size: 14px;
  }

  .headline-row .wake,
  .headline-row .lab {
    flex: none;
    text-align: center;
  }

  /* 88vh paired with the much smaller mobile text leaves a large empty
     block above the quote and below the headline before any content is
     visible. Mobile text is shorter relative to width than height, so a
     fixed viewport-height box isn't the right container here. */
  .hero {
    min-height: auto;
    padding-top: clamp(32px, 6vh, 56px);
    padding-bottom: clamp(32px, 6vh, 56px);
  }
}

/* ---------- Intro section ---------- */

.intro {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow: hidden;
  padding-top: clamp(32px, 5vh, 70px);
  /* Match the hero's near-black bottom instead of the lighter navy. */
  background: #000000;
}

.intro-bg {
  position: absolute;
  z-index: 2;
  inset: 0;
  background-size: 136%;
  background-position: center top;
  background-repeat: no-repeat;
}

/* Flat, slightly transparent dark panels behind the title/copy at the top
   and mirrored at the bottom for a clean transition into the next section,
   fading smoothly to fully clear in between so the phone collage reads
   unobstructed. */
.intro-fade {
  position: absolute;
  z-index: 3;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.72) 0%,
    rgba(0, 0, 0, 0.72) 40%,
    transparent 70%,
    transparent 78%,
    #000000 100%
  );
}

.intro-content {
  position: relative;
  z-index: 4;
  text-align: center;
  padding: 0 24px;
  max-width: 760px;
}

.intro-title {
  font-family: 'General Sans', -apple-system, sans-serif;
  font-size: clamp(26px, 3.6vw, 44px);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--foam);
  margin-bottom: clamp(16px, 2.5vh, 28px);
}

.aqua-word {
  background: linear-gradient(160deg, #57D3BE 0%, var(--aqua-muted) 45%, #1E9E89 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.intro-copy {
  font-size: clamp(16px, 1.9vw, 22px);
  font-weight: 400;
  line-height: 1.5;
  color: var(--foam);
  opacity: 0.92;
}

@media (max-width: 860px) {
  .intro-copy br {
    display: none;
  }

  /* The collage is a background image, not flow content, so forcing a full
     viewport height here (sized for the desktop collage) just leaves a
     large empty gap below the short title/copy on narrow screens. */
  .intro {
    min-height: 0;
    padding-bottom: clamp(48px, 10vh, 96px);
  }

  /* .intro-fade's gradient stops are tuned for a tall ~100vh section; now
     that .intro is shrunk to content height on mobile, those same
     percentage stops fade out well before the copy text ends, leaving the
     back half of the paragraph unscrimmed against the busy collage. Hold
     the dark scrim through almost the full height here instead. */
  .intro-fade {
    background: linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.72) 0%,
      rgba(0, 0, 0, 0.72) 80%,
      transparent 94%,
      #000000 100%
    );
  }
}

/* ---------- Feature 2 section (text/headline placeholder — image + full
   layout to come once the reference is provided) ---------- */

.feature2 {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #000000;
  padding: clamp(60px, 10vh, 120px) 24px 0;
  overflow: hidden;
}

.feature2-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(32px, 5vh, 56px);
  max-width: 1200px;
  width: 100%;
}

.feature2-content {
  text-align: center;
  max-width: 880px;
}

.feature2-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 4vw, 56px);
  text-align: left;
}

@media (max-width: 700px) {
  .feature2-columns {
    grid-template-columns: 1fr;
    text-align: center;
  }
}

.feature2-img {
  width: clamp(280px, 38vw, 500px);
  height: auto;
  flex-shrink: 0;
}

.feature2-title {
  font-family: 'General Sans', -apple-system, sans-serif;
  font-size: clamp(26px, 3.6vw, 44px);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--foam);
  margin-bottom: clamp(16px, 2.5vh, 28px);
}

.feature2-copy {
  font-size: clamp(14px, 1.3vw, 17px);
  font-weight: 400;
  line-height: 1.6;
  color: var(--foam);
  opacity: 0.85;
}

@media (max-width: 860px) {
  .feature2-copy br {
    display: none;
  }
}

/* ---------- Feature 3 section (text/headline placeholder — image to come
   once the reference is provided) ---------- */

.feature3 {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #000000;
  padding: clamp(60px, 10vh, 120px) 24px;
}

.feature3-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(32px, 5vh, 56px);
  max-width: 1600px;
  width: 100%;
}

.feature3-content {
  text-align: center;
  max-width: 880px;
}

.feature3-img {
  width: min(100%, clamp(700px, 90vw, 1500px));
  height: auto;
}

.feature3-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 4vw, 56px);
  text-align: left;
}

@media (max-width: 700px) {
  .feature3-columns {
    grid-template-columns: 1fr;
    text-align: center;
  }
}

.feature3-title {
  font-family: 'General Sans', -apple-system, sans-serif;
  font-size: clamp(26px, 3.6vw, 44px);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--foam);
  margin-bottom: clamp(16px, 2.5vh, 28px);
}

.feature3-copy {
  font-size: clamp(14px, 1.3vw, 17px);
  font-weight: 400;
  line-height: 1.6;
  color: var(--foam);
  opacity: 0.85;
}

/* ---------- Feature 4 section (Drills — text/headline placeholder, same
   layout as feature3; image to come once the reference is provided) ---------- */

.feature4 {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #000000;
  padding: clamp(60px, 10vh, 120px) 24px;
}

.feature4-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(32px, 5vh, 56px);
  max-width: 1600px;
  width: 100%;
}

.feature4-content {
  text-align: center;
  max-width: 880px;
}

.feature4-img {
  width: min(100%, clamp(700px, 90vw, 1500px));
  height: auto;
}

.feature4-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 4vw, 56px);
  text-align: left;
}

@media (max-width: 700px) {
  .feature4-columns {
    grid-template-columns: 1fr;
    text-align: center;
  }
}

.feature4-title {
  font-family: 'General Sans', -apple-system, sans-serif;
  font-size: clamp(26px, 3.6vw, 44px);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--foam);
  margin-bottom: clamp(16px, 2.5vh, 28px);
}

.feature4-copy {
  font-size: clamp(14px, 1.3vw, 17px);
  font-weight: 400;
  line-height: 1.6;
  color: var(--foam);
  opacity: 0.85;
}

/* The feature3/4 images each pack 3 phones side by side, sized for desktop.
   Shrunk to mobile width every phone gets too small to read and the dark
   space in the source image blends into the page, reading as empty. Zoom
   and crop so the center phone is fully legible and the side ones are
   still partly visible, instead of shrinking the whole trio to fit. */
@media (max-width: 860px) {
  .phone-trio-crop {
    width: 100%;
    overflow: hidden;
    border-radius: 12px;
  }

  .phone-trio-crop .feature3-img,
  .phone-trio-crop .feature4-img {
    display: block;
    position: relative;
    /* margin:auto doesn't reliably center an element wider than its
       container here (Chromium pushed all the overflow to one side
       instead of splitting it) — centering via transform crops both
       edges evenly instead. */
    left: 50%;
    transform: translateX(-50%);
    width: auto;
    max-width: none;
    height: 90vw;
  }
}

/* ---------- Pricing / final CTA section ---------- */

.pricing {
  position: relative;
  display: flex;
  justify-content: center;
  background: #000000;
  padding: clamp(80px, 12vh, 140px) 24px;
}

.pricing-inner {
  text-align: center;
  max-width: 720px;
  width: 100%;
}

.pricing-title {
  font-family: 'General Sans', -apple-system, sans-serif;
  font-size: clamp(26px, 3.6vw, 44px);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--foam);
  margin-bottom: clamp(12px, 2vh, 20px);
}

.pricing-copy {
  font-size: clamp(15px, 1.5vw, 18px);
  font-weight: 400;
  line-height: 1.55;
  color: var(--foam);
  opacity: 0.85;
  max-width: 560px;
  margin: 0 auto clamp(32px, 5vh, 48px);
}

.pricing-features {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  column-gap: 28px;
  row-gap: 20px;
  text-align: left;
  max-width: 700px;
  margin: 0 auto clamp(40px, 6vh, 64px);
}

.pricing-feature {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-left: 20px;
  position: relative;
}

.pricing-feature::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--aqua);
}

.pricing-feature-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--foam);
}

.pricing-feature-desc {
  font-size: 13px;
  color: var(--body-web);
}

.pricing-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: clamp(32px, 5vh, 48px);
}

@media (max-width: 560px) {
  .pricing-cards {
    grid-template-columns: 1fr;
  }
}

.pricing-card {
  position: relative;
  text-align: left;
  padding: 28px 24px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.03);
}

.pricing-card-featured {
  border-color: var(--aqua);
  background: rgba(0, 224, 194, 0.06);
}

.pricing-card-badge {
  position: absolute;
  top: -12px;
  right: 20px;
  background: var(--aqua);
  color: var(--ink-on-fill);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.01em;
  padding: 4px 10px;
  border-radius: 999px;
}

.pricing-card-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--body-web);
  margin-bottom: 10px;
}

.pricing-card-price {
  font-family: 'General Sans', -apple-system, sans-serif;
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--foam);
}

.pricing-card-period {
  font-size: 15px;
  font-weight: 500;
  color: var(--body-web);
}

.pricing-card-sub {
  margin-top: 8px;
  font-size: 13px;
  color: var(--body-web);
}

.pricing-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  border-radius: 14px;
  background: var(--foam);
  color: var(--ink-on-fill);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
  transition: background 0.2s ease, transform 0.2s ease;
}

.pricing-cta:hover {
  background: var(--aqua-hover);
  transform: translateY(-1px);
}

.pricing-cta .apple-mark {
  width: 20px;
  height: 20px;
  fill: var(--ink-on-fill);
  flex-shrink: 0;
}

.pricing-fineprint {
  margin-top: 16px;
  font-size: 13px;
  color: var(--body-web);
  opacity: 0.8;
}

/* ---------- Footer ---------- */

.site-footer {
  background: #000000;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: 32px 24px;
}

.site-footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  max-width: 1200px;
  margin: 0 auto;
}

.site-footer-logo img {
  height: 26px;
  width: auto;
  display: block;
  opacity: 0.9;
}

.site-footer-links {
  display: flex;
  align-items: center;
  gap: clamp(16px, 3vw, 32px);
  flex-wrap: wrap;
}

.site-footer-links a {
  font-size: 14px;
  color: var(--nav-link);
  transition: color 0.2s ease;
}

.site-footer-links a:hover {
  color: var(--aqua);
}

.site-footer-copy {
  font-size: 13px;
  color: var(--body-web);
  opacity: 0.7;
}

@media (max-width: 640px) {
  .site-footer-inner {
    flex-direction: column;
    text-align: center;
  }
}

/* ---------- Legal pages (Privacy / Terms) ---------- */

.legal {
  background: var(--navy);
  padding: clamp(48px, 8vh, 96px) 24px clamp(80px, 12vh, 140px);
  min-height: 60vh;
}

.legal-inner {
  max-width: 720px;
  margin: 0 auto;
}

.legal-title {
  font-family: 'General Sans', -apple-system, sans-serif;
  font-size: clamp(32px, 5vw, 56px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.05;
  background: linear-gradient(160deg, #8FF5E3 0%, var(--aqua-muted) 50%, #0B5E51 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 10px;
}

.legal-meta {
  font-size: 14px;
  color: var(--body-web);
  margin-bottom: clamp(32px, 5vh, 48px);
}

.legal-intro {
  font-size: 17px;
  line-height: 1.65;
  color: var(--foam);
  opacity: 0.92;
  margin-bottom: clamp(32px, 5vh, 48px);
  padding-bottom: clamp(32px, 5vh, 48px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.legal-body h2 {
  font-family: 'General Sans', -apple-system, sans-serif;
  font-size: 22px;
  font-weight: 600;
  color: var(--foam);
  letter-spacing: -0.01em;
  margin-top: clamp(32px, 5vh, 44px);
  margin-bottom: 12px;
}

.legal-body h2:first-child {
  margin-top: 0;
}

.legal-body p,
.legal-body li {
  font-size: 15px;
  line-height: 1.7;
  color: var(--body-web);
}

.legal-body p {
  margin-bottom: 14px;
}

.legal-body ul {
  list-style: none;
  margin-bottom: 14px;
}

.legal-body li {
  position: relative;
  padding-left: 20px;
  margin-bottom: 10px;
}

.legal-body li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--aqua);
}

.legal-body strong {
  color: var(--foam);
  font-weight: 600;
}

.legal-body a {
  color: var(--aqua);
  text-decoration: underline;
  text-decoration-color: rgba(0, 224, 194, 0.35);
  text-underline-offset: 2px;
}

.legal-body a:hover {
  text-decoration-color: var(--aqua);
}