/* `hidden` must always win.
   Any component rule that sets `display` — flex, grid, block — silently beats
   the browser's own `[hidden] { display: none }`, because an author rule
   outranks the user-agent one. That bit this site three times: the plan
   prices showed both at once, and the PWA install banner sat invisible (at
   zero opacity) on top of the footer on every page, swallowing every click on
   the terms, privacy and "register your business" links. One rule, here, at
   the top, ends that class of bug instead of patching each component. */
[hidden] { display: none !important; }

/* ── EV House ───────────────────────────────────────────────────────────────
   One stylesheet, hand written, no build step.

   The previous frontend used Tailwind, which needs Node to compile. The point
   of moving to Django was one language and one process, and a CSS build in a
   second runtime would have quietly kept the thing we removed.

   Sizes are small because the design is consistent: a dozen surfaces, one
   accent, one scale. Utility classes exist only where they earn their place —
   spacing and layout — and everything with a name in the design gets a
   component class instead.

   Colours were measured, not picked. `--accent` differs between themes
   because a green readable on navy fails on white and the reverse; one hue
   cannot do both jobs, and shipping one that fails is how a button becomes
   unreadable in sunlight.
   ─────────────────────────────────────────────────────────────────────── */

/* ── Design tokens ─────────────────────────────────────────────────────────
   The EV House design system. Every colour, radius, shadow and step of the
   type and spacing scales is named here once; components read the names.

   Palette: restrained. One brand hue — the emerald of the logo mark — on a
   neutral ground with a faint cool cast. Hierarchy comes from surfaces and
   type, not from more colours. Semantic colours exist for state only.

   The older names (--bg, --surface, --accent, --muted…) are kept as aliases
   of the new tokens so every existing component moves with the system.
   ─────────────────────────────────────────────────────────────────────── */

:root {
  /* Neutral scale */
  --n-0: #ffffff;  --n-25: #f8fafc; --n-50: #f1f4f8;  --n-100: #e7ecf2;
  --n-200: #d9e0e8; --n-300: #c2cbd6; --n-400: #8c96a4; --n-500: #5d6776;
  --n-600: #434c5a; --n-700: #2d3542; --n-800: #19202b; --n-900: #0b1220;

  /* Brand — the logo's emerald */
  --b-50: #ecfdf5; --b-100: #d1fae5; --b-200: #a7f3d0; --b-300: #6ee7b7;
  --b-400: #34d399; --b-500: #10b981; --b-600: #059669; --b-700: #047857;
  --b-800: #065f46; --b-900: #064e3b;

  /* Roles */
  /* Clarity: the page is a light grey and every card is white with a real
     edge, so a card reads as an object and not as a tint of the page. Body
     text is near-black; secondary text is dark grey, never washed out. */
  --background: var(--n-50);
  --surface: var(--n-0);
  --surface-2: var(--n-25);
  --surface-3: var(--n-100);
  --border: var(--n-200);
  --border-strong: var(--n-300);
  --fg: var(--n-900);
  --muted: var(--n-600);
  --faint: var(--n-500);

  --primary: var(--b-700);          /* 5.5:1 on white — AA for text and fills */
  --primary-hover: var(--b-800);
  --primary-soft: var(--b-50);
  --primary-border: var(--b-300);
  --ink: #0b1220;                    /* the dark band: CTA, footer */
  --on-primary: #ffffff;
  --ring: color-mix(in srgb, var(--b-500) 35%, transparent);

  --success: #047857; --success-soft: #ecfdf5;
  --warning: #b45309; --warning-soft: #fffbeb;
  --danger:  #b91c1c; --danger-soft:  #fef2f2;
  --info:    #1d4ed8; --info-soft:    #eff6ff;

  /* Legacy aliases */
  --bg: var(--background);
  --accent: var(--primary);
  --accent-bright: var(--b-600);
  --accent-soft: var(--b-500);
  --on-accent: var(--on-primary);
  --navy: var(--n-800);
  --gold: #f59e0b; --gold-dark: #d97706; --amber: var(--warning);
  --good: var(--success); --warn: var(--warning); --bad: var(--danger);
  --gradient: linear-gradient(135deg, var(--b-600), var(--b-400));
  --gradient-action: linear-gradient(180deg, var(--b-600), var(--b-700));

  /* Type */
  --font: "EVH Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --text-xs: .8125rem; --text-sm: .9375rem; --text-base: 1.0625rem; --text-md: 1.125rem;
  --text-lg: 1.3125rem; --text-xl: 1.5625rem; --text-2xl: 2rem;
  --text-3xl: clamp(1.875rem, 3.4vw, 2.75rem);
  --text-display: clamp(2.5rem, 5.4vw, 4.25rem);

  /* Space — a 4px grid */
  --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-24: 6rem;

  /* Radius — modest. Rounded enough to feel current, not pillowy. */
  --r-xs: 4px; --r-sm: 6px; --r-md: 8px; --r-lg: 12px; --r-xl: 16px; --r-full: 999px;
  --radius: var(--r-lg);
  --radius-sm: var(--r-md);

  /* Elevation — two layers each, never a single soft blur */
  --shadow-xs: 0 1px 2px rgb(11 18 32 / .06);
  --shadow-sm: 0 1px 2px rgb(11 18 32 / .06), 0 2px 6px rgb(11 18 32 / .05);
  --shadow-md: 0 2px 4px rgb(11 18 32 / .06), 0 12px 24px -8px rgb(11 18 32 / .16);
  --shadow-lg: 0 4px 8px rgb(11 18 32 / .06), 0 28px 56px -14px rgb(11 18 32 / .26);

  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-soft: cubic-bezier(.4, 0, .2, 1);
  --dur-fast: 120ms; --dur: 180ms; --dur-slow: 320ms;
  --page: 76rem;
  --header-h: 4rem;
}

/* Dark is designed, not inverted: a near-black with a cool cast, surfaces
   that step up in lightness rather than in border weight, and the brand
   lifted to its 400 so it stays legible on the ground. */
:root[data-theme="dark"] {
  --background: #080b10;
  --surface: #121821;
  --surface-2: #18202b;
  --surface-3: #202a37;
  --border: #2a3441;
  --border-strong: #3a4656;
  --fg: #f3f6fa;
  --muted: #b8c1cc;
  --faint: #8d97a4;
  --ink: #04070b;

  --primary: var(--b-400);
  --primary-hover: var(--b-300);
  --primary-soft: color-mix(in srgb, var(--b-400) 12%, transparent);
  --primary-border: color-mix(in srgb, var(--b-400) 30%, transparent);
  --on-primary: #03140d;
  --ring: color-mix(in srgb, var(--b-400) 40%, transparent);

  --success: #34d399; --success-soft: color-mix(in srgb, #34d399 12%, transparent);
  --warning: #fbbf24; --warning-soft: color-mix(in srgb, #fbbf24 12%, transparent);
  --danger:  #f87171; --danger-soft:  color-mix(in srgb, #f87171 12%, transparent);
  --info:    #60a5fa; --info-soft:    color-mix(in srgb, #60a5fa 12%, transparent);

  --navy: var(--fg);
  --shadow-xs: 0 1px 2px rgb(0 0 0 / .4);
  --shadow-sm: 0 1px 2px rgb(0 0 0 / .4);
  --shadow-md: 0 8px 24px -8px rgb(0 0 0 / .6);
  --shadow-lg: 0 24px 48px -12px rgb(0 0 0 / .7);
}

/* ── Reset ─────────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 1rem); }

body {
  min-height: 100dvh;
  background: var(--background);
  color: var(--fg);
  font-family: var(--font);
  font-size: var(--text-base);
  /* Arabic needs more leading than Latin — the dots below the baseline
     collide at 1.5 — so the body sets it once for both. */
  line-height: 1.75;
  font-feature-settings: "cv11", "ss01";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img, svg { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { line-height: 1.3; text-wrap: balance; font-weight: 600; letter-spacing: normal; }
p { text-wrap: pretty; }
::selection { background: color-mix(in srgb, var(--b-400) 30%, transparent); }

/* Figures line up in columns everywhere a number is compared. */
.tnum { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
/* "340 km" reads "km 340" inside RTL unless the run is isolated. */
.measure { unicode-bidi: isolate; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── Layout ────────────────────────────────────────────────────────────── */

.wrap { width: 100%; max-width: var(--page); margin-inline: auto; padding-inline: var(--s-4); }
@media (min-width: 640px) { .wrap { padding-inline: var(--s-6); } }
@media (min-width: 1024px) { .wrap { padding-inline: var(--s-8); } }

.stack > * + * { margin-block-start: var(--gap, var(--s-4)); }
.row { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
.between { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-4); }
.grid { display: grid; gap: var(--s-4); }
.cols-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); }
.cols-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
.cols-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }

.section { padding-block: var(--s-12); }
@media (min-width: 768px) { .section { padding-block: var(--s-16); } }
.section + .section-sm { padding-block-start: 0; }
.section-sm { padding-block: var(--s-8); }

/* ── Type ──────────────────────────────────────────────────────────────── */

.display { font-weight: 600; }
.h1 { font-size: var(--text-display); line-height: 1.2; }
.h2 { font-size: var(--text-3xl); line-height: 1.3; }
.h3 { font-size: var(--text-lg); font-weight: 600; line-height: 1.4; }
.h4 { font-size: var(--text-md); font-weight: 600; line-height: 1.45; }
.lede { font-size: var(--text-md); line-height: 1.8; color: var(--muted); max-width: 38rem; text-wrap: balance; }
.muted { color: var(--muted); }
.faint { color: var(--faint); font-size: var(--text-sm); }
.small { font-size: var(--text-sm); }
.strong { font-weight: 600; }
.light { font-weight: 300; }

/* A label above a heading. Never uppercase — Arabic has no case. */
.eyebrow {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-size: var(--text-sm); font-weight: 600; color: var(--primary);
}

/* ── Surfaces ──────────────────────────────────────────────────────────── */

.panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--s-6);
  box-shadow: var(--shadow-xs);
}
.panel-accent { border-color: var(--primary-border); background: var(--primary-soft); }
.panel-warn   { border-color: color-mix(in srgb, var(--warning) 30%, transparent); background: var(--warning-soft); }
.panel-dashed { border-style: dashed; box-shadow: none; background: transparent; text-align: center; padding-block: var(--s-12); }

.lift { transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.lift:hover { transform: translateY(-2px); border-color: var(--border-strong); box-shadow: var(--shadow-md); }

/* ── Buttons ─────────────────────────────────────────────────────────────
   Variants: primary (default), secondary, ghost, danger. Sizes: sm, default,
   lg. One primary per view. Every state is visible: hover, active, focus,
   disabled, busy.
   ─────────────────────────────────────────────────────────────────────── */

.btn {
  --btn-bg: var(--primary);
  --btn-fg: var(--on-primary);
  --btn-border: transparent;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: 2.625rem;
  padding: 0 var(--s-5);
  border-radius: var(--r-md);
  border: 1px solid var(--btn-border);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: var(--shadow-xs), inset 0 1px 0 rgb(255 255 255 / .12);
  transition: background var(--dur-fast) var(--ease-soft), border-color var(--dur-fast) var(--ease-soft),
              box-shadow var(--dur-fast) var(--ease-soft), transform var(--dur-fast) var(--ease-soft);
}
.btn:hover { --btn-bg: var(--primary-hover); }
.btn:active:not(:disabled):not([aria-busy="true"]) { transform: translateY(1px); }
.btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ring); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }

.btn-secondary { --btn-bg: var(--surface); --btn-fg: var(--fg); --btn-border: var(--border-strong); box-shadow: var(--shadow-xs); }
.btn-secondary:hover { --btn-bg: var(--surface-2); }
.btn-ghost { --btn-bg: transparent; --btn-fg: var(--muted); box-shadow: none; }
.btn-ghost:hover { --btn-bg: var(--surface-2); --btn-fg: var(--fg); }
.btn-danger { --btn-bg: var(--danger); --btn-fg: #fff; }
.btn-danger:hover { --btn-bg: color-mix(in srgb, var(--danger) 88%, black); }

.btn-sm { min-height: 2.125rem; padding: 0 var(--s-3); font-size: var(--text-sm); border-radius: var(--r-sm); }
.btn-lg { min-height: 3rem; padding: 0 var(--s-6); font-size: var(--text-base); }
.btn-block { width: 100%; }

.btn[aria-busy="true"] { position: relative; color: transparent; pointer-events: none; }
.btn[aria-busy="true"]::after {
  content: ""; position: absolute; inset: 0; margin: auto;
  width: 1.05em; height: 1.05em; border-radius: var(--r-full);
  border: 2px solid color-mix(in srgb, var(--btn-fg) 30%, transparent);
  border-top-color: var(--btn-fg);
  animation: btn-spin .6s linear infinite;
}
@keyframes btn-spin { to { transform: rotate(360deg); } }

/* ── Chips (filter toggles) ──────────────────────────────────────────── */

.chip {
  display: inline-flex; align-items: center; gap: var(--s-2);
  min-height: 2.125rem; padding: 0 var(--s-3);
  border-radius: var(--r-full);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--muted);
  font-size: var(--text-sm);
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-soft), border-color var(--dur-fast) var(--ease-soft), background var(--dur-fast) var(--ease-soft);
}
.chip:hover { color: var(--fg); border-color: var(--border-strong); }
.chip[aria-pressed="true"], .chip.is-on {
  border-color: var(--primary-border); background: var(--primary-soft); color: var(--primary); font-weight: 600;
}

/* A row of chips as one control, not a handful of loose pills.
   They were `inline-flex` children of a bare form, so they sat unanchored
   with no gap and no wrapping rule — the row read as debris rather than as a
   filter. This gives it a ground, a label slot, and a horizontal scroll on a
   phone instead of four ragged lines. */
.chips {
  /* `inline-flex`, so the group is as wide as its chips. Stretched to the
     container it reads as an empty bar with the controls shoved to one end. */
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-1);
  padding: var(--s-1);
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  background: var(--surface-2);
  max-width: 100%;
  min-width: 0;
}
.chips > .chips-label {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding-inline: var(--s-3) var(--s-2);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
}
.chips > .chips-label svg { flex-shrink: 0; }
/* Inside the group the chips lose their own border and sit on the ground —
   one outline around the set, not one per item. */
.chips > .chip {
  border-color: transparent;
  background: transparent;
}
.chips > .chip:hover { background: var(--surface); border-color: var(--border); }
.chips > .chip.is-on {
  background: var(--surface);
  border-color: var(--primary-border);
  box-shadow: var(--shadow-sm);
}

@media (max-width: 640px) {
  /* One line that scrolls, rather than four that wrap: twenty-seven
     governorates stacked three deep push the results off the screen. */
  .chips {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    border-radius: var(--r-lg);
  }
  .chips::-webkit-scrollbar { display: none; }
  .chips > .chip { flex: 0 0 auto; }
}

/* ── Inputs ──────────────────────────────────────────────────────────── */

.field { display: block; }
.field > span:first-child { display: block; font-size: var(--text-sm); font-weight: 500; color: var(--fg); margin-block-end: var(--s-2); }
.field > .faint { display: block; margin-block-start: var(--s-1); font-size: var(--text-xs); }
.input, select.input, textarea.input {
  width: 100%;
  min-height: 2.75rem;
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-md);
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--fg);
  font-size: var(--text-base);
  box-shadow: var(--shadow-xs);
  transition: border-color var(--dur-fast) var(--ease-soft), box-shadow var(--dur-fast) var(--ease-soft);
}
textarea.input { min-height: 6rem; line-height: 1.7; }
.input::placeholder { color: var(--n-400); }
.input:hover { border-color: var(--n-400); }
.input:focus, .input:focus-visible { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--ring); }
.input[aria-invalid="true"], .field:has(.field-error) .input { border-color: var(--danger); }
.field-error { display: block; margin-block-start: var(--s-1); font-size: var(--text-xs); color: var(--danger); }
input[type="checkbox"] { accent-color: var(--primary); inline-size: 1.05rem; block-size: 1.05rem; }

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}

/* ── Badges ──────────────────────────────────────────────────────────── */

.badge {
  display: inline-flex; align-items: center; gap: var(--s-1);
  min-height: 1.5rem; padding: 0 var(--s-2);
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--muted);
  font-size: var(--text-xs);
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
}
.badge-good, .badge-accent { color: var(--success); border-color: color-mix(in srgb, var(--success) 25%, transparent); background: var(--success-soft); }
.badge-warn { color: var(--warning); border-color: color-mix(in srgb, var(--warning) 25%, transparent); background: var(--warning-soft); }
.badge-bad  { color: var(--danger);  border-color: color-mix(in srgb, var(--danger) 25%, transparent);  background: var(--danger-soft); }
.badge-info { color: var(--info);    border-color: color-mix(in srgb, var(--info) 25%, transparent);    background: var(--info-soft); }
.badge-solid { color: var(--on-primary); background: var(--primary); border-color: transparent; }
.badge-dot::before { content: ""; inline-size: .4rem; block-size: .4rem; border-radius: var(--r-full); background: currentColor; }

.bar { height: .5rem; border-radius: var(--r-full); background: var(--surface-3); overflow: hidden; }
.bar > span { display: block; height: 100%; border-radius: var(--r-full); background: var(--primary); }
.bar-quiet > span { background: var(--n-400); }

/* ── Skeleton, empty state ───────────────────────────────────────────── */

.skeleton {
  border-radius: var(--r-sm);
  background: linear-gradient(90deg, var(--surface-2), var(--surface-3), var(--surface-2));
  background-size: 200% 100%;
  animation: skeleton 1.4s var(--ease-soft) infinite;
}
@keyframes skeleton { to { background-position: -200% 0; } }

.empty-state {
  display: grid; justify-items: center; gap: var(--s-2);
  padding: var(--s-12) var(--s-6);
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-lg);
  text-align: center;
  color: var(--muted);
}
.empty-state-icon {
  display: grid; place-items: center;
  inline-size: 2.75rem; block-size: 2.75rem;
  border-radius: var(--r-md);
  background: var(--surface-2);
  color: var(--faint);
  margin-block-end: var(--s-2);
}
.empty-state .h4 { color: var(--fg); }

/* ── Header and footer ─────────────────────────────────────────────────── */

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(12px);
  border-block-end: 1px solid var(--border);
}
.site-header .wrap {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  height: 4.25rem;
}

/* The nav takes the space between the logo and the controls, and the controls
   are pushed to the end by the nav rather than by a second `auto` margin —
   two elements both claiming the free space fought, and the nav ran over the
   wordmark. */
.site-nav { display: none; flex: 1; gap: .25rem; align-items: center; }
@media (min-width: 1000px) { .site-nav { display: flex; } }

.nav-group { position: relative; }

.nav-trigger {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .55rem .85rem;
  border-radius: .6rem;
  color: var(--muted);
  font-size: 1rem;
  font-weight: 500;
  white-space: nowrap;
  transition: color .2s var(--ease-soft), background .2s var(--ease-soft);
}
.nav-group:hover .nav-trigger, .nav-trigger:focus-visible { color: var(--fg); background: var(--surface-2); }

/* The section you are in, marked. Not with colour alone — a bar under the
   word survives a colour-blind reader and a bad screen. */
.nav-trigger.is-current { color: var(--accent); font-weight: 700; }
.nav-trigger.is-current::after {
  content: "";
  position: absolute;
  inset-inline: .85rem;
  inset-block-end: -1px;
  height: 2px;
  border-radius: 2px;
  background: var(--accent);
}

