/* Streamscription — streamscription.app
   One stylesheet, no build step. Tokens mirror lib/core/theme/app_colors.dart
   so the site cannot drift away from the app.

   Contrast note: white on the brand red #E94560 is 3.83:1 — enough for large
   display type and for UI marks, NOT enough for body copy. So #E94560 is used
   for fills, rules and marks; --brand-ink (the deeper #C7334C, already the
   store gradient's end stop) carries brand-coloured *text* and the one
   full-bleed brand section, where white body copy clears 5.2:1. */

/* ------------------------------------------------------------------ fonts */

@font-face {
  font-family: "Schibsted Grotesk";
  src: url("../fonts/schibsted-grotesk-var.woff2") format("woff2");
  font-weight: 700 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-var.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}

/* ----------------------------------------------------------------- tokens */

:root {
  --brand: #e94560;
  /* Brand as *text*. Deeper than --brand because the 12px uppercase section
     labels sit on --surface-recessed, where #c7334c lands at 4.47:1 — a hair
     under AA. This clears 5.0:1 there and 5.6:1 on --surface. */
  --brand-ink: #b92e45;
  --on-brand: #ffffff;

  /* The one full-bleed brand section. These are deliberately NOT --brand-ink:
     that token has to get *lighter* in dark mode to stay readable as text,
     which would make this a pale ground under white copy (2.5:1). A background
     has the opposite requirement, so it gets its own pair. White clears 5.2:1
     against every stop below. */
  --privacy-from: #c7334c;
  --privacy-to: #a82b40;

  --surface: #faf7f5;
  --surface-container: #ffffff;
  --surface-recessed: #f1ece8;

  --text: #1a1a1d;
  --text-2: #595962;

  --outline: #e5ded8;
  --outline-subtle: #f0ebe6;

  --shadow: 0 1px 2px rgb(26 26 29 / 5%), 0 8px 24px -12px rgb(26 26 29 / 12%);

  --wrap: 1100px;
  --gutter: clamp(1.25rem, 5vw, 2.5rem);
  --radius: 20px;
  --radius-lg: 24px;

  --font-display: "Schibsted Grotesk", ui-sans-serif, system-ui, -apple-system,
    "Segoe UI", sans-serif;
  --font-body: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
    sans-serif;

  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --brand: #ff5b7a;
    --brand-ink: #ff7b95;
    --on-brand: #14080c;

    --privacy-from: #a82b40;
    --privacy-to: #7e2032;

    --surface: #0e0e10;
    --surface-container: #1a1a1d;
    --surface-recessed: #26262b;

    --text: #f2f2f4;
    --text-2: #b5b5bd;

    --outline: #2e2e33;
    --outline-subtle: #1f1f23;

    --shadow: 0 1px 2px rgb(0 0 0 / 40%), 0 8px 24px -12px rgb(0 0 0 / 60%);
  }
}

/* ------------------------------------------------------------------- base */

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

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

body {
  margin: 0;
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img,
svg {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: var(--brand-ink);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

a:hover {
  text-decoration-thickness: 2px;
}

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

h1,
h2 {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.032em;
  margin: 0;
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.75rem, 7.4vw, 4.75rem);
  line-height: 0.98;
  letter-spacing: -0.04em;
}

h2 {
  font-size: clamp(2rem, 4.6vw, 3.15rem);
}

/* Each feature is its own <article>, so its title is a real h2. It is sized
   down because it sits below the section-level headings, not beside them. */
.feature-title {
  font-size: clamp(1.35rem, 2.3vw, 1.75rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.12;
}

p {
  margin: 0;
  max-width: 68ch;
  text-wrap: pretty;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--surface-container);
  color: var(--text);
  padding: 0.75rem 1.25rem;
  border-radius: 0 0 12px 0;
  font-weight: 600;
}

.skip-link:focus {
  left: 0;
}

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.lead {
  font-size: clamp(1.125rem, 1.85vw, 1.375rem);
  line-height: 1.5;
  color: var(--text-2);
}

/* ----------------------------------------------------------------- header */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  border-bottom: 1px solid var(--outline-subtle);
}

@supports not (background: color-mix(in srgb, red 50%, blue)) {
  .site-header {
    background: var(--surface);
  }
}

.site-header .wrap {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 62px;
}

.wordmark {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.0625rem;
  letter-spacing: -0.03em;
  color: var(--text);
  text-decoration: none;
  margin-right: auto;
}

.wordmark img {
  width: 26px;
  height: 26px;
  border-radius: 7px;
}

.langs {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.langs a,
.langs span {
  padding: 0.3rem 0.45rem;
  border-radius: 8px;
  text-decoration: none;
  color: var(--text-2);
}

.langs a:hover {
  background: var(--surface-recessed);
  color: var(--text);
}

.langs [aria-current="true"] {
  color: var(--text);
  background: var(--surface-recessed);
}

.header-cta {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
  padding: 0.4rem 0.9rem;
  border: 1px solid var(--outline);
  border-radius: 999px;
  white-space: nowrap;
}

.header-cta:hover {
  border-color: var(--brand);
  color: var(--brand-ink);
}

/* Not a design breakpoint — a fit. Below ~420px the wordmark, the language
   switch and the Download pill together are wider than the viewport, and the
   page would scroll sideways. The icon still links home and the name stays in
   the accessibility tree, so nothing is actually lost. */
@media (max-width: 419px) {
  .wordmark-text {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
}

/* -------------------------------------------------------------- sections */

section {
  padding-block: clamp(3.5rem, 8vw, 6.5rem);
}

.section-label {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand-ink);
  margin: 0 0 1rem;
}

/* ------------------------------------------------------------------- hero */

.hero {
  padding-block: clamp(2.5rem, 6vw, 5rem) clamp(3rem, 7vw, 5.5rem);
}

.hero .wrap {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4rem);
  align-items: center;
}

