/* ==========================================================================
   JORN — site styles
   Dark base, green reserved for the running state, Anton for display.
   Single file, no build step, no external requests.

   Order:
     01  Fonts (self-hosted Anton + metric-matched fallback)
     02  Tokens
     03  Reset and base elements
     04  Focus and skip link
     05  Layout primitives
     06  Header and language switcher
     07  Hero, session readout, buttons, phone frame
     08  Screens strip
     09  Features: bento and hairline list
     10  Audience pills
     11  Pro pricing
     12  Privacy banner
     13  Sticky mobile CTA bar
     14  Footer
     15  Legal and support pages (shared, ported in T4/T5)
     16  Motion preferences
   ========================================================================== */

/* 01 ----------------------------------------------------------------- Fonts

   Anton is SIL OFL 1.1 (assets/fonts/OFL.txt) and self-hosted: the page makes
   no request to a third-party font host, which is a GDPR liability for an
   EU-facing site (LG Muenchen I, 3 O 17493/20). Files are the latin and
   latin-ext ranges, so
   a browser only downloads the range it actually renders. The latin range
   covers every character the three locales need, including the middle dot in
   "l·l" (U+00B7) and Latin-1 accented vowels in both cases. */

@font-face {
  font-family: "Anton";
  src: url("assets/fonts/anton-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Anton";
  src: url("assets/fonts/anton-latin-ext.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, 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;
}

/* Anticipated fallback with Anton's own metrics, so a swap cannot rewrap or
   resize the display lines. Measured from the shipped files:
     Anton      hhea ascent 2409/2048 = 117.63%, descent 674/2048 = 32.91%,
                line gap 0; average uppercase advance 47.36% of em.
     Arial      (via Liberation Sans, metric compatible) average uppercase
                advance 67.74% of em -> size-adjust 47.36 / 67.74 = 69.9%.
   Every display rule below also sets an explicit line-height, so the line box
   is fixed by CSS and cannot move when the webfont arrives. */
@font-face {
  font-family: "Anton Fallback";
  src: local("Arial"), local("Liberation Sans"), local("Helvetica");
  size-adjust: 69.9%;
  ascent-override: 117.63%;
  descent-override: 32.91%;
  line-gap-override: 0%;
}

/* 02 ---------------------------------------------------------------- Tokens */

:root {
  color-scheme: dark;

  /* Colour. Hex first; upgraded to oklch() in the @supports block below.
     Elevation comes from lightening these surfaces, never from a blurry
     shadow on a dark background. */
  --ink: #050d0a;
  --surface-1: #0a1512;
  --surface-2: #0f1e19;
  --surface-3: #14281f;
  --text: #e9f4ee;
  --text-strong: #ffffff;
  --muted: #93b0a1;

  /* Green means "time is running". Never a background behind text. */
  --live: #2bff9c;
  --on-live: #050d0a;
  --paused: #ffb454;

  /* Hairlines instead of shadows. */
  --line: rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.16);

  /* Type: one display face, one body face, one mono for figures. */
  --font-display: "Anton", "Anton Fallback", Impact, "Haettenschweiler",
    "Arial Narrow Bold", sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
    Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
    "Liberation Mono", monospace;

  --text-xs: clamp(0.78rem, 0.76rem + 0.1vw, 0.85rem);
  --text-s: clamp(0.9rem, 0.87rem + 0.15vw, 0.98rem);
  --text-m: clamp(1rem, 0.96rem + 0.2vw, 1.1rem);
  --text-l: clamp(1.15rem, 1.08rem + 0.35vw, 1.35rem);
  --text-xl: clamp(1.4rem, 1.26rem + 0.7vw, 1.85rem);
  --display-l: clamp(2.1rem, 1.7rem + 2vw, 3.2rem);
  --display-xl: clamp(2.9rem, 1.9rem + 4.9vw, 5.4rem);

  /* Space scale, fluid between a small phone and a wide desktop. */
  --space-2xs: clamp(0.25rem, 0.23rem + 0.1vw, 0.375rem);
  --space-xs: clamp(0.5rem, 0.46rem + 0.2vw, 0.625rem);
  --space-s: clamp(0.75rem, 0.7rem + 0.25vw, 1rem);
  --space-m: clamp(1rem, 0.9rem + 0.5vw, 1.5rem);
  --space-l: clamp(1.5rem, 1.3rem + 1vw, 2.5rem);
  --space-xl: clamp(2.5rem, 2rem + 2.5vw, 4.5rem);
  --space-2xl: clamp(3.5rem, 2.6rem + 4.5vw, 7rem);

  --radius-s: 6px;
  --radius-m: 12px;
  --radius-l: 20px;
  --radius-pill: 999px;

  --dur-fast: 120ms;
  --dur: 160ms;
  --ease: cubic-bezier(0.2, 0.7, 0.3, 1);

  --shell: 1120px;
  --header-h: 3.75rem;
  --cta-h: 4.25rem;
}

/* oklch() gives the palette perceptual lightness steps; color-mix() gives the
   hairlines a tint of the surface they sit on. Both are Baseline, but the hex
   values above keep the page intact where they are missing. */
@supports (color: oklch(50% 0.1 150)) and (color: color-mix(in oklch, white 8%, transparent)) {
  :root {
    --ink: oklch(14.87% 0.0153 171.15);
    --surface-1: oklch(18.39% 0.0172 175.28);
    --surface-2: oklch(21.95% 0.023 170.99);
    --surface-3: oklch(25.65% 0.0314 163.76);
    --text: oklch(95.72% 0.0141 162.47);
    --text-strong: oklch(100% 0 0);
    --muted: oklch(73.1% 0.0385 162.82);
    --live: oklch(88.24% 0.2066 155.86);
    --on-live: oklch(14.87% 0.0153 171.15);
    --paused: oklch(82.38% 0.1408 70.17);
    --line: color-mix(in oklch, white 8%, transparent);
    --line-strong: color-mix(in oklch, white 16%, transparent);
  }
}

/* 03 ----------------------------------------------------- Reset and base --- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* The sticky header and the sticky mobile CTA bar must never cover the
     element that was just scrolled to or focused. */
  scroll-padding-top: calc(var(--header-h) + var(--space-m));
}

