/* Dash website. Tokens are the app's (delivery-app-client lib/core/design/tokens.dart):
   forest green brand, lime accent, pale green canvas, 19px panels, Inter. */

:root {
    --ink: #17251f;
    --muted: #646f67;
    --canvas: #f4f7f4;
    --card: #ffffff;
    --field: #fbfcfb;
    --line: #e7ece7;
    --brand: #174b38;
    --on-brand: #ffffff;
    --accent: #c7f36a;
    --on-accent: #174b38;
    --soft: #edf5ed;
    --success-bg: #edf6e7;
    --success-fg: #387044;
    --progress-bg: #fff0df;
    --progress-fg: #a85b17;
    --danger-bg: #fde8e6;
    --danger-fg: #b3261e;
    --destination: #c2601c;
    --route: #1c6545;
    --map-bg: #e8f0e6;
    --map-street: #ffffff;
    --map-block: #d4e1d0;
    --logo-bg: #174b38;
    --phone-frame: #17251f;
    --shadow: 0 18px 50px rgba(23, 75, 56, .12);
    --shadow-sm: 0 5px 12px rgba(23, 75, 56, .10);

    --radius-field: 11px;
    --radius-button: 12px;
    --radius-tile: 13px;
    --radius-map: 15px;
    --radius-panel: 19px;
    --radius-band: 28px;

    --font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    --gutter: 20px;
    --max: 1200px;

    color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
    :root {
        --ink: #e6eee8;
        --muted: #9daaa1;
        --canvas: #0e1813;
        --card: #16231c;
        --field: #1b2a22;
        --line: #26372e;
        --brand: #9bd9b1;
        --on-brand: #0b2a1e;
        --soft: #1e3328;
        --success-bg: #1d3524;
        --success-fg: #a6ddb2;
        --progress-bg: #3a2914;
        --progress-fg: #f6c08a;
        --danger-bg: #3b1a18;
        --danger-fg: #f2b8b5;
        --route: #9bd9b1;
        --map-bg: #17271f;
        --map-street: #24372d;
        --map-block: #1d2f25;
        --phone-frame: #050a07;
        --shadow: 0 18px 50px rgba(0, 0, 0, .45);
        --shadow-sm: 0 5px 12px rgba(0, 0, 0, .35);
    }
}

:lang(ar) {
    --font: "Noto Sans Arabic", "Inter", ui-sans-serif, system-ui, sans-serif;
}

/* ------------------------------------------------------------------ base */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

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

body {
    margin: 0;
    background: var(--canvas);
    color: var(--ink);
    font: 16px/1.55 var(--font);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

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

a { color: var(--brand); text-decoration-thickness: 1px; text-underline-offset: 3px; }

h1, h2, h3 { margin: 0 0 .5em; line-height: 1.12; font-weight: 800; letter-spacing: -.03em; text-wrap: balance; }
h1 { font-size: clamp(2.2rem, 1.4rem + 3.4vw, 3.6rem); letter-spacing: -.045em; }
h2 { font-size: clamp(1.7rem, 1.25rem + 1.8vw, 2.5rem); }
h3, .h3 { font-size: 1.15rem; letter-spacing: -.02em; }
:lang(ar) :is(h1, h2, h3, .h3) { letter-spacing: 0; line-height: 1.3; }

p { margin: 0 0 1em; }

.lead { font-size: clamp(1.05rem, 1rem + .3vw, 1.2rem); color: var(--muted); max-width: 60ch; }
.muted { color: var(--muted); }
.small { font-size: .85rem; }

:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 6px; }

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

.skip-link {
    position: absolute; inset-inline-start: 16px; top: -60px; z-index: 100;
    background: var(--brand); color: var(--on-brand); padding: 10px 16px; border-radius: var(--radius-button);
    font-weight: 700; text-decoration: none;
}
.skip-link:focus { top: 12px; }

.container { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; }
.narrow { width: min(100% - 2 * var(--gutter), 820px); }

