/* DueSoon Design System — global entry point.
   Consumers link THIS file only. Keep it a list of @import lines. */

/* DueSoon — Webfonts
   ONE typeface across the whole system: Hanken Grotesk — a disciplined humanist
   grotesque that stays warm, reads cleanly at small sizes for older eyes, and
   has excellent tabular figures (the timeline's amounts/dates are the star, and
   they use the SAME number typography in both light and dark themes).

   NOTE: Hanken Grotesk is a Google Fonts substitute — the DueSoon Flutter app
   ships system fonts only (no brand typeface in the repo yet). Swap the @import
   here if a brand face is chosen. */

/* cyrillic-ext */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/d9f12b8a-d3c5-4522-ae7c-72834b43a539.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* vietnamese */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/3f474c9d-1031-499e-9cc9-7cfff78d4983.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/e8d4e373-f14b-4d1d-97b5-d1470bc05208.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;
}
/* latin */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/bd8a2675-55f2-45bf-8059-a4c0de45f1f7.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;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/d9f12b8a-d3c5-4522-ae7c-72834b43a539.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* vietnamese */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/3f474c9d-1031-499e-9cc9-7cfff78d4983.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/e8d4e373-f14b-4d1d-97b5-d1470bc05208.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;
}
/* latin */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/bd8a2675-55f2-45bf-8059-a4c0de45f1f7.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;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/d9f12b8a-d3c5-4522-ae7c-72834b43a539.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* vietnamese */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/3f474c9d-1031-499e-9cc9-7cfff78d4983.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/e8d4e373-f14b-4d1d-97b5-d1470bc05208.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;
}
/* latin */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/bd8a2675-55f2-45bf-8059-a4c0de45f1f7.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;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/d9f12b8a-d3c5-4522-ae7c-72834b43a539.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* vietnamese */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/3f474c9d-1031-499e-9cc9-7cfff78d4983.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/e8d4e373-f14b-4d1d-97b5-d1470bc05208.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;
}
/* latin */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/bd8a2675-55f2-45bf-8059-a4c0de45f1f7.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;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("/assets/fonts/d9f12b8a-d3c5-4522-ae7c-72834b43a539.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* vietnamese */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("/assets/fonts/3f474c9d-1031-499e-9cc9-7cfff78d4983.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("/assets/fonts/e8d4e373-f14b-4d1d-97b5-d1470bc05208.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;
}
/* latin */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("/assets/fonts/bd8a2675-55f2-45bf-8059-a4c0de45f1f7.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;
}


/* DueSoon — Color tokens (FINAL identity: Petrol/Teal)
   ONE design language, TWO themes. :root = light (warm cream base, never
   clinical), `.dark` overrides only the color layer — same geometry, same type.

   The accent is ONE identity: deep petrol #0E5660 in light; in dark it shifts
   toward BLUE-teal (#4DB7C9) so the identity reads "teal", not "green", on the
   dark canvas.

   Every text / amount / date / urgency-ink role targets WCAG AA (≥4.5:1)
   against its surface in BOTH themes. 1:1 Flutter mapping:
   guidelines/color-tokens.html + guidelines/duesoon_color_scheme.dart. */

:root {
  /* ---- Reference scale (theme-independent) ---- */
  --petrol-900: #093e46;
  --petrol-700: #0e5660;
  --petrol-300: #4db7c9;
  --petrol-200: #6fccdc;

  /* ===== LIGHT THEME (default) ===== */

  /* Surfaces — warm cream paper */
  --surface-app: #f5f1e8;
  --surface-card: #ffffff;
  --surface-sunken: #eceae0;
  --surface-accent-soft: #e1ecec;

  /* Text */
  --text-primary: #1b201c;
  --text-secondary: #59635b;
  --text-tertiary: #8a938b;
  --text-on-accent: #ffffff;

  /* Accent — the single brand identity (petrol) */
  --accent: #0e5660;
  --accent-strong: #093e46;
  --accent-soft: #e1ecec;
  --accent-ink: #0e5660;

  /* Borders */
  --border: #e5e3da;
  --border-strong: #d2cfc4;

  /* Urgency — "olgun ama ölü değil": semantic + AA on white + their soft tint.
     soon = teal-GREEN, deliberately distinct from the petrol accent so
     "yaklaşan" reads as its own live state, not the brand color. */
  --urgency-overdue: #c0392b;
  --urgency-overdue-soft: #f8e0dc;
  --urgency-today: #b26a12;
  --urgency-today-soft: #fae8ce;
  --urgency-soon: #0f7a6e;          /* upcoming = teal-green (≠ accent petrol) */
  --urgency-soon-soft: #d8efea;
  --urgency-later: #5c6660;
  --urgency-later-soft: #eceee9;

  /* Signature high-energy focus — the ONE place that glows (HeroCard "Şimdi yap") */
  --hero-grad: linear-gradient(135deg, #0e5660 0%, #0b4751 55%, #093e46 100%); /* @kind other */

  /* Positive confirmation (e.g. "hatırlatma kuruldu") */
  --success: #1e7a46;
  --success-soft: #e2f0e6;

  /* The stars */
  --amount-color: #093e46;
  --date-color: #1b201c;

  /* Shadows (light) */
  --shadow-card: 0 1px 2px rgba(25, 40, 42, 0.05), 0 4px 16px rgba(25, 40, 42, 0.06);
  --shadow-raised: 0 10px 30px rgba(25, 40, 42, 0.13);
}

/* ===== DARK THEME ===== */
.dark {
  --surface-app: #0e1213;
  --surface-card: #171c1e;
  --surface-sunken: #111517;
  --surface-accent-soft: #10262b;

  --text-primary: #ecf0f0;
  --text-secondary: #9aa6a6;
  --text-tertiary: #6b7576;
  --text-on-accent: #06181c;

  --accent: #4db7c9;               /* same identity, pulled blue-teal for dark */
  --accent-strong: #6fccdc;
  --accent-soft: #10262b;
  --accent-ink: #4db7c9;

  --border: #252b2d;
  --border-strong: #343c3f;

  --urgency-overdue: #ff6b61;
  --urgency-overdue-soft: #2a1714;
  --urgency-today: #ffb54d;
  --urgency-today-soft: #2a2010;
  --urgency-soon: #34c9a8;          /* upcoming = teal-green (≠ accent blue-teal) */
  --urgency-soon-soft: #0f2a26;
  --urgency-later: #8b9595;
  --urgency-later-soft: #191f20;

  --hero-grad: linear-gradient(135deg, #0d5b64 0%, #0a7d72 100%); /* @kind other */

  --success: #5bc284;
  --success-soft: #12271a;

  --amount-color: #f2f7f8;
  --date-color: #e6ecec;

  --shadow-card: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 8px 24px rgba(0, 0, 0, 0.45);
  --shadow-raised: 0 18px 44px rgba(0, 0, 0, 0.55);
}

/* DueSoon — Typography tokens
   One family (Hanken Grotesk) for display, body AND amounts — identical number
   typography in both themes. Amounts use tabular + lining figures so columns
   align and the eye can scan "how much" instantly. */

:root {
  --font-display: 'Hanken Grotesk', system-ui, sans-serif;
  --font-body: 'Hanken Grotesk', system-ui, sans-serif;
  --font-amount: 'Hanken Grotesk', system-ui, sans-serif;

  /* Type scale (px) — generous for older eyes; nothing below 12 */
  --text-xs: 12px;
  --text-sm: 13px;
  --text-base: 15px;
  --text-md: 16px;
  --text-lg: 18px;
  --text-xl: 21px;
  --text-2xl: 26px;
  --text-3xl: 32px;
  --text-4xl: 40px;

  /* Weights */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-heavy: 800;

  /* Line heights */
  --leading-tight: 1.12;
  --leading-snug: 1.28;
  --leading-normal: 1.5;

  /* Tracking */
  --tracking-tight: -0.02em;
  --tracking-normal: 0em;
  --tracking-wide: 0.06em;

  /* Tabular figures for all amounts/dates */
  --amount-feature: "tnum" 1, "lnum" 1; /* @kind other */
}

/* DueSoon — Spacing, radii, motion (theme-independent geometry)
   Component geometry is IDENTICAL across light/dark — only color changes.
   (Shadow tokens live in colors.css because they differ per theme.) */

:root {
  /* Spacing scale (4pt base) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;

  /* Radii — single set for the whole system */
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 18px;
  --radius-xl: 22px;
  --radius-pill: 999px;
  --radius-card: 20px;
  --radius-control: 14px;

  /* Hit target floor */
  --hit-min: 44px;

  /* Motion */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1); /* @kind other */
  --ease-soft: cubic-bezier(0.34, 1.2, 0.64, 1); /* @kind other */
  --ease-sharp: cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */
  --dur-fast: 140ms; /* @kind other */
  --dur-base: 220ms; /* @kind other */
  --dur-slow: 360ms; /* @kind other */
  --press-scale: 0.98; /* @kind other */
}

  *, *::before, *::after { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body {
    margin: 0;
    background: var(--surface-app);
    color: var(--text-primary);
    font-family: var(--font-body);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
  }
  a { color: inherit; text-decoration: none; }
  img { max-width: 100%; display: block; }
  ::selection { background: var(--accent-soft); }

  /* ---- marketing-only scale (more expressive than the app) ---- */
  :root {
    --maxw: 1200px;
    --gutter: clamp(20px, 5vw, 56px);
    --section-y: clamp(72px, 11vw, 140px);
    --display: clamp(40px, 6.4vw, 76px);
    --display-2: clamp(30px, 4.4vw, 50px);
    --lede: clamp(17px, 1.6vw, 21px);
    --num-feat: "tnum" 1, "lnum" 1;
  }

  .wrap { max-width: var(--maxw); margin: 0 auto; padding-inline: var(--gutter); }
  section { padding-block: var(--section-y); }
  .eyebrow {
    font-size: var(--text-sm); font-weight: var(--weight-bold);
    letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent);
    margin: 0 0 var(--space-4);
  }
  h1, h2, h3 { margin: 0; letter-spacing: var(--tracking-tight); text-wrap: balance; }
  p { margin: 0; }
  .lede { font-size: var(--lede); line-height: var(--leading-normal); color: var(--text-secondary); text-wrap: pretty; }

  /* ---- reveal-on-scroll (soft, motion-ready) ---- */
  .reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
  .reveal.in { opacity: 1; transform: none; }
  @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

  /* ===== HEADER ===== */
  header.site {
    position: sticky; top: 0; z-index: 50;
    background: color-mix(in srgb, var(--surface-app) 82%, transparent);
    backdrop-filter: saturate(140%) blur(14px);
    border-bottom: 1px solid transparent;
    transition: border-color .25s var(--ease), background .25s var(--ease);
  }
  header.site.scrolled { border-bottom-color: var(--border); }
  .nav { display: flex; align-items: center; gap: var(--space-6); height: 72px; }
  .brand { display: flex; align-items: center; gap: 10px; font-weight: var(--weight-heavy); font-size: var(--text-xl); letter-spacing: -0.03em; }
  .brand .mark { width: 34px; height: 34px; border-radius: 9px; background: var(--accent); display: grid; place-items: center; box-shadow: var(--shadow-card); }
  .nav-links { display: flex; gap: var(--space-6); margin-left: auto; }
  .nav-links a { font-size: var(--text-md); color: var(--text-secondary); font-weight: var(--weight-medium); transition: color .18s var(--ease); }
  .nav-links a:hover { color: var(--text-primary); }
  .nav-right { display: flex; align-items: center; gap: var(--space-4); margin-left: var(--space-6); }
  .nav-links + .nav-right { margin-left: var(--space-2); }

  /* language toggle */
  .lang {
    display: inline-flex; border: 1px solid var(--border-strong); border-radius: var(--radius-pill);
    overflow: hidden; background: var(--surface-card);
  }
  .lang button {
    font: inherit; font-size: var(--text-sm); font-weight: var(--weight-bold); letter-spacing: 0.04em;
    border: 0; background: transparent; color: var(--text-tertiary); padding: 7px 13px; cursor: pointer; transition: all .18s var(--ease);
  }
  .lang button[aria-pressed="true"] { background: var(--accent); color: var(--text-on-accent); }

  .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    font: inherit; font-weight: var(--weight-bold); font-size: var(--text-md);
    border-radius: var(--radius-control); border: 1px solid transparent; cursor: pointer;
    padding: 12px 20px; min-height: var(--hit-min); transition: transform .12s var(--ease), background .18s var(--ease), box-shadow .18s var(--ease);
    white-space: nowrap;
  }
  .btn:active { transform: scale(var(--press-scale)); }
  .btn-primary { background: var(--accent); color: var(--text-on-accent); box-shadow: var(--shadow-card); }
  .btn-primary:hover { background: var(--accent-strong); }
  .btn-ghost { background: var(--surface-card); color: var(--text-primary); border-color: var(--border-strong); }
  .btn-ghost:hover { border-color: var(--accent); color: var(--accent); }
  .nav .btn { padding-block: 9px; min-height: 0; }
  @media (max-width: 880px) { .nav-links { display: none; } }

  /* ===== HERO ===== */
  .hero { padding-top: clamp(40px, 6vw, 80px); padding-bottom: var(--section-y); }
  .hero-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
  .badge {
    display: inline-flex; align-items: center; gap: 8px; font-size: var(--text-sm); font-weight: var(--weight-bold); white-space: nowrap;
    color: var(--accent); background: var(--accent-soft); padding: 6px 13px; border-radius: var(--radius-pill); margin-bottom: var(--space-5);
  }
  .badge .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
  .hero h1 { font-size: var(--display); line-height: var(--leading-tight); font-weight: var(--weight-heavy); }
  .hero .lede { margin-top: var(--space-6); max-width: 33ch; }
  .hero-cta { margin-top: var(--space-8); }

  /* CTA — coming soon (email capture) */
  .capture { display: flex; gap: 10px; max-width: 440px; flex-wrap: wrap; }
  .capture input {
    flex: 1 1 220px; min-height: var(--hit-min); padding: 12px 16px; font: inherit; font-size: var(--text-md);
    border: 1px solid var(--border-strong); border-radius: var(--radius-control); background: var(--surface-card); color: var(--text-primary);
  }
  .capture input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
  .cta-note { margin-top: var(--space-3); font-size: var(--text-sm); color: var(--text-tertiary); max-width: 42ch; }

  /* ===== EMAIL-SUBSCRIPTION FORM (WP-1) — real states, DueSoon tokens ===== */
  .wl { position: relative; }
  .wl-title { margin: 0 0 10px; font-size: var(--text-lg); font-weight: var(--weight-bold); letter-spacing: -0.01em; }
  .wl .capture .in { flex: 1 1 220px; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
  .wl .capture .in input[type=email] { flex: 0 0 auto; width: 100%; }
  .wl-label { font-size: var(--text-sm); font-weight: var(--weight-bold); color: var(--text-secondary); }
  .wl .capture .btn { align-self: flex-end; min-width: 150px; } /* fixed width: label↔spinner swap doesn't shift layout */
  .wl.is-error input[type=email] { border-color: var(--urgency-overdue); box-shadow: 0 0 0 3px var(--urgency-overdue-soft); }
  .wl .btn .spin { display: none; width: 17px; height: 17px; border-radius: 50%; border: 2.4px solid rgba(255,255,255,.45); border-top-color: #fff; animation: wlsp .7s linear infinite; }
  .wl.is-submitting .btn .spin { display: inline-block; }
  @keyframes wlsp { to { transform: rotate(360deg); } }
  @media (prefers-reduced-motion: reduce) { .wl .btn .spin { animation-duration: 1.6s; } }
  .wl .consent { display: flex; gap: 11px; align-items: flex-start; margin-top: 14px; max-width: 46ch; }
  .wl .consent input[type=checkbox] { width: 22px; height: 22px; min-width: 22px; accent-color: var(--accent); margin: 1px 0 0; cursor: pointer; }
  .wl .consent .txt { font-size: var(--text-sm); line-height: var(--leading-snug); color: var(--text-secondary); cursor: pointer; }
  .wl.consent-miss .consent input[type=checkbox] { outline: 2px solid var(--urgency-overdue); outline-offset: 2px; border-radius: 4px; }
  .wl-links { margin-top: 8px; font-size: var(--text-sm); color: var(--text-tertiary); }
  .wl-links a { color: var(--accent-ink); font-weight: var(--weight-semibold); text-decoration: underline; text-underline-offset: 2px; }
  .wl .msg { display: none; align-items: flex-start; gap: 9px; margin-top: 13px; font-size: var(--text-sm); font-weight: var(--weight-semibold); line-height: var(--leading-snug); max-width: 46ch; }
  .wl .msg svg { width: 18px; height: 18px; flex: none; margin-top: 1px; }
  .wl.show-err .msg.err { display: flex; color: var(--urgency-overdue); }
  .wl.is-submitting .msg.live { display: flex; color: var(--text-secondary); }
  .wl .success { display: none; }
  .wl.is-success .capture, .wl.is-success .consent, .wl.is-success .wl-links,
  .wl.is-success .msg, .wl.is-success .cta-note { display: none; }
  .wl.is-success .success { display: block; }
  .success-card { display: flex; gap: 13px; align-items: flex-start; background: var(--success-soft); border: 1px solid color-mix(in srgb, var(--success) 30%, transparent); border-radius: var(--radius-card); padding: 17px 18px; max-width: 460px; }
  .success-card .ic { width: 30px; height: 30px; flex: none; color: var(--success); }
  .success-card .ic svg { width: 30px; height: 30px; }
  .success-card h3 { margin: 0 0 4px; font-size: var(--text-md); font-weight: var(--weight-heavy); color: var(--text-primary); letter-spacing: -0.01em; }
  .success-card p { margin: 0; font-size: var(--text-sm); color: var(--text-secondary); line-height: var(--leading-normal); }
  #wl-success:focus { outline: 2px solid var(--success); outline-offset: 3px; border-radius: var(--radius-card); }
  /* Offscreen honeypot — RTL-SAFE: a -9999px physical offset expands the
     canvas ~10000px leftward under dir=rtl (WP-7 Arabic bug); clip instead. */
  .wl-hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .wl-nojs { margin-top: 13px; font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--text-secondary); background: var(--surface-sunken); border: 1px dashed var(--border-strong); padding: 8px 12px; border-radius: var(--radius-control); max-width: 440px; line-height: var(--leading-snug); }

  /* CTA — future store state (no fake badges; restrained, generic buttons) */
  .stores { display: none; gap: 12px; flex-wrap: wrap; }
  .store-btn {
    display: inline-flex; align-items: center; gap: 11px; padding: 11px 18px; border-radius: var(--radius-control);
    background: var(--text-primary); color: var(--surface-card); min-height: var(--hit-min); cursor: pointer; transition: transform .12s var(--ease), opacity .18s var(--ease);
  }
  .store-btn:active { transform: scale(var(--press-scale)); }
  .store-btn:hover { opacity: .9; }
  .store-btn svg { width: 24px; height: 24px; flex: none; }
  .store-btn .st { display: flex; flex-direction: column; line-height: 1.1; }
  .store-btn .st small { font-size: 10px; opacity: .8; font-weight: var(--weight-medium); }
  .store-btn .st b { font-size: var(--text-md); font-weight: var(--weight-bold); }

  body[data-cta="stores"] .capture, body[data-cta="stores"] .cta-note { display: none; }
  body[data-cta="stores"] .stores { display: flex; }

  /* hero B variant — centered, oversized */
  body[data-hero="B"] .hero-grid { grid-template-columns: 1fr; text-align: center; justify-items: center; gap: clamp(36px, 5vw, 56px); }
  body[data-hero="B"] .hero h1 { font-size: clamp(44px, 8vw, 92px); }
  body[data-hero="B"] .hero .lede { max-width: 52ch; }
  body[data-hero="B"] .hero-copy .badge { margin-inline: auto; }
  body[data-hero="B"] .capture, body[data-hero="B"] .stores { justify-content: center; }
  body[data-hero="B"] .cta-note { margin-inline: auto; text-align: center; }
  body[data-hero="B"] .hero-h1b { display: block; }
  body[data-hero="B"] .hero-h1a { display: none; }
  .hero-h1b { display: none; }
  body[data-hero="B"] .phone-wrap { transform: none; }
  .hero-h1a { display: block; }

  /* ===== PHONE ===== */
  .phone-wrap { display: flex; justify-content: center; perspective: 1600px; }
  .phone {
    width: 320px; aspect-ratio: 320 / 660; border-radius: 46px; background: #11181a; padding: 12px;
    box-shadow: var(--shadow-raised), 0 50px 90px -40px rgba(9,62,70,.5); position: relative; flex: none;
  }
  body:not([data-hero="B"]) .phone { transform: rotate(2deg); }
  .phone-screen { width: 100%; height: 100%; border-radius: 36px; background: var(--surface-app); overflow: hidden; display: flex; flex-direction: column; }
  .island { position: absolute; top: 20px; left: 50%; transform: translateX(-50%); width: 92px; height: 26px; background: #11181a; border-radius: 999px; z-index: 3; }
  .scr-status { display: flex; justify-content: space-between; align-items: center; padding: 14px 22px 4px; font-size: 12px; font-weight: var(--weight-bold); color: var(--text-primary); }
  .scr-status .sig { display: flex; gap: 4px; align-items: center; }
  .scr-status .sig span { width: 3px; border-radius: 2px; background: var(--text-primary); }
  .scr-head { padding: 8px 18px 10px; display: flex; align-items: center; justify-content: space-between; }
  .scr-head .t { font-size: 19px; font-weight: var(--weight-heavy); letter-spacing: -0.03em; }
  .scr-head .av { width: 30px; height: 30px; border-radius: 50%; background: var(--surface-accent-soft); display: grid; place-items: center; color: var(--accent); }
  .scr-body { flex: 1; overflow: hidden; padding: 2px 14px 14px; display: flex; flex-direction: column; gap: 14px; }
  .bucket-label { font-size: 11px; font-weight: var(--weight-bold); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-tertiary); margin: 6px 4px 0; }
  .doc-card {
    position: relative; background: var(--surface-card); border: 1px solid var(--border); border-radius: 16px;
    padding: 13px 14px 13px 18px; box-shadow: var(--shadow-card); overflow: hidden;
  }
  .doc-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--rail, var(--urgency-later)); }
  .doc-top { display: flex; align-items: center; gap: 11px; }
  .chip { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); flex: none; }
  .chip svg { width: 20px; height: 20px; }
  .doc-meta { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 1px; }
  .doc-meta .iss { display: block; font-size: 14px; font-weight: var(--weight-bold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .doc-meta .sub { display: block; font-size: 12px; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .doc-amt { font-size: 16px; font-weight: var(--weight-heavy); color: var(--amount-color); font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; }
  .doc-bottom { display: flex; align-items: center; justify-content: space-between; margin-top: 11px; }
  .status-pill { font-size: 11.5px; font-weight: var(--weight-bold); padding: 4px 9px; border-radius: 999px; }
  .doc-date { font-size: 12px; font-weight: var(--weight-semibold); color: var(--date-color); font-variant-numeric: tabular-nums; }
  .scr-tabs { display: flex; justify-content: space-around; align-items: center; padding: 10px 12px 14px; border-top: 1px solid var(--border); background: var(--surface-card); }
  .scr-tabs .tab { width: 24px; height: 24px; color: var(--text-tertiary); }
  .scr-tabs .tab.on { color: var(--accent); }
  .scr-tabs .add { width: 44px; height: 44px; border-radius: 14px; background: var(--accent); color: var(--text-on-accent); display: grid; place-items: center; box-shadow: var(--shadow-card); transform: translateY(-4px); }

  /* ===== TRUST STRIP ===== */
  .trust { padding-block: clamp(28px, 4vw, 44px); border-block: 1px solid var(--border); background: var(--surface-card); }
  .trust-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(16px, 3vw, 40px); }
  .trust-item { display: flex; align-items: center; gap: 12px; font-size: var(--text-md); font-weight: var(--weight-semibold); color: var(--text-secondary); }
  .trust-item svg { width: 24px; height: 24px; color: var(--accent); flex: none; }
  @media (max-width: 760px) { .trust-row { grid-template-columns: 1fr 1fr; gap: 18px 16px; } }

  /* ===== SECTION HEADS ===== */
  .sec-head { max-width: 760px; }
  .sec-head h2 { font-size: var(--display-2); line-height: var(--leading-snug); font-weight: var(--weight-heavy); }
  .sec-head .lede { margin-top: var(--space-4); }
  .center { margin-inline: auto; text-align: center; }

  /* ===== HOW IT WORKS ===== */
  .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 2.4vw, 30px); margin-top: clamp(40px, 5vw, 64px); }
  .step { background: var(--surface-card); border: 1px solid var(--border); border-radius: var(--radius-card); padding: clamp(22px, 2.6vw, 32px); box-shadow: var(--shadow-card); }
  .step .num { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--accent-soft); color: var(--accent); font-weight: var(--weight-heavy); font-size: var(--text-lg); margin-bottom: var(--space-5); }
  .step h3 { font-size: var(--text-xl); font-weight: var(--weight-bold); }
  .step p { margin-top: var(--space-3); color: var(--text-secondary); line-height: var(--leading-normal); }
  @media (max-width: 820px) { .steps { grid-template-columns: 1fr; } }

  /* ===== SCREENSHOTS / USE CASES ===== */
  .shots { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 2.4vw, 28px); margin-top: clamp(40px, 5vw, 64px); }
  .shot { background: var(--surface-card); border: 1px solid var(--border); border-radius: var(--radius-card); overflow: hidden; box-shadow: var(--shadow-card); }
  .ph {
    aspect-ratio: 9 / 13; background:
      repeating-linear-gradient(135deg, var(--surface-sunken) 0 11px, transparent 11px 22px), var(--surface-accent-soft);
    display: grid; place-items: center; border-bottom: 1px solid var(--border);
  }
  .ph code { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12px; color: var(--accent); background: var(--surface-card); padding: 5px 11px; border-radius: 999px; border: 1px dashed var(--border-strong); letter-spacing: 0.02em; }
  .shot-cap { padding: clamp(18px, 2vw, 24px); }
  .shot-cap h3 { font-size: var(--text-lg); font-weight: var(--weight-bold); }
  .shot-cap p { margin-top: 8px; font-size: var(--text-base); color: var(--text-secondary); line-height: var(--leading-normal); }
  @media (max-width: 820px) { .shots { grid-template-columns: 1fr; max-width: 420px; margin-inline: auto; } }

  /* ===== WHAT IT TRACKS ===== */
  .tracks-band { background: var(--surface-card); border-block: 1px solid var(--border); }
  .tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(14px, 1.8vw, 20px); margin-top: clamp(40px, 5vw, 60px); }
  .tile { border: 1px solid var(--border); border-radius: var(--radius-md); padding: clamp(18px, 2vw, 24px); background: var(--surface-app); transition: transform .2s var(--ease), border-color .2s var(--ease); }
  .tile:hover { transform: translateY(-3px); border-color: var(--accent); }
  .tile .ic { width: 42px; height: 42px; border-radius: 11px; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; margin-bottom: var(--space-4); }
  .tile .ic svg { width: 22px; height: 22px; }
  .tile h3 { font-size: var(--text-lg); font-weight: var(--weight-bold); }
  .tile p { margin-top: 6px; font-size: var(--text-base); color: var(--text-secondary); line-height: var(--leading-snug); }
  .tile.span2 { grid-column: span 2; background: linear-gradient(135deg, var(--surface-accent-soft), var(--surface-app)); }
  @media (max-width: 900px) { .tiles { grid-template-columns: 1fr 1fr; } .tile.span2 { grid-column: span 2; } }
  @media (max-width: 540px) { .tiles { grid-template-columns: 1fr; } .tile.span2 { grid-column: span 1; } }

  /* ===== PRIVACY ===== */
  .privacy { background: var(--accent-strong); color: #eaf4f4; }
  .privacy .eyebrow { color: var(--petrol-200); }
  .privacy h2 { font-size: var(--display-2); font-weight: var(--weight-heavy); line-height: var(--leading-snug); }
  .privacy .lede { color: #bcd6d6; }
  .priv-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(20px, 3vw, 36px); margin-top: clamp(40px, 5vw, 60px); }
  .priv-item { display: flex; gap: 16px; }
  .priv-item .ic { width: 44px; height: 44px; border-radius: 12px; background: rgba(255,255,255,.08); color: var(--petrol-200); display: grid; place-items: center; flex: none; }
  .priv-item .ic svg { width: 23px; height: 23px; }
  .priv-item h3 { font-size: var(--text-lg); font-weight: var(--weight-bold); color: #fff; }
  .priv-item p { margin-top: 6px; color: #bcd6d6; line-height: var(--leading-normal); font-size: var(--text-base); }
  @media (max-width: 760px) { .priv-grid { grid-template-columns: 1fr; } }

  /* ===== PLANS ===== */
  .plans-note { margin-top: var(--space-6); font-size: var(--text-base); color: var(--text-tertiary); max-width: 60ch; }
  .center .plans-note { margin-inline: auto; }
  /* layout A — two cards */
  .plan-cards { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(18px, 2.4vw, 28px); margin-top: clamp(36px, 4vw, 56px); }
  .plan {
    background: var(--surface-card); border: 1px solid var(--border); border-radius: var(--radius-card);
    padding: clamp(24px, 2.8vw, 36px); box-shadow: var(--shadow-card); display: flex; flex-direction: column;
  }
  .plan.featured { border-color: var(--accent); box-shadow: var(--shadow-raised); position: relative; }
  .plan-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: var(--space-6); }
  .plan-head h3 { font-size: var(--text-2xl); font-weight: var(--weight-heavy); }
  .plan-tag { font-size: var(--text-xs); font-weight: var(--weight-bold); letter-spacing: 0.04em; text-transform: uppercase; padding: 5px 11px; border-radius: 999px; background: var(--surface-sunken); color: var(--text-secondary); white-space: nowrap; }
  .plan.featured .plan-tag { background: var(--accent-soft); color: var(--accent); }
  .plan ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 13px; }
  .plan li { display: flex; align-items: flex-start; gap: 11px; font-size: var(--text-md); color: var(--text-primary); }
  .plan li svg { width: 20px; height: 20px; flex: none; margin-top: 1px; }
  .plan li.off { color: var(--text-tertiary); }
  .plan li .yes { color: var(--success); }
  .plan li .no { color: var(--text-tertiary); }
  @media (max-width: 760px) { .plan-cards { grid-template-columns: 1fr; } }

  /* layout B — comparison table */
  .plan-table { margin-top: clamp(36px, 4vw, 56px); border: 1px solid var(--border); border-radius: var(--radius-card); overflow: hidden; box-shadow: var(--shadow-card); background: var(--surface-card); }
  .ptbl { width: 100%; border-collapse: collapse; }
  .ptbl th, .ptbl td { padding: 16px clamp(16px, 2vw, 26px); text-align: left; border-bottom: 1px solid var(--border); }
  .ptbl thead th { font-size: var(--text-md); }
  .ptbl thead .col { text-align: center; }
  .ptbl thead .col b { display: block; font-size: var(--text-xl); font-weight: var(--weight-heavy); }
  .ptbl thead .col .plan-tag { margin-top: 6px; display: inline-block; }
  .ptbl thead .featured { background: var(--accent-soft); }
  .ptbl tbody th { font-weight: var(--weight-medium); font-size: var(--text-md); color: var(--text-primary); }
  .ptbl td.col { text-align: center; }
  .ptbl td.featured { background: color-mix(in srgb, var(--accent-soft) 55%, transparent); }
  .ptbl tr:last-child th, .ptbl tbody tr:last-child td { border-bottom: 0; }
  .ptbl svg { width: 21px; height: 21px; }
  .ptbl .yes { color: var(--success); }
  .ptbl .no { color: var(--text-tertiary); }

  body[data-plans="A"] .plan-table { display: none; }
  body[data-plans="B"] .plan-cards { display: none; }
  @media (max-width: 620px) { body[data-plans="B"] .plan-table { display: none; } body[data-plans="B"] .plan-cards { display: grid; } }

  /* ===== FAQ ===== */
  .faq-list { margin-top: clamp(32px, 4vw, 48px); max-width: 820px; margin-inline: auto; display: flex; flex-direction: column; gap: 0; border-top: 1px solid var(--border); }
  details.qa { border-bottom: 1px solid var(--border); }
  details.qa summary { list-style: none; cursor: pointer; padding: 22px 4px; display: flex; align-items: center; justify-content: space-between; gap: 16px; font-size: var(--text-lg); font-weight: var(--weight-bold); }
  details.qa summary::-webkit-details-marker { display: none; }
  details.qa summary .pm { width: 26px; height: 26px; flex: none; color: var(--accent); transition: transform .25s var(--ease); }
  details.qa[open] summary .pm { transform: rotate(45deg); }
  details.qa .ans { padding: 0 4px 24px; color: var(--text-secondary); font-size: var(--text-md); line-height: var(--leading-normal); max-width: 70ch; }

  /* ===== FOOTER ===== */
  footer.site { background: var(--surface-card); border-top: 1px solid var(--border); padding-block: clamp(48px, 6vw, 80px) 32px; }
  .foot-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr auto; gap: clamp(28px, 4vw, 56px); }
  .foot-brand .brand { margin-bottom: var(--space-4); }
  .foot-brand p { color: var(--text-secondary); max-width: 30ch; line-height: var(--leading-normal); }
  .foot-col h4 { font-size: var(--text-sm); text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-tertiary); margin: 0 0 var(--space-4); font-weight: var(--weight-bold); }
  .foot-col a { display: block; padding: 6px 0; color: var(--text-secondary); font-size: var(--text-md); transition: color .15s var(--ease); }
  .foot-col a:hover { color: var(--accent); }
  .foot-bottom { margin-top: clamp(36px, 4vw, 56px); padding-top: 24px; border-top: 1px solid var(--border); display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: center; justify-content: space-between; }
  .foot-bottom small, .foot-disc { color: var(--text-tertiary); font-size: var(--text-sm); }
  .foot-disc { max-width: 60ch; line-height: var(--leading-snug); }
  @media (max-width: 820px) { .foot-grid { grid-template-columns: 1fr 1fr; } .foot-brand { grid-column: span 2; } }

  /* ===== TWEAKS PANEL ===== */
  #tweaks { position: fixed; right: 18px; bottom: 18px; z-index: 200; width: 268px; background: var(--surface-card); border: 1px solid var(--border-strong); border-radius: var(--radius-lg); box-shadow: var(--shadow-raised); padding: 16px; display: none; font-size: var(--text-sm); }
  #tweaks.show { display: block; }
  #tweaks .tk-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
  #tweaks h5 { margin: 0; font-size: var(--text-md); font-weight: var(--weight-heavy); }
  #tweaks .tk-x { border: 0; background: var(--surface-sunken); border-radius: 8px; width: 26px; height: 26px; cursor: pointer; color: var(--text-secondary); font-size: 16px; line-height: 1; }
  .tk-group { margin-bottom: 14px; }
  .tk-group > label { display: block; font-weight: var(--weight-bold); color: var(--text-secondary); margin-bottom: 7px; }
  .seg { display: flex; border: 1px solid var(--border-strong); border-radius: var(--radius-control); overflow: hidden; }
  .seg button { flex: 1; font: inherit; font-size: var(--text-sm); font-weight: var(--weight-semibold); border: 0; background: var(--surface-card); color: var(--text-secondary); padding: 8px 6px; cursor: pointer; transition: all .15s var(--ease); }
  .seg button[aria-pressed="true"] { background: var(--accent); color: var(--text-on-accent); }

