/* Mostanad public website (P37, BIBLE §25, §33; redesign D-137; « Concept C, clean and friendly », D-545).
   Pure CSS, no framework, no JavaScript. Light and dark follow prefers-color-scheme.
   Logical properties only: the same rules serve French, English, Spanish (LTR) and Arabic (RTL).
   No horizontal scroll from 320 px: grid tracks use minmax(0, …), long words wrap, tables scroll in their own box.
   Colours live in the token layer only; the illustrations are inline SVG in the views. */
@layer reset, tokens, base, components, utilities;

/* Readex Pro (OFL 1.1, variable 160–700): running text, 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; }
/* Baloo Bhaijaan 2 (OFL 1.1, variable 400–800): headings only; Fontsource subsets, licence in fonts/OFL-baloo-bhaijaan-2.txt. */
@font-face { font-family: "Baloo Bhaijaan 2"; src: url("fonts/baloo-bhaijaan-2-arabic-var.woff2") format("woff2"); font-weight: 400 800; 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: "Baloo Bhaijaan 2"; src: url("fonts/baloo-bhaijaan-2-latin-var.woff2") format("woff2"); font-weight: 400 800; 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: "Baloo Bhaijaan 2"; src: url("fonts/baloo-bhaijaan-2-latin-ext-var.woff2") format("woff2"); font-weight: 400 800; 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: 88px;
    --radius-control: 14px; --radius-card: 24px; --radius-sheet: 30px; --radius-band: 44px; --radius-pill: 999px;
    /* Readex Pro for text, Baloo Bhaijaan 2 for headings; real fallbacks for Latin and Arabic. */
    --font-text: "Readex Pro", "Noto Sans Arabic", "Segoe UI", Tahoma, system-ui, sans-serif;
    --font-head: "Baloo Bhaijaan 2", "Readex Pro", "Noto Sans Arabic", "Segoe UI", Tahoma, system-ui, sans-serif;
    --text-xs: 13px; --text-sm: 14.5px; --text-md: 16.5px; --text-lg: clamp(17px, 1.6vw, 19px); --text-h3: clamp(19px, 1.8vw, 22px);
    --text-xl: clamp(21px, 2.2vw, 26px); --text-2xl: clamp(28px, 3.6vw, 44px); --text-3xl: clamp(32px, 4.8vw, 58px);
    --content-max: 1200px;
    --header-height: 72px;
    --control-height: 44px;
    --duration-fast: 150ms;
    --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
    --ease-spring: cubic-bezier(0.3, 1.4, 0.5, 1);

    /* « Concept C »: warm paper background, deep green, amber; soft pastel fields for the illustrations. */
    --bg: #FBF7EF;
    --bg-2: #F4EEE2;
    --surface: #FFFFFF;
    --ink: #16302C;
    --ink-2: #4B5F5B;
    --ink-3: #5E6E6A;
    --line: #E6DECF;
    --line-ghost: #CDC2AE;
    --line-input: #85918C;
    --green: #0F4C45;
    --green-2: #1C6B61;
    --on-green: #FFFFFF;
    --on-green-2: #D8E9E5;
    --accent-on-green: #F6C77E;
    --amber: #E9A23B;
    --amber-2: #F6C77E;
    --on-amber: #2B1B05;
    --mint: #DDEFE6;
    --peach: #FCE6CF;
    --sky: #E2ECF7;
    --lilac: #ECE5F6;
    --rose: #F9DFDC;
    --paper: #FFFFFF;
    --on-paper: #1D2A28;
    --paper-line: #E1DACB;
    --success: #1B7444;
    --danger: #B93A27;
    /* The amber ring is too light on paper: the focus ring is green in light mode, amber in dark. */
    --focus: #0F4C45;
    --shadow: 0 1px 0 rgb(22 48 44 / 0.04), 0 10px 30px -12px rgb(22 48 44 / 0.22);
    --shadow-lg: 0 2px 0 rgb(22 48 44 / 0.04), 0 30px 60px -24px rgb(22 48 44 / 0.35);
  }

  @media (prefers-color-scheme: dark) {
    :root {
      --bg: #0E1917;
      --bg-2: #13211E;
      --surface: #182925;
      --ink: #EAF3EF;
      --ink-2: #B5C6C1;
      --ink-3: #9AABA6;
      --line: #2A3F3C;
      --line-ghost: #3E5753;
      --line-input: #6F8C85;
      --green: #5FC2AE;
      --green-2: #86D6C4;
      --on-green: #06231F;
      --on-green-2: #0B3A33;
      --accent-on-green: #3D2300;
      --amber: #F0B04F;
      --amber-2: #8A5F20;
      --on-amber: #2B1B05;
      --mint: #16342D;
      --peach: #3A2A18;
      --sky: #17293A;
      --lilac: #262236;
      --rose: #382120;
      --paper: #F6F2EA;
      --on-paper: #1D2A28;
      --paper-line: #CFC6B6;
      --success: #82CB96;
      --danger: #EA8881;
      --focus: #F0BE66;
      --shadow: 0 1px 0 rgb(0 0 0 / 0.2), 0 10px 30px -12px rgb(0 0 0 / 0.6);
      --shadow-lg: 0 2px 0 rgb(0 0 0 / 0.2), 0 30px 60px -24px rgb(0 0 0 / 0.7);
    }
  }
}

@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(--bg); color: var(--ink);
    font: var(--text-md)/1.7 var(--font-text);
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    overflow-wrap: break-word;
    overflow-x: clip;
  }
  /* D-541: Arabic body ≥ 1.6, headings ≥ 1.3, so no glyph is ever cut. */
  :lang(ar) body, body:lang(ar) { line-height: 1.85; }
  main { flex: 1; }
  h1, h2, h3, h4 { font-family: var(--font-head); font-weight: 700; line-height: 1.25; letter-spacing: 0; text-wrap: balance; overflow-wrap: break-word; }
  :lang(ar) h1, :lang(ar) h2, :lang(ar) h3, :lang(ar) h4 { line-height: 1.45; }
  h1 { font-size: var(--text-3xl); font-weight: 800; }
  h2 { font-size: var(--text-2xl); }
  h3 { font-size: var(--text-h3); }
  p { text-wrap: pretty; }
  a { color: var(--green); text-underline-offset: 0.2em; }
  a:hover { text-decoration-thickness: 2px; }
  :focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 6px; }
  ::selection { background: var(--green); color: var(--on-green); }
  @media (prefers-reduced-motion: reduce) {
    html, html:focus-within { scroll-behavior: auto; }
    *, *::before, *::after { animation: none !important; transition-duration: 0.01ms !important; }
  }
}

