/* =========================================================================
   timoula — "Daylight" site foundation (every public page)

   A pure white canvas, warm-grey bands, an ink ramp and the brand orange as
   morning sun. This file holds what every public page shares: tokens, base,
   layout, typography helpers, buttons and store badges, the sticky nav, the
   footer, form fields, focus rings and the reveal system. Page sections
   live in landing.css / pages.css / share.css, built on these tokens.

   Contrast ratios are WCAG 2.x, computed against every surface a pair
   appears on. Reveal-on-scroll only hides content under `html.js` (added
   by a nonce'd inline <head> script), so pages are complete without JS.

   Cache: referenced as /css/site.css?v=SITE_ASSET_VERSION
   (src/server/siteAssets.ts). Bump that version when this file changes.
   ========================================================================= */

/* ---------- Fonts: self-hosted Inter (variable, 100-900) ----------------- */
/* Inter. SIL Open Font License 1.1, see /fonts/inter/LICENSE.txt. Used where
   the system UI font (SF Pro) is not available: Windows, Android, Linux.
   font-display: optional, not swap: nothing is preloaded (Apple devices never
   need these files), so on a cold first visit Inter arrives after first paint
   and a swap would reflow the hero (CLS 0.40 on Android). With optional the
   first visit keeps the system font with no shift, and Inter is used from
   the cache on every later page view. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: optional;
  src: url(/fonts/inter/inter-greek-ext.woff2) format("woff2");
  unicode-range: U+1F00-1FFF;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: optional;
  src: url(/fonts/inter/inter-greek.woff2) format("woff2");
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: optional;
  src: url(/fonts/inter/inter-latin-ext.woff2) format("woff2");
  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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: optional;
  src: url(/fonts/inter/inter-latin.woff2) format("woff2");
  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;
}

/* ============================== TOKENS ================================= */
:root {
  color-scheme: light;

  /* Canvas — daylight white, warm-grey bands */
  --c-bg: #ffffff;
  --c-band: #f7f7f5;                    /* alternating section band */
  --c-band-soft: #fafaf8;               /* quieter band: footer, expansion card */
  --c-surface: #ffffff;                 /* cards, rows, fields */
  --c-well: #fafaf8;                    /* inset panels inside cards */
  --c-tint: #fff4ec;                    /* warm wash: best row, icon tiles */
  --c-tint-2: #fffaf6;

  /* Ink-based hairlines (warm ink at low alpha; decorative, never the only
     boundary of a control) */
  --c-ink-rgb: 28 25 23;
  --c-line-faint: rgb(var(--c-ink-rgb) / 0.06);
  --c-line: rgb(var(--c-ink-rgb) / 0.09);
  --c-line-strong: rgb(var(--c-ink-rgb) / 0.15);
  --c-line-hover: rgb(var(--c-ink-rgb) / 0.26);
  --c-hover-wash: rgb(var(--c-ink-rgb) / 0.05);
  --c-press-wash: rgb(var(--c-ink-rgb) / 0.08);
  --c-field-border: #8a857f;            /* 3.66:1 white · 3.50:1 well → WCAG 1.4.11 */
  --c-field-border-hover: #66625d;

  /* Text ramp — warm greys. Ratios: white · band #f7f7f5 · deepest peach #fde3d2 */
  --c-fg: #1d1d1f;                      /* 16.8 · 15.7 · 13.7 */
  --c-fg-muted: #57534e;                /*  7.6 ·  7.1 ·  6.2 */
  --c-fg-subtle: #66625d;               /*  6.1 ·  5.6 ·  4.9 */
  --c-fg-quiet: #8a857f;                /*  3.7 ·  3.4 — display-size text only (AA large ≥ 3:1) */
  --c-ink-ramp-top: #1d1d1f;            /* H1 ramp: ink to warm graphite, both ≥ 9:1 */
  --c-ink-ramp-bottom: #45413d;

  /* Brand — orange as morning sun */
  --c-brand: #f05423;                   /* fills, glows, display type ≥ 24px: 3.5:1 white (AA large) */
  --c-brand-rgb: 240 84 35;
  --c-brand-text: #bf3f0f;              /* small orange text: 5.3 white · 5.0 band · 4.9 tint · 4.6 peach */
  --c-cta: #c94511;                     /* orange action fill: white label 4.84:1 */
  --c-cta-hover: #b23b0c;               /* white label 5.9:1 */
  --c-on-cta: #ffffff;
  --c-danger: #b42318;                  /* error text: 6.5 white · 6.1 band */

  /* Ink material: the conventional black store badge, skip link */
  --c-ink: #1d1d1f;
  --c-ink-hover: #333336;
  --c-on-ink: #ffffff;                  /* 16.8:1 */

  /* Sunrise light: apricot core, peach falloff, cream haze. Hues held at
     22–26° so the falloff never drifts to salmon-pink or brown. */
  --c-sun-core: rgb(255 150 92);
  --c-sun-warm: rgb(255 180 132 / 0.95);
  --c-sun-peach: rgb(255 208 174 / 0.85);
  --c-sun-haze: rgb(255 230 210 / 0.6);
  --c-sun-hot: rgb(255 168 112 / 0.62);
  --c-sun-horizon: rgb(255 150 92 / 0.9);
  --c-sun-line-hi: #ff8f52;
  --c-sun-glow: rgb(255 122 62 / 0.5);
  --c-sun-text-glow: rgb(255 150 100 / 0.32);
  --c-spot: rgb(255 160 110 / 0.16);    /* bento cursor spotlight */
  --c-dawn-top: #ffffff;                /* closing card: white sky → peach horizon */
  --c-dawn-mid: #fff7f1;
  --c-dawn-low: #ffe8d8;

  /* Glass (nav, notification banners, price pills only) */
  --c-glass: rgb(255 255 255 / 0.74);
  --c-glass-fallback: rgb(255 255 255 / 0.96);
  --c-nav-glass: rgb(255 255 255 / 0.72);
  --c-nav-glass-scrolled: rgb(255 255 255 / 0.84);
  --c-banner: rgb(246 245 243 / 0.84);  /* iOS light notification material */
  --c-banner-fallback: rgb(246 245 243 / 0.97);
  --c-banner-card: rgb(255 255 255 / 0.88);
  --c-banner-older: rgb(242 241 238 / 0.92);

  /* Light material */
  --c-white: #ffffff;
  --c-tile: #ffffff;
  --c-chip-ring: rgb(var(--c-ink-rgb) / 0.08);
  --c-screen: #faf9f6;                  /* app canvas behind lazy screenshots */
  --c-wordmark: #ebe8e3;                /* decorative footer wordmark (not text content) */
  --c-wordmark-dot: #ffd3b8;
  --c-dots: rgb(var(--c-ink-rgb) / 0.2);
  --mask-solid: #000;                   /* mask alpha stops (not painted colours) */
  --mask-fade: rgb(0 0 0 / 0.3);

  /* Natural-titanium device frame, tuned to sit on white */
  --c-ti-1: #e7e4df;
  --c-ti-2: #a7a29b;
  --c-ti-3: #6f6b66;
  --c-ti-spec: rgb(255 255 255 / 0.95);
  --c-ti-warm: rgb(255 146 90 / 0.85);
  --c-bezel: #0b0b0c;
  --c-island: #000000;

  /* Type */
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fs-display: clamp(2.125rem, 0.55rem + 6.7vw, 5.5rem);
  --fs-display-2: clamp(2.125rem, 1.2rem + 3.9vw, 4.25rem);
  --fs-h2: clamp(1.875rem, 1.3rem + 2.45vw, 3.375rem);
  --fs-h3: clamp(1.1875rem, 1.1rem + 0.35vw, 1.4375rem);
  --fs-lead: clamp(1.0625rem, 1rem + 0.3vw, 1.3125rem);
  --fs-body: 1.0625rem;                 /* 17px */
  --fs-small: 0.9375rem;                /* 15px */
  --fs-micro: 0.8125rem;                /* 13px — eyebrows only, bold + tracked */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* Latin defaults; Greek overrides below (accents/tonos need air) */
  --lh-display: 1.02;
  --lh-heading: 1.1;
  --lh-snug: 1.3;
  --lh-body: 1.55;
  --tr-display: -0.04em;
  --tr-heading: -0.03em;
  --tr-title: -0.015em;
  --tr-body: -0.005em;
  --tr-eyebrow: 0.14em;

  /* Space (4px base) */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;
  --s-10: 128px;
  --gutter: clamp(16px, 4vw, 40px);
  /* Side padding that also clears the notch / rounded corners in iPhone
     landscape (pages use viewport-fit=cover). Use these, not --gutter, for
     anything that sits against a screen edge, incl. edge-to-edge scrollers. */
  --gutter-l: max(var(--gutter), env(safe-area-inset-left, 0px));
  --gutter-r: max(var(--gutter), env(safe-area-inset-right, 0px));
  --container: 1200px;
  --section-y: clamp(64px, 7vw, 104px);
  --nav-h: 64px;

  /* Radii */
  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 32px;
  --r-pill: 999px;
  --r-tile: 14px;
  --r-banner: 20px;

  /* Elevation — layered, warm-tinted, never a grey smudge */
  --shadow-xs: 0 1px 2px rgb(var(--c-ink-rgb) / 0.05);
  --shadow-soft: 0 1px 2px rgb(var(--c-ink-rgb) / 0.04), 0 10px 30px -18px rgb(var(--c-ink-rgb) / 0.18);
  --shadow-card: 0 1px 2px rgb(var(--c-ink-rgb) / 0.04), 0 14px 32px -20px rgb(var(--c-ink-rgb) / 0.16), 0 40px 80px -52px rgb(90 50 20 / 0.2);
  --shadow-tile: 0 0 0 1px rgb(var(--c-ink-rgb) / 0.07), 0 1px 2px rgb(var(--c-ink-rgb) / 0.04), 0 8px 20px -12px rgb(var(--c-ink-rgb) / 0.16);
  --shadow-tile-hover: 0 0 0 1px rgb(var(--c-brand-rgb) / 0.28), 0 18px 36px -16px rgb(var(--c-brand-rgb) / 0.42);
  --shadow-float: 0 0 0 1px rgb(var(--c-ink-rgb) / 0.07), 0 2px 6px rgb(var(--c-ink-rgb) / 0.06), 0 18px 40px -14px rgb(90 45 15 / 0.28);
  --shadow-device: 0 0 0 1px rgb(var(--c-ink-rgb) / 0.1), 0 2px 6px rgb(var(--c-ink-rgb) / 0.1), 0 32px 64px -30px rgb(var(--c-ink-rgb) / 0.42), 0 64px 120px -56px rgb(120 55 15 / 0.42);
  --shadow-ink-btn: 0 1px 2px rgb(var(--c-ink-rgb) / 0.2), 0 10px 24px -12px rgb(var(--c-ink-rgb) / 0.5);
  --shadow-cta: 0 1px 2px rgb(150 50 10 / 0.25), 0 8px 20px -10px rgb(var(--c-brand-rgb) / 0.6);
  --blur-glass: blur(22px) saturate(1.8);

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 160ms;
  --dur-base: 280ms;
  --dur-slow: 640ms;
  --dur-reveal: 900ms;
  --reveal-distance: 28px;

  /* Layers */
  --z-nav: 50;
  --z-skip: 100;
}