.nav-caret { font-size: .6em; opacity: .55; transition: transform .2s var(--ease-soft); }
.nav-group:hover .nav-caret { transform: translateY(2px); }

.nav-menu {
  position: absolute;
  inset-block-start: calc(100% + .5rem);
  inset-inline-start: 0;
  min-width: 17rem;
  /* Never wider than the page it drops out of. */
  max-inline-size: calc(100vw - 2rem);
  padding: .5rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: 0 20px 45px rgba(0, 0, 0, .16);
  display: grid;
  gap: .1rem;
  /* Hidden by visibility rather than display, so it can fade rather than
     appear, and so focus can still reach it while it opens. */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .18s var(--ease-soft), transform .18s var(--ease-soft), visibility .18s;
  z-index: 50;
}
[data-theme="dark"] .nav-menu { box-shadow: 0 20px 45px rgba(0, 0, 0, .5); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .nav-menu { box-shadow: 0 20px 45px rgba(0, 0, 0, .5); }
}

.nav-group:hover .nav-menu,
.nav-group:focus-within .nav-menu {
  opacity: 1;
  visibility: visible;
  transform: none;
}

/* An icon and two lines. The icon is what makes a six-item menu scannable —
   without one the reader has to actually read all six to find the one they
   want. */
.nav-menu a {
  display: flex;
  align-items: flex-start;
  gap: .65rem;
  padding: .6rem .7rem;
  border-radius: .6rem;
  color: var(--fg);
  font-size: .95rem;
  font-weight: 700;
  line-height: 1.45;
  transition: background .15s var(--ease-soft);
}
.nav-menu a > .icon {
  flex-shrink: 0;
  margin-block-start: .1rem;
  color: var(--accent);
  opacity: .85;
}
.nav-menu a > span { display: block; min-width: 0; }
.nav-menu a > span > span {
  display: block;
  margin-block-start: .1rem;
  font-size: .82rem;
  font-weight: 400;
  color: var(--faint);
}
.nav-menu a:hover { background: var(--surface-2); }
.nav-menu a:hover > span > span { color: var(--muted); }
.nav-menu a:hover > .icon { opacity: 1; }

/* The services menu carries six entries; two columns keep it from becoming a
   column taller than the viewport. */
.nav-menu-wide { min-width: min(34rem, calc(100vw - 2rem)); grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* Two columns need room the page does not have at laptop width, where this
   menu was hanging 31px off the edge of every page. */
@media (max-width: 1100px) { .nav-menu-wide { min-width: 0; grid-template-columns: 1fr; } }

/* Below the nav breakpoint the whole thing becomes a panel under the header. */
.nav-toggle {
  display: grid;
  place-items: center;
  width: 2.5rem; height: 2.5rem;
  border: 1px solid var(--border);
  border-radius: .7rem;
  background: var(--surface);
  color: var(--muted);
  cursor: pointer;
}
@media (min-width: 1000px) { .nav-toggle { display: none; } }

@media (max-width: 999px) {
  .site-nav.is-open {
    display: grid;
    position: absolute;
    inset-block-start: 100%;
    inset-inline: 0;
    padding: 1rem 1.25rem 1.5rem;
    background: var(--surface);
    border-block-end: 1px solid var(--border);
    box-shadow: 0 20px 45px rgba(0, 0, 0, .18);
    max-height: 80vh;
    overflow-y: auto;
    gap: .5rem;
  }
  .site-nav.is-open .nav-menu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border: 0;
    padding: 0 0 .5rem;
    min-width: 0;
  }
  .site-nav.is-open .nav-caret { display: none; }
  .site-nav.is-open .nav-trigger { font-size: 1.05rem; font-weight: 700; color: var(--fg); }
}

/* Below the nav breakpoint the controls still need pushing to the end. */
.header-actions { display: flex; align-items: center; gap: .75rem; margin-inline-start: auto; }

/* The header's right-hand side: ask Zakki, the theme, and the one thing that
   changes between a stranger and a member. One filled button per screen — for
   a stranger that is "sign in"; for a member there is none, because they have
   already done the thing a filled button asks for. */
.header-actions { display: flex; align-items: center; gap: .4rem; margin-inline-start: auto; }

.cta-ask {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .45rem .75rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  color: var(--muted);
  font-size: .88rem; font-weight: 600;
  white-space: nowrap;
  transition: color .15s var(--ease), border-color .15s var(--ease), background .15s var(--ease);
}
.cta-ask:hover, .cta-ask.is-current {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
  background: color-mix(in srgb, var(--accent) 6%, transparent);
}

.icon-btn {
  display: grid; place-items: center;
  width: 2.15rem; height: 2.15rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--muted);
  cursor: pointer;
  transition: color .15s var(--ease), background .15s var(--ease);
}
.icon-btn:hover { color: var(--fg); background: var(--surface-2); }

/* The member's chip. An initial rather than a photograph: we do not ask for
   one, and a generic silhouette on every header is worse than a letter. */
.chip-account { display: inline-flex; align-items: center; gap: .45rem; padding-inline-start: .35rem; }
.avatar {
  display: grid; place-items: center;
  width: 1.6rem; height: 1.6rem;
  border-radius: 50%;
  background: var(--accent); color: var(--on-accent);
  font-size: .78rem; font-weight: 700; text-transform: uppercase;
}
.chip-account-text { max-width: 8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* On a phone the labels go and the shapes stay: the row still has to fit
   next to a logo and a menu button. */
@media (max-width: 720px) {
  .cta-ask span { display: none; }
  .cta-ask { padding: .45rem .6rem; }
  .chip-account-text { display: none; }
}
.header-cta > a:hover { color: var(--fg); background: var(--surface-2); }
.header-cta > a.is-current { color: var(--accent); font-weight: 700; }

/* The breakdown link keeps its colour at rest. It is the one item here whose
   usefulness is measured in seconds, and a grey one is a grey one. */
.cta-sos { color: var(--amber); }
.cta-sos:hover { color: var(--amber); background: color-mix(in srgb, var(--amber) 10%, transparent); }

@media (max-width: 720px) {
  .header-cta > a { padding-inline: .5rem; font-size: 0; gap: 0; }
  .header-cta > a svg { width: 20px; height: 20px; }
}

.site-footer { border-block-start: 1px solid var(--border); margin-block-start: 4rem; padding-block: 3rem; }
.site-footer :where(a) { color: var(--muted); font-size: 0.9rem; line-height: 2; }
/* `:where()` so a component inside the footer keeps its own hover — see the
   note on the social icons further down. */
.site-footer :where(a):hover { color: var(--fg); }

/* The wordmark stays Latin and LTR on Arabic pages: a brand name is a name,
   not a translated string. */
.logo { display: inline-flex; align-items: center; gap: 0.6rem; direction: ltr; flex-shrink: 0; }
.logo-text { font-size: 1.25rem; letter-spacing: -0.01em; white-space: nowrap; }
.logo-text .thin { font-weight: 500; color: var(--muted); }
.logo-text .bold { font-weight: 700; }

/* ── Tables ────────────────────────────────────────────────────────────── */

.table-scroll { overflow-x: auto; }
table.data { width: 100%; border-collapse: collapse; font-size: 1rem; }
table.data th { text-align: start; font-size: 0.78rem; font-weight: 700; color: var(--muted); padding: 0.75rem; }
table.data td { padding: 0.75rem; border-block-start: 1px solid var(--border); }

/* ── Utilities, few and deliberate ─────────────────────────────────────── */

.mt-1 { margin-block-start: 0.5rem; }
.mt-2 { margin-block-start: 1rem; }
.mt-3 { margin-block-start: 1.5rem; }
.mt-4 { margin-block-start: 2rem; }
.mt-6 { margin-block-start: 3rem; }
/* Pinned to the corner rather than left at its static position. Absolutely
   positioned with no inset, this sat one pixel past the body's inline-start
   edge — which in a right-to-left document is the right-hand edge, so it
   pushed the page 32px wider than the viewport. Every page on the site
   scrolled sideways on a phone because of a hidden one-pixel link.
   `clip-path` rather than the deprecated `clip`, and no negative margin. */
.sr-only {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  width: 1px; height: 1px; padding: 0; margin: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.skip-link:focus {
  position: fixed; inset-block-start: 0.75rem; inset-inline-start: 0.75rem;
  z-index: 50; width: auto; height: auto; clip-path: none; margin: 0;
  padding: 0.6rem 1rem; background: var(--accent); color: var(--on-accent);
  border-radius: var(--radius-sm); font-weight: 700;
}

/* ── The charge gradient ───────────────────────────────────────────────────
   The site's one piece of visual language, used sparingly.

   Not a decoration: it is the same idea as the mark — charge running left to
   right — and it appears only where something is genuinely filling or
   progressing. Used as a background pattern it would become wallpaper and stop
   meaning anything.
   ─────────────────────────────────────────────────────────────────────── */

.charge-line {
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 20%, transparent));
}


/* ── The hero ──────────────────────────────────────────────────────────────
   One centred column, following the reference. The claim gets the middle of
   the page and the cost panel sits under it as evidence — beside it, the two
   competed and the reader read neither.
   ─────────────────────────────────────────────────────────────────────── */

.hero { display: grid; justify-items: center; text-align: center; gap: 3rem; }
.hero > * { max-width: 62.5rem; width: 100%; }
.hero .lede { margin-inline: auto; }

/* The pill above the headline. Tinted at 8% with an 18% border, which is the
   reference's recipe — enough to register as a label, not enough to compete
   with the headline underneath it. */
.hero-pill {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .35rem .9rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent);
  color: var(--accent);
  font-size: .8rem;
  font-weight: 600;
  margin-block-end: 1.5rem;
}
.hero-pill-dot {
  inline-size: .45rem;
  block-size: .45rem;
  border-radius: 999px;
  background: currentColor;
}

.hero-cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.25rem;
  margin-block-start: 2rem;
}
.hero-proof { margin-block-start: 1.125rem; }

/* The reference gives its hero 104px above and 96px below. Room is most of
   what separates a landing page from a form. */
.section.gradient-bg { padding-block: 6.5rem 6rem; }

/* ── Page headers ──────────────────────────────────────────────────────── */

.page-head {
  border-block-end: 1px solid var(--border);
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 3%, var(--bg)), var(--bg));
  padding-block: 3rem 2.5rem;
}
.page-head .h1 { font-size: clamp(1.6rem, 4.2vw, 2.6rem); }

.stat-inline { display: flex; align-items: baseline; gap: .4rem; margin-block-start: 1rem; }
.stat-value { font-size: 1.35rem; font-weight: 700; line-height: 1; color: var(--accent); }

/* ── Cards ─────────────────────────────────────────────────────────────── */


/* Car names wrap rather than truncate. "Citroen إى-…" tells a reader nothing
   and is the one string on a card they came to read. */
.card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; }
.card-head > .badge { flex-shrink: 0; }
.card-title {
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

/* Filter rows: the label holds its own column so a long brand list wraps
   under itself instead of pushing one chip onto a line of its own. */
.filter-row { display: grid; grid-template-columns: 5.5rem 1fr; gap: .75rem; align-items: start; }
.filter-row > .chips { display: flex; flex-wrap: wrap; gap: .5rem; }
@media (max-width: 640px) { .filter-row { grid-template-columns: 1fr; } }

/* ── Definition lists ──────────────────────────────────────────────────── */

.specs { display: grid; gap: 0.6rem; }
.specs > div {
  display: flex; justify-content: space-between; gap: 1rem;
  padding-block-end: 0.55rem;
  border-block-end: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
}
.specs > div:last-child { border: 0; padding-block-end: 0; }
.specs dt { color: var(--muted); font-size: 0.975rem; }
.specs dd { font-weight: 500; text-align: end; }

/* ── Provenance ────────────────────────────────────────────────────────────
   Where a figure came from, attached to the figure. This is the site's whole
   argument, so it gets a style rather than being a stray <small>.
   ─────────────────────────────────────────────────────────────────────── */

.source {
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--faint);
  border-inline-start: 2px solid var(--border);
  padding-inline-start: 0.6rem;
}
.source.demo { border-inline-start-color: var(--bad); color: var(--bad); }

/* ── Prose, for guides and answers ─────────────────────────────────────── */

.prose { max-width: 42rem; }
.prose > * + * { margin-block-start: 1rem; }
.prose h2 { font-size: 1.3rem; font-weight: 700; margin-block-start: 2rem; }
.prose h3 { font-size: 1.1rem; font-weight: 700; margin-block-start: 1.5rem; }
.prose p { color: var(--fg); }
.prose ul, .prose ol { padding-inline-start: 1.5rem; }
.prose li + li { margin-block-start: 0.4rem; }
.prose a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }

/* ── Map ───────────────────────────────────────────────────────────────── */

#map { height: 26rem; border-radius: var(--radius); border: 1px solid var(--border); }

/* ── Forms laid out as a bar ───────────────────────────────────────────── */

.form-bar { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); align-items: end; }


/* ── Motion ────────────────────────────────────────────────────────────────
   Adapted from the reference project.

   Four entrances and one attention state, and nothing else. Every one of them
   is switched off under `prefers-reduced-motion` — that is not a nicety:
   vestibular disorders are common, and animation that ignores the setting
   makes a site physically unusable for those readers.

   Nothing loops except `pulse` on a live indicator, and nothing travels more
   than 20px. A page that keeps moving is a page nobody can read a number on.
   ─────────────────────────────────────────────────────────────────────── */

@keyframes rise { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes slide-in { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: none; } }
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 30%, transparent); }
  50%      { box-shadow: 0 0 20px 5px color-mix(in srgb, var(--accent) 15%, transparent); }
}
@keyframes count-in { from { opacity: 0; transform: translateY(8px) scale(.96); } to { opacity: 1; transform: none; } }

/* `backwards` holds the first frame through the delay, so nothing flashes at
   full opacity before it animates. */
.rise      { animation: rise .55s var(--ease-soft) backwards; }
.fade      { animation: fade .6s var(--ease-soft) backwards; }
.count-in  { animation: count-in .5s var(--ease) backwards; }
.pulse     { animation: pulse 2.4s var(--ease-soft) infinite; }

/* Staggered so a row of cards arrives as a sequence rather than a flash.
   Capped at six: past that the last card is late enough to feel broken. */
.stagger > *:nth-child(1) { animation-delay: .04s; }
.stagger > *:nth-child(2) { animation-delay: .10s; }
.stagger > *:nth-child(3) { animation-delay: .16s; }
.stagger > *:nth-child(4) { animation-delay: .22s; }
.stagger > *:nth-child(5) { animation-delay: .28s; }
.stagger > *:nth-child(6) { animation-delay: .34s; }

@media (prefers-reduced-motion: reduce) {
  .rise, .fade, .count-in, .pulse { animation: none !important; }
}

/* ── Footer ────────────────────────────────────────────────────────────────
   One row, then a legal strip.

   It used to carry four columns repeating the header's eighteen links. A menu
   restated at the bottom of a page adds a screenful and no information, so
   what is left is the brand, the social channels, and the legal pages.
   ─────────────────────────────────────────────────────────────────────── */

