/* Appenvision — "Instrument" design system, dark edition.
   Deep petrol ground, elevated panels, one bright teal accent; product art
   supplies the colour. Display: Lexend · Body: Source Sans 3 (self-hosted).
   Single-theme by design: the site commits to dark. */

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

@font-face {
  font-family: "Lexend";
  src: url("/assets/fonts/lexend-var.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}

@font-face {
  font-family: "Source Sans 3";
  src: url("/assets/fonts/sourcesans3-var.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}

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

:root {
  color-scheme: dark;

  --paper: #0d1519;         /* page ground */
  --paper-deep: #0a1114;    /* footer / deepest band */
  --surface: #162126;       /* cards and panels sit above the ground */
  --surface-high: #1d2b31;  /* inputs, hovers, nested plates */
  --ink: #e9f1f3;           /* 16:1 on ground */
  --ink-soft: #a7bec6;      /* 9.6:1 */
  --ink-faint: #7f99a2;     /* 6.2:1 — still passes AA */
  --line: #24343b;
  --line-strong: #35494f;

  --accent: #3ccfe4;        /* bright teal: ~10:1 on ground, link-safe */
  --accent-strong: #7fe3f0; /* hover — brighter, never darker, on dark */
  --accent-bright: #22b8cf; /* decorative fills */

  --night: #12262e;
  --night-ink: #f2f7f8;
  --night-soft: #a8c0c9;

  --font-display: "Lexend", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif;

  --r-s: 10px;
  --r-m: 16px;
  --r-l: 24px;

  /* on dark, depth comes from black shadow plus a hairline highlight */
  --shadow-s: 0 1px 2px rgb(0 0 0 / 0.4), 0 4px 14px rgb(0 0 0 / 0.3);
  --shadow-m: 0 2px 8px rgb(0 0 0 / 0.45), 0 18px 44px -12px rgb(0 0 0 / 0.6);

  --container: 1160px;
  --gutter: clamp(20px, 4.5vw, 40px);
  --header-h: 64px;
}

/* ---------------------------------------------------------------- reset */

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

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

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 1.02rem/1.65 var(--font-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

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

a { color: inherit; }

h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }

ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }

::selection { background: rgb(60 207 228 / 0.3); color: #fff; }

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

section[id] { scroll-margin-top: calc(var(--header-h) + 16px); }

/* ----------------------------------------------------------- typography */

h1, h2, h3, .brand-name, .btn, .app-link {
  font-family: var(--font-display);
  letter-spacing: -0.01em;
}

h1 {
  font-size: clamp(2.1rem, 3.9vw + 0.7rem, 3.7rem);
  font-weight: 650;
  line-height: 1.08;
  text-wrap: balance;
}

h2 {
  font-size: clamp(1.55rem, 2vw + 0.7rem, 2.3rem);
  font-weight: 630;
  line-height: 1.14;
  text-wrap: balance;
}

h3 {
  font-size: 1.14rem;
  font-weight: 600;
  line-height: 1.3;
}

.eyebrow {
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 14px;
}

.lede {
  font-size: clamp(1.08rem, 0.4vw + 1rem, 1.24rem);
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 36em;
}

.section-lede {
  font-size: 1.1rem;
  color: var(--ink-soft);
  max-width: 40em;
  margin-top: 14px;
}

/* Keyword cluster that used to be stuffed into the H1. Kept visible and
   crawlable, but out of the heading so it cannot run to four lines on a
   390px screen. */
.section-subhead {
  font-family: var(--font-display);
  font-size: clamp(1rem, 0.5vw + 0.9rem, 1.18rem);
  font-weight: 550;
  line-height: 1.35;
  color: var(--accent-strong);
  max-width: 34em;
  margin-top: 10px;
}

/* --------------------------------------------------------------- layout */

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

.section { padding-block: clamp(56px, 8vw, 104px); }

.section-head { max-width: 54em; }

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

.skip-link {
  position: absolute;
  left: 16px;
  top: -48px;
  z-index: 100;
  padding: 10px 18px;
  background: var(--accent);
  color: #08191d;
  border-radius: 0 0 12px 12px;
  text-decoration: none;
  font-weight: 600;
  transition: top 0.2s ease;
}

.skip-link:focus-visible { top: 0; }

.site-header {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 50;
  background: rgb(13 21 25 / 0.82);
  -webkit-backdrop-filter: saturate(1.3) blur(12px);
  backdrop-filter: saturate(1.3) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.site-header.scrolled {
  border-bottom-color: var(--line);
  box-shadow: 0 1px 0 rgb(0 0 0 / 0.3);
}

.header-row {
  display: flex;
  align-items: center;
  gap: 24px;
  height: var(--header-h);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

.brand-name {
  font-size: 1.22rem;
  font-weight: 650;
  letter-spacing: -0.02em;
}

.brand-dot { color: var(--accent-bright); }

.site-nav { margin-left: auto; }

/* only the top-level list is a horizontal row — the submenu is its own
   grid, so these selectors stay scoped to direct children */
.site-nav > ul {
  display: flex;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-nav > ul > li > a {
  position: relative;
  display: inline-block;
  padding: 8px 14px;
  border-radius: 999px;
  text-decoration: none;
  font: 550 0.95rem var(--font-display);
  color: var(--ink-soft);
  transition: color 0.15s ease, background-color 0.15s ease;
}

.site-nav > ul > li > a:hover { color: var(--ink); background: rgb(255 255 255 / 0.07); }

.site-nav a[aria-current="page"] { color: var(--accent-strong); }

.site-nav > ul > li > a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 2px;
  height: 2px;
  border-radius: 2px;
  background: var(--accent);
}

/* Categories menu: a <details> so it opens by keyboard and without JS,
   while its links stay in the HTML for crawlers either way */

.site-nav .has-menu { position: relative; }

.nav-menu summary {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 8px 14px;
  border-radius: 999px;
  font: 550 0.95rem var(--font-display);
  color: var(--ink-soft);
  cursor: pointer;
  list-style: none;
  transition: color 0.15s ease, background-color 0.15s ease;
}

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

.nav-menu summary:hover { color: var(--ink); background: rgb(255 255 255 / 0.07); }

.nav-menu summary.is-current { color: var(--accent); }

.nav-chevron { width: 13px; height: 13px; transition: rotate 0.2s ease; }

.nav-menu[open] .nav-chevron { rotate: 180deg; }

.site-nav .nav-submenu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 60;
  width: max-content;
  min-width: 244px;
  display: grid;
  gap: 2px;
  padding: 8px;
  margin: 0;
  list-style: none;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-m);
  box-shadow: var(--shadow-m);
}

.site-nav .nav-submenu a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 12px;
  border-radius: 10px;
  font-size: 0.92rem;
  color: var(--ink-soft);
  text-decoration: none;
}

.nav-submenu a:hover { background: var(--surface-high); color: var(--ink); }

.nav-count {
  font-size: 0.78rem;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}

.mobile-heading {
  padding: 18px 10px 6px;
  font: 600 0.8rem var(--font-display);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.mobile-categories {
  list-style: none;
  margin: 0;
  padding: 0 var(--gutter) 24px;
  display: grid;
  gap: 2px;
}

.mobile-categories a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 10px;
  border-radius: 12px;
  font: 550 1rem var(--font-display);
  color: var(--ink-soft);
  text-decoration: none;
}

.mobile-categories a:hover { background: rgb(255 255 255 / 0.07); color: var(--ink); }

.header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}

.site-nav + .header-actions { margin-left: 0; }

/* mobile menu */

.menu-toggle {
  display: none;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--surface);
  font: 600 0.9rem var(--font-display);
  color: var(--ink);
  cursor: pointer;
}

.menu-icon {
  position: relative;
  width: 16px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: background-color 0.15s ease;
}

.menu-icon::before,
.menu-icon::after {
  content: "";
  position: absolute;
  left: 0;
  width: 16px;
  height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform 0.2s ease, top 0.2s ease;
}

.menu-icon::before { top: -5px; }
.menu-icon::after { top: 5px; }

.menu-toggle[aria-expanded="true"] .menu-icon { background: transparent; }
.menu-toggle[aria-expanded="true"] .menu-icon::before { top: 0; transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-icon::after { top: 0; transform: rotate(-45deg); }

.mobile-menu {
  border-top: 1px solid var(--line);
  min-height: calc(100dvh - var(--header-h));
  background: rgb(13 21 25 / 0.96);
}

.mobile-menu ul {
  list-style: none;
  margin: 0;
  padding: 12px var(--gutter) 20px;
  display: grid;
  gap: 2px;
}

.mobile-menu a {
  display: block;
  padding: 14px 10px;
  border-radius: 12px;
  text-decoration: none;
  font: 600 1.15rem var(--font-display);
  color: var(--ink);
}

.mobile-menu a:hover { background: rgb(255 255 255 / 0.07); }

.mobile-menu .mobile-store { color: var(--accent-strong); }

@media (max-width: 859px) {
  .site-nav { display: none; }
  .menu-toggle { display: inline-flex; }
  .header-actions .btn-compact { display: none; }
}

@media (min-width: 860px) {
  .mobile-menu { display: none; }
}

/* -------------------------------------------------------------- buttons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 25px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 0.97rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.18s ease, background-color 0.18s ease,
    border-color 0.18s ease, box-shadow 0.18s ease;
}

.btn:active { transform: scale(0.98); }

.btn-primary {
  background: var(--ink);
  color: #0b171c;
  box-shadow: var(--shadow-s);
}

.btn-primary:hover {
  background: #ffffff;
  transform: translateY(-1px);
  box-shadow: var(--shadow-m);
}

.btn-ghost {
  border-color: var(--line-strong);
  background: var(--surface);
  color: var(--ink);
}

.btn-ghost:hover { border-color: var(--accent); transform: translateY(-1px); }

/* light button on a dark panel: text must stay dark, not follow --ink */
.btn-light { background: #fff; color: #0b171c; }

.btn-light:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 30px rgb(0 0 0 / 0.3);
}

.btn-compact {
  padding: 9px 16px;
  font-size: 0.88rem;
  background: var(--ink);
  color: #0b171c;
}

.btn-compact:hover { background: #ffffff; }

.btn .i-apple { width: 15px; height: 18px; margin-top: -2px; flex: none; }

.i-arrow { width: 15px; height: 15px; flex: none; transition: translate 0.18s ease; }

.btn-ghost:hover .i-arrow { translate: 3px 0; }

.app-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
  padding-block: 13px;
  margin-block: -13px;
}

.app-link:hover { color: var(--accent-strong); text-decoration: underline; text-underline-offset: 4px; }

.app-link:hover .i-arrow { translate: 3px 0; }

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

.hero {
  position: relative;
  padding-top: calc(var(--header-h) + clamp(40px, 6vw, 84px));
  padding-bottom: clamp(40px, 5vw, 72px);
  background:
    radial-gradient(48rem 28rem at 104% -12%, rgb(60 207 228 / 0.13), transparent 64%),
    radial-gradient(42rem 26rem at -8% 14%, rgb(14 116 144 / 0.16), transparent 62%),
    var(--paper);
  overflow: clip;
}

.hero-grid {
  display: grid;
  gap: clamp(36px, 5vw, 64px);
  align-items: center;
}

.hero-grid > * { min-width: 0; }

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

.hero-copy .eyebrow { margin-bottom: 18px; }

.hero-copy h1 .accent { color: var(--accent); }

.hero-copy .lede { margin-top: 20px; }

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 32px;
}

@media (max-width: 420px) {
  .cta-row .btn { width: 100%; }
}

/* hero media: owner image when present, honest placeholder until then */

.hero-image {
  width: 100%;
  border-radius: var(--r-l);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-m);
}

