/*
 * GENERATED FILE — do not edit.
 * Built by apps/landing/scripts/build.mjs from:
 *   - packages/ui-tokens/src/{fonts.css, colors.css, scales.css, theme.css, base.css}
 *   - apps/landing/src/styles.css
 */

/* ===== ui-tokens/fonts.css ===== */
/* ==========================================================================
   Dongaro — Self-hosted Persian fonts
   --------------------------------------------------------------------------
   WHY THESE ARE SELF-HOSTED AND NOT LOADED FROM A CDN:
   Our users are in Iran, where foreign font CDNs (Google Fonts included) are
   unreliable and sometimes blocked outright. Loading fonts from an external
   host would degrade the experience for exactly the users this app is for, so
   every font file below is served from our own origin.

   Files live in `packages/ui-tokens/src/fonts/` so that both `apps/pwa` and
   `apps/landing` reference ONE copy instead of duplicating the binaries.

   - Vazirmatn  -> body text  (weights 400/500/600/700)
   - Yekan Bakh -> wordmark + compact "دُ" mark (weights 400/600/700)

   The body face is the STANDARD Vazirmatn, not the "Farsi-Digits" variant the
   release also ships. That variant draws Latin digits with Persian glyphs at
   the font level, which would fight the app's own conversion (spec §5 says
   digits are converted in JS, so a raw Latin value stays Latin on purpose —
   e.g. the value an input actually submits).

   `font-display: swap` is deliberate: Persian text must never be invisible
   while a font loads (FOIT). These files are same-origin and small, so the
   swap window is short and the reliability win matters more than the shift.
   ========================================================================== */

/* ---------- Vazirmatn (body text) ---------- */

@font-face {
  font-family: "Vazirmatn";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("./fonts/vazirmatn-Regular.woff2") format("woff2");
}

@font-face {
  font-family: "Vazirmatn";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("./fonts/vazirmatn-Medium.woff2") format("woff2");
}

@font-face {
  font-family: "Vazirmatn";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("./fonts/vazirmatn-SemiBold.woff2") format("woff2");
}

@font-face {
  font-family: "Vazirmatn";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("./fonts/vazirmatn-Bold.woff2") format("woff2");
}

/* ---------- Yekan Bakh (wordmark + compact mark) ---------- */

@font-face {
  font-family: "Yekan Bakh";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("./fonts/yekan-bakh-Regular.woff2") format("woff2");
}

@font-face {
  font-family: "Yekan Bakh";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("./fonts/yekan-bakh-SemiBold.woff2") format("woff2");
}

@font-face {
  font-family: "Yekan Bakh";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("./fonts/yekan-bakh-Bold.woff2") format("woff2");
}

:root {
  --font-body: "Vazirmatn", "Segoe UI", Tahoma, system-ui, sans-serif;
  --font-wordmark: "Yekan Bakh", "Vazirmatn", "Segoe UI", Tahoma, system-ui, sans-serif;
}

/* ===== ui-tokens/colors.css ===== */
/* ==========================================================================
   Dongaro — Color tokens
   --------------------------------------------------------------------------
   The palette below is the APPROVED palette from the frontend spec §4.
   Every hex value is exactly as specified — nothing added, nothing altered.

   The spec also requires that each primary/Pro/semantic color carry a
   `-foreground` companion (the readable text/icon color to place ON that
   color). The spec leaves those values to implementation, so they are chosen
   here as the higher-contrast of the two spec neutrals — #FFFFFF vs the
   dark ink #211D18. See the report for the measured ratios.

   Naming: the spec's kebab-case token names are kept verbatim so the spec and
   the code stay 1:1 greppable. `balance-debt` deliberately stays a distinct
   token from `destructive` — being owed money is not an error state.
   ========================================================================== */

:root {
  /* ---------- Light theme (default) ---------- */
  --background: #fdfbf8;
  --surface: #ffffff;
  --surface-secondary: #f6f3ef;
  --border: #e8e3dc;

  --text-primary: #211d18;
  --text-secondary: #726b62;
  --text-muted: #a39c90;

  --primary: #0f9b8e;
  --primary-hover: #0c8074;
  --premium: #7c5cfc;
  --success: #1ba672;
  --warning: #e8a33d;
  --destructive: #e1483d;
  --balance-debt: #e0507a;

  /* Foregrounds — text/icons placed ON the colors above. */
  --primary-foreground: #211d18;
  --premium-foreground: #ffffff;
  --success-foreground: #211d18;
  --warning-foreground: #211d18;
  --destructive-foreground: #211d18;
  --balance-debt-foreground: #211d18;

  /* Text on the plain page/card backgrounds. */
  --background-foreground: #211d18;
  --surface-foreground: #211d18;
  --surface-secondary-foreground: #211d18;
}

/* ---------- Dark theme ---------- */
/* Applied by the theme system (see theme.css / the inline boot script).
   `[data-theme="dark"]` is the explicit user choice; the media query covers
   the OS-preference default and is neutralised once a choice is stored. */
[data-theme="dark"] {
  --background: #121110;
  --surface: #1b1917;
  --surface-secondary: #232019;
  --border: #322d27;

  --text-primary: #f5f1ea;
  --text-secondary: #b8b0a4;
  --text-muted: #7d766c;

  --primary: #3fccb8;
  --primary-hover: #56dfc9;
  --premium: #a78bfa;
  --success: #34c98d;
  --warning: #f0b542;
  --destructive: #f0645a;
  --balance-debt: #f1638a;

  /* In dark theme every accent is light enough that dark ink wins. */
  --primary-foreground: #211d18;
  --premium-foreground: #211d18;
  --success-foreground: #211d18;
  --warning-foreground: #211d18;
  --destructive-foreground: #211d18;
  --balance-debt-foreground: #211d18;

  --background-foreground: #f5f1ea;
  --surface-foreground: #f5f1ea;
  --surface-secondary-foreground: #f5f1ea;
}


/* ===== ui-tokens/scales.css ===== */
/* ==========================================================================
   Dongaro — Typography, spacing, radius, elevation, motion scales
   --------------------------------------------------------------------------
   Proposed in Phase 0 (the spec left these open; §4 said "determined in
   Phase 0"). Direction per spec §4: premium, "alive", mobile-first.

   Typography notes:
   - Persian text needs more vertical room than Latin: ascenders, deep
     descenders (ی، ج) and diacritics (the damma in «دُ») all collide at tight
     line-heights. Line-heights below are deliberately generous.
   - 16px base is not arbitrary: inputs below 16px trigger auto-zoom on focus
     in mobile Safari, which would make the PWA feel broken on iOS.
   - Scale is roughly a 1.2 (minor third) ratio, widening at display sizes.

   Naming: `--font-size-*` rather than `--text-*` on purpose — Tailwind v4
   reserves the `--text-*` namespace for font-size utilities, and the spec's
   color tokens already use names like `--text-primary`. Keeping the two
   apart avoids a silent collision.
   ========================================================================== */