body {
  margin: 0;
  background-color: var(--ink);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--text-m);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Grain: one fixed, non-interactive overlay. It sits above the page so flat
   dark surfaces read as material rather than as a void. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;
  opacity: 0.03;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23g)'/%3E%3C/svg%3E");
}

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

/* Explicit width/height attributes give every image its aspect ratio before
   the bytes arrive, so nothing below it moves. */
img {
  height: auto;
}

p {
  margin: 0 0 1em;
}

/* Prose lists: legal and support pages are long-form reading. */
main ul {
  margin: 0 0 1em;
  padding-left: 1.1em;
}

li + li {
  margin-top: 0;
}

code {
  padding: 0.1em 0.35em;
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  background: var(--surface-1);
  font-family: var(--font-mono);
  font-size: 0.92em;
}

a {
  color: var(--text-strong);
  text-decoration: underline;
  text-decoration-color: color-mix(in oklch, var(--text-strong) 30%, transparent);
  text-underline-offset: 0.22em;
  transition: text-decoration-color var(--dur-fast) var(--ease);
}

a:hover {
  text-decoration-color: currentColor;
}

.muted {
  color: var(--muted);
}

/* 04 ------------------------------------------------- Focus and skip link --- */

:focus-visible {
  outline: 2px solid var(--live);
  outline-offset: 3px;
}

/* On the green buttons the ring has to sit outside the fill to stay legible. */
.btn--live:focus-visible {
  outline-color: var(--live);
  outline-offset: 3px;
}

.skip-link {
  position: absolute;
  top: var(--space-xs);
  left: var(--space-xs);
  z-index: 200;
  padding: var(--space-2xs) var(--space-s);
  border-radius: var(--radius-s);
  background: var(--live);
  color: var(--on-live);
  font-size: var(--text-s);
  font-weight: 700;
  text-decoration: none;
  transform: translateY(-300%);
  transition: transform var(--dur) var(--ease);
}

.skip-link:focus-visible {
  transform: translateY(0);
}

/* 05 --------------------------------------------------- Layout primitives --- */

.container {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--space-m);
}

.container--narrow {
  max-width: 46rem;
}

.section {
  padding-block: var(--space-2xl);
}

.section--tight {
  padding-block: var(--space-xl);
}

.section__head {
  max-width: 46ch;
  margin-bottom: var(--space-xl);
}

.section__head p {
  margin: var(--space-s) 0 0;
  color: var(--muted);
  font-size: var(--text-l);
}