/* Greek: less negative tracking, taller leading for tonos/descenders */
:root:lang(el) {
  --lh-display: 1.08;
  --lh-heading: 1.14;
  --tr-display: -0.028em;
  --tr-heading: -0.02em;
  --tr-title: -0.01em;
  --tr-eyebrow: 0.12em;
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
  background-color: var(--c-bg);
}

body {
  margin: 0;
  min-height: 100vh;
  background-color: var(--c-bg);
  color: var(--c-fg);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--tr-body);
  font-feature-settings: "kern" 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  -webkit-tap-highlight-color: transparent;
  overflow-x: clip;
}

img, svg { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, h4, p, ul, ol, figure, dl, dd { margin: 0; }
:where(ul[role="list"], ol[role="list"]) { list-style: none; padding: 0; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
strong { font-weight: var(--fw-semibold); }
[hidden] { display: none !important; }
::selection { background: rgb(var(--c-brand-rgb) / 0.2); color: var(--c-fg); }

/* 2px brand-text ring: 5.3:1 on white, ≥ 4.6:1 on every surface (1.4.11 needs 3:1) */
:focus-visible {
  outline: 2px solid var(--c-brand-text);
  outline-offset: 3px;
}
main:focus { outline: none; }

/* Page container */
.wrap {
  width: 100%;
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin-inline: auto;
  padding-left: var(--gutter-l);
  padding-right: var(--gutter-r);
}

.nowrap { white-space: nowrap; }
.dot { color: var(--c-brand); }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: var(--s-3);
  left: max(var(--s-3), env(safe-area-inset-left, 0px));
  z-index: var(--z-skip);
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-sm);
  background: var(--c-ink);
  color: var(--c-on-ink);
  font-weight: var(--fw-semibold);
  transform: translateY(-200%);
  transition: transform var(--dur-fast) var(--ease-out);
}
.skip-link:focus { transform: none; }