:root {
  /* ---------- Font sizes (rem @ 16px root) ---------- */
  --font-size-xs: 0.75rem;    /* 12px — badges, tiny labels            */
  --font-size-sm: 0.875rem;   /* 14px — secondary text, meta           */
  --font-size-base: 1rem;     /* 16px — body                           */
  --font-size-lg: 1.125rem;   /* 18px — lead paragraph                 */
  --font-size-xl: 1.25rem;    /* 20px — card titles (h3)               */
  --font-size-2xl: 1.5rem;    /* 24px — section headings (h2)          */
  --font-size-3xl: 1.875rem;  /* 30px — page title (h1)                */
  --font-size-4xl: 2.25rem;   /* 36px — landing hero                   */
  --font-size-5xl: 3rem;      /* 48px — landing display                */

  /* ---------- Line heights (paired to the sizes above) ---------- */
  --line-height-xs: 1.6;      /* 19.2px */
  --line-height-sm: 1.65;     /* 23.1px */
  --line-height-base: 1.75;   /* 28px — generous on purpose for Persian */
  --line-height-lg: 1.6;      /* 28.8px */
  --line-height-xl: 1.5;      /* 30px   */
  --line-height-2xl: 1.4;     /* 33.6px */
  --line-height-3xl: 1.3;     /* 39px   */
  --line-height-4xl: 1.2;     /* 43.2px */
  --line-height-5xl: 1.15;    /* 55.2px */

  /* ---------- Font weights ---------- */
  /* Only weights actually shipped in fonts.css — don't reference others. */
  --font-weight-regular: 400;
  --font-weight-medium: 500;   /* Vazirmatn only — Yekan Bakh has no 500 */
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* ---------- Letter spacing ---------- */
  /* Persian is a connected script; tracking is far more subtle than Latin.
     Negative tracking is never applied to Persian text. */
  --letter-spacing-tight: -0.01em;  /* large Latin-ish numerals only */
  --letter-spacing-normal: 0;
  --letter-spacing-wide: 0.02em;    /* all-caps Latin labels only    */

  /* ---------- Spacing (4px base grid) ---------- */
  --space-0: 0;
  --space-1: 0.25rem;   /* 4px  */
  --space-2: 0.5rem;    /* 8px  */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-5: 1.25rem;   /* 20px */
  --space-6: 1.5rem;    /* 24px */
  --space-8: 2rem;      /* 32px */
  --space-10: 2.5rem;   /* 40px */
  --space-12: 3rem;     /* 48px */
  --space-16: 4rem;     /* 64px */
  --space-20: 5rem;     /* 80px */
  --space-24: 6rem;     /* 96px */

  /* Semantic spacing — keeps page rhythm consistent across screens. */
  --space-gutter: var(--space-4);        /* page side padding, mobile */
  --space-gutter-lg: var(--space-6);     /* page side padding, ≥768px */
  --space-section: var(--space-6);       /* between page sections     */
  --space-stack: var(--space-3);         /* between stacked form rows */
  --space-inline: var(--space-2);        /* between inline items      */

  /* ---------- Border radius ---------- */
  /* Soft and rounded for the "friendly but premium" feel — never pill-shaped
     for cards (that reads as toy-like), pill reserved for chips/avatars. */
  --radius-xs: 0.25rem;   /* 4px  — tiny chips, checkbox inner  */
  --radius-sm: 0.5rem;    /* 8px  — badges, small controls      */
  --radius-md: 0.75rem;   /* 12px — inputs, buttons             */
  --radius-lg: 1rem;      /* 16px — cards                       */
  --radius-xl: 1.25rem;   /* 20px — sheets, modals              */
  --radius-2xl: 1.75rem;  /* 28px — hero panels                 */
  --radius-full: 9999px;  /* pills, avatars, tab indicators     */

  /* ---------- Elevation ---------- */
  /* Warm-tinted shadows (using the warm ink hue, not pure black) so they sit
     naturally on the warm backgrounds instead of looking grey/dirty. */
  --shadow-xs: 0 1px 2px 0 rgb(33 29 24 / 0.04);
  --shadow-sm: 0 1px 3px 0 rgb(33 29 24 / 0.06), 0 1px 2px -1px rgb(33 29 24 / 0.06);
  --shadow-md: 0 4px 12px -2px rgb(33 29 24 / 0.08), 0 2px 4px -2px rgb(33 29 24 / 0.05);
  --shadow-lg: 0 12px 28px -6px rgb(33 29 24 / 0.12), 0 4px 10px -4px rgb(33 29 24 / 0.07);
  --shadow-xl: 0 24px 48px -12px rgb(33 29 24 / 0.18);

  /* ---------- Motion ---------- */
  /* Spec §4 asks for micro-interactions + smooth page transitions. */
  --duration-instant: 100ms;  /* checkbox/switch flip        */
  --duration-fast: 160ms;     /* hover/press feedback        */
  --duration-base: 240ms;     /* the default for most things */
  --duration-slow: 360ms;     /* sheets, modals, page change */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);      /* enter + move */
  --ease-decelerate: cubic-bezier(0, 0, 0, 1);      /* enter only   */
  --ease-accelerate: cubic-bezier(0.3, 0, 1, 1);    /* exit only    */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* playful pop  */

  /* ---------- Layout ---------- */
  --content-max-width: 28rem;   /* 448px — mobile-first reading column */
  --content-max-width-lg: 40rem;
}

[data-theme="dark"] {
  /* Dark surfaces need deeper, more opaque shadows — a subtle warm shadow
     that reads well on cream disappears entirely against #121110. */
  --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.3);
  --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.4), 0 1px 2px -1px rgb(0 0 0 / 0.3);
  --shadow-md: 0 4px 12px -2px rgb(0 0 0 / 0.45), 0 2px 4px -2px rgb(0 0 0 / 0.3);
  --shadow-lg: 0 12px 28px -6px rgb(0 0 0 / 0.55), 0 4px 10px -4px rgb(0 0 0 / 0.4);
  --shadow-xl: 0 24px 48px -12px rgb(0 0 0 / 0.7);
}

/* Respect users who ask for less motion (accessibility). */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-instant: 1ms;
    --duration-fast: 1ms;
    --duration-base: 1ms;
    --duration-slow: 1ms;
  }
}

/* ===== ui-tokens/theme.css ===== */
/* ==========================================================================
   Dongaro — Theme resolution
   --------------------------------------------------------------------------
   HOW THE THEME IS DECIDED (per spec §4):

     1. Default  -> the OS/browser `prefers-color-scheme`.
     2. Once the user manually toggles, their explicit choice is written to
        `localStorage["dongaro-theme"]` and ALWAYS wins afterwards, ignoring
        the system preference forever after.

   The resolution itself happens in a tiny synchronous inline script in each
   app's `index.html` (see `themeBootScript` in ./theme.js), which runs in
   <head> BEFORE first paint and sets `data-theme="light|dark"` on <html>.
   That is what prevents a flash of the wrong theme — if we waited for React
   to hydrate, the user would see a light flash on every dark-mode load.

   Because the script always resolves to a concrete value, the dark tokens
   only ever need to be declared once, under `[data-theme="dark"]` (see
   ./colors.css and ./scales.css). No duplicated dark block behind a media
   query, so there is exactly one place to edit a color.

   No-JS fallback: `:root` light tokens apply. Acceptable — the PWA cannot
   function without JS anyway.

   SHARING BETWEEN APPS: landing (dongaro.com) and the PWA (dongaro.com/app)
   are the same origin, so `localStorage` is shared by the browser itself.
   No cross-app sync mechanism exists or is needed (spec §4).

   NOTE: scripts must reference the key via `THEME_STORAGE_KEY` from
   ./theme.js rather than retyping the literal, or the string will drift.
   ========================================================================== */