/* Arrows that point "forward" turn around in Arabic; "back" arrows the other way. */
[dir="rtl"] .icon-flip, .icon-back { transform: scaleX(-1); }
[dir="rtl"] .icon-back { transform: none; }

/* ------------------------------------------------------------------ atoms */

.eyebrow {
    margin: 0 0 12px; font-size: .75rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--muted);
}
:lang(ar) .eyebrow { letter-spacing: 0; font-size: .85rem; }
.eyebrow--on-brand { color: var(--accent); }

.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 44px; padding: 11px 18px; border-radius: var(--radius-button); border: 0;
    font: inherit; font-weight: 700; font-size: .95rem; line-height: 1.2; text-decoration: none; cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.btn svg { width: 18px; height: 18px; flex: none; }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn--primary { background: var(--logo-bg); color: #fff; box-shadow: var(--shadow-sm); }
.btn--primary:hover { background: #1c5b44; }
.btn--accent { background: var(--accent); color: var(--on-accent); box-shadow: 0 5px 12px rgba(150, 200, 60, .25); }
.btn--accent:hover { background: #d3f785; }
.btn--ghost { background: var(--soft); color: var(--brand); }
.btn--sm { min-height: 38px; padding: 8px 14px; font-size: .88rem; }
.btn--lg { min-height: 52px; padding: 14px 22px; font-size: 1rem; }
.btn--xs { min-height: 0; padding: 6px 10px; font-size: .72rem; gap: 4px; border-radius: 9px; }
.btn--xs svg { width: 13px; height: 13px; }

.btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

.link-arrow {
    display: inline-flex; align-items: center; gap: 6px; margin-top: 8px;
    font-weight: 700; color: var(--brand); text-decoration: none;
}
.link-arrow svg { width: 18px; height: 18px; transition: translate .15s ease; }
.link-arrow:hover svg { translate: 3px 0; }
[dir="rtl"] .link-arrow:hover svg { translate: -3px 0; }

.pill {
    display: inline-flex; align-items: center; gap: 5px; border-radius: 99px; padding: 5px 10px;
    font-size: .7rem; font-weight: 800; white-space: nowrap; background: var(--success-bg); color: var(--success-fg);
}
.pill--progress { background: var(--progress-bg); color: var(--progress-fg); }
.pill--danger { background: var(--danger-bg); color: var(--danger-fg); }
.pill--live::before {
    content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor;
    animation: pulse 1.6s ease-in-out infinite;
}
@keyframes pulse { 50% { opacity: .35; } }

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 26px 0 0; padding: 0; list-style: none; }
.chip {
    display: inline-flex; align-items: center; gap: 7px; padding: 8px 12px; border-radius: 99px;
    background: var(--card); border: 1px solid var(--line); font-size: .85rem; font-weight: 600;
}
.chip svg { width: 16px; height: 16px; color: var(--brand); }

.icon-tile {
    display: grid; place-items: center; flex: none; width: 46px; height: 46px; border-radius: var(--radius-tile);
    background: var(--soft); color: var(--brand);
}
.icon-tile svg { width: 23px; height: 23px; }
.icon-tile--accent { background: var(--accent); color: var(--on-accent); }
.icon-tile--warn { background: var(--progress-bg); color: var(--progress-fg); }

.card, .panel {
    background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-panel); padding: 24px;
}
.panel { padding: 20px; box-shadow: var(--shadow); }
.panel--tight { padding: 12px; box-shadow: none; border-radius: 16px; }
.panel__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.panel__head strong { display: inline-flex; align-items: center; gap: 8px; }
.panel__head svg { width: 18px; height: 18px; }
.panel__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; font-size: .85rem; }

.check-list { display: grid; gap: 12px; margin: 22px 0 26px; padding: 0; list-style: none; }
.check-list li { display: flex; gap: 10px; align-items: flex-start; }
.check-list svg { width: 22px; height: 22px; flex: none; color: var(--success-fg); margin-top: 1px; }

