/* ============================================================
   Klutta marketing site — the one stylesheet.

   Ported from the Claude Design handoff (design_handoff_klutta_site).
   The prototype carried every rule as an inline style="…" because of its
   preview runtime; the handoff's instruction is that "the values are the
   contract, not the delivery mechanism", so the values below are lifted
   verbatim and the delivery is this stylesheet.

   Token values mirror design/snapshot/tokens/*.css — the same contract
   apps/mobile/src/constants/theme.ts consumes. Never invent a value here;
   if a token is missing, add it from the snapshot.
   ============================================================ */

/* ---------- raw palette ---------- */
:root {
  --c-white: #ffffff;
  --c-black: #000000;
  --c-gray-95: #f0f0f3;
  --c-gray-88: #e0e1e6;
  --c-gray-50: #60646c;
  --c-gray-13: #212225;
  --c-gray-17: #2c2c2e;
  --c-gray-19: #2e3135;
  --c-gray-72: #b0b4ba;

  --c-marigold: #e08a1e;
  --c-marigold-ink: #1a1206;
  --c-marigold-text-l: #a85a0c;
  --c-marigold-text-d: #f5a623;

  --c-danger: #d70015;
  --c-danger-text-l: #c9131f;
  --c-danger-text-d: #ff6b61;

  /* ---------- type ---------- */
  --font-display: ui-rounded, "Fredoka", system-ui, sans-serif;
  --font-system: -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;

  --headline-size: 1.0625rem;
  --body-size: 1.0625rem;
  --body-line: 1.375rem;
  --small-size: 0.9375rem;
  --label-size: 0.8125rem;
  --caption-size: 0.75rem;

  /* Fluid roles — the two largest scale with the viewport (handoff, Type). */
  --h1-size: clamp(2.25rem, 1.4rem + 3.6vw, 3.5rem);
  --h2-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.25rem);
  --h2-sub-size: clamp(1.5rem, 1.3rem + 0.8vw, 1.75rem);
  --page-title-size: clamp(2rem, 1.5rem + 2vw, 2.75rem);
  --lead-size: clamp(1.0625rem, 0.98rem + 0.35vw, 1.1875rem);
  --hero-lead-size: clamp(1.0625rem, 0.95rem + 0.5vw, 1.3125rem);

  /* ---------- radius ---------- */
  --radius-control: 8px;
  --radius-row: 12px;
  --radius-button: 14px;
  --radius-card: 16px;
  --radius-tile: 22px;
  --radius-capsule: 999px;

  --elevation-2: 0 10px 30px rgba(0, 0, 0, 0.18);

  /* ---------- semantic aliases (light) ---------- */
  --background: var(--c-white);
  --text: var(--c-black);
  --text-secondary: var(--c-gray-50);
  --surface: var(--c-gray-95);
  --surface-selected: var(--c-gray-88);
  --surface-elevated: var(--c-white);
  --separator: rgba(0, 0, 0, 0.1);
  --hairline: rgba(0, 0, 0, 0.16);
  --elevated-hairline: transparent;

  --accent: var(--c-marigold);
  --accent-text: var(--c-marigold-text-l);
  --on-accent: var(--c-marigold-ink);
  --accent-tint: rgba(224, 138, 30, 0.14);

  --danger: var(--c-danger);
  --danger-text: var(--c-danger-text-l);

  color-scheme: light;
}

/* LIGHT IS THE DEFAULT — deliberately not `prefers-color-scheme`. The site renders
   light for every first-time visitor regardless of their OS setting; dark is reached
   only by the header's appearance toggle, which stores the choice and stamps
   data-theme on <html>. So this is the ONLY dark block, and `data-theme="dark"` is
   the only thing that selects it. */
:root[data-theme="dark"] {
  --background: var(--c-black);
  --text: var(--c-white);
  --text-secondary: var(--c-gray-72);
  --surface: var(--c-gray-13);
  --surface-selected: var(--c-gray-19);
  --surface-elevated: var(--c-gray-17);
  --separator: rgba(255, 255, 255, 0.12);
  --hairline: rgba(255, 255, 255, 0.18);
  --elevated-hairline: rgba(255, 255, 255, 0.08);
  --accent-text: var(--c-marigold-text-d);
  --accent-tint: rgba(245, 166, 35, 0.16);
  --danger-text: var(--c-danger-text-d);
  color-scheme: dark;
}

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

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