/* Tells the browser which native UI to render — scrollbars, form controls,
   the date picker, and autofill styling all follow this. Without it, a
   dark-themed page still shows a bright white scrollbar. */
:root,
[data-theme="light"] {
  color-scheme: light;
}

[data-theme="dark"] {
  color-scheme: dark;
}

/* Smooth the switch when the user toggles. Kept to color-only properties so
   it cannot interfere with layout or transform animations. The `:not()` on
   the boot-time class means the very first paint is instant rather than
   animating from light to dark on every page load. */
html:not(.theme-boot) body {
  transition:
    background-color var(--duration-base) var(--ease-standard),
    color var(--duration-base) var(--ease-standard);
}

/* ===== ui-tokens/base.css ===== */
/* ==========================================================================
   Dongaro — Base / reset layer
   --------------------------------------------------------------------------
   Minimal on purpose: Tailwind's preflight does the heavy lifting inside the
   PWA. This layer covers what preflight does NOT do, and is also what the
   framework-less landing page relies on (it has no Tailwind).
   ========================================================================== */

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

html {
  /* Persian text at small sizes benefits from a slightly larger base, but we
     keep 16px so rem math in scales.css stays predictable. */
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100dvh;
  background-color: var(--background);
  color: var(--text-primary);

  /* Vazirmatn is the body face (spec §5). The fallback stack matters: before
     the self-hosted font finishes loading, Tahoma/Segoe UI still render
     Persian correctly, so there is no broken intermediate state. */
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  font-weight: var(--font-weight-regular);

  /* Persian is a connected, cursive script. Subpixel/grayscale AA choice
     noticeably affects how clean the joins look on the warm backgrounds. */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;

  /* A word wider than the screen — a pasted link, a name typed without
     spaces — breaks wherever it must instead of pushing the page sideways
     (spec §19.7). `break-word`, NOT `anywhere`: `anywhere` also drops every
     word's min-content width to one letter, so any flex item without a fixed
     width — a button beside a text block — shrank until its own label broke
     mid-word («نص / ب»). A container holding user text that must shrink
     below its longest word gets `min-width: 0` (flex) or `minmax(0, 1fr)`
     (grid) instead. Ordinary text still breaks only between words. */
  overflow-wrap: break-word;
}

/* Persian numerals are rendered by converting the digits in JS (see
   shared-logic's `toPersianDigits`), NOT by CSS `font-variant-numeric`, which
   does not switch to the extended Arabic-Indic range. */

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-2xl);
  /* Persian headings should not inherit the tight tracking Latin headings use. */
  letter-spacing: var(--letter-spacing-normal);
}

p {
  margin: 0;
}

a {
  color: var(--primary);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-standard);
}

a:hover {
  color: var(--primary-hover);
}

/* Focus: spec §4 asks for designed focus states, not browser defaults.
   `:focus-visible` keeps the ring off mouse clicks but keeps it for keyboard
   navigation, which is the accessible behaviour. */
:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

:focus:not(:focus-visible) {
  outline: none;
}

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

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

/* iOS renders form controls with its own styling unless told otherwise. */
button,
input,
select,
textarea {
  -webkit-appearance: none;
  appearance: none;
}

/* Below 16px, iOS Safari auto-zooms the viewport on input focus, which makes
   a mobile-first PWA feel broken. Enforced here so no component can regress it. */
input,
select,
textarea {
  font-size: max(1rem, var(--font-size-base));
}

/* The wordmark / compact "دُ" mark (spec §3). */
.font-wordmark {
  font-family: var(--font-wordmark);
  font-weight: var(--font-weight-bold);
}

/* Screen-reader-only, used for accessible labels on icon-only controls. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* ===== apps/landing/src/styles.css ===== */
/* ==========================================================================
   Dongaro landing — page styles
   --------------------------------------------------------------------------
   The design tokens themselves are NOT defined here. The build inlines the
   shared `@dongaro/ui-tokens` CSS ahead of this file, so colors/fonts/scales
   are identical to the PWA by construction rather than by being copied.

   This file therefore only contains landing-specific layout and components.
   Speaks plain CSS on purpose — the landing has no framework and no bundler
   (spec §1), and adding a build step here would defeat that decision.
   ========================================================================== */

:root {
  /* The shared `--content-max-width-lg` (40rem) is the PWA's reading column.
     A marketing page needs a wider canvas for its two-column hero and card
     grids, so the page shell gets its own width here rather than widening a
     token the app also consumes. */
  --landing-max-width: 72rem;
  --landing-max-width-narrow: 48rem;
  --header-height: 4rem;
}

/* ---------- Page scaffolding ---------- */

/* Anchor targets must clear the sticky header, or the heading lands underneath it. */
[id] {
  scroll-margin-block-start: calc(var(--header-height) + var(--space-4));
}

.skip-link {
  position: absolute;
  inset-block-start: var(--space-2);
  inset-inline-start: var(--space-2);
  z-index: 100;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  background-color: var(--surface);
  color: var(--text-primary);
  box-shadow: var(--shadow-md);
  transform: translateY(-200%);
  transition: transform var(--duration-fast) var(--ease-standard);
}

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

/* ---------- Reveal on scroll ----------
   The hidden state is scoped to a class that `main.js` puts on <html>, so with
   JavaScript disabled — or when the user asked for reduced motion — every
   section is simply visible instead of stuck at opacity 0. */

.reveal-enabled .reveal {
  opacity: 0;
  transform: translateY(0.75rem);
  transition:
    opacity var(--duration-slow) var(--ease-decelerate),
    transform var(--duration-slow) var(--ease-decelerate);
}

.reveal-enabled .reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* ---------- Header ---------- */

.site-header {
  position: sticky;
  inset-block-start: 0;
  z-index: 50;
  background-color: var(--background);
  border-block-end: 1px solid transparent;
  transition:
    border-color var(--duration-base) var(--ease-standard),
    box-shadow var(--duration-base) var(--ease-standard);
}

/* Set by main.js once the page is scrolled: the header only earns a border and
   a shadow when there is content passing beneath it. */
.site-header.is-stuck {
  border-block-end-color: var(--border);
  box-shadow: var(--shadow-sm);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);

  max-inline-size: var(--landing-max-width);
  margin-inline: auto;
  min-block-size: var(--header-height);
  padding-inline: var(--space-gutter);
}

.site-header__brand {
  text-decoration: none;
  flex-shrink: 0;
}

.site-header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* Hidden on small screens: the page is a single scroll, so the nav is a
   convenience on desktop rather than the only way to reach a section. */
.site-nav {
  display: none;
  gap: var(--space-6);
}

.site-nav a {
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
}

.site-nav a:hover {
  color: var(--text-primary);
}

.wordmark {
  font-family: var(--font-wordmark);
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  /* The brand colour, like the PWA's app bar and auth screens (frontend spec
     §12.8) — NOT --text-primary, which is the body-text colour despite the name. */
  color: var(--primary);
}

/* ---------- Theme toggle ---------- */

.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 2.5rem;
  block-size: 2.5rem;

  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  background-color: var(--surface);
  color: var(--text-primary);
  box-shadow: var(--shadow-sm);
  cursor: pointer;

  transition:
    background-color var(--duration-fast) var(--ease-standard),
    transform var(--duration-fast) var(--ease-standard);
}

.theme-toggle:hover {
  background-color: var(--surface-secondary);
}

.theme-toggle:active {
  transform: scale(0.95);
}