/* Display type. Anton is already heavy, so 400 is the only weight in use;
   line-height is explicit everywhere so a font swap cannot move a line box. */
.display {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--display-l);
  line-height: 0.94;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  color: var(--text-strong);
  text-wrap: balance;
}

/* Emphasis inside a display heading is a value shift, not a second colour:
   green stays reserved for the running state. */
.display .accent {
  color: var(--muted);
}

/* 06 -------------------------------------- Header and language switcher --- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--ink);
  border-bottom: 1px solid var(--line);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-m);
  max-width: var(--shell);
  min-height: var(--header-h);
  margin-inline: auto;
  padding-inline: var(--space-m);
}

.nav__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  color: var(--text-strong);
  font-size: var(--text-s);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-decoration: none;
}

.nav__links {
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 2vw, 1.5rem);
  font-size: var(--text-s);
}

.nav__links > a {
  color: var(--muted);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease);
}

.nav__links > a:hover {
  color: var(--text-strong);
}

.lang {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
}

.lang a {
  padding: 0.2rem 0.55rem;
  border-radius: var(--radius-pill);
  color: var(--muted);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease),
    background-color var(--dur-fast) var(--ease);
}

.lang a:hover {
  color: var(--text-strong);
  background: var(--surface-2);
}

.lang a.is-active {
  background: var(--surface-3);
  color: var(--text-strong);
}

/* Shared brand mark (also used by the legal pages, which keep this class). */
.app-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--line-strong);
  border-radius: 0.5rem;
  background: var(--surface-2);
  color: var(--text-strong);
  font-family: var(--font-display);
  font-size: 1rem;
  line-height: 1;
  flex-shrink: 0;
}

.app-icon--sm {
  width: 1.75rem;
  height: 1.75rem;
  font-size: 0.9rem;
}

.app-icon--lg {
  width: 5.5rem;
  height: 5.5rem;
  border-radius: 1.5rem;
  font-size: 2.4rem;
}

@media (max-width: 640px) {
  .nav__links .nav__link-extra {
    display: none;
  }
}

/* 07 --------------------------- Hero, session readout, buttons, phone frame --- */

.hero {
  padding-block: var(--space-xl);
}

.hero__inner {
  display: grid;
  gap: var(--space-l);
  align-items: center;
}

.hero__title {
  font-size: var(--display-xl);
  max-width: 12ch;
}

.hero__sub {
  max-width: 44ch;
  margin: var(--space-m) 0 0;
  color: var(--muted);
  font-size: var(--text-l);
  line-height: 1.5;
}

/* The readout is the product: a running session, in real figures. Every
   number is tabular so the digits do not jitter as the clock ticks, and the
   green is the one place colour means something: time is running. */
.readout {
  display: grid;
  gap: var(--space-s);
  max-width: 26rem;
  margin-top: var(--space-l);
  padding: var(--space-m);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  background: var(--surface-1);
}

.readout__state {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  margin: 0;
  color: var(--text-strong);
  font-size: var(--text-s);
  font-weight: 600;
}

.readout__dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--live);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--live) 20%, transparent);
}

/* Label and value on one baseline, like an instrument: not a stat card. */
.readout__elapsed {
  display: flex;
  align-items: baseline;
  gap: var(--space-xs);
  margin: 0;
}

.readout__label {
  color: var(--muted);
  font-size: var(--text-xs);
}

.readout__time {
  color: var(--live);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: clamp(1.9rem, 1.5rem + 1.5vw, 2.4rem);
  letter-spacing: -0.02em;
  line-height: 1.05;
}

.readout__details {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-s);
  margin: 0;
  padding-top: var(--space-s);
  border-top: 1px solid var(--line);
}

.readout__detail {
  display: grid;
  gap: 2px;
}

.readout__detail dt {
  color: var(--muted);
  font-size: var(--text-xs);
}

.readout__detail dd {
  margin: 0;
  color: var(--text-strong);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-m);
}

.readout__aside {
  color: var(--muted);
  font-family: var(--font-body);
  font-size: var(--text-s);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: var(--space-s);
  margin-top: var(--space-l);
}