/* ------------------------------------------------------------------ header */

.site-header {
    position: sticky; top: 0; z-index: 50;
    background: color-mix(in srgb, var(--card) 88%, transparent);
    backdrop-filter: saturate(1.4) blur(14px);
    border-bottom: 1px solid var(--line);
}
.header-inner { display: flex; align-items: center; gap: 28px; min-height: 70px; }

.brand {
    display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none;
    font-weight: 850; font-size: 1.3rem; letter-spacing: -.04em;
}
.logo-mark { width: 36px; height: 36px; flex: none; }

.header-panel { display: flex; align-items: center; flex: 1; gap: 24px; }
.site-nav { display: flex; gap: 4px; }
.site-nav a {
    padding: 9px 12px; border-radius: var(--radius-field); color: var(--muted); font-weight: 600; font-size: .95rem; text-decoration: none;
}
.site-nav a:hover, .site-nav a[aria-current="page"] { background: var(--soft); color: var(--brand); }
.site-nav a[aria-current="page"] { font-weight: 750; }

.header-actions { display: flex; align-items: center; gap: 10px; margin-inline-start: auto; }

.lang { position: relative; }
.lang summary {
    display: flex; align-items: center; gap: 6px; padding: 8px 10px; border-radius: var(--radius-field);
    cursor: pointer; list-style: none; font-weight: 700; font-size: .85rem; color: var(--muted);
}
.lang summary::-webkit-details-marker { display: none; }
.lang summary:hover, .lang[open] summary { background: var(--soft); color: var(--brand); }
.lang summary svg { width: 18px; height: 18px; }
.lang ul {
    position: absolute; inset-inline-end: 0; top: calc(100% + 8px); min-width: 160px; margin: 0; padding: 6px; list-style: none;
    background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-tile); box-shadow: var(--shadow);
}
.lang a { display: block; padding: 9px 12px; border-radius: 9px; color: var(--ink); text-decoration: none; font-weight: 600; }
.lang a:hover { background: var(--soft); }
.lang a[aria-current="true"] { color: var(--brand); background: var(--soft); }

.nav-toggle {
    display: none; margin-inline-start: auto; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: var(--radius-button);
    background: var(--card); color: var(--ink); cursor: pointer; place-items: center;
}
.nav-toggle svg { width: 22px; height: 22px; }
.nav-toggle .icon-close { display: none; }
.site-header[data-open="true"] .nav-toggle .icon-open { display: none; }
.site-header[data-open="true"] .nav-toggle .icon-close { display: block; }

@media (max-width: 980px) {
    .nav-toggle { display: grid; }
    .header-panel {
        display: none; position: absolute; inset-inline: 0; top: 100%; flex-direction: column; align-items: stretch; gap: 14px;
        padding: 14px var(--gutter) 22px; background: var(--card); border-bottom: 1px solid var(--line); box-shadow: var(--shadow);
    }
    .site-header[data-open="true"] .header-panel { display: flex; }
    .site-nav { flex-direction: column; }
    .site-nav a { padding: 12px; font-size: 1rem; }
    .header-actions { margin: 0; justify-content: space-between; }
    .lang ul { inset-inline-end: auto; inset-inline-start: 0; top: auto; bottom: calc(100% + 8px); }
}

/* ------------------------------------------------------------------ sections */

.section { padding: clamp(56px, 8vw, 104px) 0; }
.section--tight { padding-top: 8px; }
.section--surface { background: var(--card); border-block: 1px solid var(--line); }

.section-head { max-width: 680px; margin-bottom: 40px; }
.section-head p:not(.eyebrow) { color: var(--muted); font-size: 1.05rem; }

.grid { display: grid; gap: 16px; }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1020px) { .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .grid--2, .grid--3 { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .grid--4 { grid-template-columns: 1fr; } }

.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 80px); align-items: center; }
.split--reverse > :first-child { order: 2; }
@media (max-width: 900px) {
    .split { grid-template-columns: 1fr; }
    .split--reverse > :first-child { order: 0; }
}