/* Only one glyph shows at a time; the inactive one is removed from the
   accessibility tree because the button carries its own aria-label. */
.theme-toggle__sun,
.theme-toggle__moon {
  line-height: 1;
  font-size: var(--font-size-lg);
}

[data-theme='dark'] .theme-toggle__sun {
  display: none;
}

[data-theme='light'] .theme-toggle__moon,
:root:not([data-theme='dark']) .theme-toggle__moon {
  display: none;
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-block-size: 2.75rem; /* 44px — comfortable mobile touch target */
  padding-block: var(--space-2);
  padding-inline: var(--space-5);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
  cursor: pointer;

  transition:
    background-color var(--duration-fast) var(--ease-standard),
    color var(--duration-fast) var(--ease-standard),
    transform var(--duration-fast) var(--ease-standard),
    box-shadow var(--duration-fast) var(--ease-standard);
}

.btn:active {
  transform: translateY(1px);
}

.btn--sm {
  min-block-size: 2.25rem;
  padding-inline: var(--space-4);
  font-size: var(--font-size-sm);
}

.btn--block {
  display: flex;
  inline-size: 100%;
}

.btn--primary {
  background-color: var(--primary);
  color: var(--primary-foreground);
  box-shadow: var(--shadow-sm);
}

.btn--primary:hover {
  background-color: var(--primary-hover);
  color: var(--primary-foreground);
  box-shadow: var(--shadow-md);
}

.btn--premium {
  background-color: var(--premium);
  color: var(--premium-foreground);
  box-shadow: var(--shadow-sm);
}

.btn--premium:hover {
  background-color: var(--premium);
  color: var(--premium-foreground);
  box-shadow: var(--shadow-md);
  filter: brightness(1.08);
}

.btn--ghost {
  background-color: transparent;
  border-color: var(--border);
  color: var(--text-primary);
}

.btn--ghost:hover {
  background-color: var(--surface-secondary);
  color: var(--text-primary);
}

/* ---------- Shared section furniture ---------- */

.eyebrow {
  display: inline-block;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  background-color: var(--surface-secondary);
  color: var(--text-secondary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
}

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

.section--alt {
  background-color: var(--surface-secondary);
}

.section__inner {
  max-inline-size: var(--landing-max-width);
  margin-inline: auto;
  padding-inline: var(--space-gutter);
}

.section__inner--narrow {
  max-inline-size: var(--landing-max-width-narrow);
}

.section__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  margin-block-end: var(--space-10);
}

.section__title {
  font-size: var(--font-size-2xl);
  line-height: var(--line-height-2xl);
  color: var(--text-primary);
}

.section__lead {
  color: var(--text-secondary);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  max-inline-size: 38rem;
}

/* ---------- Hero ---------- */

.hero {
  /* Flat color first so the page still looks intentional in a browser without
     `color-mix()`; the tinted wash is a progressive enhancement on top. */
  background-color: var(--background);
  background-image:
    radial-gradient(
      ellipse 60rem 32rem at 80% -10%,
      color-mix(in srgb, var(--primary) 14%, transparent),
      transparent 70%
    ),
    radial-gradient(
      ellipse 40rem 24rem at 10% 0%,
      color-mix(in srgb, var(--premium) 8%, transparent),
      transparent 70%
    );
  border-block-end: 1px solid var(--border);
}

.hero__inner {
  max-inline-size: var(--landing-max-width);
  margin-inline: auto;
  padding: var(--space-12) var(--space-gutter) var(--space-16);

  display: grid;
  gap: var(--space-12);
  align-items: center;
}

.hero__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-5);
}

.hero__title {
  font-size: var(--font-size-4xl);
  line-height: var(--line-height-4xl);
  color: var(--text-primary);
}

.hero__lead {
  color: var(--text-secondary);
  font-size: var(--font-size-lg);
  line-height: var(--line-height-lg);
  max-inline-size: 34rem;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-block-start: var(--space-2);
}

.hero__trust {
  /* One item per line on every screen — on desktop the list also fills some
     of the height the product mock adds beside it. */
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--text-muted);
  font-size: var(--font-size-sm);
}

.hero__trust li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.hero__trust li::before {
  content: '';
  inline-size: 0.375rem;
  block-size: 0.375rem;
  border-radius: var(--radius-full);
  background-color: var(--primary);
  flex-shrink: 0;
}

/* ---------- How-it-works video link (opens #video-dialog) ---------- */

.video-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  min-block-size: 2.75rem;
  padding-block: var(--space-1);
  padding-inline: var(--space-1) var(--space-4);
  border-radius: var(--radius-full);
  color: var(--text-primary);
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
  transition: background-color var(--duration-fast) var(--ease-standard);
}

.video-link:hover {
  background-color: var(--surface-secondary);
  color: var(--text-primary);
}

.video-link__play {
  display: grid;
  place-items: center;
  inline-size: 2.5rem;
  block-size: 2.5rem;
  border-radius: var(--radius-full);
  background-color: var(--primary);
  color: var(--primary-foreground);
  box-shadow: var(--shadow-sm);
  flex-shrink: 0;
  transition: transform var(--duration-fast) var(--ease-standard);
}

.video-link:hover .video-link__play {
  transform: scale(1.06);
}

/* A play triangle points right in every language — media controls aren't mirrored in RTL. */
.video-link__play svg {
  inline-size: 1.25rem;
  block-size: 1.25rem;
  fill: currentColor;
}

.video-link__time {
  color: var(--text-muted);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-regular);
}

/* The feature card's link: a smaller button, at the card's foot. */
.video-link--small {
  min-block-size: 2.25rem;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
}

/* One line, even in a phone-wide card. */
.video-link--small .video-link__text,
.video-link--small .video-link__time {
  white-space: nowrap;
}

.video-link--small .video-link__play {
  inline-size: 2rem;
  block-size: 2rem;
}

.video-link--small .video-link__play svg {
  inline-size: 1rem;
  block-size: 1rem;
}

.feature__video {
  align-self: flex-start;
  margin-block-start: auto;
  margin-inline-start: calc(-1 * var(--space-1));
}

/* The Pro card's link, under its currencies line: on a line of its own. */
.plan__video {
  display: flex;
  inline-size: fit-content;
  margin-block-start: var(--space-2);
}

/* ---------- Hero product mock ---------- */

.hero__visual {
  display: flex;
  justify-content: center;
}

/* A slice of the PWA's group page (frontend spec §13) — kept visually close
   to apps/pwa/src/styles/app.css (.ghero, .balstrip, .seg, .blist, .brow,
   .bline, .avatar.is-pro, .actions) but written here, since the landing does
   not load the app's stylesheet. When the app's group page changes look,
   update this too. */
.mock {
  inline-size: 100%;
  max-inline-size: 22rem;
  padding: var(--space-5) var(--space-4) var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-2xl);
  background-color: var(--background);
  box-shadow: var(--shadow-xl);

  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.mock__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  text-align: center;
}

/* The group's photo, as the app's large group tile shows it (.gtile--lg). */
.mock__tile {
  inline-size: 4rem;
  block-size: 4rem;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  object-fit: cover;
}

.mock__title {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--text-primary);
}

.mock__meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
}