body {
  margin: 0;
  background: var(--background);
  color: var(--text);
  font-family: var(--font-system);
  font-size: var(--body-size);
  line-height: var(--body-line);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  text-wrap: pretty;
}

a {
  color: var(--accent-text);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

/* The ONLY hover treatment (handoff, Interactions): no transforms, no shadow. */
a:hover {
  opacity: 0.72;
}

img {
  max-width: 100%;
}

/* ---------- icons: Material Symbols Rounded via a ligature span ---------- */
.micon {
  font-family: "Material Symbols Rounded";
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "liga";
  font-variation-settings: "opsz" 24, "wght" 400, "GRAD" 0, "FILL" 0;
  user-select: none;
  flex: none;
}

.micon.fill {
  font-variation-settings: "opsz" 24, "wght" 400, "GRAD" 0, "FILL" 1;
}

/* Directional glyphs mirror under RTL; search/box glyphs deliberately do not. */
[dir="rtl"] .klutta-flip-rtl {
  transform: scaleX(-1);
}

.i-accent {
  color: var(--accent-text);
}

.i-18 {
  font-size: 18px;
}

.i-20 {
  font-size: 20px;
}

.i-22 {
  font-size: 22px;
}

.i-24 {
  font-size: 24px;
}

/* ---------- layout ---------- */
.wrap {
  max-width: 1080px;
  margin-inline: auto;
  padding-inline: 16px;
}

.wrap-narrow {
  max-width: 820px;
  margin-inline: auto;
  padding-inline: 16px;
}

.page {
  background: var(--background);
  color: var(--text);
  min-height: 100vh;
}

.page-column {
  display: flex;
  flex-direction: column;
}

/* ---------- header ---------- */
.site-header {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding-block: 16px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: var(--text);
}

.brand img {
  border-radius: 8px;
  display: block;
}

.brand-name {
  font-family: var(--font-display);
  font-size: 1.3125rem;
  font-weight: 600;
  letter-spacing: -0.2px;
}

.section-nav {
  margin-inline-start: auto;
  display: flex;
  gap: 8px 16px;
  flex-wrap: wrap;
  font-size: var(--small-size);
}

.section-nav a {
  color: var(--text-secondary);
  text-decoration: none;
}

.back-link {
  margin-inline-start: auto;
  font-size: var(--small-size);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Header controls: the language picker and the appearance toggle. Both sit after
   the section nav, so .section-nav keeps its `margin-inline-start: auto` and this
   group simply follows it. */
.header-tools {
  display: flex;
  align-items: center;
  gap: 8px;
}

.langpicker {
  position: relative;
}

.langpicker summary {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding-inline: 12px;
  border-radius: var(--radius-capsule);
  background: var(--surface);
  color: var(--text);
  font-size: var(--label-size);
  font-weight: 600;
  cursor: pointer;
  user-select: none;
  list-style: none;
}

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

.langpicker summary .micon:last-child {
  color: var(--text-secondary);
}

.langpicker-menu {
  position: absolute;
  inset-inline-end: 0;
  top: calc(100% + 8px);
  min-width: 220px;
  padding: 6px;
  display: grid;
  gap: 2px;
  background: var(--surface-elevated);
  border: 1px solid var(--elevated-hairline);
  border-radius: var(--radius-card);
  box-shadow: var(--elevation-2);
  z-index: 60;
}

.langpicker-menu a {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding-inline: 12px;
  border-radius: var(--radius-row);
  text-decoration: none;
  font-size: var(--small-size);
  color: var(--text);
}

/* The tick is present on every row so the labels stay aligned; only the current
   locale's is visible. */
.langpicker-menu a .micon {
  color: transparent;
}

.langpicker-menu a[aria-current="page"] {
  background: var(--surface-selected);
  font-weight: 600;
}

.langpicker-menu a[aria-current="page"] .micon {
  color: var(--accent-text);
}

/* Revealed by the shell's appearance script — a toggle that cannot toggle is
   worse than no toggle, so without JS the page just follows the visitor's own
   system preference. */
.theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-capsule);
  background: var(--surface);
  color: var(--accent-text);
  cursor: pointer;
}

.theme-toggle:active {
  opacity: 0.82;
}

