/* CarApp 2026 — brand styles. Matches carappafrica/carapp-home-prototype.html.
   Sections are Gutenberg groups whose classNames mirror the prototype (band, wrap, svc, step...). */

:root {
  --pink: #EC3E8C;          /* logo, large headings, decoration */
  --pink-600: #D6246F;      /* buttons / white text on pink (4.8:1) */
  --pink-text: #B8145F;     /* pink text on light backgrounds (6.4:1) */
  --pink-soft: #F58CB9;     /* pink text on dark backgrounds */
  --plum: #2B0A1D;
  --plum-2: #431230;
  --ink: #1F0A14;
  --bg: #FFFAFC;
  --blush: #FBEFF4;
  --blush-2: #F5DDE7;
  --fg: #1F0A14;
  --muted: #6B5560;
  --line: #EFD9E3;
  --card: #FFFFFF;
  --on-dark: #FBF2F6;
  --on-dark-muted: #D9BCCB;
  --sea: #CFE0E6;
  /* hero + nav: light magenta (team request 2026-11-04); dark mode falls back to plum */
  --hero-bg: linear-gradient(160deg, #FFF4F9 0%, #FCE1EE 50%, #F8CCE0 100%);
  --hero-fg: #1F0A14;
  --hero-muted: #5E4653;
  --hero-accent: #D6246F;
  --hero-glow: rgba(236,62,140,.30);
  --hero-glow-2: rgba(255,255,255,.75);
  --hero-pattern: .16;
  --nav-bg: rgba(255,246,250,.94);
  --nav-fg: #5E4653;
  --nav-strong: #B8145F;
  --nav-line: #F3D3E2;
  --nav-wordmark: #EC3E8C;
  --font: "Cairo", "Segoe UI", Tahoma, sans-serif;
  --r: 18px;
  --max: 1160px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #140810; --blush: #1E0D17; --blush-2: #2A1220; --fg: #F6E9EF; --muted: #BFA6B2;
    --line: #3A1A2B; --card: #1C0C16; --pink-text: #F58CB9; --plum: #22071A; --sea: #1D2E36;
    --hero-bg: #22071A; --hero-fg: #FBF2F6; --hero-muted: #D9BCCB; --hero-accent: #EC3E8C; --hero-glow: rgba(236,62,140,.35); --hero-glow-2: rgba(67,18,48,.9); --hero-pattern: .16;
    --nav-bg: #22071A; --nav-fg: #D9BCCB; --nav-strong: #F58CB9; --nav-line: rgba(255,255,255,.08); --nav-wordmark: #FBF2F6;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #140810; --blush: #1E0D17; --blush-2: #2A1220; --fg: #F6E9EF; --muted: #BFA6B2;
  --line: #3A1A2B; --card: #1C0C16; --pink-text: #F58CB9; --plum: #22071A; --sea: #1D2E36;
  --hero-bg: #22071A; --hero-fg: #FBF2F6; --hero-muted: #D9BCCB; --hero-accent: #EC3E8C; --hero-glow: rgba(236,62,140,.35); --hero-glow-2: rgba(67,18,48,.9); --hero-pattern: .16;
  --nav-bg: #22071A; --nav-fg: #D9BCCB; --nav-strong: #F58CB9; --nav-line: rgba(255,255,255,.08); --nav-wordmark: #FBF2F6;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } }
body.carapp {
  margin: 0; background: var(--bg); color: var(--fg);
  font-family: var(--font); font-size: 17px; line-height: 1.8;
}
body.carapp::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 10; background: var(--nav-bg); }
.carapp a { color: inherit; }
.carapp :focus-visible { outline: 3px solid var(--pink); outline-offset: 3px; border-radius: 6px; }
.carapp h1, .carapp h2, .carapp h3, .carapp h4 { font-family: var(--font); font-weight: 800; line-height: 1.35; margin: 0; text-wrap: balance; color: inherit; }
.carapp h2 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); }
.carapp h3 { font-size: 1.25rem; }
.carapp p { margin: 0; }
.carapp .cp-main > *, .carapp .cp-main .wp-block-group > * { margin-block: 0; } /* spacing comes from grid gaps, not block margins */
.skip { position: absolute; inset-inline-start: 8px; top: -60px; z-index: 50; background: var(--pink-600); color: #fff; padding: 8px 14px; border-radius: 8px; }
.skip:focus { top: 8px; }
.wrap {
  max-width: var(--max); margin-inline: auto !important;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
.band { padding-block: clamp(56px, 8vw, 104px); }
.eyebrow { font-size: .85rem; font-weight: 600; color: var(--pink-text); letter-spacing: .02em; display: inline-flex; align-items: center; gap: 8px; justify-self: start; }
.eyebrow::before { content: ""; width: 22px; height: 0; border-top: 3px dotted var(--pink); }
.lede { color: var(--muted); max-width: 60ch; font-size: 1.08rem; }
.num { font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate; }

/* brand lockup: cap mark + CarApp wordmark as alpha masks so they take any token colour */
.mark, .wordmark { display: inline-block; background: currentColor; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-position: center; mask-position: center; }
.mark { -webkit-mask-image: url(../brand/cap-mark.png); mask-image: url(../brand/cap-mark.png); aspect-ratio: 600 / 314; }
.wordmark { -webkit-mask-image: url(../brand/carapp-wordmark.png); mask-image: url(../brand/carapp-wordmark.png); aspect-ratio: 700 / 181; }
.logo { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }
.logo .mark { height: 30px; color: var(--pink); }
.logo .wordmark { height: 22px; color: var(--nav-wordmark); }
.site-footer .logo .wordmark { color: var(--on-dark); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* buttons */
.btn { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font); font-weight: 700; font-size: 1rem; text-decoration: none; border-radius: 999px; padding: 13px 24px; border: 2px solid transparent; transition: transform .2s, background .2s; cursor: pointer; }
.btn:hover { transform: translateY(-2px); }
.btn-pink { background: var(--pink-600); color: #fff !important; }
.btn-pink:hover { background: var(--pink-text); }
.btn-white { background: #fff; color: #B8145F !important; }
.btn-ink { background: var(--ink); color: #FFF !important; }
.store { display: inline-flex; align-items: center; gap: 10px; background: #000; color: #fff !important; border-radius: 12px; padding: 8px 16px; text-decoration: none; border: 1px solid rgba(255,255,255,.25); line-height: 1.2; }
.store small { display: block; font-size: .7rem; opacity: .8; }
.store b { font-size: .95rem; direction: ltr; }
.store svg { width: 22px; height: 22px; fill: #fff; flex: none; }

/* NAV */
.nav { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: var(--nav-bg); color: var(--nav-fg); border-bottom: 1px solid var(--nav-line); -webkit-backdrop-filter: saturate(1.4) blur(10px); backdrop-filter: saturate(1.4) blur(10px); }
.admin-bar .nav { top: 32px; }
@media (max-width: 782px) { .admin-bar .nav { top: 0; } }
.nav .wrap { display: flex; align-items: center; gap: 20px; min-height: 68px; }
.nav ul { display: flex; gap: 22px; list-style: none; margin: 0; padding: 0; font-size: .95rem; }
.nav ul a { text-decoration: none; color: var(--nav-fg); font-weight: 600; }
.nav ul a:hover { color: var(--nav-strong); }
.nav .spacer { flex: 1; }
.lang { display: inline-flex; border: 1px solid var(--nav-line); border-radius: 999px; overflow: hidden; font-size: .8rem; list-style: none; margin: 0; padding: 0; }
.lang a { display: grid; place-items: center; min-width: 40px; height: 30px; color: var(--nav-fg); padding: 0 11px; text-decoration: none; line-height: 1; }
.lang a[lang="ar"] { font-size: 1rem; font-weight: 700; padding-bottom: 3px; }
.lang a[aria-current="true"] { background: var(--pink-600); color: #fff; font-weight: 700; }
.nav .call { font-weight: 700; color: var(--nav-strong); text-decoration: none; display: inline-flex; gap: 6px; align-items: center; }
@media (max-width: 940px) { .nav ul.menu { display: none; } }
/* mobile menu: <details>, no JavaScript */
.mnav { display: none; position: relative; }
.mnav summary { list-style: none; cursor: pointer; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; border: 1px solid var(--nav-line); }
.mnav summary::-webkit-details-marker { display: none; }
.mnav summary span, .mnav summary span::before, .mnav summary span::after { display: block; width: 18px; height: 2px; background: var(--nav-strong); border-radius: 2px; position: relative; content: ""; }
.mnav summary span::before { position: absolute; top: -6px; } .mnav summary span::after { position: absolute; top: 6px; }
.mnav[open] summary { background: var(--blush); }
.nav .mnav ul { position: absolute; inset-inline-end: 0; top: 52px; display: grid; gap: 0; min-width: 220px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 8px; box-shadow: 0 20px 40px rgba(107,20,62,.15); }
.nav .mnav ul a { display: block; padding: 10px 12px; border-radius: 10px; color: var(--fg); }
.nav .mnav ul a:hover { background: var(--blush); }
@media (max-width: 940px) { .mnav { display: block; } }
@media (max-width: 520px) { .nav .call span { display: none; } .logo .wordmark { display: none; } .nav .wrap { gap: 10px; } .lang { flex: none; } .lang a { min-width: 32px; padding: 0 7px; } }

/* HERO */
.hero { position: relative; background: var(--hero-bg); color: var(--hero-fg); overflow: hidden; isolation: isolate; }
.hero::before {
  content: ""; position: absolute; inset: 0; opacity: var(--hero-pattern); pointer-events: none; z-index: -1;
  background-image: url(../img/pattern-mauritania.svg); background-size: 72px 72px;
  background-position: var(--px, 0px) var(--py, 0px);
  mask-image: linear-gradient(to left, transparent 0%, transparent 30%, #000 72%);
  -webkit-mask-image: linear-gradient(to left, transparent 0%, transparent 30%, #000 72%);
}
/* Moving light: follows the mouse on desktop (assets/js/hero-fx.js); drifts slowly by itself on touch screens.
   Both glows only animate transform, so they stay on the compositor. */
.hero::after, .hero > .wrap::before {
  content: ""; position: absolute; left: 0; top: 0; border-radius: 50%; pointer-events: none; will-change: transform;
}
.hero::after { width: 640px; height: 640px; z-index: -1; background: radial-gradient(circle, var(--hero-glow) 0%, transparent 65%);
  transform: translate3d(calc(var(--gx, 30vw) - 50%), calc(var(--gy, 160px) - 50%), 0);
  animation: hero-drift-a 26s ease-in-out infinite alternate; }
.hero > .wrap::before { width: 520px; height: 520px; z-index: -1; background: radial-gradient(circle, var(--hero-glow-2) 0%, transparent 62%);
  animation: hero-drift-b 34s ease-in-out infinite alternate; }
.hero.fx-mouse::after { animation: none; }
@keyframes hero-drift-a {
  0%   { transform: translate3d(calc(15vw - 50%), -20%, 0); }
  35%  { transform: translate3d(calc(55vw - 50%), 25%, 0); }
  70%  { transform: translate3d(calc(30vw - 50%), 70%, 0); }
  100% { transform: translate3d(calc(70vw - 50%), 10%, 0); }
}
@keyframes hero-drift-b {
  0%   { transform: translate3d(calc(60vw - 50%), 60%, 0); }
  50%  { transform: translate3d(calc(20vw - 50%), 10%, 0); }
  100% { transform: translate3d(calc(45vw - 50%), 85%, 0); }
}
.hero .wrap { position: relative; z-index: 1; display: grid; grid-template-columns: 1.15fr .85fr; gap: 48px; align-items: center; padding-block: clamp(48px, 7vw, 88px); }
.hero-copy { min-width: 0; display: grid; gap: 22px; justify-items: start; }
/* inline-block, not flex: flex would split the Arabic text and the year into separate items and break their order */
.first-badge { display: inline-block; background: rgba(236,62,140,.10); border: 1px solid rgba(214,36,111,.35); color: var(--pink-text); border-radius: 999px; padding: 6px 16px; font-size: .9rem; font-weight: 600; }
.carapp .hero h1 { font-size: clamp(2.2rem, 5.4vw, 4rem); line-height: 1.25; }
.hero h1 em { font-style: normal; color: var(--hero-accent); }
.hero .lede { color: var(--hero-muted); font-size: 1.15rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.hotline { padding-top: 6px; color: var(--hero-muted); font-size: .95rem; }
.hotline strong { font-size: 1.9rem; color: var(--hero-fg); margin-inline-start: 10px; vertical-align: middle; letter-spacing: .04em; font-variant-numeric: tabular-nums; }
@media (max-width: 860px) { .hero .wrap { grid-template-columns: 1fr; } }

/* APP SCREENSHOTS (Media Library images, transparent rounded corners) */
.carapp .wp-block-image { margin: 0; }
.carapp .wp-block-image img { display: block; width: 100%; height: auto; }
.hero-shot { justify-self: center; width: min(310px, 78vw); }
.hero-shot img { filter: drop-shadow(0 30px 40px rgba(107,20,62,.28)); }
.call-shot img { border-radius: var(--r); box-shadow: 0 20px 50px rgba(107,20,62,.18); }

/* TRUST STRIP (facts only, no unverified numbers) */
.trust { background: var(--pink-600); color: #fff; }
.trust .wrap { display: grid; grid-template-columns: repeat(4, 1fr); padding-block: 22px; gap: 16px; }
.trust .wrap > div { display: grid; gap: 2px; text-align: center; }
.trust b { font-size: 1.5rem; font-weight: 800; }
.trust span { font-size: .85rem; }
@media (max-width: 720px) { .trust .wrap { grid-template-columns: repeat(2, 1fr); } }

/* NEW USERS OFFER */
.promo { padding-block: clamp(40px, 6vw, 72px); }
.promo .wrap { display: grid; grid-template-columns: 1.25fr .75fr; gap: 40px; align-items: center; }
.promo-shot img { border-radius: var(--r); box-shadow: 0 20px 50px rgba(107,20,62,.18); }
.promo .copy { display: grid; gap: 14px; justify-items: start; min-width: 0; }
.promo .lede { color: var(--fg); }
@media (max-width: 860px) { .promo .wrap { grid-template-columns: 1fr; gap: 24px; } }

/* ABOUT */
.whatis .wrap { display: grid; grid-template-columns: .9fr 1.1fr; gap: 56px; align-items: start; }
.whatis .head { display: grid; gap: 14px; align-content: start; }
.whatis .body { min-width: 0; }
.carapp .about-title { font-size: clamp(2.8rem, 6.5vw, 4.8rem); line-height: 1.15; color: var(--pink-text); }
.about-title::after { content: ""; display: block; width: 72px; margin-top: 18px; border-top: 4px dotted var(--pink); }
.definition { font-size: clamp(1.15rem, 2vw, 1.4rem); line-height: 1.9; border-inline-start: 4px solid var(--pink); padding-inline-start: 24px; min-width: 0; }
.definition strong { color: var(--pink-text); }
.facts { display: grid; grid-template-columns: repeat(3, 1fr); margin: 28px 0 0; border-top: 1px solid var(--line); column-gap: 16px; }
.facts div { padding: 16px 0; display: grid; gap: 2px; }
.facts dt { font-size: .8rem; color: var(--muted); }
.facts dd { margin: 0; font-weight: 600; }
@media (max-width: 860px) { .whatis .wrap { grid-template-columns: 1fr; gap: 28px; } .facts { grid-template-columns: 1fr 1fr; } }

/* SERVICES */
.services { background: var(--blush); }
.section-head { display: flex; justify-content: space-between; align-items: end; gap: 24px; flex-wrap: wrap; margin-bottom: 40px !important; }
.section-head > div { display: grid; gap: 12px; }
.svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.svc { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 28px; display: grid; gap: 14px; align-content: start; }
.svc .tag { font-size: .78rem; font-weight: 600; color: var(--muted); }
.svc ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; font-size: .95rem; color: var(--muted); }
.svc li::before { content: "◆"; color: var(--pink); font-size: .6rem; margin-inline-end: 10px; vertical-align: middle; }
.svc.plus { background: var(--plum); color: var(--on-dark); border-color: var(--plum); }
.svc.plus .tag, .svc.plus ul { color: var(--on-dark-muted); }
.svc .icon { width: 48px; height: 48px; border-radius: 14px; background: var(--blush-2); display: grid; place-items: center; }
.svc.plus .icon { background: var(--plum-2); }
.svc .icon svg { width: 26px; height: 26px; stroke: var(--pink-text); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.svc.plus .icon svg { stroke: var(--pink-soft); }
@media (max-width: 900px) { .svc-grid { grid-template-columns: 1fr; } }

/* HOW */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; position: relative; }
.steps::before { content: ""; position: absolute; top: 26px; inset-inline: 8% 8%; border-top: 3px dotted var(--pink); }
.step { position: relative; display: grid; gap: 10px; justify-items: start; align-content: start; }
.step .n { width: 54px; height: 54px; border-radius: 50%; background: var(--pink-600); color: #fff; font-size: 1.5rem; font-weight: 800; display: grid; place-items: center; box-shadow: 0 0 0 8px var(--bg); line-height: 1; }
.step p { color: var(--muted); }
.ways { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; width: 100%; }
.ways li { display: flex; align-items: center; gap: 10px; background: var(--blush); border: 1px solid var(--line); border-radius: 12px; padding: 7px 12px; font-size: .92rem; font-weight: 500; }
.ways li::before { content: ""; width: 18px; height: 18px; flex: none; background: var(--pink-text); -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat; }
.ways li:nth-child(1) { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'%3E%3Crect x='9' y='3' width='6' height='11' rx='3'/%3E%3Cpath d='M5 11a7 7 0 0 0 14 0M12 18v3'/%3E%3C/svg%3E"); }
.ways li:nth-child(2) { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M12 8v4l3 2'/%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3C/svg%3E"); }
.ways li:nth-child(3) { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M4 7V5h16v2M9 19h6M12 5v14'/%3E%3C/svg%3E"); }
.ways li:nth-child(4) { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M12 21s-6-5.3-6-11a6 6 0 0 1 12 0c0 5.7-6 11-6 11z'/%3E%3Ccircle cx='12' cy='10' r='2'/%3E%3C/svg%3E"); }
@media (max-width: 760px) { .steps { grid-template-columns: 1fr; } .steps::before { display: none; } }

/* IN-APP CALL */
.call { background: var(--blush); }
.call .wrap { display: grid; grid-template-columns: .85fr 1.15fr; gap: 48px; align-items: center; }
.call .copy { display: grid; gap: 16px; min-width: 0; }
.points { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.points li { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 12px 16px; padding-inline-start: 44px; position: relative; }
.points li::before { content: ""; position: absolute; inset-inline-start: 14px; top: 17px; width: 18px; height: 18px; background: var(--pink-600); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat; }
.points strong { color: var(--pink-text); }
@media (max-width: 860px) { .call .wrap { grid-template-columns: 1fr; gap: 32px; } }

/* ALFANI (share a place) */
.alfani .wrap { display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: center; }
.alfani .copy { display: grid; gap: 16px; min-width: 0; }
.chat.share { border: 1px solid var(--line); box-shadow: 0 20px 50px rgba(107,20,62,.12); max-width: 420px; justify-self: center; width: 100%; }
.link-card { justify-self: end; display: flex; gap: 12px; align-items: center; background: var(--blush); border: 1px solid var(--line); border-radius: 14px; padding: 10px 14px; font-size: .9rem; line-height: 1.5; max-width: 85%; }
.link-card .pin { width: 36px; height: 36px; border-radius: 10px; background: var(--pink-600); flex: none; -webkit-mask: none; position: relative; }
.link-card .pin::after { content: ""; position: absolute; inset: 8px; background: #fff; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M12 21s-6-5.3-6-11a6 6 0 0 1 12 0c0 5.7-6 11-6 11z'/%3E%3Ccircle cx='12' cy='10' r='2'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M12 21s-6-5.3-6-11a6 6 0 0 1 12 0c0 5.7-6 11-6 11z'/%3E%3Ccircle cx='12' cy='10' r='2'/%3E%3C/svg%3E") center / contain no-repeat; }
.chat.share .me::before { display: none; }
@media (max-width: 860px) { .alfani .wrap { grid-template-columns: 1fr; gap: 32px; } }

/* SAFETY */
.safety { background: var(--plum); color: var(--on-dark); }
.safety .wrap { display: grid; gap: 12px; }
.safety .eyebrow { color: var(--pink-soft); }
.safety .lede { color: var(--on-dark-muted); }
.safe-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: rgba(245,140,185,.2); border-radius: var(--r); overflow: hidden; margin-top: 28px !important; }
.safe-grid > div { background: var(--plum); padding: 26px; display: grid; gap: 8px; align-content: start; }
.carapp .safe-grid h3 { font-size: 1.1rem; color: var(--pink-soft); }
.safe-grid p { color: var(--on-dark-muted); font-size: .95rem; }
@media (max-width: 900px) { .safe-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .safe-grid { grid-template-columns: 1fr; } }

/* COVERAGE */
.coverage .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.coverage .copy { display: grid; gap: 16px; min-width: 0; }
.hoods { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.hoods li { border: 1px solid var(--line); background: var(--card); border-radius: 999px; padding: 5px 14px; font-size: .9rem; }
.coverage .note { font-size: .95rem; color: var(--muted); }
.coverage .note strong { color: var(--fg); }
.mapbox { background: var(--blush); border-radius: var(--r); padding: 12px; max-width: 100%; }
.mapbox svg { width: 100%; height: auto; display: block; direction: ltr; } /* label x-positions assume left-to-right text runs */
.mapbox .label { font-family: var(--font); font-size: 13px; fill: var(--fg); }
.mapbox .sea { font-family: var(--font); font-size: 12px; fill: var(--muted); letter-spacing: .1em; }
@media (max-width: 860px) { .coverage .wrap { grid-template-columns: 1fr; } }

/* VOICE PILOT (pink band with the big cap mark) */
.voice { background: var(--pink-600); color: #fff; position: relative; overflow: hidden; }
.voice .wrap { display: grid; grid-template-columns: 1.2fr .8fr; gap: 40px; align-items: center; position: relative; }
.voice .bigmark { position: absolute; inset-inline-start: -40px; bottom: -70px; height: 260px; color: rgba(255,255,255,.08); pointer-events: none; }
.voice .eyebrow { color: #fff; }
.voice .eyebrow::before { border-color: #fff; }
.voice .copy { display: grid; gap: 16px; min-width: 0; position: relative; justify-items: start; }
.voice .lede { color: #FFFFFF; }
.chat { background: #fff; color: #1F0A14; border-radius: var(--r); padding: 24px; display: grid; gap: 12px; position: relative; }
.chat .bubble { max-width: 85%; padding: 10px 16px; border-radius: 18px; font-weight: 600; font-size: 1.05rem; line-height: 1.6; }
.chat .bot { background: var(--blush); color: #1F0A14; justify-self: start; border-end-start-radius: 4px; }
.chat .me { background: #2B0A1D; color: #FBF2F6; justify-self: end; border-end-end-radius: 4px; display: flex; align-items: center; gap: 10px; }
.chat .me::before { content: ""; width: 16px; height: 16px; background: #F58CB9; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Crect x='9' y='3' width='6' height='11' rx='3'/%3E%3Cpath d='M5 11a7 7 0 0 0 14 0M12 18v3'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Crect x='9' y='3' width='6' height='11' rx='3'/%3E%3Cpath d='M5 11a7 7 0 0 0 14 0M12 18v3'/%3E%3C/svg%3E") center / contain no-repeat; }
.chat .hint { font-size: .8rem; color: #6B5560; }
@media (max-width: 860px) { .voice .wrap { grid-template-columns: 1fr; } }

/* FAQ */
.faq .wrap { display: grid; grid-template-columns: .8fr 1.2fr; gap: 48px; }
.faq .head { display: grid; gap: 14px; align-content: start; }
.qa { border-top: 1px solid var(--line); }
.qa details { border-bottom: 1px solid var(--line); }
.qa summary { cursor: pointer; list-style: none; padding: 18px 0; font-weight: 600; font-size: 1.05rem; display: flex; justify-content: space-between; gap: 16px; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: "+"; color: var(--pink-text); font-size: 1.3rem; line-height: 1; }
.qa details[open] summary::after { content: "−"; }
.qa details p { padding-bottom: 18px; color: var(--muted); max-width: 62ch; }
@media (max-width: 860px) { .faq .wrap { grid-template-columns: 1fr; gap: 24px; } }

/* FOOTER */
.site-footer { background: var(--plum); color: var(--on-dark-muted); font-size: .92rem; }
.site-footer .wrap { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; padding-block: 56px 40px; }
.site-footer h2 { color: var(--on-dark); margin: 0 0 12px; font-size: 1rem; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.site-footer a { text-decoration: none; }
.site-footer a:hover { color: var(--pink-soft); }
.site-footer .about { display: grid; gap: 14px; justify-items: start; }
.site-footer .about .logo .mark { height: 40px; }
.site-footer .about .logo .wordmark { height: 28px; display: inline-block; }
.site-footer .hot { color: var(--pink-soft); font-size: 1.2rem; }
.site-footer h2.follow { margin-top: 20px; }
.site-footer ul.social { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.site-footer .bottom { border-top: 1px solid rgba(255,255,255,.1); font-size: .82rem; }
.site-footer .bottom .wrap { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; padding-block: 18px calc(18px + 64px); }
@media (min-width: 761px) { .site-footer .bottom .wrap { padding-block: 18px; } }
@media (max-width: 860px) { .site-footer .wrap { grid-template-columns: 1fr 1fr; } }

/* mobile sticky CTA */
.mcta { display: none; }
@media (max-width: 760px) {
  .mcta { display: flex; gap: 10px; position: fixed; inset: auto 0 0 0; z-index: 30; background: var(--bg); border-top: 1px solid var(--line);
    padding: 10px max(16px, env(safe-area-inset-right, 0px)) calc(10px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); }
  .mcta .btn { flex: 1; justify-content: center; padding: 11px 14px; }
}

/* INNER PAGES */
.page-body { padding-block: clamp(40px, 6vw, 80px); }
.page-body .wrap > * + * { margin-top: 1em; }
.page-hero { position: relative; background: var(--hero-bg); color: var(--hero-fg); overflow: hidden; isolation: isolate; }
.page-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: var(--hero-pattern); background: url(../img/pattern-mauritania.svg) 0 0 / 72px 72px;
  -webkit-mask-image: linear-gradient(to left, transparent 0%, transparent 45%, #000 90%); mask-image: linear-gradient(to left, transparent 0%, transparent 45%, #000 90%); }
.page-hero .wrap { display: grid; gap: 14px; padding-block: clamp(36px, 6vw, 72px); justify-items: start; }
.carapp .page-hero h1 { font-size: clamp(2rem, 4.6vw, 3.2rem); line-height: 1.3; max-width: 22ch; }
.page-hero .lede { color: var(--hero-muted); font-size: 1.12rem; }
.crumbs { font-size: .85rem; color: var(--hero-muted); }
.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.crumbs li + li::before { content: "‹"; margin-inline-end: 6px; color: var(--pink-text); }
.crumbs a { color: var(--pink-text); text-decoration: none; }
.prose-band { padding-block: clamp(40px, 6vw, 72px); }
.prose-band.alt { background: var(--blush); }
.prose { display: grid; gap: 16px; justify-items: start; }
.prose > * { max-width: 760px; width: 100%; }
.prose > .shot-row { max-width: none; }
.carapp .prose h2 { font-size: clamp(1.4rem, 2.6vw, 1.9rem); margin-top: 8px; }
.carapp .prose h3 { font-size: 1.15rem; }
.prose ul:not(.points), .prose ol { margin: 0; padding-inline-start: 1.3em; display: grid; gap: 6px; }
.prose li::marker { color: var(--pink); }
.prose a { color: var(--pink-text); }
.prose strong { color: var(--fg); }
.prose .wp-block-table { margin: 8px 0; overflow-x: auto; }
.prose table { width: 100%; border-collapse: collapse; background: var(--card); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; font-size: .97rem; }
.prose th, .prose td { padding: 12px 14px; text-align: start; border-bottom: 1px solid var(--line); vertical-align: top; }
.prose thead th { background: var(--blush-2); font-weight: 700; }
.prose .qa { margin-top: 8px; }
.svc a.more { font-weight: 700; color: var(--pink-text); text-decoration: none; margin-top: 4px; }
.svc.plus a.more { color: var(--pink-soft); }
.cta-band { background: var(--pink-600); color: #fff; padding-block: clamp(40px, 6vw, 64px); }
.cta-band .wrap { display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center; }
.cta-band .copy { display: grid; gap: 10px; }
.cta-band .lede { color: #FFFFFF; }
.cta-band .hero-actions .store { border-color: rgba(255,255,255,.4); }
@media (max-width: 760px) { .cta-band .wrap { grid-template-columns: 1fr; } }
.shot-row { display: flex; flex-wrap: wrap; gap: 24px; justify-content: center; margin-block: 8px; }
.shot-row .wp-block-image { width: min(240px, 70vw); }
.shot-row img { filter: drop-shadow(0 20px 30px rgba(107,20,62,.2)); }

/* LEFT-TO-RIGHT pages (/fr/, /en/): mirror the direction-dependent decorations */
[dir="ltr"] .hero::before { -webkit-mask-image: linear-gradient(to right, transparent 0%, transparent 30%, #000 72%); mask-image: linear-gradient(to right, transparent 0%, transparent 30%, #000 72%); }
[dir="ltr"] .page-hero::before { -webkit-mask-image: linear-gradient(to right, transparent 0%, transparent 45%, #000 90%); mask-image: linear-gradient(to right, transparent 0%, transparent 45%, #000 90%); }
[dir="ltr"] .crumbs li + li::before { content: "›"; }
[dir="ltr"] .carapp h1, [dir="ltr"] .carapp h2 { letter-spacing: -.01em; }