.mock__chip {
  padding: 0.125rem var(--space-3);
  border-radius: var(--radius-full);
  background-color: color-mix(in srgb, #2f7fd0 14%, var(--surface));
  color: var(--text-primary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
}

.mock__strip {
  display: flex;
  flex-direction: column;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background-color: var(--surface);
  box-shadow: var(--shadow-sm);
}

.mock__strip-label {
  color: var(--text-secondary);
  font-size: var(--font-size-xs);
}

.mock__strip-amt {
  color: var(--success);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
}

.mock__strip-amt small {
  font-size: var(--font-size-xs);
}

.mock__seg {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding: 0.25rem;
  border-radius: var(--radius-full);
  background-color: var(--surface-secondary);
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  text-align: center;
}

.mock__seg span {
  padding-block: var(--space-2);
  border-radius: var(--radius-full);
}

.mock__seg .is-on {
  background-color: var(--surface);
  color: var(--text-primary);
  box-shadow: var(--shadow-sm);
}

.mock__list {
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background-color: var(--surface);
  overflow: hidden;
}

.mock__row + .mock__row {
  border-block-start: 1px solid var(--border);
}

.mock__row-head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
}

.mock__row.is-open {
  padding-block-end: var(--space-2);
}

.mock__avatar {
  inline-size: 2.25rem;
  block-size: 2.25rem;
  flex-shrink: 0;
  border-radius: var(--radius-full);
  background-color: var(--surface-secondary);
  background-size: cover;
  background-position: center;
}

/* The app-wide Pro ring (frontend spec §13.2). */
.mock__avatar.is-pro {
  box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--premium);
}

.mock__name {
  flex-grow: 1;
  color: var(--text-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}

.mock__amt {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  white-space: nowrap;
}

.mock__amt small {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
}

/* Being owed money is not a success state and owing money is not an error —
   the palette keeps `balance-debt` deliberately separate from `destructive`
   (spec §4), and the landing must not blur that distinction. */
.mock__amt--owed {
  color: var(--success);
}

.mock__amt--owe {
  color: var(--balance-debt);
}

/* «از نیکا …» — the suggested payments under an open row (the app's .bline). */
.mock__line {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-block-start: var(--space-1);
  margin-inline: calc(var(--space-3) + 2.25rem + var(--space-3)) var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  background-color: var(--surface-secondary);
  font-size: var(--font-size-xs);
}

.mock__dir {
  display: grid;
  color: var(--text-muted);
}

.mock__dir svg {
  inline-size: 0.875rem;
  block-size: 0.875rem;
}

.mock__line-text {
  flex-grow: 1;
  color: var(--text-secondary);
}

.mock__line b {
  color: var(--text-primary);
}

.mock__actions {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-2);
}

.mock__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-block-size: 2.75rem;
  padding-inline: var(--space-4);
  border-radius: var(--radius-md);
  background-color: var(--primary);
  color: var(--primary-foreground);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  white-space: nowrap;
}

.mock__btn--outline {
  border: 1px solid var(--border);
  background-color: var(--surface);
  color: var(--text-primary);
}

/* ---------- Steps ---------- */

.steps {
  display: grid;
  gap: var(--space-5);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}

.step {
  position: relative;
  padding: var(--space-6);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background-color: var(--surface);
  box-shadow: var(--shadow-xs);

  display: flex;
  flex-direction: column;
  gap: var(--space-3);

  transition:
    transform var(--duration-base) var(--ease-standard),
    box-shadow var(--duration-base) var(--ease-standard);
}

.step:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.step__number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 2.25rem;
  block-size: 2.25rem;
  border-radius: var(--radius-full);
  background-color: var(--primary);
  color: var(--primary-foreground);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
}

.step__title {
  font-size: var(--font-size-xl);
  line-height: var(--line-height-xl);
  color: var(--text-primary);
}

.step__body {
  color: var(--text-secondary);
  line-height: var(--line-height-base);
}

/* ---------- Features ---------- */

.features {
  display: grid;
  gap: var(--space-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

.feature {
  padding: var(--space-6);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background-color: var(--surface);

  display: flex;
  flex-direction: column;
  gap: var(--space-3);

  transition:
    transform var(--duration-base) var(--ease-standard),
    box-shadow var(--duration-base) var(--ease-standard);
}

.feature:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.feature__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 2.75rem;
  block-size: 2.75rem;
  border-radius: var(--radius-md);
  background-color: var(--surface-secondary);
  color: var(--primary);
}

.feature__icon svg {
  inline-size: 1.5rem;
  block-size: 1.5rem;
}

.feature__title {
  font-size: var(--font-size-lg);
  line-height: var(--line-height-lg);
  color: var(--text-primary);
}

.feature__body {
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-base);
}

/* ---------- Plans ---------- */

.plans {
  display: grid;
  gap: var(--space-5);
  align-items: start;
}

.plan {
  position: relative;
  padding: var(--space-6);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background-color: var(--surface);
  box-shadow: var(--shadow-sm);

  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.plan--premium {
  border-color: var(--premium);
  box-shadow: var(--shadow-lg);
}

.plan__ribbon {
  position: absolute;
  inset-block-start: calc(var(--space-3) * -1);
  inset-inline-start: var(--space-6);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  background-color: var(--premium);
  color: var(--premium-foreground);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
}

.plan__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.plan__name {
  font-size: var(--font-size-xl);
  color: var(--text-primary);
}

.plan__price {
  color: var(--text-primary);
  font-size: var(--font-size-base);
}

.plan__price-value {
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-3xl);
}

.plan__price-period {
  color: var(--text-muted);
  font-size: var(--font-size-sm);
}

.plan__note {
  color: var(--text-muted);
  font-size: var(--font-size-sm);
}

.plan__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-sm);
  flex-grow: 1;
}

.plan__list li {
  position: relative;
  padding-inline-start: var(--space-6);
}

/* A check mark drawn from borders: no icon font, no extra SVG per row.
   The two strokes are PHYSICAL (left/bottom) on purpose — a check mark is the
   same shape in RTL as in LTR, so the logical properties would mirror it into
   a meaningless chevron on this very page. Only its placement flips, which is
   what `inset-inline-start` is for. */
.plan__list li::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0.45em;
  inline-size: 0.6rem;
  block-size: 0.35rem;
  border-left: 2px solid var(--success);
  border-bottom: 2px solid var(--success);
  transform: rotate(-45deg);
}

.plan__list-off {
  color: var(--text-muted);
}

/* The one "not included" row gets a dash instead of a check, so the list does
   not claim a limit is a feature. Qualified with `li` so it outweighs the
   rule above, which would otherwise win on specificity. */
.plan__list li.plan__list-off::before {
  inline-size: 0.7rem;
  block-size: 0;
  border-left: none;
  border-bottom-color: var(--text-muted);
  transform: none;
  inset-block-start: 0.75em;
}

.plan__fineprint {
  color: var(--text-muted);
  font-size: var(--font-size-xs);
  line-height: var(--line-height-sm);
}

/* ---------- FAQ ---------- */

.faq {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.faq__item {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background-color: var(--surface);
  overflow: hidden;
}

.faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  cursor: pointer;
  color: var(--text-primary);
  font-weight: var(--font-weight-semibold);
  list-style: none;
  transition: background-color var(--duration-fast) var(--ease-standard);
}

/* Safari renders its own disclosure triangle unless this is removed. */
.faq__question::-webkit-details-marker {
  display: none;
}

.faq__question:hover {
  background-color: var(--surface-secondary);
}

/* Physical borders, same reasoning as the plan check mark: a "points down"
   chevron must not mirror just because the page is RTL. */