/* Inline text link (body copy, legal text) */
.link {
  color: var(--c-fg);
  text-decoration: underline;
  text-decoration-color: var(--c-line-hover);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: text-decoration-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.link:hover { text-decoration-color: var(--c-brand); }

/* ============================== TYPE ==================================== */
/* Eyebrow — uppercase Greek is typed without tonos in the markup */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--fs-micro);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tr-eyebrow);
  line-height: 1.4;
  color: var(--c-brand-text);
}
.eyebrow__pip {
  width: 6px;
  height: 6px;
  border-radius: var(--r-pill);
  background: var(--c-brand);
  box-shadow: 0 0 0 4px rgb(var(--c-brand-rgb) / 0.14), 0 0 10px rgb(var(--c-brand-rgb) / 0.55);
}

/* Display heading (page H1 outside the landing hero) */
.display {
  font-size: var(--fs-display-2);
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
  letter-spacing: var(--tr-display);
  text-wrap: balance;
}
.h2 {
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
  letter-spacing: var(--tr-heading);
  text-wrap: balance;
}
.h3 {
  font-size: var(--fs-h3);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-title);
  text-wrap: balance;
}
.lead {
  color: var(--c-fg-muted);
  font-size: var(--fs-lead);
  line-height: 1.5;
  text-wrap: pretty;
}

