/* 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 pink #FD2E5C is 3.67:1 — enough for large
   display type and for UI marks, NOT enough for body copy. So #FD2E5C is used
   for fills, rules and marks; --brand-ink (the deeper #C7113F) carries
   brand-coloured *text*, and the one full-bleed brand section starts from the
   store gradient's end stop #D61345, where white body copy clears 5.2:1.

   v4 (2026-10-08): the look of the link-preview cards (tool/site_og_card.html,
   tool/share_card.html) carried over to the page — brand glow behind the
   hero, the accent word of the headline in brand pink, check-mark facts, pink
   shadows under the icon and the phones, screenshots on tinted stages and a
   brand-gradient download card. */

/* ------------------------------------------------------------------ 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: #fd2e5c;
  /* Brand as *text*. Deeper than --brand because the 12px uppercase section
     labels sit on --surface-recessed, where --brand lands at 3.1:1. This is
     the brand hue darkened until it clears 5.0:1 there (5.5:1 on --surface). */
  --brand-ink: #c7113f;
  --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: #d61345;
  --privacy-to: #b7173d;

  /* lib/core/theme/app_colors.dart brandSoft: the tinted ground of the
     screenshot stages and the feature numbers. */
  --brand-soft: #ffe3e8;
  --glow: rgb(253 46 92 / 16%);
  --brand-shadow: 0 28px 60px -22px rgb(253 46 92 / 55%);

  --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: #ff4977;
    --brand-ink: #ff7194;
    --on-brand: #14080c;

    --privacy-from: #b7173d;
    --privacy-to: #8a1330;

    --brand-soft: #421925;
    --glow: rgb(253 46 92 / 20%);
    --brand-shadow: 0 28px 60px -22px rgb(255 73 119 / 45%);

    --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);
}

/* The accent word of a headline, as in the slogan of the preview card. Only
   on display sizes: --brand clears the 3:1 large-text bar on --surface. */
h1 em,
h2 em {
  font-style: normal;
  color: var(--brand);
}

/* 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: 68px;
}

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

.wordmark img {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  box-shadow: 0 6px 16px -6px rgb(253 46 92 / 60%);
}

/* Also a fit. At full size the header row measures ~411px of content (wordmark
   209 + language switch 66 + Download pill 104 + two 16px gaps), which with the
   5vw gutters needs a ~457px viewport. Below that the wordmark steps back to
   its compact size, which fits down to the 420px threshold under it. */
@media (max-width: 459px) {
  .wordmark {
    gap: 0.55rem;
    font-size: 1.0625rem;
  }

  .wordmark img {
    width: 28px;
    height: 28px;
    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);
  background:
    radial-gradient(60% 70% at 85% 45%, var(--glow), transparent 70%),
    radial-gradient(40% 50% at 0% 0%, var(--glow), transparent 70%);
}

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

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

/* No account / No ads / ... as check marks, like the facts of the card. */
.facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  list-style: none;
  padding: 0;
  margin-bottom: 0;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text-2);
}

.facts li {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  white-space: nowrap;
}

.facts svg {
  width: 20px;
  height: 20px;
  fill: var(--brand-ink);
  flex: none;
}

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

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

/* ----------------------------------------------------------------- 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);
  background: var(--brand-soft);
  border-radius: 999px;
  padding: 0.3rem 0.75rem;
  display: inline-block;
}

/* Each screenshot stands on a tinted stage with a brand glow, like the Home
   miniature on the card's pink panel. The phone itself stays at 236px: 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;
  width: 100%;
  display: grid;
  place-items: center;
  padding: clamp(1.75rem, 4vw, 2.75rem) 1.25rem;
  border-radius: 32px;
  background:
    radial-gradient(70% 55% at 50% 55%, var(--glow), transparent 75%),
    var(--brand-soft);
}

.feature figure picture {
  max-width: 236px;
}

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

/* ---------------------------------------------------------------- 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);
}

/* The download block as a brand card: the gradient panel of the preview card.
   White copy on --privacy-from/-to clears 5.2:1; the store badges are black
   artwork and keep their own contrast. */
.cta-card {
  width: 100%;
  display: grid;
  justify-items: center;
  gap: 1.5rem;
  padding: clamp(2.5rem, 6vw, 4rem) clamp(1.25rem, 4vw, 3rem);
  border-radius: 32px;
  background: linear-gradient(160deg, var(--privacy-from), var(--privacy-to));
  color: #fff;
}

.cta-card h2 {
  color: #fff;
}

/* Pink on pink would vanish: on the card the accent word stays white. */
.cta-card h2 em {
  color: inherit;
}

.cta-card .closing-icon {
  box-shadow: 0 18px 40px -12px rgb(60 0 15 / 60%), 0 0 0 1px rgb(255 255 255 / 25%);
}

.cta-card .store-note {
  color: rgb(255 255 255 / 88%);
}

/* ----------------------------------------------------------------- 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;
  }
}