/* YoSched static front page (landing + privacy), served by YoLogiq's Pages
   assets so it stays up when the app origin is down. Mirrors
   src/app/marketing-landing.tsx and src/app/privacy/page.tsx in the YoSched repo.
   Fits CSP style-src 'self': no inline styles anywhere, no third-party requests.
   Font: Geist (OFL, fonts/OFL.txt), self-hosted from the same woff2 subsets the app
   serves via next/font, with the same @font-face rules and body font stack, so
   these pages render identically to the app's MarketingLanding (Admin #39).
   Line-heights follow Tailwind's paired values (text-sm 1.25rem, text-lg/xl 1.75rem,
   text-2xl 2rem, text-3xl 2.25rem), measured against the live app. Palette colours are
   Tailwind v4's (hex fallback, then the exact lab()/color-mix value the app ships). */

@font-face {
  font-family: "Geist"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("/yosched-static/fonts/geist-cyrillic-ext.f4a75186.woff2") format("woff2");
  unicode-range: U+460-52F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}
@font-face {
  font-family: "Geist"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("/yosched-static/fonts/geist-cyrillic.9a45f5a5.woff2") format("woff2");
  unicode-range: U+301,U+400-45F,U+490-491,U+4B0-4B1,U+2116;
}
@font-face {
  font-family: "Geist"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("/yosched-static/fonts/geist-vietnamese.dea7cff2.woff2") format("woff2");
  unicode-range: U+102-103,U+110-111,U+128-129,U+168-169,U+1A0-1A1,U+1AF-1B0,U+300-301,U+303-304,U+308-309,U+323,U+329,U+1EA0-1EF9,U+20AB;
}
@font-face {
  font-family: "Geist"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("/yosched-static/fonts/geist-latin-ext.49215a3b.woff2") format("woff2");
  unicode-range: U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: "Geist"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("/yosched-static/fonts/geist-latin.f4634c3b.woff2") format("woff2");
  unicode-range: U+0-FF,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/* Metric-matched fallback so the swap does not reflow (as next/font generates it). */
@font-face {
  font-family: "Geist Fallback"; src: local("Arial");
  ascent-override: 95.94%; descent-override: 28.16%; line-gap-override: 0%; size-adjust: 104.76%;
}

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

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

body {
  margin: 0;
  /* the app: font-family: var(--font-sans), Arial, Helvetica, sans-serif */
  font-family: "Geist", "Geist Fallback", Arial, Helvetica, sans-serif;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

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

.wrap { max-width: 72rem; margin: 0 auto; width: 100%; padding: 0 1.5rem; }

/* ---------- Landing ---------- */

.landing {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  color: #f1f5f9;
  color: lab(96.286% -.852436 -2.46847);
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
}

.backdrop {
  position: fixed;
  inset: 0; /* as the app: fixed inset-0 */
  pointer-events: none;
  background-image:
    linear-gradient(rgba(99, 179, 237, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(99, 179, 237, 0.03) 1px, transparent 1px);
  background-size: 60px 60px;
  animation: drift 20s linear infinite;
}

@keyframes drift {
  0% { transform: translate(0, 0); }
  100% { transform: translate(60px, 60px); }
}

@media (prefers-reduced-motion: reduce) {
  .backdrop { animation: none; }
}

.topbar {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
}

.brand { font-size: 1.5rem; line-height: 2rem; font-weight: 800; letter-spacing: -0.025em; }
.brand-yo { color: #fff; }
.accent { color: #63b3ed; }

.btn {
  display: inline-block;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  color: #fff;
  background: #00a5efcc;
  background: color-mix(in oklab, lab(63.3038% -18.433 -51.0407) 80%, transparent);
  border-radius: 0.25rem;
  transition: background-color 0.15s;
  -webkit-backdrop-filter: blur(8px); /* backdrop-blur-sm */
  backdrop-filter: blur(8px);
}
.btn:hover, .btn:focus-visible { background: #00a5ef; background: lab(63.3038% -18.433 -51.0407); }

.main { position: relative; z-index: 1; flex: 1; }

.hero { text-align: center; padding: 4rem 0 3.5rem; }

.hero h1 {
  margin: 0;
  font-size: 3rem;
  line-height: 1;
  font-weight: 800;
  letter-spacing: -0.025em;
  text-shadow: 0 0 40px rgba(99, 179, 237, 0.3);
}

.lede {
  margin: 1.5rem auto 0;
  max-width: 42rem;
  font-size: 1.125rem;
  line-height: 1.75rem;
  font-weight: 300;
  color: #ffffffb3;
  color: color-mix(in oklab, #fff 70%, transparent);
}

.features {
  display: grid;
  gap: 1.25rem;
  padding-bottom: 5rem;
}

.card {
  border: 1px solid #ffffff1a;
  border: 1px solid color-mix(in oklab, #fff 10%, transparent);
  background: #ffffff0d;
  background: color-mix(in oklab, #fff 5%, transparent);
  border-radius: 0.5rem;
  padding: 1.5rem;
  -webkit-backdrop-filter: blur(8px); /* backdrop-blur-sm */
  backdrop-filter: blur(8px);
}

.card h2 { margin: 0; font-size: 1.125rem; line-height: 1.75rem; font-weight: 600; color: #fff; }

.card p {
  margin: 0.5rem 0 0;
  font-size: 0.875rem;
  line-height: 1.625;
  color: #fff9;
  color: color-mix(in oklab, #fff 60%, transparent);
}

.footer {
  position: relative;
  z-index: 1;
  border-top: 1px solid #ffffff1a;
  border-top: 1px solid color-mix(in oklab, #fff 10%, transparent);
}

.footer .wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: #fff6;
  color: color-mix(in oklab, #fff 40%, transparent);
}

.footer nav { display: flex; align-items: center; gap: 1.25rem; }
.footer nav a { transition: color 0.15s; }
.footer nav a:hover, .footer nav a:focus-visible { color: #ffffffb3; color: color-mix(in oklab, #fff 70%, transparent); }

@media (min-width: 640px) {
  .hero h1 { font-size: 3.75rem; }
  .lede { font-size: 1.25rem; }
  .features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer .wrap { flex-direction: row; }
}

@media (min-width: 1024px) {
  .features { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- Privacy ---------- */

.privacy {
  min-height: 100vh;
  min-height: 100dvh;
  background: #0f172b;
  background: lab(7.78673% 1.82345 -15.0537);
  color: #e2e8f0;
  color: lab(91.7353% -.998765 -4.76968);
}

.privacy .wrap { max-width: 42rem; padding-top: 4rem; padding-bottom: 4rem; }

.back { font-size: 0.875rem; line-height: 1.25rem; color: #00bcfe; color: lab(70.687% -23.6078 -45.9483); }
.back:hover, .back:focus-visible { color: #77d4ff; color: lab(80.3307% -20.2945 -31.385); }

.privacy h1 { margin: 1.5rem 0 0; font-size: 1.875rem; line-height: 2.25rem; font-weight: 700; color: #fff; }

.privacy .intro { margin: 0.5rem 0 0; font-size: 0.875rem; line-height: 1.25rem; color: #90a1b9; color: lab(65.5349% -2.25151 -14.5072); }

.policy { margin-top: 2rem; font-size: 0.875rem; line-height: 1.625; color: #cad5e2; color: lab(84.7652% -1.94535 -7.93337); }
.policy section + section { margin-top: 1.5rem; }
.policy h2 { margin: 0; font-size: 1.125rem; line-height: 1.75rem; font-weight: 600; color: #fff; }
.policy p { margin: 0.25rem 0 0; }