.site-footer {
  border-block-start: 1px solid var(--border);
  background: color-mix(in srgb, var(--navy) 4%, var(--surface));
  margin-block-start: 5rem;
  padding-block: 2rem 1.25rem;
}
[data-theme="dark"] .site-footer { background: color-mix(in srgb, #000 12%, var(--bg)); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .site-footer { background: color-mix(in srgb, #000 12%, var(--bg)); }
}

.footer-top {
  display: flex; flex-wrap: wrap; gap: 1.25rem;
  align-items: center; justify-content: space-between;
}
.footer-brand p { color: var(--muted); font-size: .9rem; margin-block-start: .5rem; }

.footer-social { display: flex; gap: .5rem; }
.footer-social a {
  display: grid; place-items: center;
  width: 2.1rem; height: 2.1rem;
  border-radius: .7rem;
  border: 1px solid var(--border);
  color: var(--muted);
  transition: all .2s var(--ease-soft);
}
.footer-social a:hover,
.footer-social a:focus-visible {
  background: var(--primary); color: var(--on-primary);
  border-color: var(--primary); transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}
.footer-social a:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
/* The glyph follows the link's colour; saying so here means a future rule
   that colours footer links cannot leave an invisible icon behind. */
.footer-social a svg { fill: currentColor; }

.footer-legal {
  margin-block-start: 1.5rem;
  padding-block-start: 1rem;
  border-block-start: 1px solid var(--border);
  display: flex; flex-wrap: wrap; gap: .5rem 1.25rem;
  align-items: center; justify-content: space-between;
}
.footer-legal p { display: flex; flex-wrap: wrap; gap: .25rem 1rem; margin: 0; }
.footer-legal p, .footer-legal a { font-size: .82rem; color: var(--faint); line-height: 1.9; }
.footer-legal a:hover { color: var(--fg); }


/* ── Shapes, from the reference project ────────────────────────────────────
   Four devices, each with one job. Used anywhere else they become decoration,
   and decoration is what makes a page of numbers hard to read.
   ─────────────────────────────────────────────────────────────────────── */

/* The hero ground, in whichever theme is running.
 *
 * It was hard-coded navy, so a light page opened with a dark slab under a
 * white header and the seam between them read as a rendering fault rather
 * than a decision. In light it is a pale wash with a green cast; in dark it
 * is the reference project's navy. The type colour follows, so nothing
 * inherits a contrast that only worked in the other theme.
 */
.gradient-bg {
  /* Two lights rather than one: green from the top corner, a warm gold wash
     from the opposite one. A single tint at 9% was too faint to register as
     anything but a slightly dirty white. */
  background:
    radial-gradient(100% 80% at 88% -10%, color-mix(in srgb, var(--accent-soft) 22%, transparent), transparent 62%),
    radial-gradient(80% 70% at 8% 5%, color-mix(in srgb, var(--gold) 13%, transparent), transparent 58%),
    linear-gradient(165deg, var(--surface) 0%, var(--bg) 60%, var(--surface-2) 100%);
  border-block-end: 1px solid var(--border);
}
[data-theme="dark"] .gradient-bg {
  background:
    radial-gradient(120% 90% at 85% 0%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 60%),
    linear-gradient(135deg, #1B2A4A 0%, #0f1b32 50%, #1B2A4A 100%);
  border-block-end-color: transparent;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .gradient-bg {
    background:
      radial-gradient(120% 90% at 85% 0%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 60%),
      linear-gradient(135deg, #1B2A4A 0%, #0f1b32 50%, #1B2A4A 100%);
    border-block-end-color: transparent;
  }
}

/* A quiet field of horizontal rules over it — the grid an electrical drawing
   is set on, not a photograph of a car. */
.gradient-bg { position: relative; overflow: hidden; }
.gradient-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    0deg, transparent 0 47px,
    color-mix(in srgb, var(--fg) 4%, transparent) 47px 48px
  );
  mask-image: radial-gradient(90% 80% at 50% 0%, #000, transparent 78%);
  pointer-events: none;
}
.gradient-bg > * { position: relative; }

/* Teal-to-gold on a figure or a heading that is the site speaking. Never on a
   paragraph: a gradient is unreadable at body size. */
.gradient-text {
  background: var(--gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* Frosted panel, for a card sitting on the navy ground. */
.glass {
  background: rgba(255, 255, 255, .06);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: var(--radius);
}

/* The reference's card lift: further and softer than a hover tint, so a grid
   of cards reads as a set of objects rather than a table with borders. */
.lift { transition: all .3s var(--ease-soft); }
/* ── Motion, refined ───────────────────────────────────────────────────────
   Two things were wrong with the first pass. Everything rose by the same
   20px, so a heading and a small card felt like they weighed the same; and
   nothing responded to being *used*, only to arriving.
   ─────────────────────────────────────────────────────────────────────── */

/* Large elements travel further and settle slower — the same distance on a
   headline and on a chip makes the headline look weightless. */
@keyframes rise-lg { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
.rise-lg { animation: rise-lg .7s var(--ease) backwards; }

/* A bar filling is the one place where the motion *is* the information: it
   shows a quantity arriving rather than a box appearing. */
@keyframes fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.bar > span { transform-origin: right; animation: fill .9s var(--ease) .25s backwards; }
[dir="ltr"] .bar > span { transform-origin: left; }

/* Pressed states. A button that moves under the finger tells somebody the tap
   registered, on a connection where the next page is two seconds away. */
.chip:active { transform: translateY(1px); }

/* Links in prose underline on hover from the middle out, rather than blinking
   on. Cheap, and it makes a dense page of links feel handled. */
.prose a { background-size: 0 1px; }

@media (prefers-reduced-motion: reduce) {
  .rise-lg, .bar > span { animation: none !important; }
  .btn:active, .chip:active { transform: none; }
}

/* ── Type, refined ─────────────────────────────────────────────────────────
   Cairo's numerals are narrower than its letters, so a column of prices in
   Arabic-Indic digits drifts out of alignment without tabular figures — and
   a price list that does not line up is one people stop scanning.
   ─────────────────────────────────────────────────────────────────────── */

.tnum { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

/* No tracking on Arabic, at any size. Arabic letters join; `letter-spacing`
   prises the joins apart and the word stops reading as one word — the effect
   that made the old headings look broken. Tracking survives only on the Latin
   wordmark, which is the one run on the page that is genuinely Latin. */
.h1, .h2, .h3, .h4, .display, .eyebrow { letter-spacing: normal; }

/* A long Arabic paragraph needs a measure. Past about 70 characters the eye
   loses the line it is returning to, and Arabic has fewer ascender cues than
   Latin to find it again. */
.lede, .prose p, .prose li { max-width: 42rem; }

/* Body at 400. Tajawal's regular is already drawn dark enough for a screen —
   the 500 the previous face needed makes every paragraph here read as
   half-emphasised, which is what made a page of ordinary text feel shouted.
   Weight is reserved for headings and for the one figure that matters. */
body { font-weight: 400; }
.display, .h1, .h2 { font-weight: 500; }
.h3, .h4, .strong { font-weight: 600; }
.muted, .faint { font-weight: 400; }


/* ── The powertrain comparison ─────────────────────────────────────────────
   Drawings rather than photographs, because the difference between these five
   cars is invisible in a photograph — they look identical from outside, which
   is exactly why buyers cannot tell them apart.
   ─────────────────────────────────────────────────────────────────────── */

.kind-head { display: grid; gap: 1.5rem; align-items: center; }
@media (min-width: 800px) { .kind-head { grid-template-columns: 1fr 20rem; } }

.pt-diagram { width: 100%; max-width: 20rem; color: var(--fg); }

/* Advantages and drawbacks get the same weight. A list where the good side is
   ticked and the bad side is a footnote is a brochure. */
.pro-con { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.pro-con li {
  position: relative;
  padding-inline-start: 1.6rem;
  font-size: .975rem;
  line-height: 1.7;
  color: var(--muted);
}
.pro-con li::before {
  position: absolute;
  inset-inline-start: 0;
  font-weight: 700;
}
.pro-con .is-pro::before { content: "+"; color: var(--good); }
.pro-con .is-con::before { content: "−"; color: var(--bad); }

/* Homepage explainer tiles ------------------------------------------------
   The kind tiles carry a drawing, so they need the drawing to sit flush at
   the top of the panel rather than inside its padding. */
/* Five kinds, so five columns where they fit — auto-fit on the generic
   .cols-3 gave four and left the fifth orphaned on its own row. */
.kind-grid { align-items: stretch; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12.5rem), 1fr)); }

/* Nine services divide by three, never by four. Fixed columns rather than
   auto-fit for the same reason: a lone tile on the last row reads as a bug. */
.service-grid { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 60rem) { .service-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 34rem) { .service-grid { grid-template-columns: 1fr; } }

.kind-tile {
  display: block;
  color: inherit;
  text-decoration: none;
}
.kind-tile .pt-diagram {
  width: 100%;
  height: auto;
  color: var(--text);
}
.kind-tile:hover strong { color: var(--accent); }

.service-tile {
  display: block;
  color: inherit;
  text-decoration: none;
}
.service-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 2.5rem;
  block-size: 2.5rem;
  border-radius: 0.7rem;
  margin-block-end: 0.75rem;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  transition: background 0.2s ease, transform 0.2s ease;
}
.service-tile:hover .service-icon {
  background: color-mix(in srgb, var(--accent) 22%, transparent);
  transform: translateY(-2px);
}
.service-tile:hover strong { color: var(--accent); }

/* Every icon inherits the text colour and the stroke set in icons.py. */
.icon { flex: none; vertical-align: -0.15em; }

/* Sell-page photo previews ------------------------------------------------ */
.photo-previews {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr));
  gap: 0.5rem;
  list-style: none;
  padding: 0;
  margin: 0;
}
.photo-previews li {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: 0.6rem;
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--surface);
}
.photo-previews img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  display: block;
}
.photo-first {
  position: absolute;
  inset-block-start: 0.3rem;
  inset-inline-start: 0.3rem;
  font-size: 0.7rem;
  padding: 0.1rem 0.4rem;
  border-radius: 0.4rem;
  background: var(--accent);
  color: #fff;
}
[data-photo-count].over { color: var(--bad, #ef4444); }

/* Used-car photographs ---------------------------------------------------- */
.listing-card { display: flex; flex-direction: column; }
.listing-card h2 a { color: inherit; text-decoration: none; }
.listing-card:hover h2 a { color: var(--accent); }
.listing-cover {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: 0.7rem;
  overflow: hidden;
  background: var(--bg);
  border: 1px solid var(--border);
}
.listing-cover img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; }
.listing-cover-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  block-size: 100%;
  color: var(--muted);
}
.listing-count {
  position: absolute;
  inset-block-end: 0.4rem;
  inset-inline-end: 0.4rem;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.75rem;
  padding: 0.15rem 0.45rem;
  border-radius: 0.4rem;
  background: rgb(0 0 0 / 0.6);
  color: #fff;
}

.gallery-main {
  display: block;
  border-radius: 0.9rem;
  overflow: hidden;
  border: 1px solid var(--border);
}
.gallery-main img { inline-size: 100%; block-size: auto; display: block; }
.gallery-thumbs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(5rem, 1fr));
  gap: 0.5rem;
  list-style: none;
  padding: 0;
  margin-block-start: 0.5rem;
}
.gallery-thumbs img {
  inline-size: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 0.5rem;
  border: 1px solid var(--border);
  display: block;
  transition: border-color 0.2s ease;
}


/* ── Sign-in / register dialog ───────────────────────────────────────────────
   A native <dialog> rather than a hand-built overlay: focus trapping, Escape
   to close and the ::backdrop all come from the browser, so there is nothing
   here to get wrong that a div-based modal usually does.
   ─────────────────────────────────────────────────────────────────────── */
/* A <dialog> is centred by the user agent with `position: fixed` and auto
   margins. Overriding that to `position: relative` dropped it back into the
   document flow, which is why it opened pinned to the top corner instead of
   in the middle of the screen. The close button still positions against it:
   a fixed dialog is already a containing block. */
.auth-modal {
  width: min(26rem, calc(100vw - 2rem));
  margin: auto;
  padding: 2rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--fg);
  box-shadow: 0 24px 64px -16px rgba(16, 24, 40, .28);
}
.auth-modal::backdrop {
  background: color-mix(in srgb, var(--navy) 55%, transparent);
  backdrop-filter: blur(2px);
}
.auth-modal-close {
  position: absolute;
  inset-block-start: 1rem;
  inset-inline-end: 1rem;
  background: none;
  border: none;
  color: var(--muted);
  font-size: 1rem;
  cursor: pointer;
  padding: .25rem;
  line-height: 1;
}
.auth-modal-close:hover { color: var(--fg); }

/* Tabs that read as tabs. As two filled pills the inactive one looked like a
   second action, and the active one was a solid green button directly above
   a solid green submit button that said the same word — so the dialog
   offered "دخول" twice and neither looked like the one to press. */
.auth-tabs {
  display: flex;
  gap: 1.25rem;
  margin-block-end: 1.5rem;
  border-block-end: 1px solid var(--border);
}
.auth-tab {
  padding: 0 0 .75rem;
  border: 0;
  border-block-end: 2px solid transparent;
  margin-block-end: -1px;
  background: none;
  color: var(--muted);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: color .15s var(--ease), border-color .15s var(--ease);
}
.auth-tab:hover { color: var(--fg); }
.auth-tab.is-active { color: var(--accent); border-block-end-color: var(--accent); }

/* What the visitor is signing into. A dialog that asks for a phone number
   without naming the thing asking is a dialog people close. */
.auth-intro { margin-block-end: 1.5rem; }
.auth-intro .logo { margin-block-end: .6rem; }
.auth-intro p { color: var(--muted); font-size: .9rem; }

.auth-modal .btn { width: 100%; }

.auth-google { display: flex; justify-content: center; }
.auth-divider {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-block: 1.25rem;
  color: var(--faint);
  font-size: .85rem;
}
.auth-divider::before, .auth-divider::after {
  content: "";
  flex: 1;
  block-size: 1px;
  background: var(--border);
}
.gallery-thumbs a:hover img { border-color: var(--accent); }

/* ── The assistant ─────────────────────────────────────────────────────────
   A conversation, not a form. The question sits where the visitor last typed
   and the answers stack above it, because a reply that appears above the
   thing you just used is a reply you have to go looking for.
   ─────────────────────────────────────────────────────────────────────── */

.chat {
  max-width: 46rem;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  /* Tall enough that the composer sits near the bottom of the screen from the
     first visit, so the page does not visibly rearrange after one message. */
  min-height: min(72vh, 42rem);
}

.chat-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; margin-block-end: 1.25rem;
}

.chat-thread {
  flex: 1;
  display: flex; flex-direction: column; gap: .85rem;
  margin-block-end: 1rem;
  min-width: 0;
}

.chat-welcome { margin: auto 0; text-align: center; padding-block: 2rem; }
.chat-examples {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center;
}
.chat-examples .chip { font-weight: 400; text-align: start; }

/* A bubble carries who said it in its shape and its side, not in a label:
   a thread of twenty "Zakki:" prefixes is noise the alignment already says. */
.bubble {
  max-width: 85%;
  padding: .8rem 1.05rem;
  border-radius: var(--radius-lg);
  line-height: 1.85;
  animation: bubble-in .25s var(--ease-soft) both;
  min-width: 0;
  overflow-wrap: anywhere;
}
.bubble p { margin: 0; }
/* Mine on the reading-end side, Zakki's on the reading-start side — the same
   way round as every Arabic messaging app, which is where the reader's
   expectation comes from. */
.bubble.is-me {
  align-self: flex-end;
  background: var(--accent);
  color: var(--on-accent);
  border-end-end-radius: var(--radius-sm);
}
.bubble.is-zakki {
  align-self: flex-start;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-end-start-radius: var(--radius-sm);
}
/* An honest "I don't know" is worth marking. Amber, not red: it is not an
   error, it is the assistant declining to guess. */
.bubble.is-zakki.is-unsure {
  border-inline-start: 3px solid #f59e0b;
  background: color-mix(in srgb, #f59e0b 6%, var(--surface));
}
.bubble-cars { list-style: none; margin: .7rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem; }
.bubble-hint { margin-block-start: .6rem !important; font-size: .82rem; color: var(--muted); }

@keyframes bubble-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

/* Zakki thinking. Three dots, because a spinner on a three-second wait reads
   as an error and this reads as a person typing. */
.bubble.is-typing { display: flex; gap: .25rem; padding-block: 1.05rem; }
.bubble.is-typing span {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--muted);
  animation: typing 1.2s var(--ease-soft) infinite;
}
.bubble.is-typing span:nth-child(2) { animation-delay: .15s; }
.bubble.is-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes typing {
  0%, 60%, 100% { opacity: .25; transform: translateY(0); }
  30%           { opacity: 1;   transform: translateY(-3px); }
}
@media (prefers-reduced-motion: reduce) {
  .bubble { animation: none; }
  .bubble.is-typing span { animation: none; opacity: .5; }
}

/* The composer: one rounded field that grows with the text, the send button
   inside it. Sticky, so a long thread never pushes it off the screen. */
.chat-form {
  position: sticky;
  inset-block-end: 1rem;
  display: flex; align-items: flex-end; gap: .5rem;
  padding: .45rem .45rem .45rem .9rem;
  border: 1px solid var(--border);
  border-radius: 1.5rem;
  background: var(--surface);
  box-shadow: var(--shadow-md);
  transition: border-color .2s var(--ease-soft), box-shadow .2s var(--ease-soft);
}
.chat-form:focus-within { border-color: var(--accent); }
.chat-input {
  flex: 1; min-width: 0;
  border: 0; background: none; color: inherit;
  font: inherit; line-height: 1.7;
  padding: .5rem 0;
  resize: none;
  max-height: 9rem;
}
.chat-input:focus { outline: none; }
.chat-send {
  flex-shrink: 0;
  display: grid; place-items: center;
  width: 2.4rem; height: 2.4rem;
  border: 0; border-radius: 50%;
  background: var(--accent); color: var(--on-accent);
  cursor: pointer;
  transition: transform .15s var(--ease-soft), opacity .15s var(--ease-soft);
}
.chat-send:hover { transform: scale(1.06); }
.chat-send:disabled { opacity: .45; cursor: default; transform: none; }
/* The arrow points the way the text runs. */
.chat-send svg { transform: scaleX(-1); }

.chat-note { margin-block-start: .85rem; text-align: center; font-size: .8rem; }

@media (max-width: 560px) {
  .bubble { max-width: 92%; }
  .chat { min-height: 70vh; }
}

/* ── Reveal on scroll ──────────────────────────────────────────────────────
   Sections arrive as they are scrolled to. The elements start visible in the
   stylesheet and are hidden by the script only once it is running, so a
   reader with no JavaScript — or with a script that failed to load — gets the
   whole page rather than a column of blank space.
   ─────────────────────────────────────────────────────────────────────── */

[data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .6s var(--ease-soft), transform .6s var(--ease-soft);
  /* A section that has scrolled past should not animate again on the way
     back up — motion that repeats is motion that nags. */
  will-change: opacity, transform;
}
[data-reveal].is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* ── The five kinds ────────────────────────────────────────────────────────
   Was five full-page panels printed one after another, which put the answer
   six screens below the question. Now a row of cards carrying the line that
   distinguishes each kind, with the explanation behind a disclosure.
   ─────────────────────────────────────────────────────────────────────── */

.kind-list { display: grid; gap: 1rem; }
@media (min-width: 900px) { .kind-list { grid-template-columns: repeat(2, 1fr); } }

.kind-card { display: flex; flex-direction: column; gap: .85rem; }

/* The drawing sits beside the name rather than over a column of its own. At
   card size it is an identifying glyph — plug, battery, engine — not a
   diagram somebody studies. */
.kind-card-head { display: flex; align-items: center; gap: 1rem; }
.kind-card-head .pt-diagram { width: 7.5rem; flex: none; }

.kind-line { font-size: 1.05rem; }

.kind-facts { display: grid; gap: .6rem; margin: 0; }
.kind-facts > div {
  padding: .7rem .9rem;
  border-radius: var(--radius-sm);
  border-inline-start: 3px solid var(--accent);
  background: color-mix(in srgb, var(--accent) 5%, var(--surface-2));
}
.kind-facts > div.is-warn {
  border-inline-start-color: var(--amber);
  background: color-mix(in srgb, var(--amber) 6%, var(--surface-2));
}
.kind-facts dt { font-size: .8rem; font-weight: 700; color: var(--muted); }
.kind-facts dd { margin: .2rem 0 0; font-size: .95rem; }

.kind-more { border-block-start: 1px solid var(--border); }

/* The card's own action, pinned to the bottom so a row of cards of different
   heights still lines its buttons up. Start-aligned, not centred: a centred
   button in a left-aligned card reads as a different kind of control. */
.kind-cta { margin-block-start: auto; padding-block-start: .25rem; }
.kind-cta .btn { align-self: start; }
.kind-more summary {
  cursor: pointer;
  padding-block: .5rem;
  color: var(--accent);
  font-size: .95rem;
  font-weight: 700;
  /* The default triangle sits on the wrong side in RTL and cannot be moved,
     so it is replaced with one that follows the writing direction. */
  list-style: none;
}
.kind-more summary::-webkit-details-marker { display: none; }
.kind-more summary::before {
  content: "+";
  display: inline-block;
  inline-size: 1.1rem;
  font-weight: 700;
}
.kind-more[open] summary::before { content: "−"; }
.kind-more-body { padding-block-start: .5rem; color: var(--muted); }

/* ── The verdict ───────────────────────────────────────────────────────────
   One number, large, before any of the working. The calculator had the
   saving as a badge under the second of two big figures, which left the
   reader subtracting 2,670 from 604 to find the answer the page had already
   computed. The supporting numbers still follow — they are the evidence, not
   the result.
   ─────────────────────────────────────────────────────────────────────── */

.verdict {
  padding: 1.75rem 2rem;
  border-radius: var(--radius);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  background:
    radial-gradient(90% 140% at 100% 0%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 70%),
    var(--surface);
}
.verdict-label { color: var(--muted); font-size: .95rem; }
.verdict-figure {
  font-size: clamp(2.6rem, 7vw, 4.25rem);
  line-height: 1.1;
  color: var(--accent);
}
.verdict-unit { font-size: .32em; font-weight: 500; color: var(--muted); }
.verdict-sub { margin-block-start: .5rem; color: var(--muted); max-width: 34rem; }

/* Charger groups. The reason a set of chargers is in a group is stated on the
   group, so the cards under it carry only what differs between them. */
.charger-group { margin-block-start: 2.5rem; }
.charger-kw { font-size: 1.5rem; font-weight: 700; color: var(--accent); margin-block-start: .35rem; }

/* ── A question in the list ────────────────────────────────────────────────
   The answer count is the second thing read, so it sits at the end of the row
   rather than under the title as faint text. An unanswered question says so
   in words: "0" rendered the same way as "1" made an open question look
   closed, which is how a question stays open.
   ─────────────────────────────────────────────────────────────────────── */

.q-card {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 1.1rem 1.35rem;
}
.q-main { flex: 1; display: flex; align-items: baseline; gap: .75rem; flex-wrap: wrap; }
.q-card:hover .h4 { color: var(--accent); }

.q-count {
  flex: none;
  display: grid;
  justify-items: center;
  min-inline-size: 4rem;
  padding: .45rem .6rem;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--muted);
  font-size: .8rem;
  line-height: 1.3;
}
.q-count-n { font-size: 1.15rem; font-weight: 700; color: var(--accent); }
.q-count.is-open {
  background: color-mix(in srgb, var(--amber) 10%, transparent);
  color: var(--amber);
  font-weight: 700;
}

/* The standalone sign-in and register pages. Same card as the dialog, because
   they are the same step — a visitor who lands here from a shared link should
   not get a plainer version of it. */
