/* ==========================================================================
   Amana Design System: v3 visual layer ("Arch & Seal")
   (file name kept as v2.css so every page keeps its link)

   Loaded after every other stylesheet. It re-skins tokens and components.
   Grammar:
   1. Calm paper, loud moments. Warm papyrus canvas, hairline cards by default; midnight-ink 2px
      outlines + hard offset shadows (no blur) only on the one thing that matters on a screen.
   2. The arch is the signature shape (the door the family opens): portraits live in arches.
   3. Verification is a seal (a stamp), not a badge: dashed inner ring, slightly tilted.
   4. Four loud colours with meanings: Faience teal = trust, verified, go. Tomato = attention, problem.
      Sun = highlight, in progress, top tier. Lilac = care, family, kids. Ink = outlines and dark sections.
   5. Big heavy numbers (Tajawal 800), stickers tilted a few degrees, flat fills, no gradients.
   Status is always icon + word. Colour is never the only signal.
   ========================================================================== */

@font-face { font-family: "Tajawal"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/tajawal-700.ttf") format("truetype"); }
@font-face { font-family: "Tajawal"; font-style: normal; font-weight: 800; font-display: swap; src: url("../fonts/tajawal-800.ttf") format("truetype"); }

/* -------------------------------------------------------------------------
   1. TOKENS
   Legacy ramp names (--plum-*, --sage-*, --peach-*, ...) are kept so older markup still resolves;
   they now hold the Arch & Seal hues (plum = faience teal, sage = teal tint, peach/coral = tomato).
   ------------------------------------------------------------------------- */
:root {
  --plum-25: #f2fcfa; --plum-50: #e8f8f5; --plum-100: #d3f2ec; --plum-200: #a9e4d9; --plum-300: #6fd3c3; --plum-400: #35c0ae; --plum-500: #12b3a0; --plum-600: #0e9585; --plum-700: #0b7b6d; --plum-800: #0a6358; --plum-900: #084a42; --plum-950: #05302b;
  --saffron-50: #fff7df; --saffron-100: #ffefbd; --saffron-200: #ffe38f; --saffron-300: #ffd566; --saffron-400: #ffcb4d; --saffron-500: #ffc53d; --saffron-600: #e0a400; --saffron-700: #a97c00; --saffron-800: #6b4a00; --saffron-900: #4a3300; --saffron-950: #2a1d00;
  --ink-25: #fffbf4; --ink-50: #fbf4e8; --ink-100: #f4ead8; --ink-200: #e8dcc6; --ink-300: #d3c6ae; --ink-400: #a99f8c; --ink-500: #6f858b; --ink-600: #4a6670; --ink-700: #34505a; --ink-800: #1e3b45; --ink-900: #0e2a33; --ink-950: #071b21;

  --tomato-50: #fff0eb; --tomato-100: #ffe0d6; --tomato-200: #ffc6b5; --tomato-300: #ffa18a; --tomato-500: #ff6b4a; --tomato-700: #b8381a; --tomato-900: #5f1c0a;
  --lilac-50: #f5f1ff; --lilac-100: #e9e1ff; --lilac-200: #d6c9ff; --lilac-300: #c2b0ff; --lilac-500: #9a82f0; --lilac-700: #5a40b8; --lilac-900: #2e2063;
  --coral-50: var(--tomato-50); --coral-100: var(--tomato-100); --coral-200: var(--tomato-200); --coral-300: var(--tomato-300); --coral-500: var(--tomato-500); --coral-700: var(--tomato-700); --coral-900: var(--tomato-900);
  --peach-50: #fff4e6; --peach-100: #ffe6c7; --peach-200: #ffd49c; --peach-300: #ffbd6b; --peach-500: #ff9a2e; --peach-700: #9a5200; --peach-900: #522a00;
  --sage-50: #e8f8f5; --sage-100: #d3f2ec; --sage-200: #a9e4d9; --sage-300: #6fd3c3; --sage-500: #12b3a0; --sage-700: #0a6358; --sage-900: #084a42;
  --lav-50: var(--lilac-50); --lav-100: var(--lilac-100); --lav-200: var(--lilac-200); --lav-300: var(--lilac-300); --lav-500: var(--lilac-500); --lav-700: var(--lilac-700); --lav-900: var(--lilac-900);
  --sky-50: #eaf4fb; --sky-100: #d5e8f6; --sky-200: #b3d5ee; --sky-300: #86bde3; --sky-500: #3f8fd0; --sky-700: #1d5a8f; --sky-900: #0f3558;
  --rose-50: #fff0f4; --rose-100: #ffdce6; --rose-200: #ffbccf; --rose-300: #f79ab5; --rose-500: #e5527f; --rose-700: #a02a52; --rose-900: #571330;

  /* the four loud colours + ink, named by meaning */
  --teal: #12b3a0;       /* trust, verified, primary action */
  --tomato: #ff6b4a;     /* attention, problem, urgent */
  --sun: #ffc53d;        /* highlight, in progress, top tier */
  --lilac: #b8a6ff;      /* care, family, children */
  --ink: #0e2a33;
  --line: light-dark(#0e2a33, #8fb8bc);      /* outline colour */
  --line-solid: light-dark(#0e2a33, #000);    /* hard-shadow colour */
  --hair: light-dark(#e8dcc6, #24424b);       /* hairline */
  --paper: light-dark(#fbf4e8, #0b1b21);

  /* semantic surfaces */
  --bg: var(--paper);
  --surface: light-dark(#ffffff, #12303a);
  --surface-2: light-dark(#ffffff, #183b46);
  --surface-sunken: light-dark(#f4ead8, #0e2730);
  --surface-inverse: var(--ink);
  --scrim: light-dark(oklch(0.25 0.04 220 / 0.55), oklch(0.05 0.02 220 / 0.75));
  --border: var(--hair);
  --border-strong: light-dark(#6f858b, #8fb0b5);
  --border-focus: light-dark(#0e2a33, var(--teal));
  --text: light-dark(#0e2a33, #f4ead8);
  --text-2: light-dark(#34505a, #c9d8d6);
  --text-3: light-dark(#3e5964, #a9bfbe);
  --text-link: light-dark(#0b6b5f, #6fd3c3);
  --text-link-hover: light-dark(#084a42, #a9e4d9);

  /* brand = deep faience teal for text, selection and solid fills; loud teal for big buttons */
  --brand: light-dark(#0b7b6d, #45d6c4);
  --brand-hover: light-dark(#0a6358, #6fd3c3);
  --brand-active: light-dark(#084a42, #a9e4d9);
  --on-brand: light-dark(#ffffff, #05302b);
  --brand-subtle: light-dark(#e1f6f2, #123f43);
  --brand-subtle-2: light-dark(#c7efe7, #17595b);
  --brand-subtle-fg: light-dark(#07574d, #a5f0e4);
  --brand-border: light-dark(#8fd9cc, #2c7f7c);
  --surface-brand: var(--ink);
  --surface-brand-deep: #071b21;
  --on-surface-brand: #ffffff;
  --on-surface-brand-2: #c4dad8;
  --accent-on-brand: var(--sun);
  --border-on-brand: #3b6670;

  --accent: var(--sun);
  --accent-hover: #ffd566;
  --accent-active: light-dark(#e0a400, #ffe38f);
  --on-accent: var(--ink);
  --accent-subtle: light-dark(#fff1c4, #3a3016);
  --accent-subtle-fg: light-dark(#6b4a00, #ffe38f);
  --accent-border: light-dark(#f5d57a, #7a6420);

  --success-bg: light-dark(#d9f5e4, #123a2a); --success-border: light-dark(#9fe0b9, #2f7a52); --success-fg: light-dark(#0a5b36, #86e0ae); --success-solid: light-dark(#0b7b45, #4ccf8b);
  --warning-bg: light-dark(#ffe9c9, #3d2a10); --warning-border: light-dark(#f7c786, #8a5a1e); --warning-fg: light-dark(#8a4a00, #ffc27a);
  --danger-bg: light-dark(#ffe1d8, #3d1a14); --danger-border: light-dark(#ffab96, #9a3d28); --danger-fg: light-dark(#a8301a, #ffa18a); --danger-solid: light-dark(#d9381e, #ff7a5c);
  --info-bg: light-dark(#d9ebf8, #12303f); --info-border: light-dark(#9cc9e8, #2b6e96); --info-fg: light-dark(#154f7f, #9ccbf0); --info-solid: light-dark(#1d6aa8, #5ab0e8);

  --tier-0-fg: var(--text-3); --tier-0-bg: var(--surface-sunken);
  --tier-1-fg: light-dark(#07574d, #a5f0e4); --tier-1-bg: var(--brand-subtle-2);
  --tier-2-fg: var(--ink); --tier-2-bg: var(--teal);
  --tier-3-fg: var(--ink); --tier-3-bg: var(--sun);
  --hover-wash: light-dark(oklch(0.3 0.04 215 / 0.06), oklch(1 0 0 / 0.08));
  --pressed-wash: light-dark(oklch(0.3 0.04 215 / 0.12), oklch(1 0 0 / 0.14));
  --focus-ring: 0 0 0 2px var(--surface), 0 0 0 4px var(--border-focus);
  --highlight: light-dark(#fff1c4, #3a3016);
  --disabled-bg: light-dark(#eee5d4, #1b3640); --disabled-fg: light-dark(#7d8f93, #7f979c);

  --viz-1: light-dark(#0e9585, #3fd0bd); --viz-2: light-dark(#e0a400, #ffc53d); --viz-3: light-dark(#3f8fd0, #5ab0e8); --viz-4: light-dark(#e5527f, #ef7096); --viz-5: light-dark(#7a62d8, #a28cf5); --viz-6: light-dark(#ff6b4a, #ff8466);

  /* companion semantic triplets: tint, text on tint (AA), solid */
  --hue-plum-bg: light-dark(#d3f2ec, #123f43);   --hue-plum-fg: light-dark(#07574d, #a5f0e4);   --hue-plum-solid: var(--teal);
  --hue-teal-bg: var(--hue-plum-bg); --hue-teal-fg: var(--hue-plum-fg); --hue-teal-solid: var(--teal);
  --hue-saffron-bg: light-dark(#fff0c2, #3a3016); --hue-saffron-fg: light-dark(#6b4a00, #ffe38f); --hue-saffron-solid: var(--sun);
  --hue-sun-bg: var(--hue-saffron-bg); --hue-sun-fg: var(--hue-saffron-fg); --hue-sun-solid: var(--sun);
  --hue-coral-bg: light-dark(#ffe0d6, #3d1a14);  --hue-coral-fg: light-dark(#a8301a, #ffa18a);  --hue-coral-solid: var(--tomato);
  --hue-tomato-bg: var(--hue-coral-bg); --hue-tomato-fg: var(--hue-coral-fg); --hue-tomato-solid: var(--tomato);
  --hue-peach-bg: var(--hue-coral-bg); --hue-peach-fg: var(--hue-coral-fg); --hue-peach-solid: var(--tomato);
  --hue-sage-bg: var(--hue-plum-bg); --hue-sage-fg: var(--hue-plum-fg); --hue-sage-solid: var(--teal);
  --hue-sky-bg: light-dark(#d5e8f6, #12303f);    --hue-sky-fg: light-dark(#154f7f, #9ccbf0);    --hue-sky-solid: #3f8fd0;
  --hue-lav-bg: light-dark(#e9e1ff, #2a2350);    --hue-lav-fg: light-dark(#4a31a8, #d6c9ff);    --hue-lav-solid: var(--lilac);
  --hue-lilac-bg: var(--hue-lav-bg); --hue-lilac-fg: var(--hue-lav-fg); --hue-lilac-solid: var(--lilac);
  --hue-rose-bg: light-dark(#ffdce6, #3d1626);   --hue-rose-fg: light-dark(#8a1f47, #ffb3c8);   --hue-rose-solid: #e5527f;

  /* gradients are retired: these names now resolve to flat colour so older rules flatten themselves */
  --grad-brand: var(--teal); --grad-brand-hover: #35c0ae; --grad-accent: var(--sun); --grad-warm: var(--hue-coral-bg); --grad-hero: var(--ink);
  --blob-1: transparent; --blob-2: transparent; --blob-3: transparent;

  /* shape */
  --radius-xs: 8px; --radius-sm: 12px; --radius-md: 18px; --radius-lg: 26px; --radius-xl: 34px;
  --arch: 999px 999px 26px 26px;

  /* depth: calm hairline lift by default, hard ink shadow for loud moments */
  --shadow-sm: 0 1px 0 light-dark(oklch(0.3 0.04 215 / 0.08), oklch(0 0 0 / 0.5));
  --shadow-md: 0 1px 0 light-dark(oklch(0.3 0.04 215 / 0.08), oklch(0 0 0 / 0.5)), 0 8px 18px -12px light-dark(oklch(0.3 0.05 215 / 0.28), oklch(0 0 0 / 0.6));
  --shadow-lg: 4px 4px 0 var(--line-solid);
  --shadow-hard: 4px 4px 0 var(--line-solid);
  --shadow-hard-sm: 3px 3px 0 var(--line-solid);
  --shadow-brand: 3px 3px 0 var(--line-solid);
  --shadow-accent: 3px 3px 0 var(--line-solid);
  --outline: 2px solid var(--line);

  --font-display: "Tajawal", "Readex Pro", system-ui, sans-serif;
}
[data-surface="app"], [data-surface="worker"] { --radius-md: 20px; --radius-lg: 28px; }

/* tint contexts: wear a hue, children read --t-bg / --t-fg / --t-solid */
.tint-plum, .tint-teal { --t-bg: var(--hue-plum-bg); --t-fg: var(--hue-plum-fg); --t-solid: var(--teal); }
.tint-saffron, .tint-sun { --t-bg: var(--hue-saffron-bg); --t-fg: var(--hue-saffron-fg); --t-solid: var(--sun); }
.tint-coral, .tint-tomato, .tint-peach { --t-bg: var(--hue-coral-bg); --t-fg: var(--hue-coral-fg); --t-solid: var(--tomato); }
.tint-sage { --t-bg: var(--hue-plum-bg); --t-fg: var(--hue-plum-fg); --t-solid: var(--teal); }
.tint-sky { --t-bg: var(--hue-sky-bg); --t-fg: var(--hue-sky-fg); --t-solid: #3f8fd0; }
.tint-lav, .tint-lilac { --t-bg: var(--hue-lav-bg); --t-fg: var(--hue-lav-fg); --t-solid: var(--lilac); }
.tint-rose { --t-bg: var(--hue-rose-bg); --t-fg: var(--hue-rose-fg); --t-solid: #e5527f; }

/* display type: heavy Arabic and big numbers */
h1, h2, h3, .t-h1, .t-h2, .t-h3, .t-h4, .appbar__title, .section-title, .page__title, .board__title, .flow__head h2, .card__title, .empty__title,
.wcard__name, .pcard__name, .stat-tile__value, .mini-stat strong, .kpi__value, .wcard__price, .pcard__price, .greet__text strong, .docs__title { font-family: var(--font-display); letter-spacing: 0; }
h1, h2, .t-h1, .t-h2, .board__title, .page__title, .docs__title { font-weight: 800; }

/* -------------------------------------------------------------------------
   2. DEVICE + CANVAS
   ------------------------------------------------------------------------- */
html { background: var(--bg); }
body { background-color: var(--bg); background-image: radial-gradient(light-dark(oklch(0.3 0.04 215 / 0.09), oklch(1 0 0 / 0.06)) 1.3px, transparent 1.4px); background-size: 24px 24px; }

.phone {
  border: 0; border-radius: 2.75rem; background: var(--bg);
  box-shadow: 0 0 0 8px var(--ink), 0 0 0 10px light-dark(#3c5d66, #5c8b93), 10px 12px 0 8px light-dark(oklch(0.2 0.04 215 / 0.22), oklch(0 0 0 / 0.5));
}
.phone::before { content: ""; position: absolute; inset-block-start: 0.55rem; inset-inline: 0; margin-inline: auto; width: 5.4rem; height: 1.45rem; border-radius: 999px; background: #05161b; z-index: 6; pointer-events: none; }
.phone__status, .appbar { background: transparent; }
.phone--surface, .phone--surface .phone__status { background: var(--surface); }
.phone__home { background: transparent; }
.phone__home::after { background: var(--text); opacity: 0.3; }

.appbar { min-height: 3.75rem; padding-inline: var(--space-2); }
.appbar .icon-btn { border-radius: 50%; }
.appbar .icon-btn:first-child { background: var(--surface); border: 2px solid var(--line); box-shadow: 2px 2px 0 var(--line-solid); width: 2.75rem; height: 2.75rem; min-width: 2.75rem; }
.appbar .icon-btn:hover { background: var(--accent-subtle); }
.appbar__title { font-size: var(--fs-xl); font-weight: 800; }
.appbar__title small { font-family: var(--font-sans); }
.appbar--surface { background: var(--surface); border-block-end: 2px solid var(--line); box-shadow: none; backdrop-filter: none; }
.appbar--large { padding-block: var(--space-3); }
.appbar--large .appbar__title { font-size: var(--fs-3xl); }
.appbar .icon-btn .dot { background: var(--tomato); inset-block-start: 10px; inset-inline-end: 10px; box-shadow: 0 0 0 2px var(--surface); }
.phone__pad { padding: var(--space-4) var(--space-5); gap: var(--space-5); }

/* tab bar: outlined white capsule, the active tab is a teal sticker */
.tabbar { margin: 0 var(--space-3) var(--space-2); padding: 6px; border: var(--outline); border-radius: 2rem; background: var(--surface); box-shadow: var(--shadow-hard-sm); position: relative; z-index: 3; }
.tabbar a, .tabbar button { min-height: 3.5rem; border-radius: 1.5rem; gap: 3px; font-size: 0.6875rem; color: var(--text-2); font-weight: var(--fw-semibold); }
.tabbar__pill { width: 3.25rem; height: 2rem; border-radius: 999px; border: 2px solid transparent; }
.tabbar [aria-current="page"] { color: var(--text); font-weight: var(--fw-bold); }
.tabbar [aria-current="page"] .tabbar__pill { background: var(--teal); color: var(--ink); border-color: var(--line); }
.tabbar .count { background: var(--tomato); color: var(--ink); border: 1.5px solid var(--line); }

.bottom-cta { background: var(--bg); border: 0; padding: var(--space-4) var(--space-5) var(--space-3); position: relative; z-index: 2; }
.phone--surface .bottom-cta { background: var(--surface); }

/* wireframe board: every flow gets a loud flat stage */
.board__head { padding-block-end: var(--space-2); }
.board__title { font-size: var(--fs-6xl); line-height: 1.15; }
section.flow {
  --stage: var(--teal); --stage-ink: var(--ink); position: relative; color: var(--stage-ink);
  padding: var(--space-8) var(--space-6) var(--space-4); border-radius: var(--radius-xl); background: var(--stage);
  border: 2.5px solid var(--line); box-shadow: 8px 8px 0 var(--line-solid); overflow: hidden;
}
section.flow::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.16; background: url("../img/arch-pattern.svg") 0 0 / 120px 120px; mix-blend-mode: overlay; }
section.flow > * { position: relative; }
section.flow:nth-of-type(5n+1) { --stage: var(--teal); }
section.flow:nth-of-type(5n+2) { --stage: var(--sun); }
section.flow:nth-of-type(5n+3) { --stage: var(--tomato); }
section.flow:nth-of-type(5n+4) { --stage: var(--lilac); }
section.flow:nth-of-type(5n+5) { --stage: var(--ink); --stage-ink: #fff; }
.flow__head h2 { font-size: var(--fs-4xl); font-weight: 800; color: inherit; }
.flow__head p, .frame__label, .frame__notes, .frame__note { color: inherit; }
.flow__head p { font-size: var(--fs-base); font-weight: var(--fw-medium); }
.frame__label { font-size: var(--fs-base); font-weight: var(--fw-bold); }
.frame__num { background: var(--surface); color: var(--ink); border: 2px solid var(--line); box-shadow: 2px 2px 0 var(--line-solid); height: 1.75rem; min-width: 1.75rem; font-weight: 800; }
section.flow:nth-of-type(5n+5) .frame__num { background: var(--sun); }
.flow-link { color: inherit; opacity: 0.7; }
.frame__notes b { background: var(--surface); color: var(--ink); border: 1.5px solid var(--line); }
.frame__notes li { font-weight: var(--fw-medium); }
.docs__nav, .sidebar { background: var(--surface); }

/* -------------------------------------------------------------------------
   3. CONTROLS
   ------------------------------------------------------------------------- */
.btn { border-radius: 16px; font-weight: var(--fw-bold); border-width: 2px; }
.btn--lg, .btn--xl { border-radius: 18px; }
.btn--sm { border-radius: 12px; }
.btn--primary { --btn-bg: var(--teal); --btn-bg-hover: #35c0ae; --btn-bg-active: #0e9585; --btn-fg: var(--ink); --btn-border: var(--line); box-shadow: var(--shadow-hard-sm); }
.btn--accent { --btn-bg: var(--sun); --btn-bg-hover: #ffd566; --btn-bg-active: #e0a400; --btn-fg: var(--ink); --btn-border: var(--line); box-shadow: var(--shadow-hard-sm); }
.btn--danger { --btn-bg: var(--tomato); --btn-bg-hover: #ff8266; --btn-bg-active: #e5502e; --btn-fg: var(--ink); --btn-border: var(--line); box-shadow: var(--shadow-hard-sm); }
.btn--success { --btn-bg: var(--teal); --btn-fg: var(--ink); --btn-border: var(--line); box-shadow: var(--shadow-hard-sm); }
.btn--secondary { --btn-bg: var(--surface); --btn-border: var(--line); --btn-fg: var(--text); box-shadow: var(--shadow-hard-sm); }
.btn--secondary:hover { background: var(--accent-subtle); border-color: var(--line); }
.btn--danger-quiet { --btn-border: var(--danger-fg); }
.btn--tertiary { --btn-fg: var(--brand); border-color: transparent; }
.btn--tertiary:hover, .btn--ghost:hover { background: var(--hover-wash); }
.btn--primary:hover, .btn--accent:hover, .btn--danger:hover, .btn--secondary:hover, .btn--success:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--line-solid); }
.btn--primary:active, .btn--accent:active, .btn--danger:active, .btn--secondary:active, .btn--success:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--line-solid); }
.btn:disabled, .btn[aria-disabled="true"] { box-shadow: none; --btn-bg: var(--disabled-bg); background: var(--disabled-bg); border-color: transparent; transform: none; }
.btn--go { padding-inline-end: 0.4rem; gap: var(--space-4); }  /* label + circular arrow */
.btn--go::after { content: ""; flex: none; width: 2.2rem; height: 2.2rem; margin-inline-start: auto; border-radius: 50%; background: var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M12 5l7 7-7 7'/%3E%3C/svg%3E") center / 52% no-repeat; }
[dir="rtl"] .btn--go::after { transform: scaleX(-1); }
.btn--primary.is-loading::before, .btn--accent.is-loading::before { border-color: var(--ink); border-inline-end-color: transparent; }

.icon-btn { border-radius: 14px; }
.icon-btn--round, .icon-btn--soft { border-radius: 50%; background: var(--surface); border: 2px solid var(--line); box-shadow: 2px 2px 0 var(--line-solid); }

.input, .select, .textarea { border-radius: 14px; border: 2px solid var(--border-strong); background-color: var(--surface); box-shadow: none; }
.input:hover, .select:hover, .textarea:hover { border-color: var(--line); }
.input:focus, .select:focus, .textarea:focus, .input:focus-visible, .select:focus-visible, .textarea:focus-visible { border-color: var(--line); box-shadow: 3px 3px 0 var(--teal); }
.input-group { border-radius: 14px; border: 2px solid var(--border-strong); box-shadow: none; }
.input-group:focus-within { border-color: var(--line); box-shadow: 3px 3px 0 var(--teal); }
.input-group .input { border: 0; }
.input-group .input:focus { box-shadow: none; }
.input-addon { background: var(--accent-subtle); color: var(--accent-subtle-fg); font-weight: var(--fw-bold); border-inline-end: 2px solid var(--border-strong); }
.textarea { border-radius: 16px; }
.search .input { border-radius: 999px; padding-inline-start: 2.9rem; border-color: var(--line); background: var(--surface); box-shadow: 3px 3px 0 var(--line-solid); }
.search .icon { color: var(--ink); }
.check { border-radius: 7px; border-width: 2px; border-color: var(--line); }
.check:checked { background: var(--teal); border-color: var(--line); }
.check:checked::after { border-color: var(--ink); }
.radio-input:checked { border-color: var(--teal); }
.switch { border: 2px solid var(--line); background: var(--surface-sunken); width: 3rem; height: 1.75rem; }
.switch::after { inset-block-start: 2px; inset-inline-start: 2px; background: var(--ink); box-shadow: none; width: 1.25rem; height: 1.25rem; }
.switch:checked { background: var(--teal); }
.switch:checked::after { transform: translateX(1.2rem); } [dir="rtl"] .switch:checked::after { transform: translateX(-1.2rem); }
.range::-webkit-slider-runnable-track { height: 10px; border-radius: 5px; border: 2px solid var(--line); background: linear-gradient(to var(--range-dir, right), var(--teal) var(--fill, 50%), var(--surface) var(--fill, 50%)); }
.range::-webkit-slider-thumb { border: 2px solid var(--line); background: var(--sun); width: 1.6rem; height: 1.6rem; margin-block-start: -9px; box-shadow: 2px 2px 0 var(--line-solid); }
.otp__cell { border-radius: 16px; width: 3rem; height: 3.6rem; border: 2px solid var(--border-strong); background: var(--surface); box-shadow: none; font-family: var(--font-display); font-weight: 800; }
.otp__cell.filled { border-color: var(--line); background: var(--accent-subtle); color: var(--text); box-shadow: 3px 3px 0 var(--line-solid); }
.otp__cell:focus { border-color: var(--line); box-shadow: 3px 3px 0 var(--teal); }
.segmented { border: 2px solid var(--line); background: var(--surface); box-shadow: var(--shadow-hard-sm); border-radius: 999px; padding: 4px; }
.segmented span { border-radius: 999px; font-weight: var(--fw-bold); }
.segmented input:checked + span { background: var(--sun); color: var(--ink); box-shadow: none; border: 2px solid var(--line); margin: -2px; }
.segmented > .anno { display: none; }
[data-annotations="on"] .segmented > .anno, [data-fidelity="wire"] .segmented > .anno { display: inline-grid; }
.choice-card { border: 2px solid var(--border-strong); border-radius: var(--radius-md); background: var(--surface); box-shadow: none; padding: var(--space-4); gap: var(--space-4); }
.choice-card:hover { background: var(--surface); border-color: var(--line); }
.choice-card:has(input:checked) { border-color: var(--line); background: var(--accent-subtle); box-shadow: var(--shadow-hard-sm); }
.choice-card:has(input:checked) .choice-card__mark { background: var(--teal); border-color: var(--line); color: var(--ink); }
.choice-card__mark { border: 2px solid var(--line); }
.choice-card .list__lead { width: 3rem; height: 3rem; }
.dropzone { border-radius: var(--radius-lg); border: 2.5px dashed var(--line); background: var(--surface); }
.dropzone:hover, .dropzone.is-over { background: var(--accent-subtle); border-color: var(--line); color: var(--text); }

.chip { border: 2px solid var(--hair); border-radius: 999px; background: var(--surface); box-shadow: none; min-height: 2.5rem; padding-inline: var(--space-4); font-weight: var(--fw-semibold); }
.chip:hover { background: var(--surface); border-color: var(--line); }
.chip[aria-pressed="true"], .chip.is-selected { background: var(--teal); border-color: var(--line); color: var(--ink); box-shadow: 2px 2px 0 var(--line-solid); }
.chip.is-selected .chip__x { color: var(--ink); }
.chip--static { border: 0; box-shadow: none; background: var(--t-bg, var(--surface-sunken)); color: var(--t-fg, var(--text-2)); min-height: 1.75rem; padding-inline: var(--space-3); font-weight: var(--fw-semibold); }
.chip--static:hover { background: var(--t-bg, var(--surface-sunken)); }
.chip--sm { min-height: 1.75rem; padding-inline: var(--space-3); font-size: var(--fs-xs); }
.wcard__chips .chip--static:nth-child(4n+1), .pcard__chips .chip--static:nth-child(4n+1), .cluster > .chip--static:nth-child(4n+1), .review__reasons .chip--static:nth-child(4n+1) { --t-bg: var(--hue-plum-bg); --t-fg: var(--hue-plum-fg); }
.wcard__chips .chip--static:nth-child(4n+2), .pcard__chips .chip--static:nth-child(4n+2), .cluster > .chip--static:nth-child(4n+2), .review__reasons .chip--static:nth-child(4n+2) { --t-bg: var(--hue-saffron-bg); --t-fg: var(--hue-saffron-fg); }
.wcard__chips .chip--static:nth-child(4n+3), .pcard__chips .chip--static:nth-child(4n+3), .cluster > .chip--static:nth-child(4n+3), .review__reasons .chip--static:nth-child(4n+3) { --t-bg: var(--hue-lav-bg); --t-fg: var(--hue-lav-fg); }
.wcard__chips .chip--static:nth-child(4n+4), .pcard__chips .chip--static:nth-child(4n+4), .cluster > .chip--static:nth-child(4n+4), .review__reasons .chip--static:nth-child(4n+4) { --t-bg: var(--hue-coral-bg); --t-fg: var(--hue-coral-fg); }

.badge { border: 1.5px solid var(--line); min-height: 1.625rem; padding-inline: var(--space-3); font-weight: var(--fw-bold); color: var(--ink); background: var(--surface); }
.badge--success { background: var(--teal); color: var(--ink); }
.badge--warning { background: var(--sun); color: var(--ink); }
.badge--info { background: var(--hue-sky-bg); color: var(--hue-sky-fg); border-color: var(--hue-sky-fg); }
.badge--brand { background: var(--hue-plum-bg); color: var(--hue-plum-fg); border-color: var(--hue-plum-fg); }
.badge--accent { background: var(--hue-saffron-bg); color: var(--hue-saffron-fg); border-color: var(--hue-saffron-fg); }
.badge--danger { background: var(--tomato); color: var(--ink); }
.badge--solid-brand { background: var(--ink); color: #fff; }
.count { background: var(--tomato); color: var(--ink); border: 1.5px solid var(--line); }
.count--brand { background: var(--teal); }

/* -------------------------------------------------------------------------
   4. SURFACES
   ------------------------------------------------------------------------- */
.card { border: 1.5px solid var(--hair); border-radius: var(--radius-md); box-shadow: var(--shadow-md); padding: var(--space-5); background: var(--surface); }
.card--flat { background: var(--surface-sunken); box-shadow: none; border-color: transparent; }
.card--pop, .pop { border: var(--outline); box-shadow: var(--shadow-hard); }
.card--interactive:hover { border-color: var(--line); background: var(--surface); box-shadow: var(--shadow-hard-sm); transform: translate(-1px, -1px); }
.card--selected { border-color: var(--line); box-shadow: var(--shadow-hard-sm); }
.card__foot { border-block-start: 2px dashed var(--hair); }
.card[class*="tint-"] { background: var(--t-bg); border-color: transparent; }
.list--inset { border: 1.5px solid var(--hair); border-radius: var(--radius-md); box-shadow: var(--shadow-md); }
.list__lead { width: 2.75rem; height: 2.75rem; border-radius: 14px; border: 1.5px solid var(--line); background: var(--teal); color: var(--ink); }
.list__item:nth-child(5n+2) .list__lead { background: var(--sun); }
.list__item:nth-child(5n+3) .list__lead { background: var(--lilac); }
.list__item:nth-child(5n+4) .list__lead { background: var(--tomato); }
.list__item:nth-child(5n+5) .list__lead { background: var(--hue-sky-bg); }
.choice-card:nth-of-type(3n+2) .list__lead { background: var(--sun); } .choice-card:nth-of-type(3n+3) .list__lead { background: var(--lilac); }
.list__item.is-selected, .list__item[aria-selected="true"] { background: var(--accent-subtle); }
.alert { border: 2px solid var(--line); border-radius: var(--radius-md); padding: var(--space-4); box-shadow: 3px 3px 0 var(--line-solid); color: var(--text); }
.alert > .icon { flex: none; width: 2.25rem; height: 2.25rem; padding: 0.45rem; border-radius: 50%; background: var(--surface); border: 1.5px solid var(--line); color: var(--text); box-sizing: border-box; }
.alert__title { color: var(--text); }
.alert--info { background: var(--hue-sky-bg); } .alert--success { background: var(--hue-plum-bg); } .alert--warning { background: var(--hue-saffron-bg); } .alert--danger { background: var(--hue-coral-bg); } .alert--brand { background: var(--hue-lav-bg); } .alert--accent { background: var(--hue-saffron-bg); }
.empty { gap: var(--space-4); }
.empty__icon { width: 5rem; height: 5rem; border-radius: 50% 50% 22px 22px; background: var(--sun); color: var(--ink); border: var(--outline); box-shadow: var(--shadow-hard); }
.empty__title { font-size: var(--fs-2xl); font-weight: 800; }
.section-title { font-size: var(--fs-xl); font-weight: 800; }
.section-title a { color: var(--text); font-weight: var(--fw-bold); text-decoration: none; padding: 0.2rem 0.8rem; border-radius: 999px; background: var(--surface); border: 1.5px solid var(--line); font-family: var(--font-sans); }
.progress { border-radius: 999px; border: 2px solid var(--line); background: var(--surface); height: 0.75rem; }
.progress > span { background: var(--teal); border-radius: 999px; }
.segments > i { height: 8px; border-radius: 4px; background: var(--hair); }
.segments > i.on { background: var(--teal); }
.stepper .step__dot { border: 2px solid var(--line); background: var(--surface); color: var(--text); box-shadow: none; font-weight: var(--fw-bold); }
.step.is-done .step__dot { background: var(--teal); color: var(--ink); box-shadow: 2px 2px 0 var(--line-solid); }
.step.is-current .step__dot { background: var(--sun); color: var(--ink); box-shadow: 2px 2px 0 var(--line-solid); }
.step::before { height: 3px; border-radius: 2px; background: var(--hair); }
.step.is-done::before, .step.is-current::before { background: var(--line); }
.tabs { border-block-end: 2px solid var(--line); }
.tab[aria-selected="true"] { color: var(--text); font-weight: var(--fw-bold); }

/* tiers: verification is a seal. Pill form for lists, round stamp for hero moments. */
.tier { border: 2px solid var(--line); border-radius: 999px; background: var(--t-bg); color: var(--t-fg); font-weight: var(--fw-bold); box-shadow: 2px 2px 0 var(--line-solid); }
.tier--0 { background: var(--surface); box-shadow: none; border-color: var(--border-strong); color: var(--text-3); }
.tier--1 { background: var(--hue-plum-bg); color: var(--hue-plum-fg); box-shadow: none; }
.tier--2 { background: var(--teal); color: var(--ink); }
.tier--3 { background: var(--sun); color: var(--ink); }
.tier-meter__bar > i { height: 10px; border-radius: 5px; background: var(--surface); border: 2px solid var(--line); }
.tier-meter__bar > i.on { background: var(--teal); } .tier-meter__bar > i.on.t3 { background: var(--sun); }
.tier-row.is-done .tier-row__mark { background: var(--teal); color: var(--ink); border-color: var(--line); }
.tier-row.is-pending .tier-row__mark { background: var(--sun); color: var(--ink); border-color: var(--line); }
.tier-row__mark { width: 2rem; height: 2rem; border: 2px solid var(--line); }
.seal { --s: 5rem; position: relative; display: inline-grid; place-items: center; align-content: center; width: var(--s); height: var(--s); border-radius: 50%; background: var(--t-solid, var(--teal)); color: var(--ink); border: var(--outline); box-shadow: 3px 3px 0 var(--line-solid); transform: rotate(-8deg); text-align: center; line-height: 1.1; font-weight: 800; font-family: var(--font-display); font-size: var(--fs-sm); }
.seal::before { content: ""; position: absolute; inset: 5px; border-radius: 50%; border: 2px dashed var(--ink); opacity: 0.55; }
.seal .icon { --icon-size: 24px; stroke-width: 2.2; }
.seal small { font-size: 0.625rem; font-weight: var(--fw-bold); }

/* -------------------------------------------------------------------------
   5. PEOPLE: arches, portraits, cards
   ------------------------------------------------------------------------- */
.avatar { border: 2px solid var(--line); box-shadow: none; background: var(--t-solid, var(--sun)); }
.avatar svg, .avatar img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center 20%; }
.avatar--art svg { transform: scale(1.04); }
.avatar-stack .avatar { box-shadow: 0 0 0 2px var(--surface); }
.photo { background: var(--hue-saffron-bg); }
[data-fidelity="wire"] .avatar svg { filter: grayscale(1); }
.arch { border: 2.5px solid var(--line); border-radius: var(--arch); box-shadow: 8px 8px 0 var(--t-solid, var(--teal)); overflow: hidden; position: relative; }
.sticker { display: inline-flex; align-items: center; gap: 6px; min-height: 2rem; padding-inline: 0.9rem; border-radius: 12px; background: var(--sun); color: var(--ink); border: 2px solid var(--line); box-shadow: 3px 3px 0 var(--line-solid); font-weight: 800; font-family: var(--font-display); font-size: var(--fs-sm); transform: rotate(-3deg); white-space: nowrap; }
.sticker .icon { --icon-size: 16px; }
.mark { display: inline-block; padding: 0 0.3em; background: var(--sun); color: var(--ink); border-radius: 8px; transform: rotate(-1.5deg); }
.big-num { font-family: var(--font-display); font-weight: 800; font-size: clamp(2.5rem, 6vw, 5rem); line-height: 1; font-variant-numeric: lining-nums; }

/* worker card: arch portrait, quiet copy, price as a heavy number */
.wcard { grid-template-columns: auto 1fr; gap: var(--space-4); }
.wcard__photo { width: 6rem; height: 7.5rem; border: var(--outline); border-radius: 3rem 3rem 18px 18px; box-shadow: 4px 4px 0 var(--t-solid, var(--teal)); overflow: hidden; }
.wcard:nth-of-type(3n+2) .wcard__photo { --t-solid: var(--sun); } .wcard:nth-of-type(3n+3) .wcard__photo { --t-solid: var(--lilac); }
.wcard__photo .avatar { border: 0; border-radius: 0; box-shadow: none; }
.wcard__photo .tier { inset-block-end: 8px; inset-inline-start: 50%; transform: translateX(-50%); }
[dir="rtl"] .wcard__photo .tier { transform: translateX(50%); }
.wcard__name { font-size: var(--fs-xl); font-weight: 800; }
.wcard__meta .icon { color: var(--tomato); }
.wcard__foot { border-block-start: 2px dashed var(--hair); padding-block-start: var(--space-3); }
.wcard__price { color: var(--text); font-weight: 800; font-size: var(--fs-2xl); }
.stars .icon { color: var(--sun); fill: var(--sun); stroke: var(--ink); stroke-width: 1.4; }

.pcard { position: relative; display: flex; flex-direction: column; width: 10.5rem; background: var(--surface); border: var(--outline); border-radius: var(--radius-lg); box-shadow: var(--shadow-hard); padding: 0.5rem; text-decoration: none; color: inherit; }
.pcard--wide { width: auto; flex-direction: row; gap: var(--space-3); align-items: center; }
.pcard__photo { position: relative; aspect-ratio: 4 / 4.6; border-radius: 5.5rem 5.5rem 14px 14px; overflow: hidden; border: 2px solid var(--line); background: var(--t-solid, var(--teal)); }
.pcard:nth-child(3n+2) .pcard__photo { --t-solid: var(--sun); } .pcard:nth-child(3n+3) .pcard__photo { --t-solid: var(--lilac); }
.pcard__photo .avatar { --av: 100%; width: 100%; height: 100%; border: 0; border-radius: 0; box-shadow: none; font-size: 2.5rem; }
.pcard__fav { position: absolute; inset-block-start: 0.45rem; inset-inline-end: 0.45rem; width: 2.25rem; height: 2.25rem; display: grid; place-items: center; border-radius: 50%; background: var(--surface); color: var(--ink); border: 2px solid var(--line); z-index: 2; }
.pcard__fav .icon { --icon-size: 17px; }
.pcard__fav.is-on { background: var(--tomato); } .pcard__fav.is-on .icon { fill: currentColor; }
.pcard__rating { position: absolute; inset-block-end: 0.45rem; inset-inline-start: 50%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 4px; min-height: 1.6rem; padding-inline: 0.6rem; border-radius: 999px; background: var(--sun); color: var(--ink); border: 2px solid var(--line); font-size: var(--fs-xs); font-weight: 800; z-index: 2; }
[dir="rtl"] .pcard__rating { transform: translateX(50%); }
.pcard__rating .icon { --icon-size: 13px; color: var(--ink); fill: var(--ink); }
.pcard__tier { position: absolute; inset-block-start: 0.45rem; inset-inline-start: 0.45rem; z-index: 2; }
.pcard__body { padding: 0.7rem 0.5rem 0.4rem; display: grid; gap: 2px; }
.pcard__name { font-size: var(--fs-lg); font-weight: 800; line-height: 1.25; }
.pcard__meta { display: flex; align-items: center; gap: 4px; font-size: var(--fs-xs); color: var(--text-2); font-weight: var(--fw-medium); }
.pcard__meta .icon { --icon-size: 14px; color: var(--tomato); }
.pcard__price { margin-block-start: 4px; font-size: var(--fs-xl); font-weight: 800; color: var(--text); } .pcard__price small { color: var(--text-3); font-weight: var(--fw-regular); font-size: var(--fs-xs); font-family: var(--font-sans); }
.pcard__chips { display: flex; flex-wrap: wrap; gap: 4px; margin-block-start: 6px; }
.pcard--wide .pcard__photo { width: 6rem; flex: none; aspect-ratio: 1 / 1.15; }

/* -------------------------------------------------------------------------
   6. PATTERNS: scenes, hero cards, categories, stat tiles, splash
   ------------------------------------------------------------------------- */
.scene { background-color: var(--hue-saffron-bg); background-size: cover; background-position: center; position: relative; overflow: hidden; }
.scene--mother-child { background-image: url("../img/photos/s01-mother-child.jpg"), url("../img/scenes/mother-child.svg"); }
.scene--nanny-reading { background-image: url("../img/photos/s02-nanny-reading.jpg"), url("../img/scenes/nanny-reading.svg"); }
.scene--cleaning { background-image: url("../img/photos/s03-cleaning.jpg"), url("../img/scenes/cleaning.svg"); }
.scene--elder-care { background-image: url("../img/photos/s04-elder-care.jpg"), url("../img/scenes/elder-care.svg"); }
.scene--living-room { background-image: url("../img/photos/s05-living-room.jpg"), url("../img/scenes/living-room.svg"); }
.scene--family-home { background-image: url("../img/photos/s06-family-home.jpg"), url("../img/scenes/family-home.svg"); }
[data-fidelity="wire"] .scene { background-image: none; }
.blobs { position: relative; isolation: isolate; overflow: hidden; }

.hero-card { position: relative; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); min-height: 10.5rem; border-radius: var(--radius-lg); background: var(--t-bg, var(--hue-plum-bg)); border: var(--outline); box-shadow: var(--shadow-hard); overflow: hidden; }
.hero-card__text { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: var(--space-2); padding: var(--space-5); position: relative; z-index: 1; }
.hero-card__text h3 { font-size: var(--fs-xl); font-weight: 800; line-height: 1.3; color: var(--text); }
.hero-card__text p { font-size: var(--fs-sm); color: var(--text-2); line-height: 1.55; font-weight: var(--fw-medium); }
.hero-card__art { position: relative; min-height: 100%; border-start-start-radius: 5rem; margin-inline-start: -1rem; border-inline-start: 2px solid var(--line); }
[dir="rtl"] .hero-card__art { border-start-start-radius: 0; border-start-end-radius: 5rem; margin-inline-start: 0; margin-inline-end: -1rem; border-inline-start: 0; border-inline-end: 2px solid var(--line); }
.hero-card--brand { background: var(--ink); } .hero-card--brand h3 { color: #fff; } .hero-card--brand p { color: #c4dad8; }
.hero-card--peach { --t-bg: var(--tomato); } .hero-card--lav { --t-bg: var(--lilac); } .hero-card--sky { --t-bg: var(--sun); } .hero-card--rose { --t-bg: var(--hue-coral-bg); } .hero-card--sage { --t-bg: var(--teal); }
.hero-card--peach .hero-card__text p, .hero-card--lav .hero-card__text p, .hero-card--sky .hero-card__text p, .hero-card--sage .hero-card__text p, .hero-card--peach h3, .hero-card--lav h3, .hero-card--sky h3, .hero-card--sage h3 { color: var(--ink); }
.hero-card--peach .btn, .hero-card--lav .btn, .hero-card--sky .btn, .hero-card--sage .btn { --btn-bg: var(--ink); --btn-fg: #fff; }

.cat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3); }
.cat { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); text-align: center; font-size: var(--fs-xs); font-weight: var(--fw-bold); color: var(--text); text-decoration: none; cursor: pointer; background: none; min-width: 0; }
.cat__icon { display: grid; place-items: center; width: 3.9rem; height: 3.9rem; border-radius: 1.9rem 1.9rem 16px 16px; background: var(--c, var(--teal)); color: var(--ink); border: var(--outline); box-shadow: 3px 3px 0 var(--line-solid); transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); }
.cat__icon .icon { --icon-size: 26px; stroke-width: 2; }
.cat:hover .cat__icon { transform: translate(-1px, -2px); box-shadow: 4px 5px 0 var(--line-solid); }
.cat:nth-child(5n+1) { --c: var(--sun); } .cat:nth-child(5n+2) { --c: var(--teal); } .cat:nth-child(5n+3) { --c: var(--lilac); } .cat:nth-child(5n+4) { --c: var(--tomato); } .cat:nth-child(5n+5) { --c: var(--sun); }

.greet { display: flex; align-items: center; gap: var(--space-3); }
.greet .avatar { --av: 3.25rem; border-radius: 50% 50% 14px 14px; box-shadow: 3px 3px 0 var(--sun); }
.greet__text { flex: 1; min-width: 0; font-size: var(--fs-sm); color: var(--text-2); line-height: 1.4; font-weight: var(--fw-medium); }
.greet__text strong { display: block; font-size: var(--fs-2xl); font-weight: 800; color: var(--text); line-height: 1.25; }
.greet__loc { display: inline-flex; align-items: center; gap: 4px; } .greet__loc .icon { --icon-size: 14px; color: var(--tomato); }

.stat-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.stat-tiles--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.stat-tile { position: relative; display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-4); border-radius: var(--radius-md); background: var(--t-bg, var(--hue-saffron-bg)); border: var(--outline); box-shadow: var(--shadow-hard-sm); min-width: 0; color: var(--ink); }
.stat-tile__icon { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--surface); border: 1.5px solid var(--line); color: var(--text); margin-block-end: var(--space-1); }
.stat-tile__value { font-size: var(--fs-3xl); font-weight: 800; line-height: 1.1; font-variant-numeric: lining-nums; }
.stat-tile__value small { font-size: var(--fs-xs); font-weight: var(--fw-medium); color: var(--ink-700); font-family: var(--font-sans); }
.stat-tile__label { font-size: var(--fs-xs); color: var(--ink-800); font-weight: var(--fw-medium); }
.stat-tile:nth-child(4n+1) { --t-bg: var(--sun); } .stat-tile:nth-child(4n+2) { --t-bg: var(--teal); } .stat-tile:nth-child(4n+3) { --t-bg: var(--lilac); } .stat-tile:nth-child(4n+4) { --t-bg: var(--tomato); }

.splash { background: var(--ink); position: relative; overflow: hidden; isolation: isolate; color: #fff; }
.splash::before { content: ""; position: absolute; z-index: -1; inset: 0; opacity: 0.12; background: url("../img/arch-pattern.svg") 0 0 / 120px 120px; }
.splash::after { display: none; }
.splash--scene { padding: 0; justify-content: flex-start; align-items: stretch; gap: 0; background: var(--bg); color: var(--text); }
.splash--scene::before { display: none; }
.splash__stage { position: relative; flex: 1 1 48%; min-height: 15rem; border-bottom: 2.5px solid var(--line); border-end-start-radius: 3rem; border-end-end-radius: 3rem; box-shadow: 0 6px 0 var(--sun); }
.splash__chip { position: absolute; z-index: 2; display: inline-flex; align-items: center; gap: 6px; min-height: 2.1rem; padding-inline: 0.9rem; border-radius: 12px; background: var(--surface); color: var(--ink); border: 2px solid var(--line); box-shadow: 3px 3px 0 var(--line-solid); font-size: var(--fs-xs); font-weight: 800; transform: rotate(-3deg); }
.splash__chip.fam-chip-b { transform: rotate(3deg); background: var(--sun); }
.splash__chip .icon { --icon-size: 15px; color: var(--ink); }
.splash__copy { flex: none; display: flex; flex-direction: column; align-items: center; gap: var(--space-2); text-align: center; padding: var(--space-5) var(--space-6) var(--space-2); }
.splash__copy h2 { font-size: var(--fs-3xl); font-weight: 800; line-height: 1.25; }
.splash__copy p { color: var(--text-2); font-size: var(--fs-md); font-weight: var(--fw-medium); }
.progress-dots i { background: var(--hair); border: 1.5px solid var(--line); }
.progress-dots i.on { background: var(--sun); }
.t-h3, .t-h2 { font-weight: 800; }

/* step hero: centred arch-shaped icon plate with a corner dot */
.step-hero { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); text-align: center; padding-block: var(--space-4) var(--space-2); }
.step-hero__art { position: relative; display: grid; place-items: center; width: 6.5rem; height: 7rem; margin-block-end: var(--space-4); border-radius: 3.25rem 3.25rem 20px 20px; background: var(--t-solid, var(--teal)); color: var(--ink); border: 2.5px solid var(--line); box-shadow: 6px 6px 0 var(--line-solid); }
.step-hero__art .icon { --icon-size: 42px; stroke-width: 1.8; }
.step-hero__art::after { content: ""; position: absolute; inset-block-start: -0.55rem; inset-inline-end: -0.7rem; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--sun); border: 2px solid var(--line); }
.step-hero--sm .step-hero__art { width: 4.5rem; height: 4.9rem; border-radius: 2.25rem 2.25rem 16px 16px; box-shadow: 4px 4px 0 var(--line-solid); }
.step-hero--sm .step-hero__art .icon { --icon-size: 30px; }
.step-hero h2, .step-hero .t-h3 { font-size: var(--fs-3xl); font-weight: 800; }
.step-hero p { max-width: 30ch; font-weight: var(--fw-medium); }

/* profile: arch portrait on a colour stage with an overlapping identity card */
.profile-hero { position: relative; flex: none; padding-block-start: 5.25rem; background: var(--t-solid, var(--teal)); border-block-end: 2.5px solid var(--line); }
.profile-hero__photo { position: relative; width: 78%; margin-inline: auto; aspect-ratio: 1 / 1.08; border: 2.5px solid var(--line); border-radius: var(--arch); background: var(--sun); box-shadow: 8px 8px 0 var(--line-solid); overflow: hidden; }
.profile-hero__photo .avatar { --av: 100%; width: 100%; height: 100%; border: 0; border-radius: 0; box-shadow: none; font-size: 4rem; }
.profile-hero__badges { position: absolute; z-index: 2; inset-inline: var(--space-4); inset-block-end: var(--space-3); display: flex; align-items: center; justify-content: center; gap: var(--space-2); flex-wrap: wrap; }
.profile-hero__card { position: relative; z-index: 2; margin: calc(var(--space-5) * -1) var(--space-5) 0; padding: var(--space-4) var(--space-5); display: grid; gap: var(--space-1); background: var(--surface); border: var(--outline); border-radius: var(--radius-lg); box-shadow: var(--shadow-hard); text-align: center; justify-items: center; transform: translateY(1.5rem); }
.profile-hero + .phone__pad { padding-block-start: calc(var(--space-5) + 1.5rem); }
.profile-hero__card h2 { font-size: var(--fs-3xl); font-weight: 800; }
.profile-hero__card p { color: var(--text-2); font-size: var(--fs-sm); font-weight: var(--fw-medium); }
.appbar--float { position: absolute; z-index: 5; inset-block-start: 2.75rem; inset-inline: 0; }
.appbar--float .icon-btn { background: var(--surface); border: 2px solid var(--line); box-shadow: 2px 2px 0 var(--line-solid); }
.phone--hero .phone__status { position: absolute; z-index: 5; inset-inline: 0; inset-block-start: 0; color: var(--ink); }

.kv { gap: 0 var(--space-4); }
.kv dt, .kv dd { padding-block: 0.7rem; border-block-end: 2px dashed var(--hair); }
.kv dt:last-of-type, .kv dd:last-of-type { border-block-end: 0; }
.kv dd { font-weight: var(--fw-bold); }
.kv dd.money { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-xl); }
.soft-panel { padding: var(--space-4) var(--space-5); border-radius: var(--radius-lg); background: var(--surface); border: 1.5px solid var(--hair); box-shadow: var(--shadow-md); }
.mini-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); }
.mini-stat { display: grid; justify-items: center; gap: 2px; padding: var(--space-3) var(--space-2); border-radius: var(--radius-md); background: var(--t-bg); color: var(--ink); text-align: center; border: var(--outline); box-shadow: 3px 3px 0 var(--line-solid); }
.mini-stat.tint-peach { --t-bg: var(--sun); } .mini-stat.tint-saffron { --t-bg: var(--tomato); } .mini-stat.tint-sage { --t-bg: var(--teal); }
.mini-stat strong { font-size: var(--fs-2xl); font-weight: 800; line-height: 1.2; color: var(--ink); font-variant-numeric: lining-nums; }
.mini-stat span { font-size: var(--fs-xs); color: var(--ink-800); font-weight: var(--fw-medium); }
.mini-stat .icon { --icon-size: 20px; }
.ticker { display: flex; gap: var(--space-8); white-space: nowrap; overflow: hidden; padding-block: var(--space-3); background: var(--tomato); color: var(--ink); font-family: var(--font-display); font-weight: 800; border-block: 2.5px solid var(--line); transform: rotate(-1.2deg); }
.ticker > * { flex: none; animation: ticker 28s linear infinite; }
@keyframes ticker { to { transform: translateX(50%); } }
@media (prefers-reduced-motion: reduce) { .ticker > * { animation: none; } }

/* -------------------------------------------------------------------------
   7. DASHBOARDS: ink sidebar, one pop KPI, calm tables
   ------------------------------------------------------------------------- */
.shell { background-color: var(--bg); background-image: radial-gradient(light-dark(oklch(0.3 0.04 215 / 0.07), oklch(1 0 0 / 0.05)) 1.3px, transparent 1.4px); background-size: 24px 24px; }
.sidebar { background: var(--ink); color: #e9f1ef; border: 0; border-inline-end: 2.5px solid var(--line); box-shadow: none; }
.sidebar__brand, .sidebar a, .sidebar .nav-item { color: #d7e6e3; }
.sidebar__brand { color: #fff; }
.sidebar__org { border: 1.5px solid #2f5560; border-radius: var(--radius-md); background: #123743; color: #fff; }
.nav-item { border-radius: 14px; min-height: 2.75rem; border: 2px solid transparent; }
.nav-item:hover { background: #17414e; color: #fff; }
.nav-item[aria-current="page"] { background: var(--sun); color: var(--ink); border-color: var(--line-solid); box-shadow: 3px 3px 0 var(--teal); font-weight: var(--fw-bold); }
.nav-item[aria-current="page"] .count { background: var(--ink); color: #fff; border-color: var(--ink); }
.nav-group__label { color: #8fb0b5; }
.sidebar .count { background: var(--tomato); }
.topbar { background: var(--surface); border: 0; border-block-end: 2px solid var(--line); box-shadow: none; backdrop-filter: none; }
.page__title { font-size: var(--fs-4xl); font-weight: 800; }
.panel { border: 1.5px solid var(--hair); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }
.panel__head { border-block-end: 2px dashed var(--hair); }
.kpi-strip { gap: var(--space-4); background: none; border: 0; }
.kpi-strip > * { border: 1.5px solid var(--hair) !important; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: var(--space-5); background: var(--surface); position: relative; overflow: hidden; }
.kpi-strip > :first-child { background: var(--teal); border: var(--outline) !important; box-shadow: var(--shadow-hard); color: var(--ink); }
.kpi-strip > :first-child .kpi__label, .kpi-strip > :first-child .kpi__delta { color: var(--ink); }
.kpi__value { font-weight: 800; font-size: var(--fs-4xl); }
.table-wrap { border: 1.5px solid var(--hair); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }
.table th { background: var(--surface-sunken); font-weight: var(--fw-bold); border-block-end: 2px solid var(--line); }
.table tbody tr:hover { background: var(--accent-subtle); }
.viewer, .workbench .card { border-radius: var(--radius-lg); }
.kb-card { border-radius: var(--radius-md); border: 1.5px solid var(--hair); box-shadow: var(--shadow-md); }

/* -------------------------------------------------------------------------
   8. MARKETING SITE: ink hero, sticker headline, ticker band
   ------------------------------------------------------------------------- */
.site-header { background: var(--bg); border: 0; border-block-end: 2px solid var(--line); box-shadow: none; backdrop-filter: none; }
.hero { background: var(--ink); border-block-end: 2.5px solid var(--line); }
.hero::before { content: ""; position: absolute; inset: 0; border-radius: 0; opacity: 0.1; background: url("../img/arch-pattern.svg") 0 0 / 120px 120px; width: auto; height: auto; }
.hero::after { display: none; }
.hero > * { position: relative; z-index: 1; }
.hero h1 { font-weight: 800; font-size: clamp(2.4rem, 1.4rem + 4vw, 4.5rem); }
.hero__art { position: relative; aspect-ratio: 4 / 4.6; border: 2.5px solid var(--line); border-radius: 12rem 12rem 2.5rem 2.5rem; box-shadow: 10px 10px 0 var(--sun); overflow: hidden; }
.hero__float { position: absolute; display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--surface); color: var(--text); border: var(--outline); box-shadow: var(--shadow-hard-sm); font-size: var(--fs-sm); font-weight: var(--fw-bold); transform: rotate(-2deg); }
.hero .btn--secondary { --btn-bg: transparent; --btn-border: #fff; --btn-fg: #fff; box-shadow: none; }
.hero .btn--primary { --btn-bg: var(--sun); box-shadow: 3px 3px 0 var(--teal); }
.site-footer { background: var(--ink); border-block-start: 2.5px solid var(--line); }
.feature-row h3 { font-size: var(--fs-3xl); font-weight: 800; }

@media (prefers-reduced-motion: reduce) { .card--interactive:hover, .btn:hover, .cat:hover .cat__icon { transform: none; } }

/* review aid (?wrap=1): every frame of a flow visible at once, for full-page screenshots */
html[data-wrap] .flow__track { flex-wrap: wrap; overflow: visible; row-gap: var(--space-10); }
html[data-wrap] .flow-link { display: none; }

/* -------------------------------------------------------------------------
   9. Board cover: oversized title, tilted sticker tags
   ------------------------------------------------------------------------- */
.board__head { position: relative; padding-block: var(--space-6) var(--space-4); }
.board__title { font-size: clamp(3rem, 2rem + 4vw, 5.5rem); line-height: 1.05; font-weight: 800; display: inline-block; position: relative; }
.board__title::after { content: ""; position: absolute; inset-inline: -0.1em; inset-block-end: 0.02em; height: 0.34em; background: var(--sun); z-index: -1; transform: rotate(-1deg); border-radius: 6px; }
.board__head .docs__lead { font-size: var(--fs-xl); font-weight: var(--fw-medium); max-width: 52ch; }
.board__head .chip--static { background: var(--surface); color: var(--ink); border: 2px solid var(--line); box-shadow: 3px 3px 0 var(--line-solid); min-height: 2rem; font-weight: 800; font-family: var(--font-display); font-size: var(--fs-sm); transform: rotate(-2deg); }
.board__head .chip--static:nth-child(2n) { transform: rotate(1.5deg); background: var(--sun); }
.board__head .chip--static:nth-child(3n) { transform: rotate(-1deg); background: var(--lilac); }
.board__head .chip--static:nth-child(5n) { background: var(--teal); }
.board__head .cluster { gap: var(--space-3); }

/* calendar placeholder cells reuse the word "empty": keep them from inheriting the empty-state component */
.cal__day.empty { padding: 0; max-width: none; margin: 0; gap: 0; display: block; background: transparent; box-shadow: none; }
.cal__day { border: 2px solid transparent; font-weight: var(--fw-bold); }
.cal__day.present { background: var(--hue-plum-bg); color: var(--hue-plum-fg); box-shadow: none; border-color: var(--teal); }
.cal__day.late { background: var(--sun); color: var(--ink); box-shadow: none; border-color: var(--line); }
.cal__day.absent { background: var(--tomato); color: var(--ink); box-shadow: none; border-color: var(--line); }
.cal__day.off { background: transparent; color: var(--text-3); box-shadow: none; border: 2px dashed var(--hair); }
.cal__day.today { box-shadow: 3px 3px 0 var(--line-solid); border-color: var(--line); background: var(--surface); color: var(--text); }

/* desktop frames sit on a coloured flow stage: reset text colour inside them */
.browser { color: var(--text); }
.badge--neutral { background: var(--surface-sunken); color: var(--text-2); border-color: var(--border-strong); }
[data-theme="dark"] .badge:not([class*="badge--"]) { background: var(--surface-sunken); color: var(--text); }
.frame__num, .frame__notes b { color: var(--text); }
section.flow:nth-of-type(5n+5) .frame__num { color: var(--ink); }
.wcard--row { grid-template-columns: auto 1fr auto; }
.wcard--row .wcard__foot { grid-column: auto; border: 0; padding: 0; flex-direction: column; align-items: flex-end; }
.card[class*="tint-"] { border: var(--outline); box-shadow: var(--shadow-hard-sm); }

/* -------------------------------------------------------------------------
   10. Audit fixes: contrast and touch targets (48dp in the family app)
   ------------------------------------------------------------------------- */
.btn--tertiary { --btn-fg: var(--brand-subtle-fg); }
.mini-stat span { color: var(--ink); }
[data-surface] .segmented span { min-height: 2.75rem; }
[data-surface] .icon-btn--sm { --hit-min: 2.75rem; }
.pcard__fav { width: 2.5rem; height: 2.5rem; }
.pcard__fav::after, .chip__x::after { content: ""; position: absolute; inset: -0.4rem; }
.chip__x { position: relative; }
.range { height: 2.25rem; }
.input-addon, .tabbar a, .tabbar button { min-height: 3.5rem; }
.input-addon { min-height: 0; }

/* compare table: every column shares the same row grid so labels line up with values */
.compare { border: 1.5px solid var(--hair); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }
.compare__col { grid-template-rows: var(--cmp-head, 5.75rem) repeat(6, var(--cmp-row, 3.5rem)); }
.compare__cell { border-block-start: 1.5px dashed var(--hair); font-weight: var(--fw-medium); }
.compare__col > :first-child { border-block-start: 0; }
.compare__cell.label { background: var(--surface-sunken); border-block-start: 1.5px solid var(--hair); font-weight: var(--fw-bold); color: var(--text); }
.compare__col > .label:first-child { border-block-start: 0; }
.splash__chip { color: var(--text); } .splash__chip .icon { color: var(--text); }
.splash__chip.fam-chip-b, .splash__chip.fam-chip-b .icon { color: var(--ink); }

/* arch photos clip their corners: keep overlays inside the curve */
.pcard__tier { inset-block-start: 0.6rem; inset-inline-start: 50%; transform: translateX(-50%); }
[dir="rtl"] .pcard__tier { transform: translateX(50%); }
.pcard__fav { inset-block-start: 2.6rem; inset-inline-end: 0.35rem; }
/* chart series: every light-mode colour holds 3:1 against white and paper */
:root { --viz-2: light-dark(#a87400, #ffc53d); --viz-6: light-dark(#d9482a, #ff8466); }

/* muted text on the dark sidebar and on loud KPI cards */
.sidebar__org, .sidebar__org * { color: #c9dcdc; }
.sidebar__org strong, .sidebar__org b { color: #fff; }
.kpi-strip > :first-child small, .kpi-strip > :first-child .kpi__value small { color: var(--ink); }

/* text on loud fills is always ink; lighter sky and rose solids so ink holds 4.5:1 */
:root { --hue-sky-solid: #5aa5e0; --hue-rose-solid: #f0709a; }
.tint-sky { --t-solid: #5aa5e0; } .tint-rose { --t-solid: #f0709a; }
.stat-tile, .stat-tile * { color: var(--ink); }
.stat-tile__value small, .stat-tile__label { color: var(--ink); }
.kpi-strip > :first-child, .kpi-strip > :first-child * { color: var(--ink); }
.stars.t-caption { color: var(--text-2); }
.btn--ghost { --btn-fg: var(--text); }
.seal, .sticker { color: var(--ink); }
.stat-tile .stat-tile__icon, .stat-tile .stat-tile__icon * { color: var(--text); }