/* Author styles outrank the UA sheet's [hidden] { display: none }, so `display: flex`
   above would show the button to a visitor with no script. This restores it. */
.theme-toggle[hidden] {
  display: none;
}

/* ---------- sections ---------- */
.section {
  padding-block: 64px;
  border-top: 1px solid var(--separator);
}

.section--hero {
  padding-block: 32px 64px;
  border-top: 0;
}

h1,
.h1 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.8px;
  font-size: var(--h1-size);
  line-height: 1.08;
}

/* Sub-page titles (support, press, 404) sit a step below the landing hero. */
.page-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.4px;
  font-size: var(--page-title-size);
  line-height: 1.1;
}

.s-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.2px;
  font-size: var(--h2-size);
  line-height: 1.15;
  max-width: 22ch;
}

.s-title--wide {
  max-width: 24ch;
}

.s-title--sub {
  font-size: var(--h2-sub-size);
  line-height: 1.2;
  max-width: none;
}

.h3 {
  margin: 0;
  font-size: var(--headline-size);
  font-weight: 600;
}

.lead {
  margin: 16px 0 0;
  font-size: var(--lead-size);
  line-height: 1.5;
  max-width: 62ch;
}

.hero-lead {
  margin: 24px 0 0;
  font-size: var(--hero-lead-size);
  line-height: 1.45;
  color: var(--text);
}

.body-note {
  margin: 24px 0 0;
  font-size: var(--body-size);
  line-height: 1.5;
  max-width: 62ch;
}

.definition {
  margin: 32px 0 0;
  font-size: var(--small-size);
  line-height: 1.5;
  color: var(--text-secondary);
  max-width: 52ch;
}

/* The one sentence where the site's "spot" vocabulary meets the word people actually search with
   ("moving box"). Sits directly under the definition, so it takes the definition's measure and a
   tighter top margin rather than opening a new block. */
.bridge {
  margin: 12px 0 0;
  font-size: var(--small-size);
  line-height: 1.5;
  color: var(--text-secondary);
  max-width: 52ch;
}

.emph {
  color: var(--text);
}

/* ---------- responsive column sets ----------
   auto-fit + minmax collapses to one column with no media query. */
.cols {
  display: grid;
  gap: 32px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--col-min, 300px)), 1fr));
  align-items: start;
}

.cols--340 {
  --col-min: 340px;
}

.cols--320 {
  --col-min: 320px;
}

.cols--300 {
  --col-min: 300px;
}

.cols--260 {
  --col-min: 260px;
}

.cols--240 {
  --col-min: 240px;
}

.cols--centered {
  align-items: center;
}

.cols--capped {
  max-width: 860px;
}

.cols--gap16 {
  gap: 16px;
}

/* Copy that sits beside a figure rather than under a section heading. */
.side-copy {
  margin: 8px 0 0;
  font-size: var(--body-size);
  line-height: 1.5;
  color: var(--text-secondary);
  max-width: 44ch;
}

.stack-top {
  margin-top: 32px;
}

/* ---------- phone frames ---------- */
.figure {
  margin: 0;
  display: grid;
  gap: 16px;
  justify-items: center;
}

.figure--tight {
  gap: 12px;
}

.phone {
  width: 100%;
  max-width: var(--phone-max, 320px);
  background: var(--surface);
  border-radius: 28px;
  padding: 6px;
}

.phone--260 {
  --phone-max: 260px;
}

.phone--280 {
  --phone-max: 280px;
}

.phone--300 {
  --phone-max: 300px;
}

.phone img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 22px;
}

.caption {
  font-size: var(--small-size);
  line-height: 1.5;
  color: var(--text-secondary);
  max-width: 38ch;
  text-align: center;
}

.caption--34 {
  max-width: 34ch;
}

.caption--start {
  text-align: start;
  max-width: none;
  font-size: var(--caption-size);
}

/* ---------- calls to action ---------- */
.cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 56px;
  padding-inline: 24px;
  border-radius: var(--radius-button);
  background: var(--accent);
  color: var(--on-accent);
  text-decoration: none;
  font-size: var(--headline-size);
  font-weight: 600;
}

.cta-group {
  margin-top: 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: start;
}

.benefits {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  font-size: var(--small-size);
  color: var(--text-secondary);
}