.faq__question::after {
  content: '';
  inline-size: 0.5rem;
  block-size: 0.5rem;
  flex-shrink: 0;
  border-right: 2px solid var(--text-muted);
  border-bottom: 2px solid var(--text-muted);
  transform: rotate(45deg) translate(-0.15rem, -0.15rem);
  transition: transform var(--duration-fast) var(--ease-standard);
}

.faq__item[open] .faq__question::after {
  transform: rotate(225deg) translate(-0.15rem, -0.15rem);
}

.faq__answer {
  padding: 0 var(--space-5) var(--space-5);
  color: var(--text-secondary);
  line-height: var(--line-height-base);
}

/* ---------- Closing CTA ---------- */

.cta {
  padding-block: var(--space-16);
  background-color: var(--background);
}

.cta__inner {
  max-inline-size: var(--landing-max-width-narrow);
  margin-inline: auto;
  padding: var(--space-10) var(--space-6);
  border: 1px solid var(--border);
  border-radius: var(--radius-2xl);
  background-color: var(--surface);
  box-shadow: var(--shadow-lg);
  text-align: center;

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
}

.cta__title {
  font-size: var(--font-size-2xl);
  line-height: var(--line-height-2xl);
  color: var(--text-primary);
  max-inline-size: 30rem;
}

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

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

.site-footer {
  border-block-start: 1px solid var(--border);
  background-color: var(--surface-secondary);
}

.site-footer__inner {
  max-inline-size: var(--landing-max-width);
  margin-inline: auto;
  padding: var(--space-12) var(--space-gutter) var(--space-8);

  display: grid;
  gap: var(--space-8);
}

.site-footer__tagline {
  margin-block-start: var(--space-2);
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  max-inline-size: 22rem;
}

.site-footer__links {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  font-size: var(--font-size-sm);
}

.site-footer__links a {
  color: var(--text-secondary);
}

.site-footer__links a:hover {
  color: var(--primary);
}

.site-footer__contact-label {
  margin-block-end: var(--space-2);
  color: var(--text-muted);
  font-size: var(--font-size-xs);
}

.site-footer__contact a {
  font-size: var(--font-size-sm);
}

.site-footer__social {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-block-start: var(--space-3);
  color: var(--text-secondary);
}

.site-footer__social:hover {
  color: var(--primary);
}

.site-footer__social-icon {
  inline-size: 1.25rem;
  block-size: 1.25rem;
  flex: none;
  fill: #ed145b; /* Aparat's brand red */
}

.site-footer__trust {
  /* Reserves the seal's box so the footer doesn't jump when it loads. */
  min-block-size: 8.5rem;
}

.site-footer__trust img {
  inline-size: 7.5rem;
  block-size: auto;
}

.site-footer__legal {
  max-inline-size: var(--landing-max-width);
  margin-inline: auto;
  padding: var(--space-5) var(--space-gutter);
  border-block-start: 1px solid var(--border);
  color: var(--text-muted);
  font-size: var(--font-size-xs);
  text-align: center;
}

/* ---------- Legal pages (privacy / terms) ---------- */

.legal {
  max-inline-size: var(--landing-max-width-narrow);
  margin-inline: auto;
  padding: var(--space-12) var(--space-gutter) var(--space-16);
}

.legal__title {
  font-size: var(--font-size-3xl);
  line-height: var(--line-height-3xl);
  color: var(--text-primary);
}

.legal__updated {
  margin-block-start: var(--space-3);
  color: var(--text-muted);
  font-size: var(--font-size-sm);
}

.legal__body {
  margin-block-start: var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.legal__body h2 {
  margin-block-end: var(--space-3);
  font-size: var(--font-size-xl);
  line-height: var(--line-height-xl);
  color: var(--text-primary);
}

.legal__body p {
  color: var(--text-secondary);
  line-height: var(--line-height-base);
}

.legal__body p + p {
  margin-block-start: var(--space-3);
}

.legal__body ul {
  margin: var(--space-3) 0 0;
  padding-inline-start: var(--space-5);
  color: var(--text-secondary);
  line-height: var(--line-height-base);
}

.legal__body li + li {
  margin-block-start: var(--space-2);
}

.legal__back {
  margin-block-start: var(--space-10);
}

/* 404.html — any address that isn't on the site (spec §19.7). */
.notfound {
  text-align: center;
}
.notfound > p {
  margin-block-start: var(--space-3);
  color: var(--text-secondary);
}
.notfound__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
  margin-block-start: var(--space-8);
}

/* ---------- How-it-works video dialog ----------
   A native <dialog> opened with showModal(): the browser makes the rest of the
   page inert, keeps focus inside, and closes it on Esc. The video is 9:16, so
   it is sized by height and never wider than the screen. */

.video-dialog {
  padding: 0;
  border: 0;
  background: transparent;
  max-inline-size: none;
  max-block-size: none;
  overflow: visible;
}

.video-dialog::backdrop {
  background-color: rgb(18 17 16 / 0.85);
}

/* No page scrolling behind the open player. */
html:has(.video-dialog[open]) {
  overflow: hidden;
}

.video-dialog__frame {
  position: relative;
}

.video-dialog__video {
  display: block;
  block-size: min(88vh, calc((100vw - 2 * var(--space-4)) * 16 / 9));
  block-size: min(88dvh, calc((100vw - 2 * var(--space-4)) * 16 / 9));
  inline-size: auto;
  aspect-ratio: 9 / 16;
  border-radius: var(--radius-lg);
  background-color: #000;
  box-shadow: var(--shadow-xl);
}

.video-dialog__close {
  position: absolute;
  inset-block-start: var(--space-3);
  inset-inline-end: var(--space-3);
  display: grid;
  place-items: center;
  inline-size: 2.75rem;
  block-size: 2.75rem;
  padding: 0;
  border: 0;
  border-radius: var(--radius-full);
  background-color: rgb(18 17 16 / 0.6);
  color: #fff;
  cursor: pointer;
}

.video-dialog__close:hover {
  background-color: rgb(18 17 16 / 0.8);
}

.video-dialog__close svg {
  inline-size: 1.25rem;
  block-size: 1.25rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
}

/* The duration tokens drop to 1ms under prefers-reduced-motion, so this needs no media query of its own. */
.video-dialog[open] {
  animation: video-dialog-in var(--duration-base) var(--ease-decelerate);
}

.video-dialog[open]::backdrop {
  animation: video-dialog-fade var(--duration-base) var(--ease-decelerate);
}

@keyframes video-dialog-in {
  from {
    opacity: 0;
    transform: scale(0.96);
  }
}

@keyframes video-dialog-fade {
  from {
    opacity: 0;
  }
}

/* ==========================================================================
   Responsive — mobile-first, so these only widen the layout (spec §4:
   mobile is the design priority, desktop must simply work well).
   ========================================================================== */

@media (min-width: 48rem) {
  :root {
    --space-gutter: var(--space-gutter-lg);
  }

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

  .section__title {
    font-size: var(--font-size-3xl);
    line-height: var(--line-height-3xl);
  }

  .hero__title {
    font-size: var(--font-size-5xl);
    line-height: var(--line-height-5xl);
  }

  .steps,
  .plans {
    grid-template-columns: repeat(2, 1fr);
  }

  .features {
    grid-template-columns: repeat(2, 1fr);
  }

  .site-footer__inner {
    grid-template-columns: 2fr 1fr 1fr auto;
  }

  .site-footer__links {
    flex-direction: column;
  }

  .cta__title {
    font-size: var(--font-size-3xl);
    line-height: var(--line-height-3xl);
  }
}