.section--surface .card { background: var(--canvas); }

.feature h3, .vehicle h3 { margin-top: 18px; }
.feature p, .vehicle p { margin: 0; color: var(--muted); font-size: .95rem; }
.feature--row { display: flex; gap: 18px; align-items: flex-start; }
.feature--row h3 { margin-top: 0; }

.vehicle { position: relative; overflow: hidden; }
.vehicle .icon-tile { width: 56px; height: 56px; background: var(--brand); color: var(--accent); }
@media (prefers-color-scheme: dark) { .vehicle .icon-tile { background: var(--logo-bg); } }
.vehicle .icon-tile svg { width: 28px; height: 28px; }

/* ------------------------------------------------------------------ hero */

.hero {
    position: relative; overflow: hidden; padding: clamp(40px, 6vw, 84px) 0 clamp(56px, 7vw, 96px);
    background:
        radial-gradient(60% 70% at 85% 20%, color-mix(in srgb, var(--accent) 28%, transparent), transparent 70%),
        linear-gradient(180deg, transparent 60%, color-mix(in srgb, var(--soft) 80%, transparent));
}
[dir="rtl"] .hero {
    background:
        radial-gradient(60% 70% at 15% 20%, color-mix(in srgb, var(--accent) 28%, transparent), transparent 70%),
        linear-gradient(180deg, transparent 60%, color-mix(in srgb, var(--soft) 80%, transparent));
}
.hero__grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.hero h1 { max-width: 14ch; }
.hero--page h1 { max-width: 18ch; }
.hero--compact { padding-bottom: 32px; }
.hero--compact h1 { max-width: none; }
@media (max-width: 900px) {
    .hero__grid { grid-template-columns: 1fr; }
}

.breadcrumb ol { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 22px; padding: 0; list-style: none; font-size: .85rem; color: var(--muted); }
.breadcrumb li + li::before { content: "/"; margin-inline-end: 8px; opacity: .5; }
.breadcrumb a { color: var(--muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--brand); text-decoration: underline; }

/* ------------------------------------------------------------------ phone mockup */

.mockup { position: relative; margin: 0; justify-self: center; width: min(100%, 360px); padding-block: 10px 36px; }

.phone {
    position: relative; border-radius: 42px; padding: 10px; background: var(--phone-frame);
    box-shadow: 0 40px 80px rgba(23, 37, 31, .28), inset 0 0 0 2px rgba(255, 255, 255, .06);
}
.phone__notch { position: absolute; top: 18px; left: 50%; translate: -50% 0; width: 92px; height: 24px; border-radius: 99px; background: var(--phone-frame); z-index: 2; }
.phone__screen { border-radius: 33px; background: var(--canvas); padding: 50px 14px 16px; overflow: hidden; font-size: 13px; line-height: 1.4; }
.phone__screen .eyebrow { margin-bottom: 4px; font-size: 9.5px; }
.phone__title { margin: 0 0 12px; font-size: 22px; font-weight: 800; letter-spacing: -.04em; line-height: 1.15; }
:lang(ar) .phone__title { letter-spacing: 0; }

.mini-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 10px; }
.stat { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px; }
.stat__label { display: block; font-size: 10.5px; color: var(--muted); }
.stat__num { display: block; margin-top: 2px; font-size: 19px; font-weight: 850; letter-spacing: -.03em; }

.phone .panel__head { margin-bottom: 8px; font-size: 12.5px; }
.phone .panel__foot { margin-top: 8px; font-size: 11px; }