.hero-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  aspect-ratio: 4 / 3;
  border: 2px dashed var(--line-strong);
  border-radius: var(--r-l);
  background: var(--surface);
  color: var(--ink-faint);
}

/* product art carries its own light background: a hairline keeps it from
   floating against the dark ground */
.hero-image,
.card-preview img { box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.06); }

.hero-placeholder svg { width: 44px; height: 44px; }

.hero-placeholder span { font: 600 1.05rem var(--font-display); color: var(--ink-soft); }

.hero-placeholder small { font-size: 0.82rem; }

/* device / plate media */

.media-device {
  padding: 6px;
  background: #17242a;
  border-radius: 26px;
  box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / 0.08), var(--shadow-m);
}

.media-device img { border-radius: 20px; }

.media-plate {
  border-radius: var(--r-m);
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-s);
}

/* trust strip */

.trust-strip {
  display: grid;
  gap: 12px;
  margin-top: clamp(36px, 5vw, 56px);
  padding-top: clamp(20px, 3vw, 28px);
  border-top: 1px solid var(--line-strong);
}

@media (min-width: 720px) {
  .trust-strip { grid-template-columns: repeat(3, 1fr); }
}

.trust-strip li {
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.trust-strip strong {
  font: 650 clamp(1.6rem, 2vw + 0.8rem, 2.2rem) var(--font-display);
  color: var(--ink);
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.trust-strip span {
  font-size: 0.95rem;
  color: var(--ink-soft);
  max-width: 16em;
}

/* -------------------------------------------------------- featured cards */

.featured { background: var(--paper-deep); border-block: 1px solid var(--line); }

.featured .section-head { margin-bottom: clamp(32px, 4vw, 48px); }

.card-grid {
  display: grid;
  gap: 18px;
}

@media (min-width: 860px) {
  .card-grid { grid-template-columns: repeat(2, 1fr); }
}

/* the max-content filmstrip must never set the cards' min-content size */
.card-grid > *,
.card-link,
.hub-grid > li,
.hub-card { min-width: 0; }

.card-strip { max-width: 100%; }

.app-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  overflow: clip;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.app-card:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--app-accent, var(--accent)) 45%, var(--line));
  box-shadow: var(--shadow-m);
}