.auth-page {
  width: min(26rem, calc(100vw - 2.5rem));
  margin-inline: auto;
  padding: 2rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 8px 24px -12px rgba(16, 24, 40, .10);
}
[data-theme="dark"] .auth-page { box-shadow: none; }
.auth-page .btn { width: 100%; }
.link { color: var(--accent); font-weight: 600; }
.link:hover { text-decoration: underline; }

/* The cost panel under a centred hero. At full page width its two bars ran
   1,100px and stopped reading as a comparison of two figures. */
.hero-panel { max-width: 34rem; margin-inline: auto; padding: 1.75rem; text-align: start; }

/* ── Zakki ─────────────────────────────────────────────────────────────────
   A voice, not a mascot: one small badge above the heading rather than an
   avatar repeated through the page. The warmth lives in what Zakki writes,
   not in how much screen space the badge takes.
   ─────────────────────────────────────────────────────────────────────── */

.zakki-badge {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-block-end: 1rem;
  color: var(--accent);
  font-weight: 600;
  font-size: .95rem;
}
.zakki-avatar {
  display: grid;
  place-items: center;
  inline-size: 1.75rem;
  block-size: 1.75rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  font-size: 1rem;
}

/* ══ EV House — page components ════════════════════════════════════════════
   Built on the tokens at the top of this file. Nothing below picks its own
   colour, radius or shadow.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Section heads ─────────────────────────────────────────────────────── */
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-4); margin-block-end: var(--s-6); flex-wrap: wrap; }
.section-head .h2 { margin-block-start: var(--s-1); }
.section-head-center { flex-direction: column; align-items: center; text-align: center; }

/* ── Home hero ─────────────────────────────────────────────────────────── */
.home-hero { position: relative; overflow: hidden; padding-block: var(--s-16) var(--s-8); border-block-end: 1px solid var(--border); background: var(--surface); }
@media (min-width: 768px) { .home-hero { padding-block: calc(var(--s-24) + var(--s-2)) var(--s-12); } }
/* A drafting grid fading out from the centre, and one soft brand light above
   the headline. Enough depth to feel built; not a gradient poster. */
.home-hero-grid {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(to right, color-mix(in srgb, var(--fg) 5%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in srgb, var(--fg) 5%, transparent) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000 20%, transparent 75%);
}
.home-hero::before {
  content: ""; position: absolute; inset-inline: 0; inset-block-start: -18rem; margin-inline: auto;
  inline-size: min(56rem, 100%); block-size: 32rem; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--b-400) 22%, transparent), transparent);
  filter: blur(8px);
}
.home-hero-inner { position: relative; display: grid; justify-items: center; text-align: center; }
.home-title {
  max-inline-size: 18ch; margin-block-start: var(--s-6);
  font-size: var(--text-display); font-weight: 700; line-height: 1.2; color: var(--fg);
}
.home-title-accent { display: block; color: var(--primary); }
.home-lede { max-inline-size: 38rem; margin-block-start: var(--s-5); font-size: var(--text-md); line-height: 1.85; color: var(--muted); text-wrap: balance; }
.hero-pill {
  display: inline-flex; align-items: center; gap: var(--s-2);
  min-height: 2rem; padding: 0 var(--s-3);
  border-radius: var(--r-full); border: 1px solid var(--primary-border); background: var(--primary-soft);
  color: var(--primary); font-size: var(--text-sm); font-weight: 500;
  transition: border-color var(--dur) var(--ease-soft);
}
.hero-pill:hover { border-color: var(--primary); }
.hero-pill-dot { inline-size: .45rem; block-size: .45rem; border-radius: var(--r-full); background: currentColor; box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 18%, transparent); }
.hero-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-3); margin-block-start: var(--s-8); }
.hero-quick { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-2); margin-block-start: var(--s-6); }
@media (max-width: 480px) { .hero-cta .btn { flex: 1 1 100%; } }

/* ── Stat strip ────────────────────────────────────────────────────────── */
.stat-strip {
  position: relative; display: grid; grid-template-columns: repeat(2, 1fr);
  margin-block-start: var(--s-12); border: 1px solid var(--border); border-radius: var(--r-lg);
  background: var(--surface); box-shadow: var(--shadow-sm); overflow: hidden;
}
@media (min-width: 768px) { .stat-strip { grid-template-columns: repeat(4, 1fr); } }
.stat-strip > div { padding: var(--s-5) var(--s-6); border-inline-start: 1px solid var(--border); border-block-start: 1px solid var(--border); margin-inline-start: -1px; margin-block-start: -1px; }
.stat-strip dt { font-size: var(--text-sm); color: var(--muted); }
.stat-strip dd { margin: var(--s-1) 0 0; font-size: var(--text-2xl); font-weight: 600; color: var(--fg); line-height: 1.2; }

/* ── Ad areas ──────────────────────────────────────────────────────────── */
.ad-banner {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap;
  padding: var(--s-5) var(--s-6); border-radius: var(--r-lg);
  border: 1px solid var(--border); background: var(--surface-2);
  transition: border-color var(--dur) var(--ease-soft);
}
.ad-banner:hover { border-color: var(--border-strong); }
.ad-banner img { inline-size: 100%; border-radius: var(--r-md); }
.ad-banner:has(img) { display: grid; padding: var(--s-3); }
.ad-banner-copy { display: grid; gap: var(--s-1); }
.ad-label { font-size: var(--text-xs); font-weight: 600; color: var(--faint); }
.ad-house { border-style: dashed; background: transparent; }

/* ── Listing tiles ─────────────────────────────────────────────────────── */
.listing-grid { list-style: none; padding: 0; display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); }
.listing-tile {
  display: flex; flex-direction: column; block-size: 100%;
  border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); overflow: hidden;
  box-shadow: var(--shadow-xs);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.listing-tile:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--border-strong); }
.listing-tile.is-featured { border-color: var(--primary-border); box-shadow: 0 0 0 1px var(--primary-border), var(--shadow-sm); }
.listing-tile-media { position: relative; display: grid; place-items: center; aspect-ratio: 3 / 2; background: var(--surface-2); color: var(--faint); }
.listing-tile-media img { inline-size: 100%; block-size: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease); }
.listing-tile:hover .listing-tile-media img { transform: scale(1.03); }
.listing-tile-flag { position: absolute; inset-block-start: var(--s-3); inset-inline-start: var(--s-3); }
.listing-tile-body { display: grid; gap: var(--s-2); padding: var(--s-4); flex: 1; }
.listing-tile-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.listing-tile-meta { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-3); font-size: var(--text-sm); color: var(--muted); }
.listing-tile-meta > span + span::before { content: "·"; margin-inline-end: var(--s-3); color: var(--n-300); }
.listing-tile-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); margin-block-start: auto; padding-block-start: var(--s-3); border-block-start: 1px solid var(--border); }
.listing-tile-price { font-size: var(--text-lg); font-weight: 600; color: var(--fg); }

.promo-strip {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap;
  margin-block-start: var(--s-6); padding: var(--s-5) var(--s-6);
  border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface-2);
}

/* ── Bento ─────────────────────────────────────────────────────────────── */
.bento { list-style: none; padding: 0; display: grid; gap: var(--s-3); grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); }
.bento-card {
  display: grid; align-content: start; gap: var(--s-2); block-size: 100%;
  padding: var(--s-5); border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface);
  transition: border-color var(--dur) var(--ease-soft), background var(--dur) var(--ease-soft);
}
a.bento-card:hover { border-color: var(--border-strong); background: var(--surface-2); }
.bento-icon {
  display: grid; place-items: center; inline-size: 2.5rem; block-size: 2.5rem; margin-block-end: var(--s-2);
  border-radius: var(--r-md); border: 1px solid var(--primary-border); background: var(--primary-soft); color: var(--primary);
}

/* ── Feature split: cost proof + Zakki ─────────────────────────────────── */
.feature-split { display: grid; gap: var(--s-4); }
@media (min-width: 900px) { .feature-split { grid-template-columns: 1.2fr 1fr; } }
.proof-saving { margin-block: var(--s-5) var(--s-2); font-size: var(--text-lg); color: var(--muted); }
.proof-saving .tnum { font-size: var(--text-2xl); font-weight: 700; color: var(--primary); }
.zakki-card { position: relative; display: grid; align-content: start; gap: var(--s-2); overflow: hidden; background: var(--n-900); border-color: var(--n-800); color: #eef0f3; }
.zakki-card .muted { color: #a3abb6; }
.zakki-card .eyebrow { color: var(--b-300); }
.zakki-card::after { content: ""; position: absolute; inset-inline-end: -6rem; inset-block-end: -8rem; inline-size: 18rem; block-size: 18rem; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--b-400) 35%, transparent), transparent); pointer-events: none; }
.zakki-card .btn { justify-self: start; --btn-bg: var(--b-400); --btn-fg: #03140d; }
.zakki-card .btn:hover { --btn-bg: var(--b-300); }
.zakki-mark { display: grid; place-items: center; inline-size: 2.75rem; block-size: 2.75rem; border-radius: var(--r-md); background: color-mix(in srgb, var(--b-400) 16%, transparent); color: var(--b-300); margin-block-end: var(--s-2); }

/* ── Kind strip ────────────────────────────────────────────────────────── */
.kind-strip { list-style: none; padding: 0; display: grid; gap: var(--s-3); grid-template-columns: repeat(auto-fill, minmax(min(100%, 11rem), 1fr)); }
.kind-chip-card { display: grid; gap: var(--s-1); padding: var(--s-4); border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); transition: border-color var(--dur) var(--ease-soft); }
.kind-chip-card:hover { border-color: var(--primary-border); }
.kind-chip-card .pt-diagram { max-inline-size: 8rem; margin-block-end: var(--s-2); }

/* ── CTA band ──────────────────────────────────────────────────────────── */
.cta-band {
  display: grid; gap: var(--s-6); align-items: center;
  padding: var(--s-10) var(--s-8); border-radius: var(--r-xl);
  border: 1px solid var(--border); background: var(--surface);
  background-image: radial-gradient(ellipse 60% 120% at 100% 0%, var(--primary-soft), transparent 70%);
  box-shadow: var(--shadow-sm);
}
@media (min-width: 900px) { .cta-band { grid-template-columns: 1.4fr auto; } }

/* ── About ─────────────────────────────────────────────────────────────── */
.about-hero { padding-block-end: var(--s-10); }
.about-hero .home-title { max-inline-size: 22ch; font-size: var(--text-3xl); }
.about-split { display: grid; gap: var(--s-6); }
@media (min-width: 900px) { .about-split { grid-template-columns: 1fr 1.3fr; gap: var(--s-16); } }
.principles { list-style: none; padding: 0; display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
.principles .panel { display: grid; gap: var(--s-2); align-content: start; }

/* ── Contact ───────────────────────────────────────────────────────────── */
.contact-layout { display: grid; gap: var(--s-6); align-items: start; }
@media (min-width: 900px) { .contact-layout { grid-template-columns: 1.5fr 1fr; } }
.contact-list { list-style: none; padding: 0; display: grid; gap: var(--s-3); }
.contact-list li { display: flex; align-items: center; gap: var(--s-3); color: var(--muted); }
.contact-shortcut { display: flex; gap: var(--s-4); align-items: flex-start; }
.contact-shortcut .bento-icon { margin: 0; flex: none; }
.hp-wrap { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); }

/* ── Legal ─────────────────────────────────────────────────────────────── */
.legal-layout { display: grid; gap: var(--s-8); align-items: start; }
@media (min-width: 1000px) { .legal-layout { grid-template-columns: 15rem 1fr; gap: var(--s-12); } }
.legal-toc { padding: var(--s-5); border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); }
@media (min-width: 1000px) { .legal-toc { position: sticky; inset-block-start: calc(var(--header-h) + var(--s-6)); } }
.legal-toc ol { margin: var(--s-3) 0 0; padding-inline-start: var(--s-5); display: grid; gap: var(--s-1); font-size: var(--text-sm); }
.legal-toc a { color: var(--muted); }
.legal-toc a:hover { color: var(--primary); }
.legal-doc { max-inline-size: 46rem; }
.legal-doc h2 { font-size: var(--text-xl); margin-block: var(--s-10) var(--s-3); padding-block-start: var(--s-2); }
.legal-doc h2:first-child { margin-block-start: 0; }
.legal-doc h3 { font-size: var(--text-md); margin-block: var(--s-5) var(--s-2); }
.legal-doc p, .legal-doc li { color: var(--muted); line-height: 1.9; }
.legal-doc p + p { margin-block-start: var(--s-3); }
.legal-doc ul { margin-block: var(--s-3); padding-inline-start: var(--s-5); display: grid; gap: var(--s-2); }
.legal-doc strong { color: var(--fg); font-weight: 600; }

/* ── Boost ─────────────────────────────────────────────────────────────── */
.boost-listing { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); }
.boost-packages { border: 0; padding: 0; display: grid; gap: var(--s-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }
.boost-package { position: relative; cursor: pointer; }
.boost-package input { position: absolute; opacity: 0; }
.boost-package-body {
  display: grid; gap: var(--s-1); padding: var(--s-5); block-size: 100%;
  border: 1px solid var(--border-strong); border-radius: var(--r-lg); background: var(--surface);
  transition: border-color var(--dur-fast) var(--ease-soft), box-shadow var(--dur-fast) var(--ease-soft);
}
.boost-package:hover .boost-package-body { border-color: var(--n-400); }
.boost-package input:checked + .boost-package-body { border-color: var(--primary); box-shadow: 0 0 0 3px var(--ring); }
.boost-package input:focus-visible + .boost-package-body { box-shadow: 0 0 0 3px var(--ring); }
.boost-price { font-size: var(--text-2xl); font-weight: 700; color: var(--fg); }

.my-listings { list-style: none; padding: 0; display: grid; }
.my-listings li { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); flex-wrap: wrap; padding-block: var(--s-3); border-block-start: 1px solid var(--border); }
.my-listings li:first-child { border-block-start: 0; }

.glossary-row { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: 0 0 var(--s-4); }
.glossary-row > div { display: inline-flex; align-items: center; gap: var(--s-2); padding: var(--s-1) var(--s-3); border: 1px solid var(--border); border-radius: var(--r-full); background: var(--surface); font-size: var(--text-sm); }
.glossary-row dt { font-weight: 600; color: var(--primary); }
.glossary-row dd { margin: 0; color: var(--muted); }

/* ── Header on small screens ───────────────────────────────────────────────
   At 390px the logo, the two quick links, theme, cart, sign-in and the menu
   toggle added up to 460px and pushed the toggle off-screen — the one control
   a phone user needs to reach the rest of the site. Tightened rather than
   removed: the roadside link in particular stays, because it is used by
   somebody standing next to a stopped car.
   ─────────────────────────────────────────────────────────────────────── */
@media (max-width: 560px) {
  .site-header .wrap { gap: var(--s-2); }
  .header-actions { gap: var(--s-1); }
  .header-actions .btn { min-height: 2.25rem; padding: 0 var(--s-3); }
  .icon-group > * { min-width: 2rem; height: 2rem; padding-inline: .375rem; }
  .header-cta { gap: 0; }
  .header-cta > a { padding-inline: .375rem; }
  .nav-toggle { width: 2.25rem; height: 2.25rem; }
}
@media (max-width: 420px) {
  /* The mark alone is still the logo; the wordmark returns in the footer. */
  .site-header .logo-text { display: none; }
}

/* A listing photo that fails to load becomes the same placeholder as a
   listing with no photo, not a broken-image icon and a line of alt text. */
.listing-tile-media.is-broken img { display: none; }

/* ── Vehicle card ──────────────────────────────────────────────────────────
   Hierarchy, top to bottom: the car (brand small, model large, trim and year
   quiet), then a two-by-two grid of the figures that separate one EV from
   another, then the price. Model names are Latin and set LTR even on an
   Arabic page — a model name is a name, not a sentence.
   ─────────────────────────────────────────────────────────────────────── */
.vcard {
  position: relative; display: flex; flex-direction: column; block-size: 100%;
  border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface);
  overflow: hidden; box-shadow: var(--shadow-xs);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.vcard:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--border-strong); }
.vcard:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px var(--ring); }

.vcard-media {
  position: relative; display: grid; place-items: center; aspect-ratio: 16 / 10;
  background: linear-gradient(160deg, var(--surface-2), var(--surface-3));
  overflow: hidden;
}
.vcard-media img { inline-size: 100%; block-size: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease); }
.vcard:hover .vcard-media img { transform: scale(1.03); }
.vcard-placeholder { display: grid; justify-items: center; gap: var(--s-1); color: var(--n-400); }
.vcard-placeholder span { font-size: var(--text-xl); font-weight: 700; letter-spacing: .02em; color: var(--n-300); }
.vcard-flags { position: absolute; inset-block-start: var(--s-3); inset-inline: var(--s-3); display: flex; gap: var(--s-2); flex-wrap: wrap; }

.vcard-body { display: flex; flex-direction: column; gap: var(--s-1); padding: var(--s-4) var(--s-5) var(--s-5); flex: 1; }
.vcard-brand { font-size: var(--text-xs); font-weight: 600; color: var(--faint); text-align: start; }
.vcard-title { font-size: var(--text-lg); font-weight: 600; line-height: 1.3; text-align: start; }
.vcard-link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.vcard-link:focus-visible { outline: none; }
.vcard-sub { font-size: var(--text-sm); color: var(--muted); text-align: start; }

.vcard-specs { list-style: none; padding: 0; margin: var(--s-3) 0 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; }
.vcard-specs li { display: grid; gap: 2px; padding: var(--s-2) var(--s-3); background: var(--surface); }
.vcard-spec-label { display: inline-flex; align-items: center; gap: var(--s-1); font-size: var(--text-xs); color: var(--faint); }
.vcard-spec-value { font-size: var(--text-md); font-weight: 600; color: var(--fg); direction: ltr; text-align: end; }
.vcard-spec-value small { margin-inline-start: 2px; font-size: var(--text-xs); font-weight: 500; color: var(--faint); }
.vcard-spec-note { font-size: 10px; color: var(--warning); }

.vcard-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); margin-block-start: auto; padding-block-start: var(--s-4); }
.vcard-price { font-size: var(--text-xl); font-weight: 700; color: var(--fg); line-height: 1.2; }
.vcard-price small { font-size: var(--text-sm); font-weight: 500; color: var(--faint); }
.vcard-go { display: grid; place-items: center; inline-size: 2.25rem; block-size: 2.25rem; border-radius: var(--r-full); border: 1px solid var(--border); color: var(--muted); transition: background var(--dur) var(--ease-soft), color var(--dur) var(--ease-soft); }
.vcard:hover .vcard-go { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }

.vcard-grid { list-style: none; padding: 0; display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 17.5rem), 1fr)); }

/* ── Breadcrumbs ───────────────────────────────────────────────────────── */
.breadcrumbs { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); font-size: var(--text-sm); color: var(--faint); }
.breadcrumbs a { color: var(--muted); }
.breadcrumbs a:hover { color: var(--primary); }