.benefits li {
  display: flex;
  align-items: baseline;
  gap: 16px;
}

.benefits li + li::before {
  content: "·";
  opacity: 0.5;
}

.cta-tile {
  background: var(--surface);
  border-radius: var(--radius-tile);
  padding: clamp(24px, 4vw, 48px);
  display: flex;
  flex-direction: column;
  align-items: start;
  gap: 16px;
}

.cta-tile p {
  margin: 0;
}

.cta-fineprint {
  margin: 0;
  font-size: var(--small-size);
  color: var(--text-secondary);
}

/* ---------- three-step list ---------- */
.steps {
  margin: 32px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 32px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
}

.steps .phone {
  margin-inline: auto;
}

.steps h3 {
  margin: 16px 0 0;
  font-size: var(--headline-size);
  font-weight: 600;
}

.steps p {
  margin: 8px 0 0;
  font-size: var(--small-size);
  line-height: 1.5;
  color: var(--text-secondary);
}

/* ---------- icon bullet list ---------- */
.icon-list {
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 12px;
  font-size: var(--body-size);
  color: var(--text-secondary);
  max-width: 56ch;
}

.icon-list li {
  display: flex;
  gap: 8px;
}

/* ---------- grouped card (surface + hairlines, never a shadow) ---------- */
.card {
  background: var(--surface);
  border-radius: var(--radius-card);
  overflow: hidden;
}

.card--capped {
  max-width: 760px;
}

.card-row {
  padding: 16px;
  display: flex;
  gap: 12px;
}

.card-row + .card-row {
  border-top: 1px solid var(--separator);
}

.card-row h3 {
  margin: 0;
  font-size: var(--headline-size);
  font-weight: 600;
}

.card-row p {
  margin: 4px 0 0;
  font-size: var(--small-size);
  line-height: 1.5;
  color: var(--text-secondary);
}

.tiles {
  margin: 32px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
}

.tile {
  background: var(--surface);
  border-radius: var(--radius-card);
  padding: 16px;
}

.tile h3 {
  margin: 8px 0 0;
  font-size: var(--headline-size);
  font-weight: 600;
}

.tile p {
  margin: 8px 0 0;
  font-size: var(--small-size);
  line-height: 1.5;
  color: var(--text-secondary);
}

/* ---------- the stylised label sheet ---------- */
.beats {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 24px;
  max-width: 56ch;
}

.beats p {
  margin: 8px 0 0;
  font-size: var(--body-size);
  line-height: 1.5;
  color: var(--text-secondary);
}

.labelsheet {
  background: var(--surface);
  border-radius: var(--radius-card);
  padding: 16px;
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}

.labelcell {
  background: var(--background);
  border-radius: var(--radius-row);
  padding: 12px;
  display: grid;
  gap: 8px;
  justify-items: center;
  text-align: center;
}

.labelcell-name {
  font-size: var(--small-size);
  font-weight: 600;
}

.labelcell-meta {
  font-size: var(--caption-size);
  color: var(--text-secondary);
}

.labelcell-code {
  font-size: var(--caption-size);
  color: var(--text-secondary);
  letter-spacing: 1px;
}

.qr-badge {
  width: 64px;
  height: 64px;
  border-radius: 12px;
  background: var(--accent-tint);
  display: flex;
  align-items: center;
  justify-content: center;
}

.qr-badge .micon {
  font-size: 36px;
  color: var(--accent-text);
}

/* ---------- tables ---------- */
.table-wrap {
  margin-top: 32px;
  overflow-x: auto;
  border-radius: var(--radius-card);
  background: var(--surface);
}

.table-wrap table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--small-size);
  text-align: start;
  min-width: 520px;
}

.table-wrap caption {
  text-align: start;
  padding: 16px 16px 0;
  font-size: var(--label-size);
  font-weight: 600;
  color: var(--text-secondary);
}

.table-wrap thead th {
  text-align: start;
  padding: 16px;
  font-weight: 600;
}

.table-wrap tbody th {
  text-align: start;
  padding: 16px;
  font-size: var(--headline-size);
  font-weight: 600;
  border-top: 1px solid var(--separator);
  vertical-align: top;
}

.table-wrap tbody td {
  padding: 16px;
  border-top: 1px solid var(--separator);
  vertical-align: top;
}

.plan-desc {
  color: var(--text-secondary);
  line-height: 1.5;
}