.card-link {
  display: flex;
  flex-direction: column;
  gap: 14px;
  height: 100%;
  padding: clamp(20px, 2.6vw, 28px);
  text-decoration: none;
}

.card-head {
  display: flex;
  align-items: center;
  gap: 14px;
}

.app-icon {
  border-radius: 22.5%;
  box-shadow: 0 2px 10px rgb(0 0 0 / 0.45), inset 0 0 0 1px rgb(255 255 255 / 0.08);
}

.card-head .app-icon { width: 56px; height: 56px; }

.card-head h3 { font-size: 1.22rem; }

.card-cat {
  font: 550 0.82rem var(--font-display);
  color: var(--ink-faint);
  margin-top: 2px;
}

.card-tagline {
  font: 600 1.02rem var(--font-display);
  color: var(--accent-strong);
  max-width: 34em;
}

.card-desc {
  font-size: 0.97rem;
  color: var(--ink-soft);
  max-width: 36em;
}

/* one horizontal preview per app; placeholder until the owner adds it */

.card-preview {
  display: flex;
  aspect-ratio: 16 / 9;
  border-radius: var(--r-m);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--surface-high);
  margin-top: auto;
}

.card-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card-preview-empty {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 2px dashed var(--line-strong);
  color: var(--ink-faint);
}

.card-preview-empty svg { width: 36px; height: 36px; }

/* Touch targets. The audit measured brand, menu button, breadcrumb and footer
   links between 32 and 37px tall; 44px is the WCAG 2.1 AA floor. Height is
   added as padding so nothing reflows horizontally on a 320px screen. */
@media (max-width: 900px) {
  .brand,
  .menu-toggle,
  .site-footer a,
  .crumbs a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  .site-footer li + li { margin-top: 0; }
}