/* ── Vehicle detail ────────────────────────────────────────────────────── */
.vd-head { padding-block: var(--s-6) var(--s-8); border-block-end: 1px solid var(--border); background: var(--surface); }
.vd-head-grid { display: grid; gap: var(--s-6); margin-block-start: var(--s-5); align-items: center; }
@media (min-width: 960px) { .vd-head-grid { grid-template-columns: 1.15fr 1fr; gap: var(--s-12); } }
.vd-media {
  display: grid; place-items: center; aspect-ratio: 16 / 10; border-radius: var(--r-xl); overflow: hidden;
  border: 1px solid var(--border); background: linear-gradient(160deg, var(--surface-2), var(--surface-3));
}
.vd-media img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.vd-gallery { display: grid; gap: var(--s-3); min-inline-size: 0; }
.vd-thumbs { display: flex; gap: var(--s-2); overflow-x: auto; padding: 2px; margin: 0; list-style: none; scrollbar-width: thin; scroll-snap-type: x proximity; }
.vd-thumb {
  display: block; flex: none; inline-size: 88px; aspect-ratio: 16 / 10; padding: 0; overflow: hidden; cursor: pointer;
  border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface-2); opacity: .72;
  scroll-snap-align: start; transition: opacity .15s, border-color .15s, box-shadow .15s;
}
.vd-thumb img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.vd-thumb:hover, .vd-thumb.is-on { opacity: 1; }
.vd-thumb.is-on { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
.vd-thumb:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.vd-colours { margin-block-start: var(--s-3); }
.swatches { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); margin: var(--s-2) 0 0; padding: 0; list-style: none; }
.swatches li { display: flex; align-items: center; gap: var(--s-2); }
.swatches img, .swatch-dot {
  inline-size: 28px; block-size: 28px; border-radius: var(--r-full); object-fit: cover;
  border: 1px solid var(--border); box-shadow: inset 0 0 0 2px var(--surface);
}
.swatch-dot { display: inline-block; }
.feature-groups { display: grid; gap: var(--s-4); }
@media (min-width: 760px) { .feature-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .feature-groups { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.feature-list { display: grid; gap: var(--s-2); margin: 0; padding: 0; list-style: none; font-size: var(--text-sm); }
.feature-list li { display: flex; gap: var(--s-2); align-items: baseline; }
.feature-list svg { flex: none; color: var(--accent); transform: translateY(2px); }
.vd-summary { display: grid; gap: var(--s-2); align-content: start; }
.vd-brand { margin-block-start: var(--s-3); font-size: var(--text-sm); font-weight: 600; color: var(--faint); text-align: start; }
.vd-title { font-size: clamp(2rem, 4.2vw, 3rem); font-weight: 700; line-height: 1.1; letter-spacing: -.01em; text-align: start; }
.vd-trim { font-size: var(--text-md); color: var(--muted); text-align: start; }
.vd-price { margin-block-start: var(--s-4); padding-block-start: var(--s-4); border-block-start: 1px solid var(--border); }
.vd-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-block-start: var(--s-5); }
@media (max-width: 480px) { .vd-actions .btn { flex: 1 1 100%; } }

.vd-keys {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr));
  margin: var(--s-8) 0 0; border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; background: var(--border); gap: 1px;
}
.vd-keys > div { display: grid; gap: var(--s-1); padding: var(--s-4) var(--s-5); background: var(--surface); }
.vd-keys dt { display: inline-flex; align-items: center; gap: var(--s-2); font-size: var(--text-sm); color: var(--muted); }
.vd-keys dd { margin: 0; font-size: var(--text-2xl); font-weight: 700; line-height: 1.2; color: var(--fg); text-align: start; }
.vd-keys dd small { margin-inline-start: 3px; font-size: var(--text-sm); font-weight: 500; color: var(--faint); }

/* ── Tabs ──────────────────────────────────────────────────────────────── */
.tabs {
  display: flex; gap: var(--s-1); overflow-x: auto; scrollbar-width: none;
  border-block-end: 1px solid var(--border); margin-block-end: var(--s-6);
  scroll-snap-type: x proximity;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  flex: none; display: inline-flex; align-items: center; gap: var(--s-2);
  padding: var(--s-3) var(--s-3); margin-block-end: -1px; scroll-snap-align: start;
  border: 0; border-block-end: 2px solid transparent; background: none;
  color: var(--muted); font-size: var(--text-sm); font-weight: 500; white-space: nowrap; cursor: pointer;
  transition: color var(--dur-fast) var(--ease-soft), border-color var(--dur-fast) var(--ease-soft);
}
.tab:hover { color: var(--fg); }
.tab[aria-selected="true"] { color: var(--fg); font-weight: 600; border-block-end-color: var(--primary); }
.tab:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; border-radius: var(--r-xs); }
.tab-count { min-inline-size: 1.25rem; padding: 0 .35rem; border-radius: var(--r-full); background: var(--surface-3); color: var(--muted); font-size: var(--text-xs); text-align: center; }
.tab-panel { animation: panel-in var(--dur-slow) var(--ease); }
.tab-panel + .tab-panel:not([hidden]) { margin-block-start: var(--s-8); }
@keyframes panel-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

.vd-overview { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); align-items: start; }
.vd-missing { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin-block-start: var(--s-5); padding: var(--s-3) var(--s-4); border: 1px dashed var(--border-strong); border-radius: var(--r-md); font-size: var(--text-sm); color: var(--muted); }

/* ── Specification group ───────────────────────────────────────────────── */
.spec-group-title { display: flex; align-items: center; gap: var(--s-2); font-size: var(--text-md); font-weight: 600; }
.spec-group-icon { display: grid; place-items: center; inline-size: 1.75rem; block-size: 1.75rem; border-radius: var(--r-sm); background: var(--primary-soft); color: var(--primary); }
.spec-list { margin: var(--s-3) 0 0; display: grid; }
.spec-group-wide .spec-list { grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); column-gap: var(--s-8); }
.spec-list > div { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-4); padding-block: var(--s-3); border-block-end: 1px solid var(--border); }
.spec-list > div:last-child { border-block-end: 0; }
.spec-group-wide .spec-list > div:last-child { border-block-end: 1px solid var(--border); }
.spec-list dt { font-size: var(--text-sm); color: var(--muted); }
.spec-list dd { margin: 0; display: inline-flex; align-items: center; gap: var(--s-2); font-weight: 600; color: var(--fg); }
.spec-list dd small { font-size: var(--text-xs); font-weight: 500; color: var(--faint); }

.dealer-list { list-style: none; padding: 0; display: grid; }
.dealer-list li { display: flex; justify-content: space-between; gap: var(--s-4); padding-block: var(--s-3); border-block-start: 1px solid var(--border); }
.dealer-list li:first-child { border-block-start: 0; }
.dealer-list-price { text-align: end; }

/* On a phone the name and price lead; the photo (or its placeholder) follows. */
@media (max-width: 959px) {
  .vd-summary { order: -1; }
  .vd-media { aspect-ratio: 16 / 9; }
}

/* ── Catalogue ─────────────────────────────────────────────────────────────
   Desktop: a filter sidebar beside the results. Phone: the same sidebar as a
   bottom sheet, opened from the results bar. One form in both.
   ─────────────────────────────────────────────────────────────────────── */
.catalog-head { padding-block: var(--s-8) var(--s-6); border-block-end: 1px solid var(--border); background: var(--surface); }
.catalog-search { position: relative; display: flex; gap: var(--s-2); margin-block-start: var(--s-5); max-inline-size: 44rem; }
.catalog-search .input { padding-inline-start: 2.5rem; min-height: 3rem; }
.catalog-search .btn { min-height: 3rem; }
.catalog-search-icon { position: absolute; inset-inline-start: var(--s-3); inset-block: 0; display: grid; place-items: center; color: var(--faint); pointer-events: none; }

.catalog { display: grid; gap: var(--s-6); align-items: start; }
@media (min-width: 1024px) { .catalog { grid-template-columns: 17rem 1fr; gap: var(--s-8); } }

/* The filter sidebar as one panel.
   It used to be a bare stack of controls floating next to the results — no
   ground, no separation, so five unrelated groups read as one long form and
   the eye had nowhere to rest. A card, a divider per group, and a heading
   that stays put while the list scrolls. */
.filters {
  display: grid;
  gap: 0;
  align-content: start;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  overflow: hidden;
}
@media (min-width: 1024px) {
  .filters {
    position: sticky;
    inset-block-start: calc(var(--header-h) + var(--s-4));
    max-block-size: calc(100dvh - var(--header-h) - var(--s-8));
    overflow-y: auto;
  }
  .filters-close, .filters-open, .catalog-backdrop { display: none !important; }
}
.filters-head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-2);
  padding: var(--s-4);
  border-block-end: 1px solid var(--border);
  background: var(--surface-2);
  /* Stays visible while the groups scroll under it, so "clear all" is always
     one click away rather than a scroll away. */
  position: sticky;
  inset-block-start: 0;
  z-index: 2;
}
.filters-head .h4 { margin: 0; }
.filters-close { display: grid; place-items: center; inline-size: 2.25rem; block-size: 2.25rem; border: 1px solid var(--border); border-radius: var(--r-full); background: var(--surface); color: var(--muted); cursor: pointer; }
.filters-form { display: grid; gap: 0; }
/* One group, one band, one rule between them. Groups that merely sat 20px
   apart read as a single form with erratic spacing. */
.filter-group {
  border: 0; margin: 0;
  padding: var(--s-4);
  display: grid; gap: var(--s-3);
  border-block-end: 1px solid var(--border);
}
.filter-group legend, .filter-more summary {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--muted);
  text-transform: none;
  margin-block-end: 0;
  padding: 0;
}
.filter-group .field > span:first-child { font-size: var(--text-xs); font-weight: 700; color: var(--muted); }

.segmented { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.segmented span { font-size: var(--text-xs); }
.segmented label { position: relative; cursor: pointer; }
.segmented input { position: absolute; opacity: 0; }
.segmented span {
  display: inline-flex; align-items: center; min-height: 2rem; padding: 0 var(--s-3);
  border: 1px solid var(--border); border-radius: var(--r-full); background: var(--surface);
  font-size: var(--text-sm); color: var(--muted); transition: all var(--dur-fast) var(--ease-soft);
}
.segmented label:hover span { border-color: var(--border-strong); color: var(--fg); }
.segmented input:checked + span { border-color: var(--primary-border); background: var(--primary-soft); color: var(--primary); font-weight: 600; }
.segmented input:focus-visible + span { box-shadow: 0 0 0 3px var(--ring); }

.range-pair { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--s-2); color: var(--faint); }
/* Number inputs carry a spinner that eats a third of a narrow field and is
   useless when the step is 50,000. */
.range-pair input::-webkit-outer-spin-button,
.range-pair input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.range-pair input { -moz-appearance: textfield; text-align: center; }

.filter-more { padding: var(--s-4); border-block-end: 0; }
.filter-more summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; }
.filter-more summary::-webkit-details-marker { display: none; }
.filter-more summary::after { content: "+"; color: var(--faint); }
.filter-more[open] summary::after { content: "−"; }
.filter-more-body { display: grid; gap: var(--s-4); margin-block-start: var(--s-3); }
.filters-used { display: flex; align-items: center; gap: var(--s-2); padding: var(--s-3) var(--s-4); border: 1px solid var(--border); border-radius: var(--r-md); font-size: var(--text-sm); color: var(--muted); }
.filters-used:hover { color: var(--primary); border-color: var(--primary-border); }

.input-sm { min-height: 2.125rem; padding-block: 0; font-size: var(--text-sm); }
.results-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); flex-wrap: wrap; margin-block-end: var(--s-4); }
.results-count { font-size: var(--text-sm); color: var(--muted); }
.results-count strong { font-size: var(--text-lg); color: var(--fg); }
.active-filters { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-2); margin-block-end: var(--s-5); }
.pagination { display: flex; align-items: center; justify-content: center; gap: var(--s-4); margin-block-start: var(--s-8); }

@media (max-width: 1023px) {
  .filters {
    position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 60;
    max-block-size: 85dvh; overflow-y: auto;
    padding: var(--s-5) var(--s-5) calc(var(--s-5) + env(safe-area-inset-bottom));
    border-radius: var(--r-xl) var(--r-xl) 0 0; background: var(--surface); box-shadow: var(--shadow-lg);
    transform: translateY(105%); visibility: hidden;
    transition: transform var(--dur-slow) var(--ease), visibility var(--dur-slow);
  }
  .filters.is-open { transform: none; visibility: visible; }
  .filters::before { content: ""; justify-self: center; inline-size: 2.5rem; block-size: 4px; border-radius: var(--r-full); background: var(--border-strong); }
  .filters-actions { position: sticky; inset-block-end: calc(-1 * var(--s-5)); padding-block: var(--s-3); background: var(--surface); }
  .catalog-backdrop { position: fixed; inset: 0; z-index: 55; background: rgb(10 12 16 / .45); backdrop-filter: blur(2px); }
  body.has-sheet { overflow: hidden; }
}

/* An empty `dir="auto"` field resolves its direction from what is typed, so
   the icon's side and the text's start side are not guaranteed to match.
   Clearance on both sides keeps text from running under the icon either way. */
.catalog-search .input { padding-inline: 2.5rem; text-overflow: ellipsis; }

/* ── Comparison ────────────────────────────────────────────────────────────
   A real table (screen readers announce row and column for every cell), with
   the label column pinned and the car columns scrolling underneath it on a
   phone. The best value in a row gets a tint and a label — never colour
   alone — and only when at least two cars hold a figure that differs.
   ─────────────────────────────────────────────────────────────────────── */
/* The picker. Each slot is numbered and changes the comparison the moment it
   is chosen — there is no "compare" button to forget to press. */
.compare-picker { display: grid; gap: var(--s-3); margin-block-start: var(--s-5); align-items: end; }
@media (min-width: 768px) { .compare-picker { grid-template-columns: repeat(3, 1fr); } }

.compare-slot {
  display: flex; align-items: center; gap: var(--s-2);
  padding: var(--s-2) var(--s-2) var(--s-2) var(--s-3);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  transition: border-color var(--dur-fast) var(--ease-soft), box-shadow var(--dur-fast) var(--ease-soft);
  min-width: 0;
}
.compare-slot:focus-within { border-color: var(--primary-border); box-shadow: 0 0 0 3px var(--ring); }
.compare-slot.is-filled { border-color: var(--primary-border); background: var(--primary-soft); }
.compare-slot-num {
  flex-shrink: 0;
  display: grid; place-items: center;
  inline-size: 1.6rem; block-size: 1.6rem;
  border-radius: var(--r-full);
  background: var(--surface-3); color: var(--muted);
  font-size: var(--text-xs); font-weight: 700;
}
.compare-slot.is-filled .compare-slot-num { background: var(--primary); color: #fff; }
/* The select carries the slot's border, so it must not draw its own. */
.compare-slot .input {
  border: 0; background: none; box-shadow: none;
  flex: 1; min-width: 0; padding-inline: 0;
}
.compare-slot .input:focus { outline: none; box-shadow: none; }

.compare-toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); margin-block-end: var(--s-4); }

.switch { display: inline-flex; align-items: center; gap: var(--s-2); font-size: var(--text-sm); color: var(--muted); cursor: pointer; }
.switch input { position: absolute; opacity: 0; }
.switch-track { position: relative; inline-size: 2.25rem; block-size: 1.25rem; border-radius: var(--r-full); background: var(--surface-3); border: 1px solid var(--border-strong); transition: background var(--dur) var(--ease-soft); }
.switch-track::after { content: ""; position: absolute; inset-block-start: 2px; inset-inline-start: 2px; inline-size: .875rem; block-size: .875rem; border-radius: var(--r-full); background: var(--surface); box-shadow: var(--shadow-xs); transition: transform var(--dur) var(--ease); }
.switch input:checked + .switch-track { background: var(--primary); border-color: var(--primary); }
.switch input:checked + .switch-track::after { transform: translateX(calc(-1 * 1rem)); }
[dir="ltr"] .switch input:checked + .switch-track::after { transform: translateX(1rem); }
.switch input:focus-visible + .switch-track { box-shadow: 0 0 0 3px var(--ring); }

.compare-scroll {
  overflow: auto;
  /* Tall enough to scroll inside, so the pinned header stays useful: a header
     that scrolls away leaves you reading a column of numbers with no idea
     which car they belong to. */
  max-block-size: calc(100dvh - var(--header-h) - 8rem);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow-xs);
}
.compare-table { inline-size: 100%; min-inline-size: calc(10rem + var(--cars) * 13rem); border-collapse: separate; border-spacing: 0; }
.compare-table th, .compare-table td { padding: var(--s-3) var(--s-4); text-align: start; vertical-align: middle; border-block-end: 1px solid var(--border); }
.compare-table tbody tr:last-child > * { border-block-end: 0; }

/* Pinned label column. */
.compare-table th[scope="row"], .compare-corner {
  position: sticky; inset-inline-start: 0; z-index: 2;
  inline-size: 10rem; background: var(--surface);
  font-size: var(--text-sm); font-weight: 500; color: var(--muted);
  border-inline-end: 1px solid var(--border);
}
/* Pinned car header. The corner cell sits above both, so it needs to outrank
   the row labels and the header row it overlaps. */
.compare-car {
  position: sticky; inset-block-start: 0; z-index: 3;
  min-inline-size: 13rem; vertical-align: top;
  background: var(--surface);
  border-block-end: 1px solid var(--border);
}
.compare-corner { z-index: 4 !important; inset-block-start: 0; }
thead .compare-corner { position: sticky; }
.compare-car-name { display: grid; gap: 2px; margin-block-end: var(--s-2); padding-inline-end: var(--s-6); text-align: start; }
.compare-car-name:hover .h4 { color: var(--primary); }
.compare-remove { position: absolute; inset-block-start: var(--s-3); inset-inline-end: var(--s-3); display: grid; place-items: center; inline-size: 1.75rem; block-size: 1.75rem; border-radius: var(--r-full); color: var(--faint); font-size: 1.1rem; }
.compare-remove:hover { background: var(--surface-2); color: var(--danger); }

.compare-section-head th {
  position: sticky; inset-inline-start: 0;
  background: var(--surface-2);
  font-size: var(--text-xs); font-weight: 700; letter-spacing: .02em;
  color: var(--muted); padding-block: var(--s-2);
}
.compare-section-head .spec-group-icon { display: inline-grid; inline-size: 1.4rem; block-size: 1.4rem; vertical-align: middle; margin-inline-end: var(--s-1); }

.compare-value { display: inline-flex; align-items: baseline; gap: 3px; font-weight: 600; color: var(--fg); }
.compare-value small { font-size: var(--text-xs); font-weight: 500; color: var(--faint); }
.compare-unknown { font-size: var(--text-xs); color: var(--faint); }
/* The winning cell. A tinted background alone is easy to miss on a wide
   table, and impossible to see if you cannot distinguish the tint — so the
   marker is a border and a labelled flag as well as the colour. */
td.is-best {
  background: var(--primary-soft);
  /* Negative x, because the page is RTL and an inset shadow has no logical
     form — a positive offset would put the marker on the reading-end edge. */
  box-shadow: inset -2px 0 0 var(--primary);
}
td.is-best .compare-value { color: var(--primary); font-weight: 700; }
.best-flag {
  display: inline-flex; align-items: center; gap: 2px;
  margin-inline-start: var(--s-2);
  padding: 1px var(--s-2);
  border-radius: var(--r-full);
  background: var(--primary); color: #fff;
  font-size: 10px; font-weight: 700;
}
/* Zebra striping, so the eye tracks across a wide row without losing it. */
.compare-row:nth-child(even) > th[scope="row"],
.compare-row:nth-child(even) > td { background: var(--surface-2); }
.compare-row:nth-child(even) > td.is-best { background: var(--primary-soft); }
.compare-row:hover > th[scope="row"], .compare-row:hover > td { background: var(--surface-3); }
.compare-row:hover > td.is-best { background: var(--primary-soft); }
.compare-bar { display: block; margin-block-start: var(--s-2); block-size: 4px; border-radius: var(--r-full); background: var(--surface-3); overflow: hidden; }
.compare-bar span { display: block; block-size: 100%; border-radius: var(--r-full); background: var(--n-400); }
td.is-best .compare-bar span { background: var(--primary); }

