/* =====================================================================
   «أليف» Aleef — public website design system
   One file for every public page (Arabic RTL first, English LTR variant).
   Colours, radii and spacing mirror brand/tokens.json role by role.
   Light by default, dark automatically (prefers-color-scheme).
   No external assets: fonts live in /assets/fonts, images in /assets/img.

   Signature: the toe-bean oval (26×34 u, tilted −14°) from the wordmark
   is the recurring mark — heading markers, list bullets, dividers — and
   the landing hero builds the paw-heart out of the animal illustrations.
   ===================================================================== */

/* ---------- 1. Fonts (IBM Plex Sans Arabic, SIL OFL 1.1 — see /assets/fonts/OFL.txt)
   WOFF2 = subset (Latin + Arabic) made by _dev/fonts.mjs from the brand TTFs; the TTFs stay as a fallback. */
@font-face {
  font-family: "IBM Plex Sans Arabic";
  src: url("/assets/fonts/ibm-plex-sans-arabic-400.woff2") format("woff2"), url("/assets/fonts/ibm-plex-sans-arabic-400.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans Arabic";
  src: url("/assets/fonts/ibm-plex-sans-arabic-500.woff2") format("woff2"), url("/assets/fonts/ibm-plex-sans-arabic-500.ttf") format("truetype");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans Arabic";
  src: url("/assets/fonts/ibm-plex-sans-arabic-700.woff2") format("woff2"), url("/assets/fonts/ibm-plex-sans-arabic-700.ttf") format("truetype");
  font-weight: 700; font-style: normal; font-display: swap;
}

/* ---------- 2. Tokens */
:root {
  color-scheme: light dark;

  /* brand constants */
  --terracotta: #B5502D;
  --cocoa: #3A2A22;
  --cream: #FBF5EC;
  --leaf: #3E7B3A;
  --honey: #E8A33A;

  /* light roles (tokens.json color.light) */
  --primary: #B5502D;
  --on-primary: #FFFFFF;
  --primary-pressed: #943F21;
  --primary-container: #F7E3D8;
  --on-primary-container: #7A3218;
  --bg: #FBF5EC;
  --surface: #FFFCF7;
  --surface-variant: #F2E7D8;
  --outline: #E6D8C6;
  --outline-strong: #9A8470;
  --ink: #3A2A22;
  --ink-soft: #6F5A4C;
  --ink-muted: #7C6858;
  --success: #3E7B3A;
  --on-success: #FFFFFF;
  --success-container: #E3EFD9;
  --on-success-container: #2A5A27;
  --highlight: #E8A33A;
  --on-highlight: #3A2A22;
  --highlight-container: #FCEED0;
  --on-highlight-container: #7A4F0C;
  --danger: #C2283B;
  --on-danger: #FFFFFF;
  --danger-container: #FBE4E5;
  --on-danger-container: #8E1A2B;

  /* composed surfaces */
  --merchant-bg: #3A2A22;          /* cocoa panel: the merchant app's colour */
  --merchant-ink: #FBF5EC;
  --merchant-ink-soft: #D9C9B8;
  --merchant-accent: #E8875F;
  --merchant-line: rgba(251, 245, 236, .16);
  --footer-bg: #F2E7D8;
  --plate: #F2E7D8;                /* soft sand plate behind art */
  --focus: #B5502D;
  --selection: #F7E3D8;

  /* elevation: warm cocoa-tinted, never grey */
  --shadow-sm: 0 1px 2px rgba(58, 42, 34, .06), 0 1px 1px rgba(58, 42, 34, .04);
  --shadow-md: 0 1px 2px rgba(58, 42, 34, .05), 0 10px 28px -14px rgba(58, 42, 34, .22);
  --shadow-lg: 0 2px 4px rgba(58, 42, 34, .05), 0 24px 48px -20px rgba(58, 42, 34, .28);
  --art-shadow: drop-shadow(0 14px 18px rgba(122, 50, 24, .16));

  /* radius (tokens.json radius, dp → px) + one larger plate radius */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-2xl: 40px;
  --r-full: 999px;

  /* spacing: 4-px scale */
  --s-1: .25rem; --s-2: .5rem; --s-3: .75rem; --s-4: 1rem; --s-5: 1.25rem;
  --s-6: 1.5rem; --s-8: 2rem; --s-10: 2.5rem; --s-12: 3rem; --s-16: 4rem; --s-20: 5rem;
  --gutter: clamp(16px, 4vw, 40px);
  --section-y: clamp(56px, 9vw, 120px);
  --wrap: 1200px;
  --measure: 68ch;

  /* fluid type scale (min at 360px, max at 1280px) */
  --fs-xs: clamp(.8125rem, .79rem + .1vw, .875rem);
  --fs-sm: clamp(.9rem, .87rem + .15vw, .96rem);
  --fs-base: clamp(1rem, .96rem + .2vw, 1.0625rem);
  --fs-md: clamp(1.1rem, 1.04rem + .3vw, 1.25rem);
  --fs-lg: clamp(1.3rem, 1.17rem + .6vw, 1.6rem);
  --fs-xl: clamp(1.6rem, 1.36rem + 1.1vw, 2.25rem);
  --fs-2xl: clamp(2rem, 1.58rem + 1.9vw, 3.1rem);
  --fs-hero: clamp(2.3rem, 1.6rem + 3.3vw, 4.25rem);

  --lh-body: 1.85;     /* Arabic needs air */
  --lh-tight: 1.4;
  --font: "IBM Plex Sans Arabic", "Geeza Pro", "Segoe UI", Tahoma, system-ui, sans-serif;

  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --ease-spring: cubic-bezier(.34, 1.4, .5, 1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --primary: #E8875F;
    --on-primary: #2B130A;
    --primary-pressed: #F09B77;
    --primary-container: #4A2617;
    --on-primary-container: #FFD9C8;
    --bg: #1B1411;
    --surface: #261D18;
    --surface-variant: #322620;
    --outline: #463830;
    --outline-strong: #7A6A5C;
    --ink: #F4EADD;
    --ink-soft: #C9B8A7;
    --ink-muted: #A8968A;
    --success: #8CC97E;
    --on-success: #12230F;
    --success-container: #24331F;
    --on-success-container: #B9E5AE;
    --highlight: #F2BC5C;
    --on-highlight: #2B1D06;
    --highlight-container: #3D2F17;
    --on-highlight-container: #F7D58F;
    --danger: #FF8A80;
    --on-danger: #3B0A0E;
    --danger-container: #46191C;
    --on-danger-container: #FFB4AB;

    --merchant-bg: #2B201A;
    --merchant-ink: #F4EADD;
    --merchant-ink-soft: #C9B8A7;
    --merchant-accent: #E8875F;
    --merchant-line: rgba(244, 234, 221, .12);
    --footer-bg: #140F0C;
    --plate: #261D18;
    --focus: #E8875F;
    --selection: #4A2617;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .35);
    --shadow-md: 0 1px 2px rgba(0, 0, 0, .3), 0 12px 28px -14px rgba(0, 0, 0, .6);
    --shadow-lg: 0 2px 4px rgba(0, 0, 0, .3), 0 24px 48px -20px rgba(0, 0, 0, .7);
    --art-shadow: drop-shadow(0 14px 18px rgba(0, 0, 0, .35));
  }
}

/* ---------- 3. Base */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: var(--s-6);
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  letter-spacing: 0;               /* always 0: tracking breaks Arabic joining */
  font-kerning: normal;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}
main { flex: 1 0 auto; }
main:focus { outline: none; }

:lang(en) { --lh-body: 1.65; --lh-tight: 1.2; }

::selection { background: var(--selection); color: var(--ink); }

img, svg, picture { display: block; max-width: 100%; }
img { height: auto; }

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 700;
  line-height: var(--lh-tight);
  color: var(--ink);
  text-wrap: balance;
}
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; }