/* Mobile featured card: icon, outcome, one visual, one CTA — nothing else.
   At 390px the full-description variant measured 476-538px per card, which
   pushed the home page past 10 000px and buried the choice six screens down.
   The App Store description is not lost: it is on the app page this card
   links to, where it is the primary copy rather than a preview. */
@media (max-width: 720px) {
  .card-link {
    gap: 8px;
    padding: 14px 16px;
  }

  .card-head .app-icon { width: 48px; height: 48px; }

  .card-head h3 { font-size: 1.08rem; }

  .card-tagline {
    font-size: 0.98rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .card-desc { display: none; }

  /* wider crop than desktop: it is the difference between a 364px card and
     one that fits the audit's 320px ceiling */
  .card-preview { aspect-ratio: 13 / 5; }

  .card-btn {
    padding: 10px 18px;
    font-size: 0.9rem;
  }
}

.card-preview-empty .cp-label {
  font: 600 0.95rem var(--font-display);
  color: var(--ink-soft);
}

.card-preview-empty small { font-size: 0.78rem; }

.card-btn {
  margin-top: 14px;
  align-self: flex-start;
  padding: 11px 20px;
  font-size: 0.92rem;
}

.app-card:hover .card-btn {
  border-color: var(--accent);
  color: var(--accent-strong);
}

.app-card:hover .card-btn .i-arrow { translate: 3px 0; }

/* user-swipeable screenshot previews: no auto-scroll, native momentum
   scrolling with snap points; thin scrollbar as the affordance */

.shots-row {
  --shot-h: clamp(180px, 16vw, 230px);
  display: flex;
  gap: 10px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  padding: 12px 12px 14px;
  border-radius: var(--r-m);
  border: 1px solid var(--line);
  background: var(--surface);
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) transparent;
}

.shots-row::-webkit-scrollbar { height: 6px; }

.shots-row::-webkit-scrollbar-thumb {
  background: var(--line-strong);
  border-radius: 3px;
}

.shots-row::-webkit-scrollbar-track { background: transparent; }

.shots-row img {
  height: var(--shot-h);
  width: auto;
  flex: none;
  scroll-snap-align: start;
  border-radius: 10px;
  border: 1px solid var(--line-strong);
  background: var(--surface-high);
}

.shots-s { --shot-h: 150px; }

.shots-l { --shot-h: clamp(260px, 30vw, 420px); }

.app-card .app-link { margin-top: 14px; }

/* ---------------------------------------------------------- capabilities */

.capability-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 0 clamp(28px, 4vw, 56px);
  margin-top: clamp(24px, 3vw, 36px);
}

.capability {
  border-top: 1px solid var(--line-strong);
  padding: 24px 0 28px;
}

.capability h3::before {
  content: "";
  display: block;
  width: 22px;
  height: 3px;
  border-radius: 2px;
  background: var(--accent);
  margin-bottom: 12px;
}

.capability h3 { font-size: 1.06rem; margin-bottom: 8px; }

.capability p { font-size: 0.96rem; color: var(--ink-soft); max-width: 30em; }

/* -------------------------------------------------------------- catalogue */

.catalogue { background: var(--paper-deep); border-block: 1px solid var(--line); }

.catalogue-head {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: 12px 24px;
  margin-bottom: 24px;
}

.index-list {
  display: grid;
  gap: 10px;
}

@media (min-width: 860px) {
  .index-list { grid-template-columns: repeat(2, 1fr); }
}

.index-row a {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  text-decoration: none;
  transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.index-row a:hover {
  border-color: var(--line-strong);
  transform: translateY(-2px);
  box-shadow: var(--shadow-s);
}

.index-row .app-icon { width: 48px; height: 48px; flex: none; }

.index-name {
  flex: 1;
  font: 600 0.98rem var(--font-display);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.badge {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 999px;
  font: 650 0.68rem var(--font-display);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
}

.badge-top {
  background: rgb(60 207 228 / 0.14);
  color: var(--accent-strong);
}

.badge-new {
  background: rgb(74 222 128 / 0.14);
  color: #6ee7a0;
}

.index-cat {
  font: 550 0.78rem var(--font-display);
  letter-spacing: 0.02em;
  color: var(--ink-faint);
  text-align: right;
}

.index-row .i-arrow { color: var(--ink-faint); flex: none; }

.index-row a:hover .i-arrow { translate: 3px 0; color: var(--accent); }

/* --------------------------------------------------------------- approach */

.tech-grid {
  display: grid;
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}

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

.tech-grid .app-link { margin-top: 22px; }

.tech-points { display: grid; }

.tech-point {
  border-top: 1px solid var(--line);
  padding: 20px 0;
}

.tech-point:last-child { border-bottom: 1px solid var(--line); }

.tech-point h3 { font-size: 1.04rem; margin-bottom: 6px; }

.tech-point p { color: var(--ink-soft); font-size: 0.96rem; max-width: 34em; }

/* --------------------------------------------------------- support teaser */

.support-teaser { padding-top: 0; }

.teaser-panel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px 32px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  padding: clamp(24px, 3.6vw, 44px);
}

.teaser-panel h2 { font-size: clamp(1.35rem, 1.6vw + 0.7rem, 1.8rem); }

.teaser-panel p {
  margin-top: 10px;
  color: var(--ink-soft);
  max-width: 44em;
}

/* -------------------------------------------------------------- final CTA */

.cta-section { padding-top: 0; }

.cta-panel {
  position: relative;
  overflow: clip;
  background:
    radial-gradient(40rem 24rem at 86% -22%, rgb(60 207 228 / 0.28), transparent 62%),
    radial-gradient(32rem 22rem at 0% 122%, rgb(14 116 144 / 0.42), transparent 64%),
    var(--surface);
  color: var(--night-ink);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-l);
  padding: clamp(48px, 7vw, 88px) clamp(24px, 6vw, 80px);
  text-align: center;
}