[data-compare].diff-only .compare-row.is-same { display: none; }
[data-compare].diff-only .compare-section.is-all-same { display: none; }

/* ── Dealer workspace ──────────────────────────────────────────────────────
   Sidebar and content. The sidebar is quiet (no fills, one accent for the
   current page) so the numbers in the content are what the eye lands on.
   ─────────────────────────────────────────────────────────────────────── */
.workspace { display: grid; min-block-size: calc(100dvh - var(--header-h)); }
@media (min-width: 1024px) { .workspace { grid-template-columns: 16rem 1fr; } }

.ws-sidebar { border-block-end: 1px solid var(--border); background: var(--surface); padding: var(--s-4); }
@media (min-width: 1024px) {
  .ws-sidebar { border-block-end: 0; border-inline-end: 1px solid var(--border); padding: var(--s-6) var(--s-4); position: sticky; inset-block-start: var(--header-h); block-size: calc(100dvh - var(--header-h)); overflow-y: auto; }
}
.ws-account { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-2); margin-block-end: var(--s-4); }
.ws-account-name { font-weight: 600; line-height: 1.3; }
.ws-avatar { flex: none; display: grid; place-items: center; inline-size: 2.25rem; block-size: 2.25rem; border-radius: var(--r-md); background: var(--primary); color: var(--on-primary); font-weight: 700; }
.ws-avatar.is-sm { inline-size: 2rem; block-size: 2rem; border-radius: var(--r-full); background: var(--surface-3); color: var(--muted); font-size: var(--text-sm); }

.ws-nav { display: grid; gap: 2px; }
.ws-nav a { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-2) var(--s-3); border-radius: var(--r-md); color: var(--muted); font-size: var(--text-sm); font-weight: 500; transition: background var(--dur-fast) var(--ease-soft), color var(--dur-fast) var(--ease-soft); }
.ws-nav a:hover { background: var(--surface-2); color: var(--fg); }
.ws-nav a.is-current { background: var(--primary-soft); color: var(--primary); font-weight: 600; }
.ws-nav a span:not(.ws-badge) { flex: 1; }
.ws-nav-label { margin: var(--s-4) var(--s-3) var(--s-1); font-size: var(--text-xs); font-weight: 600; color: var(--faint); }
.ws-badge { min-inline-size: 1.25rem; padding: 0 .4rem; border-radius: var(--r-full); background: var(--primary); color: var(--on-primary); font-size: var(--text-xs); font-weight: 600; text-align: center; line-height: 1.25rem; }

@media (max-width: 1023px) {
  .ws-account { margin-block-end: var(--s-2); }
  .ws-nav { display: flex; overflow-x: auto; gap: var(--s-1); scrollbar-width: none; margin-inline: calc(-1 * var(--s-4)); padding-inline: var(--s-4); }
  .ws-nav::-webkit-scrollbar { display: none; }
  .ws-nav a { flex: none; white-space: nowrap; }
  .ws-nav-label { display: none; }
}

.ws-main { min-inline-size: 0; padding: var(--s-6) var(--s-4) var(--s-16); }
@media (min-width: 768px) { .ws-main { padding: var(--s-8) var(--s-8) var(--s-16); } }
@media (min-width: 1280px) { .ws-main { padding-inline: var(--s-12); } }
.ws-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap; margin-block-end: var(--s-6); }

.ws-attention { display: grid; gap: var(--s-2); margin-block-end: var(--s-6); }
.attention-item { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-4); border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); font-size: var(--text-sm); color: var(--fg); transition: border-color var(--dur-fast) var(--ease-soft); }
.attention-item:hover { border-color: var(--border-strong); }
.attention-item > span:nth-child(2) { flex: 1; }
.attention-icon { display: grid; place-items: center; inline-size: 2rem; block-size: 2rem; border-radius: var(--r-sm); }
.attention-icon.is-info { background: var(--info-soft); color: var(--info); }
.attention-icon.is-warn { background: var(--warning-soft); color: var(--warning); }

.kpis { display: grid; gap: var(--s-3); grid-template-columns: repeat(2, 1fr); margin-block-end: var(--s-6); }
@media (min-width: 1100px) { .kpis { grid-template-columns: repeat(4, 1fr); } }
.kpi { display: grid; gap: var(--s-1); padding: var(--s-5); border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-xs); }
.kpi-label { font-size: var(--text-sm); color: var(--muted); }
.kpi-value { font-size: var(--text-2xl); font-weight: 700; color: var(--fg); line-height: 1.2; }
.kpi-value small { margin-inline-start: 3px; font-size: var(--text-sm); font-weight: 500; color: var(--faint); }
.kpi-trend { justify-self: start; padding: 0 .4rem; border-radius: var(--r-sm); font-size: var(--text-xs); font-weight: 600; }
.kpi-trend.is-up { background: var(--success-soft); color: var(--success); }
.kpi-trend.is-down { background: var(--danger-soft); color: var(--danger); }

.ws-grid { display: grid; gap: var(--s-4); }
@media (min-width: 1100px) { .ws-grid { grid-template-columns: 1.4fr 1fr; } .ws-span-2 { grid-column: auto; } }

.bar-chart { list-style: none; padding: 0; margin: var(--s-5) 0 0; display: grid; grid-template-columns: repeat(8, 1fr); gap: var(--s-2); align-items: end; block-size: 11rem; }
.bar-chart li { display: grid; grid-template-rows: auto 1fr auto; justify-items: center; gap: var(--s-1); block-size: 100%; }
.bar-chart-value { font-size: var(--text-xs); font-weight: 600; color: var(--muted); }
.bar-chart-bar { align-self: end; inline-size: 100%; max-inline-size: 2rem; block-size: max(var(--pct), 3px); border-radius: var(--r-xs) var(--r-xs) 2px 2px; background: color-mix(in srgb, var(--primary) 30%, var(--surface-3)); transition: background var(--dur) var(--ease-soft); animation: bar-grow .7s var(--ease) backwards; transform-origin: bottom; }
.bar-chart li:last-child .bar-chart-bar { background: var(--primary); }
.bar-chart li:hover .bar-chart-bar { background: var(--primary); }
.bar-chart-label { font-size: 10px; color: var(--faint); }
@keyframes bar-grow { from { transform: scaleY(0); } }

.pipeline { list-style: none; padding: 0; margin: var(--s-4) 0 0; display: grid; gap: var(--s-3); }
.pipeline a { display: block; padding: var(--s-1) 0; }
.pipeline a:hover .strong { color: var(--primary); }

.activity { list-style: none; padding: 0; margin: var(--s-3) 0 0; display: grid; }
.activity li { display: flex; align-items: center; gap: var(--s-3); padding-block: var(--s-3); border-block-start: 1px solid var(--border); }
.activity li:first-child { border-block-start: 0; }
.activity-body { flex: 1; min-inline-size: 0; }
.activity-body p { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.activity-time { inline-size: 3rem; text-align: end; }

.checklist { list-style: none; padding: 0; margin: var(--s-3) 0 0; display: grid; gap: var(--s-3); font-size: var(--text-sm); }
.checklist li { display: flex; align-items: center; gap: var(--s-3); }
.check-dot { display: grid; place-items: center; inline-size: 1.25rem; block-size: 1.25rem; border-radius: var(--r-full); border: 1.5px solid var(--border-strong); color: var(--on-primary); }
.checklist li.is-done .check-dot { background: var(--primary); border-color: var(--primary); }
.checklist li.is-done span:nth-child(2) { color: var(--faint); text-decoration: line-through; }

/* ── Data table (portal) ───────────────────────────────────────────────── */
.data-card { border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); overflow: hidden; box-shadow: var(--shadow-xs); }
.data-table { inline-size: 100%; border-collapse: collapse; }
.data-table th { padding: var(--s-3) var(--s-4); text-align: start; font-size: var(--text-xs); font-weight: 600; color: var(--faint); background: var(--surface-2); border-block-end: 1px solid var(--border); }
.data-table td { padding: var(--s-3) var(--s-4); border-block-end: 1px solid var(--border); font-size: var(--text-sm); vertical-align: middle; }
.data-table tbody tr:last-child td { border-block-end: 0; }
.data-table tbody tr:hover td { background: var(--surface-2); }
/* On a phone each row becomes a card, with the column name beside each value. */
@media (max-width: 767px) {
  .data-table thead { display: none; }
  .data-table tr { display: grid; gap: var(--s-2); padding: var(--s-4); border-block-end: 1px solid var(--border); }
  .data-table td { display: flex; justify-content: space-between; gap: var(--s-4); padding: 0; border: 0; }
  .data-table td::before { content: attr(data-label); color: var(--faint); font-size: var(--text-xs); }
  .data-table tbody tr:hover td { background: none; }
}

/* Grid children default to `min-width: auto`, so a horizontally scrolling
   strip inside one (the portal nav on a phone) stretched its column to the
   strip's full width and pushed the page to ~950px. Allow them to shrink. */
.workspace > *, .ws-sidebar, .ws-grid > *, .kpis > * { min-inline-size: 0; }

/* The pipeline bar sits inside a link as a <span>; inline elements ignore
   height, so it has to be told it is a block to draw at all. */
.pipeline .bar, .pipeline .between { display: flex; }
.pipeline .bar { display: block; }

/* The activity list is a grid, and grid items refuse to shrink below their
   content — so a one-line, ellipsised name could not ellipsise, and each row
   pushed the dashboard ~65px past a phone's width. */
.activity { grid-template-columns: minmax(0, 1fr); }
.activity > li { min-inline-size: 0; }
@media (max-width: 480px) {
  .activity-time { display: none; }
}

/* ── Quote request ─────────────────────────────────────────────────────── */
.quote-wrap { max-inline-size: 62rem; margin-inline: auto; }
.quote-grid { display: grid; gap: var(--s-6); align-items: start; }
@media (min-width: 900px) { .quote-grid { grid-template-columns: 1.3fr 1fr; gap: var(--s-8); } }
@media (min-width: 900px) { .quote-car { position: sticky; inset-block-start: calc(var(--header-h) + var(--s-4)); } }
/* The consent box is a row, not a field: the label belongs beside the tick,
   and it has to be readable before it is ticked. */
.consent-row { display: flex; align-items: flex-start; gap: var(--s-3); font-size: var(--text-sm); line-height: 1.6; cursor: pointer; }
.consent-row input { margin-block-start: .2rem; flex: none; }
.quote-done { display: grid; justify-items: center; text-align: center; padding-block: var(--s-12); max-inline-size: 34rem; margin-inline: auto; }
.quote-done p { max-inline-size: 30rem; }
.empty-state-icon.is-done { background: var(--success-soft); color: var(--success); }

/* ── The homepage headline ─────────────────────────────────────────────────
   Two lines: the subject in ink, the promise in colour. The colour is a
   gradient across the brand's own green into a cooler teal — enough life to
   catch the eye, still one hue family rather than a rainbow — and a stroke
   drawn underneath it on arrival.
   ─────────────────────────────────────────────────────────────────────── */
.home-title {
  max-inline-size: 17ch;
  margin-block-start: var(--s-6);
  font-size: clamp(2.35rem, 5.6vw, 4.25rem);
  font-weight: 700;
  line-height: 1.18;
  text-wrap: balance;
  color: var(--fg);
}
.home-title-accent { position: relative; display: inline-block; padding-block-end: .34em; }
.home-title-accent-text {
  background: linear-gradient(100deg, var(--b-700) 0%, var(--b-500) 35%, #0891b2 70%, var(--b-600) 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: title-shimmer 9s var(--ease-soft) infinite;
}
/* A browser without background-clip would render the words invisible, which is
   the one failure worth guarding against on a headline. */
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .home-title-accent-text { color: var(--primary); }
}
@keyframes title-shimmer {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* Arabic descenders drop well below the baseline — ي, ن and ج all reach into
   where a Latin underline would sit — so the stroke needs real clearance or
   it reads as a line struck through the words. The accent reserves that room
   with its own padding rather than the heading growing a gap on both lines. */
.title-swash {
  position: absolute;
  inset-inline: -.06em;
  inset-block-end: .01em;
  inline-size: calc(100% + .12em);
  block-size: .2em;
  color: color-mix(in srgb, var(--b-400) 60%, transparent);
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: swash-draw .85s var(--ease) .45s forwards;
}
@keyframes swash-draw { to { stroke-dashoffset: 0; } }

@media (prefers-reduced-motion: reduce) {
  .home-title-accent-text { animation: none; }
  .title-swash { animation: none; stroke-dashoffset: 0; }
}

/* A softer, two-light glow behind the headline: brand green from the middle,
   a warm trace off to one side. Light, not a poster. */
.home-hero::before {
  background:
    radial-gradient(closest-side, color-mix(in srgb, var(--b-400) 20%, transparent), transparent),
    radial-gradient(closest-side at 72% 60%, color-mix(in srgb, var(--gold) 12%, transparent), transparent);
}

/* ── Soft section wash ─────────────────────────────────────────────────────
   Alternating grounds so the page has rhythm instead of one flat sheet. The
   tint is a few percent of the brand hue — visible as warmth, never as a
   coloured block behind text.
   ─────────────────────────────────────────────────────────────────────── */
.section-tint {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--b-500) 4%, transparent), transparent 60%),
    var(--surface-2);
  border-block: 1px solid var(--border);
}

/* Bento icons carry their own quiet hue, cycled in a fixed order so a card
   keeps the same colour on every visit. Tints only — the glyph stays legible
   and nothing here is colour-coded information. */