.price {
  display: inline-block;
  background: var(--accent-tint);
  color: var(--accent-text);
  border-radius: var(--radius-capsule);
  padding: 2px 8px;
  font-size: var(--label-size);
  font-weight: 600;
}

.table-note {
  margin: 0;
  padding: 16px;
  border-top: 1px solid var(--separator);
  font-size: var(--caption-size);
  color: var(--text-secondary);
}

/* The comparison table runs tighter and its row headers are body weight. */
.table-wrap--cmp tbody th {
  padding: 12px 16px;
  font-size: var(--small-size);
  font-weight: 400;
}

.table-wrap--cmp tbody td {
  padding: 12px 16px;
}

.table-wrap--cmp thead th:nth-child(2) {
  white-space: nowrap;
}

.cmp-no {
  color: var(--text-secondary);
}

.cmp-glyph {
  font-size: 22px;
  vertical-align: -4px;
}

/* ---------- Q&A pairs ---------- */
.qa {
  margin-top: 32px;
  display: grid;
  gap: 24px;
  max-width: 780px;
}

.qa--cols {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  max-width: 860px;
}

.qa-item + .qa-item {
  border-top: 1px solid var(--separator);
  padding-top: 24px;
}

.qa--cols .qa-item + .qa-item {
  border-top: 0;
  padding-top: 0;
}

.qa-item h3 {
  margin: 0;
  font-size: var(--headline-size);
  font-weight: 600;
}

.qa-item p {
  margin: 8px 0 0;
  font-size: var(--body-size);
  line-height: 1.5;
  color: var(--text-secondary);
}

.qa--small .qa-item p {
  font-size: var(--small-size);
}

/* ---------- the honest gaps list ---------- */
.gaps {
  margin: 32px 0 0;
  padding: 0;
  list-style: none;
  max-width: 780px;
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  font-size: var(--body-size);
}

.gaps li {
  display: flex;
  gap: 8px;
  color: var(--text-secondary);
}

/* ---------- the deliberately empty reviews slot ---------- */
.placeholder {
  max-width: 780px;
  border: 1px dashed var(--separator);
  border-radius: var(--radius-card);
  padding: 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
}

.placeholder p {
  margin: 0;
  font-size: var(--body-size);
  max-width: 46ch;
}

.placeholder-badge {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-capsule);
  background: var(--accent-tint);
  display: flex;
  align-items: center;
  justify-content: center;
}

.placeholder-badge .micon {
  font-size: 28px;
  color: var(--accent-text);
}

/* ---------- footer ---------- */
.site-footer {
  border-top: 1px solid var(--separator);
  background: var(--background);
}

.footer-cols {
  display: grid;
  gap: 32px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  padding-block: 32px 64px;
}

.footer-brand p {
  margin: 12px 0 0;
  font-size: var(--small-size);
  line-height: 1.5;
  color: var(--text-secondary);
  max-width: 34ch;
}

.footer-h {
  margin: 0 0 8px;
  font-size: var(--label-size);
  font-weight: 600;
  color: var(--text-secondary);
}

.footer-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
  font-size: var(--small-size);
}

.footer-list a {
  text-decoration: none;
}

.footer-list a[aria-current="page"] {
  color: var(--text);
}

.footer-note {
  margin: 12px 0 0;
  font-size: var(--caption-size);
  line-height: 1.4;
  color: var(--text-secondary);
}

.footer-legal {
  padding-block: 0 32px;
}

.footer-legal p {
  margin: 0;
  font-size: var(--caption-size);
  color: var(--text-secondary);
}

/* A single-row footer for the sub-pages. */
.footer-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  font-size: var(--small-size);
  padding-block: 24px 48px;
}

.footer-row a {
  text-decoration: none;
}

.footer-row .spacer {
  margin-inline-start: auto;
  color: var(--text-secondary);
}

/* ---------- 404 ---------- */
.center-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 16px;
  padding-block: 64px;
}

.center-main .page-title {
  max-width: 22ch;
}

.center-main p {
  margin: 0;
}

.notfound-badge {
  width: 88px;
  height: 88px;
  border-radius: var(--radius-capsule);
  background: var(--accent-tint);
  display: flex;
  align-items: center;
  justify-content: center;
}