.cta-panel h2 { font-size: clamp(1.9rem, 3vw + 0.6rem, 2.9rem); }

.cta-panel p {
  margin: 14px auto 30px;
  color: var(--night-soft);
  font-size: 1.1rem;
  max-width: 30em;
}

.cta-qr { display: none; }

@media (min-width: 900px) {
  .cta-qr {
    display: flex;
    width: fit-content;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin: clamp(30px, 3.2vw, 44px) auto 0;
  }
}

.cta-qr img {
  width: 104px;
  height: 104px;
  padding: 8px;
  background: #fff;
  border-radius: 14px;
}

.cta-qr span {
  font: 600 0.78rem var(--font-display);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgb(242 247 248 / 0.7);
}

/* ------------------------------------------------------------- breadcrumb */

.breadcrumb {
  padding-top: calc(var(--header-h) + 18px);
  margin-bottom: clamp(20px, 3vw, 32px);
}

.section .breadcrumb { padding-top: 0; }

.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
  font: 550 0.85rem var(--font-display);
  color: var(--ink-faint);
}

.breadcrumb li + li::before { content: "/"; margin-right: 6px; color: var(--line-strong); }

.breadcrumb a { color: var(--ink-soft); text-decoration: none; }

.breadcrumb a:hover { color: var(--accent-strong); text-decoration: underline; }

.breadcrumb [aria-current="page"] { color: var(--ink-faint); }

/* -------------------------------------------------------------- app pages */

.app-page { padding-bottom: clamp(56px, 8vw, 104px); }

.app-page > .container > .breadcrumb { padding-top: calc(var(--header-h) + 18px); }

.app-hero {
  display: grid;
  gap: clamp(24px, 4vw, 48px);
  align-items: start;
  padding-bottom: clamp(28px, 4vw, 40px);
  border-bottom: 1px solid var(--line);
}

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

.app-hero-id {
  display: flex;
  align-items: flex-start;
  gap: 20px;
}

.app-hero-id .app-icon { width: 96px; height: 96px; flex: none; }

.app-hero-id h1 { font-size: clamp(1.7rem, 2.4vw + 0.6rem, 2.6rem); }

.app-tagline {
  margin-top: 8px;
  font-size: 1.15rem;
  color: var(--accent-strong);
  font-weight: 550;
}

/* verified App Store rating, stated as a fact with its source and date */
.app-rating {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 8px;
  margin-top: 12px;
}

.app-rating strong {
  font: 650 1.3rem var(--font-display);
  color: var(--ink);
}

.app-rating .stars { color: var(--accent); font-size: 1.1rem; }

.app-rating .rating-meta {
  font-size: 0.88rem;
  color: var(--ink-faint);
}

.app-hero-side {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

@media (min-width: 900px) {
  .app-hero-side { align-items: flex-end; }
}

.app-facts {
  display: grid;
  gap: 0;
  width: 100%;
  max-width: 340px;
}

.app-facts .fact {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.92rem;
}

.app-facts dt { color: var(--ink-faint); }

.app-facts dd { font-weight: 600; text-align: right; }

.app-gallery { padding-block: clamp(28px, 4vw, 44px); }

.app-body {
  display: grid;
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}

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

.app-story h2,
.app-features h2,
.app-related h2 { font-size: 1.3rem; margin-bottom: 16px; }

.app-story p { color: var(--ink-soft); max-width: 40em; }

.app-story p + p { margin-top: 14px; }

.app-features {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  padding: clamp(22px, 3vw, 32px);
}

.ledger { display: grid; }

.ledger li {
  position: relative;
  padding: 10px 0 10px 26px;
  border-bottom: 1px solid var(--line);
  font-size: 0.98rem;
  color: var(--ink-soft);
}

.ledger li:last-child { border-bottom: 0; }

.ledger li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 1.05em;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--app-accent, var(--accent));
}

.app-features .btn { margin-top: 18px; width: 100%; }

/* editorial sections on app pages (outcome, use cases, steps, pricing, FAQ) */

.app-outcome,
.app-cases,
.app-steps,
.app-pricing,
.app-faq {
  padding-top: clamp(32px, 4vw, 52px);
  margin-top: clamp(32px, 4vw, 52px);
  border-top: 1px solid var(--line);
}

.app-outcome { border-top: 0; margin-top: 0; }

.app-outcome h2,
.app-cases h2,
.app-steps h2,
.app-pricing h2,
.app-faq h2 {
  font-size: clamp(1.3rem, 1.4vw + 0.9rem, 1.7rem);
  margin-bottom: 16px;
}

.app-outcome p {
  max-width: 42em;
  color: var(--ink-soft);
  font-size: 1.05rem;
}

.app-outcome p + p { margin-top: 14px; }

.case-grid {
  display: grid;
  gap: 14px;
}