a {
  color: var(--primary);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: .32em;
  text-decoration-color: color-mix(in srgb, var(--primary) 45%, transparent);
  transition: color .15s ease, text-decoration-color .15s ease;
}
a:hover { color: var(--primary-pressed); text-decoration-color: currentColor; }

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}

strong, b { font-weight: 700; }
small { font-size: var(--fs-sm); }
hr { border: 0; height: 1px; background: var(--outline); margin: var(--s-8) 0; }

/* Latin runs and numbers inside Arabic text: isolate so punctuation never jumps */
html[dir="rtl"] [lang="en"]:not(html):not(article):not(section):not(div) { direction: ltr; unicode-bidi: isolate; }
.ltr, bdi.ltr { direction: ltr; unicode-bidi: isolate; display: inline-block; }
.num { font-variant-numeric: tabular-nums; }

/* SVG sprite icons */
.i { width: 1.25em; height: 1.25em; flex: none; display: inline-block; vertical-align: -.25em; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip {
  position: absolute; inset-inline-start: var(--s-4); top: -100px; z-index: 100;
  background: var(--ink); color: var(--bg); padding: var(--s-2) var(--s-4);
  border-radius: var(--r-sm); font-weight: 700; text-decoration: none;
}
.skip:focus { top: var(--s-4); }

/* ---------- 4. Layout */
.wrap {
  width: 100%;
  max-width: calc(var(--wrap) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.section { padding-block: var(--section-y); }
.section + .section { padding-block-start: 0; }
.section-head { max-width: 46rem; margin-block-end: clamp(var(--s-8), 5vw, var(--s-12)); }
.section-head h2 { font-size: var(--fs-2xl); }
.section-head p { margin-block-start: var(--s-3); color: var(--ink-soft); font-size: var(--fs-md); }
.stack > * + * { margin-block-start: var(--s-4); }

/* the toe-bean oval: 26×34 u tilted −14° — the brand's own dot */
.toe {
  display: inline-block; flex: none;
  width: .52em; height: .68em;
  border-radius: 50%;
  background: currentColor;
  transform: rotate(-14deg);
}
.toes { display: inline-flex; gap: .3em; align-items: flex-end; color: var(--primary); }
.toes .toe:nth-child(2), .toes .toe:nth-child(3) { transform: translateY(-.28em) rotate(-14deg); }

/* ---------- 5. Header */
.site-header {
  position: relative;
  z-index: 10;
  padding-block: var(--s-4);
}
.header-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas: "brand nav lang";
  align-items: center;
  gap: var(--s-4) var(--s-6);
}
.brand { grid-area: brand; display: inline-flex; align-items: center; gap: var(--s-2); text-decoration: none; color: var(--ink); border-radius: var(--r-sm); }
.brand img { width: auto; height: 44px; }
.brand-en { font-weight: 700; font-size: 1.55rem; line-height: 1; letter-spacing: 0; }
.brand-en img { height: 36px; }

.site-nav { grid-area: nav; display: flex; justify-content: flex-start; gap: var(--s-1); flex-wrap: wrap; }
.site-nav a, .lang-switch {
  display: inline-flex; align-items: center; gap: var(--s-2);
  min-height: 44px; padding-inline: var(--s-4);
  border-radius: var(--r-full);
  color: var(--ink); text-decoration: none; font-weight: 500; font-size: var(--fs-sm);
  transition: background-color .15s ease, color .15s ease;
}
.site-nav a:hover, .lang-switch:hover { background: var(--surface-variant); color: var(--ink); }
.site-nav a[aria-current="page"] { background: var(--primary-container); color: var(--on-primary-container); }
.lang-switch { grid-area: lang; border: 1.5px solid var(--outline); }
.lang-switch .i { color: var(--ink-soft); }

@media (max-width: 760px) {
  .header-row {
    grid-template-columns: 1fr auto;
    grid-template-areas: "brand lang" "nav nav";
    row-gap: var(--s-3);
  }
  .brand img { height: 38px; }
  .site-nav {
    gap: var(--s-2);
    padding-block-start: var(--s-3);
    border-block-start: 1px solid var(--outline);
  }
  .site-nav a { background: var(--surface); box-shadow: inset 0 0 0 1px var(--outline); min-height: 44px; padding-inline: var(--s-3); }
  .lang-switch { min-height: 44px; padding-inline: var(--s-3); }
}

/* ---------- 6. Buttons and the store-links line */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: 48px; padding: var(--s-2) var(--s-6);
  border: 0; border-radius: var(--r-md);
  font: inherit; font-weight: 700; font-size: var(--fs-base); line-height: 1.3;
  text-decoration: none; cursor: pointer;
  transition: background-color .15s ease, color .15s ease, box-shadow .15s ease, transform .15s var(--ease-out);
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--primary); color: var(--on-primary); box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--primary-pressed); color: var(--on-primary); }
.btn-soft { background: var(--primary-container); color: var(--on-primary-container); }
.btn-soft:hover { background: color-mix(in srgb, var(--primary-container) 80%, var(--primary)); color: var(--on-primary-container); }
.btn-ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--outline-strong); }
.btn-ghost:hover { background: var(--surface-variant); color: var(--ink); }
.btn-danger { background: var(--danger); color: var(--on-danger); }
.btn-danger:hover { background: color-mix(in srgb, var(--danger) 85%, #000); color: var(--on-danger); }
.btn-block { width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--s-3); }

/* before launch: one plain line, never a look-alike of the official store badges (PORTING §3.2) */
.soon-line {
  display: flex; align-items: center; gap: var(--s-2);
  margin-block-start: var(--s-5);
  color: var(--ink-soft); font-size: var(--fs-sm); font-weight: 500; line-height: 1.5;
}
.soon-line .i { width: 20px; height: 20px; color: var(--primary); }
.on-merchant .soon-line, .page-hero-card.is-merchant .soon-line { color: var(--merchant-ink-soft); }
.on-merchant .soon-line .i, .page-hero-card.is-merchant .soon-line .i { color: var(--merchant-accent); }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-block-start: var(--s-8); }

/* ---------- 7. Landing hero */
.hero { padding-block: clamp(var(--s-6), 4vw, var(--s-12)) var(--section-y); overflow: hidden; }
.hero + .section { padding-block-start: 0; }
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  align-items: center;
  gap: clamp(var(--s-8), 5vw, var(--s-16));
}
.hero-title { font-size: var(--fs-hero); line-height: 1.25; max-width: 13ch; }
:lang(en) .hero-title { line-height: 1.08; max-width: 14ch; }
.hero-lead { margin-block-start: var(--s-5); font-size: var(--fs-md); color: var(--ink-soft); max-width: 36rem; }
.hero-facts { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); margin-block: var(--s-6) var(--s-8); list-style: none; }
.hero-facts li { display: inline-flex; align-items: center; gap: var(--s-2); font-weight: 500; font-size: var(--fs-sm); color: var(--ink); }
.hero-facts .i { color: var(--success); }

/* the paw-heart made of animals (signature art) */
.paw-art {
  position: relative;
  width: min(100%, 540px);
  aspect-ratio: 100 / 67;
  margin-inline: auto;
  isolation: isolate;
}
.paw-art::before {             /* soft sand glow the paw stands on */
  content: ""; position: absolute; z-index: -1;
  inset: -8% -6% -10%;
  background: radial-gradient(closest-side, var(--plate) 55%, transparent);
}
.paw-pad {
  position: absolute; left: 25%; bottom: 0; width: 50%;
  color: var(--primary);
  filter: var(--art-shadow);
}
.paw-pad svg { width: 100%; height: auto; }
/* toes sit on an arc around the heart, like the symbol (positions in % of the box) */
.paw-toe { position: absolute; left: var(--l); top: var(--t); width: var(--d); filter: var(--art-shadow); }
.paw-toe img { width: 100%; height: auto; }
.paw-toe:nth-child(2) { --l: 4%;    --t: 24.3%; --d: 22%; }
.paw-toe:nth-child(3) { --l: 24.5%; --t: 4.5%;  --d: 24%; }
.paw-toe:nth-child(4) { --l: 51.5%; --t: 4.5%;  --d: 24%; }
.paw-toe:nth-child(5) { --l: 74%;   --t: 24.3%; --d: 22%; }

