/* Wavetile site. Tokens mirror the app's Theme.dark (DesignSystem/Theme.swift). */

@font-face {
  font-family: "Familjen Grotesk";
  src: url("/assets/fonts/FamiljenGrotesk.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}
@font-face {
  font-family: "Stack Sans Notch";
  src: url("/assets/fonts/StackSansNotch.woff2") format("woff2");
  font-weight: 200 700;
  font-display: swap;
}

@font-face {
  font-family: "Stack Sans Headline";
  src: url("/assets/fonts/StackSansHeadline.woff2") format("woff2");
  font-weight: 200 700;
  font-display: swap;
}

:root {
  /* Page is the app's surface; panels are its background, inset like cards. */
  --page: #262626;
  --bg: #1A1A1A;
  --surface: #2E2E2E;
  --surface-2: #2E2E2E;
  --ink: #ECE4D2;
  --ink-2: rgb(236 228 210 / 0.6);
  --ink-3: rgb(236 228 210 / 0.35);
  --line: rgb(255 255 255 / 0.12);

  --text: "Familjen Grotesk", ui-sans-serif, system-ui, sans-serif;
  --display: "Stack Sans Notch", "Familjen Grotesk", ui-sans-serif, system-ui, sans-serif;
  --frame: clamp(12px, 2.2vw, 28px);
  --inset: clamp(20px, 4vw, 40px);
  /* Critically damped, like Motion.smooth: no overshoot. */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font: 400 17px/1.55 var(--text);
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, p { margin: 0; }
::selection { background: var(--ink); color: var(--bg); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 6px; }

/* Values from the Figma mockup. */
.wordmark { font-family: var(--display); font-weight: 700; font-size: 32px; line-height: 1; color: #EFE4D0; }
.link { text-underline-offset: 4px; text-decoration-color: var(--ink-3); font-weight: 600; }
.link:hover { text-decoration-color: var(--ink); }

/* Wordmark centered on the top edge of the first panel. */
.top { position: relative; z-index: 1; display: flex; justify-content: center; padding-top: clamp(28px, 3.5vw, 40px); margin-bottom: -16px; }
.brand { text-decoration: none; }

.panel { margin: 0 var(--frame); background: var(--bg); }

/* Hero */
.hero {
  display: grid; place-items: center; align-content: center; gap: 36px; text-align: center;
  min-height: clamp(360px, 40vw, 500px); padding: 64px var(--inset);
}
.headline {
  font-family: "Stack Sans Headline", var(--display); font-weight: 400;
  font-size: clamp(28px, 2.9vw, 37px); line-height: 1.2; color: #FFFFFF;
  text-wrap: balance; max-width: 22ch;
}
@media (min-width: 900px) { .headline { max-width: none; } }
.button {
  display: inline-flex; align-items: center; min-height: 52px; padding: 0 30px; border-radius: 999px;
  background: #171717; font: 400 18px/1 var(--text); color: #FFFFFF;
}

/* Screens: a slow marquee that loops. Spacing is margin on each image (not gap), so one
   set is exactly half the track and translating -50% lands back on the start. */
.screens { overflow: hidden; padding: clamp(40px, 4.4vw, 56px) 0; }
.marquee { display: flex; width: max-content; animation: marquee 84s linear infinite; }
.marquee__copy { display: contents; }
/* A simple phone: dark bezel, rounded corners, a Dynamic Island over the status bar. */
.device {
  --h: clamp(420px, 42vw, 560px);
  position: relative; flex: none;
  height: var(--h); aspect-ratio: 924 / 2000;
  box-sizing: content-box; padding: calc(var(--h) * 0.014);
  margin-right: clamp(24px, 4.2vw, 56px);
  border-radius: calc(var(--h) * 0.075);
  background: #0B0B0B;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.10), 0 30px 60px -30px rgb(0 0 0 / 0.8);
}
.device img { width: 100%; height: 100%; object-fit: cover; border-radius: calc(var(--h) * 0.062); }
.device::after {
  content: ""; position: absolute; left: 50%; translate: -50% 0;
  top: calc(var(--h) * 0.028); width: 30%; height: calc(var(--h) * 0.022);
  border-radius: 999px; background: #000;
}
@keyframes marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .marquee { animation: none; }
  .screens { overflow-x: auto; scrollbar-width: none; padding-inline: var(--frame); }
  .marquee__copy { display: none; }
}

/* Features: four short points, an icon above each. */
.features {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(28px, 4vw, 56px);
  padding: clamp(64px, 7vw, 100px) clamp(28px, 3.2vw, 40px);
}
.feature { display: grid; align-content: start; gap: 18px; }
.feature p { font-size: 16px; line-height: 1.4; color: #EDE8DC; max-width: 265px; text-wrap: pretty; }
.icon {
  width: 28px; height: 28px; background: currentColor;
  -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat;
}
.icon[data-icon="microphone"] { --icon: url("/assets/icons/microphone.svg"); }
.icon[data-icon="gauge"] { --icon: url("/assets/icons/gauge.svg"); }
.icon[data-icon="cloud-slash"] { --icon: url("/assets/icons/cloud-slash.svg"); }
.icon[data-icon="lock"] { --icon: url("/assets/icons/lock.svg"); }
@media (max-width: 900px) { .features { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .features { grid-template-columns: 1fr; } }

/* Footer */
.footer {
  display: grid; gap: 14px; justify-items: center; text-align: center;
  padding: clamp(48px, 6vw, 72px) var(--inset) 56px;
  color: var(--ink-3); font-size: 13px;
}
.footer__mark { width: 28px; height: 28px; color: #6B6862; /* ink-3 over the page, as a solid so overlapping strokes don't stack */ margin-bottom: 10px; }
.footer__mark svg { display: block; width: 100%; height: 100%; }
.footer nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 28px; font-size: 15px; }
.footer__guides { margin-bottom: 4px; }
.footer nav a { color: var(--ink-2); text-decoration: none; transition: color 200ms; }
.footer nav a:hover { color: var(--ink); }
.footer p { max-width: 46em; }

/* Privacy and support pages */
.page { margin: 0 var(--frame); background: var(--bg); padding: clamp(56px, 7vw, 88px) var(--inset); }
.page > * { max-width: 680px; margin-inline: auto; }
.page h1 { font-family: var(--display); font-weight: 600; font-size: clamp(34px, 4.4vw, 52px); letter-spacing: -0.03em; line-height: 1.05; margin-bottom: 12px; }
.page .meta { color: var(--ink-3); font-size: 15px; margin-bottom: 32px; }
.page h2 { font-family: var(--display); font-weight: 600; font-size: 24px; letter-spacing: -0.02em; margin-top: 40px; margin-bottom: 10px; }
.page p, .page li { color: var(--ink-2); }
.page p + p { margin-top: 12px; }
.page ul { padding-left: 20px; }
.page ul { margin-top: 12px; margin-bottom: 0; }
.page li + li { margin-top: 8px; }
.page strong { color: var(--ink); font-weight: 600; }
.page .cta-line { margin-top: 48px; }
.page .button { text-decoration: none; }

/* Fade up on scroll; only hidden once JS is running, so nothing goes missing without it. */
.js .reveal { opacity: 0; translate: 0 12px; transition: opacity 800ms var(--ease), translate 800ms var(--ease); }
.js .reveal.is-in { opacity: 1; translate: none; }
@media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1; translate: none; transition: none; } }