@layer components {
  .wrap { inline-size: min(100% - 2 * var(--space-4), var(--content-max)); margin-inline: auto; }
  .lat { font-family: var(--font-text); direction: ltr; unicode-bidi: isolate; }
  .sprite { position: absolute; inline-size: 0; block-size: 0; overflow: hidden; }

  .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(--green); color: var(--on-green); 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(--bg) 86%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-block-end: 1px solid color-mix(in srgb, var(--line) 70%, transparent); }
  .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(--ink); text-decoration: none; }
  /* Brand logo (D-213): the img keeps its height attribute (34 px in the bar, 32 px in the footer), its width follows the ratio. */
  .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: 5px; transition: transform 0.3s var(--ease-spring); }
  .brand:hover .brand-logo { transform: rotate(-3deg) scale(1.03); }
  .nav { display: flex; align-items: center; gap: var(--space-1); min-inline-size: 0; margin-inline-start: var(--space-3); }
  .nav a { display: inline-flex; align-items: center; min-block-size: var(--control-height); padding: 0 var(--space-3); border-radius: 12px; color: var(--ink-2); font-weight: 500; text-decoration: none; white-space: nowrap; transition: background-color 0.2s, color 0.2s; }
  .nav a:hover { background: var(--mint); color: var(--ink); }
  .nav a[aria-current="page"] { background: var(--mint); color: var(--green); font-weight: 600; }
  .top-actions { display: flex; flex: none; align-items: center; gap: var(--space-2); margin-inline-start: auto; }
  .top-actions .btn-ghost { box-shadow: none; color: var(--ink-2); }
  .top-actions .btn-ghost:hover { color: var(--ink); background: var(--mint); }

  /* 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: 1.5px solid var(--line-ghost); border-radius: 12px; background: var(--surface); color: var(--ink); cursor: pointer; list-style: none; font-weight: 600; transition: border-color 0.2s, transform var(--duration-fast); }
  .menu > summary:hover { border-color: var(--line-input); }
  .menu > summary:active { transform: scale(0.96); }
  .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 / 70% 2px no-repeat, linear-gradient(currentColor 0 0) bottom / 100% 2px no-repeat; }
  .menu[open] > summary { background: var(--mint); border-color: var(--green); color: var(--green); }
  .menu-panel { position: absolute; inset-inline-end: 0; inset-block-start: calc(100% + var(--space-2)); inline-size: min(21rem, 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(--surface); border: 1px solid var(--line); border-radius: var(--radius-card); box-shadow: var(--shadow-lg); }
  .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: 12px; color: var(--ink); font-weight: 500; text-decoration: none; }
  .menu-links a:hover, .menu-links a[aria-current="page"] { background: var(--mint); color: var(--green); }
  .menu-account { display: grid; gap: var(--space-3); padding-block-start: var(--space-4); border-block-start: 1px solid var(--line); }
  .menu-lang { padding-block-start: var(--space-4); border-block-start: 1px solid var(--line); }
  .menu-title { margin-block-end: var(--space-2); color: var(--ink-3); font-size: var(--text-xs); font-weight: 600; }
  .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: 1.5px solid var(--line); border-radius: 12px; color: var(--ink); text-decoration: none; }
  .lang a:hover { border-color: var(--green); color: var(--green); }
  .lang a[aria-current="true"] { background: var(--green); border-color: var(--green); color: var(--on-green); font-weight: 600; }
  @media (width >= 960px) { .menu-account, .menu-links .on-wide-hidden { display: none; } }
  @media (width < 960px) {
    .top .nav { display: none; }
    .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): 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: soft 3D press, one small corner at the end (mirrors in Arabic). */
  .btn {
    --btn-bg: var(--green); --btn-ink: var(--on-green);
    --btn-depth: color-mix(in srgb, var(--btn-bg) 60%, black);
    display: inline-flex; align-items: center; justify-content: center; gap: 0.6em;
    min-block-size: var(--control-height); max-inline-size: 100%; padding: 10px var(--space-5);
    border: 0; border-radius: 16px; border-end-end-radius: 6px;
    background: var(--btn-bg); color: var(--btn-ink); box-shadow: 0 4px 0 var(--btn-depth);
    font-weight: 600; line-height: 1.35; text-align: center; text-decoration: none; text-wrap: balance; cursor: pointer;
    transition: transform var(--duration-fast) ease, box-shadow var(--duration-fast) ease, background-color 0.2s;
  }
  .btn:hover { transform: translateY(-2px); box-shadow: 0 6px 0 var(--btn-depth); }
  .btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--btn-depth); }
  .btn-accent { --btn-bg: var(--amber); --btn-ink: var(--on-amber); }
  .btn-ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 2px var(--line-ghost); }
  .btn-ghost:hover { box-shadow: inset 0 0 0 2px var(--line-input); }
  .btn-ghost:active { transform: translateY(1px); box-shadow: inset 0 0 0 2px var(--line-input); }
  .btn-sm { padding: 8px var(--space-4); font-size: var(--text-sm); }
  .btn-lg { min-block-size: 54px; padding: 12px var(--space-6); font-size: 1.04rem; }
  .btn-block { inline-size: 100%; }
  /* The arrow icon points to the reading direction: drawn for Arabic, flipped for the LTR languages. */
  .arr { inline-size: 20px; block-size: 20px; flex: none; transition: translate 0.2s; }
  :dir(ltr) .arr { scale: -1 1; }
  .btn:hover .arr, a:hover > .arr { translate: -4px 0; }
  :dir(ltr) .btn:hover .arr, :dir(ltr) a:hover > .arr { translate: 4px 0; }
  .actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
  @media (width < 560px) { .actions > .btn { flex: 1 1 100%; } }

  /* Section scaffolding */
  .section { padding-block: var(--space-8); }
  @media (width >= 960px) { .section { padding-block: var(--space-9); } }
  .section.alt { background: var(--bg-2); }
  .section-head { max-inline-size: 46rem; margin-block-end: var(--space-6); }
  .section-head.center { margin-inline: auto; text-align: center; }
  .section-head h2 { margin-block-start: 10px; }
  .section-head p { margin-block-start: var(--space-3); color: var(--ink-2); font-size: var(--text-lg); }
  .eyebrow { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--green); font-size: var(--text-sm); font-weight: 600; }
  .eyebrow::before { content: ""; flex: none; inline-size: 22px; block-size: 8px; border-radius: 8px; background: var(--amber); }
  .more { margin-block-start: var(--space-5); font-weight: 600; }
  .more a { display: inline-flex; align-items: center; gap: var(--space-2); min-block-size: var(--control-height); }
  .head-row { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--space-4); margin-block-end: var(--space-6); }
  .head-row .section-head { margin-block-end: 0; }

  /* Hero: the promise, the counter illustration and the app mock. */
  .hero { position: relative; isolation: isolate; padding-block: var(--space-6) var(--space-8); }
  .hero .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); align-items: center; gap: var(--space-7); }
  .kicker { display: inline-flex; align-items: center; gap: var(--space-2); max-inline-size: 100%; padding-block: 5px; padding-inline: 6px 14px; border: 1.5px solid var(--line); border-radius: 18px; background: var(--surface); color: var(--ink-2); font-size: var(--text-sm); line-height: 1.45; }
  .kicker i { display: inline-grid; flex: none; place-items: center; inline-size: 26px; block-size: 26px; border-radius: 50%; background: var(--amber); color: var(--on-amber); }
  .kicker svg { inline-size: 14px; block-size: 14px; }
  .hero h1 { margin-block-start: 18px; line-height: 1.18; }
  :lang(ar) .hero h1 { line-height: 1.4; }
  .hl { position: relative; z-index: 0; display: inline-block; color: var(--green); }
  .hl svg { position: absolute; z-index: -1; inset-inline: -4px; inset-block-end: -0.06em; inline-size: calc(100% + 8px); block-size: 0.32em; }
  .hero .lead { max-inline-size: 36em; margin-block-start: 18px; color: var(--ink-2); font-size: var(--text-lg); line-height: 1.8; }
  .hero .actions { margin-block-start: 28px; }
  .points { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); margin-block-start: 22px; color: var(--ink-2); font-size: var(--text-sm); }
  .points li { display: inline-flex; align-items: center; gap: 7px; }
  .points svg { inline-size: 18px; block-size: 18px; color: var(--green); }
  .hero .note { max-inline-size: 36em; margin-block-start: var(--space-3); color: var(--ink-3); font-size: var(--text-sm); }

  .stage { position: relative; padding-block-end: 130px; }
  .scene { inline-size: 100%; block-size: auto; overflow: visible; }
  .scene text { font-family: var(--font-head); font-weight: 700; }
  /* Over the middle of the counter (the drawing is not mirrored): the customer and the printer stay visible. */
  .mock { position: absolute; inset-inline-start: 31%; inset-block-end: 0; inline-size: min(320px, 52%); padding: 14px; border: 1px solid var(--line); border-radius: 22px; border-end-start-radius: 8px; background: var(--surface); box-shadow: var(--shadow-lg); rotate: -1.5deg; transition: rotate 0.35s var(--ease-spring), translate 0.35s var(--ease-spring); }
  .mock:hover { rotate: 0deg; translate: 0 -4px; }
  :dir(rtl) .mock { inset-inline-start: auto; inset-inline-end: 31%; }
  .mock-h { display: flex; align-items: center; gap: var(--space-2); color: var(--ink-3); font-size: 0.8rem; line-height: 1.5; }
  .mock-h .dots { display: flex; gap: 4px; }
  .mock-h .dots i { inline-size: 8px; block-size: 8px; border-radius: 50%; background: var(--line); }
  .mock-h .dots i:first-child { background: var(--amber); }
  .mock-h b { margin-inline-start: auto; color: var(--ink); font-size: 0.85rem; font-weight: 600; }
  .mock-search { display: flex; align-items: center; gap: var(--space-2); margin-block-start: 10px; padding: 7px 10px; border-radius: 12px; background: var(--bg-2); color: var(--ink-2); font-size: 0.85rem; line-height: 1.5; }
  .mock-search svg { inline-size: 16px; block-size: 16px; flex: none; }
  .caret { display: inline-block; inline-size: 2px; block-size: 1em; background: var(--green); vertical-align: -2px; }
  .mock-body { display: grid; grid-template-columns: minmax(0, 1fr) 92px; gap: 10px; margin-block-start: 10px; }
  .fld { color: var(--ink-3); font-size: 0.72rem; line-height: 1.5; }
  .fld span { display: block; margin-block: 2px 6px; padding: 4px 8px; overflow: hidden; border-radius: 9px; background: var(--bg-2); color: var(--ink); font-size: 0.82rem; line-height: 1.6; white-space: nowrap; text-overflow: ellipsis; }
  .mini-paper { align-self: start; padding: 8px 7px; border: 1px solid var(--paper-line); border-radius: 6px; background: var(--paper); color: var(--on-paper); box-shadow: 0 6px 14px -8px rgb(0 0 0 / 0.35); }
  .mini-paper b { display: block; font-family: var(--font-head); font-size: 0.62rem; line-height: 1.4; text-align: center; }
  .mini-paper i { display: block; block-size: 3px; margin-block-start: 4px; border-radius: 2px; background: var(--paper-line); }
  .mini-paper i:nth-of-type(3n) { inline-size: 70%; }
  .mini-paper .seal { inline-size: 16px; block-size: 16px; margin-block-start: 6px; margin-inline-start: auto; border: 1.5px solid var(--green); border-radius: 50%; opacity: 0.7; }
  .bar { block-size: 6px; margin-block-start: var(--space-2); overflow: hidden; border-radius: 6px; background: var(--bg-2); }
  .bar i { display: block; block-size: 100%; inline-size: 100%; background: linear-gradient(90deg, var(--amber), var(--green)); transform-origin: 0 50%; }
  :dir(rtl) .bar i { transform-origin: 100% 50%; }
  .mock-foot { display: flex; align-items: center; gap: var(--space-2); margin-block-start: 10px; }
  .done { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--radius-pill); background: var(--mint); color: var(--green); font-size: 0.8rem; font-weight: 600; line-height: 1.5; }
  .done svg { inline-size: 14px; block-size: 14px; }
  .mock-btn { margin-inline-start: auto; padding: 6px 14px; border-radius: 11px; border-end-end-radius: 4px; background: var(--green); color: var(--on-green); box-shadow: 0 3px 0 color-mix(in srgb, var(--green) 60%, black); font-size: 0.82rem; font-weight: 600; line-height: 1.5; }
  .tag-sale { position: absolute; inset-block-end: 12px; inset-inline-start: 0; display: inline-flex; align-items: center; gap: var(--space-2); padding: 6px 12px; border: 1px solid var(--line); border-radius: var(--radius-pill); background: var(--surface); box-shadow: var(--shadow); font-size: var(--text-xs); font-weight: 600; white-space: nowrap; }
  .tag-sale::before { content: ""; inline-size: 9px; block-size: 9px; border-radius: 50%; background: var(--amber); }

  /* Illustration motion: CSS only, never needed to read the page (off with reduced motion). */
  @media (prefers-reduced-motion: no-preference) {
    .out-paper { animation: print-out 4s ease-in-out infinite; }
    .fly { animation: float 6s ease-in-out infinite; }
    .fly.b { animation-delay: -2s; } .fly.c { animation-delay: -4s; }
    .bubble { transform-box: fill-box; transform-origin: 100% 100%; animation: pop 4s ease-in-out infinite; }
    .led { animation: led 1.2s steps(1) infinite; }
    .caret { animation: blink 1s steps(1) infinite; }
    .bar i { animation: fill 4s ease-in-out infinite; }
    .mini-paper { animation: paper-in 4s ease-in-out infinite; }
  }
  @keyframes print-out { 0%, 8% { transform: translateY(0); } 45%, 80% { transform: translateY(34px); } 100% { transform: translateY(0); } }
  @keyframes float { 0%, 100% { transform: translate(0, 0) rotate(0); } 50% { transform: translate(-6px, -10px) rotate(-4deg); } }
  @keyframes pop { 0%, 100% { transform: scale(1); } 6% { transform: scale(1.06); } 12% { transform: scale(1); } }
  @keyframes led { 50% { opacity: 0.25; } }
  @keyframes blink { 50% { opacity: 0; } }
  @keyframes fill { 0% { transform: scaleX(0.15); } 45%, 100% { transform: scaleX(1); } }
  @keyframes paper-in { 0%, 100% { transform: translateY(0); } 45%, 80% { transform: translateY(-3px); } }

  @media (width < 1020px) {
    .hero .wrap { grid-template-columns: minmax(0, 1fr); }
    .stage { inline-size: 100%; max-inline-size: 600px; margin-inline: auto; }
    .mock { inset-inline-start: 31%; }
  }
  @media (width < 560px) {
    .hero { padding-block: var(--space-5) var(--space-7); }
    .stage { padding-block-end: 0; }
    .mock, :dir(rtl) .mock { position: relative; inset: auto; inline-size: auto; margin: -40px 8px 0; rotate: -1deg; }
    .tag-sale { display: none; }
  }

  /* Steps band (home): drawn cards joined by a dashed line. */
  .steps-sec { margin-inline: max(8px, env(safe-area-inset-left, 0px)); border-radius: var(--radius-band); background: var(--surface); }
  .steps-head { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: end; gap: var(--space-5); }
  .steps-head .section-head { margin-block-end: 0; }
  .steps-head > p { color: var(--ink-2); font-size: var(--text-lg); }
  .steps-art { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin-block-start: 44px; }
  .steps-art::before { content: ""; position: absolute; z-index: 0; inset-block-start: 58px; inset-inline: 12%; border-block-start: 3px dashed var(--line); }
  .steps-art li { position: relative; z-index: 1; min-inline-size: 0; }
  .steps-art .art { display: grid; place-items: center; block-size: 118px; border-radius: 28px; background: var(--peach); transition: transform 0.3s var(--ease-spring); }
  .steps-art li:hover .art { transform: translateY(-6px) rotate(-1.5deg); }
  .steps-art li:nth-child(2) .art { background: var(--sky); border-end-start-radius: 8px; }
  .steps-art li:nth-child(3) .art { background: var(--mint); }
  .steps-art .art svg { inline-size: 120px; block-size: 96px; }
  .n { display: inline-grid; place-items: center; inline-size: 34px; block-size: 34px; margin-block-start: 18px; border-radius: 11px; background: var(--ink); color: var(--bg); font: 700 1rem/1 var(--font-head); }
  .steps-art h3 { margin-block-start: 10px; }
  .steps-art p { margin-block-start: 6px; color: var(--ink-2); }
  @media (width < 860px) {
    .steps-head { grid-template-columns: minmax(0, 1fr); }
    .steps-art { grid-template-columns: minmax(0, 1fr); gap: 28px; }
    .steps-art::before { display: none; }
    .steps-art li { display: grid; grid-template-columns: 110px minmax(0, 1fr); align-content: start; gap: 4px 18px; }
    .steps-art .art { grid-row: span 3; block-size: 110px; }
    .steps-art .art svg { inline-size: 96px; block-size: 80px; }
    .steps-art .n { margin-block-start: 4px; }
    .steps-art h3, .steps-art p { margin-block-start: 0; }
  }
  @media (width < 560px) { .steps-sec { margin-inline: 6px; border-radius: 32px; } }

  /* Numbered steps (how it works): counters in a dark squircle. */
  .steps { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); counter-reset: step; }
  .steps > li { counter-increment: step; position: relative; min-inline-size: 0; padding: var(--space-5); border: 1.5px solid var(--line); border-radius: var(--radius-card); background: var(--surface); transition: transform 0.25s var(--ease-spring), box-shadow 0.25s; }
  .steps > li:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
  .steps > li::before { content: counter(step); display: inline-grid; place-items: center; inline-size: 34px; block-size: 34px; margin-block-end: var(--space-3); border-radius: 11px; background: var(--ink); color: var(--bg); font: 700 1rem/1 var(--font-head); }
  .steps h3 { margin-block-end: var(--space-1); font-size: var(--text-lg); }
  .steps p { color: var(--ink-2); }

  /* Tools: bento of the main tools, then the other features. */
  .bento { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-4); }
  .tile { position: relative; display: flex; flex-direction: column; gap: 6px; min-inline-size: 0; min-block-size: 170px; padding: 22px; overflow: hidden; border: 1.5px solid var(--line); border-radius: 26px; background: var(--surface); color: var(--ink); transition: transform 0.25s var(--ease-spring), box-shadow 0.25s, border-color 0.25s; }
  .tile:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: transparent; }
  .tile:has(a.stretch:active) { transform: translateY(0) scale(0.99); }
  .tile .ic { display: grid; place-items: center; inline-size: 56px; block-size: 56px; margin-block-end: var(--space-2); border-radius: 18px; background: var(--f, var(--mint)); color: var(--ink-illus, currentColor); transition: transform 0.35s var(--ease-spring); }
  .tile:hover .ic { transform: rotate(-8deg) scale(1.06); }
  .tile .ic svg { inline-size: 34px; block-size: 34px; }
  .tile h3 { font-size: var(--text-h3); }
  .tile h3 a { color: inherit; text-decoration: none; }
  .tile p { color: var(--ink-2); font-size: 0.95rem; line-height: 1.7; }
  .tile .tag { position: absolute; inset-block-start: 16px; inset-inline-end: 16px; padding: 3px 10px; border-radius: var(--radius-pill); background: var(--bg-2); color: var(--ink-2); font-size: var(--text-xs); font-weight: 600; line-height: 1.5; }
  .tile .go { display: inline-flex; align-items: center; gap: 6px; margin-block-start: auto; padding-block-start: 10px; color: var(--green); font-size: 0.9rem; font-weight: 600; }
  .tile .go .arr { inline-size: 16px; block-size: 16px; }
  .tile:hover .go .arr { translate: -4px 0; }
  :dir(ltr) .tile:hover .go .arr { translate: 4px 0; }
  .t-big { grid-column: span 3; grid-row: span 2; border-color: transparent; border-radius: 30px; border-end-start-radius: 10px; background: var(--green); color: var(--on-green); }
  .t-big h3 { font-size: var(--text-xl); }
  .t-big .go { position: relative; z-index: 1; }
  .t-big p { color: var(--on-green-2); }
  .t-big .ic { --f: color-mix(in srgb, var(--on-green) 14%, transparent); }
  .t-big .go { color: var(--accent-on-green); }
  .t-big .tag { background: var(--amber); color: var(--on-amber); }
  .t-big .chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-block-start: 14px; padding: 0; list-style: none; }
  .t-big .chips li { padding: 5px 12px; border-radius: 10px; background: color-mix(in srgb, var(--on-green) 12%, transparent); font-size: 0.85rem; line-height: 1.5; }
  .t-big .stack { position: absolute; inset-inline-end: 0; inset-block-end: 0; inline-size: 170px; block-size: auto; opacity: 0.95; pointer-events: none; }
  .t-half { grid-column: span 3; }
  .t-third { grid-column: span 2; }
  .f-mint { --f: var(--mint); } .f-sky { --f: var(--sky); } .f-peach { --f: var(--peach); } .f-lilac { --f: var(--lilac); } .f-rose { --f: var(--rose); }
  .tile .ic.f-mint, .tile .ic.f-sky, .tile .ic.f-peach, .tile .ic.f-lilac, .tile .ic.f-rose { color: var(--ink); }
  .also-title { margin-block: var(--space-7) var(--space-4); color: var(--ink-2); font-size: var(--text-sm); font-weight: 600; }
  .also { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
  .also li { display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: start; gap: var(--space-1) var(--space-3); min-inline-size: 0; padding: var(--space-4); border: 1.5px solid var(--line); border-radius: 20px; background: var(--surface); }
  .also .dot { grid-row: span 2; }
  .also h3 { font-size: 1.05rem; }
  .also p { color: var(--ink-2); font-size: var(--text-sm); line-height: 1.65; }
  .dot { display: inline-grid; place-items: center; inline-size: 44px; block-size: 44px; border-radius: 14px; background: var(--f, var(--mint)); color: var(--green); }
  .dot svg { inline-size: 22px; block-size: 22px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
  @media (width < 860px) {
    .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .t-big, .t-half { grid-column: 1 / -1; }
    .t-third { grid-column: span 1; }
  }
  @media (width < 560px) {
    .bento { grid-template-columns: minmax(0, 1fr); }
    .t-third { grid-column: 1 / -1; }
    .tile { min-block-size: 0; }
    .t-big .stack { inline-size: 120px; opacity: 0.5; }
  }

  /* Numbers band (amber): real counts from the catalogue, the institutions of the official forms. */
  .nums { position: relative; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); align-items: start; gap: var(--space-5); padding: 36px clamp(20px, 4vw, 48px); overflow: hidden; border-radius: 36px; background: var(--amber); color: var(--on-amber); }
  .nums h2 { grid-column: 1 / -1; max-inline-size: 22em; font-size: clamp(24px, 2.6vw, 32px); }
  .nums ul { display: contents; }
  .num strong { display: block; font: 800 clamp(34px, 4.2vw, 52px)/1.25 var(--font-head); }
  .num span { display: block; font-size: 0.95rem; line-height: 1.6; }
  .logos { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); padding-block-start: 18px; border-block-start: 2px dashed color-mix(in srgb, var(--on-amber) 22%, transparent); }
  .logos p { margin-inline-end: 6px; font-size: 0.9rem; }
  .logos ul { display: flex; flex-wrap: wrap; gap: var(--space-2); padding: 0; list-style: none; }
  .logos li { padding: 6px 14px; border-radius: 12px; background: color-mix(in srgb, var(--surface) 50%, transparent); font-size: 0.85rem; font-weight: 600; line-height: 1.5; }
  @media (prefers-color-scheme: dark) { .logos li { background: color-mix(in srgb, var(--on-amber) 12%, transparent); } }

  /* Shopfronts: who Mostanad is for. */
  .shops { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; padding: 0; list-style: none; }
  .shop { min-inline-size: 0; overflow: hidden; border: 1.5px solid var(--line); border-radius: 30px; background: var(--surface); transition: transform 0.3s var(--ease-spring), box-shadow 0.3s; }
  .shop:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
  .shop .front { position: relative; block-size: 170px; background: var(--f, var(--mint)); }
  .shop .front svg { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; }
  .shop .txt { padding: 20px 22px 24px; }
  .shop h3 { font-size: var(--text-xl); }
  .shop p { margin-block-start: 6px; color: var(--ink-2); }
  .shop ul { display: flex; flex-wrap: wrap; gap: 6px; margin-block-start: 14px; padding: 0; list-style: none; }
  .shop li { padding: 3px 10px; border-radius: 9px; background: var(--bg-2); color: var(--ink-2); font-size: 0.82rem; line-height: 1.5; }
  @media (width >= 860px) { .shops > li:nth-child(2) { margin-block-start: 28px; } }
  @media (width < 860px) { .shops { grid-template-columns: minmax(0, 1fr); } }

  /* Why Mostanad (benefits) */
  .why { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr)); padding: 0; list-style: none; }
  .why li { min-inline-size: 0; padding: var(--space-6) var(--space-5); border-radius: var(--radius-card); background: var(--surface); border: 1.5px solid var(--line); }
  .why li:nth-child(2) { border-end-start-radius: 8px; }
  .why .dot { inline-size: 52px; block-size: 52px; margin-block-end: var(--space-4); border-radius: 16px; }
  .why li:nth-child(1) .dot { --f: var(--peach); } .why li:nth-child(2) .dot { --f: var(--sky); } .why li:nth-child(3) .dot { --f: var(--mint); }
  .why h3 { margin-block-end: var(--space-2); }
  .why p { color: var(--ink-2); }

  /* Pricing cards (plans table) */
  .plans { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); align-items: stretch; padding-block-start: var(--space-3); }
  .billing-only .plans { max-inline-size: 420px; }
  .plan { position: relative; display: flex; flex-direction: column; gap: var(--space-3); min-inline-size: 0; padding: 28px 26px 26px; border: 1.5px solid var(--line); border-radius: 28px; background: var(--surface); transition: transform 0.3s var(--ease-spring); }
  .plan:hover { transform: translateY(-4px); }
  .plan.featured { border-color: transparent; border-radius: 30px; border-end-start-radius: 10px; background: var(--green); color: var(--on-green); box-shadow: var(--shadow-lg); }
  .plan h3 { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); font-size: var(--text-xl); }
  .plan h3 .badge { position: absolute; inset-block-start: -14px; inset-inline-start: 24px; rotate: -3deg; }
  .plan p.price { font: 800 clamp(30px, 3vw, 38px)/1.25 var(--font-head); }
  .plan .price small { color: var(--ink-3); font: 400 0.9rem/1.5 var(--font-text); }
  .plan .price-was { margin-inline-start: var(--space-2); color: var(--ink-3); font: 500 1rem/1.5 var(--font-text); }
  .plan p.price-monthly { margin-block-start: calc(-1 * var(--space-2)); font-size: var(--text-sm); }
  .plan .plan-promo { inline-size: fit-content; }
  .plan p { color: var(--ink-2); }
  .plan.featured p, .plan.featured .price small, .plan.featured .price-was { color: var(--on-green-2); }
  .plan.featured p.price { color: var(--on-green); }
  .plan ul { display: grid; flex: 1; align-content: start; gap: 9px; margin-block: var(--space-2) var(--space-3); padding: 0; list-style: none; }
  .plan li { position: relative; padding-inline-start: 30px; font-size: 0.95rem; line-height: 1.6; }
  .plan li::before { content: ""; position: absolute; inset-inline-start: 0; inset-block-start: 0.15em; inline-size: 20px; block-size: 20px; border-radius: 50%; background: color-mix(in srgb, var(--green) 16%, transparent); }
  .plan li::after { content: ""; position: absolute; inset-inline-start: 6px; inset-block-start: 0.5em; inline-size: 9px; block-size: 5px; border-inline-start: 2.2px solid var(--green); border-block-end: 2.2px solid var(--green); rotate: -45deg; }
  :dir(rtl) .plan li::after { rotate: 45deg; }
  .plan.featured li::before { background: color-mix(in srgb, var(--accent-on-green) 22%, transparent); }
  .plan.featured li::after { border-color: var(--accent-on-green); }
  .plan .btn { margin-block-start: auto; }
  .plan.featured .btn-primary { --btn-bg: var(--amber); --btn-ink: var(--on-amber); }
  .plans-note { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); margin-block-start: 22px; color: var(--ink-2); font-size: var(--text-sm); text-align: center; }
  @media (width < 860px) { .plans .plan.featured { order: -1; } }
  /* 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: 1.5px solid var(--line); border-radius: var(--radius-card); background: var(--surface); }
  .compare { inline-size: 100%; min-inline-size: 560px; }
  .compare th, .compare td { padding: var(--space-3) var(--space-4); border-block-start: 1px solid var(--line); text-align: center; }
  .compare thead th { border-block-start: 0; background: var(--bg-2); font: 700 var(--text-lg)/1.4 var(--font-head); }
  .compare th[scope="row"] { position: sticky; inset-inline-start: 0; z-index: 1; background: var(--surface); font-weight: 500; text-align: start; }
  .compare tbody tr:hover th, .compare tbody tr:hover td { background: color-mix(in srgb, var(--mint) 45%, var(--surface)); }
  .compare .yes { color: var(--success); font-weight: 800; }
  .compare .no { color: var(--ink-3); }
  .compare tfoot td { padding-block: var(--space-4); }

  /* Example note (an illustration, never a testimonial) */
  .example { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 18px; padding: 22px 26px; border: 2px dashed var(--line); border-radius: 28px; background: var(--surface); }
  .example .av { inline-size: 64px; block-size: 64px; }
  .example blockquote { font-size: 1.08rem; line-height: 1.8; }
  .example small { display: block; margin-block-start: 4px; color: var(--ink-3); font-size: var(--text-xs); }
  .example .lbl { display: inline-block; margin-block-end: var(--space-1); padding: 2px 9px; border-radius: 8px; background: var(--rose); color: var(--ink); font-size: var(--text-xs); font-weight: 600; }
  @media (width < 560px) { .example { grid-template-columns: minmax(0, 1fr); } }

  /* FAQ: native <details>, a plus that turns into an amber cross. */
  .faq { display: grid; gap: var(--space-3); }
  .faq details { border: 1.5px solid var(--line); border-radius: 20px; background: var(--surface); transition: border-color 0.2s, box-shadow 0.2s; }
  .faq details[open] { border-color: transparent; box-shadow: var(--shadow); }
  .faq summary { display: flex; align-items: center; gap: 14px; min-block-size: var(--control-height); padding: 14px 20px; cursor: pointer; font-weight: 600; font-size: 1.04rem; line-height: 1.6; list-style: none; }
  .faq summary::-webkit-details-marker { display: none; }
  .faq summary::after { content: ""; flex: none; margin-inline-start: auto; inline-size: 32px; block-size: 32px; border-radius: 10px; background: linear-gradient(currentColor 0 0) center / 14px 2.4px no-repeat, linear-gradient(currentColor 0 0) center / 2.4px 14px no-repeat, var(--bg-2); transition: transform 0.3s var(--ease-spring), background-color 0.2s; }
  .faq details[open] summary::after { transform: rotate(45deg); background-color: var(--amber); color: var(--on-amber); }
  .faq .answer { padding: 0 20px 18px; color: var(--ink-2); 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); align-items: start; }
  @media (width >= 1020px) { .split { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: var(--space-7); } .split.faq-page { grid-template-columns: minmax(0, 1.6fr) minmax(0, 0.7fr); } .faq-page > aside { position: sticky; inset-block-start: calc(var(--header-height) + var(--space-4)); margin-block-start: 0; } }
  .help-box { display: grid; gap: var(--space-3); margin-block-start: var(--space-5); padding: 20px; border-radius: var(--radius-card); background: var(--mint); }
  .help-box .row { display: flex; align-items: center; gap: 14px; }
  .help-box svg.art { inline-size: 54px; block-size: 54px; flex: none; }
  .help-box p { color: var(--ink-2); font-size: 0.95rem; }
  .help-box a { color: var(--green); font-weight: 600; }

  /* Search box (home finder, help center) */
  .search { display: flex; gap: var(--space-2); inline-size: 100%; max-inline-size: 34rem; padding: var(--space-1); background: var(--surface); border: 1.5px solid var(--line-input); border-radius: 18px; box-shadow: var(--shadow); }
  .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); box-shadow: none; }
  .search .btn:hover, .search .btn:active { transform: none; box-shadow: none; }
  .search:focus-within { outline: 3px solid var(--focus); outline-offset: 2px; }
  .finder > p { margin-block-end: var(--space-2); color: var(--ink-2); font-size: var(--text-sm); font-weight: 600; }

  /* Final call to action: the green band with the paper pile. */
  .cta { position: relative; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); align-items: center; gap: var(--space-5); padding: 52px clamp(22px, 5vw, 64px); overflow: hidden; border-radius: var(--radius-band); border-end-start-radius: 14px; background: var(--green); color: var(--on-green); }
  .cta h2 { font-size: clamp(28px, 4vw, 46px); font-weight: 800; }
  .cta p { margin-block: var(--space-3) var(--space-5); color: var(--on-green-2); font-size: var(--text-lg); }
  .cta .btn-accent { --btn-depth: color-mix(in srgb, var(--amber) 55%, black); }
  .cta .btn-ghost { color: var(--on-green); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--on-green) 40%, transparent); }
  .cta .btn-ghost:hover { box-shadow: inset 0 0 0 2px var(--on-green); }
  .cta .big { justify-self: center; inline-size: 100%; max-inline-size: 360px; block-size: auto; }
  @media (width < 860px) { .cta { grid-template-columns: minmax(0, 1fr); } .cta .big { max-inline-size: 240px; } }
  .cta-sec { padding-block: var(--space-7) var(--space-5); }

  /* 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(80px + 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(--surface) 92%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-block-start: 1px solid var(--line); }
  }

  /* Inner pages: a soft page head, then the content. */
  .page-head { position: relative; isolation: isolate; padding-block: var(--space-7) var(--space-6); }
  .page-head::before { content: ""; position: absolute; z-index: -1; inset-block-start: 8px; inset-inline-end: 0; inline-size: min(420px, 70%); aspect-ratio: 1.3; border-radius: 48% 52% 40% 60% / 55% 45% 55% 45%; background: var(--mint); opacity: 0.8; }
  .page-head::after { content: ""; position: absolute; z-index: -1; inset-block-start: 24px; inset-inline-end: min(300px, 40%); inline-size: 72px; block-size: 72px; border-radius: 50%; background: var(--peach); }
  .page-head h1 { max-inline-size: 20em; margin-block-start: var(--space-2); font-size: clamp(32px, 4.4vw, 52px); }
  .page-head > p, .page-head p:not(.eyebrow):not(.updated) { max-inline-size: 44rem; margin-block-start: var(--space-3); color: var(--ink-2); font-size: var(--text-lg); }
  .crumbs ol { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-block-end: var(--space-3); padding: 0; list-style: none; color: var(--ink-3); font-size: var(--text-sm); }
  .crumbs li + li::before { content: "/"; margin-inline-end: var(--space-2); }
  .crumbs a { display: inline-flex; align-items: center; min-block-size: var(--control-height); }
  .page-body { padding-block-end: var(--space-8); }
  .prose { max-inline-size: 48rem; 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); font-size: var(--text-lg); }
  .prose ul, .prose ol { padding-inline-start: var(--space-5); }
  .prose li + li { margin-block-start: var(--space-2); }
  .prose li::marker { color: var(--green); }
  .prose table { display: block; max-inline-size: 100%; overflow-x: auto; }
  .prose th, .prose td { padding: var(--space-2); border: 1px solid var(--line); text-align: start; }
  .prose blockquote { padding-inline-start: var(--space-4); border-inline-start: 4px solid var(--amber); color: var(--ink-2); }
  .prose pre { max-inline-size: 100%; overflow-x: auto; }
  .doc { margin-block-end: var(--space-8); padding: clamp(20px, 4vw, 44px); border: 1.5px solid var(--line); border-radius: var(--radius-sheet); border-end-start-radius: 10px; background: var(--surface); }
  .doc > h2:first-child, .doc > :first-child { margin-block-start: 0; }
  .updated { display: inline-flex; margin-block-start: var(--space-3); padding: 2px 12px; border-radius: var(--radius-pill); background: var(--surface); color: var(--ink-3); 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); padding: var(--space-4); border-radius: 18px; background: var(--bg-2); 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(--ink-3); }
  .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(--amber); border-radius: var(--radius-control); background: color-mix(in srgb, var(--amber) 12%, var(--surface)); }

  /* Cards (guides list, categories) */
  .grid { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr)); padding: 0; list-style: none; }
  .card { position: relative; display: flex; flex-direction: column; gap: var(--space-2); min-inline-size: 0; padding: var(--space-5); border: 1.5px solid var(--line); border-radius: var(--radius-card); background: var(--surface); transition: transform 0.25s var(--ease-spring), box-shadow 0.25s, border-color 0.25s; }
  .card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: transparent; }
  .card .dot { margin-block-end: var(--space-2); }
  .card:nth-child(4n + 2) .dot { --f: var(--sky); } .card:nth-child(4n + 3) .dot { --f: var(--peach); } .card:nth-child(4n + 4) .dot { --f: var(--lilac); }
  .card p { color: var(--ink-2); }
  .h3 { font-size: var(--text-h3); }
  .card a.stretch { color: var(--ink); text-decoration: none; }
  .card a.stretch::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
  .card a.stretch:hover { color: var(--green); }
  .card .go { display: inline-flex; align-items: center; gap: 6px; margin-block-start: auto; padding-block-start: var(--space-2); color: var(--green); font-size: 0.9rem; font-weight: 600; }
  .card .go .arr { inline-size: 16px; block-size: 16px; }
  .card:hover .go .arr { translate: -4px 0; }
  :dir(ltr) .card:hover .go .arr { translate: 4px 0; }
  .badge { display: inline-block; padding: 2px var(--space-2); border-radius: var(--radius-pill); background: var(--bg-2); color: var(--ink-2); font: 600 var(--text-xs)/1.5 var(--font-text); vertical-align: middle; white-space: nowrap; }
  .badge-accent { padding: 4px 12px; border-radius: 10px; background: var(--amber); color: var(--on-amber); }

  /* How it works: one card per use, its own colour. */
  .usecases { display: grid; gap: var(--space-5); padding-block-end: var(--space-7); }
  .usecase { padding: clamp(20px, 3.5vw, 36px); border-radius: var(--radius-sheet); background: var(--f, var(--mint)); }
  .usecase:nth-child(5n + 2) { --f: var(--peach); } .usecase:nth-child(5n + 3) { --f: var(--sky); } .usecase:nth-child(5n + 4) { --f: var(--lilac); } .usecase:nth-child(5n + 5) { --f: var(--rose); }
  .usecase:nth-child(even) { border-end-start-radius: 10px; }
  .usecase h2 { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); font-size: var(--text-xl); }
  .usecase h2 .dot { background: var(--surface); }
  .usecase > p { margin-block: var(--space-2) var(--space-5); color: var(--ink-2); font-size: var(--text-lg); }
  .usecase .steps > li { border-color: transparent; }
  .page-nav { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-block-start: var(--space-5); padding: 0; list-style: none; }
  .page-nav a { display: inline-flex; align-items: center; min-block-size: var(--control-height); padding-inline: 14px; border: 1.5px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink-2); text-decoration: none; font-size: var(--text-sm); font-weight: 500; }
  .page-nav a:hover { border-color: var(--green); color: var(--green); }

  /* Help center */
  .help { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: start; gap: var(--space-7); padding-block-end: var(--space-8); }
  @media (width < 880px) { .help { grid-template-columns: minmax(0, 1fr); } }
  .help-search { padding: clamp(20px, 3vw, 28px); border-radius: var(--radius-sheet); background: var(--mint); }
  .help-search .search { margin-block-start: var(--space-4); }
  .results { display: grid; gap: var(--space-3); padding: 0; list-style: none; overflow-wrap: anywhere; }
  .results li { padding: var(--space-4); border: 1.5px solid var(--line); border-radius: 20px; background: var(--surface); }
  .results a { display: inline-flex; align-items: center; gap: var(--space-2); min-block-size: var(--control-height); font-weight: 600; }
  .results p { margin-block-start: var(--space-1); color: var(--ink-2); font-size: var(--text-sm); }
  .results .badge { margin-inline-end: var(--space-2); }
  .form { display: grid; gap: var(--space-4); padding: clamp(20px, 3vw, 28px); border: 1.5px solid var(--line); border-radius: var(--radius-sheet); border-end-start-radius: 10px; background: var(--surface); box-shadow: var(--shadow); }
  .field { display: grid; gap: var(--space-1); min-inline-size: 0; }
  .field label { 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); border: 1.5px solid var(--line-input); border-radius: 12px; background: var(--surface); line-height: 1.5; transition: border-color 0.2s; }
  .field input:hover, .field select:hover, .field textarea:hover { border-color: var(--ink-2); }
  .field textarea { min-block-size: 140px; resize: vertical; }
  .field [aria-invalid="true"] { border-color: var(--danger); }
  .field .error, .form .error { color: var(--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: 22px; block-size: 22px; margin-block-start: 3px; accent-color: var(--green); }
  .hp { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); }
  .notice { padding: var(--space-4); border: 1.5px solid var(--success); border-radius: var(--radius-control); background: color-mix(in srgb, var(--success) 12%, var(--surface)); }
  .mail { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-block-start: var(--space-3); overflow-wrap: anywhere; }
  .mail a { display: inline-flex; align-items: center; min-inline-size: 0; min-block-size: var(--control-height); font-weight: 600; }
  .video { aspect-ratio: 16 / 9; inline-size: 100%; border: 0; border-radius: var(--radius-card); background: var(--ink); }

  /* Footer */
  .foot { margin-block-start: var(--space-7); padding-block: var(--space-8) var(--space-6); border-block-start: 1px solid var(--line); color: var(--ink-2); font-size: 0.93rem; }
  .foot .cols { display: grid; gap: 28px; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); }
  @media (width < 1020px) { .foot .cols { grid-template-columns: repeat(3, minmax(0, 1fr)); } .foot .cols > :first-child { grid-column: 1 / -1; } }
  @media (width < 640px) { .foot .cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  .foot .about p { max-inline-size: 26em; margin-block-start: var(--space-3); }
  .foot .about .small { color: var(--ink-3); font-size: var(--text-xs); }
  .foot h2 { margin-block-end: 10px; color: var(--ink); font-size: 1rem; }
  .foot ul { display: grid; gap: 2px; padding: 0; list-style: none; overflow-wrap: anywhere; }
  .foot ul a { display: inline-flex; align-items: center; min-block-size: 36px; color: var(--ink-2); text-decoration: none; }
  .foot ul a.mail { overflow-wrap: normal; word-break: normal; }
  .foot a:hover { color: var(--green); text-decoration: underline; }
  .foot .bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); margin-block-start: 40px; padding-block-start: 20px; border-block-start: 1px solid var(--line); color: var(--ink-3); font-size: 0.85rem; }
  .foot .foot-lang { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); padding: 0; list-style: none; }
  .foot .foot-lang a { display: inline-flex; align-items: center; min-block-size: var(--control-height); color: var(--ink-2); }
  .foot-lang a[aria-current="true"] { color: var(--ink); font-weight: 700; }
}

@layer utilities {
  .center { text-align: center; }
  .muted { color: var(--ink-2); }
  .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; }
}