@media (min-width: 64rem) {
  .site-nav {
    display: flex;
  }

  .hero__inner {
    grid-template-columns: 1.1fr 0.9fr;
    /* Top, not centre: the product mock is about twice as tall as the copy,
       and centring pushed the headline halfway down the screen. The small
       offset lines the headline up with the mock's group title. */
    align-items: start;
    padding-block: var(--space-12) var(--space-20);
  }

  .hero__content {
    padding-block-start: var(--space-8);
  }

  /* Desktop: the group's photo beside its name instead of above it, and
     tighter rows — the whole mock fits on an 800px-tall screen. */
  .mock__head {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    column-gap: var(--space-3);
    row-gap: var(--space-1);
    align-items: center;
    text-align: start;
  }

  .mock__tile {
    grid-row: span 2;
    inline-size: 3.5rem;
    block-size: 3.5rem;
  }

  .mock__title {
    align-self: end;
    font-size: var(--font-size-lg);
  }

  .mock__meta {
    align-self: start;
  }

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

  .steps {
    grid-template-columns: repeat(3, 1fr);
  }

  .features {
    grid-template-columns: repeat(3, 1fr);
  }

  .plans {
    max-inline-size: 56rem;
    margin-inline: auto;
  }
}

/* ==========================================================================
   Calculator — the public dong calculator page, /dong/ (frontend spec §27)
   --------------------------------------------------------------------------
   Ported from the approved mockup (apps/landing/mockups/dong.html). Every
   class is `calc-` prefixed because this stylesheet is shared by all landing
   pages. Owing money is `balance-debt`, never `destructive` (spec §4).
   ========================================================================== */

/* ---------- intro: short, so a phone reaches the calculator fast ---------- */

.calc-hero {
  padding-block: var(--space-8) var(--space-6);
}

.calc-hero__inner {
  max-inline-size: var(--landing-max-width);
  margin-inline: auto;
  padding-inline: var(--space-gutter);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.calc-hero__title {
  font-size: var(--font-size-3xl);
  line-height: var(--line-height-3xl);
  color: var(--text-primary);
}

.calc-hero__lead {
  color: var(--text-secondary);
  line-height: var(--line-height-base);
  max-inline-size: 40rem;
}

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

.calc-chips li {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.2rem 0.65rem;
  border-radius: var(--radius-full);
  background-color: var(--surface-secondary);
  color: var(--text-secondary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
}

.calc-chips svg {
  inline-size: 0.9rem;
  block-size: 0.9rem;
  flex-shrink: 0;
  color: var(--success);
}

/* ---------- the two panels ---------- */

.calc {
  max-inline-size: var(--landing-max-width);
  margin-inline: auto;
  padding-inline: var(--space-gutter);
  padding-block-end: var(--space-12);
  display: grid;
  gap: var(--space-5);
  align-items: start;
}

.calc-panel {
  min-inline-size: 0;
  padding: var(--space-5);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background-color: var(--surface);
  box-shadow: var(--shadow-sm);
}

.calc-panel__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  margin-block-end: var(--space-4);
}

.calc-panel__title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--text-primary);
}

.calc-link-btn {
  padding: 0;
  border: 0;
  background: none;
  color: var(--text-muted);
  font: inherit;
  font-size: var(--font-size-sm);
  cursor: pointer;
}

.calc-link-btn:hover {
  color: var(--text-primary);
  text-decoration: underline;
}

.calc-noscript {
  margin-block-start: var(--space-4);
  color: var(--text-secondary);
}

/* ---------- people rows ---------- */

/* The unit sits in the column header, not inside the field: inside, it cut
   million-Toman amounts off on a phone. */
.calc-people-head,
.calc-person {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) 2rem;
  column-gap: var(--space-2);
}

.calc-people-head {
  margin-block-end: var(--space-2);
  padding-inline: var(--space-1);
  color: var(--text-muted);
  font-size: var(--font-size-xs);
}

.calc-people {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.calc-person {
  grid-template-areas:
    'name amount remove'
    'shares shares .';
  align-items: center;
  row-gap: var(--space-2);
}

.calc-person__name {
  grid-area: name;
}

.calc-person__remove {
  grid-area: remove;
}

.calc-person__shares {
  grid-area: shares;
  display: none;
  align-items: center;
}

.calc--shares .calc-person__shares {
  display: flex;
}

.calc-field {
  inline-size: 100%;
  min-block-size: 2.75rem;
  padding-inline: var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background-color: var(--background);
  color: var(--text-primary);
  font: inherit;
  font-size: var(--font-size-base); /* 16px: Safari on iPhone zooms in on anything smaller */
  transition:
    border-color var(--duration-fast) var(--ease-standard),
    box-shadow var(--duration-fast) var(--ease-standard);
}

.calc-field::placeholder {
  color: var(--text-muted);
}

.calc-field:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--border);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 22%, transparent);
}

.calc-field--amount {
  grid-area: amount;
  font-weight: var(--font-weight-semibold);
}

.calc-icon-btn {
  display: grid;
  place-items: center;
  inline-size: 2rem;
  block-size: 2rem;
  border: 0;
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
}

.calc-icon-btn:hover:not(:disabled) {
  background-color: var(--surface-secondary);
  color: var(--text-primary);
}

.calc-icon-btn:disabled {
  opacity: 0.35;
  cursor: default;
}

.calc-icon-btn svg {
  inline-size: 1.1rem;
  block-size: 1.1rem;
}

/* Shares stepper: «+» on the start (right) side, as Persian apps usually do. */
.calc-stepper {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 0.15rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  background-color: var(--background);
}

.calc-stepper button {
  inline-size: 2rem;
  block-size: 2rem;
  border: 0;
  border-radius: var(--radius-full);
  background-color: var(--surface-secondary);
  color: var(--text-primary);
  font: inherit;
  font-size: var(--font-size-lg);
  line-height: 1;
  cursor: pointer;
}

.calc-stepper button:disabled {
  opacity: 0.35;
  cursor: default;
}

.calc-stepper output {
  min-inline-size: 4.5rem;
  text-align: center;
  color: var(--text-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}

.calc-person__hint {
  margin-inline-start: var(--space-2);
  color: var(--text-muted);
  font-size: var(--font-size-xs);
}

.calc-person:not(:first-child) .calc-person__hint {
  display: none;
}

.calc-add {
  inline-size: 100%;
  min-block-size: 2.75rem;
  margin-block-start: var(--space-3);
  border: 1px dashed var(--border);
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--primary);
  font: inherit;
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
}

.calc-add:hover:not(:disabled) {
  background-color: var(--surface-secondary);
}

.calc-add:disabled {
  opacity: 0.45;
  cursor: default;
}

/* «سهم‌ها مساوی نیست» switch */
.calc-switch-row {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  margin-block-start: var(--space-5);
  padding-block-start: var(--space-4);
  border-block-start: 1px solid var(--border);
  cursor: pointer;
}

.calc-switch-row input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.calc-switch {
  position: relative;
  flex-shrink: 0;
  inline-size: 2.6rem;
  block-size: 1.5rem;
  margin-block-start: 0.1rem;
  border-radius: var(--radius-full);
  background-color: var(--border);
  transition: background-color var(--duration-fast) var(--ease-standard);
}