@media (min-width: 700px) {
  .case-grid { grid-template-columns: repeat(2, 1fr); }
}

.case-grid li {
  padding: 20px 22px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-m);
}

.case-grid h3 { font-size: 1.02rem; margin-bottom: 6px; }

.case-grid p { color: var(--ink-soft); font-size: 0.96rem; }

.step-list {
  display: grid;
  gap: 2px;
  max-width: 46em;
}

.step-list li {
  display: flex;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}

.step-list li:last-child { border-bottom: 0; }

.step-n {
  flex: none;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: color-mix(in srgb, var(--app-accent, var(--accent)) 22%, var(--surface));
  color: var(--ink);
  font: 650 0.85rem var(--font-display);
}

.step-list h3 { font-size: 1rem; margin-bottom: 4px; }

.step-list p { color: var(--ink-soft); font-size: 0.96rem; }

.app-limits {
  margin-top: 24px;
  padding: 20px 22px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  max-width: 46em;
}

.app-limits h3 { font-size: 0.98rem; margin-bottom: 10px; }

.app-limits ul { padding-left: 20px; color: var(--ink-soft); font-size: 0.94rem; }

.app-limits li + li { margin-top: 6px; }

.app-pricing p { max-width: 44em; color: var(--ink-soft); }

.app-pricing-links { margin-top: 10px; font-size: 0.94rem; }

.app-pricing-links a { color: var(--accent); text-underline-offset: 3px; }

.app-faq .faq { border-top: 1px solid var(--line-strong); max-width: 52em; }

.app-related { margin-top: clamp(36px, 5vw, 56px); }

.related-grid {
  display: grid;
  gap: 12px;
}

@media (min-width: 720px) {
  .related-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1020px) {
  .related-grid { grid-template-columns: repeat(3, 1fr); }
}

.cat-more {
  padding-top: clamp(32px, 4vw, 52px);
  margin-top: clamp(32px, 4vw, 52px);
  border-top: 1px solid var(--line);
}

.related-card {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  column-gap: 14px;
  align-items: center;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  text-decoration: none;
  transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.related-card:hover {
  border-color: var(--line-strong);
  transform: translateY(-2px);
  box-shadow: var(--shadow-s);
}

.related-card .app-icon { width: 48px; height: 48px; grid-area: 1 / 1 / 3 / 2; }

.related-name {
  grid-area: 1 / 2 / 2 / 3;
  font: 600 0.95rem var(--font-display);
}

.related-tag {
  grid-area: 2 / 2 / 3 / 3;
  font-size: 0.84rem;
  color: var(--ink-faint);
  /* one line everywhere so names align across the row */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.related-card .i-arrow {
  color: var(--ink-faint);
  grid-area: 1 / 3 / 3 / 4;
  align-self: center;
}

.related-card:hover .i-arrow { translate: 3px 0; color: var(--accent); }

/* -------------------------------------------------------------- hub page */

.hub { padding-top: 0; }

.hub .breadcrumb { padding-top: calc(var(--header-h) + 18px); }

.hub .section-head { margin-bottom: clamp(28px, 4vw, 44px); }

.hub-grid {
  display: grid;
  gap: 16px;
}

@media (min-width: 680px) {
  .hub-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1020px) {
  .hub-grid { grid-template-columns: repeat(3, 1fr); }
}

.hub-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  height: 100%;
  padding: 22px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  text-decoration: none;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.hub-card:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--app-accent, var(--accent)) 45%, var(--line));
  box-shadow: var(--shadow-m);
}

.hub-card .app-icon { width: 64px; height: 64px; margin-bottom: 10px; }

.hub-name { font: 600 1.08rem var(--font-display); }

.hub-cat {
  font: 550 0.78rem var(--font-display);
  color: var(--ink-faint);
}

.hub-tagline {
  font-size: 0.95rem;
  color: var(--ink-soft);
  margin-top: 4px;
}

.hub-card .app-link { margin-top: auto; padding-top: 14px; }

/* categories */

.cat-grid {
  display: grid;
  gap: 14px;
  margin-top: clamp(28px, 4vw, 44px);
}

@media (min-width: 640px) {
  .cat-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1020px) {
  .cat-grid { grid-template-columns: repeat(4, 1fr); }
}

.cat-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  height: 100%;
  padding: 20px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  text-decoration: none;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.cat-card:hover {
  transform: translateY(-3px);
  border-color: var(--line-strong);
  box-shadow: var(--shadow-m);
}

.cat-icons {
  display: flex;
  margin-bottom: 12px;
}

.cat-icons img {
  width: 44px;
  height: 44px;
  border-radius: 22.5%;
  border: 2px solid var(--surface);
  box-shadow: 0 1px 4px rgb(0 0 0 / 0.5);
}

.cat-icons img + img { margin-left: -10px; }

.cat-name { font: 600 1.05rem var(--font-display); }

.cat-count {
  font: 550 0.82rem var(--font-display);
  color: var(--ink-faint);
}

.cat-text {
  margin-top: 8px;
  font-size: 0.9rem;
  color: var(--ink-soft);
}

/* category chips on the hub + "other categories" nav on category pages */

.cat-chips { margin-bottom: clamp(24px, 3vw, 36px); }

.cat-chips ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.cat-chips a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--surface);
  font: 600 0.9rem var(--font-display);
  text-decoration: none;
  transition: border-color 0.18s ease, color 0.18s ease;
}