.notfound-badge .micon {
  font-size: 44px;
  color: var(--accent-text);
}

.eyebrow {
  margin: 0;
  font-size: var(--label-size);
  font-weight: 600;
  color: var(--text-secondary);
}

.muted-lead {
  font-size: var(--lead-size);
  line-height: 1.5;
  max-width: 46ch;
  color: var(--text-secondary);
}

.link-row {
  margin-top: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  justify-content: center;
  font-size: var(--small-size);
}

.link-row a {
  text-decoration: none;
}

/* ---------- support / press sub-pages ---------- */
.sub-main {
  padding-block: 32px 64px;
}

.sub-section {
  margin-top: 64px;
}

.sub-intro {
  margin: 16px 0 0;
  font-size: var(--lead-size);
  line-height: 1.5;
  max-width: 58ch;
}

.contact-row {
  margin-top: 32px;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
}

.contact-row p {
  margin: 0;
  font-size: var(--small-size);
  color: var(--text-secondary);
  max-width: 34ch;
}

.prose {
  margin: 16px 0 0;
  line-height: 1.5;
}

/* Press kit — the facts table as a definition grid. */
.facts {
  margin: 16px 0 0;
  background: var(--surface);
  border-radius: var(--radius-card);
  overflow: hidden;
}

.fact {
  display: grid;
  grid-template-columns: minmax(140px, 1fr) 2fr;
  gap: 16px;
  padding: 12px 16px;
  font-size: var(--small-size);
}

.fact + .fact {
  border-top: 1px solid var(--separator);
}

.fact dt {
  font-weight: 600;
}

.fact dd {
  margin: 0;
  color: var(--text-secondary);
}

.boilerplate {
  margin: 16px 0 0;
  display: grid;
  gap: 16px;
}

.boilerplate blockquote {
  margin: 0;
  background: var(--surface);
  border-radius: var(--radius-card);
  padding: 16px;
}

.boilerplate blockquote p {
  margin: 8px 0 0;
  line-height: 1.5;
}

.boilerplate .eyebrow {
  color: var(--accent-text);
}

.logos {
  margin: 16px 0 0;
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr));
}

.logos figure {
  margin: 0;
  display: grid;
  gap: 8px;
  justify-items: center;
  text-align: center;
}

.logo-plate {
  width: 100%;
  background: var(--surface);
  border-radius: var(--radius-card);
  padding: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.logo-plate--dark {
  background: var(--c-black);
}

.logos figcaption {
  font-size: var(--caption-size);
  color: var(--text-secondary);
}

.shots {
  margin: 16px 0 0;
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
}

.shots figure {
  margin: 0;
  display: grid;
  gap: 8px;
  justify-items: center;
}

.shots img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-row);
  background: var(--surface);
}

.shots figcaption {
  font-size: var(--caption-size);
  color: var(--text-secondary);
  text-align: center;
}

.rules {
  margin: 16px 0 0;
  padding-inline-start: 20px;
  display: grid;
  gap: 8px;
  line-height: 1.5;
}

/* ---------- the RTL preview banner (Arabic page only) ---------- */
.rtl-note {
  background: var(--surface);
  border-bottom: 1px solid var(--separator);
}

.rtl-note-inner {
  padding-block: 16px;
  display: grid;
  gap: 8px;
}

.rtl-note p {
  margin: 0;
  font-size: var(--small-size);
  line-height: 1.5;
  color: var(--text-secondary);
}

.rtl-note .eyebrow {
  color: var(--accent-text);
}

/* ---------- legal pages (/privacy, /terms, /account-deletion) ---------- */
/* These reuse the sub-page chrome (.page, .site-header, .sub-main, .site-footer) and
   add only what the legal layout needs on top of it. */

/* The "Effective … operated by …" line under the title. */
.sub-intro--muted {
  color: var(--text-secondary);
}

/* The plain-language summary above a policy. Accent TINT as a surface, with
   --accent-text on it — never the raw seed as a background for body copy. */
.callout {
  margin-top: 32px;
  padding: 16px;
  border-radius: var(--radius-card);
  background: var(--accent-tint);
}

.callout p {
  margin: 0;
  font-size: var(--small-size);
  line-height: 1.5;
  color: var(--accent-text);
}

.toc {
  margin-top: 32px;
  padding: 16px;
  border-radius: var(--radius-card);
  background: var(--surface);
}