.section-head { display: grid; gap: var(--s-4); }
.section-head .eyebrow { margin-bottom: calc(var(--s-1) * -1); }
.section-head__lead {
  max-width: 38rem;
  color: var(--c-fg-muted);
  font-size: var(--fs-lead);
  line-height: 1.5;
  text-wrap: pretty;
}
.section-head--center { justify-items: center; text-align: center; }
.section-head--center .h2 { max-width: 16em; }
.section-head--split { align-items: end; }
.section-head--split .h2 { max-width: 15em; }

/* ============================== BUTTONS ================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: 48px;
  padding: 0 var(--s-5);
  border: 0;
  border-radius: var(--r-pill);
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tr-title);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.btn:active { transform: scale(0.98); }
.btn:disabled { opacity: 0.6; cursor: progress; transform: none; }
.btn--cta { background: var(--c-cta); color: var(--c-on-cta); box-shadow: var(--shadow-cta); }
.btn--ghost {
  background: var(--c-surface);
  color: var(--c-fg);
  box-shadow: inset 0 0 0 1px var(--c-line-strong), var(--shadow-xs);
}
.btn--ink { background: var(--c-ink); color: var(--c-on-ink); box-shadow: var(--shadow-ink-btn); }
.btn__arrow {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform var(--dur-base) var(--ease-out);
}

/* Store download buttons — the label never wraps */
.store-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
}
.store-row--center { justify-content: center; }
.store-btn {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--s-3);
  min-height: 58px;
  padding: 0 var(--s-5) 0 var(--s-4);
  border-radius: var(--r-md);
  white-space: nowrap;
  transition: background-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
a.store-btn:active { transform: scale(0.98); }
.store-btn__icon { width: 24px; height: 26px; flex: none; }
svg.store-btn__icon { fill: currentColor; }
.store-btn__text { display: grid; text-align: left; line-height: 1.12; }
.store-btn__kicker { font-size: 0.6875rem; font-weight: var(--fw-medium); letter-spacing: 0.01em; opacity: 0.78; }   /* ≥ 6.5:1 after opacity on both materials */
.store-btn__name { font-size: 1.125rem; font-weight: var(--fw-semibold); letter-spacing: var(--tr-title); }
.store-btn--ink { background: var(--c-ink); color: var(--c-on-ink); box-shadow: var(--shadow-ink-btn); }
.store-btn--outline { background: var(--c-surface); color: var(--c-fg); box-shadow: inset 0 0 0 1px var(--c-line-strong), var(--shadow-xs); }
.store-btn--outline .store-btn__kicker { opacity: 0.72; }
/* A listing switched off via env (APP_STORE_URL=off): a quiet, non-link badge */
.store-btn--coming { background: var(--c-band-soft); color: var(--c-fg-muted); box-shadow: inset 0 0 0 1px var(--c-line-strong); cursor: default; }
.store-btn--coming .store-btn__kicker { opacity: 1; }

