/* Mostanad public website (P37, BIBLE §25, §33; redesign D-137). Pure CSS, no framework, no JavaScript.
   Tokens follow frontend/src/shared/styles/tokens.css and the Atlas theme (themes.css).
   Logical properties only: the same rules serve French (LTR) and Arabic (RTL).
   No horizontal scroll from 320 px: grid tracks use minmax(0, …), long words wrap, tables scroll in their own box. */
@layer reset, tokens, base, components, utilities;

/* Readex Pro (OFL 1.1, variable 160–700), the brand face; same files as packages/render/fonts. */
@font-face { font-family: "Readex Pro"; src: url("fonts/readex-pro-arabic-var.woff2") format("woff2"); font-weight: 160 700; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: "Readex Pro"; src: url("fonts/readex-pro-latin-var.woff2") format("woff2"); font-weight: 160 700; font-display: swap; 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; }
@font-face { font-family: "Readex Pro"; src: url("fonts/readex-pro-latin-ext-var.woff2") format("woff2"); font-weight: 160 700; font-display: swap; 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; }

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  body, h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
  ul[role="list"], ol[role="list"] { padding: 0; list-style: none; }
  img, svg, video, iframe { display: block; max-inline-size: 100%; }
  input, button, textarea, select { font: inherit; color: inherit; }
  table { border-collapse: collapse; }
}

@layer tokens {
  :root {
    color-scheme: light dark;
    --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px;
    --radius-control: 10px; --radius-card: 16px; --radius-sheet: 24px; --radius-pill: 999px;
    /* Readex Pro: the Mostanad brand face for Latin and Arabic (OFL, self-hosted in site/fonts, D-213). */
    --font-ui: "Readex Pro", system-ui, "Segoe UI", Roboto, sans-serif;
    --font-ui-ar: "Readex Pro", "Noto Sans Arabic", "Segoe UI", Tahoma, system-ui, sans-serif;
    --text-xs: 12px; --text-sm: 14px; --text-md: 16px; --text-lg: clamp(17px, 1.6vw, 19px); --text-xl: clamp(20px, 2.2vw, 24px);
    --text-2xl: clamp(26px, 3.6vw, 36px); --text-3xl: clamp(31px, 5.4vw, 56px);
    --content-max: 1180px;
    --header-height: 64px;
    --control-height: 44px;
    --duration-fast: 150ms;
    --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
    --shadow-soft: 0 1px 2px rgb(15 20 27 / 0.05), 0 4px 14px rgb(15 20 27 / 0.05);
    --shadow-raised: 0 12px 32px rgb(15 20 27 / 0.12), 0 2px 6px rgb(15 20 27 / 0.06);

    /* The Mostanad theme (brand kit v1.0, same values as the app's mostanad-light / mostanad-dark, D-213). */
    --color-bg: #F5F2EA;
    --color-surface: #FFFFFF;
    --color-surface-2: #FAF8F3;
    --color-text: #16201D;
    --color-text-muted: #5B5E58;
    --color-border: #E9E4D8;
    --color-border-input: #7B7A72;
    --color-primary: #0F4C45;
    --color-primary-strong: #0B3D37;
    --color-primary-soft: #EEF6F4;
    --color-on-primary: #FFFFFF;
    --color-accent: #E9A23B;
    --color-accent-soft: #FDF7EC;
    --color-on-accent: #16201D;
    --color-success: #1B7444;
    --color-danger: #B93A27;
    /* The kit's amber ring is too light on paper (1.9:1): the focus ring is green in light mode, amber in dark. */
    --color-focus: #0F4C45;
    --color-paper: #FFFFFF;
    --color-on-paper: #111111;
    --color-paper-line: #E9E4D8;
    --color-paper-stamp: #0F4C45;
    --color-glow-1: #D5EAE6;
    --color-glow-2: #FBEACB;

    --cat-blue: #2F6FD6; --cat-teal: #12858A; --cat-green: #2E8B3E; --cat-amber: #B7791F; --cat-orange: #D0631A;
    --cat-red: #C8372D; --cat-pink: #C2417F; --cat-violet: #7B4FC9; --cat-indigo: #4A55C8; --cat-slate: #5B6B80;
  }

  @media (prefers-color-scheme: dark) {
    :root {
      --color-bg: #0B1A18;
      --color-surface: #12241F;
      --color-surface-2: #183029;
      --color-text: #EAF2EF;
      --color-text-muted: #A9BDB7;
      --color-border: #23403A;
      --color-border-input: #6F8C85;
      --color-primary: #7DBAB0;
      --color-primary-strong: #ADD5CE;
      --color-primary-soft: #16322D;
      --color-on-primary: #051F1C;
      --color-accent: #ECAE4C;
      --color-accent-soft: #2E2412;
      --color-on-accent: #16201D;
      --color-success: #82CB96;
      --color-danger: #EA8881;
      --color-focus: #F0BE66;
      --color-glow-1: #133A34;
      --color-glow-2: #3A2A0E;
      --shadow-soft: 0 1px 2px rgb(0 0 0 / 0.3);
      --shadow-raised: 0 12px 32px rgb(0 0 0 / 0.45);
    }
  }
}