.hero__note {
  margin: var(--space-s) 0 0;
  color: var(--muted);
  font-size: var(--text-s);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.75rem 1.1rem;
  border: 1px solid transparent;
  border-radius: var(--radius-s);
  font-family: inherit;
  font-size: var(--text-s);
  font-weight: 650;
  text-decoration: none;
  transition: transform var(--dur-fast) var(--ease),
    background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

/* The only filled green element on the page: the one live call to action. */
.btn--live {
  background: var(--live);
  border-color: var(--live);
  color: var(--on-live);
}

.btn--live:hover {
  background: color-mix(in oklch, var(--live) 86%, white);
  transform: translateY(-1px);
}

.btn--live:active {
  transform: none;
}

/* App Store is not shipped yet: a real, visible state instead of a dead link.
   Not a link, not focusable, and visibly quieter than the live button. */
.btn--soon {
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  border-style: dashed;
  border-color: var(--line-strong);
  background: transparent;
  color: var(--text);
  cursor: default;
  font-weight: 600;
  line-height: 1.2;
}

.btn__soon-label {
  color: var(--muted);
  font-size: var(--text-xs);
  font-weight: 500;
}

.hero__shot {
  justify-self: center;
  width: min(18rem, 100%);
}

/* A phone frame in CSS: no exported mockup, no second image to download. */
.phone {
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: 2.2rem;
  background: var(--surface-2);
}

.phone img {
  width: 100%;
  /* The marketing screenshot is a poster: headline on top, device below. Crop
     to the device and let the frame be the only frame. The ratio is fixed here,
     so the space is reserved before the image decodes. */
  aspect-ratio: 640 / 1055;
  object-fit: cover;
  object-position: 50% 100%;
  border-radius: 1.85rem;
}

/* Tablet: the frame can take more width once the copy has room next to it. */
@media (min-width: 40rem) {
  .hero__shot {
    width: min(22rem, 100%);
  }
}

@media (min-width: 62rem) {
  .hero__inner {
    grid-template-columns: minmax(0, 1.15fr) minmax(18rem, 0.85fr);
    gap: var(--space-2xl);
  }

  .hero__shot {
    justify-self: end;
    width: min(19rem, 100%);
  }
}

/* 08 ---------------------------------------------------- Screens strip --- */

/* Full-bleed scroller: the first screenshot lines up with the text column and
   the rest bleeds to the viewport edge, which is what tells you it scrolls. */
.strip {
  --strip-pad: max(
    var(--space-m),
    (100% - var(--shell)) / 2 + var(--space-m)
  );
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: clamp(10.5rem, 42vw, 15rem);
  gap: var(--space-m);
  margin: 0;
  padding: 0 var(--space-m) var(--space-s) var(--strip-pad);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--strip-pad);
  overscroll-behavior-x: contain;
  list-style: none;
  scrollbar-width: thin;
}

.strip__shot {
  scroll-snap-align: center;
}

.strip__shot figure {
  display: grid;
  gap: var(--space-xs);
  margin: 0;
}

.strip__shot img {
  width: 100%;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-l);
  background: var(--surface-1);
}

.strip figcaption {
  color: var(--muted);
  font-size: var(--text-xs);
  text-align: center;
}

/* Scroll-driven reveal on the strip only — the one motion tied to scrolling.
   Browsers without view() timelines keep the finished, static strip. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .strip__shot {
      animation: strip-reveal linear both;
      animation-timeline: view(inline);
      animation-range: entry 10% cover 32%;
    }
  }
}

@keyframes strip-reveal {
  from {
    opacity: 0.55;
    transform: scale(0.97);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* 09 ------------------------------------- Features: bento and hairline list --- */

.bento {
  display: grid;
  gap: var(--space-s);
  grid-template-columns: minmax(0, 1fr);
  /* Cards query their own width, so a wide card can lay itself out in two
     columns without knowing the viewport. */
  container-type: inline-size;
  container-name: bento;
}

.bento__card {
  display: grid;
  align-content: start;
  gap: var(--space-2xs);
  padding: var(--space-m);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  background: var(--surface-1);
}

.bento__card h3 {
  margin: 0;
  color: var(--text-strong);
  font-size: var(--text-l);
  font-weight: 650;
  letter-spacing: -0.01em;
  line-height: 1.25;
  text-wrap: balance;
}

.bento__card p {
  max-width: 42ch;
  margin: 0;
  color: var(--muted);
  font-size: var(--text-s);
}

/* Sample totals in the tall card. Hairline rows, tabular figures. */
.tally {
  display: grid;
  margin: var(--space-m) 0 0;
  border-top: 1px solid var(--line);
}