/* Hover lifts only where a pointer can hover, so nothing sticks after a tap */
@media (hover: hover) and (pointer: fine) {
  .btn--cta:hover { background: var(--c-cta-hover); box-shadow: 0 0 0 4px rgb(var(--c-brand-rgb) / 0.16), var(--shadow-cta); }
  .btn--ghost:hover { background: var(--c-band-soft); box-shadow: inset 0 0 0 1px var(--c-line-hover), var(--shadow-soft); }
  .btn--ink:hover { background: var(--c-ink-hover); }
  .btn:hover .btn__arrow { transform: translateX(3px); }
  .btn:disabled:hover { background: var(--c-cta); box-shadow: var(--shadow-cta); }
  .store-btn--ink:hover { background: var(--c-ink-hover); box-shadow: 0 0 0 4px var(--c-press-wash), var(--shadow-ink-btn); }
  .store-btn--outline:hover { box-shadow: inset 0 0 0 1px var(--c-line-hover), var(--shadow-soft); }
}

/* Small store-logo tile (price pills, compare rows, share pages) */
.logo-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 36px;
  height: 36px;
  padding: 5px;
  border-radius: 10px;
  background: var(--c-tile);
  box-shadow: inset 0 0 0 1px var(--c-chip-ring);
}
/* a flex box with a definite height, so both percentage limits resolve */
.logo-chip img { min-width: 0; max-width: 100%; max-height: 100%; width: auto; height: auto; }
/* wordmark-only chains (Masoutis): a wider tile so the word stays legible */
.logo-chip--wordmark { width: 80px; padding: 5px 6px; }

/* Glass material (nav, notification banners, price pills) */
.glass {
  background: var(--c-glass);
  -webkit-backdrop-filter: var(--blur-glass);
  backdrop-filter: var(--blur-glass);
  box-shadow: var(--shadow-float);
}
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .glass { background: var(--c-glass-fallback); }
}

/* ============================== NAV ==================================== */
/* Glass is the default (no-JS users keep it). With JS the bar can dissolve
   into a hero at scroll 0 (data-scrolled="false") and turns to glass + a
   hairline once the page moves. */
.nav {
  position: sticky;
  top: 0;
  z-index: var(--z-nav);
  background: var(--c-nav-glass);
  -webkit-backdrop-filter: var(--blur-glass);
  backdrop-filter: var(--blur-glass);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out);
}
.nav[data-scrolled="false"] {
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-bottom-color: transparent;
}
.nav[data-scrolled="true"] { border-bottom-color: var(--c-line); background: var(--c-nav-glass-scrolled); }
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .nav, .nav[data-scrolled="true"] { background: var(--c-glass-fallback); }
}
.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  min-height: var(--nav-h);
}
.nav__brand {
  display: inline-flex;
  flex: 0 1 auto;
  align-items: center;
  min-width: 0;
  min-height: 44px;
  border-radius: var(--r-xs);
}
/* At its normal size the logo never shrinks. Only if the row is overfull
   (a 320px phone with user text spacing, WCAG 1.4.12) does the logo scale
   down, never squashed, so the page never scrolls sideways. */
.nav__brand img { width: auto; max-width: 100%; height: 44px; object-fit: contain; object-position: left center; }
.nav__actions { display: flex; align-items: center; gap: var(--s-1); }
.nav__cta {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-right: var(--s-3);
  padding: 0 var(--s-4);
  border-radius: var(--r-pill);
  background: var(--c-cta);
  color: var(--c-on-cta);
  font-size: 0.875rem;
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tr-title);
  white-space: nowrap;
  position: relative;
  box-shadow: var(--shadow-cta);
  transition: background-color var(--dur-fast) var(--ease-out);
}