@layer base {
  html { -webkit-text-size-adjust: 100%; scroll-padding-block-start: calc(var(--header-height) + var(--space-4)); }
  /* Smooth only for in-page links (focus moves inside the page): scripted scrolls stay instant. */
  html:focus-within { scroll-behavior: smooth; }
  body {
    min-block-size: 100dvh;
    display: flex; flex-direction: column;
    background: var(--color-bg); color: var(--color-text);
    font: var(--text-md)/1.6 var(--font-ui);
    text-rendering: optimizeLegibility;
    overflow-wrap: break-word;
  }
  :lang(ar) body, body:lang(ar) { font-family: var(--font-ui-ar); line-height: 1.75; }
  main { flex: 1; }
  h1, h2, h3, h4 { line-height: 1.2; text-wrap: balance; overflow-wrap: break-word; }
  :lang(ar) h1, :lang(ar) h2, :lang(ar) h3 { line-height: 1.45; }
  h1 { font-size: var(--text-3xl); letter-spacing: -0.025em; }
  h2 { font-size: var(--text-2xl); letter-spacing: -0.015em; }
  h3 { font-size: var(--text-lg); }
  :lang(ar) h1, :lang(ar) h2 { letter-spacing: 0; }
  p { text-wrap: pretty; }
  a { color: var(--color-primary); text-underline-offset: 0.2em; }
  a:hover { text-decoration-thickness: 2px; }
  :focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; border-radius: 4px; }
  ::selection { background: var(--color-primary); color: var(--color-on-primary); }
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
  }
}