.tally__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-s);
  padding-block: var(--space-xs);
  border-bottom: 1px solid var(--line);
}

.tally__row dt {
  color: var(--muted);
  font-size: var(--text-xs);
}

.tally__row dd {
  margin: 0;
  color: var(--text);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-s);
}

.bento__text {
  display: grid;
  gap: var(--space-2xs);
  align-content: start;
}

.bento__shot img {
  width: 100%;
  max-width: 12rem;
  /* Same crop as the hero, tighter: at thumbnail size the poster caption and
     its headline are noise, the device is the content. */
  aspect-ratio: 640 / 1000;
  object-fit: cover;
  object-position: 50% 100%;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-s);
  background: var(--surface-2);
}

.bento__card--tall .tally {
  align-self: center;
}

@container bento (min-width: 30rem) {
  .bento__card--wide {
    padding: var(--space-l);
  }

  .bento__card--wide .bento__media {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 11rem;
    gap: var(--space-l);
    align-items: center;
  }

  .bento__shot img {
    max-width: none;
  }
}

@media (min-width: 46rem) {
  .bento {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Desktop bento: three columns, four rows. Cards in the top band share their
   two rows through subgrid, so the headings sit on one line and the body copy
   on another. One card spans two columns and carries a screenshot; one runs
   the full height of the right column. */
@media (min-width: 60rem) {
  .bento {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: auto auto auto auto;
  }

  .bento__card:nth-child(1) {
    grid-area: 1 / 1 / span 2 / span 1;
  }

  .bento__card:nth-child(2) {
    grid-area: 1 / 2 / span 2 / span 1;
  }

  .bento__card--tall {
    grid-area: 1 / 3 / span 4 / span 1;
    grid-template-rows: auto auto 1fr;
  }

  .bento__card--wide {
    grid-area: 3 / 1 / span 2 / span 2;
    grid-template-rows: 1fr;
  }

  @supports (grid-template-rows: subgrid) {
    .bento__card:nth-child(1),
    .bento__card:nth-child(2) {
      grid-template-rows: subgrid;
      row-gap: var(--space-2xs);
    }
  }
}

/* Without subgrid the cards still align as a grid; only the shared baseline
   across a row is lost, which no reader notices. */

.feature-list {
  display: grid;
  margin: var(--space-xl) 0 0;
  padding: 0;
  border-top: 1px solid var(--line);
  list-style: none;
}

.feature-list li {
  display: grid;
  gap: var(--space-2xs);
  padding-block: var(--space-m);
  border-bottom: 1px solid var(--line);
}

.feature-list h3 {
  margin: 0;
  color: var(--text-strong);
  font-size: var(--text-m);
  font-weight: 600;
  line-height: 1.35;
}

.feature-list p {
  max-width: 56ch;
  margin: 0;
  color: var(--muted);
  font-size: var(--text-s);
}

@media (min-width: 46rem) {
  .feature-list li {
    grid-template-columns: minmax(13rem, 0.8fr) minmax(0, 1.2fr);
    gap: var(--space-m);
    align-items: baseline;
  }
}

/* 10 ---------------------------------------------------- Audience pills --- */

.pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin: 0;
  padding: 0;
  list-style: none;
}

.pill {
  padding: 0.4rem 0.85rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--surface-1);
  color: var(--text);
  font-size: var(--text-s);
}

/* 11 ------------------------------------------------------- Pro pricing --- */

.pro {
  display: grid;
  gap: var(--space-l);
  padding: var(--space-l);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-l);
  background: var(--surface-1);
}

.pro__list {
  display: grid;
  gap: var(--space-xs);
  margin: var(--space-m) 0 0;
  padding: 0;
  list-style: none;
}

.pro__list li {
  position: relative;
  padding-left: 1.25rem;
  color: var(--text);
}

/* A hairline rule as the bullet: structure, not a checkmark sticker. */
.pro__list li::before {
  content: "";
  position: absolute;
  top: 0.7em;
  left: 0;
  width: 0.6rem;
  height: 1px;
  background: var(--muted);
}

.pro__fineprint {
  max-width: 44ch;
  margin: var(--space-m) 0 0;
  font-size: var(--text-s);
}

.price {
  align-self: start;
  padding: var(--space-m);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-m);
  /* Lighter than the panel it sits on: elevation by lightening. */
  background: var(--surface-2);
}

