/* =========================
   Skepia Landing — styles.css
   Design tokens mirror the Skepia app (EidosClient/src/styles/theme.ts):
   pure black canvas, Dela Gothic One headings, Inter body, glass surfaces,
   24px card radius and the app's category glow palette.
   ========================= */

/* 1) Fonts (taken from the app: assets/fonts, subset to latin) */
@font-face{
  font-family: "Dela Gothic One";
  src: url("fonts/DelaGothicOne-Regular.woff") format("woff"),
       url("fonts/DelaGothicOne-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: "Inter";
  src: url("fonts/Inter.woff") format("woff"),
       url("fonts/Inter.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* 2) Design tokens */
:root{
  /* Colors — app theme (dark) */
  --bg: #000000;
  --text: #ffffff;
  --text-secondary: rgba(255,255,255,0.6);
  --text-tertiary: rgba(255,255,255,0.4);

  --blue: #036ef9;          /* blue100 / primary */
  --blue-deep: #003f90;     /* blue200 */
  --cyan: #4adeff;          /* creativityBotGradientEnd */

  /* Glass surfaces (settingsRow / friendsTab / unlock button in the app) */
  --glass: rgba(255,255,255,0.06);
  --glass-strong: rgba(255,255,255,0.12);
  --glass-border: rgba(255,255,255,0.12);
  --glass-border-strong: rgba(255,255,255,0.24);

  /* Category glows — homeCategoryButton* in the app theme */
  --focus-glow: #8400ff;    --focus-center: #c4adf0;
  --cognitive-glow: #fee440; --cognitive-center: #fff2a9;
  --memory-glow: #f25bb5;   --memory-center: #f0b4d9;
  --logic-glow: #9ae942;    --logic-center: #d6f3b2;
  --numbers-glow: #036ef9;  --numbers-center: #9dc8fd;
  --creativity-glow: #03bbf9; --creativity-center: #b6ecff;
  --neutral-glow: #747474;  --neutral-center: #d5d5d5;

  /* Layout */
  --container-max: 1120px;
  --radius: 24px;
  --radius-lg: 32px;

  /* Spacing scale */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-7: 32px;
  --s-8: 40px;
  --s-9: 48px;
  --s-10: 64px;
  --s-12: 80px;
  --s-16: 120px;

  /* Type scale */
  --fs-300: 0.875rem;  /* 14px */
  --fs-400: 1rem;      /* 16px */
  --fs-500: 1.125rem;  /* 18px */
  --fs-600: 1.25rem;   /* 20px */
  --fs-700: 1.5rem;    /* 24px */
  --fs-800: 2rem;      /* 32px */

  --font-heading: "Dela Gothic One", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-body: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* 3) Reset & base */
*, *::before, *::after{ box-sizing: border-box; }
html{
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 88px; /* clears the sticky header on anchor jumps */
  background: var(--bg);
}
body{
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-400);
  line-height: 1.5;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img{ max-width: 100%; height: auto; }
a{ color: inherit; }
h1, h2, h3{ margin: 0; font-weight: 400; font-family: var(--font-heading); }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
}

/* 4) Helpers & a11y */
.skip-link{
  position: absolute; left: -9999px; top: -9999px;
}
.skip-link:focus{
  left: 16px; top: 16px;
  background: var(--text);
  color: #000;
  padding: 8px 12px; border-radius: 12px;
  z-index: 1000;
  text-decoration: none;
}

:focus-visible{
  outline: 2px solid var(--text);
  outline-offset: 3px;
  border-radius: 4px;
}

.container{
  width: min(var(--container-max), 100% - 2.5rem);
  margin-inline: auto;
}

/* Glow blobs — the app leans on wide, soft colour glows behind dark surfaces */
.glow{
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.6;
  z-index: 0;
}
.glow--hero{
  top: -220px; left: 50%;
  width: min(900px, 130vw); height: min(900px, 130vw);
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(3,110,249,0.55) 0%, rgba(3,110,249,0.16) 42%, rgba(0,0,0,0) 70%);
}
.glow--benefits{
  top: 10%; left: -10%;
  width: min(700px, 90vw); height: min(700px, 90vw);
  background: radial-gradient(circle, rgba(132,0,255,0.28) 0%, rgba(3,187,249,0.14) 45%, rgba(0,0,0,0) 72%);
}
.glow--cta{
  top: -35%; left: 50%;
  width: min(760px, 120%); height: min(760px, 120%);
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(3,110,249,0.45) 0%, rgba(0,63,144,0.18) 45%, rgba(0,0,0,0) 70%);
}