.cat-chips a:hover { border-color: var(--accent); color: var(--accent); }

.cat-chips span {
  font-size: 0.78rem;
  color: var(--ink-faint);
}

/* category editorial blocks */

.cat-choose,
.cat-compare,
.cat-faq {
  padding-top: clamp(32px, 4vw, 52px);
  margin-top: clamp(32px, 4vw, 52px);
  border-top: 1px solid var(--line);
}

.cat-choose h2,
.cat-compare h2,
.cat-faq h2 {
  font-size: clamp(1.3rem, 1.4vw + 0.9rem, 1.7rem);
  margin-bottom: 16px;
}

/* wide table scrolls inside its own container, never the page */
.table-scroll { overflow-x: auto; }

.compare-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.94rem;
  min-width: 720px;
}

.compare-table caption {
  caption-side: bottom;
  padding-top: 12px;
  font-size: 0.85rem;
  color: var(--ink-faint);
  text-align: left;
}

.compare-table th,
.compare-table td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

.compare-table thead th {
  font: 600 0.85rem var(--font-display);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-faint);
  border-bottom-color: var(--line-strong);
}

.compare-table tbody th { font-weight: 600; white-space: nowrap; }

.compare-table tbody th a { color: var(--accent); text-decoration: none; }

.compare-table tbody th a:hover { text-decoration: underline; text-underline-offset: 3px; }

.compare-table td { color: var(--ink-soft); font-variant-numeric: tabular-nums; }

.cat-faq .faq { border-top: 1px solid var(--line-strong); max-width: 52em; }

.cat-nav {
  margin-top: clamp(40px, 5vw, 64px);
  padding-top: clamp(24px, 3vw, 32px);
  border-top: 1px solid var(--line);
}

.cat-nav h2 { font-size: 1.05rem; margin-bottom: 14px; }

.cat-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
}

.cat-nav a {
  display: inline-block;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  font-size: 0.9rem;
  text-decoration: none;
  color: var(--ink-soft);
}

.cat-nav a:hover { border-color: var(--accent); color: var(--accent); }

.related-more { margin-top: 16px; }

.full-head {
  margin-top: clamp(44px, 6vw, 72px);
  padding-top: clamp(24px, 3vw, 36px);
  border-top: 1px solid var(--line-strong);
}

.full-head h2 { font-size: clamp(1.4rem, 1.8vw + 0.6rem, 1.9rem); }

.full-catalogue { margin-top: 8px; }

/* --------------------------------------------------------- support page */

.support .breadcrumb { padding-top: calc(var(--header-h) + 18px); }

.support-grid {
  display: grid;
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}

@media (min-width: 900px) {
  .support-grid { grid-template-columns: 0.9fr 1.1fr; }
}

.support-email { margin-top: 24px; }

.faq { border-top: 1px solid var(--line-strong); }

.faq-item { border-bottom: 1px solid var(--line-strong); }

.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 2px;
  cursor: pointer;
  font: 600 1.02rem/1.45 var(--font-display);
  list-style: none;
}

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

.faq-item summary:hover { color: var(--accent-strong); }

.faq-chevron {
  width: 18px;
  height: 18px;
  flex: none;
  color: var(--ink-faint);
  transition: rotate 0.25s ease;
}

.faq-item[open] .faq-chevron { rotate: 180deg; }

.faq-body { padding: 0 2px 20px; }

.faq-body p { color: var(--ink-soft); font-size: 0.99rem; max-width: 46em; }

.faq-body a {
  color: var(--accent);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.faq-body a:hover { color: var(--accent-strong); }

/* ----------------------------------------------------------- about page */

.about .breadcrumb { padding-top: calc(var(--header-h) + 18px); }

.about-grid {
  display: grid;
  gap: clamp(24px, 4vw, 72px);
}

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

.about-body p { color: var(--ink-soft); font-size: 1.05rem; max-width: 36em; }

.about-body p + p { margin-top: 14px; }

.about-facts { margin-top: 26px; max-width: 420px; }

/* ---------------------------------------------------------- legal pages */

.legal-page { padding-bottom: clamp(56px, 8vw, 96px); }

.legal-page .breadcrumb { padding-top: calc(var(--header-h) + 18px); }

.legal-page h1 { margin-bottom: clamp(20px, 3vw, 32px); }

.apps-carousel-block {
  margin-bottom: clamp(28px, 4vw, 44px);
  padding-bottom: clamp(24px, 3vw, 36px);
  border-bottom: 1px solid var(--line);
}

.carousel-title {
  font-size: 1.05rem;
  color: var(--ink-soft);
  margin-bottom: 14px;
}

.apps-carousel {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  padding: 4px 2px 12px;
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) transparent;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}

.apps-carousel::-webkit-scrollbar { height: 6px; }

.apps-carousel::-webkit-scrollbar-thumb {
  background: var(--line-strong);
  border-radius: 3px;
}

/* seamless auto-scroll; both sets must stay pixel-identical */
.carousel-track {
  display: flex;
  width: max-content;
  animation: carousel-scroll var(--carousel-dur, 60s) linear infinite;
  will-change: transform;
}

.carousel-set {
  display: flex;
  gap: 12px;
  padding-right: 12px;
}