.icon-btn {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--r-pill);
  color: var(--c-fg-muted);
  transition: color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.icon-btn svg, .footer__social svg, .field__chevron, .ico {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.icon-btn svg { width: 20px; height: 20px; }

/* Language switch: two plain ?lang= links (work without JS) */
.lang {
  display: inline-flex;
  flex: none;
  margin-left: var(--s-1);
  padding: 0;
  border-radius: var(--r-pill);
  box-shadow: inset 0 0 0 1px var(--c-line-strong);
}
.lang__btn {
  display: inline-grid;
  place-items: center;
  min-width: 44px;
  height: 44px;
  padding: 0 var(--s-2);
  border-radius: var(--r-pill);
  color: var(--c-fg-muted);
  font-size: var(--fs-micro);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.06em;
  transition: color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.lang__btn[aria-current="true"] { background: var(--c-press-wash); color: var(--c-fg); }

@media (hover: hover) and (pointer: fine) {
  .nav__cta:hover { background: var(--c-cta-hover); }
  .icon-btn:hover { color: var(--c-fg); background: var(--c-hover-wash); }
  .lang__btn:hover { color: var(--c-fg); }
}

/* ============================== FORM FIELDS ============================ */
.field { display: grid; gap: 6px; min-width: 0; }
.field__label { color: var(--c-fg-muted); font-size: var(--fs-small); font-weight: var(--fw-medium); }
.field__hint { color: var(--c-fg-subtle); font-size: var(--fs-micro); line-height: 1.45; }
/* 16px text: iOS does not zoom the page when a field gets focus */
.field__input, .field__select select, .field__textarea {
  width: 100%;
  min-height: 48px;
  padding: 0 var(--s-4);
  border: 1px solid var(--c-field-border);
  border-radius: var(--r-sm);
  background: var(--c-surface);
  color: var(--c-fg);
  font-size: 1rem;
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.field__textarea { min-height: 120px; padding-block: var(--s-3); line-height: 1.5; resize: vertical; }
.field__input::placeholder, .field__textarea::placeholder { color: var(--c-fg-subtle); opacity: 1; }
.field__input:hover, .field__select select:hover, .field__textarea:hover { border-color: var(--c-field-border-hover); }
.field__input:focus-visible, .field__select select:focus-visible, .field__textarea:focus-visible {
  outline: none;
  border-color: var(--c-brand-text);
  box-shadow: 0 0 0 3px rgb(var(--c-brand-rgb) / 0.25);
}
.field__input[aria-invalid="true"], .field__select select[aria-invalid="true"], .field__textarea[aria-invalid="true"] {
  border-color: var(--c-danger);
  box-shadow: 0 0 0 3px rgb(180 35 24 / 0.14);
}
.field__input:-webkit-autofill { -webkit-box-shadow: 0 0 0 40px var(--c-tint-2) inset; -webkit-text-fill-color: var(--c-fg); }
.field__select { position: relative; }
.field__select select { appearance: none; -webkit-appearance: none; padding-right: 44px; cursor: pointer; }
.field__select select:invalid { color: var(--c-fg-subtle); }
.field__select option { color: var(--c-fg); background: var(--c-surface); }
.field__chevron { position: absolute; right: 14px; top: 50%; width: 18px; height: 18px; transform: translateY(-50%); color: var(--c-fg-muted); pointer-events: none; }

/* Status lines under a form */
.form-status { display: flex; align-items: center; gap: var(--s-2); font-size: var(--fs-small); line-height: 1.45; }
.form-status svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.form-status--ok { color: var(--c-fg); }
.form-status--ok svg { color: var(--c-brand-text); }
.form-status--error { color: var(--c-danger); }

/* Anti-spam field: off-screen, out of the tab order, left empty by people */
.hp-field, .partner-form__honeypot {
  position: absolute !important;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ============================== FOOTER ================================= */
.footer {
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--c-line);
  padding-top: var(--s-8);
  background: var(--c-band-soft);
}
.footer__top {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
  gap: var(--s-6);
}
.footer__logo { width: auto; height: 44px; }
.footer__tagline { margin-top: var(--s-4); max-width: 22rem; color: var(--c-fg-subtle); font-size: var(--fs-small); line-height: 1.5; }
.footer__h { color: var(--c-fg); font-size: var(--fs-small); font-weight: var(--fw-semibold); letter-spacing: var(--tr-title); line-height: 1.4; }
.footer__col ul { display: grid; gap: 2px; margin-top: var(--s-3); }
.footer__col a {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 44px;
  color: var(--c-fg-muted);
  font-size: var(--fs-small);
  line-height: 1.35;
  overflow-wrap: anywhere;
  transition: color var(--dur-fast) var(--ease-out);
}
.footer__col a[aria-current="page"] { color: var(--c-fg); font-weight: var(--fw-medium); }
.footer__social svg { width: 18px; height: 18px; flex: none; }
.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-2) var(--s-5);
  margin-top: var(--s-7);
  padding-block: var(--s-3);
  border-top: 1px solid var(--c-line);
  color: var(--c-fg-subtle);
  font-size: var(--fs-small);
}
.footer__bottom a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--c-fg-muted); }
@media (hover: hover) and (pointer: fine) {
  .footer__col a:hover, .footer__bottom a:hover { color: var(--c-fg); }
}
/* the giant faded wordmark the page rests on (decorative, aria-hidden) */
.footer__wordmark {
  margin-top: clamp(0px, 1vw, 12px);
  padding-bottom: 0.02em;               /* the whole word sits on the page edge, dot included */
  text-align: center;
  font-size: clamp(5rem, 23vw, 20rem);
  font-weight: var(--fw-bold);
  line-height: 0.92;
  letter-spacing: -0.055em;
  white-space: nowrap;
  color: var(--c-wordmark);
  -webkit-mask-image: linear-gradient(180deg, var(--mask-solid) 35%, var(--mask-fade) 100%);
  mask-image: linear-gradient(180deg, var(--mask-solid) 35%, var(--mask-fade) 100%);
  user-select: none;
  pointer-events: none;
}
.footer__wordmark-dot { color: var(--c-wordmark-dot); }