.calc-switch::after {
  content: '';
  position: absolute;
  top: 0.15rem;
  inset-inline-start: 0.15rem;
  inline-size: 1.2rem;
  block-size: 1.2rem;
  border-radius: var(--radius-full);
  background-color: var(--surface);
  box-shadow: var(--shadow-xs);
  transition: inset-inline-start var(--duration-fast) var(--ease-standard);
}

.calc-switch-row input:checked + .calc-switch {
  background-color: var(--primary);
}

.calc-switch-row input:checked + .calc-switch::after {
  inset-inline-start: 1.25rem;
}

.calc-switch-row input:focus-visible + .calc-switch {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.calc-switch-row__text {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.calc-switch-row__title {
  color: var(--text-primary);
  font-weight: var(--font-weight-semibold);
}

.calc-switch-row__sub {
  color: var(--text-muted);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-base);
}

/* ---------- result ---------- */

.calc-empty {
  padding: var(--space-8) var(--space-4);
  color: var(--text-muted);
  line-height: var(--line-height-base);
  text-align: center;
}

.calc-empty svg {
  inline-size: 2.5rem;
  block-size: 2.5rem;
  margin-block-end: var(--space-2);
  opacity: 0.6;
}

.calc-totals {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
  margin-block-end: var(--space-5);
}

.calc-total {
  min-inline-size: 0;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg);
  background-color: var(--surface-secondary);
}

.calc-total__label {
  display: block;
  color: var(--text-muted);
  font-size: var(--font-size-xs);
}

.calc-total__value {
  display: block;
  color: var(--text-primary);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  white-space: nowrap;
}

.calc-total__value small,
.calc-transfer__amount small {
  color: var(--text-secondary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
}

.calc-subtitle {
  margin-block: var(--space-4) var(--space-2);
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
}

.calc-transfers {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.calc-transfer {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

.calc-transfer__who {
  flex: 1;
  min-inline-size: 0;
  color: var(--text-primary);
  line-height: var(--line-height-sm);
  overflow-wrap: anywhere;
}

.calc-transfer__who b {
  font-weight: var(--font-weight-bold);
}

.calc-transfer__amount {
  color: var(--text-primary);
  font-weight: var(--font-weight-bold);
  white-space: nowrap;
}

.calc-settled {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg);
  background-color: var(--surface-secondary);
  background-color: color-mix(in srgb, var(--success) 12%, transparent);
  color: var(--text-primary);
}

.calc-ledger {
  inline-size: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-sm);
}

.calc-ledger th {
  padding: 0 0 var(--space-2);
  color: var(--text-muted);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  text-align: start;
}

.calc-ledger td {
  padding-block: var(--space-2);
  border-block-start: 1px solid var(--border);
  color: var(--text-primary);
  white-space: nowrap;
}

.calc-ledger td:first-child {
  padding-inline-end: var(--space-2);
  white-space: normal;
  overflow-wrap: anywhere;
}

.calc-ledger th:not(:first-child),
.calc-ledger td:not(:first-child) {
  padding-inline-start: var(--space-2);
  text-align: end;
}

.calc-ledger small {
  display: block;
  font-size: 0.7rem;
  font-weight: var(--font-weight-medium);
}

.calc-ledger .is-owed {
  color: var(--success);
  font-weight: var(--font-weight-semibold);
}

.calc-ledger .is-owe {
  color: var(--balance-debt);
  font-weight: var(--font-weight-semibold);
}

.calc-ledger .is-even {
  color: var(--text-muted);
}

.calc-round-note {
  margin-block-start: var(--space-3);
  color: var(--text-muted);
  font-size: var(--font-size-xs);
  line-height: var(--line-height-base);
}

.calc-actions {
  display: flex;
  gap: var(--space-2);
  margin-block-start: var(--space-5);
}

.calc-actions .btn {
  flex: 1;
  gap: var(--space-2);
}

.calc-actions svg {
  inline-size: 1.1rem;
  block-size: 1.1rem;
}

.calc-preview {
  margin-block-start: var(--space-3);
}

.calc-preview summary {
  color: var(--text-muted);
  font-size: var(--font-size-xs);
  cursor: pointer;
}

.calc-preview pre {
  margin-block-start: var(--space-2);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  background-color: var(--surface-secondary);
  color: var(--text-secondary);
  font: inherit;
  font-size: var(--font-size-xs);
  line-height: var(--line-height-base);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* The hand-off to the app: a card under the result, never a popup. Flat
   colours first for browsers without color-mix(). */
.calc-app-card {
  margin-block-start: var(--space-5);
  padding: var(--space-5);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background-color: var(--surface-secondary);
  border-color: color-mix(in srgb, var(--primary) 30%, var(--border));
  background-color: color-mix(in srgb, var(--primary) 9%, var(--surface));
}

.calc-app-card__title {
  margin-block-end: var(--space-2);
  color: var(--text-primary);
  font-weight: var(--font-weight-bold);
}

.calc-app-card ul {
  margin: 0 0 var(--space-4);
  padding-inline-start: var(--space-5);
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-base);
}

.calc-app-card__fine {
  margin-block-start: var(--space-2);
  color: var(--text-muted);
  font-size: var(--font-size-xs);
  text-align: center;
}

.calc-toast {
  position: fixed;
  inset-inline: 0;
  bottom: calc(var(--space-6) + env(safe-area-inset-bottom, 0px));
  z-index: 60;
  inline-size: max-content;
  max-inline-size: calc(100% - 2 * var(--space-gutter));
  margin-inline: auto;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-full);
  background-color: var(--text-primary);
  color: var(--background);
  font-size: var(--font-size-sm);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  transform: translateY(0.5rem);
  transition:
    opacity var(--duration-base) var(--ease-standard),
    transform var(--duration-base) var(--ease-standard);
  pointer-events: none;
}

.calc-toast.is-on {
  opacity: 1;
  transform: none;
}

/* Phone only: shown while the result is off-screen (dong.js). */
.calc-jump {
  position: fixed;
  inset-inline: var(--space-gutter);
  bottom: calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
  z-index: 50;
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 0;
  border-radius: var(--radius-lg);
  background-color: var(--primary);
  color: var(--primary-foreground);
  font: inherit;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  box-shadow: var(--shadow-lg);
  cursor: pointer;
}

@media (max-width: 899px) {
  .calc-jump.is-on {
    display: flex;
  }

  /* Room under the bar, so the footer is never stuck behind it. */
  body.calc-has-jump {
    padding-block-end: 5rem;
  }
}

@media (min-width: 900px) {
  .calc {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  }

  .calc__result {
    position: sticky;
    top: calc(var(--header-height) + var(--space-4));
  }
}

/* ---------- how-to text ---------- */

.calc-prose p {
  max-inline-size: 42rem;
  margin-block-end: var(--space-3);
  color: var(--text-secondary);
  line-height: var(--line-height-base);
}

.calc-prose b,
.calc-example b {
  color: var(--text-primary);
}

.calc-prose--after {
  margin-block-start: var(--space-6);
}

.calc-example {
  margin-block-start: var(--space-5);
  padding: var(--space-5);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background-color: var(--surface);
  color: var(--text-secondary);
  line-height: var(--line-height-base);
}

.calc-example ol {
  margin: var(--space-2) 0 0;
  padding-inline-start: var(--space-5);
}

.calc-example li {
  margin-block-end: var(--space-2);
}