@media (prefers-reduced-motion: no-preference) {
  .paw-pad { animation: pad-in .7s var(--ease-out) both; }
  .paw-toe { animation: toe-in .6s var(--ease-spring) both; }
  .paw-toe:nth-child(2) { animation-delay: .25s; }
  .paw-toe:nth-child(3) { animation-delay: .35s; }
  .paw-toe:nth-child(4) { animation-delay: .45s; }
  .paw-toe:nth-child(5) { animation-delay: .55s; }
}
@keyframes pad-in { from { opacity: 0; transform: translateY(12px) scale(.92); } to { opacity: 1; transform: none; } }
@keyframes toe-in { from { opacity: 0; transform: translateY(18px) scale(.6); } to { opacity: 1; transform: none; } }

@media (max-width: 880px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-art { order: -1; }
  .paw-art { width: min(88%, 380px); }
  .hero-title { max-width: 16ch; }
}
@media (max-width: 560px) {
  .hero-grid { gap: var(--s-6); }
  .paw-art { width: min(70%, 240px); }
}

/* ---------- 8. Browse by animal / sections */
.animal-shelf {
  display: grid;
  grid-template-columns: repeat(9, minmax(0, 1fr));
  gap: var(--s-4);
  list-style: none;
}
.animal-shelf li { text-align: center; }
.animal-shelf picture { width: 100%; max-width: 112px; margin-inline: auto; }
/* text-only tile (no illustration for the animal yet): a dashed plate the size of the illustrations' own plate */
.text-plate {
  display: grid; place-items: center; aspect-ratio: 1; margin-inline: auto;
  padding: .4em; border-radius: 50%; border: 2px dashed var(--outline-strong);
  color: var(--ink-soft); font-weight: 700; font-size: var(--fs-sm); line-height: 1.35; text-align: center;
}
.animal-shelf .text-plate { display: grid; width: 87.5%; max-width: 98px; margin: 6% auto 0; line-height: 1.35; }
.animal-shelf span { display: block; margin-block-start: var(--s-2); font-weight: 500; font-size: var(--fs-sm); line-height: 1.4; }
@media (max-width: 900px) { .animal-shelf { grid-template-columns: repeat(5, minmax(0, 1fr)); row-gap: var(--s-6); } }
@media (max-width: 560px) { .animal-shelf { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.section-plate {
  margin-block-start: clamp(var(--s-10), 6vw, var(--s-16));
  padding: clamp(var(--s-5), 4vw, var(--s-10));
  border-radius: var(--r-2xl);
  background: var(--surface);
  box-shadow: var(--shadow-md);
}
.section-plate h3 { font-size: var(--fs-lg); margin-block-end: var(--s-6); }
.section-list { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s-2) var(--s-4); list-style: none; }
.section-list li { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-2); border-radius: var(--r-md); font-weight: 500; font-size: var(--fs-sm); line-height: 1.45; }
.section-list picture { width: 52px; flex: none; }
.section-list li.is-listings { background: var(--primary-container); color: var(--on-primary-container); }
@media (max-width: 1000px) { .section-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 620px) { .section-list { grid-template-columns: 1fr; gap: 0; } .section-list picture { width: 44px; } }

/* ---------- 9. How it works: three paths */
.paths { display: grid; gap: 0; }
.path {
  display: grid;
  grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
  gap: var(--s-6) clamp(var(--s-8), 5vw, var(--s-16));
  align-items: center;
  padding-block: clamp(var(--s-8), 4vw, var(--s-12));
  border-block-start: 1px solid var(--outline);
}
.path:last-child { border-block-end: 1px solid var(--outline); }
.path-head { display: flex; align-items: center; gap: var(--s-4); }
.path-head picture { width: 88px; flex: none; }
.path-head h3 { font-size: var(--fs-lg); }
.path-head p { color: var(--ink-soft); font-size: var(--fs-sm); margin-block-start: var(--s-1); }

.path-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); list-style: none; counter-reset: step; }
.path-steps li {
  position: relative; counter-increment: step;
  padding-block-start: var(--s-10);
  font-size: var(--fs-sm); line-height: 1.75;
}
.path-steps li::before {
  content: counter(step, arabic-indic);
  position: absolute; inset-block-start: 0; inset-inline-start: 0;
  width: 34px; height: 34px; display: grid; place-items: center;
  border-radius: 50%;
  background: var(--primary-container); color: var(--on-primary-container);
  font-weight: 700; font-size: .95rem;
}
:lang(en) .path-steps li::before { content: counter(step); }
.path-steps li::after {            /* dashed connector between steps */
  content: ""; position: absolute; inset-block-start: 17px;
  inset-inline-start: 44px; inset-inline-end: -8px;
  border-block-start: 2px dashed var(--outline);
}
.path-steps li:last-child::after { display: none; }
.path-steps strong { display: block; font-size: var(--fs-base); margin-block-end: var(--s-1); }
.path-steps li > span { color: var(--ink-soft); }
@media (max-width: 860px) {
  .path { grid-template-columns: 1fr; }
  .path-steps { grid-template-columns: 1fr; gap: 0; }
  .path-steps li { padding-block: 0 var(--s-5); padding-inline-start: 50px; }
  .path-steps li::after { inset-block-start: 40px; inset-block-end: 4px; inset-inline-start: 16px; inset-inline-end: auto; border-block-start: 0; border-inline-start: 2px dashed var(--outline); }
}

/* ---------- 10. Trust band (leaf = trust) */
.band-trust {
  background: var(--success-container);
  border-radius: var(--r-2xl);
  padding: clamp(var(--s-6), 5vw, var(--s-16));
  color: var(--ink);
}
.band-trust .section-head h2 { color: var(--ink); }
.band-trust .section-head p { color: var(--ink-soft); }
.trust-layout { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: var(--s-10); align-items: start; }
.trust-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-8) var(--s-10); list-style: none; }
.trust-grid li { display: grid; grid-template-columns: 44px 1fr; gap: var(--s-1) var(--s-4); }
.trust-grid .ico {
  grid-row: span 2; width: 44px; height: 44px; display: grid; place-items: center;
  border-radius: 50%; background: var(--success); color: var(--on-success);
}
.trust-grid .ico .i { width: 22px; height: 22px; }
.trust-grid h3 { font-size: var(--fs-md); }
.trust-grid p { color: var(--ink-soft); font-size: var(--fs-sm); line-height: 1.8; }
.trust-art { width: 240px; }
.trust-foot {
  margin-block-start: var(--s-10);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-4) var(--s-6);
}
.trust-foot .tips { flex: 1 1 34rem; }
.tips {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-6);
  padding: var(--s-4) var(--s-5);
  border-radius: var(--r-lg);
  background: var(--surface);
  font-size: var(--fs-sm);
}
.tips strong { display: inline-flex; align-items: center; gap: var(--s-2); color: var(--on-success-container); }
.tips ul { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); list-style: none; }
.tips li { display: inline-flex; align-items: center; gap: var(--s-2); }
.tips li .toe { color: var(--success); font-size: .8rem; }
@media (max-width: 900px) {
  .trust-layout { grid-template-columns: 1fr; }
  .trust-art { width: 160px; order: -1; }
}
@media (max-width: 600px) { .trust-grid { grid-template-columns: 1fr; gap: var(--s-6); } }