.bento-icon { border-color: transparent; }
.bento li:nth-child(4n + 1) .bento-icon { background: color-mix(in srgb, var(--b-500) 12%, transparent); color: var(--b-700); }
.bento li:nth-child(4n + 2) .bento-icon { background: color-mix(in srgb, #0891b2 12%, transparent); color: #0e7490; }
.bento li:nth-child(4n + 3) .bento-icon { background: color-mix(in srgb, var(--gold) 16%, transparent); color: #b45309; }
.bento li:nth-child(4n + 4) .bento-icon { background: color-mix(in srgb, #8b5cf6 12%, transparent); color: #6d28d9; }
[data-theme="dark"] .bento li:nth-child(4n + 1) .bento-icon { color: var(--b-300); }
[data-theme="dark"] .bento li:nth-child(4n + 2) .bento-icon { color: #67e8f9; }
[data-theme="dark"] .bento li:nth-child(4n + 3) .bento-icon { color: #fcd34d; }
[data-theme="dark"] .bento li:nth-child(4n + 4) .bento-icon { color: #c4b5fd; }

/* The counters are the page's proof; the figure itself earns the brand colour. */
.stat-strip dd { color: var(--primary); }

/* ── The business directory ────────────────────────────────────────────────
   One card shape for showrooms, workshops, insurers and installers. Everything
   needed to act on a business is on the card — where, which numbers, what
   other customers scored them — because having to open a detail page to find
   a phone number is the thing this card exists to remove.
   ─────────────────────────────────────────────────────────────────────── */

.bgrid {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}
@media (min-width: 720px)  { .bgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .bgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.bcard {
  display: flex; flex-direction: column; gap: .75rem;
  min-width: 0;
  padding: 1.15rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  transition: border-color .2s var(--ease-soft), box-shadow .2s var(--ease-soft),
              transform .2s var(--ease-soft);
}
.bcard:hover { border-color: var(--accent); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.panel > .bcard { border: 0; padding: 0; background: none; }
.panel > .bcard:hover { box-shadow: none; transform: none; }

.bcard-head { display: flex; align-items: flex-start; gap: .75rem; min-width: 0; }
.bcard-title { min-width: 0; flex: 1; }
.bcard-title h3 { font-size: 1.02rem; line-height: 1.4; margin: 0 0 .2rem; }
.bcard-title h3 a { color: var(--fg); }
.bcard-title h3 a:hover { color: var(--accent); }

.bcard-logo {
  width: 44px; height: 44px; flex-shrink: 0;
  border-radius: .8rem; object-fit: contain;
  border: 1px solid var(--border); background: var(--bg);
}
.bcard-logo.is-blank {
  display: grid; place-items: center;
  font-weight: 700; font-size: 1.15rem; color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, var(--surface));
  border-color: transparent;
}

.bcard-summary { color: var(--muted); font-size: .92rem; line-height: 1.7; margin: 0; }

.bcard-branches { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; }
.bcard-branches > li { display: grid; gap: .3rem; min-width: 0; }
.bcard-where { display: flex; align-items: center; gap: .35rem; font-size: .92rem; font-weight: 600; }
.bcard-where svg { color: var(--accent); flex-shrink: 0; }
.bcard-address { color: var(--muted); font-size: .85rem; line-height: 1.6; }
.bcard-actions { display: flex; flex-wrap: wrap; gap: .35rem; margin-block-start: .15rem; }
.bcard-actions .chip { font-size: .8rem; padding: .25rem .55rem; gap: .3rem; }

/* ── Stars ─────────────────────────────────────────────────────────────────
   Amber, not the brand green: a rating is not our opinion of the business, and
   painting it in the site's own colour reads as an endorsement.
   ─────────────────────────────────────────────────────────────────────── */

.stars { display: inline-flex; align-items: center; gap: .1rem; color: #f59e0b; }
.stars .star.is-empty { color: var(--border); }
.stars b { margin-inline-start: .35rem; font-size: .85rem; color: var(--fg); }
.stars .faint { font-size: .8rem; }

.bdetail { display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
@media (min-width: 960px) { .bdetail { grid-template-columns: minmax(0, 1fr) 20rem; gap: 2rem; } }
.bdetail-side { min-width: 0; }

.reviews { list-style: none; margin: 0; padding: 0; display: grid; gap: .85rem; }
.review {
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
}
.review-head { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; }
.review-head .faint { margin-inline-start: auto; }
.review-reply {
  margin-block-start: .75rem;
  padding: .7rem .85rem;
  border-inline-start: 2px solid var(--accent);
  background: color-mix(in srgb, var(--accent) 5%, transparent);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

/* The rating input: five radios drawn as a row of labels rather than a
   dropdown, because picking a star is one tap and picking from a select is
   three. Reversed, so five sits on the reading-start side in RTL. */
.star-input { display: flex; flex-direction: row-reverse; justify-content: flex-end; gap: .25rem; }
.star-input label { cursor: pointer; }
.star-input input { position: absolute; opacity: 0; pointer-events: none; }
.star-input label::before {
  content: "★";
  font-size: 1.75rem; line-height: 1;
  color: var(--border);
  transition: color .15s var(--ease-soft);
}
.star-input label:hover::before,
.star-input label:hover ~ label::before,
.star-input input:checked ~ *::before { color: #f59e0b; }
.star-input:has(input:checked) label::before { color: var(--border); }
.star-input label:has(input:checked)::before,
.star-input label:has(input:checked) ~ label::before { color: #f59e0b; }
.star-input input:focus-visible + * { outline: 2px solid var(--accent); outline-offset: 2px; }

/* The hero pill's second half: the question, set apart so the pill reads as a
   claim and an invitation rather than one long sentence. The arrow points the
   way the text runs. */
.hero-pill-more { font-weight: 700; color: var(--accent); }
.hero-pill .icon { transform: scaleX(-1); transition: transform .2s var(--ease-soft); }
.hero-pill:hover .icon { transform: scaleX(-1) translateX(3px); }

/* ── The signed-in dashboard ───────────────────────────────────────────────
   Signing in used to change one word in the header and nothing else, which is
   a site with no reason for anyone to have an account. This is the other
   thing: what you have going on, what needs you, and what to do next.
   ─────────────────────────────────────────────────────────────────────── */

.dash-head {
  display: flex; flex-wrap: wrap; gap: 1rem;
  align-items: center; justify-content: space-between;
  margin-block-end: 1.5rem;
}
.dash-head h1 { margin: 0; }

/* What needs them, first and once. Amber, because it is a prompt, not a
   problem — red here would read as "something is broken". */
.nudges { list-style: none; margin: 0 0 1.5rem; padding: 0; display: grid; gap: .6rem; }
.nudge {
  display: flex; flex-wrap: wrap; gap: .75rem;
  align-items: center; justify-content: space-between;
  padding: .85rem 1.1rem;
  border: 1px solid color-mix(in srgb, #f59e0b 35%, var(--border));
  border-inline-start: 3px solid #f59e0b;
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, #f59e0b 7%, var(--surface));
  font-size: .93rem;
}

.dash-business {
  display: flex; flex-wrap: wrap; gap: 1rem;
  align-items: center; justify-content: space-between;
  margin-block-end: 1.5rem;
}
.dash-business .h4 { margin: .2rem 0 0; }
.dash-business .icon { transform: scaleX(-1); }

.dash-stats {
  display: grid; gap: .75rem; margin: 0 0 1.5rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 700px) { .dash-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.dash-stats > div {
  padding: 1rem 1.15rem; min-width: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
}
.dash-stats dt { font-size: .82rem; color: var(--muted); margin: 0; }
.dash-stats dd { margin: .25rem 0 0; font-size: 1.7rem; font-weight: 700; line-height: 1.1; }

.dash-grid {
  display: grid; gap: 1rem;
  grid-template-columns: 1fr;
}
@media (min-width: 800px) { .dash-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.dash-panel-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: .75rem; margin-block-end: .9rem;
}
.dash-panel-head h2 { margin: 0; }

.dash-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.dash-list > li {
  display: flex; align-items: center; justify-content: space-between;
  gap: .75rem; min-width: 0;
  padding-block: .45rem;
  border-block-end: 1px solid var(--border);
  font-size: .93rem;
}
.dash-list > li:last-child { border-block-end: 0; }
.dash-list > li > :first-child {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dash-list > li.panel { border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1rem 1.15rem; }

.dash-shortcuts { display: flex; flex-wrap: wrap; gap: .45rem; }

.quote-row { align-items: flex-start; }
.quote-row .h4 { margin: 0; }

/* ── The hero's rotating facts ─────────────────────────────────────────────
   One pill visible at a time, the rest stacked behind it. Absolute positioning
   inside a relative box, so the hero's height does not jump as a short fact
   replaces a long one — a headline that moves every five seconds is worse than
   no rotation at all.
   ─────────────────────────────────────────────────────────────────────── */

.hero-facts { position: relative; display: grid; justify-items: center; min-block-size: 2.4rem; }
.hero-facts > .hero-pill {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity .4s var(--ease-soft), transform .4s var(--ease-soft), visibility .4s;
}
.hero-facts > .hero-pill.is-on { opacity: 1; visibility: visible; transform: none; }

.hero-pill-text { white-space: normal; }
.hero-pill-src {
  padding-inline: .45rem;
  border-radius: var(--r-full);
  background: var(--surface-3);
  color: var(--faint);
  font-size: .7rem;
  font-weight: 600;
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .hero-facts > .hero-pill { transition: none; }
}

/* The powertrain drawings. They were 96px tall line art on a white ground and
   read as clip-art; at this size, on a tinted panel, the three parts that
   actually differ between the five kinds are legible. */
.pt-diagram {
  inline-size: 100%;
  max-inline-size: 22rem;
  block-size: auto;
  color: var(--n-400);
  display: block;
}
.kind-card .pt-diagram, .panel .pt-diagram { margin-inline: auto; }
[data-theme="dark"] .pt-diagram { color: var(--n-500); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .pt-diagram { color: var(--n-500); }
}

/* The map's key. Three colours with no legend is a puzzle, and the middle
   state — location sourced, details not — is the one that needs saying. */
.map-legend {
  display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4);
  align-items: center;
  margin-block-start: var(--s-3);
  font-size: var(--text-xs); color: var(--muted);
}
.map-legend span { display: inline-flex; align-items: center; gap: var(--s-2); }
.map-legend .dot {
  inline-size: .7rem; block-size: .7rem; border-radius: 50%;
  box-shadow: 0 0 0 2px var(--surface);
}
.map-legend .dot.is-working { background: #00875a; }
.map-legend .dot.is-unconfirmed { background: #8a5a00; }
.map-legend .dot.is-down { background: #b3261e; }

/* ── The install invitation ────────────────────────────────────────────────
   A bar at the bottom of a phone, a card at the corner of a desktop. It sits
   above everything and below nothing, and it only ever appears once site.js
   has decided the visit has earned it.
   ─────────────────────────────────────────────────────────────────────── */

.install-banner {
  position: fixed;
  inset-block-end: max(var(--s-4), env(safe-area-inset-bottom));
  inset-inline: var(--s-4);
  z-index: 200;
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
  /* Off-screen until site.js adds `is-in`, so it slides rather than blinks. */
  opacity: 0;
  transform: translateY(1rem);
  transition: opacity .25s var(--ease-soft), transform .25s var(--ease-soft);
}
.install-banner.is-in { opacity: 1; transform: none; }
.install-banner:not(.is-in) { pointer-events: none; }
@media (min-width: 720px) {
  .install-banner { inset-inline: auto var(--s-6); max-inline-size: 26rem; }
}

.install-icon { flex-shrink: 0; border-radius: .7rem; }
.install-text { flex: 1; min-width: 0; }
.install-title { margin: 0; font-size: var(--text-sm); font-weight: 700; }
.install-body { margin: .2rem 0 0; font-size: var(--text-xs); color: var(--muted); line-height: 1.7; }

/* One body or the other, never both. `data-mode` is set by site.js from what
   the browser actually supports. */
.install-banner [data-install-body-prompt],
.install-banner [data-install-body-ios] { display: none; }
.install-banner[data-mode="prompt"] [data-install-body-prompt] { display: block; }
.install-banner[data-mode="ios"] [data-install-body-ios] { display: block; }
/* iOS has no install API, so there is nothing for a button to do there. */
.install-banner[data-mode="ios"] [data-install-go] { display: none; }

.install-step {
  display: inline-grid; place-items: center;
  inline-size: 1.15rem; block-size: 1.15rem;
  border-radius: .35rem;
  background: var(--surface-3); color: var(--accent);
  vertical-align: -.2rem;
}

.install-actions { display: flex; align-items: center; gap: var(--s-1); flex-shrink: 0; }
.install-close {
  display: grid; place-items: center;
  inline-size: 1.9rem; block-size: 1.9rem;
  border: 0; border-radius: var(--r-full);
  background: none; color: var(--faint);
  cursor: pointer; font-size: .9rem;
}
.install-close:hover { background: var(--surface-2); color: var(--fg); }

@media (prefers-reduced-motion: reduce) {
  .install-banner { transition: none; }
}

/* ── Plan cards ────────────────────────────────────────────────────────────
   Monthly and yearly on one card, switched by the toggle above them. Six
   cards for three plans makes the reader compare the wrong axis.
   ─────────────────────────────────────────────────────────────────────── */

.bill-now { display: flex; flex-wrap: wrap; gap: var(--s-4); align-items: center; justify-content: space-between; }
.bill-state { text-align: start; }

.plan-toggle { display: inline-flex; gap: var(--s-1); padding: var(--s-1);
               border: 1px solid var(--border); border-radius: var(--r-full);
               background: var(--surface-2); }
.plan-toggle .chip { border-color: transparent; background: transparent; }
.plan-toggle .chip.is-on { background: var(--surface); border-color: var(--primary-border);
                           box-shadow: var(--shadow-sm); }

.plan-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3);
             grid-template-columns: 1fr; align-items: start; }
@media (min-width: 860px) { .plan-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.plan-card { position: relative; display: flex; flex-direction: column; min-width: 0; }
.plan-card.is-current { border-color: var(--primary-border); box-shadow: 0 0 0 1px var(--primary-border); }
.plan-flag {
  position: absolute; inset-block-start: -.65rem; inset-inline-start: var(--s-4);
  padding: .15rem .6rem; border-radius: var(--r-full);
  background: var(--primary); color: #fff;
  font-size: .68rem; font-weight: 700;
}
/* `display: flex` beats the `hidden` attribute, so without the guard both the
   monthly and the yearly price showed at once the moment the toggle ran. */
.plan-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--s-2); }
.plan-perks { list-style: none; margin: var(--s-3) 0 0; padding: 0; display: grid; gap: var(--s-2);
              font-size: var(--text-sm); color: var(--muted); }
.plan-perks li { display: flex; align-items: center; gap: var(--s-2); }
.plan-perks svg { color: var(--primary); flex-shrink: 0; }
.plan-card form { margin-block-start: auto; }
.w-full { inline-size: 100%; justify-content: center; }

/* The launch offer. Gold, not brand green: it is a time-limited promotion,
   and it should look like one rather than like part of the furniture. */
.launch-offer {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-4);
  border: 1px solid color-mix(in srgb, #f59e0b 40%, var(--border));
  border-radius: var(--r-lg);
  background: linear-gradient(135deg, color-mix(in srgb, #f59e0b 12%, var(--surface)), var(--surface));
}
.launch-offer-badge {
  flex-shrink: 0;
  padding: .3rem .7rem; border-radius: var(--r-full);
  background: #f59e0b; color: #fff; font-size: var(--text-xs); font-weight: 700;
}
.launch-offer .strong { margin: 0; }

/* Branch editing in the portal. Each branch is one bordered group, so eight
   fields per branch still read as "this branch" rather than one long form. */
.branch-form { border: 1px solid var(--border); border-radius: var(--r-lg);
               padding: var(--s-4); margin: 0; min-width: 0; }
.branch-grid { display: grid; gap: var(--s-3); grid-template-columns: 1fr; }
@media (min-width: 720px) { .branch-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.branch-delete { display: flex; align-items: center; gap: var(--s-2);
                 font-size: var(--text-sm); color: var(--danger); }
.badge-featured { background: color-mix(in srgb, #f59e0b 16%, var(--surface)); color: #92400e;
                  border-color: color-mix(in srgb, #f59e0b 40%, var(--border)); }

.price-rows { display: grid; gap: var(--s-2); margin-block-start: var(--s-2); }
.price-row {
  display: grid; grid-template-columns: 1fr auto auto; gap: var(--s-4); align-items: baseline;
  padding: var(--s-3) var(--s-4); border: 1px solid var(--border);
  border-radius: var(--r-lg); background: var(--surface);
}
@media (max-width: 480px) { .price-row { grid-template-columns: 1fr auto; }
                            .price-row > :last-child { grid-column: 1 / -1; } }

/* A confirmation. Used in three templates and never defined, so every
   "saved" and "trial started" message rendered as a plain white box that
   read like any other paragraph. */
.panel-ok {
  border-color: var(--primary-border);
  background: var(--primary-soft);
  color: var(--fg);
  border-inline-start: 3px solid var(--primary);
}

/* The billing strip at the top of every portal page. Amber while there is
   still time, red once the business is actually off the site. */
.bill-strip {
  display: flex; flex-wrap: wrap; gap: var(--s-3);
  align-items: center; justify-content: space-between;
  margin-block-end: var(--s-4);
  padding: var(--s-3) var(--s-4);
  border: 1px solid color-mix(in srgb, #f59e0b 45%, var(--border));
  border-inline-start: 3px solid #f59e0b;
  border-radius: var(--r-lg);
  background: color-mix(in srgb, #f59e0b 9%, var(--surface));
  font-size: var(--text-sm);
}
.bill-strip.is-hidden {
  border-color: color-mix(in srgb, var(--danger) 45%, var(--border));
  border-inline-start-color: var(--danger);
  background: color-mix(in srgb, var(--danger) 7%, var(--surface));
}
.bill-strip span { display: inline-flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }

/* ══ Clarity pass ═══════════════════════════════════════════════════════════
   The site read as one soft grey wash: white cards on a near-white page, pale
   hairlines, light-grey labels, every chip the same outline. Nothing told the
   eye where to land. This layer, on the tokens above, gives each thing one
   clear job:

   · Objects have edges. Cards are white on a grey page with a real border and
     a contact shadow; hovering one outlines it in brand green.
   · Text has two weights of grey, both dark enough to read in sunlight.
   · Headings are bold and a size step apart from what they introduce.
   · A selected control is filled, not tinted — on/off is visible at a glance.
   · Brand green is for the one thing to do; everything else is ink or grey.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Content is never hidden waiting for a scroll: a reader who jumps to a
   section, a search preview or a failed script all see the page. The motion
   that remains is a small rise, not a fade from nothing. */
[data-reveal] { opacity: 1; transform: translateY(8px); transition: transform .5s var(--ease-soft); }
[data-reveal].is-in { transform: none; }

/* ── Type ── */
/* Weight only: a heading inherits its colour, so one on a dark card stays light. */
h1, h2, h3, h4, .h1, .h2, .h3, .h4, .display { font-weight: 700; }
.h2 { letter-spacing: -.005em; }
.lede, .home-lede { color: var(--muted); font-size: var(--text-md); }
.eyebrow {
  inline-size: fit-content; max-inline-size: 100%; justify-self: start;
  padding: .2rem .7rem; border-radius: var(--r-full);
  background: var(--primary-soft); border: 1px solid var(--primary-border);
  font-size: var(--text-xs); font-weight: 700;
}
.section-head { margin-block-end: var(--s-8); }
.section-head .h2 { margin-block-start: var(--s-3); }
.faint { color: var(--faint); }

/* ── Surfaces ── */
.section-tint, .section.section-tint { background: var(--surface); border-block: 1px solid var(--border); }
.panel, .vcard, .filters, .listing-tile, .bento-card, .kind-card, .q-card, .service-tile,
.kind-tile, .boost-package, .stat-strip, .ad-banner, .spec-group, .chat {
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}
.panel { border-radius: var(--r-lg); }
.lift:hover, .vcard:hover, .listing-tile:hover, .bento-card:hover, .service-tile:hover, .kind-tile:hover {
  border-color: var(--primary);
  box-shadow: 0 0 0 1px var(--primary), var(--shadow-md);
  transform: translateY(-2px);
}
.ad-banner { background: var(--surface); border-style: dashed; border-color: var(--border-strong); box-shadow: none; }

/* ── Buttons: taller, bolder, one unmistakable primary ── */
.btn { min-height: 2.875rem; padding: 0 var(--s-6); font-size: var(--text-sm); font-weight: 700; border-radius: var(--r-md); }
.btn-lg { min-height: 3.25rem; padding: 0 var(--s-8); font-size: var(--text-base); }
.btn-sm { min-height: 2.25rem; padding: 0 var(--s-4); }
.btn:not(.btn-secondary):not(.btn-ghost):not(.btn-danger) {
  box-shadow: 0 1px 0 rgb(255 255 255 / .18) inset, 0 2px 0 var(--b-900), 0 6px 14px -6px color-mix(in srgb, var(--b-700) 55%, transparent);
}
.btn:not(.btn-secondary):not(.btn-ghost):not(.btn-danger):active { box-shadow: 0 1px 0 var(--b-900); }
.btn-secondary { --btn-border: var(--n-300); --btn-fg: var(--fg); border-width: 1.5px; }
.btn-secondary:hover { --btn-border: var(--fg); --btn-bg: var(--surface); }
.btn-ghost { --btn-fg: var(--fg); }
.btn-ghost:hover { --btn-bg: var(--surface-3); }

/* ── Chips & segmented: outlined off, filled on ── */
.chip, .segmented span {
  min-height: 2.375rem; padding: 0 var(--s-4);
  border: 1.5px solid var(--border-strong); background: var(--surface);
  color: var(--fg); font-weight: 600; font-size: var(--text-sm);
}
.chip:hover, .segmented label:hover span { border-color: var(--fg); color: var(--fg); }
.chip[aria-pressed="true"], .chip.is-on, .segmented input:checked + span,
.chips > .chip.is-on {
  background: var(--fg); border-color: var(--fg); color: var(--surface); box-shadow: none;
}
.chips { border: 1.5px solid var(--border); background: var(--surface); padding: 4px; }
.chips > .chip { border-color: transparent; }
.chips > .chip:hover { border-color: var(--border-strong); background: var(--surface-2); }
.chips > .chips-label { color: var(--fg); font-weight: 700; }

/* ── Inputs ── */
.input, select.input, textarea.input { min-height: 3rem; border: 1.5px solid var(--border-strong); border-radius: var(--r-md); box-shadow: none; }
.input:hover { border-color: var(--n-500); }
.input:focus, .input:focus-visible { border-color: var(--primary); box-shadow: 0 0 0 4px var(--ring); }
.input::placeholder { color: var(--n-500); }
.field > span:first-child { font-weight: 700; }

/* ── Badges: solid enough to read at a glance ── */
.badge { min-height: 1.625rem; padding: 0 .55rem; font-size: var(--text-xs); font-weight: 700; border-radius: var(--r-sm); color: var(--fg); border-color: var(--border-strong); background: var(--surface); }
.badge-solid { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.vcard-flags .badge:not(.badge-solid) { background: rgb(255 255 255 / .92); backdrop-filter: blur(4px); }

/* ── Header: a white bar with a firm edge; bold nav; clear active state ── */
.site-header { background: color-mix(in srgb, var(--surface) 94%, transparent); border-block-end: 1px solid var(--border); box-shadow: 0 1px 0 rgb(11 18 32 / .02); }
.site-nav a, .site-nav button, .nav-group > button, .nav-group > a { font-weight: 700; color: var(--fg); }
.nav-menu { border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); }
.nav-menu a { border-radius: var(--r-md); }
.nav-menu a:hover { background: var(--primary-soft); }

/* ── Home hero ── */
.home-hero { background: var(--surface); border-block-end: 1px solid var(--border); }
.home-title { font-weight: 700; line-height: 1.15; letter-spacing: -.01em; }
.home-title-accent { color: var(--primary); }
.hero-pill { min-height: 2.25rem; font-weight: 700; border-width: 1.5px; background: var(--surface); }
.stat-strip { border-radius: var(--r-lg); }
.stat-strip dt { color: var(--muted); font-weight: 600; }
.stat-strip dd { font-size: var(--text-3xl); font-weight: 700; color: var(--primary); }

/* ── Car cards ── */
.vcard { border-radius: var(--r-lg); }
.vcard-media { background: linear-gradient(160deg, var(--n-100), var(--n-200)); border-block-end: 1px solid var(--border); }
.vcard-placeholder { color: var(--n-400); }
.vcard-placeholder span { color: var(--n-400); }
.vcard-body { gap: 2px; padding: var(--s-4) var(--s-5) var(--s-5); }
.vcard-brand { color: var(--muted); font-weight: 700; font-size: var(--text-xs); letter-spacing: .02em; }
.vcard-title { font-size: var(--text-xl); font-weight: 700; }
.vcard-sub { color: var(--muted); }
.vcard-specs { border-color: var(--border); background: var(--border); }
.vcard-specs li { background: var(--surface-2); }
.vcard-spec-label { color: var(--muted); font-weight: 600; }
.vcard-spec-value { font-size: var(--text-lg); font-weight: 700; }
.vcard-price { font-size: var(--text-2xl); font-weight: 700; color: var(--fg); }
.vcard-go { border: 1.5px solid var(--border-strong); color: var(--fg); inline-size: 2.5rem; block-size: 2.5rem; }

/* ── Catalogue & filters ── */
.filters-head { background: var(--surface); border-block-end: 1px solid var(--border); }
.filters-head .h4 { font-size: var(--text-lg); }
.filter-group { padding: var(--s-5) var(--s-4); gap: var(--s-3); }
.filter-group legend, .filter-more summary,
.filter-group .field > span:first-child { font-size: var(--text-sm); font-weight: 700; color: var(--fg); }

/* ── Car page ── */
.vd-head { background: var(--surface); }
.vd-title { font-weight: 700; letter-spacing: -.01em; }
.vd-brand { color: var(--primary); font-weight: 700; }
.vd-media { border: 1px solid var(--border); box-shadow: var(--shadow-sm); border-radius: var(--r-lg); }
.vd-keys { border: 1px solid var(--border); background: var(--surface); box-shadow: var(--shadow-sm); border-radius: var(--r-lg); }
.vd-keys dd { font-weight: 700; color: var(--fg); }
.vd-keys dt { color: var(--muted); font-weight: 600; }
.tabs { border-block-end: 2px solid var(--border); gap: var(--s-2); }
.tab { padding: var(--s-3) var(--s-4); margin-block-end: -2px; border-block-end-width: 3px; color: var(--muted); font-size: var(--text-sm); font-weight: 700; }
.tab[aria-selected="true"] { color: var(--primary); border-block-end-color: var(--primary); }
.tab-count { background: var(--surface-3); color: var(--fg); font-weight: 700; }
.spec-list dt, .spec-list .label { color: var(--muted); }
.spec-list dd, .spec-list .value { font-weight: 700; color: var(--fg); }
/* On a phone the photo is what you came for: it leads, the facts follow. */
@media (max-width: 959px) {
  .vd-head-grid > .vd-gallery { order: -1; }
}

/* ── The call-to-action band and footer: one dark block to close the page ── */
.cta-band { background: var(--ink); color: #fff; border: 0; border-radius: var(--r-xl); }
.cta-band :is(h2, h3, .h2, .h3) { color: #fff; }
.cta-band :is(p, .muted, .lede) { color: #c9d2de; }
.cta-band .btn-secondary { --btn-bg: transparent; --btn-fg: #fff; --btn-border: rgb(255 255 255 / .35); }
.cta-band .btn-secondary:hover { --btn-border: #fff; --btn-bg: rgb(255 255 255 / .06); }
.site-footer { background: var(--surface); border-block-start: 1px solid var(--border); }
/* `:where()` keeps these at zero specificity, so they colour the footer's
   ordinary links without overriding a component inside it. Written plainly,
   `.site-footer a:hover` beat `.footer-social a:hover` — the icon turned the
   same green as the filled background it sits on and vanished. */
.site-footer :where(a) { color: var(--muted); font-weight: 600; }
.site-footer :where(a):hover { color: var(--primary); }

/* ── Breadcrumbs ── */
.breadcrumbs a { color: var(--muted); font-weight: 600; }
.breadcrumbs a:hover { color: var(--primary); }
.zakki-card .eyebrow, .cta-band .eyebrow { background: rgb(255 255 255 / .08); border-color: rgb(255 255 255 / .2); color: var(--b-300); }

/* Dark: the light-grey placeholders and frosted badges above were drawn for a
   white page. Here they take the dark surfaces instead. */
:root[data-theme="dark"] .vcard-media { background: linear-gradient(160deg, var(--surface-2), var(--surface-3)); }
:root[data-theme="dark"] .vcard-placeholder, :root[data-theme="dark"] .vcard-placeholder span { color: var(--faint); }
:root[data-theme="dark"] .vcard-flags .badge:not(.badge-solid) { background: rgb(8 11 16 / .8); color: var(--fg); }
:root[data-theme="dark"] .btn:not(.btn-secondary):not(.btn-ghost):not(.btn-danger) { box-shadow: 0 2px 0 var(--b-700); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .vcard-media { background: linear-gradient(160deg, var(--surface-2), var(--surface-3)); }
  :root:not([data-theme="light"]) .vcard-placeholder, :root:not([data-theme="light"]) .vcard-placeholder span { color: var(--faint); }
  :root:not([data-theme="light"]) .vcard-flags .badge:not(.badge-solid) { background: rgb(8 11 16 / .8); color: var(--fg); }
  :root:not([data-theme="light"]) .btn:not(.btn-secondary):not(.btn-ghost):not(.btn-danger) { box-shadow: 0 2px 0 var(--b-700); }
}

/* The strip carries whatever figures are true today — two on a new site, five
   on a full one — so the columns follow the count instead of leaving gaps. */
.stat-strip { grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }

/* ── Brand slogan ──
   Under the wordmark on a wide screen, and in the footer always. Small and
   quiet: it names the site, it does not compete with the page's own heading. */
.logo-stack { display: grid; align-content: center; justify-items: center; gap: 2px; min-width: 0; }
/* Centred under the wordmark and set apart by a hairline, so it reads as the
   site's line rather than as a stray caption next to the logo. */
.logo-slogan {
  display: none;
  padding-block-start: 3px;
  border-block-start: 1px solid var(--border);
  inline-size: 100%;
  text-align: center;
  font-size: 11px; font-weight: 700; color: var(--muted);
  letter-spacing: .01em; white-space: nowrap;
}
@media (min-width: 1100px) { .logo-slogan { display: block; } }

.footer-brand { text-align: center; }
.footer-slogan {
  margin-block-start: var(--s-2);
  font-size: var(--text-md); font-weight: 700; color: var(--fg);
}

/* ── Flash messages ──
   One line saying what just happened, above the page it happened on. */
.flashes { display: grid; gap: var(--s-2); margin-block-start: var(--s-4); }
.flash {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-3) var(--s-4); border-radius: var(--r-md);
  border: 1.5px solid var(--primary-border); background: var(--primary-soft);
  color: var(--fg); font-weight: 600;
}
.flash-error { border-color: color-mix(in srgb, var(--danger) 40%, transparent); background: var(--danger-soft); }
.flash-warning { border-color: color-mix(in srgb, var(--warning) 40%, transparent); background: var(--warning-soft); }
.flash-close {
  margin-inline-start: auto; border: 0; background: none; cursor: pointer;
  color: var(--muted); font-size: var(--text-md); line-height: 1; padding: 0 var(--s-1);
}
.flash-close:hover { color: var(--fg); }

/* ── The community feed ──
   A column of cards: who wrote it, what they said, how people reacted, the
   last comments. Sized for a phone first — this is read standing next to a
   charger, not at a desk. */
.feed-wrap { max-inline-size: 44rem; }
.composer, .composer-signin { border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-sm); padding: var(--s-4); margin-block-end: var(--s-5); }
.composer-top { display: flex; gap: var(--s-3); align-items: flex-start; }
.composer-top textarea { flex: 1; min-height: 3.25rem; resize: vertical; }
.composer-foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin-block-start: var(--s-3); }
.composer-foot .btn { margin-inline-start: auto; }
.composer-file { display: inline-flex; align-items: center; gap: var(--s-2); padding: 0 var(--s-3); min-height: 2.375rem; border: 1.5px solid var(--border-strong); border-radius: var(--r-full); font-size: var(--text-sm); font-weight: 600; cursor: pointer; }
.composer-file input[type="file"] { inline-size: 0; block-size: 0; opacity: 0; position: absolute; }
.composer-file:hover { border-color: var(--fg); }
.composer-car select { min-height: 2.375rem; max-inline-size: 15rem; }

.feed { display: grid; gap: var(--s-4); }
.post { border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-sm); padding: var(--s-4) var(--s-5) var(--s-3); }
.post-head { display: flex; align-items: center; gap: var(--s-3); }
.post-avatar {
  display: grid; place-items: center; flex: none;
  inline-size: 2.5rem; block-size: 2.5rem; border-radius: var(--r-full);
  background: var(--primary-soft); border: 1.5px solid var(--primary-border);
  color: var(--primary); font-weight: 700; font-size: var(--text-md);
}
.post-avatar.sm { inline-size: 1.875rem; block-size: 1.875rem; font-size: var(--text-sm); }
.post-author { font-weight: 700; }
.post-when, .comments .post-when { color: var(--faint); font-size: var(--text-xs); font-weight: 500; }
.post-car { color: var(--primary); font-weight: 700; }
.post-body { margin-block-start: var(--s-3); font-size: var(--text-md); line-height: 1.8; overflow-wrap: anywhere; }
.post-image { display: block; margin-block-start: var(--s-3); border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--border); }
.post-image img { inline-size: 100%; max-block-size: 32rem; object-fit: cover; }
.post-counts { margin-block-start: var(--s-3); padding-block-end: var(--s-2); color: var(--muted); font-size: var(--text-sm); font-weight: 600; border-block-end: 1px solid var(--border); }

.post-actions { display: flex; flex-wrap: wrap; gap: var(--s-1); padding-block: var(--s-2); }
.post-actions form { margin: 0; }
.react {
  display: inline-flex; align-items: center; gap: var(--s-1);
  min-height: 2.25rem; padding: 0 var(--s-3); cursor: pointer;
  border: 1px solid transparent; border-radius: var(--r-full);
  background: none; color: var(--muted); font-size: var(--text-sm); font-weight: 600;
  transition: background var(--dur-fast) var(--ease-soft), color var(--dur-fast) var(--ease-soft);
}
.react:hover { background: var(--surface-3); color: var(--fg); }
.react.is-mine { background: var(--primary-soft); border-color: var(--primary-border); color: var(--primary); }
.react-emoji { font-size: 1.05rem; line-height: 1; }
@media (max-width: 480px) { .react-label { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); } .react { padding: 0 var(--s-4); } }

.comments { list-style: none; margin: 0; padding: var(--s-2) 0 0; display: grid; gap: var(--s-3); border-block-start: 1px solid var(--border); }
.comments li { display: flex; gap: var(--s-2); align-items: flex-start; font-size: var(--text-sm); }
.comments li > div { background: var(--surface-2); border-radius: var(--r-md); padding: var(--s-2) var(--s-3); min-inline-size: 0; overflow-wrap: anywhere; }
.comment-author { font-weight: 700; display: flex; gap: var(--s-2); align-items: baseline; }
.comment-form { display: flex; gap: var(--s-2); margin-block-start: var(--s-3); }
.comment-form .input { min-height: 2.5rem; }

/* Sign out sits next to the account chip: one click from anywhere, and a
   form rather than a link (see the header template). */
.logout-form { display: inline-flex; margin: 0; }

/* ── "Register your business" ──
   The form on the left, what you get and what happens next on the right.
   One column on a phone, with the reassurance under the form rather than
   above it: on a small screen the questions come first. */
/* The header is fixed, so the first line of the page has to start below it. */
.apply-hero { padding-block: var(--s-8) var(--s-8); border-block-end: 1px solid var(--border); background: var(--surface); }
.apply-grid { display: grid; gap: var(--s-6); align-items: start; }
@media (min-width: 960px) { .apply-grid { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: var(--s-8); } }

.apply-form { display: grid; gap: var(--s-5); }
.apply-step {
  border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface);
  box-shadow: var(--shadow-sm); padding: var(--s-5); margin: 0;
}
.apply-step legend {
  display: flex; align-items: center; gap: var(--s-2);
  padding: 0 var(--s-2); font-size: var(--text-md); font-weight: 700;
}
.apply-step-n {
  display: grid; place-items: center; flex: none;
  inline-size: 1.75rem; block-size: 1.75rem; border-radius: var(--r-full);
  background: var(--primary); color: var(--on-primary);
  font-size: var(--text-sm); font-weight: 700; font-variant-numeric: tabular-nums;
}
.apply-fields { display: grid; gap: var(--s-4); margin-block-start: var(--s-4); }
@media (min-width: 560px) { .apply-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* The eight kinds of business, as cards: the first question decides the rest
   of the form, so its options are visible rather than folded into a select. */
.type-cards { display: grid; gap: var(--s-2); margin-block-start: var(--s-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr)); }
.type-card { position: relative; cursor: pointer; }
.type-card input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.type-card-body {
  display: flex; align-items: center; justify-content: center; text-align: center;
  min-block-size: 3.25rem; padding: var(--s-2) var(--s-3);
  border: 1.5px solid var(--border-strong); border-radius: var(--r-md);
  background: var(--surface); font-weight: 600; font-size: var(--text-sm);
  transition: border-color var(--dur-fast) var(--ease-soft), background var(--dur-fast) var(--ease-soft);
}
.type-card:hover .type-card-body { border-color: var(--fg); }
.type-card input:checked + .type-card-body {
  border-color: var(--primary); background: var(--primary-soft); color: var(--primary);
  box-shadow: 0 0 0 1px var(--primary);
}
.type-card input:focus-visible + .type-card-body { outline: 2px solid var(--primary); outline-offset: 2px; }

.apply-whatsapp { display: grid; gap: var(--s-2); }
.apply-same { display: inline-flex; align-items: center; gap: var(--s-2); font-size: var(--text-sm); font-weight: 600; color: var(--muted); cursor: pointer; }
.apply-submit { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4); }

.apply-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-4); }
.apply-steps li { display: flex; gap: var(--s-3); align-items: flex-start; }
.apply-gets { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); font-size: var(--text-sm); }
.apply-gets li { display: flex; gap: var(--s-2); align-items: flex-start; }
.apply-gets svg { flex: none; color: var(--primary); transform: translateY(3px); }

/* ── Decoding the abbreviations ──
   One card per abbreviation: the letters down the side, what it means under
   them, and a link to the kind it names. */
.abbr-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-4);
             grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.abbr-card { border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface);
             box-shadow: var(--shadow-sm); padding: var(--s-5); display: grid; gap: var(--s-3); align-content: start; }
.abbr-short { font-size: var(--text-2xl); font-weight: 700; color: var(--primary); letter-spacing: .04em; }
.abbr-letters { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); font-size: var(--text-sm); }
.abbr-letters li { display: flex; align-items: center; gap: var(--s-2); }
.abbr-letter {
  display: grid; place-items: center; flex: none;
  inline-size: 1.75rem; block-size: 1.75rem; border-radius: var(--r-sm);
  background: var(--primary-soft); border: 1px solid var(--primary-border);
  color: var(--primary); font-weight: 700;
}
.abbr-means { color: var(--muted); font-size: var(--text-sm); line-height: 1.8; }
.abbr-link { color: var(--primary); font-weight: 700; font-size: var(--text-sm); }
.abbr-link:hover { text-decoration: underline; }

/* ── Brand names → what they actually are ── */
.trade-table { border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface);
               box-shadow: var(--shadow-sm); overflow: hidden; }
.trade-head, .trade-row { display: grid; gap: var(--s-3); padding: var(--s-3) var(--s-4); align-items: center;
                          grid-template-columns: minmax(7rem, 1fr) minmax(5rem, .8fr) minmax(8rem, 1fr) minmax(12rem, 2fr); }
.trade-head { background: var(--surface-2); border-block-end: 1px solid var(--border);
              font-size: var(--text-xs); font-weight: 700; color: var(--muted); }
.trade-row + .trade-row { border-block-start: 1px solid var(--border); }
.trade-name { font-weight: 700; }
.trade-brand, .trade-note { color: var(--muted); font-size: var(--text-sm); }
@media (max-width: 720px) {
  /* On a phone each row becomes its own small card: four columns at 390px
     puts one word on each line and none of them next to its label. */
  .trade-head { display: none; }
  .trade-row { grid-template-columns: 1fr; gap: var(--s-1); padding: var(--s-4); }
  .trade-row .trade-name { font-size: var(--text-md); }
}

/* The last menu in the bar opens towards the middle of the page: anchored to
   its start edge like the others, it opens off the screen. */
.nav-group:last-of-type .nav-menu { inset-inline-start: auto; inset-inline-end: 0; }

/* Taking your own post or comment down: quiet until you are over the card,
   and always reachable on a touch screen where there is no hover. */
.post-menu { margin-inline-start: auto; }
.post-delete {
  border: 0; background: none; cursor: pointer; padding: var(--s-1) var(--s-2);
  color: var(--faint); font-size: var(--text-md); line-height: 1; border-radius: var(--r-sm);
  opacity: 0; transition: opacity var(--dur-fast) var(--ease-soft), color var(--dur-fast) var(--ease-soft);
}
.post:hover .post-delete, .post-delete:focus-visible, .comments li:hover .post-delete { opacity: 1; }
.post-delete:hover { color: var(--danger); background: var(--danger-soft); }
@media (hover: none) { .post-delete { opacity: 1; } }

.post-edit {
  border: 0; background: none; cursor: pointer; padding: var(--s-1) var(--s-2);
  color: var(--faint); font-size: var(--text-md); line-height: 1; border-radius: var(--r-sm);
  opacity: 0; margin-inline-start: auto; transition: opacity var(--dur-fast) var(--ease-soft);
}
.post:hover .post-edit, .post-edit:focus-visible { opacity: 1; }
.post-edit:hover { color: var(--primary); background: var(--primary-soft); }
.post-edit + .post-menu { margin-inline-start: 0; }
@media (hover: none) { .post-edit { opacity: 1; } }
.post-editor { display: grid; gap: var(--s-2); margin-block-start: var(--s-3); }
.post-editor-actions { display: flex; gap: var(--s-2); }

/* ── The sign-in dialog ──
   A fixed head (who this is, and which of the two you are doing) over a body
   that scrolls when the create-account form is longer than the screen. The
   scrollbar is styled because on a 26rem dialog the platform one is a grey
   slab down the middle of the design. */
.auth-modal {
  width: min(27rem, calc(100vw - 1.5rem));
  max-block-size: min(46rem, calc(100dvh - 2rem));
  padding: 0;
  grid-template-rows: auto minmax(0, 1fr);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.auth-head {
  position: relative;
  display: grid; justify-items: center; gap: var(--s-1);
  padding: var(--s-6) var(--s-6) 0;
  background: var(--surface);
  border-block-end: 1px solid var(--border);
}
.auth-slogan { font-size: var(--text-sm); font-weight: 600; color: var(--muted); }
.auth-head .auth-tabs { margin-block-start: var(--s-4); inline-size: 100%; }
.auth-modal-close {
  position: absolute; inset-block-start: var(--s-3); inset-inline-start: var(--s-3);
  inline-size: 2rem; block-size: 2rem; display: grid; place-items: center;
  border: 0; border-radius: var(--r-full); background: var(--surface-2);
  color: var(--muted); font-size: var(--text-sm); cursor: pointer; padding: 0;
}
.auth-modal-close:hover { background: var(--surface-3); color: var(--fg); }

.auth-body {
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--s-5) var(--s-6) var(--s-6);
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
}
.auth-body::-webkit-scrollbar { width: 8px; }
.auth-body::-webkit-scrollbar-track { background: transparent; }
.auth-body::-webkit-scrollbar-thumb {
  background: var(--border-strong); border-radius: var(--r-full);
  border: 2px solid var(--surface);
}
.auth-body::-webkit-scrollbar-thumb:hover { background: var(--n-400); }
/* The fields are the reason the dialog exists: give them room. */
.auth-panel .field > span:first-child { font-size: var(--text-sm); }
.auth-panel .input { min-height: 3rem; }

/* Only when open: a `display` on the dialog itself beats the browser's own
   `dialog:not([open]) { display: none }`, and the sign-in form then appears
   in the middle of every page on the site. */
.auth-modal[open] { display: grid; }