.shipment-row { display: flex; align-items: center; gap: 10px; padding: 10px 2px; border-top: 1px solid var(--line); }
.phone .shipment-row:first-of-type { margin-top: 6px; }
.route-icon { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 11px; background: var(--soft); color: var(--brand); }
.route-icon svg { width: 17px; height: 17px; }
.shipment-row__main { flex: 1; min-width: 0; }
.shipment-row__main strong { display: block; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.shipment-row__main small { display: block; color: var(--muted); font-size: 10.5px; }
.shipment-row__end { display: grid; justify-items: end; gap: 4px; font-size: 12px; }
.shipment-row__end .pill { font-size: 9.5px; padding: 3px 8px; }

.toast-card {
    position: absolute; inset-inline-start: -34px; bottom: 0; display: flex; align-items: center; gap: 12px;
    padding: 12px 16px 12px 12px; border-radius: 16px; background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow);
    font-size: 13px; max-width: 280px; animation: rise .6s .4s ease-out both;
}
[dir="rtl"] .toast-card { padding: 12px 12px 12px 16px; }
.toast-card .icon-tile { width: 38px; height: 38px; }
.toast-card .icon-tile svg { width: 19px; height: 19px; }
.toast-card small { display: block; color: var(--muted); }
@keyframes rise { from { opacity: 0; translate: 0 12px; } }
@media (max-width: 520px) { .toast-card { inset-inline-start: -6px; } }

.shift { background: var(--soft); border-radius: 16px; padding: 14px; margin-bottom: 8px; }
.shift__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.shift__icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--card); color: var(--brand); }
.shift__icon svg { width: 22px; height: 22px; }
.shift strong { display: block; font-size: 15px; }
.shift small { display: block; color: var(--muted); font-size: 11px; margin-bottom: 10px; }
.progress { height: 7px; border-radius: 99px; background: var(--card); overflow: hidden; }
.progress span { display: block; height: 100%; border-radius: 99px; background: #b8e866; }

/* ------------------------------------------------------------------ route map */

.route-map {
    position: relative; min-height: 170px; border-radius: var(--radius-map); overflow: hidden;
    background-color: var(--map-bg);
    background-image:
        linear-gradient(35deg, transparent 47%, var(--map-street) 48%, var(--map-street) 51%, transparent 52%),
        linear-gradient(125deg, transparent 42%, var(--map-block) 43%, var(--map-block) 46%, transparent 47%),
        linear-gradient(80deg, transparent 68%, var(--map-street) 69%, var(--map-street) 71%, transparent 72%);
    background-size: 140px 110px, 190px 140px, 180px 120px;
}
.panel > .route-map { min-height: 220px; }
.route-map--tall, .panel > .route-map--tall { min-height: 300px; }
.route-map__route { position: absolute; inset: 0; width: 100%; height: 100%; }
[dir="rtl"] .route-map__route { transform: scaleX(-1); }

.pin {
    position: absolute; z-index: 1; display: grid; place-items: center; width: 30px; height: 30px;
    border-radius: 50% 50% 50% 8px; rotate: -45deg; background: var(--logo-bg); color: #fff; box-shadow: 0 4px 9px rgba(23, 75, 56, .3);
    font-size: 12px; font-weight: 800;
}
.pin span { rotate: 45deg; }
.pin--a { inset-inline-start: calc(23% - 15px); top: calc(31% - 30px); }
.pin--b { inset-inline-start: calc(77% - 15px); top: calc(70% - 30px); background: var(--destination); }

.route-map__driver {
    position: absolute; inset-inline-start: calc(57% - 13px); top: calc(50% - 13px); z-index: 1;
    display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
    background: var(--accent); color: var(--on-accent); box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 35%, transparent);
    animation: drive 4s ease-in-out infinite alternate;
}
.route-map__driver svg { width: 14px; height: 14px; }
@keyframes drive { from { translate: -14px -10px; } to { translate: 10px 8px; } }

.route-map__label {
    position: absolute; z-index: 2; max-width: 46%; padding: 6px 9px; border-radius: 10px; background: var(--card);
    box-shadow: 0 5px 18px rgba(33, 60, 38, .1); font-size: 11px; font-weight: 800; line-height: 1.25;
}
.route-map__label small { display: block; font-size: 9px; font-weight: 600; color: var(--muted); }
.route-map__label--a { inset-inline-start: 5%; bottom: 7%; }
.route-map__label--b { inset-inline-end: 5%; top: 7%; }