/* ---------- 11. Merchant panel (cocoa = the merchant app) */
.panel-merchant {
  --ink: var(--merchant-ink);
  background: var(--merchant-bg);
  color: var(--merchant-ink);
  border-radius: var(--r-2xl);
  padding: clamp(var(--s-6), 5vw, var(--s-16));
  overflow: hidden;
  position: relative;
}
.panel-merchant, .page-hero-card.is-merchant { --focus: var(--merchant-accent); }
.panel-merchant h2, .panel-merchant h3 { color: var(--merchant-ink); }
.panel-merchant p { color: var(--merchant-ink-soft); }
.panel-merchant a:not(.btn) { color: var(--merchant-ink); }
.merchant-top { display: flex; align-items: center; gap: var(--s-6); margin-block-end: var(--s-10); }
.merchant-top img { width: 88px; height: 88px; border-radius: 22px; flex: none; box-shadow: 0 0 0 1px var(--merchant-line); }
.merchant-top h2 { font-size: var(--fs-2xl); }
.merchant-top p { margin-block-start: var(--s-2); font-size: var(--fs-md); max-width: 40rem; }
.kinds { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); list-style: none; }
.kind {
  padding: var(--s-6);
  border-radius: var(--r-lg);
  border: 1px solid var(--merchant-line);
  background: color-mix(in srgb, var(--merchant-ink) 4%, transparent);
}
.kind picture { width: 64px; margin-block-end: var(--s-4); }
.kind h3 { font-size: var(--fs-md); }
.kind p { font-size: var(--fs-sm); margin-block-start: var(--s-2); line-height: 1.8; }
.kind .need { display: inline-flex; align-items: center; gap: var(--s-2); margin-block-start: var(--s-4); padding: 2px 12px; border-radius: var(--r-full); background: var(--highlight); color: var(--on-highlight); font-size: var(--fs-xs); font-weight: 700; }
.merchant-cta { margin-block-start: var(--s-10); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-6); }
.panel-merchant .btn-primary, .page-hero-card.is-merchant .btn-primary { background: var(--merchant-accent); color: #2B130A; }
.panel-merchant .btn-primary:hover, .page-hero-card.is-merchant .btn-primary:hover { background: #F09B77; color: #2B130A; }
@media (max-width: 860px) { .kinds { grid-template-columns: 1fr; } .merchant-top { align-items: flex-start; } .merchant-top img { width: 64px; height: 64px; border-radius: 16px; } }

/* ---------- 12. FAQ */
.faq-layout { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: var(--s-10); align-items: start; }
.faq-layout .section-head { position: sticky; top: var(--s-6); }
.faq { border-block-start: 1px solid var(--outline); }
.faq details { border-block-end: 1px solid var(--outline); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  min-height: 64px; padding-block: var(--s-4);
  cursor: pointer; list-style: none;
  font-weight: 700; font-size: var(--fs-md); line-height: 1.5;
  border-radius: var(--r-xs);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .i { width: 22px; height: 22px; color: var(--primary); transition: transform .25s var(--ease-out); }
.faq details[open] summary .i { transform: rotate(180deg); }
.faq .answer { padding-block-end: var(--s-6); color: var(--ink-soft); max-width: var(--measure); }
.faq .answer > * + * { margin-block-start: var(--s-3); }
@media (max-width: 860px) { .faq-layout { grid-template-columns: 1fr; gap: var(--s-4); } .faq-layout .section-head { position: static; } }

/* ---------- 13. Inner pages: page hero */
.page-hero { padding-block: clamp(var(--s-6), 4vw, var(--s-10)) clamp(var(--s-8), 5vw, var(--s-12)); }
.page-hero-card {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-8); align-items: center;
  padding: clamp(var(--s-6), 5vw, var(--s-12));
  border-radius: var(--r-2xl);
  background: var(--surface-variant);
  overflow: hidden;
}
.page-hero-card > * { position: relative; z-index: 1; }
.page-hero-card::after {          /* the paw-heart symbol as a faint watermark, half off the top edge, clear of the art */
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  inset-block-start: -70px; inset-inline-end: calc(clamp(120px, 16vw, 180px) + 10%);
  width: 230px; aspect-ratio: 1;
  background: var(--primary); opacity: .07;
  -webkit-mask: url("/assets/img/logo/symbol.svg") center / contain no-repeat;
  mask: url("/assets/img/logo/symbol.svg") center / contain no-repeat;
  transform: rotate(-14deg);
}
.page-hero h1 { font-size: var(--fs-2xl); }
.page-hero-card:not(.is-merchant) a:not(.btn) { color: var(--primary-pressed); }
.page-hero .lead { margin-block-start: var(--s-3); font-size: var(--fs-md); color: var(--ink-soft); max-width: 44rem; }
.page-hero picture { width: clamp(120px, 16vw, 180px); }
.meta { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-block-start: var(--s-5); list-style: none; }
.pill {
  display: inline-flex; align-items: center; gap: var(--s-2);
  min-height: 32px; padding: 2px 14px;
  border-radius: var(--r-full);
  background: var(--surface); color: var(--ink);
  font-size: var(--fs-xs); font-weight: 500; line-height: 1.5;
}
.pill .i { width: 16px; height: 16px; color: var(--primary); }
.pill-leaf { background: var(--success-container); color: var(--on-success-container); }
.pill-leaf .i { color: var(--on-success-container); }
.pill-honey { background: var(--highlight-container); color: var(--on-highlight-container); }
.pill-honey .i { color: var(--on-highlight-container); }
@media (max-width: 700px) {
  .page-hero-card { grid-template-columns: 1fr; gap: var(--s-4); }
  .page-hero picture { width: 96px; order: -1; }
}

/* ---------- 14. Document layout (privacy, terms, rules) */
.doc-layout {
  display: grid;
  grid-template-columns: 260px minmax(0, var(--measure));
  justify-content: center;
  gap: clamp(var(--s-8), 5vw, var(--s-16));
  align-items: start;
  padding-block-end: var(--section-y);
}
.toc { position: sticky; top: var(--s-6); max-height: calc(100vh - 3rem); overflow: auto; padding-block-end: var(--s-4); }
.toc h2 { font-size: var(--fs-sm); color: var(--ink-muted); font-weight: 500; margin-block-end: var(--s-3); }
.toc ol { list-style: none; display: grid; gap: 2px; border-inline-start: 2px solid var(--outline); }
.toc a {
  display: flex; align-items: center; min-height: 44px; padding: var(--s-2) var(--s-4);
  margin-inline-start: -2px; border-inline-start: 2px solid transparent;
  color: var(--ink-soft); text-decoration: none; font-size: var(--fs-sm); line-height: 1.5;
}
.toc a:hover { color: var(--primary); border-inline-start-color: var(--primary); }
.toc-mobile { display: none; }
@media (max-width: 960px) {
  .doc-layout { grid-template-columns: 1fr; gap: var(--s-6); }
  .toc { display: none; }
  .toc-mobile { display: block; border-radius: var(--r-lg); background: var(--surface); box-shadow: inset 0 0 0 1px var(--outline); }
  .toc-mobile > summary {
    display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
    min-height: 52px; padding-inline: var(--s-5); cursor: pointer; list-style: none; font-weight: 700;
    border-radius: var(--r-lg);
  }
  .toc-mobile > summary::-webkit-details-marker { display: none; }
  .toc-mobile > summary .i { color: var(--primary); transition: transform .25s var(--ease-out); }
  .toc-mobile[open] > summary .i { transform: rotate(180deg); }
  .toc-mobile ol { list-style: none; display: grid; margin: 0 var(--s-5) var(--s-4); border-inline-start: 2px solid var(--outline); }
  .toc-mobile a { display: flex; align-items: center; min-height: 44px; padding: var(--s-2) var(--s-4); color: var(--ink-soft); text-decoration: none; font-size: var(--fs-sm); line-height: 1.5; }
}

.doc { max-width: var(--measure); }
.doc > section { padding-block-start: var(--s-10); }
.doc > section:first-child { padding-block-start: 0; }
.doc h2 {
  display: flex; align-items: baseline; gap: var(--s-3);
  font-size: var(--fs-xl);
  margin-block-end: var(--s-4);
  scroll-margin-top: var(--s-6);
}
.doc h2::before {                  /* toe-bean marker */
  content: ""; flex: none;
  width: .42em; height: .56em; border-radius: 50%;
  background: var(--primary);
  transform: rotate(-14deg) translateY(-.06em);
}
.doc h3 { font-size: var(--fs-md); margin-block: var(--s-6) var(--s-2); }
.doc p, .doc li { color: var(--ink); }
.doc p + p, .doc p + ul, .doc ul + p, .doc p + ol, .doc ol + p { margin-block-start: var(--s-4); }
.doc ul, .doc ol { padding-inline-start: 0; list-style: none; display: grid; gap: var(--s-3); }
.doc ul > li { position: relative; padding-inline-start: 1.5em; }
.doc ul > li::before {
  content: ""; position: absolute; inset-inline-start: .25em; top: .72em;
  width: .42em; height: .55em; border-radius: 50%;
  background: var(--primary); opacity: .75; transform: rotate(-14deg);
}
.doc ol { counter-reset: li; }
.doc ol > li { position: relative; padding-inline-start: 2.4em; counter-increment: li; }
.doc ol > li::before {
  content: counter(li, arabic-indic);
  position: absolute; inset-inline-start: 0; top: .1em;
  width: 1.7em; height: 1.7em; display: grid; place-items: center;
  border-radius: 50%; background: var(--primary-container); color: var(--on-primary-container);
  font-weight: 700; font-size: .85em; line-height: 1;
}
:lang(en) .doc ol > li::before { content: counter(li); }
.doc .lede { font-size: var(--fs-md); color: var(--ink-soft); }

/* summary card at the top of a policy */
.summary-card {
  padding: clamp(var(--s-5), 4vw, var(--s-8));
  border-radius: var(--r-xl);
  background: var(--surface);
  box-shadow: var(--shadow-md);
}
.summary-card h2::before { display: none; }
.summary-card h2 { font-size: var(--fs-lg); }
.doc .summary-card ul { gap: var(--s-3); }
.doc .summary-card li { padding-inline-start: 2.1em; }
.doc .summary-card li::before { display: none; }
.summary-card li .i { position: absolute; inset-inline-start: 0; top: .3em; width: 1.35em; height: 1.35em; padding: 3px; border-radius: 50%; background: var(--success-container); color: var(--on-success-container); }

/* data blocks (privacy: per-feature) */
.data-block {
  margin-block-start: var(--s-5);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--outline);
  overflow: hidden;
}
.data-block > h3 {
  display: flex; align-items: center; gap: var(--s-3);
  margin: 0; padding: var(--s-4) var(--s-5);
  background: var(--surface-variant);
  font-size: var(--fs-base);
}
.data-block > h3 .i { color: var(--primary); }
.data-block dl { margin: 0; padding: var(--s-2) var(--s-5) var(--s-4); display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); }
.data-block dt, .data-block dd { padding-block: var(--s-3); border-block-start: 1px solid var(--outline); }
.data-block dt:first-of-type, .data-block dt:first-of-type + dd { border-block-start: 0; }
.data-block dt { font-weight: 700; font-size: var(--fs-sm); color: var(--ink-soft); padding-inline-end: var(--s-4); }
.data-block dd { margin: 0; font-size: var(--fs-sm); line-height: 1.8; }
@media (max-width: 560px) {
  .data-block dl { grid-template-columns: 1fr; }
  .data-block dt { padding-block-end: 0; }
  .data-block dd { border-block-start: 0; padding-block-start: var(--s-1); }
}