/* --- WP-4B: externalized former inline style="" attributes (mechanical, 1:1).
   Values are verbatim; only the carrier moved from attribute to class so the
   enforced CSP can use style-src-attr 'none'. --- */
.svg-defs { position: absolute; }
.bar-h6 { height: 6px; }
.bar-h9 { height: 9px; }
.bar-h12 { height: 12px; }
.bar-h15 { height: 15px; }
.u-ml4 { margin-left: 4px; }
.u-pt0 { padding-top: 0; }
.rail-overdue { --rail: var(--urgency-overdue); }
.rail-today { --rail: var(--urgency-today); }
.rail-soon { --rail: var(--urgency-soon); }
.tint-overdue { background: var(--urgency-overdue-soft); color: var(--urgency-overdue); }
.tint-today { background: var(--urgency-today-soft); color: var(--urgency-today); }
.tint-soon { background: var(--urgency-soon-soft); color: var(--urgency-soon); }

/* ============================================================================
   WP-7 · Marketing product fidelity — hero phone mini-replica + the four
   product gallery screens (Inbox / Review / Tracking / Vault), the 15-language
   menu and RTL support. Everything below uses the existing token set only.
   ========================================================================= */

/* ---- hero phone: mini replica of the Flutter Home ---- */
.pf-screen { width: 100%; height: 100%; border-radius: 36px; background: var(--surface-app); overflow: hidden; display: flex; flex-direction: column; }
.pf-status { display: flex; justify-content: space-between; align-items: center; padding: 14px 22px 2px; font-size: 12px; font-weight: var(--weight-bold); color: var(--text-primary); }
.pf-status .sig { display: flex; gap: 4px; align-items: center; }
.pf-status .sig span { width: 3px; border-radius: 2px; background: var(--text-primary); }
.pf-apphead { padding: 6px 16px 4px; display: flex; align-items: center; justify-content: space-between; }
.pf-apphead .t { font-size: 20px; font-weight: var(--weight-heavy); letter-spacing: -0.03em; }
.pf-apphead .shield { width: 30px; height: 30px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface-card); color: var(--accent-ink); display: grid; place-items: center; }
.pf-body { flex: 1; overflow: hidden; padding: 2px 14px 8px; display: flex; flex-direction: column; }
.pf-strip { display: flex; align-items: stretch; gap: 12px; background: var(--surface-card); border: 1px solid var(--border); border-radius: var(--radius-control); padding: 9px 13px; margin-top: 4px; }
.pf-strip .cell { flex: 1; min-width: 0; }
.pf-strip .div { width: 1px; background: var(--border); }
.pf-strip .n { font-size: 18px; font-weight: var(--weight-heavy); font-variant-numeric: tabular-nums lining-nums; line-height: 1; }
.pf-strip .l { font-size: 10px; font-weight: var(--weight-bold); color: var(--text-tertiary); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.n-over { color: var(--urgency-overdue); }
.n-today { color: var(--urgency-today); }
.n-soon { color: var(--urgency-soon); }
.pf-sec { display: flex; align-items: center; gap: 8px; margin: 13px 2px 7px; }
.pf-sec > span { font-size: 11px; font-weight: var(--weight-heavy); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-secondary); white-space: nowrap; }
.pf-sec i { flex: 1; height: 1px; background: var(--border); }
.pf-hero { position: relative; overflow: hidden; background: var(--hero-grad); border-radius: var(--radius-card); box-shadow: 0 12px 28px rgba(14, 86, 96, .32); padding: 13px 14px; color: #fff; }
.pf-hero .glow { position: absolute; top: -46px; inset-inline-end: -28px; width: 130px; height: 130px; border-radius: 999px; background: radial-gradient(circle, rgba(111, 204, 220, .42), transparent 68%); pointer-events: none; }
.pf-hero .top { position: relative; display: flex; align-items: center; gap: 8px; }
.pf-hero .flame { display: inline-flex; align-items: center; gap: 5px; background: rgba(255, 255, 255, .16); font-size: 10.5px; font-weight: var(--weight-heavy); padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.pf-hero .flame svg { width: 11px; height: 11px; }
.pf-hero .due { margin-inline-start: auto; font-size: 11px; font-weight: var(--weight-bold); color: rgba(255, 255, 255, .85); white-space: nowrap; }
.pf-hero .mid { position: relative; display: flex; align-items: flex-end; gap: 10px; margin-top: 11px; }
.pf-hero .tchip { width: 38px; height: 38px; border-radius: 11px; background: rgba(255, 255, 255, .16); display: grid; place-items: center; flex: none; }
.pf-hero .tchip svg { width: 19px; height: 19px; }
.pf-hero .who { flex: 1; min-width: 0; }
.pf-hero .prov { display: block; font-size: 11px; font-weight: var(--weight-bold); color: rgba(255, 255, 255, .8); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-hero .ttl { display: block; font-size: 15px; font-weight: var(--weight-heavy); letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-hero .amt { font-size: 21px; font-weight: var(--weight-heavy); font-variant-numeric: tabular-nums lining-nums; letter-spacing: -0.015em; white-space: nowrap; }
.pf-hero .acts { position: relative; display: flex; gap: 8px; margin-top: 12px; }
.pf-hero .acts > span { flex: 1; height: 36px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-size: 12.5px; font-weight: var(--weight-heavy); }
.pf-hero .pay { background: #fff; color: var(--accent-strong); }
.pf-hero .pay svg { width: 13px; height: 13px; }
.pf-hero .defer { border: 1.5px solid rgba(255, 255, 255, .45); font-weight: var(--weight-bold); }
.pf-spine { position: relative; margin-top: 2px; flex: 1; min-height: 0; }
.pf-spine .rail { position: absolute; inset-inline-start: 13px; top: 6px; bottom: 4px; width: 2px; background: var(--border-strong); }
.pf-node { position: relative; padding-inline-start: 32px; }
.pf-node .knot { position: absolute; inset-inline-start: 7px; top: 2px; width: 13px; height: 13px; border-radius: 999px; border: 3px solid var(--surface-app); }
.knot.k-today { background: var(--urgency-today); }
.knot.k-soon { background: var(--urgency-soon); }
.pf-node .nh { display: flex; align-items: baseline; gap: 6px; margin-bottom: 6px; }
.pf-node .nh b { font-size: 11px; font-weight: var(--weight-heavy); letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-primary); }
.pf-node .cnt { font-size: 10.5px; font-weight: var(--weight-heavy); padding: 0 7px; border-radius: 999px; }
.cnt.c-today { background: var(--urgency-today-soft); color: var(--urgency-today); }
.cnt.c-soon { background: var(--urgency-soon-soft); color: var(--urgency-soon); }
.pf-row { position: relative; display: flex; align-items: center; gap: 9px; background: var(--surface-card); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-card); padding: 8px 11px; margin-bottom: 8px; }
.pf-row .tick { position: absolute; inset-inline-start: -22px; top: 50%; width: 18px; height: 2px; background: var(--border-strong); }
.pf-row .ic { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; flex: none; }
.pf-row .ic svg { width: 14px; height: 14px; }
.t-today { background: var(--urgency-today-soft); color: var(--urgency-today); }
.t-soon { background: var(--urgency-soon-soft); color: var(--urgency-soon); }
.pf-row .m { flex: 1; min-width: 0; }
.pf-row .m b { display: block; font-size: 12.5px; font-weight: var(--weight-bold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-row .m span { display: block; font-size: 10.5px; font-weight: var(--weight-semibold); color: var(--text-tertiary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-row .a { font-size: 12.5px; font-weight: var(--weight-heavy); color: var(--amount-color); font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; }
.pf-priv { display: flex; align-items: center; gap: 6px; padding-inline-start: 32px; color: var(--text-tertiary); font-size: 10.5px; font-weight: var(--weight-semibold); }
.pf-priv svg { width: 12px; height: 12px; flex: none; }
.pf-tabs { flex: none; display: flex; align-items: flex-end; justify-content: space-around; gap: 2px; background: var(--surface-card); border-top: 1px solid var(--border); padding: 7px 6px 12px; margin: 0 -14px -8px; }
.pf-tab { display: flex; flex-direction: column; align-items: center; gap: 3px; flex: 1; min-width: 0; color: var(--text-tertiary); }
.pf-tab svg { width: 20px; height: 20px; }
.pf-tab b { font-size: 9px; font-weight: var(--weight-semibold); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-tab.on { color: var(--accent-ink); }
.pf-tab.on b { font-weight: var(--weight-heavy); }
.pf-tab.add .sq { width: 44px; height: 34px; border-radius: 12px; background: var(--accent); color: var(--text-on-accent); display: grid; place-items: center; box-shadow: var(--shadow-card); margin-top: -14px; }
.pf-tab.add .sq svg { width: 19px; height: 19px; }
.pf-tab.add b { color: var(--accent-ink); font-weight: var(--weight-heavy); }

/* ---- gallery: four real product surfaces ---- */
.pf-gallery { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 2.6vw, 32px); margin-top: clamp(36px, 4.5vw, 60px); }
@media (max-width: 860px) { .pf-gallery { grid-template-columns: 1fr; max-width: 430px; margin-inline: auto; } }
.pf-shot { background: var(--surface-card); border: 1px solid var(--border); border-radius: var(--radius-card); box-shadow: var(--shadow-card); padding: clamp(18px, 2vw, 26px); display: flex; flex-direction: column; align-items: center; gap: 18px; }
.pf-cap { align-self: stretch; }
.pf-cap h3 { font-size: 17px; font-weight: var(--weight-heavy); letter-spacing: -0.01em; }
.pf-cap p { margin-top: 6px; font-size: 14px; color: var(--text-secondary); line-height: var(--leading-normal); }
.pf-app { width: 100%; max-width: 320px; height: 560px; border-radius: 28px; border: 1px solid var(--border-strong); background: var(--surface-app); overflow: hidden; display: flex; flex-direction: column; flex: none; }
.ap-pad { padding: 0 16px; }
.ap-pad.col { display: flex; flex-direction: column; gap: 9px; margin-top: 11px; }
.ap-head { display: flex; align-items: flex-end; gap: 8px; padding: 20px 16px 0; }
.ap-head .h4 { font-size: 23px; font-weight: var(--weight-heavy); letter-spacing: -0.02em; }
.ap-head .meta { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: var(--weight-bold); color: var(--text-tertiary); margin-bottom: 5px; }
.ap-head .end { margin-inline-start: auto; margin-bottom: 5px; color: var(--text-tertiary); }
.ap-head .end.txt { font-size: 12px; font-weight: var(--weight-bold); font-variant-numeric: tabular-nums; }
.ap-headlite { display: flex; align-items: center; gap: 10px; padding: 18px 16px 0; }
.ap-headlite .back { width: 30px; height: 30px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface-card); color: var(--text-secondary); display: grid; place-items: center; flex: none; }
.ap-headlite .back svg { width: 14px; height: 14px; }
.ap-headlite .h4 { display: block; font-size: 15.5px; font-weight: var(--weight-heavy); letter-spacing: -0.01em; }
.ap-headlite p { font-size: 11px; font-weight: var(--weight-semibold); color: var(--text-secondary); margin-top: 1px; }
.pcard { background: var(--surface-card); border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow-card); padding: 12px 13px; }
.pcard.rows { padding: 2px 13px; }
.pcard.rows.vrows { margin-top: 10px; }
.pcard.hist { padding: 13px 13px 3px; }
.cap { font-size: 10px; font-weight: var(--weight-heavy); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-tertiary); white-space: nowrap; }
.cap.acc { color: var(--accent-ink); }
.pill { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; font-weight: var(--weight-heavy); padding: 3px 8px; border-radius: 999px; white-space: nowrap; }
.pill.soon { background: var(--urgency-soon-soft); color: var(--urgency-soon); }
.pill.today { background: var(--urgency-today-soft); color: var(--urgency-today); }
.pill.grey { background: var(--surface-sunken); color: var(--text-secondary); }
.pill.acc { background: var(--surface-accent-soft); color: var(--accent-ink); }
.pill.ok { background: var(--success-soft); color: var(--success); }
.sechead { display: flex; align-items: center; gap: 8px; margin: 12px 0 7px; }
.sechead .cap { flex: none; }
.sechead i { flex: 1; height: 1px; background: var(--border); }
.fieldhead { display: flex; align-items: center; gap: 6px; }
.fieldhead i { flex: 1; }
.fieldhead .pen { width: 13px; height: 13px; color: var(--text-tertiary); flex: none; }
.fieldhead .bell { width: 13px; height: 13px; color: var(--accent-ink); flex: none; }
/* inbox */
.fw-card { position: relative; overflow: hidden; background: var(--hero-grad); border-radius: 16px; box-shadow: 0 10px 26px rgba(14, 86, 96, .28); padding: 12px 13px; color: #fff; margin-top: 12px; }
.fw-card .glow { position: absolute; top: -44px; inset-inline-end: -26px; width: 120px; height: 120px; border-radius: 999px; background: radial-gradient(circle, rgba(111, 204, 220, .45), transparent 68%); pointer-events: none; }
.fw-card .row { position: relative; display: flex; align-items: center; gap: 9px; }
.fw-card .ic { width: 30px; height: 30px; border-radius: 8px; background: rgba(255, 255, 255, .16); display: grid; place-items: center; flex: none; }
.fw-card .ic svg { width: 15px; height: 15px; }
.fw-card .alias { flex: 1; min-width: 0; font-size: 12.5px; font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums; color: rgba(255, 255, 255, .92); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; direction: ltr; }
.fw-card .copy { width: 30px; height: 30px; border-radius: 8px; background: rgba(255, 255, 255, .16); display: grid; place-items: center; flex: none; }
.fw-card .copy svg { width: 13px; height: 13px; }
.fw-card .promise { position: relative; margin-top: 9px; font-size: 11.5px; line-height: 1.42; color: rgba(255, 255, 255, .86); }
.fw-card .promise b { color: #fff; font-weight: var(--weight-bold); }
.q-row { display: flex; align-items: center; gap: 10px; padding: 11px 2px; border-bottom: 1px solid var(--border); }
.q-row:last-child { border-bottom: none; }
.q-row .src { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; flex: none; }
.q-row .src svg { width: 17px; height: 17px; }
.q-row .m { flex: 1; min-width: 0; }
.q-row .m b { display: block; font-size: 13px; font-weight: var(--weight-bold); }
.q-row .m span { display: block; font-size: 11px; font-weight: var(--weight-semibold); color: var(--text-tertiary); font-variant-numeric: tabular-nums; }
.chev { width: 14px; height: 14px; color: var(--text-tertiary); flex: none; }
[dir="rtl"] .chev, [dir="rtl"] .ap-headlite .back svg { transform: scaleX(-1); }
/* review */
.rv-idrow { display: flex; align-items: center; gap: 11px; }
.tchip { width: 42px; height: 42px; border-radius: 11px; background: var(--surface-accent-soft); color: var(--accent-ink); display: grid; place-items: center; flex: none; }
.tchip svg { width: 21px; height: 21px; }
.rv-idrow .m { flex: 1; min-width: 0; }
.rv-idrow .m b { display: block; font-size: 16px; font-weight: var(--weight-heavy); letter-spacing: -0.01em; }
.rv-idrow .m span { display: block; font-size: 11.5px; font-weight: var(--weight-semibold); color: var(--text-secondary); }
.rv-conf { display: flex; align-items: center; gap: 8px; margin-top: 11px; padding-top: 11px; border-top: 1px solid var(--border); }
.rv-conf .lbl { font-size: 11px; font-weight: var(--weight-bold); color: var(--text-secondary); white-space: nowrap; }
.rv-conf .bar { flex: 1; display: flex; gap: 3px; }
.rv-conf .bar i { height: 5px; border-radius: 999px; background: var(--surface-sunken); overflow: hidden; display: block; }
.rv-conf .bar i.b70 { flex: 70; }
.rv-conf .bar i.b15 { flex: 15; }
.rv-conf .bar i em { display: block; height: 100%; border-radius: 999px; width: 92%; background: var(--urgency-today); }
.rv-amt { margin-top: 6px; font-size: 22px; font-weight: var(--weight-heavy); color: var(--amount-color); font-variant-numeric: tabular-nums lining-nums; letter-spacing: -0.015em; }
.rv-date { margin-top: 6px; font-size: 17px; font-weight: var(--weight-heavy); font-variant-numeric: tabular-nums; }
.rv-quote { display: flex; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--border); }
.rv-quote .qrail { width: 3px; border-radius: 2px; background: var(--accent); opacity: .55; flex: none; align-self: stretch; }
.rv-quote .qc { min-width: 0; }
.rv-quote .qcap { display: block; font-size: 9px; font-weight: var(--weight-heavy); letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent-ink); margin-bottom: 2px; }
.rv-quote .qt { display: block; font-size: 11px; font-style: italic; color: var(--text-secondary); line-height: 1.35; }
.rv-foot { margin-top: auto; padding: 10px 16px 14px; background: var(--surface-card); border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 8px; }
.rv-foot .b1 { height: 42px; border-radius: var(--radius-control); background: var(--accent); color: var(--text-on-accent); display: flex; align-items: center; justify-content: center; gap: 7px; font-size: 13.5px; font-weight: var(--weight-heavy); }
.rv-foot .b1 svg { width: 15px; height: 15px; }
.rv-foot .b2 { height: 38px; border-radius: var(--radius-control); border: 1px solid var(--border-strong); color: var(--text-primary); display: flex; align-items: center; justify-content: center; font-size: 12.5px; font-weight: var(--weight-bold); background: transparent; }
/* tracking */
.trk-head { display: flex; align-items: center; gap: 10px; padding: 18px 16px 0; }
.trk-head .tchip { position: relative; width: 40px; height: 40px; }
.trk-head .tchip > svg { width: 19px; height: 19px; }
.trk-head .rep { position: absolute; inset-inline-end: -4px; bottom: -4px; width: 17px; height: 17px; border-radius: 999px; background: var(--accent); color: #fff; display: grid; place-items: center; border: 2px solid var(--surface-app); }
.trk-head .m { flex: 1; min-width: 0; }
.trk-head .h4 { display: block; font-size: 16px; font-weight: var(--weight-heavy); letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trk-head .sub { display: flex; align-items: center; gap: 6px; margin-top: 2px; font-size: 11px; font-weight: var(--weight-bold); color: var(--text-secondary); }
.trk-cur { position: relative; overflow: hidden; border: 1.5px solid var(--accent); }
.trk-cur .rail { position: absolute; inset-inline-start: 0; top: 0; bottom: 0; width: 4px; background: var(--accent); }
.trk-due { display: flex; align-items: baseline; gap: 7px; margin-top: 10px; }
.trk-due .l { font-size: 12px; font-weight: var(--weight-bold); color: var(--text-secondary); }
.trk-due .d { font-size: 16px; font-weight: var(--weight-heavy); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.trk-amt { display: flex; align-items: baseline; gap: 8px; margin-top: 11px; padding-top: 11px; border-top: 1px solid var(--border); }
.trk-amt .amt { font-size: 22px; font-weight: var(--weight-heavy); color: var(--amount-color); font-variant-numeric: tabular-nums lining-nums; }
.rem-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.rem-chips span { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 10px; background: var(--surface-sunken); color: var(--text-secondary); font-size: 11px; font-weight: var(--weight-bold); }
.ph-row { position: relative; display: flex; gap: 11px; }
.ph-row .spine { position: relative; width: 14px; flex: none; display: flex; justify-content: center; }
.ph-row .spine i { position: absolute; top: 16px; bottom: -6px; width: 2px; background: var(--border-strong); }
.ph-row .spine em { margin-top: 4px; width: 10px; height: 10px; border-radius: 999px; background: var(--surface-card); border: 2px solid var(--border-strong); z-index: 1; }
.ph-row .spine em.f { border-color: var(--accent); }
.ph-row .c { flex: 1; min-width: 0; padding-bottom: 12px; }
.ph-row.last .c { padding-bottom: 6px; }
.ph-row .c .r1 { display: flex; align-items: center; gap: 7px; }
.ph-row .c .r1 b { font-size: 12.5px; font-weight: var(--weight-heavy); font-variant-numeric: tabular-nums; }
.ph-row .c .r2 { margin-top: 4px; font-size: 11px; font-weight: var(--weight-bold); color: var(--text-secondary); }
.ph-row .c .r2 .amt { font-size: 11.5px; color: var(--amount-color); font-variant-numeric: tabular-nums lining-nums; }
.rv-foot.one { gap: 0; }
/* vault */
.vlt-search { display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px; margin-top: 10px; border-radius: var(--radius-control); background: var(--surface-sunken); border: 1px solid var(--border); color: var(--text-tertiary); font-size: 12.5px; font-weight: var(--weight-semibold); }
.vlt-search svg { width: 14px; height: 14px; flex: none; }
.vlt-pills { display: flex; gap: 6px; margin-top: 10px; overflow: hidden; }
.vlt-pills span { flex: none; height: 28px; display: inline-flex; align-items: center; padding: 0 11px; border-radius: 999px; font-size: 11px; font-weight: var(--weight-bold); border: 1.5px solid var(--border); background: var(--surface-card); color: var(--text-secondary); }
.vlt-pills span.on { border-color: var(--accent); background: var(--surface-accent-soft); color: var(--accent-ink); }
.vlt-sort { display: flex; align-items: center; gap: 7px; margin-top: 9px; font-size: 11px; font-weight: var(--weight-bold); color: var(--text-tertiary); }
.vlt-sort .ctl { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px; border-radius: 999px; border: 1.5px solid var(--border-strong); background: var(--surface-card); color: var(--text-primary); font-weight: var(--weight-heavy); }
.vlt-sort .ctl svg { width: 12px; height: 12px; color: var(--accent-ink); }
.v-row { display: flex; align-items: center; gap: 10px; padding: 10px 2px; border-bottom: 1px solid var(--border); }
.v-row:last-child { border-bottom: none; }
.v-row .ic { width: 32px; height: 32px; border-radius: 9px; background: var(--surface-accent-soft); color: var(--accent-ink); display: grid; place-items: center; flex: none; }
.v-row .ic svg { width: 15px; height: 15px; }
.v-row .m { flex: 1; min-width: 0; }
.v-row .m b { display: block; font-size: 12.5px; font-weight: var(--weight-bold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v-row .m span { display: block; font-size: 10.5px; font-weight: var(--weight-semibold); color: var(--text-tertiary); font-variant-numeric: tabular-nums; }
.v-row .a { font-size: 12.5px; white-space: nowrap; }
.v-row .a.amt { font-weight: var(--weight-heavy); color: var(--amount-color); font-variant-numeric: tabular-nums lining-nums; }
.v-row .a.dash { color: var(--text-tertiary); font-weight: var(--weight-bold); }
.vlt-foot { margin-top: auto; padding: 9px 16px 13px; display: flex; align-items: center; justify-content: center; gap: 6px; color: var(--text-tertiary); font-size: 10.5px; font-weight: var(--weight-semibold); text-align: center; }
.vlt-foot svg { width: 12px; height: 12px; flex: none; }

/* ---- 15-language menu (header) + footer language list ---- */
.lang-menu { position: relative; }
.lang-menu summary { list-style: none; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; border: 1px solid var(--border-strong); border-radius: var(--radius-pill); background: var(--surface-card); color: var(--text-secondary); font-size: var(--text-sm); font-weight: var(--weight-bold); letter-spacing: 0.04em; padding: 7px 12px; }
.lang-menu summary::-webkit-details-marker { display: none; }
.lang-menu summary .chev { transform: rotate(90deg); }
.lang-menu[open] summary .chev { transform: rotate(-90deg); }
.lang-menu ul { position: absolute; inset-inline-end: 0; top: calc(100% + 8px); z-index: 60; margin: 0; padding: 6px; list-style: none; min-width: 180px; max-height: 70vh; overflow: auto; background: var(--surface-card); border: 1px solid var(--border-strong); border-radius: var(--radius-control); box-shadow: var(--shadow-raised); }
.lang-menu li a { display: block; padding: 8px 12px; border-radius: 10px; font-size: var(--text-md); font-weight: var(--weight-medium); color: var(--text-primary); }
.lang-menu li a:hover { background: var(--surface-sunken); }
.lang-menu li a[aria-current="true"] { background: var(--surface-accent-soft); color: var(--accent-ink); font-weight: var(--weight-bold); }
.foot-langs { display: flex; flex-direction: column; gap: 2px; }
.foot-langs a { font-size: var(--text-sm); color: var(--text-secondary); padding: 2px 0; }
.foot-langs a[aria-current="true"] { color: var(--accent-ink); font-weight: var(--weight-bold); }
.legal-note { margin-top: 10px; font-size: var(--text-sm); color: var(--text-tertiary); max-width: 26ch; }

/* ---- RTL: flip the few physical leftovers; flex/grid flip automatically ---- */
[dir="rtl"] .nav-links { margin-left: 0; margin-right: auto; }
[dir="rtl"] .nav-right { margin-left: 0; margin-right: var(--space-6); }
[dir="rtl"] .nav-links + .nav-right { margin-left: 0; margin-right: var(--space-2); }
[dir="rtl"] body:not([data-hero="B"]) .phone { transform: rotate(-2deg); }

/* ---- WP-7: keep the email CTA inside the first mobile viewport even in the
   most verbose locales (pt/pl run ~2 lines longer than en) — tighten the
   hero's vertical rhythm on small screens only. ---- */
@media (max-width: 480px) {
  .hero { padding-top: 28px; }
  .hero h1 { font-size: clamp(32px, 9.2vw, 38px); }
  .hero .lede { margin-top: var(--space-4); }
  .hero-cta { margin-top: var(--space-5); }
  .badge { margin-bottom: 4px; }
}

/* ---- WP-7 fix: the hero grid NEVER stacked on small screens, so the phone
   bled off-canvas (invisible-but-harmless in LTR, a fully blank first paint
   in RTL). Align with the design bundle: stack under 900px, phone centered
   below the copy, no tilt. Also compress the header row so long localized
   CTAs (ja/de/ru) stay inside 390px. ---- */
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; justify-items: stretch; }
  .phone-wrap { justify-content: center; }
  body:not([data-hero="B"]) .phone,
  [dir="rtl"] body:not([data-hero="B"]) .phone { transform: none; }
}
@media (max-width: 540px) {
  .nav { gap: 10px; }
  .nav-right { gap: 8px; margin-inline-start: auto; }
  .nav-right .btn { font-size: 13px; padding: 8px 12px; }
  .lang-menu summary { padding: 7px 9px; }
  .brand { font-size: 18px; }
  .brand .mark { width: 30px; height: 30px; }
}