.toc h2 {
  margin: 0 0 8px;
  font-size: var(--label-size);
  font-weight: 600;
  color: var(--text-secondary);
}

.toc ol {
  margin: 0;
  padding-inline-start: 20px;
  display: grid;
  gap: 6px;
  font-size: var(--small-size);
}

/* A legal section sits closer than a marketing one: the reader is working down a
   document, not browsing. */
.legal-section {
  margin-top: 48px;
}

.legal-section > p {
  margin: 16px 0 0;
  line-height: 1.5;
}

.legal-section > p + p {
  margin-top: 12px;
}

.prose-list {
  margin: 16px 0 0;
  padding-inline-start: 20px;
  display: grid;
  gap: 12px;
  line-height: 1.5;
}

.prose-list--tight {
  gap: 8px;
}

/* Numbered how-to steps (deleting an account). The number is decorative — the
   <ol> already conveys order to a screen reader. */
.numbered {
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 12px;
}

.numbered li {
  display: flex;
  gap: 12px;
  align-items: start;
  padding: 16px;
  border-radius: var(--radius-row);
  background: var(--surface);
  line-height: 1.5;
}

.num-badge {
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-capsule);
  background: var(--accent-tint);
  color: var(--accent-text);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--label-size);
  font-weight: 600;
}

.legal-note {
  margin: 16px 0 0;
  font-size: var(--small-size);
  line-height: 1.5;
  color: var(--text-secondary);
}

.card-row .detail {
  display: block;
  margin-top: 2px;
  font-size: var(--small-size);
  line-height: 1.5;
  color: var(--text-secondary);
}

.i-danger {
  color: var(--danger-text);
}

/* ---------- print ---------- */
/* ---------- pinned landing header ---------- */
/* The landing pages pin their header: the section nav is the only way around a very long page, and
   it has to stay reachable at the bottom of it. The legal, support and press pages deliberately do
   NOT pin — their header is just a way back, and the design leaves it static.
   The bar is full-bleed (background + blur + hairline); the header inside it keeps the content
   column. `color-mix` over the theme's own --background is what keeps this correct in both themes
   without a second declaration. */
.site-header-bar {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--background) 86%, transparent);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 0.5px solid var(--hairline);
}

.site-header-bar .site-header {
  padding-block: 12px;
}

/* Reserves the pinned bar's height in the flow, so the hero does not start underneath it. Two
   values because the header wraps onto a second row on a narrow screen. */
.site-header-spacer {
  height: 61px;
}

@media (max-width: 640px) {
  .site-header-spacer {
    height: 105px;
  }
}

/* Anchor targets (#pricing, #faq, …) must clear the pinned bar, or the nav scrolls the heading
   underneath its own header. Harmless on the unpinned pages. */
:target {
  scroll-margin-top: 88px;
}

/* ---------- sticky install bar (landing only) ---------- */
/* The one floating surface on the site, hence the only --elevation-2 use: fixed to the bottom so
   the install CTA stays reachable without scrolling back to the hero. The design handoff carried it
   behind a `stickyCta` flag and left "does it ship" open; the current design answers yes. */
.install-bar {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 20;
  background: var(--surface-elevated);
  border-top: 1px solid var(--separator);
  box-shadow: var(--elevation-2);
}

.install-bar-inner {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-block: 12px;
}

.install-bar-note {
  flex: 1;
  font-size: var(--small-size);
  color: var(--text-secondary);
}

/* A bar-sized install button: the 56px hero CTA would make the bar too tall on a phone, and 48px is
   the Android touch-target floor the design system sets. */
.cta--compact {
  min-height: 48px;
  padding-inline: 20px;
  font-size: var(--small-size);
}

/* The bar is fixed, so it would otherwise cover the footer's last rows. Reserving the space on the
   page keeps the legal line readable — the prototype does not need this, a real page does. */
.page:has(.install-bar) {
  padding-bottom: 76px;
}

@media print {
  .section-nav,
  .header-tools,
  .cta,
  .install-bar,
  .rtl-note {
    display: none;
  }

  .site-header-bar {
    position: static;
    background: none;
    backdrop-filter: none;
  }

  .site-header-spacer {
    display: none;
  }

  .page:has(.install-bar) {
    padding-bottom: 0;
  }
}