/* ------------------------------------------------------------------ steps */

.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; counter-reset: none; }
@media (max-width: 1020px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .steps { grid-template-columns: 1fr; } }
.step { position: relative; background: var(--canvas); border: 1px solid var(--line); border-radius: var(--radius-panel); padding: 24px; }
.step__num {
    display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
    background: var(--accent); color: var(--on-accent); font-weight: 850; margin-bottom: 18px;
}
.step__icon { position: absolute; top: 24px; inset-inline-end: 22px; color: var(--brand); opacity: .35; }
.step__icon svg { width: 30px; height: 30px; }
.step p { margin: 0; color: var(--muted); font-size: .95rem; }

.timeline { display: grid; gap: 14px; margin: 24px 0 0; padding: 0; list-style: none; }
.timeline li { display: flex; align-items: center; gap: 14px; font-weight: 600; }
.timeline__num { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--accent); color: var(--on-accent); font-weight: 850; }

/* ------------------------------------------------------------------ audience, quote, cod */

.audience { display: flex; flex-direction: column; align-items: flex-start; padding: clamp(24px, 4vw, 40px); }
.audience h2 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); }
.audience .check-list { margin-top: 10px; }
.audience .btn { margin-top: auto; }
.audience--brand { background: var(--logo-bg); border-color: var(--logo-bg); color: #fff; }
.audience--brand .check-list svg { color: var(--accent); }

.quote {
    display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px;
    padding: 14px 16px; border-radius: var(--radius-tile); background: var(--soft);
}
.quote small { display: block; color: var(--muted); font-size: .8rem; }
.quote__price { font-size: 1.5rem; font-weight: 850; letter-spacing: -.03em; white-space: nowrap; }

.cod__steps { display: flex; justify-content: space-between; gap: 6px; margin: 6px 0 4px; padding: 0; list-style: none; position: relative; }
.cod__steps::before { content: ""; position: absolute; inset-inline: 12% 12%; top: 22px; height: 3px; background: var(--line); border-radius: 3px; }
.cod__steps li { position: relative; display: grid; justify-items: center; gap: 8px; flex: 1; font-size: .85rem; font-weight: 700; text-align: center; color: var(--muted); }
.cod__dot { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--card); border: 2px solid var(--line); color: var(--muted); }
.cod__dot svg { width: 21px; height: 21px; }
.cod__steps li.is-done { color: var(--ink); }
.cod__steps li.is-done .cod__dot { background: var(--success-bg); border-color: var(--success-bg); color: var(--success-fg); }

.proof { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }
.proof__item { display: grid; justify-items: center; gap: 6px; padding: 14px 8px; border-radius: var(--radius-tile); background: var(--soft); color: var(--brand); text-align: center; }
.proof__item svg { width: 22px; height: 22px; }
.proof__item small { color: var(--muted); font-size: .75rem; font-weight: 600; }