/* ============================== REVEAL + MOTION ======================== */
/* `.reveal` blocks fade up as they scroll in. They are hidden only under
   html.js (added by the nonce'd <head> script) and only when motion is
   welcome; the page script adds .is-visible. Without JS, or with reduced
   motion, everything is simply visible. */
@keyframes rise {
  from { opacity: 0; translate: 0 var(--reveal-distance); }
  to { opacity: 1; translate: 0 0; }
}

@media (prefers-reduced-motion: no-preference) {
  .js .reveal {
    opacity: 0;
    translate: 0 var(--reveal-distance);
    transition: opacity var(--dur-reveal) var(--ease-out), translate var(--dur-reveal) var(--ease-out);
  }
  .js .reveal.is-visible { opacity: 1; translate: 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================== RESPONSIVE ============================= */
@media (max-width: 1080px) {
  .footer__top { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer__brand { grid-column: 1 / -1; }
}

/* Phones: the download CTA takes the prime nav slot; socials live in the footer */
@media (max-width: 719px) {
  .nav .icon-btn { display: none; }
  .nav__cta { margin-right: var(--s-2); padding: 0 14px; }
}

@media (max-width: 640px) {
  :root { --fs-small: 1rem; --section-y: 72px; --nav-h: 56px; }
  .nav__brand img { height: 36px; }
  .store-row { width: 100%; justify-content: center; }
  .store-btn { flex: 1 1 0; min-width: 0; justify-content: center; padding: 0 var(--s-3); gap: 10px; }
  .store-btn__name { font-size: 1.0625rem; }
  .logo-chip { width: 32px; height: 32px; padding: 4px; border-radius: 9px; }
  .logo-chip--wordmark { width: 64px; padding: 4px 6px; }
  .footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5); }
  .footer__col:last-child { grid-column: 1 / -1; }
}

@media (max-width: 359px) {
  .store-btn { flex-basis: 100%; }
  .nav__actions { gap: 0; }
  .lang { margin-left: 0; }
  .nav__brand img { height: 30px; }
  .nav__cta { padding: 0 12px; }
}

/* ============================== PRINT ================================== */
@media print {
  .nav { position: static; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .nav__actions, .skip-link, .footer__wordmark { display: none; }
  .js .reveal { opacity: 1 !important; translate: none !important; }
  body { overflow: visible; }
}