/* Reveal on scroll */
.reveal{
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 600ms ease, transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal.is-visible{ opacity: 1; transform: none; }

/* 5) Header */
.site-header{
  position: sticky;
  top: 0;
  z-index: 100;
  padding-block: var(--s-3);
  background: rgba(0,0,0,0.72);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.site-header__inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
}
.brand{
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  text-decoration: none;
}
.brand__icon{
  width: 40px; height: 40px;
  border-radius: 12px;
  display: block;
}
.brand__name{
  font-family: var(--font-heading);
  font-size: var(--fs-600);
  line-height: 1;
  color: var(--text);
}

/* 6) Sections */
.section{
  position: relative;
  padding-block: var(--s-12);
  overflow: hidden;
}
.section > .container{ position: relative; z-index: 1; }

@media (min-width: 768px){
  .section{ padding-block: var(--s-16); }
}

/* 7) Hero */
.hero{
  padding-top: var(--s-10);
  padding-bottom: var(--s-4);
  text-align: center;
}
.hero__inner{
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.hero__headline{
  font-size: clamp(2.125rem, 6.4vw, 4rem);
  /* Dela Gothic One has deep descenders; background-clip:text crops anything
     that overflows the text box, so keep the line box roomy and pad the bottom. */
  line-height: 1.24;
  padding-bottom: 0.12em;
  letter-spacing: -0.01em;
  max-width: 18ch;
  margin-bottom: var(--s-6);
  background: linear-gradient(180deg, #ffffff 0%, rgba(255,255,255,0.62) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.hero__subheadline{
  font-size: var(--fs-500);
  color: var(--text-secondary);
  margin: 0 0 var(--s-8);
  max-width: 62ch;
  line-height: 1.6;
  text-wrap: balance;
}

@media (min-width: 768px){
  .hero{ padding-top: var(--s-12); }
  .hero__subheadline{ font-size: var(--fs-600); }
}

/* 8) Poster marquee — the app's game posters */
.marquee{
  position: relative;
  z-index: 1;
  margin-top: var(--s-10);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.marquee__track{
  display: flex;
  gap: var(--s-4);
  width: max-content;
  padding-block: var(--s-2);
  animation: marquee 60s linear infinite;
}
.marquee:hover .marquee__track{ animation-play-state: paused; }
.poster{
  width: 160px;
  height: 226px;
  object-fit: cover;
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,0.08);
  flex: none;
}
@media (min-width: 768px){
  .poster{ width: 200px; height: 283px; }
}
@keyframes marquee{
  from{ transform: translateX(0); }
  to{ transform: translateX(calc(-50% - var(--s-2))); }
}
@media (prefers-reduced-motion: reduce){
  .marquee__track{ animation: none; }
  .marquee{
    overflow-x: auto;
    scrollbar-width: none;
  }
}

/* 9) Section titles & intros */
.section-title{
  font-size: clamp(1.75rem, 4.6vw, 3rem);
  line-height: 1.3;
  padding-bottom: 0.12em;
  letter-spacing: -0.01em;
  text-align: center;
  max-width: 22ch;
  margin-inline: auto;
  text-wrap: balance;
  background: linear-gradient(180deg, #ffffff 0%, rgba(255,255,255,0.62) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.intro{
  color: var(--text-secondary);
  font-size: var(--fs-500);
  max-width: 52ch;
  margin: var(--s-4) auto 0;
  text-align: center;
  line-height: 1.6;
}

/* 10) Cards (pains & benefits) */
.card-list{
  display: grid;
  gap: var(--s-4);
  margin-top: var(--s-9);
  grid-template-columns: 1fr;
}
@media (min-width: 600px){
  .card-list{ grid-template-columns: 1fr 1fr; gap: var(--s-5); }
}
@media (min-width: 940px){
  .card-list{ grid-template-columns: repeat(3, 1fr); }
}

.card{
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--s-4);
  min-height: 112px;
  padding: var(--s-6);
  border-radius: var(--radius);
  background: var(--glass);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  overflow: hidden;
  transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1), border-color 300ms ease, background 300ms ease;
}
.card::after{
  /* soft category glow bleeding in from the ball, like the app's category buttons.
     The box overshoots the card on every side so the gradient fades out inside
     the card instead of ending on a visible edge. */
  content: "";
  position: absolute;
  inset: -70% 35% -70% -45%;
  background: radial-gradient(circle at 50% 50%, var(--card-glow, var(--neutral-glow)) 0%, transparent 62%);
  opacity: 0.28;
  pointer-events: none;
}
.card:hover{
  transform: translateY(-4px);
  border-color: var(--glass-border-strong);
  background: rgba(255,255,255,0.09);
}
.card__title{
  position: relative;
  font-family: var(--font-body);
  font-size: var(--fs-500);
  font-weight: 600;
  line-height: 1.4;
  color: var(--text);
}
/* Yarn balls sliced out of the app's Threads of Fate sprite (5 x 2 cells) */
.orb{
  position: relative;
  flex: none;
  width: 56px; height: 56px;
  background-image: url("img/threads.webp");
  background-size: 500% 200%;
  background-repeat: no-repeat;
  filter: drop-shadow(0 6px 16px rgba(0,0,0,0.6));
}

.card--pain{ --card-glow: var(--neutral-glow); }
.card--pain::after{ opacity: 0.14; }
.card--focus{ --card-glow: var(--focus-glow); --card-center: var(--focus-center); }
.card--focus .orb{ background-position: 100% 100%; }
.card--cognitive{ --card-glow: var(--cognitive-glow); --card-center: var(--cognitive-center); }
.card--cognitive .orb{ background-position: 50% 0%; }
.card--memory{ --card-glow: var(--memory-glow); --card-center: var(--memory-center); }
.card--memory .orb{ background-position: 25% 100%; }
.card--logic{ --card-glow: var(--logic-glow); --card-center: var(--logic-center); }
.card--logic .orb{ background-position: 75% 0%; }
.card--numbers{ --card-glow: var(--numbers-glow); --card-center: var(--numbers-center); }
.card--numbers .orb{ background-position: 0% 100%; }
.card--creativity{ --card-glow: var(--creativity-glow); --card-center: var(--creativity-center); }
.card--creativity .orb{ background-position: 25% 0%; }
.card--benefit::after{ opacity: 0.38; }

@media (prefers-reduced-motion: reduce){
  .card{ transition: none; }
  .card:hover{ transform: none; }
}

/* 11) How Skepia helps */
.how-content{
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-9);
  align-items: center;
  margin-top: var(--s-9);
}
@media (min-width: 900px){
  .how-content{
    grid-template-columns: 1fr minmax(320px, 420px);
    gap: var(--s-10);
  }
}

.feature-list{
  display: grid;
  gap: var(--s-4);
}
.feature-item{
  padding: var(--s-6);
  border-radius: var(--radius);
  background: var(--glass);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  color: var(--text-secondary);
  font-size: var(--fs-400);
  line-height: 1.6;
  transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1), border-color 300ms ease;
}
.feature-item:hover{
  transform: translateY(-4px);
  border-color: var(--glass-border-strong);
}
.feature-item strong{
  display: block;
  margin-bottom: var(--s-2);
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: var(--fs-600);
  line-height: 1.3;
  color: var(--text);
}
@media (prefers-reduced-motion: reduce){
  .feature-item{ transition: none; }
  .feature-item:hover{ transform: none; }
}