.price__list {
  display: grid;
  margin: 0;
}

.price__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-s);
  padding-block: var(--space-s);
  border-bottom: 1px solid var(--line);
}

.price__row:first-child {
  padding-top: 0;
}

.price__row dt {
  color: var(--muted);
  font-size: var(--text-s);
}

.price__row dd {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  margin: 0;
}

.price__amount {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-xl);
  letter-spacing: -0.02em;
  color: var(--text-strong);
}

.price__unit {
  color: var(--muted);
  font-size: var(--text-xs);
}

.price__trial {
  margin: var(--space-s) 0 0;
  color: var(--text);
  font-size: var(--text-s);
}

@media (min-width: 52rem) {
  .pro {
    grid-template-columns: minmax(0, 1.15fr) minmax(17rem, 0.85fr);
    gap: var(--space-xl);
  }
}

/* 12 ---------------------------------------------------- Privacy banner --- */

.privacy-banner {
  padding: var(--space-l);
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  background: var(--surface-1);
}

.privacy-banner p {
  max-width: 58ch;
  margin: var(--space-m) 0 0;
}

.privacy-banner__link {
  font-size: var(--text-m);
}

/* 13 ------------------------------------------------- Sticky mobile CTA --- */

.cta-bar {
  position: sticky;
  bottom: 0;
  z-index: 95;
  display: none;
  padding: var(--space-xs) var(--space-m);
  padding-bottom: max(var(--space-xs), env(safe-area-inset-bottom));
  border-top: 1px solid var(--line-strong);
  background: var(--surface-1);
}

.cta-bar__btn {
  width: 100%;
}

@media (max-width: 640px) {
  .cta-bar {
    display: block;
  }

  /* Room for the bar when an anchor or a focused element scrolls into view. */
  html {
    scroll-padding-bottom: var(--cta-h);
  }
}

/* 14 ------------------------------------------------------------- Footer --- */

.site-footer {
  padding-block: var(--space-l);
  border-top: 1px solid var(--line);
}

.footer__grid {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-m);
}

.footer__brand {
  display: flex;
  align-items: center;
  gap: var(--space-s);
  color: var(--muted);
  font-size: var(--text-s);
}

.footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s) var(--space-m);
  font-size: var(--text-s);
}

.footer__links a {
  color: var(--muted);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease);
}

.footer__links a:hover {
  color: var(--text-strong);
}

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-xs);
  margin-top: var(--space-m);
  padding-top: var(--space-s);
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: var(--text-xs);
}

.footer__bottom a {
  color: var(--muted);
}

/* 15 ------------------------------------- Legal and support pages (shared) ---
   Text-only pages that already share this stylesheet. They keep their existing
   markup until the T4/T5 port, so these selectors are live, not leftovers. */

.page {
  padding-block: var(--space-xl) var(--space-2xl);
}

.page h1 {
  margin-bottom: var(--space-xs);
}

.page__date {
  margin-bottom: var(--space-l);
  color: var(--muted);
  font-size: var(--text-s);
}

.page h2 {
  margin-top: var(--space-l);
  font-size: var(--text-xl);
  line-height: 1.25;
}

.page h3 {
  margin-top: var(--space-m);
  font-size: var(--text-l);
}

.page .disclaimer {
  margin-top: var(--space-l);
  padding: var(--space-s) var(--space-m);
  border-left: 2px solid var(--line-strong);
  background: var(--surface-1);
  color: var(--text);
  font-size: var(--text-s);
}

.page .back {
  margin-top: var(--space-l);
}

.faq details {
  padding-block: var(--space-s);
  border-bottom: 1px solid var(--line);
}

.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-s);
  color: var(--text-strong);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: "+";
  color: var(--muted);
  font-size: 1.25rem;
  line-height: 1;
}

.faq details[open] summary::after {
  content: "−";
}

.faq details > p {
  margin: var(--space-s) 0 0;
  color: var(--muted);
}

/* Quiet inline label. The all-caps pill it replaced is gone from the landing
   page; legal and support pages still carry the element until T5. */
/* 16 ------------------------------------------------ Motion preferences --- */

/* Motion is removed, not shortened: no animation runs and no transition
   interpolates, so nothing animates for a reader who asked for stillness. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }

  html {
    scroll-behavior: auto;
  }
}