/* callouts */
.callout {
  display: grid; grid-template-columns: auto 1fr; gap: var(--s-3);
  margin-block-start: var(--s-5);
  padding: var(--s-4) var(--s-5);
  border-radius: var(--r-lg);
  background: var(--primary-container); color: var(--on-primary-container);
  font-size: var(--fs-sm); line-height: 1.8;
}
.callout .i { width: 22px; height: 22px; margin-block-start: .2em; }
.callout p, .callout li { color: inherit; }
.callout-leaf { background: var(--success-container); color: var(--on-success-container); }
.callout-honey { background: var(--highlight-container); color: var(--on-highlight-container); }
.callout-danger { background: var(--danger-container); color: var(--on-danger-container); }   /* destructive confirmations only (BRAND.md §4) */
.callout strong { color: inherit; }

/* simple responsive table: becomes stacked rows on phones */
.table-wrap { margin-block-start: var(--s-5); border-radius: var(--r-lg); box-shadow: inset 0 0 0 1px var(--outline); overflow: hidden; background: var(--surface); }
.table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); line-height: 1.7; }
.table th, .table td { text-align: start; vertical-align: top; padding: var(--s-3) var(--s-4); border-block-start: 1px solid var(--outline); }
.table thead th { border-block-start: 0; background: var(--surface-variant); font-weight: 700; }
.table td .i { color: var(--success); }
.table .no { color: var(--ink-muted); }
.table tbody th { font-weight: 700; }
@media (max-width: 620px) {
  .table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .table tr { display: block; padding: var(--s-3) var(--s-4); border-block-start: 1px solid var(--outline); }
  .table tbody tr:first-child { border-block-start: 0; }
  .table th, .table td { display: block; padding: var(--s-1) 0; border: 0; }
  .table td[data-label]::before { content: attr(data-label) " "; font-weight: 700; color: var(--ink-soft); }
}

/* do / don't (community rules) */
.dodont { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); margin-block-start: var(--s-5); }
.dodont > div { padding: var(--s-5) var(--s-6); border-radius: var(--r-lg); }
.dodont .do { background: var(--success-container); color: var(--on-success-container); }
.dodont .dont { background: var(--highlight-container); color: var(--on-highlight-container); }
.dodont h3 { display: flex; align-items: center; gap: var(--s-2); margin: 0 0 var(--s-3); font-size: var(--fs-base); color: inherit; }
.doc .dodont ul { gap: var(--s-2); }
.doc .dodont li { color: inherit; padding-inline-start: 1.8em; font-size: var(--fs-sm); line-height: 1.8; }
.doc .dodont li::before { display: none; }
.dodont li .i { position: absolute; inset-inline-start: 0; top: .35em; width: 1.15em; height: 1.15em; }
@media (max-width: 640px) { .dodont { grid-template-columns: 1fr; } }

.species { display: grid; grid-template-columns: repeat(auto-fill, minmax(136px, 1fr)); gap: var(--s-3); list-style: none; margin-block-start: var(--s-5); }
.doc .species { display: grid; }
.doc .species li { padding: var(--s-3); border-radius: var(--r-lg); background: var(--surface); box-shadow: inset 0 0 0 1px var(--outline); text-align: center; font-size: var(--fs-sm); font-weight: 500; line-height: 1.45; }
.doc .species li::before { display: none; }
.species picture { width: 64px; margin: 0 auto var(--s-2); }

.ban-list { display: grid; gap: var(--s-3); margin-block-start: var(--s-5); }
.ban {
  display: grid; grid-template-columns: 40px 1fr; gap: var(--s-1) var(--s-4);
  padding: var(--s-4) var(--s-5); border-radius: var(--r-lg);
  background: var(--surface); box-shadow: inset 0 0 0 1px var(--outline);
}
.ban .ico { grid-row: span 2; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; background: var(--surface-variant); color: var(--ink); }
.ban h3 { margin: 0; font-size: var(--fs-base); }
.ban p { font-size: var(--fs-sm); color: var(--ink-soft); line-height: 1.8; }