/* 12) App preview — mirrors the app's home screen (Figma 1494-29437) */
.feature-preview{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-4);
}
.phone{
  position: relative;
  width: min(340px, 88vw);
  padding: 9px;
  border-radius: 48px;
  background: linear-gradient(160deg, rgba(255,255,255,0.24), rgba(255,255,255,0.04) 40%, rgba(255,255,255,0.14));
  box-shadow: 0 40px 80px -30px rgba(3,110,249,0.5), 0 24px 60px -20px rgba(0,0,0,0.8);
}
.phone__screen{
  position: relative;
  border-radius: 40px;
  background: #000;
  padding: 14px 0 12px;
  overflow: hidden;
}

/* status bar */
.phone__statusbar{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 22px;
  margin-bottom: var(--s-5);
}
.phone__time{
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.phone__status-icons{
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.phone__signal{
  width: 14px; height: 9px;
  background:
    linear-gradient(to top, #fff 0 3px, transparent 3px) 0 100% / 2.5px 3px no-repeat,
    linear-gradient(to top, #fff 0 5px, transparent 5px) 4px 100% / 2.5px 5px no-repeat,
    linear-gradient(to top, #fff 0 7px, transparent 7px) 8px 100% / 2.5px 7px no-repeat,
    linear-gradient(to top, #fff 0 9px, transparent 9px) 12px 100% / 2.5px 9px no-repeat;
}
.phone__battery{
  width: 18px; height: 9px;
  border: 1px solid rgba(255,255,255,0.6);
  border-radius: 3px;
  position: relative;
}
.phone__battery::before{
  content: "";
  position: absolute;
  inset: 1.5px;
  background: #fff;
  border-radius: 1px;
}

/* section header: title + round arrow button */
.phone__section{ padding-left: 16px; }
.phone__section + .phone__section{ margin-top: var(--s-5); }
.phone__section-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-right: 16px;
  margin-bottom: 10px;
}
.phone__section-title{
  font-family: var(--font-heading);
  font-size: 21px;
  line-height: 1.3;
  padding-bottom: 0.08em;
  color: var(--text);
}
.phone__arrow{
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
  font-size: 14px;
  line-height: 1;
  color: #fff;
}
.phone__arrow::before{ content: "\2192"; }
.phone__arrow--plain{
  width: auto; height: auto;
  background: none;
  font-size: 15px;
}

/* game cards: the app's 200 x 283 poster card, scaled down */
.phone__row{
  display: flex;
  gap: 6px;
}
.game-card{
  position: relative;
  flex: none;
  width: 118px;
  height: 167px;
  padding: 10px 6px 8px;
  border-radius: 18px;
  background-size: cover;
  background-position: center;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  text-align: center;
  color: #fff;
}
.game-card::before{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,0.1) 55%, rgba(0,0,0,0.6) 100%);
}
.game-card__date{
  position: relative;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.3;
  text-shadow: 0 1px 4px rgba(0,0,0,0.7);
}
.game-card__text{
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.game-card__title{
  font-family: var(--font-heading);
  font-size: 13px;
  line-height: 1.16;
  text-shadow: 0 1px 6px rgba(0,0,0,0.7);
}
.game-card__desc{
  font-size: 9.5px;
  line-height: 1.3;
  opacity: 0.75;
  text-shadow: 0 1px 4px rgba(0,0,0,0.7);
}

/* "All <category> puzzles" tile closing each row */
.game-card--all{
  justify-content: center;
  gap: 6px;
  padding: 12px;
}
.game-card--all::before{ content: none; }
.game-card__all-label{
  position: relative;
  font-size: 10px;
  line-height: 1.3;
  font-weight: 500;
}
.game-card--all-logic{
  background: radial-gradient(130% 130% at 30% 15%, var(--logic-center) 0%, var(--logic-glow) 55%, #6fa532 100%);
  color: rgba(255,255,255,0.95);
}
.game-card--all-memory{
  background: radial-gradient(130% 130% at 30% 15%, var(--memory-center) 0%, var(--memory-glow) 55%, #bf3b8c 100%);
}

/* bottom tab bar */
.phone__tabbar{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2px;
  margin: var(--s-6) 16px 0;
  padding: 4px;
  border-radius: 999px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
.phone__tab{
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 6px 2px 5px;
  border-radius: 999px;
  font-size: 8px;
  line-height: 1.2;
  color: var(--text-secondary);
}
.phone__tab img{
  width: 17px;
  height: 17px;
  opacity: 0.85;
}
.phone__tab.is-active{
  background: rgba(255,255,255,0.1);
  color: var(--text);
  font-weight: 600;
}
.phone__tab.is-active img{ opacity: 1; }

.feature-preview__caption{
  margin: 0;
  font-size: var(--fs-300);
  color: var(--text-tertiary);
}

/* 13) CTA */
.cta{ padding-block: var(--s-7) var(--s-9); }
.cta__panel{
  position: relative;
  text-align: center;
  padding: var(--s-6) var(--s-4) 0;
}
.cta__panel > *:not(.glow){ position: relative; z-index: 1; }
.cta__icon{
  width: 96px; height: 96px;
  border-radius: 26px;
  margin-bottom: var(--s-6);
  box-shadow: 0 24px 60px -20px rgba(3,110,249,0.9);
}
#cta-title{
  font-size: clamp(1.75rem, 4.6vw, 3rem);
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--text);
}
.lead{
  font-size: var(--fs-500);
  color: var(--text-secondary);
  max-width: 46ch;
  margin: var(--s-4) auto var(--s-8);
  line-height: 1.6;
}
@media (min-width: 768px){
  .cta{ padding-block: var(--s-8) var(--s-10); }
  .cta__panel{ padding: var(--s-6) var(--s-10) 0; }
}

/* 14) Buttons — the app's white "Start your journey" pill and glass pills */
.button{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  padding: 18px 32px;
  border-radius: 999px;
  font-family: var(--font-heading);
  font-size: var(--fs-500);
  line-height: 1;
  text-decoration: none;
  border: 1px solid transparent;
  transition: transform 250ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 250ms ease, background 250ms ease;
}
.button--primary{
  background: #ffffff;
  color: #000000;
  box-shadow: 0 16px 40px -24px rgba(255,255,255,0.55);
}
.button--primary:hover{
  transform: translateY(-2px);
  box-shadow: 0 20px 46px -20px rgba(255,255,255,0.65);
}
.button--glass{
  background: var(--glass-strong);
  border-color: var(--glass-border-strong);
  color: var(--text);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
.button--glass:hover{
  background: rgba(255,255,255,0.2);
  transform: translateY(-1px);
}
.button--sm{
  padding: 12px 20px;
  font-size: var(--fs-400);
}
.button:active{ transform: translateY(0); }

@media (max-width: 419px){
  .button--sm{ padding: 10px 14px; font-size: var(--fs-300); }
}
@media (prefers-reduced-motion: reduce){
  .button{ transition: none; }
  .button:hover, .button:active{ transform: none; }
}

/* 15) Footer
   Two anchored columns on desktop — identity on the left, the pages people
   actually click on the right — collapsing to one centred stack on phones.
   The liability note is deliberately the quietest thing on the page. */
.site-footer{
  padding-block: var(--s-9) var(--s-10);
  border-top: 1px solid rgba(255,255,255,0.08);
}
.footer-inner{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-7);
  text-align: center;
}
.footer-brand{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-3);
}
.footer-wordmark{
  width: 112px;
  height: auto;
  opacity: 0.85;
}
.footer-contact{
  color: var(--text-secondary);
  font-size: var(--fs-300);
  text-decoration: none;
  transition: color 200ms ease;
}
.footer-contact:hover,
.footer-contact:focus-visible{ color: var(--text); }
.footer-copy{
  margin: 0;
  color: var(--text-tertiary);
  font-size: var(--fs-300);
}
.footer-nav{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--s-3) var(--s-6);
}
.footer-nav a{
  color: var(--text-secondary);
  font-size: var(--fs-300);
  text-decoration: none;
  transition: color 200ms ease;
}
.footer-nav a:hover,
.footer-nav a:focus-visible{ color: var(--text); }
.footer-nav a[aria-current="page"]{ color: var(--text); }
.footer-note{
  margin: var(--s-7) 0 0;
  max-width: 78ch;
  margin-inline: auto;
  color: rgba(255,255,255,0.28);
  font-size: 0.75rem;
  line-height: 1.6;
  text-align: center;
  text-wrap: balance;
}

@media (min-width: 768px){
  .footer-inner{
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--s-8);
    text-align: left;
  }
  .footer-brand{ align-items: flex-start; }
  .footer-nav{
    flex-direction: column;
    align-items: flex-end;
    gap: var(--s-2);
  }
  .footer-note{
    text-align: left;
    margin-inline: 0;
    text-wrap: pretty;
  }
}

/* 17) Legal pages (privacy policy, terms of service)
   Same shell as the landing — black canvas, Dela Gothic One headings — but the
   document itself stays black text on a white sheet for readability. */
.legal-hero{
  padding-block: var(--s-9) var(--s-8);
  text-align: center;
}
.legal-hero__title{
  font-size: clamp(1.75rem, 4.6vw, 3rem);
  line-height: 1.3;
  padding-bottom: 0.12em;
  letter-spacing: -0.01em;
  max-width: 24ch;
  margin-inline: auto;
  text-wrap: balance;
  background: linear-gradient(180deg, #ffffff 0%, rgba(255,255,255,0.62) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.legal-hero__meta{
  margin: var(--s-4) 0 0;
  color: var(--text-secondary);
  font-size: var(--fs-400);
}

.legal{
  padding-top: 0;
  padding-bottom: var(--s-12);
}
.legal-sheet{
  background: #ffffff;
  color: #000000;
  border-radius: var(--radius-lg);
  padding: clamp(24px, 5vw, 56px);
  box-shadow: 0 30px 80px -40px rgba(3,110,249,0.55);
}
.legal-sheet h2{
  font-family: var(--font-heading);
  font-size: clamp(1.125rem, 2.4vw, 1.5rem);
  line-height: 1.35;
  color: #000000;
  margin: var(--s-8) 0 var(--s-3);
}
.legal-sheet h2:first-child{ margin-top: 0; }
.legal-sheet p,
.legal-sheet li{
  color: #1a1a1a;
  font-size: var(--fs-400);
  line-height: 1.7;
}
.legal-sheet p{ margin: 0 0 var(--s-3); }
.legal-sheet p:last-child{ margin-bottom: 0; }
.legal-sheet ul{
  margin: 0 0 var(--s-3);
  padding-left: 1.25em;
}
.legal-sheet li{ margin-bottom: var(--s-2); }
.legal-sheet a{
  color: var(--blue-deep);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.legal-sheet a:hover{ color: var(--blue); }
.legal-sheet strong{ font-weight: 600; }
.legal-sheet address{
  font-style: normal;
  line-height: 1.7;
  margin-bottom: var(--s-3);
}
.legal-sheet address:last-child{ margin-bottom: 0; }