.apps-carousel:hover .carousel-track,
.apps-carousel:focus-within .carousel-track { animation-play-state: paused; }

@keyframes carousel-scroll {
  to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .carousel-track { animation: none; }
}

.apps-carousel a {
  flex: none;
  border-radius: 16px;
  transition: transform 0.18s ease;
}

.apps-carousel a:hover { transform: translateY(-3px); }

.apps-carousel img {
  width: 56px;
  height: 56px;
  border-radius: 22.5%;
  box-shadow: 0 2px 10px rgb(0 0 0 / 0.45), inset 0 0 0 1px rgb(255 255 255 / 0.08);
}

.legal-content {
  max-width: 46em;
  font-size: 0.98rem;
  color: var(--ink-soft);
  overflow-wrap: break-word;
}

.legal-content h2, .legal-content h3, .legal-content h4,
.legal-content b, .legal-content strong { color: var(--ink); }

.legal-content h2 { font-size: 1.3rem; margin: 36px 0 12px; }

.legal-content h3 { font-size: 1.1rem; margin: 28px 0 10px; }

.legal-content h4 { font-size: 1rem; margin: 22px 0 8px; }

.legal-content p, .legal-content ul, .legal-content ol { margin: 0 0 14px; }

.legal-content ul, .legal-content ol { padding-left: 22px; }

.legal-content li { margin-bottom: 6px; }

.legal-content a { color: var(--accent); text-underline-offset: 3px; }

.legal-content a:hover { color: var(--accent-strong); }

.legal-content table {
  border-collapse: collapse;
  margin: 16px 0;
  font-size: 0.9rem;
  display: block;
  overflow-x: auto;
}

.legal-content th, .legal-content td {
  border: 1px solid var(--line-strong);
  padding: 8px 12px;
  text-align: left;
  vertical-align: top;
}

.legal-content th { background: var(--surface-high); color: var(--ink); }

/* ------------------------------------------------------------- not found */

.not-found {
  padding-top: calc(var(--header-h) + clamp(48px, 8vw, 96px));
  text-align: center;
}

.nf-code {
  font: 650 clamp(4rem, 10vw, 7rem)/1 var(--font-display);
  color: var(--line-strong);
  letter-spacing: 0.02em;
}

.not-found h1 { margin-top: 8px; }

.not-found .section-lede { margin-inline: auto; }

.nf-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 28px;
}

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

.site-footer {
  border-top: 1px solid var(--line);
  background: var(--paper-deep);
  padding-top: clamp(40px, 6vw, 64px);
}

.footer-grid {
  display: grid;
  gap: 32px;
  padding-bottom: 36px;
}

@media (min-width: 860px) {
  .footer-grid { grid-template-columns: 1.5fr 1fr 1fr 1fr; }
}

.footer-brand p {
  margin: 16px 0 12px;
  color: var(--ink-soft);
  font-size: 0.95rem;
  max-width: 28em;
}

.footer-brand .app-link { display: flex; width: fit-content; }

.footer-title {
  font: 600 0.82rem var(--font-display);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 10px;
}

.footer-col ul { display: grid; gap: 2px; }

.footer-col a {
  display: inline-block;
  padding: 6px 0;
  color: var(--ink-soft);
  text-decoration: none;
  font-size: 0.95rem;
}

.footer-col a:hover { color: var(--accent-strong); }

.footer-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
  justify-content: space-between;
  border-top: 1px solid var(--line);
  padding-block: 22px;
  color: var(--ink-faint);
  font-size: 0.85rem;
}

/* --------------------------------------------------------------- consent
   Bottom bar, not a modal: it never blocks reading, and the page stays
   usable if the visitor ignores it. Rendered only when a tag container is
   configured — with no measurement there is nothing to ask about. */

.consent {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 60;
  background: var(--surface);
  border-top: 1px solid var(--line-strong);
  box-shadow: 0 -12px 40px rgb(0 0 0 / 0.45);
  padding: 16px var(--gutter);
  padding-bottom: max(16px, env(safe-area-inset-bottom));
}

.consent[hidden] { display: none; }

.consent-inner {
  max-width: var(--container);
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.consent-text {
  flex: 1 1 420px;
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.9rem;
  line-height: 1.5;
}

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

.consent-actions {
  display: flex;
  gap: 10px;
  flex: none;
  margin-inline-start: auto;
}

.consent .btn {
  padding: 10px 20px;
  font-size: 0.9rem;
}

@media (max-width: 560px) {
  .consent-actions { width: 100%; }
  .consent .btn { flex: 1; }
}

/* ---------------------------------------------------------------- motion */

/* The hiding class is set by main.js immediately before the observer is
   created — never in the document head. If the script never runs, fails, or
   the observer cannot be constructed, the copy simply stays visible instead
   of being hidden by CSS that nothing will ever undo. */
.reveal-on .reveal {
  opacity: 0;
  translate: 0 22px;
  transition: opacity 0.5s cubic-bezier(0.2, 0.65, 0.25, 1),
    translate 0.5s cubic-bezier(0.2, 0.65, 0.25, 1);
  transition-delay: var(--reveal-delay, 0s);
}

.reveal-on .reveal.in-view {
  opacity: 1;
  translate: 0 0;
}

@media (prefers-reduced-motion: reduce) {
  .reveal-on .reveal { opacity: 1; translate: none; transition: none; }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}