/* step list used outside .doc (delete-account, merchants) */
.steps { list-style: none; counter-reset: s; display: grid; gap: var(--s-4); }
.steps > li { position: relative; counter-increment: s; padding-inline-start: 3rem; min-height: 2.2rem; }
.steps > li::before {
  content: counter(s, arabic-indic);
  position: absolute; inset-inline-start: 0; top: 0;
  width: 2.2rem; height: 2.2rem; display: grid; place-items: center;
  border-radius: 50%; background: var(--primary); color: var(--on-primary);
  font-weight: 700; font-size: .95rem;
}
:lang(en) .steps > li::before { content: counter(s); }
.steps > li:not(:last-child)::after {
  content: ""; position: absolute; inset-inline-start: calc(1.1rem - 1px); top: 2.6rem; bottom: calc(-1 * var(--s-4) + .4rem);
  border-inline-start: 2px dashed var(--outline);
}
.steps strong { display: block; }
.steps span { color: var(--ink-soft); font-size: var(--fs-sm); }
.doc .steps > li { padding-inline-start: 3rem; }
.doc .steps > li::before { width: 2.2rem; height: 2.2rem; background: var(--primary); color: var(--on-primary); font-size: .95rem; top: 0; }

/* UI-name chip: how a button or screen is named inside the app */
.ui {
  display: inline-block; padding: 0 .5em;
  border-radius: var(--r-xs);
  background: var(--surface-variant); color: var(--ink);
  font-weight: 700; font-size: .95em; line-height: 1.6;
  box-shadow: inset 0 -1.5px 0 var(--outline);
  white-space: nowrap;
}

.nw { white-space: nowrap; }

/* ---------- 15. Cards used by support / merchants / delete-account */
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5); }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); }
@media (max-width: 900px) { .grid-3 { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .grid-2 { grid-template-columns: 1fr; } }

.card {
  padding: clamp(var(--s-5), 3vw, var(--s-8));
  border-radius: var(--r-xl);
  background: var(--surface);
  box-shadow: var(--shadow-md);
}
.card > h2, .card > h3 { font-size: var(--fs-lg); }
.card > * + * { margin-block-start: var(--s-4); }
.card-flat { box-shadow: inset 0 0 0 1px var(--outline); }
.card-head { display: flex; align-items: center; gap: var(--s-4); }
.card-head img, .card-head picture { width: 56px; flex: none; }
.card-head img { border-radius: 14px; }
.card-head p { color: var(--ink-soft); font-size: var(--fs-sm); }

.contact-list { list-style: none; display: grid; gap: var(--s-3); }
.contact-item {
  display: flex; align-items: center; gap: var(--s-4);
  min-height: 64px; padding: var(--s-3) var(--s-4);
  border-radius: var(--r-lg);
  background: var(--surface); box-shadow: inset 0 0 0 1px var(--outline);
  color: var(--ink); text-decoration: none;
}
a.contact-item:hover { box-shadow: inset 0 0 0 1.5px var(--primary); color: var(--ink); }
.contact-item .ico { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--primary-container); color: var(--on-primary-container); }
.contact-item .ico .i { width: 22px; height: 22px; }
.contact-item small { display: block; color: var(--ink-muted); font-size: var(--fs-xs); line-height: 1.4; }
.contact-item b { font-weight: 700; }
.contact-item > span { min-width: 0; }
.doc .contact-list { margin-block-start: var(--s-4); }
.doc .contact-list > li { padding-inline-start: 0; }
.doc .contact-list > li::before { display: none; }

/* dynamic value placeholder: the server replaces it (see PORTING.md) */
.ph {
  display: inline-block; direction: ltr; unicode-bidi: isolate;
  padding: 0 .45em; border-radius: var(--r-xs);
  border: 1.5px dashed var(--highlight);
  background: var(--highlight-container); color: var(--on-highlight-container);
  font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: .82em; font-weight: 500; line-height: 1.6;
  white-space: nowrap;
}

/* ---------- 16. Forms (delete-account) */
.form-card {
  padding: clamp(var(--s-5), 4vw, var(--s-10));
  border-radius: var(--r-2xl);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
}
.form-card h2 { font-size: var(--fs-xl); }
.form-card > p { color: var(--ink-soft); margin-block-start: var(--s-2); }
.stepper { display: flex; gap: var(--s-2); list-style: none; margin-block-end: var(--s-6); }
.stepper li {
  flex: 1; display: flex; align-items: center; gap: var(--s-2);
  padding-block-start: var(--s-3);
  border-block-start: 4px solid var(--outline);
  color: var(--ink-muted); font-size: var(--fs-xs); font-weight: 500; line-height: 1.4;
}
.stepper li b { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--surface-variant); color: var(--ink-soft); font-size: .75rem; flex: none; }
.stepper li.is-current { border-color: var(--primary); color: var(--ink); }
.stepper li.is-current b { background: var(--primary); color: var(--on-primary); }
.stepper li.is-done { border-color: var(--success); color: var(--ink-soft); }
.stepper li.is-done b { background: var(--success); color: var(--on-success); }

.form { display: grid; gap: var(--s-5); margin-block-start: var(--s-6); }
.field { display: grid; gap: var(--s-2); }
.label, .field > legend { font-weight: 700; font-size: var(--fs-sm); padding: 0; }
.input {
  width: 100%; min-height: 52px; padding: var(--s-3) var(--s-4);
  border: 1.5px solid var(--outline-strong); border-radius: var(--r-sm);
  background: var(--bg); color: var(--ink);
  font: inherit; font-size: 1.125rem;
}
.input::placeholder { color: var(--ink-muted); opacity: 1; }
.input:focus { outline: 3px solid color-mix(in srgb, var(--focus) 35%, transparent); outline-offset: 0; border-color: var(--focus); }
.input-ltr { direction: ltr; text-align: start; }
html[dir="rtl"] .input-ltr { text-align: right; }
.input-code { letter-spacing: .4em; text-align: center !important; font-weight: 700; font-size: 1.5rem; }
.hint { font-size: var(--fs-xs); color: var(--ink-muted); line-height: 1.6; }
fieldset.field { border: 0; margin: 0; padding: 0; min-width: 0; }
.choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); }
.choice { position: relative; display: block; cursor: pointer; }
.choice input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.choice-body {
  display: flex; align-items: center; gap: var(--s-3);
  min-height: 72px; padding: var(--s-3) var(--s-4);
  border-radius: var(--r-md);
  box-shadow: inset 0 0 0 1.5px var(--outline-strong);
  background: var(--bg);
  transition: box-shadow .15s ease, background-color .15s ease;
}
.choice-body img { width: 40px; height: 40px; border-radius: 10px; flex: none; }
.choice-body b { display: block; font-size: var(--fs-sm); line-height: 1.4; }
.choice-body small { display: block; color: var(--ink-muted); font-size: var(--fs-xs); line-height: 1.4; }
.choice input:checked + .choice-body { box-shadow: inset 0 0 0 2.5px var(--primary); background: var(--primary-container); }
.choice input:checked + .choice-body small { color: var(--on-primary-container); }
.choice input:focus-visible + .choice-body { outline: 3px solid var(--focus); outline-offset: 3px; }
@media (max-width: 480px) { .choices { grid-template-columns: 1fr; } }
.check { display: flex; gap: var(--s-3); align-items: flex-start; font-size: var(--fs-sm); line-height: 1.7; cursor: pointer; }
.check input { width: 22px; height: 22px; margin: .15em 0 0; accent-color: var(--danger); flex: none; }
.form-note { font-size: var(--fs-xs); color: var(--ink-muted); display: flex; gap: var(--s-2); align-items: flex-start; line-height: 1.6; }
.form-note .i { width: 16px; height: 16px; margin-top: .2em; color: var(--success); }