@layer components {
  .wrap { inline-size: min(100% - 2 * var(--space-4), var(--content-max)); margin-inline: auto; }
  .section { padding-block: var(--space-8); }
  @media (width >= 960px) { .section { padding-block: var(--space-9); } }
  .section.alt { background: var(--color-surface); border-block: 1px solid var(--color-border); }
  .section-head { max-inline-size: 46rem; margin-block-end: var(--space-6); }
  .section-head.center { margin-inline: auto; text-align: center; }
  .center .audience { justify-content: center; }
  .section-head p { margin-block-start: var(--space-3); color: var(--color-text-muted); font-size: var(--text-lg); }
  .eyebrow { display: inline-block; margin-block-end: var(--space-2); color: var(--color-primary); font-size: var(--text-sm); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
  :lang(ar) .eyebrow { letter-spacing: 0; }
  .more { margin-block-start: var(--space-5); font-weight: 600; }

  .skip { position: absolute; inset-inline-start: var(--space-4); inset-block-start: -100px; z-index: 40; padding: var(--space-2) var(--space-4); background: var(--color-primary); color: var(--color-on-primary); border-radius: var(--radius-control); }
  .skip:focus { inset-block-start: var(--space-2); }

  /* Header: brand, page links and account buttons. Languages live in the menu (D-137). */
  .top { position: sticky; inset-block-start: 0; z-index: 30; background: color-mix(in srgb, var(--color-bg) 86%, transparent); backdrop-filter: blur(12px); border-block-end: 1px solid var(--color-border); }
  .top .wrap { display: flex; align-items: center; gap: var(--space-3); min-block-size: var(--header-height); }
  .brand { display: inline-flex; flex: none; align-items: center; gap: var(--space-2); min-block-size: var(--control-height); color: var(--color-text); font-size: var(--text-lg); font-weight: 800; text-decoration: none; }
  .brand svg { inline-size: 32px; block-size: 32px; }
  /* Brand logo (D-213): its own height, kit clear space (≈ 1/5 of its height) kept by the padding. */
  /* The img keeps its height attribute (32 px in the bar, 30 px in the footer) and its width follows the ratio;
     "block-size: auto" here let the SVG take its own (very large) size (qa-a-shell: 274 px sideways at 1024 px). */
  .brand-logo { display: block; inline-size: auto; max-inline-size: none; }
  .brand-logo img { display: block; inline-size: auto; max-inline-size: none; }
  .brand .brand-logo { padding-block: 6px; }
  .nav { display: flex; align-items: center; gap: var(--space-1); min-inline-size: 0; margin-inline-start: auto; }
  .nav a { display: inline-flex; align-items: center; min-block-size: var(--control-height); padding: 0 var(--space-3); border-radius: var(--radius-control); color: var(--color-text); font-weight: 500; text-decoration: none; white-space: nowrap; }
  .nav a:hover, .nav a[aria-current="page"] { background: var(--color-primary-soft); color: var(--color-primary); }
  .top-actions { display: flex; flex: none; align-items: center; gap: var(--space-2); }
  .btn-sm { min-block-size: 40px; padding-inline: var(--space-4); }

  /* Menu (native <details>): every page, the account links and the language switch. */
  .menu { position: relative; flex: none; }
  .menu > summary { display: inline-flex; align-items: center; gap: var(--space-2); min-block-size: var(--control-height); padding-inline: var(--space-3); border: 1px solid var(--color-border-input); border-radius: var(--radius-control); background: var(--color-surface); cursor: pointer; list-style: none; font-weight: 600; }
  .menu > summary::-webkit-details-marker { display: none; }
  .menu > summary::before { content: ""; inline-size: 18px; block-size: 12px; background: linear-gradient(currentColor 0 0) top / 100% 2px no-repeat, linear-gradient(currentColor 0 0) center / 100% 2px no-repeat, linear-gradient(currentColor 0 0) bottom / 100% 2px no-repeat; }
  .menu[open] > summary { background: var(--color-primary-soft); border-color: var(--color-primary); color: var(--color-primary); }
  .menu-panel { position: absolute; inset-inline-end: 0; inset-block-start: calc(100% + var(--space-2)); inline-size: min(20rem, 100vw - 2 * var(--space-4)); max-block-size: calc(100dvh - var(--header-height) - var(--space-4)); overflow-y: auto; display: grid; gap: var(--space-4); padding: var(--space-4); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-card); box-shadow: var(--shadow-raised); }
  .menu-links { display: grid; gap: var(--space-1); }
  .menu-links a { display: flex; align-items: center; min-block-size: var(--control-height); padding-inline: var(--space-3); border-radius: var(--radius-control); color: var(--color-text); font-weight: 500; text-decoration: none; }
  .menu-links a:hover, .menu-links a[aria-current="page"] { background: var(--color-primary-soft); color: var(--color-primary); }
  .menu-account { display: grid; gap: var(--space-2); padding-block-start: var(--space-4); border-block-start: 1px solid var(--color-border); }
  .menu-lang { padding-block-start: var(--space-4); border-block-start: 1px solid var(--color-border); }
  .menu-title { margin-block-end: var(--space-2); color: var(--color-text-muted); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
  :lang(ar) .menu-title { letter-spacing: 0; }
  .lang { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); padding: 0; list-style: none; }
  .lang a { display: flex; align-items: center; justify-content: center; min-block-size: var(--control-height); padding-inline: var(--space-2); border: 1px solid var(--color-border); border-radius: var(--radius-control); color: var(--color-text); text-decoration: none; }
  .lang a:hover { border-color: var(--color-primary); color: var(--color-primary); }
  .lang a[aria-current="true"] { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-on-primary); font-weight: 700; }
  @media (width >= 960px) { .menu-account, .menu-links .on-wide-hidden { display: none; } }
  @media (width < 960px) {
    .top .nav { display: none; }
    .top-actions { margin-inline-start: auto; }
    .top-actions .btn-ghost { display: none; }
    .menu-panel { position: fixed; inset-inline: 0; inset-block-start: var(--header-height); inline-size: auto; max-block-size: calc(100dvh - var(--header-height)); border-radius: 0 0 var(--radius-card) var(--radius-card); border-inline: 0; }
  }
  @media (width < 600px) { .top-actions { display: none; } .menu { margin-inline-start: auto; } }
  /* 960–1199 px (tablets in landscape, small laptops): five links, sign-up and the menu did not fit
     (46 px too wide at 1024 px). Tighter links; "Se connecter" moves into the menu. */
  @media (width < 1200px) {
    .nav a { padding-inline: var(--space-2); }
    .top-actions .btn-ghost { display: none; }
  }
  @media (960px <= width < 1200px) {
    .menu-account { display: grid; }
    .menu-account .btn-primary { display: none; }
  }

  /* Buttons */
  .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-block-size: var(--control-height); max-inline-size: 100%; padding-inline: var(--space-5); border: 1px solid transparent; border-radius: var(--radius-control); font-weight: 650; line-height: 1.25; text-align: center; text-decoration: none; cursor: pointer; transition: background-color var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out); }
  .btn:active { transform: translateY(1px); }
  .btn-primary { background: var(--color-primary); color: var(--color-on-primary); box-shadow: 0 6px 18px color-mix(in srgb, var(--color-primary) 28%, transparent); }
  .btn-primary:hover { background: var(--color-primary-strong); }
  .btn-accent { background: var(--color-accent); color: var(--color-on-accent); }
  .btn-accent:hover { background: color-mix(in srgb, var(--color-accent) 88%, white); }
  .btn-ghost { background: var(--color-surface); color: var(--color-text); border-color: var(--color-border-input); }
  .btn-ghost:hover { background: var(--color-surface-2); }
  .btn-lg { min-block-size: 54px; padding-inline: var(--space-6); font-size: var(--text-lg); }
  .btn-block { inline-size: 100%; }
  .btn .arrow { display: inline-block; transition: translate var(--duration-fast) var(--ease-out); }
  .btn:hover .arrow { translate: 3px 0; }
  :dir(rtl) .btn .arrow { scale: -1 1; }
  :dir(rtl) .btn:hover .arrow { translate: -3px 0; }
  .actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
  @media (width < 480px) { .actions > .btn { flex: 1 1 100%; } }

  /* Hero */
  .hero { position: relative; isolation: isolate; overflow: hidden; padding-block: var(--space-7) var(--space-8); }
  .hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background:
      radial-gradient(40rem 26rem at 90% -5%, var(--color-glow-1), transparent 70%),
      radial-gradient(30rem 22rem at 0% 100%, var(--color-glow-2), transparent 70%); }
  :dir(rtl) .hero::before { scale: -1 1; }
  .hero .wrap { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); align-items: center; gap: var(--space-7); }
  .pill { display: inline-flex; align-items: center; gap: var(--space-2); max-inline-size: 100%; margin-block-end: var(--space-4); padding: var(--space-1) var(--space-3); border: 1px solid color-mix(in srgb, var(--color-primary) 30%, transparent); border-radius: var(--radius-pill); background: color-mix(in srgb, var(--color-surface) 70%, transparent); color: var(--color-primary); font-size: var(--text-sm); font-weight: 650; }
  .pill::before { content: ""; flex: none; inline-size: 8px; block-size: 8px; border-radius: 50%; background: var(--color-success); box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-success) 20%, transparent); }
  .hero .lead { margin-block: var(--space-4) var(--space-5); color: var(--color-text-muted); font-size: var(--text-lg); max-inline-size: 38rem; }
  .points { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); margin-block-start: var(--space-4); color: var(--color-text-muted); font-size: var(--text-sm); font-weight: 500; }
  .points li { display: inline-flex; align-items: center; gap: var(--space-2); }
  .points li::before { content: ""; flex: none; inline-size: 10px; block-size: 6px; margin-block-start: -3px; border-inline-start: 2px solid var(--color-success); border-block-end: 2px solid var(--color-success); rotate: -45deg; }
  :dir(rtl) .points li::before { rotate: 45deg; }
  .hero .note { margin-block-start: var(--space-3); color: var(--color-text-muted); font-size: var(--text-sm); max-inline-size: 38rem; }
  .finder { margin-block-start: var(--space-6); max-inline-size: 34rem; }
  .finder > p { margin-block-end: var(--space-2); color: var(--color-text-muted); font-size: var(--text-sm); font-weight: 600; }
  .search { display: flex; gap: var(--space-2); inline-size: 100%; max-inline-size: 34rem; padding: var(--space-1); background: var(--color-surface); border: 1px solid var(--color-border-input); border-radius: var(--radius-card); box-shadow: var(--shadow-soft); }
  .search input { flex: 1 1 0; inline-size: 0; min-inline-size: 0; padding-inline: var(--space-3); border: 0; background: transparent; outline: none; }
  .search .btn { flex: none; padding-inline: var(--space-4); }
  .search:focus-within { outline: 3px solid var(--color-accent); outline-offset: 2px; }
  .audience { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-block-start: var(--space-5); }
  .audience li { padding: var(--space-1) var(--space-3); border-radius: var(--radius-pill); background: var(--color-surface-2); color: var(--color-text); font-size: var(--text-sm); }

  /* Hero illustration: the app drawn in CSS (no image). */
  .art { position: relative; padding: var(--space-5); }
  .mock { position: relative; border: 1px solid var(--color-border); border-radius: var(--radius-sheet); background: var(--color-surface); box-shadow: var(--shadow-raised); overflow: hidden; }
  .mock-bar { display: flex; gap: 6px; padding: var(--space-3) var(--space-4); border-block-end: 1px solid var(--color-border); background: var(--color-surface-2); }
  .mock-bar i { inline-size: 10px; block-size: 10px; border-radius: 50%; background: var(--color-border-input); opacity: 0.5; }
  .mock-body { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr); gap: var(--space-4); padding: var(--space-5); }
  .mock-form { display: grid; align-content: start; gap: var(--space-2); }
  .mock-form b { margin-block-end: var(--space-1); font-size: var(--text-sm); }
  .mock-form .l { display: block; block-size: 8px; inline-size: 55%; border-radius: 4px; background: var(--color-border); }
  .mock-form .f { display: block; block-size: 30px; margin-block-end: var(--space-2); border: 1px solid var(--color-border); border-radius: 8px; background: var(--color-bg); }
  .mock-form .b { display: block; margin-block-start: var(--space-2); padding: var(--space-2); border-radius: 8px; background: var(--color-primary); color: var(--color-on-primary); font-size: var(--text-xs); font-weight: 700; text-align: center; }
  .paper { position: relative; aspect-ratio: 1 / 1.35; padding: var(--space-5) var(--space-4); background: var(--color-paper); color: var(--color-on-paper); border: 1px solid var(--color-paper-line); border-radius: 6px; box-shadow: var(--shadow-soft); }
  .paper b { display: block; margin-block-end: var(--space-3); font-size: var(--text-sm); text-align: center; }
  .paper i { display: block; block-size: 6px; margin-block: 9px; background: var(--color-paper-line); border-radius: 3px; }
  .paper i:nth-of-type(3n) { inline-size: 72%; }
  .paper i:nth-of-type(4n) { inline-size: 86%; }
  .paper .stamp { position: absolute; inset-inline-end: var(--space-3); inset-block-end: var(--space-3); padding: 2px var(--space-2); border: 2px solid var(--color-paper-stamp); border-radius: 6px; color: var(--color-paper-stamp); font-size: 10px; font-weight: 800; rotate: -8deg; }
  .chip { position: absolute; display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-pill); background: var(--color-surface); box-shadow: var(--shadow-raised); font-size: var(--text-sm); font-weight: 650; white-space: nowrap; }
  .chip::before { content: ""; inline-size: 10px; block-size: 10px; border-radius: 50%; background: var(--chip, var(--color-success)); }
  .chip-a { inset-block-start: var(--space-1); inset-inline-start: 0; }
  .chip-b { inset-block-end: 0; inset-inline-end: var(--space-2); --chip: var(--color-accent); }
  @media (width < 880px) {
    .hero { padding-block: var(--space-6) var(--space-7); }
    .hero .wrap { grid-template-columns: minmax(0, 1fr); }
    .hero .art { display: none; }
  }

  /* Numbers */
  .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: var(--space-3); }
  .stats li { display: grid; gap: var(--space-1); padding: var(--space-4) var(--space-5); border: 1px solid var(--color-border); border-radius: var(--radius-card); background: var(--color-surface); box-shadow: var(--shadow-soft); }
  .stats strong { color: var(--color-primary); font-size: var(--text-2xl); font-weight: 800; line-height: 1.1; }
  .stats span { color: var(--color-text-muted); font-size: var(--text-sm); }
  .trust { padding-block: 0 var(--space-6); margin-block-start: calc(-1 * var(--space-5)); position: relative; }

  /* Grids and cards */
  .grid { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); }
  .grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
  .grid-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
  .card { position: relative; min-inline-size: 0; padding: var(--space-5); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-card); transition: border-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out), translate var(--duration-fast) var(--ease-out); }
  .card:hover { border-color: color-mix(in srgb, var(--hue, var(--color-primary)) 45%, var(--color-border)); box-shadow: var(--shadow-soft); }
  .card h3, .card .h3 { margin-block-end: var(--space-2); }
  .h3 { font-size: var(--text-lg); }
  .card p { color: var(--color-text-muted); }
  .card a.stretch::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
  .card:has(a.stretch:hover) { border-color: var(--color-primary); }
  .card-lg { padding: var(--space-6); border-radius: var(--radius-sheet); }
  .card-lg h3 { font-size: var(--text-xl); }
  .dot { display: inline-grid; place-items: center; inline-size: 48px; block-size: 48px; margin-block-end: var(--space-4); border-radius: 14px; background: color-mix(in srgb, var(--hue, var(--color-primary)) 14%, transparent); color: var(--hue, var(--color-primary)); font-weight: 800; }
  .dot svg { inline-size: 24px; block-size: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .badge { display: inline-block; padding: 2px var(--space-2); border-radius: var(--radius-pill); background: var(--color-surface-2); color: var(--color-text-muted); font-size: var(--text-xs); font-weight: 700; vertical-align: middle; white-space: nowrap; }
  .badge-accent { background: var(--color-accent-soft); color: var(--color-text); }
  .hue-blue { --hue: var(--cat-blue); } .hue-teal { --hue: var(--cat-teal); } .hue-green { --hue: var(--cat-green); } .hue-amber { --hue: var(--cat-amber); }
  .hue-orange { --hue: var(--cat-orange); } .hue-red { --hue: var(--cat-red); } .hue-pink { --hue: var(--cat-pink); } .hue-violet { --hue: var(--cat-violet); }
  .hue-indigo { --hue: var(--cat-indigo); } .hue-slate { --hue: var(--cat-slate); }

  /* Steps */
  .steps { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); counter-reset: step; }
  .steps > li { counter-increment: step; position: relative; min-inline-size: 0; padding: var(--space-5); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-card); }
  .steps > li::before { content: counter(step); display: inline-grid; place-items: center; inline-size: 40px; block-size: 40px; margin-block-end: var(--space-3); border-radius: 12px; background: var(--color-primary); color: var(--color-on-primary); font-weight: 800; }
  .steps h3 { margin-block-end: var(--space-1); }
  .steps p { color: var(--color-text-muted); }
  .usecases { padding-block-end: var(--space-7); }
  .usecase + .usecase { margin-block-start: var(--space-7); }
  .usecase h2 { margin-block-end: var(--space-2); }
  .usecase > p { margin-block-end: var(--space-5); color: var(--color-text-muted); font-size: var(--text-lg); }

  /* Pricing */
  .plans { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); align-items: stretch; }
  .plan { display: flex; flex-direction: column; gap: var(--space-3); min-inline-size: 0; padding: var(--space-6) var(--space-5); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-sheet); }
  .plan.featured { border: 2px solid var(--color-primary); box-shadow: var(--shadow-raised); background: linear-gradient(180deg, var(--color-primary-soft), var(--color-surface) 40%); }
  .plan h3 { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); font-size: var(--text-xl); }
  .plan p.price { color: var(--color-text); font-size: var(--text-2xl); font-weight: 800; }
  .plan .price small { color: var(--color-text-muted); font-size: var(--text-md); font-weight: 500; }
  /* Promotional price (owner notes A1): the list price struck through, the end date in a badge, the monthly price. */
  .plan .price-was { color: var(--color-text-muted); font-size: var(--text-md); font-weight: 500; margin-inline-start: var(--space-2); }
  .plan p.price-monthly { margin-block-start: calc(-1 * var(--space-2)); font-size: var(--text-sm); }
  .plan .plan-promo { justify-self: start; inline-size: fit-content; }
  .plan p { color: var(--color-text-muted); }
  .plan ul { display: grid; align-content: start; gap: var(--space-2); padding: 0; list-style: none; flex: 1; }
  .plan li { position: relative; padding-inline-start: 28px; }
  .plan li::before { content: ""; position: absolute; inset-inline-start: 2px; inset-block-start: 0.45em; inline-size: 14px; block-size: 8px; border-inline-start: 2.5px solid var(--color-success); border-block-end: 2.5px solid var(--color-success); rotate: -45deg; }
  :dir(rtl) .plan li::before { rotate: 45deg; }
  .plans-note { margin-block-start: var(--space-4); color: var(--color-text-muted); text-align: center; }
  /* The compare table scrolls inside its own box; position: relative keeps the .sr-only cells inside it. */
  .table-wrap { position: relative; max-inline-size: 100%; overflow-x: auto; border: 1px solid var(--color-border); border-radius: var(--radius-card); background: var(--color-surface); }
  .compare { inline-size: 100%; min-inline-size: 560px; }
  .compare caption { padding: var(--space-4); font-weight: 700; text-align: start; }
  .compare th, .compare td { padding: var(--space-3) var(--space-4); border-block-start: 1px solid var(--color-border); text-align: center; }
  .compare th[scope="row"] { position: sticky; inset-inline-start: 0; z-index: 1; background: var(--color-surface); font-weight: 500; text-align: start; }
  .compare thead th { background: var(--color-surface-2); font-size: var(--text-lg); }
  .compare .yes { color: var(--color-success); font-weight: 800; }
  .compare .no { color: var(--color-text-muted); }

  /* FAQ */
  .faq { display: grid; gap: var(--space-3); }
  .faq details { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-card); }
  .faq details[open] { border-color: color-mix(in srgb, var(--color-primary) 40%, var(--color-border)); }
  .faq summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-4) var(--space-5); cursor: pointer; font-weight: 650; list-style: none; }
  .faq summary::-webkit-details-marker { display: none; }
  .faq summary::after { content: "+"; display: inline-grid; place-items: center; flex: none; inline-size: 28px; block-size: 28px; border-radius: 50%; background: var(--color-primary-soft); color: var(--color-primary); font-size: var(--text-lg); line-height: 1; }
  .faq details[open] summary::after { content: "−"; }
  .faq .answer { padding: 0 var(--space-5) var(--space-5); color: var(--color-text-muted); overflow-wrap: anywhere; }
  .faq .answer > * + * { margin-block-start: var(--space-3); }
  .faq-topic + .faq-topic { margin-block-start: var(--space-7); }
  .faq-topic h2 { margin-block-end: var(--space-4); font-size: var(--text-xl); }
  .split { display: grid; gap: var(--space-6); grid-template-columns: minmax(0, 1fr); }
  @media (width >= 960px) { .split { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: var(--space-8); } }

  /* Call to action band */
  .cta { position: relative; isolation: isolate; overflow: hidden; padding: var(--space-7) var(--space-5); border-radius: var(--radius-sheet); background: linear-gradient(135deg, var(--color-primary), var(--color-primary-strong)); color: var(--color-on-primary); text-align: center; }
  .cta::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(24rem 14rem at 100% 0%, color-mix(in srgb, var(--color-accent) 35%, transparent), transparent 70%), radial-gradient(20rem 14rem at 0% 100%, color-mix(in srgb, var(--color-on-primary) 12%, transparent), transparent 70%); }
  .cta h2 { max-inline-size: 36rem; margin-inline: auto; }
  .cta p { max-inline-size: 38rem; margin: var(--space-3) auto var(--space-5); opacity: 0.94; font-size: var(--text-lg); }
  .cta .actions { justify-content: center; }
  .cta .btn-ghost { background: transparent; color: var(--color-on-primary); border-color: currentColor; }
  .cta .btn-ghost:hover { background: color-mix(in srgb, var(--color-on-primary) 12%, transparent); }

  /* Sticky call to action on phones (pure CSS; the body keeps room for it). */
  .sticky-cta { display: none; }
  @media (width < 760px) {
    body:has(.sticky-cta) { padding-block-end: calc(76px + env(safe-area-inset-bottom, 0px)); }
    .sticky-cta { display: block; position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 25; padding: var(--space-3) var(--space-4) calc(var(--space-3) + env(safe-area-inset-bottom, 0px)); background: color-mix(in srgb, var(--color-surface) 92%, transparent); backdrop-filter: blur(12px); border-block-start: 1px solid var(--color-border); }
  }

  /* Page heads, text pages */
  .page-head { padding-block: var(--space-7) var(--space-5); }
  .page-head p { margin-block-start: var(--space-3); color: var(--color-text-muted); font-size: var(--text-lg); max-inline-size: 46rem; }
  .crumbs ol { display: flex; flex-wrap: wrap; gap: var(--space-2); padding: 0; margin-block-end: var(--space-3); list-style: none; color: var(--color-text-muted); font-size: var(--text-sm); }
  .crumbs li + li::before { content: "/"; margin-inline-end: var(--space-2); }
  .prose { max-inline-size: 46rem; padding-block-end: var(--space-8); overflow-wrap: anywhere; }
  .prose > * + * { margin-block-start: var(--space-4); }
  .prose h2 { margin-block-start: var(--space-6); font-size: var(--text-xl); }
  .prose h3 { margin-block-start: var(--space-5); }
  .prose ul, .prose ol { padding-inline-start: var(--space-5); }
  .prose li + li { margin-block-start: var(--space-2); }
  .prose table { display: block; max-inline-size: 100%; overflow-x: auto; }
  .prose th, .prose td { padding: var(--space-2); border: 1px solid var(--color-border); text-align: start; }
  .prose blockquote { padding-inline-start: var(--space-4); border-inline-start: 4px solid var(--color-primary); color: var(--color-text-muted); }
  .prose pre { max-inline-size: 100%; overflow-x: auto; }
  .updated { color: var(--color-text-muted); font-size: var(--text-sm); }
  .facts { display: grid; grid-template-columns: minmax(0, max-content) minmax(0, 1fr); gap: var(--space-2) var(--space-5); overflow-wrap: anywhere; }
  @media (width < 480px) { .facts { grid-template-columns: minmax(0, 1fr); } .facts dd + dt { margin-block-start: var(--space-2); } }
  .facts dt { color: var(--color-text-muted); }
  .legal-logo { display: block; block-size: 64px; inline-size: auto; max-inline-size: 240px; object-fit: contain; margin-block-end: var(--space-4); }
  .warn { padding: var(--space-4); border-inline-start: 4px solid var(--color-accent); background: color-mix(in srgb, var(--color-accent) 10%, var(--color-surface)); border-radius: var(--radius-control); }

  /* Help center */
  .help { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--space-7); align-items: start; padding-block-end: var(--space-8); }
  @media (width < 880px) { .help { grid-template-columns: minmax(0, 1fr); } }
  .results { display: grid; gap: var(--space-3); padding: 0; list-style: none; overflow-wrap: anywhere; }
  .results li { padding: var(--space-4); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-card); }
  .results a { display: inline-flex; align-items: center; min-block-size: var(--control-height); font-weight: 650; }
  .results p { margin-block-start: var(--space-1); color: var(--color-text-muted); font-size: var(--text-sm); }
  .form { display: grid; gap: var(--space-4); padding: var(--space-5); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-sheet); }
  .field { display: grid; gap: var(--space-1); min-inline-size: 0; }
  .field label, .check { font-weight: 600; }
  .field input, .field select, .field textarea { inline-size: 100%; min-inline-size: 0; min-block-size: var(--control-height); padding: var(--space-2) var(--space-3); background: var(--color-surface); border: 1px solid var(--color-border-input); border-radius: var(--radius-control); }
  .field textarea { min-block-size: 140px; resize: vertical; }
  .field [aria-invalid="true"] { border-color: var(--color-danger); }
  .field .error, .form .error { color: var(--color-danger); font-size: var(--text-sm); }
  .check { display: flex; align-items: flex-start; gap: var(--space-2); font-weight: 500; }
  .check input { flex: none; inline-size: 20px; block-size: 20px; margin-block-start: 3px; accent-color: var(--color-primary); }
  .hp { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); }
  .notice { padding: var(--space-4); border-radius: var(--radius-control); background: color-mix(in srgb, var(--color-success) 12%, var(--color-surface)); border: 1px solid var(--color-success); }
  .mail { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-block-start: var(--space-4); overflow-wrap: anywhere; }
  .mail a { display: inline-flex; align-items: center; min-inline-size: 0; min-block-size: var(--control-height); }
  .video { aspect-ratio: 16 / 9; inline-size: 100%; border: 0; border-radius: var(--radius-card); background: var(--color-on-paper); }

  /* Footer */
  .foot { margin-block-start: var(--space-8); padding-block: var(--space-7) var(--space-5); background: var(--color-surface); border-block-start: 1px solid var(--color-border); color: var(--color-text-muted); font-size: var(--text-sm); }
  .foot .cols { display: grid; gap: var(--space-5); grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)); }
  @media (width < 760px) { .foot .cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } .foot .cols > :first-child { grid-column: 1 / -1; } }
  .foot h2 { margin-block-end: var(--space-3); color: var(--color-text); font-size: var(--text-md); }
  .foot ul { display: grid; gap: var(--space-2); padding: 0; list-style: none; overflow-wrap: anywhere; }
  .foot a { color: var(--color-text-muted); }
  .foot a:hover { color: var(--color-primary); }
  .foot .brand { font-size: var(--text-lg); }
  .foot .bottom { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-3); margin-block-start: var(--space-6); padding-block-start: var(--space-4); border-block-start: 1px solid var(--color-border); }
  .foot .foot-lang { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); padding: 0; list-style: none; }
  .foot-lang a[aria-current="true"] { color: var(--color-text); font-weight: 700; }
}

@layer utilities {
  .center { text-align: center; }
  .muted { color: var(--color-text-muted); }
  .mt-5 { margin-block-start: var(--space-5); }
  .mt-6 { margin-block-start: var(--space-6); }
  .sr-only { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  [dir="ltr"] { unicode-bidi: isolate; }
}