.hero-copy > * + * {
  margin-top: 1.5rem;
}

.hero-proof {
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--text-2);
  letter-spacing: 0.01em;
}

.hero-shot {
  justify-self: center;
  margin: 0;
  max-width: 300px;
}

.hero-shot img {
  border-radius: var(--radius-lg);
}

/* ----------------------------------------------------------------- badges */

.badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1rem;
}

/* Apple ships the badge at 119.66 x 40; 3x that keeps its minimum clear space
   and stays crisp because it is an SVG. Google's PNG is padded, so it needs a
   little more box to render at the same optical height. */
.badges a {
  display: inline-block;
  line-height: 0;
  border-radius: 9px;
}

.badge-apple {
  width: 168px;
  height: 56px;
}

.badge-google {
  width: 189px;
  height: 73px;
  margin: -8px 0 -8px -10px;
}

.store-note {
  margin-top: 1rem;
  font-size: 0.875rem;
  color: var(--text-2);
}

/* ---------------------------------------------------------------- problem */

.problem {
  background: var(--surface-recessed);
  border-block: 1px solid var(--outline-subtle);
}

.problem .wrap {
  display: grid;
  gap: clamp(1.25rem, 3vw, 3rem);
}

.problem h2 {
  max-width: 16ch;
}

/* --------------------------------------------------------------- features */

.features .wrap > * + * {
  margin-top: clamp(3rem, 5.5vw, 4.5rem);
}

.feature {
  display: grid;
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: center;
}

.feature-copy > * + * {
  margin-top: 1rem;
}

.feature-index {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.8125rem;
  letter-spacing: 0.12em;
  color: var(--brand-ink);
  display: block;
}

/* The store renders are ~1:2.2, so every extra pixel of width costs two of
   height and strands the paragraph beside them in whitespace. */
.feature figure {
  margin: 0;
  justify-self: center;
  max-width: 236px;
}

.feature figure img {
  border-radius: var(--radius-lg);
}

/* ---------------------------------------------------------------- privacy */

.privacy {
  background: linear-gradient(140deg, var(--privacy-from), var(--privacy-to));
  color: #fff;
}

.privacy h2 {
  color: #fff;
  max-width: 18ch;
}

.privacy p {
  color: rgb(255 255 255 / 92%);
  margin-top: 1.25rem;
  font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
}

.privacy .section-label {
  color: rgb(255 255 255 / 80%);
}

/* -------------------------------------------------- creators / price band */

/* A standalone statement of principle, so it is centred rather than filed into
   a column: it answers the section above it and introduces the one below. */
.creators {
  text-align: center;
}

.creators p {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.25rem, 2.6vw, 1.875rem);
  line-height: 1.28;
  letter-spacing: -0.025em;
  max-width: 28ch;
  margin-inline: auto;
}

.price {
  background: var(--surface-recessed);
  border-block: 1px solid var(--outline-subtle);
}

.price .wrap {
  display: grid;
  gap: clamp(1.25rem, 3vw, 3rem);
}

/* ---------------------------------------------------------------- closing */

.closing {
  text-align: center;
}

.closing .wrap {
  display: grid;
  justify-items: center;
  gap: 1.5rem;
}

.closing p {
  margin-inline: auto;
}

.closing .badges {
  justify-content: center;
}

.closing .store-note {
  margin-top: 0;
}

.closing-icon {
  width: 76px;
  height: 76px;
  border-radius: 18px;
  box-shadow: var(--shadow);
}

/* ----------------------------------------------------------------- footer */

.site-footer {
  border-top: 1px solid var(--outline);
  padding-block: clamp(2.5rem, 5vw, 3.5rem);
  font-size: 0.9375rem;
  color: var(--text-2);
}

.site-footer .wrap > * + * {
  margin-top: 1rem;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
  font-weight: 500;
}

.disclaimer {
  max-width: 78ch;
  font-size: 0.8125rem;
  line-height: 1.6;
  padding-top: 1rem;
  border-top: 1px solid var(--outline-subtle);
}

/* ------------------------------------------------------------ ≥ 900px */

@media (min-width: 900px) {
  .feature {
    grid-template-columns: 1fr 1fr;
  }

  .hero .wrap {
    grid-template-columns: 1.15fr 0.85fr;
  }

  .problem .wrap,
  .price .wrap {
    grid-template-columns: 0.9fr 1.1fr;
    align-items: start;
  }

  /* Alternating: even-numbered features put the screenshot on the left. */
  .feature:nth-child(even) figure {
    grid-column: 1;
    grid-row: 1;
  }

  .privacy .wrap {
    max-width: 900px;
  }
}

/* --------------------------------------------------------------- a11y/mo */

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

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}