.req-list { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.req-list li { display: flex; gap: 16px; align-items: center; padding: 18px; font-weight: 600; }

.notice { display: flex; gap: 18px; align-items: flex-start; margin-top: 32px; padding: 24px; border-radius: var(--radius-panel); background: var(--soft); }
.notice h2 { margin-bottom: 6px; }
.notice p { margin: 0 0 6px; color: var(--muted); }
.notice--inline { display: flex; gap: 10px; align-items: flex-start; margin-top: 18px; padding: 14px 16px; font-size: .92rem; color: var(--ink); }
.notice--inline svg { width: 20px; height: 20px; flex: none; color: var(--progress-fg); margin-top: 2px; }

.code pre {
    margin: 0 0 12px; padding: 16px; border-radius: var(--radius-tile); background: #0e1813; color: #d8f5a0;
    font: 12.5px/1.6 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; overflow-x: auto; text-align: left;
}

/* ------------------------------------------------------------------ faq, contact, prose */

.faq { display: grid; gap: 10px; margin-bottom: 18px; }
.faq__item { background: var(--card); border: 1px solid var(--line); border-radius: 16px; }
.section--surface .faq__item { background: var(--canvas); }
.faq__item summary {
    display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 20px;
    cursor: pointer; list-style: none; font-weight: 700; font-size: 1.02rem;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__icon { width: 20px; height: 20px; flex: none; color: var(--brand); transition: rotate .2s ease; }
.faq__item[open] .faq__icon { rotate: 45deg; }
.faq__item p { margin: 0; padding: 0 20px 20px; color: var(--muted); }

.contact-card { display: flex; gap: 16px; align-items: center; color: var(--ink); text-decoration: none; transition: border-color .15s ease, transform .15s ease; }
a.contact-card:hover { border-color: var(--brand); transform: translateY(-2px); }
.contact-card small { display: block; color: var(--muted); font-size: .8rem; }
.contact-card strong { display: block; word-break: break-word; }

.prose { padding: clamp(24px, 5vw, 48px); }
.prose h2 { font-size: 1.3rem; margin-top: 1.6em; }
.prose h2:first-child { margin-top: 0; }
.prose p, .prose li { color: var(--ink); }
.prose ul { padding-inline-start: 1.2em; }
.prose li { margin-bottom: .5em; }

.lost .route-map { filter: grayscale(.6); }

/* ------------------------------------------------------------------ cta band, badges */

.cta-band {
    display: grid; grid-template-columns: minmax(0, 1.4fr) auto; gap: 32px; align-items: center;
    padding: clamp(28px, 5vw, 56px); border-radius: var(--radius-band); color: #fff;
    background:
        radial-gradient(70% 120% at 100% 0%, rgba(199, 243, 106, .22), transparent 60%),
        var(--logo-bg);
}
.cta-band h2 { color: #fff; max-width: 20ch; }
.cta-band p { color: #c8d7ce; margin: 0; max-width: 56ch; }
.cta-band .cta-band__note { margin-top: 10px; font-size: .9rem; }
@media (max-width: 820px) { .cta-band { grid-template-columns: 1fr; } }

.badges { display: flex; flex-wrap: wrap; gap: 10px; }
.badge {
    display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 10px 18px; border-radius: 14px;
    background: #0e1813; color: #fff; text-decoration: none; font-weight: 700; font-size: .9rem; border: 1px solid rgba(255, 255, 255, .15);
}
.badge svg { width: 22px; height: 22px; }
a.badge:hover { background: #000; }
.badge--soon { background: rgba(255, 255, 255, .08); color: #e6eee8; }

/* ------------------------------------------------------------------ footer */

.site-footer { background: var(--card); border-top: 1px solid var(--line); padding: 56px 0 28px; font-size: .95rem; }
.footer-grid { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 32px; }
@media (max-width: 820px) { .footer-grid { grid-template-columns: 1fr 1fr; } .footer-brand { grid-column: 1 / -1; } }
.footer-brand p { color: var(--muted); max-width: 36ch; margin-top: 14px; }
.site-footer h2 { font-size: .75rem; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); margin-bottom: 14px; }
:lang(ar) .site-footer h2 { letter-spacing: 0; font-size: .85rem; }
.site-footer ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.site-footer ul a { color: var(--ink); text-decoration: none; }
.site-footer ul a:hover { color: var(--brand); text-decoration: underline; }
.social { display: flex; gap: 8px; }
.social a { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--soft); color: var(--brand); }
.social svg { width: 20px; height: 20px; }
.footer-bottom {
    display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 44px; padding-top: 22px;
    border-top: 1px solid var(--line); color: var(--muted); font-size: .85rem;
}

@media (max-width: 520px) {
    :root { --gutter: 16px; }
    .btn--lg { width: 100%; }
    .card { padding: 20px; }
}