.alert { display: grid; grid-template-columns: auto 1fr; gap: var(--s-3); padding: var(--s-4); border-radius: var(--r-md); font-size: var(--fs-sm); line-height: 1.7; }
.alert .i { width: 20px; height: 20px; margin-top: .2em; }
.alert-error { background: var(--danger-container); color: var(--on-danger-container); }
.alert-info { background: var(--primary-container); color: var(--on-primary-container); }
.alert-warning { background: var(--highlight-container); color: var(--on-highlight-container); }
.alert-success { background: var(--success-container); color: var(--on-success-container); }

.done { text-align: center; padding-block: var(--s-6); }
.done .done-ico { width: 72px; height: 72px; margin: 0 auto var(--s-4); display: grid; place-items: center; border-radius: 50%; background: var(--success-container); color: var(--on-success-container); }
.done .done-ico .i { width: 36px; height: 36px; }

/* deleted vs kept */
.fate { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); }
.fate > div { padding: var(--s-5) var(--s-6); border-radius: var(--r-lg); background: var(--surface); box-shadow: inset 0 0 0 1px var(--outline); }
.fate h3 { display: flex; align-items: center; gap: var(--s-2); font-size: var(--fs-base); margin-block-end: var(--s-3); }
.fate .gone h3 .i { color: var(--danger); }
.fate .kept h3 .i { color: var(--on-highlight-container); }
.fate ul { list-style: none; display: grid; gap: var(--s-3); }
.fate li { font-size: var(--fs-sm); line-height: 1.75; padding-inline-start: 1.3em; position: relative; }
.fate li::before { content: ""; position: absolute; inset-inline-start: 0; top: .7em; width: .42em; height: .55em; border-radius: 50%; background: var(--outline-strong); transform: rotate(-14deg); }
.fate li span { display: block; color: var(--ink-muted); font-size: var(--fs-xs); }
@media (max-width: 760px) { .fate { grid-template-columns: 1fr; } }

/* ---------- 17. Footer */
.site-footer {
  margin-block-start: auto;
  background: var(--footer-bg);
  color: var(--ink);
  padding-block: clamp(var(--s-10), 6vw, var(--s-16)) var(--s-6);
  font-size: var(--fs-sm);
}
.footer-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) repeat(2, minmax(0, .8fr)) minmax(0, 1.3fr); gap: var(--s-8); }
.footer-brand img { height: 40px; width: auto; }
.footer-brand p { margin-block-start: var(--s-4); color: var(--ink-soft); max-width: 22rem; line-height: 1.8; }
.site-footer h2 { font-size: var(--fs-sm); font-weight: 700; color: var(--ink); margin-block-end: var(--s-3); }
.site-footer ul { list-style: none; display: grid; gap: 0; }
.site-footer nav a, .footer-contact a { display: inline-flex; align-items: center; gap: var(--s-2); min-height: 44px; color: var(--ink-soft); text-decoration: none; }
.footer-contact a > span { min-width: 0; }
.site-footer nav a:hover, .footer-contact a:hover { color: var(--primary); text-decoration: underline; }
.footer-contact .i { width: 18px; height: 18px; color: var(--primary); }
.footer-base {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--s-3);
  margin-block-start: var(--s-10); padding-block-start: var(--s-5);
  border-block-start: 1px solid var(--outline);
  color: var(--ink-soft); font-size: var(--fs-xs);
}
.footer-base a { color: var(--ink-soft); display: inline-flex; align-items: center; min-height: 44px; }
@media (max-width: 900px) { .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6) var(--s-5); } .footer-brand, .footer-contact { grid-column: 1 / -1; } }

/* ---------- 18. 404 */
.notfound { text-align: center; padding-block: clamp(var(--s-10), 8vw, var(--s-20)); }
.notfound picture { width: min(220px, 60vw); margin: 0 auto var(--s-6); }
.notfound h1 { font-size: var(--fs-2xl); }
.notfound p { margin: var(--s-3) auto 0; color: var(--ink-soft); max-width: 32rem; font-size: var(--fs-md); }
.notfound .btn-row { justify-content: center; margin-block-start: var(--s-8); }

/* ---------- 19. Small helpers */
.muted { color: var(--ink-muted); }
.soft { color: var(--ink-soft); }
.small { font-size: var(--fs-sm); }
.center { text-align: center; }
.mt-2 { margin-block-start: var(--s-2); } .mt-4 { margin-block-start: var(--s-4); } .mt-6 { margin-block-start: var(--s-6); } .mt-8 { margin-block-start: var(--s-8); }
.section-title { font-size: var(--fs-xl); margin-block-end: var(--s-5); }

/* ---------- 20. Motion and print */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}
@media print {
  .site-header nav, .lang-switch, .toc, .site-footer, .soon-line, .hero-actions, .skip { display: none !important; }
  body { background: #fff; color: #000; }
  .page-hero-card, .data-block, .summary-card, .card { box-shadow: none; border: 1px solid #ccc; }
  a { color: #000; }
}

/* app icon in a page hero (merchants, merchant terms) */
.hero-app-icon { width: clamp(96px, 14vw, 150px); height: auto; border-radius: 23%; box-shadow: var(--shadow-lg); }
@media (max-width: 700px) { .hero-app-icon { order: -1; width: 80px; } }

/* ---------- 21. Inner-page components (merchants, privacy, support, delete-account) */
.doc-main { min-width: 0; }
.toc-mobile { margin-block-end: var(--s-8); }
.page-hero + .section, .page-hero + .wrap { padding-block-start: clamp(var(--s-4), 3vw, var(--s-8)); }

/* merchant pages take the merchant app's cocoa (like its icon) */
.page-hero-card.is-merchant {
  --ink: var(--merchant-ink);
  background: var(--merchant-bg);
  color: var(--merchant-ink);
}
.page-hero-card.is-merchant::after { background: var(--merchant-accent); opacity: .1; }
.page-hero-card.is-merchant h1 { color: var(--merchant-ink); }
.page-hero-card.is-merchant .lead { color: var(--merchant-ink-soft); }
.page-hero-card.is-merchant .pill { background: color-mix(in srgb, var(--merchant-ink) 9%, transparent); color: var(--merchant-ink); }
.page-hero-card.is-merchant .pill .i { color: var(--merchant-accent); }
.page-hero-card.is-merchant a:not(.btn) { color: var(--merchant-ink); }

/* benefits: icon + title + line, no boxes (quiet) */
.benefits { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-8) var(--s-10); list-style: none; }
.benefits li { display: grid; grid-template-columns: 48px 1fr; gap: var(--s-1) var(--s-4); align-content: start; }
.benefits .ico { grid-row: span 2; width: 48px; height: 48px; display: grid; place-items: center; border-radius: 16px; background: var(--primary-container); color: var(--on-primary-container); }
.benefits .ico .i { width: 24px; height: 24px; }
.benefits h3 { font-size: var(--fs-md); }
.benefits p { color: var(--ink-soft); font-size: var(--fs-sm); line-height: 1.8; }
@media (max-width: 900px) { .benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .benefits { grid-template-columns: 1fr; gap: var(--s-6); } }

/* store kinds */
.kind-card { display: flex; flex-direction: column; }
.kind-card .card-head picture { width: 64px; }
.kind-card h3 { font-size: var(--fs-md); }
.can { list-style: none; display: grid; gap: var(--s-2); flex: 1; }
.can li { display: flex; gap: var(--s-2); align-items: flex-start; font-size: var(--fs-sm); line-height: 1.7; }
.can .i { width: 1.2em; height: 1.2em; margin-block-start: .25em; color: var(--success); }
.can li.no { color: var(--ink-muted); }
.can li.no .i { color: var(--ink-muted); }
.docs { display: flex; gap: var(--s-2); align-items: flex-start; padding: var(--s-3) var(--s-4); border-radius: var(--r-md); background: var(--surface-variant); font-size: var(--fs-xs); line-height: 1.7; }
.docs .i { width: 1.25em; height: 1.25em; margin-block-start: .15em; color: var(--ink-soft); }
.docs.is-required { background: var(--highlight-container); color: var(--on-highlight-container); font-weight: 500; }
.docs.is-required .i { color: var(--on-highlight-container); }

/* two columns: steps + aside */
.split { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(var(--s-8), 5vw, var(--s-16)); align-items: start; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }
.docs-card h2 { font-size: var(--fs-lg); }
.doc-list { margin: 0; display: grid; gap: var(--s-1); }
.doc-list dt { display: flex; align-items: center; gap: var(--s-2); margin-block-start: var(--s-4); font-weight: 700; }
.doc-list dt .i { color: var(--primary); }
.doc-list dd { margin: 0; color: var(--ink-soft); font-size: var(--fs-sm); line-height: 1.8; }
.steps > li + li { margin-block-start: var(--s-2); }

.cta-panel { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-6); }
.cta-panel .merchant-top { margin: 0; flex: 1 1 28rem; }

/* which app a data block applies to */
.data-block > h3 .tag {
  margin-inline-start: auto;
  padding: 0 10px; border-radius: var(--r-full);
  background: var(--surface); color: var(--ink-soft);
  font-size: var(--fs-xs); font-weight: 500; line-height: 1.8; white-space: nowrap;
}

/* English brand: symbol + "Aleef" in Plex Bold */
.brand-en { display: inline-flex; align-items: center; gap: var(--s-2); margin: 0; }
.brand-en img { height: 36px; width: 36px; }
.footer-brand .brand-en { font-size: 1.4rem; }
.footer-brand .brand-en img { height: 32px; width: 32px; }

/* ---------- 22. Rules, support, delete-account, 404 */
/* app labels as chips (report / reject reasons) */
.chips { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s-2); margin-block-start: var(--s-4); }
.doc .chips { display: flex; gap: var(--s-2); }
.doc .chips > li { padding-inline-start: .55em; padding-inline-end: .55em; margin: 0; white-space: normal; }
.doc .chips > li::before { display: none; }

/* bullets inside callouts take the callout colour */
.doc .callout ul { gap: var(--s-1); margin-block-start: var(--s-2); }
.doc .callout ul > li::before { background: currentColor; opacity: .55; }
.callout > div > p + ul { margin-block-start: var(--s-2); }

/* matrix table (merchant terms): centred ticks */
.matrix td { text-align: center; vertical-align: middle; }
.matrix td .i { width: 1.25em; height: 1.25em; display: inline-block; }
.matrix tbody th { font-weight: 500; }
@media (max-width: 620px) {
  .matrix td { text-align: start; display: inline-flex !important; align-items: center; gap: .35em; margin-inline-end: var(--s-4); }
  .matrix td[data-label]::before { font-weight: 500; }
}

/* report timeline: a sequence, so it is numbered by time words, with a leaf rail */
.timeline { list-style: none; display: grid; gap: 0; margin-block-start: var(--s-4); }
.doc .timeline > li { padding-inline-start: 1.9em; padding-block-end: var(--s-5); position: relative; }
.doc .timeline > li::before {
  content: ""; position: absolute; inset-inline-start: .2em; top: .55em;
  width: .7em; height: .9em; border-radius: 50%; transform: rotate(-14deg);
  background: var(--success); opacity: 1;
}
.doc .timeline > li::after {
  content: ""; position: absolute; inset-inline-start: calc(.55em - 1px); top: 1.7em; bottom: .2em;
  border-inline-start: 2px dotted color-mix(in srgb, var(--success) 45%, transparent);
}
.doc .timeline > li:last-child::after { display: none; }
.timeline b { display: block; color: var(--on-success-container); }
.timeline p { color: var(--ink-soft); margin-block-start: var(--s-1); }

/* support */
.contact-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.contact-grid > li { display: flex; }
.contact-grid .contact-item { flex: 1; }
@media (max-width: 860px) { .contact-grid { grid-template-columns: 1fr; } }
.contact-item b { display: block; font-size: var(--fs-base); }
.contact-item .ph { font-size: .8rem; }
.problem .ico { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 16px; background: var(--primary-container); color: var(--on-primary-container); }
.problem .ico .i { width: 24px; height: 24px; }
.problem h3 { font-size: var(--fs-md); }
.problem p { color: var(--ink-soft); font-size: var(--fs-sm); line-height: 1.8; }
.section .faq-layout + .faq-layout { margin-block-start: var(--section-y); }

/* delete-account */
.split-form { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); }
.in-app { display: grid; gap: var(--s-4); }
.in-app > h2 { font-size: var(--fs-lg); }
.in-app .card > * + * { margin-block-start: var(--s-4); }
.in-app .card-head h3 { font-size: var(--fs-base); }
.steps-sm { gap: var(--s-3); }
.steps-sm > li { padding-inline-start: 2.4rem; font-size: var(--fs-sm); line-height: 1.8; min-height: 1.8rem; }
.steps-sm > li::before { width: 1.8rem; height: 1.8rem; font-size: .85rem; background: var(--primary-container); color: var(--on-primary-container); }
.steps-sm > li:not(:last-child)::after { display: none; }
@media (max-width: 900px) { .split-form { grid-template-columns: 1fr; } }

.states-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); gap: var(--s-8); align-items: start; }
.confirm-facts { list-style: none; display: grid; gap: var(--s-2); margin-block-start: var(--s-4); padding: var(--s-4); border-radius: var(--r-md); background: var(--surface-variant); font-size: var(--fs-sm); }
.confirm-facts li { display: flex; gap: var(--s-2); align-items: flex-start; line-height: 1.7; }
.confirm-facts .i { margin-block-start: .25em; color: var(--ink-soft); }
.link-btn { display: inline-flex; align-items: center; min-height: 44px; padding: 0; border: 0; background: none; color: var(--primary); font: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: .3em; cursor: pointer; }
.input.is-invalid { border-color: var(--danger); }
.done .btn-row { justify-content: center; }
.form-card .alert + .form { margin-block-start: var(--s-5); }

/* 404 */
.nf-links { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 0 var(--s-5); margin-block-start: var(--s-6); font-size: var(--fs-sm); }
.nf-links a { display: inline-flex; align-items: center; min-height: 44px; }
.doc section > :is(div, ul, ol, table) + p { margin-block-start: var(--s-4); }
.doc .species { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.matrix thead th:not(:first-child) { width: 7.5rem; text-align: center; }
@media (max-width: 700px) { .page-hero-card::after { display: none; } }
.doc .species picture { width: 84px; }
.doc .species li.is-text { display: grid; place-items: center; }
.species .text-plate { width: 74px; }

/* privacy hero: the policy covers both apps */
.hero-apps { display: flex; align-items: flex-start; gap: var(--s-3); }
.hero-apps img { width: clamp(72px, 9vw, 104px); height: auto; border-radius: 23%; box-shadow: var(--shadow-lg); }
.hero-apps img + img { margin-block-start: var(--s-8); }
@media (max-width: 700px) { .hero-apps { order: -1; } .hero-apps img { width: 56px; } .hero-apps img + img { margin-block-start: 0; } }

.cta-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-6); }
.cta-actions .soon-line { margin: 0; }
.merchant-cta .soon-line { margin: 0; }