/* Colors (5 Nov 2026, Maseera brand "Wadi Teal", see /home/claude/brand/BRAND.md and tokens.json): every text pair
   passes WCAG AA in both themes (tests/unit-test.js checks them). Light: cool notebook paper, deep petrol ink, a teal
   pen and a saffron highlighter. Dark: softened ink and muted accents, so nothing glares. --logo-accent is the teal of
   the م in the logo. public/guides/guides.css copies these values. */
:root {
  --paper: #EEF3F2;
  --sheet: #FFFFFF;
  --ink: #0D2B30;
  --ink-soft: #2F4C51;
  --pencil: #51696D;
  --rule: #D6E1DF;
  --rule-strong: #A8BCB9;
  --field-line: #76908C;
  --pen: #0A6862;
  --pen-press: #07504B;
  --on-pen: #FFFFFF;
  --marker: #FFD978;
  --marker-ink: #0D2B30;
  --margin-line: #E8A598;
  --redpen: #B1351F;
  --on-redpen: #FFFFFF;
  --bubble-me: #DDEFEB;
  --bubble-strong: #C8E5DF;
  --field: #F4F8F7;
  --amber-bg: #FFF1CC;
  --amber-ink: #6E4500;
  --now-ring: #0D2B30;
  --halo: #E2AC2F;
  --logo-accent: #0E8178;
  --shadow: 0 1px 0 rgba(13, 43, 48, .05), 0 18px 40px -26px rgba(13, 43, 48, .42);
  --radius-sheet: 14px;
  --radius-ctl: 11px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --font: "IBM Plex Sans Arabic", "Segoe UI", Tahoma, system-ui, sans-serif;
  color-scheme: light;
}
/* Dark theme: from the system setting (unless a page sets data-theme="light"), or forced with data-theme="dark". */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0A1C1F;
    --sheet: #10272B;
    --ink: #DAEBE8;
    --ink-soft: #B2C9C5;
    --pencil: #8EA9A5;
    --rule: #1E393D;
    --rule-strong: #2F5257;
    --field-line: #5A7E79;
    --pen: #5DC6B8;
    --pen-press: #86D6CB;
    --on-pen: #04201D;
    --marker: #E3C35E;
    --marker-ink: #10262A;
    --margin-line: #6E3F3A;
    --redpen: #F29A8A;
    --on-redpen: #2B0A06;
    --bubble-me: #173A3B;
    --bubble-strong: #1E4847;
    --field: #0D2326;
    --amber-bg: #3A3117;
    --amber-ink: #EDD38C;
    --now-ring: #E3C35E;
    --halo: #E3C35E;
    --logo-accent: #5DC6B8;
    --shadow: 0 18px 40px -26px rgba(0, 0, 0, .6);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #0A1C1F;
  --sheet: #10272B;
  --ink: #DAEBE8;
  --ink-soft: #B2C9C5;
  --pencil: #8EA9A5;
  --rule: #1E393D;
  --rule-strong: #2F5257;
  --field-line: #5A7E79;
  --pen: #5DC6B8;
  --pen-press: #86D6CB;
  --on-pen: #04201D;
  --marker: #E3C35E;
  --marker-ink: #10262A;
  --margin-line: #6E3F3A;
  --redpen: #F29A8A;
  --on-redpen: #2B0A06;
  --bubble-me: #173A3B;
  --bubble-strong: #1E4847;
  --field: #0D2326;
  --amber-bg: #3A3117;
  --amber-ink: #EDD38C;
  --now-ring: #E3C35E;
  --halo: #E3C35E;
  --logo-accent: #5DC6B8;
  --shadow: 0 18px 40px -26px rgba(0, 0, 0, .6);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
/* Smooth scrolling to the sections only when the visitor has not asked for less motion. */
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.8;
  text-rendering: optimizeLegibility;
}
html[lang="en"] body { line-height: 1.6; }
svg { display: block; }
a { color: var(--pen); text-underline-offset: 3px; }
a:hover { color: var(--pen-press); }
:focus-visible { outline: 3px solid var(--pen); outline-offset: 2px; border-radius: 4px; }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* Side gutter: at least 16px (28px on wide screens), and clear of a phone's notch in landscape (viewport-fit=cover). */
.wrap { width: 100%; max-width: 1120px; margin-inline: auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
@media (min-width: 720px) { .wrap { padding-left: max(28px, env(safe-area-inset-left, 0px)); padding-right: max(28px, env(safe-area-inset-right, 0px)); } }
/* Paints the band behind a phone's status bar, above the sticky header. */
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 10; background: var(--paper); }

.skip { position: absolute; inset-inline-start: 12px; top: -60px; display: inline-flex; align-items: center; min-height: 44px; background: var(--pen); color: var(--on-pen); padding: 8px 14px; border-radius: 8px; z-index: 20; }
.skip:focus { top: 10px; }

/* ---------- Header ---------- */
.top { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 10; background: var(--paper); border-bottom: 1px solid var(--rule); }
@supports (backdrop-filter: blur(8px)) {
  .top { background: color-mix(in srgb, var(--paper) 86%, transparent); backdrop-filter: blur(10px); }
}
.top-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; height: 60px; }
/* The home page's header also holds the section links (or, when narrow, the menu button): the actions go to the end. */
.top-row .site-nav + .top-actions { margin-inline-start: auto; }
.brand { display: inline-flex; align-items: center; gap: 9px; min-width: 0; min-height: 44px; color: var(--ink); text-decoration: none; font-weight: 700; font-size: 1.12rem; letter-spacing: 0; }
.top .brand { min-width: 44px; }
/* Arabic letters sit smaller than Latin at the same size, so the Arabic brand (مسيرة) gets a little more. */
html[lang="ar"] .brand { font-size: 1.32rem; }
/* The mark (Meem Path, 5 Nov 2026): the joined letter م cut out of a rounded tile, its line running out of the
   frame (مسيرة = م + سيرة). One path in the ink colour; the cut-out shows the background. Logos do not mirror. */
.brand-mark { flex: none; width: 32px; height: 32px; }
.bm-tile { fill: var(--ink); }
.top-actions { display: flex; align-items: center; gap: 8px; flex: none; }
.lang-btn {
  font: inherit; font-size: .98rem; font-weight: 600; color: var(--pen); background: transparent;
  border: 1px solid var(--rule-strong); border-radius: 999px; padding: 4px 16px; cursor: pointer; min-height: 44px;
  transition: border-color .15s ease, background-color .15s ease, transform .12s ease;
}
.lang-btn:hover { border-color: var(--pen); background: var(--sheet); }
/* "Track your order": a soft teal pill, visible on every screen size (the long label from 560px). */
.track-btn {
  display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 4px 15px; border-radius: 999px;
  background: var(--bubble-me); color: var(--pen-press); border: 1px solid transparent; font-weight: 600; font-size: .95rem;
  line-height: 1.2; text-decoration: none; white-space: nowrap;
  transition: background-color .15s ease, border-color .15s ease, transform .12s ease;
}
.track-btn:hover { background: var(--bubble-strong); color: var(--pen-press); border-color: color-mix(in srgb, var(--pen) 35%, transparent); }
.track-btn svg { width: 19px; height: 19px; flex: none; }
.track-btn .tb-long { display: none; }
@media (min-width: 560px) { .track-btn .tb-long { display: inline; } .track-btn .tb-short { display: none; } }
@media (max-width: 380px) {
  .top-actions { gap: 6px; }
  .track-btn { padding: 4px 11px; gap: 5px; font-size: .9rem; }
  .lang-btn { padding: 4px 11px; font-size: .9rem; }
  .brand { gap: 6px; }
  .brand-mark { width: 28px; height: 28px; }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; padding: 10px 22px;
  border-radius: var(--radius-ctl); font: inherit; font-weight: 600; font-size: 1rem; text-decoration: none; cursor: pointer;
  border: 1px solid transparent; touch-action: manipulation;
  transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .12s ease;
}
.btn svg { flex: none; }
.btn-primary { background: var(--pen); color: var(--on-pen); }
.btn-primary:hover { background: var(--pen-press); color: var(--on-pen); box-shadow: 0 8px 18px -12px var(--pen); }
.btn-primary[disabled], .btn-primary[aria-disabled="true"] { opacity: .55; cursor: not-allowed; box-shadow: none; }
.btn-primary[aria-disabled="true"]:hover { background: var(--pen); }
.btn-quiet { background: transparent; color: var(--pen); border-color: var(--rule-strong); }
.btn-quiet:hover { border-color: var(--pen); background: var(--field); }
/* Press feedback: a small, quick give under the finger (none when motion is reduced). */
@media (prefers-reduced-motion: no-preference) {
  .btn:not([disabled]):active, .choice:active, .lang-btn:active, .track-btn:active, .help-btn:active, .icon-btn:not([disabled]):active, .star:active { transform: scale(.97); }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
.fine { font-size: .9rem; color: var(--pencil); margin: 0; }
.link-btn { font: inherit; background: none; border: 0; padding: 0; color: var(--pen); text-decoration: underline; cursor: pointer; font-weight: 600; }
.hl {
  color: var(--marker-ink); padding-inline: .15em; border-radius: 3px;
  background-image: linear-gradient(transparent 16%, var(--marker) 16%, var(--marker) 88%, transparent 88%);
  background-repeat: no-repeat; background-size: 100% 100%;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}

/* ---------- The chat, first thing on the page ---------- */
.chat-top { padding-top: 12px; padding-bottom: 26px; }
.chat-col { max-width: 860px; margin-inline: auto; }
.headline {
  margin: 0 0 12px; font-size: clamp(1.25rem, .9rem + 1.8vw, 2rem); line-height: 1.35; font-weight: 700; text-wrap: balance;
}
html[lang="en"] .headline { letter-spacing: -.01em; line-height: 1.2; }
/* The facts a careful buyer looks for first: the lowest price and the delivery promise. */
.hero-sub { margin: -6px 0 14px; color: var(--ink-soft); font-size: .97rem; line-height: 1.6; max-width: 44em; text-wrap: pretty; }
html[lang="en"] .hero-sub { line-height: 1.5; }

/* ---------- Motion: calm and quick (150 to 400 ms), opacity and transform only, off when motion is reduced ---------- */
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes rise-sm { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: no-preference) {
  .chat-col > .headline { animation: rise .32s var(--ease) both; }
  .chat-col > .hero-sub { animation: rise .32s var(--ease) .05s both; }
  .chat-col > .chat-sheet { animation: rise .36s var(--ease) .1s both; }
  .log > .msg, .log > .choices, .log > .card, .log > .notice { animation: rise-sm .24s var(--ease) both; }
  .faq[open] p { animation: fade .22s ease both; }
  /* Sections below the chat fade in once as they come into view (app.js adds .reveal-on and .in). */
  .reveal-on main > .section, .reveal-on body > .foot { transition: opacity .38s ease, transform .38s var(--ease); }
  .reveal-on main > .section:not(.in), .reveal-on body > .foot:not(.in) { opacity: 0; transform: translateY(14px); }
}
.chat-sheet {
  position: relative; background: var(--sheet); border: 1px solid var(--rule); border-radius: var(--radius-sheet);
  box-shadow: var(--shadow); overflow: hidden; scroll-margin-top: 70px;
}
.demo-banner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px;
  background: var(--marker); color: var(--marker-ink); padding: 8px 16px; font-size: .92rem; font-weight: 500;
}
.demo-banner a { display: inline-flex; align-items: center; min-height: 44px; color: var(--marker-ink); font-weight: 700; }
.below-chat { display: flex; justify-content: center; margin: 14px 0 0; }
.below-chat a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px; font-weight: 600; }

.chat { position: relative; display: flex; flex-direction: column; height: 560px; height: clamp(460px, calc(100svh - 196px), 760px); }

/* Step bar: 1 About you ... 5 Review and send. */
/* flex: none and start alignment keep the bar at its own height inside the fixed-height chat column. */
.steps { flex: none; list-style: none; margin: 0; padding: 10px 8px 8px; display: grid; grid-template-columns: repeat(5, 1fr); align-items: start; align-content: start; gap: 4px; border-bottom: 1px solid var(--rule); background: var(--sheet); }
.steps li { position: relative; display: grid; justify-items: center; align-content: start; gap: 3px; text-align: center; font-size: .74rem; line-height: 1.25; color: var(--pencil); }
.steps .num {
  position: relative; z-index: 1; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  font-weight: 700; font-size: .82rem; line-height: 1; border: 1.5px solid var(--rule-strong); background: var(--sheet); color: var(--pencil);
}
.steps li:not(:first-child)::before {
  content: ""; position: absolute; top: 12.5px; inset-inline-end: calc(50% + 13px); width: calc(100% - 22px); height: 1.5px; background: var(--rule-strong);
}
.steps li.passed { color: var(--ink-soft); }
.steps li.passed .num { border-color: var(--pen); color: var(--pen); background: var(--field); }
.steps li.passed + li::before, .steps li[aria-current="step"]::before { background: var(--pen); }
.steps li[aria-current="step"] { color: var(--ink); font-weight: 700; }
.steps li[aria-current="step"] .num { background: var(--pen); border-color: var(--pen); color: var(--on-pen); }

.chat-head {
  flex: none; display: flex; justify-content: space-between; align-items: center; gap: 10px; min-height: 44px; padding: 0 8px 0 14px;
  border-bottom: 1px solid var(--rule); font-size: .88rem; color: var(--pencil); line-height: 1.4;
}
html[dir="rtl"] .chat-head { padding: 0 14px 0 8px; }
.chat-head .head-end { display: flex; align-items: center; gap: 8px; margin-inline-start: auto; }
.counter.low { color: var(--redpen); font-weight: 600; }
.help-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; min-width: 44px; padding: 4px 12px; border-radius: 999px; cursor: pointer;
  font: inherit; font-size: .88rem; font-weight: 600; color: var(--pen); background: var(--field); border: 1px solid var(--rule);
  transition: border-color .15s ease, transform .12s ease;
}
.help-btn:hover { border-color: var(--pen); }
.help-btn svg { width: 18px; height: 18px; }
.help-btn[aria-expanded="true"] { border-color: var(--pen); }

.log {
  --margin-x: 34px;
  position: relative; flex: 1 1 0; min-height: 0; overflow-y: auto; padding: 16px 14px 18px; padding-inline-start: 46px;
  display: flex; flex-direction: column; gap: 12px; overscroll-behavior: contain;
  /* The notebook margin line, drawn as a background so it runs the full height while scrolling. */
  background-image: linear-gradient(var(--margin-line), var(--margin-line));
  background-repeat: no-repeat; background-size: 2px 100%; background-attachment: local;
  background-position: left var(--margin-x) top 0;
}
html[dir="rtl"] .log { background-position: right var(--margin-x) top 0; }
.nb-mark { position: absolute; width: 30px; text-align: center; font-weight: 700; color: var(--pen); }
.msg { position: relative; max-width: min(88%, 36em); line-height: 1.75; }
html[lang="en"] .msg { line-height: 1.55; }
.msg-body { overflow-wrap: anywhere; }
.msg-bot { align-self: flex-start; }
.msg-bot .nb-mark { inset-inline-start: -46px; top: 0; }
.msg-me { align-self: flex-end; background: var(--bubble-me); border-radius: 16px; border-end-end-radius: 5px; padding: 9px 14px; }
.msg-me.pending { opacity: .65; }
.msg-me.failed { outline: 2px solid var(--redpen); }
.msg-tag { display: flex; align-items: center; gap: 6px; font-size: .8rem; color: var(--pencil); margin-bottom: 2px; }
.msg-tag svg { width: 15px; height: 15px; }
/* A longer reason (for example "busy") puts Try again on its own line, with room to tap it. */
.msg-fail { display: flex; flex-wrap: wrap; gap: 0 10px; align-items: center; font-size: .85rem; color: var(--redpen); margin-top: 4px; }
.msg-fail .link-btn { min-height: 44px; }
.typing { display: inline-flex; gap: 5px; padding-top: 12px; }
.typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--pencil); opacity: .5; }
@media (prefers-reduced-motion: no-preference) {
  .typing span { animation: blink 1.1s infinite ease-in-out; }
  .typing span:nth-child(2) { animation-delay: .15s; }
  .typing span:nth-child(3) { animation-delay: .3s; }
}
@keyframes blink { 0%, 100% { opacity: .25; } 40% { opacity: .9; } }
.notice { align-self: stretch; font-size: .92rem; color: var(--ink-soft); background: var(--field); border-radius: 10px; padding: 10px 14px; line-height: 1.6; }
.notice.error { color: var(--redpen); }

/* Answer buttons: on the customer's side, large enough to tap. */
.choices { align-self: flex-end; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; max-width: 100%; }
.choices.stack { flex-direction: column; align-items: stretch; width: min(100%, 31em); }
.choice {
  font: inherit; font-size: 1rem; font-weight: 600; line-height: 1.35; min-height: 48px; min-width: 76px; padding: 10px 20px;
  border-radius: 999px; border: 1.5px solid var(--pen); background: var(--sheet); color: var(--pen); cursor: pointer; text-align: center;
  touch-action: manipulation; transition: background-color .15s ease, transform .12s ease;
}
.choices.stack .choice { border-radius: 14px; text-align: start; padding: 12px 16px; }
.choice .sub { display: block; font-weight: 500; font-size: .86rem; color: var(--pencil); }
.choice:hover { background: var(--field); }
.choice:active, .choice.pressed { background: var(--bubble-me); }

/* The consent card and the review and done cards sit inside the conversation. */
.card {
  align-self: stretch; border: 2px solid var(--ink); border-radius: var(--radius-sheet); padding: 16px 16px 18px; background: var(--sheet);
  margin-inline-start: -32px;
}
.card h3 { margin: 0; font-size: 1.12rem; }
.card .fine { margin-bottom: 8px; }
.consent { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; margin: 8px 0 10px; font-size: .95rem; line-height: 1.7; cursor: pointer; }
html[lang="en"] .consent { line-height: 1.5; }
.consent input { width: 24px; height: 24px; margin: 3px 0 0; accent-color: var(--pen); }
.ts-box { margin: 10px 0 4px; min-height: 0; }
/* The Turnstile widget is 65 px tall by default (Cloudflare's "normal" size): kept free from the start (UX test). */
.ts-box.ts-wait { min-height: 65px; }
.form-error { color: var(--redpen); font-weight: 600; margin: 8px 0; font-size: .95rem; }
/* The order queue (many orders at the same moment): a calm note, not an error, with a bar that fills while the page
   waits to send the order again. The bar only repeats what the note says, so "reduce motion" hides it. */
.queue-note { display: grid; gap: 8px; margin: 12px 0 0; padding: 10px 14px; border-radius: 10px; background: var(--field); color: var(--ink-soft); font-size: .92rem; line-height: 1.6; }
.queue-bar { display: block; height: 4px; border-radius: 999px; background: var(--rule); overflow: hidden; }
.queue-bar::after { content: ""; display: block; height: 100%; background: var(--pen); transform: scaleX(0); transform-origin: left center; }
html[dir="rtl"] .queue-bar::after { transform-origin: right center; }
@media (prefers-reduced-motion: no-preference) { .queue-bar::after { animation: queue-fill var(--wait, 20s) linear var(--waited, 0s) forwards; } }
@media (prefers-reduced-motion: reduce) { .queue-bar { display: none; } }
@keyframes queue-fill { to { transform: scaleX(1); } }
.card .btn { width: 100%; margin-top: 12px; }
.field { display: grid; gap: 4px; margin-top: 12px; }
.field label, .field .label { font-weight: 600; font-size: .92rem; }
.field input[type="text"], .field input[type="tel"], .field select {
  font: inherit; font-size: 16px; color: var(--ink); background: var(--field); border: 1px solid var(--field-line);
  border-radius: 10px; padding: 9px 12px; min-height: 48px; width: 100%;
}
.field .hint { font-size: .8rem; color: var(--pencil); }
.field .err { font-size: .85rem; color: var(--redpen); font-weight: 600; }
.checks { display: grid; gap: 6px; margin-top: 2px; }
.checks label { display: flex; align-items: center; gap: 10px; font-weight: 400; font-size: .97rem; min-height: 44px; }
.checks input { width: 22px; height: 22px; accent-color: var(--pen); margin: 0; }
.file-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: .95rem; }
.file-list .kind { font-weight: 600; }
.cv-line { font-size: .95rem; }
.cv-line.need { color: var(--redpen); font-weight: 600; }
.field .link-btn { justify-self: start; min-height: 44px; min-width: 44px; }
.total-row { display: flex; justify-content: space-between; align-items: baseline; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--rule); font-weight: 700; font-size: 1.1rem; }
.done { text-align: center; padding-block: 22px; }
.done .order-label { display: block; font-size: .95rem; color: var(--pencil); margin-top: 6px; }
.done .order-id { display: inline-block; font-size: clamp(1.6rem, 1.2rem + 2vw, 2.3rem); font-weight: 700; margin: 2px 0 6px; direction: ltr; unicode-bidi: isolate; }
.done p { margin: 6px 0 0; }
.done .row { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 14px; }
.done .row .btn { width: auto; margin-top: 0; }
.done .track-cta { width: auto; min-width: min(100%, 260px); margin-top: 16px; }
.done .track-line { margin-top: 6px; }

/* ---------- Composer ---------- */
.composer { flex: none; border-top: 1px solid var(--rule); padding: 8px 10px; padding-bottom: calc(8px + env(safe-area-inset-bottom)); background: var(--sheet); }
.composer-row { display: flex; align-items: flex-end; gap: 6px; }
.input-wrap { flex: 1; min-width: 0; position: relative; }
.input-wrap textarea {
  display: block; width: 100%; resize: none; min-height: 48px; max-height: 168px; padding: 11px 14px; font: inherit; font-size: 16px; line-height: 1.55;
  color: var(--ink); background: var(--field); border: 1px solid var(--field-line); border-radius: 13px;
}
.input-wrap textarea:focus-visible { outline-offset: 0; }
.input-wrap textarea:disabled { background: transparent; border-style: dashed; color: var(--pencil); }
.composer.tap-only .input-wrap textarea::placeholder { color: var(--pencil); opacity: 1; }
.rec-bar {
  display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 8px 14px; border-radius: 13px;
  background: var(--field); border: 1px solid var(--redpen); color: var(--ink); font-size: .95rem; line-height: 1.4;
}
.rec-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--redpen); flex: none; }
@media (prefers-reduced-motion: no-preference) { .rec-dot { animation: blink 1s infinite; } }
.rec-bar .link-btn { margin-inline-start: auto; min-height: 44px; min-width: 44px; padding-inline: 8px; }
.icon-btn {
  flex: none; width: 48px; height: 48px; display: grid; place-items: center; border-radius: 13px; cursor: pointer;
  background: transparent; color: var(--pen); border: 1px solid transparent; touch-action: manipulation;
  transition: background-color .15s ease, transform .12s ease;
}
.icon-btn:hover { background: var(--field); }
.icon-btn svg { width: 24px; height: 24px; }
.icon-btn.send { background: var(--pen); color: var(--on-pen); }
.icon-btn.send:hover { background: var(--pen-press); }
.icon-btn[disabled] { opacity: .4; cursor: not-allowed; }
.icon-btn.recording { background: var(--redpen); color: var(--on-redpen); }
html[dir="rtl"] .flip { transform: scaleX(-1); }
.composer-meta { display: flex; justify-content: space-between; gap: 10px; font-size: .8rem; color: var(--pencil); min-height: 1.2em; padding: 3px 6px 0; line-height: 1.4; }
.file-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 2px 8px; }
.file-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 2px 4px; padding-inline-start: 10px; border-radius: 999px;
  background: var(--field); border: 1px solid var(--rule-strong); font-size: .84rem; max-width: 100%; line-height: 1.4;
}
.file-chip svg { width: 15px; height: 15px; flex: none; }
.file-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-chip button { width: 44px; height: 44px; margin-block: -4px; border-radius: 50%; border: 0; background: transparent; color: var(--pencil); cursor: pointer; display: grid; place-items: center; flex: none; }
.file-chip button svg { width: 16px; height: 16px; }

/* ---------- Help panel and attachment guide (inside the chat) ---------- */
.overlay {
  position: absolute; inset-inline: 0; z-index: 6; background: var(--sheet); overflow-y: auto; overscroll-behavior: contain;
  padding: 12px 16px 18px;
}
.help-panel { top: 0; bottom: 0; }
.attach-guide { bottom: 0; max-height: 92%; border-top: 1px solid var(--rule); box-shadow: 0 -16px 32px -20px rgba(13, 43, 48, .45); }
.ov-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.ov-head h3 { margin: 0; font-size: 1.08rem; }
.ov-close { color: var(--ink-soft); }
.help-list { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 12px; }
.help-list li { display: grid; grid-template-columns: 44px 1fr; gap: 12px; align-items: start; }
.help-list strong { display: block; font-size: .98rem; line-height: 1.4; }
.help-list p { margin: 2px 0 0; font-size: .92rem; color: var(--ink-soft); line-height: 1.55; }
.hi { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--field); color: var(--pen); font-weight: 700; font-size: .8rem; }
.hi svg { width: 22px; height: 22px; }
.hi.send { background: var(--pen); color: var(--on-pen); }
.hi-pill { display: inline-block; padding: 1px 8px; border: 1.5px solid var(--pen); border-radius: 999px; font-size: .72rem; line-height: 1.4; }
.overlay h4 { margin: 4px 0 4px; font-size: 1rem; }
.guide-list { margin: 0 0 6px; padding-inline-start: 20px; display: grid; gap: 4px; font-size: .95rem; line-height: 1.55; }
.guide-never { margin: 6px 0 0; font-weight: 600; color: var(--redpen); font-size: .92rem; }
.kind-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }

/* Tooltips on devices with a mouse; phones get the help panel instead. */
@media (hover: hover) and (pointer: fine) {
  [data-tip] { position: relative; }
  [data-tip]:hover::after, [data-tip]:focus-visible::after {
    content: attr(data-tip); position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);
    width: max-content; max-width: 240px; padding: 7px 10px; border-radius: 8px; background: var(--ink); color: var(--sheet);
    font-size: .8rem; font-weight: 500; line-height: 1.4; text-align: start; white-space: normal; z-index: 30; pointer-events: none;
  }
  .tip-start[data-tip]:hover::after, .tip-start[data-tip]:focus-visible::after { left: 0; transform: none; }
  html[dir="rtl"] .tip-start[data-tip]:hover::after, html[dir="rtl"] .tip-start[data-tip]:focus-visible::after { left: auto; right: 0; }
  .tip-end[data-tip]:hover::after, .tip-end[data-tip]:focus-visible::after { left: auto; right: 0; transform: none; }
  html[dir="rtl"] .tip-end[data-tip]:hover::after, html[dir="rtl"] .tip-end[data-tip]:focus-visible::after { right: auto; left: 0; }
  .tip-below[data-tip]:hover::after, .tip-below[data-tip]:focus-visible::after { bottom: auto; top: calc(100% + 8px); }
}

/* ---------- Below the chat: prices, how it works, privacy ---------- */
.section { padding-block: 34px; border-top: 1px solid var(--rule); }
@media (min-width: 900px) { .section { padding-block: 48px; } }
.section h2 { font-size: clamp(1.35rem, 1.1rem + 1vw, 1.8rem); line-height: 1.4; margin: 0 0 4px; font-weight: 700; }
html[lang="en"] .section h2 { line-height: 1.2; }
.section-lead { margin: 0 0 16px; color: var(--ink-soft); max-width: 40em; }
/* The price cards are styled under "Prices" near the end of this file (5 Nov 2026). */
.extras { display: grid; gap: 6px; margin-top: 20px; }
.extras h3 { margin: 0; font-size: 1.02rem; }
/* The two ways to save (5 Nov 2026), under the add-ons. */
.extras .save-line { line-height: 1.6; }
.addon-list { list-style: none; margin: 0; padding: 0; }
.addon-list li { display: flex; justify-content: space-between; gap: 16px; padding-block: 8px; border-bottom: 1px solid var(--rule); }
.addon-list li > span:last-child { font-weight: 700; white-space: nowrap; }
.truth { margin: 16px 0 0; padding-inline-start: 12px; border-inline-start: 3px solid var(--pen); max-width: 44em; font-size: .97rem; }
.step-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; counter-reset: step; }
@media (min-width: 820px) { .step-list { grid-template-columns: repeat(4, 1fr); gap: 24px; } }
.step-list li { counter-increment: step; display: grid; grid-template-columns: 34px 1fr; gap: 10px; }
.step-list li::before { content: counter(step); font-weight: 700; font-size: 1.35rem; color: var(--pen); line-height: 1.3; }
.step-list h3 { margin: 0; font-size: 1rem; line-height: 1.5; }
.step-list p { margin: 0; color: var(--ink-soft); font-size: .95rem; line-height: 1.55; }

/* Reviews: approved by Zyad only; a free pilot review always carries its label. */
.review-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
@media (min-width: 820px) { .review-list { grid-template-columns: repeat(3, 1fr); } }
.review { background: var(--sheet); border: 1px solid var(--rule); border-radius: var(--radius-sheet); padding: 14px 16px; }
.review p { margin: 6px 0 0; line-height: 1.6; }
.review .who { color: var(--pencil); font-size: .9rem; }
.stars { color: var(--pen); letter-spacing: 2px; font-size: 1.05rem; line-height: 1; }
.stars .off { color: var(--rule-strong); }
.pilot-label { display: inline-block; margin-top: 8px; padding: 2px 10px; border-radius: 999px; background: var(--marker); color: var(--marker-ink); font-size: .82rem; font-weight: 700; }
/* 5 Nov 2026: equal-height cards; the stars and a free pilot's label on top, then the text, then name and date. */
.review { display: flex; flex-direction: column; }
.review-top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.review-top .pilot-label { margin-top: 0; line-height: 1.5; }
.review .review-text { margin-top: 10px; flex: 1; line-height: 1.65; }
.review .who { margin-top: 10px; }

/* ---------- Why Maseera and our story (5 Nov 2026): the same tokens and parts as the sections around them ---------- */
.section, .foot { scroll-margin-top: 72px; }
.why-list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 10px; }
@media (min-width: 600px) { .why-list { grid-template-columns: repeat(2, 1fr); gap: 12px; } }
@media (min-width: 980px) { .why-list { grid-template-columns: repeat(3, 1fr); gap: 16px; } }
.why-list li {
  display: grid; grid-template-columns: 44px 1fr; gap: 12px; align-items: start; padding: 14px 16px;
  background: var(--sheet); border: 1px solid var(--rule); border-radius: var(--radius-sheet);
}
.why-list h3 { margin: 0; font-size: 1rem; line-height: 1.5; }
.why-list p { margin: 2px 0 0; color: var(--ink-soft); font-size: .95rem; line-height: 1.55; }
.story { max-width: 44em; margin-top: 12px; }
.story p { margin: 0 0 12px; line-height: 1.75; }
html[lang="en"] .story p { line-height: 1.6; }
.story-idea {
  display: flex; align-items: flex-start; gap: 12px; margin: 4px 0 16px; padding: 14px 16px;
  background: var(--sheet); border: 1px solid var(--rule); border-inline-start: 3px solid var(--pen); border-radius: var(--radius-sheet);
}
.story .story-idea p { margin: 0; font-weight: 600; font-size: 1.05rem; line-height: 1.65; color: var(--ink); }
html[lang="en"] .story .story-idea p { line-height: 1.5; }
@media (min-width: 900px) {
  /* The idea sits beside the story; the paragraphs keep their order in the first column. */
  .story { max-width: none; display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); column-gap: 48px; align-items: start; }
  .story > p { grid-column: 1; }
  .story-idea { grid-column: 2; grid-row: 1 / span 4; flex-direction: column; gap: 14px; margin: 0; padding: 22px 24px; }
  .story .story-idea p { font-size: 1.2rem; }
  .story-idea .brand-mark { width: 40px; height: 40px; }
}
.delivery { color: var(--ink-soft); }
.card .delivery { margin-top: 10px; }

/* ---------- FAQ and free guides (SEO merge, 4 Nov 2026) ---------- */
.faq-list { border-top: 2px solid var(--ink); }
.faq { border-bottom: 1px solid var(--rule); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 48px;
  padding-block: 10px; cursor: pointer; font-weight: 700; line-height: 1.5; list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--pen); }
.faq summary::after { content: "+"; flex: none; color: var(--pen); font-size: 1.35rem; line-height: 1; }
@media (prefers-reduced-motion: no-preference) { .faq summary::after { transition: transform .15s ease; } }
.faq[open] summary::after { transform: rotate(45deg); }
.faq p { margin: 0 0 14px; color: var(--ink-soft); max-width: 44em; font-size: .97rem; }
html[lang="en"] .faq p { line-height: 1.55; }
.guide-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
/* Four guides (5 Nov 2026): 2 by 2 from 820px, so no link sits alone on a row. With an odd number of guides (five since
   6 Nov 2026), the first and newest one takes the whole first row. */
@media (min-width: 820px) { .guide-links { grid-template-columns: repeat(2, 1fr); gap: 16px; } }
@media (min-width: 820px) { .guide-links > li:first-child:nth-last-child(odd) { grid-column: 1 / -1; } }
.guide-links a {
  display: block; height: 100%; padding: 14px 16px; background: var(--sheet); color: var(--ink);
  border: 1px solid var(--rule); border-radius: var(--radius-sheet); text-decoration: none; font-weight: 600; line-height: 1.55;
}
.guide-links a { transition: border-color .15s ease, color .15s ease; }
.guide-links a:hover { border-color: var(--pen); color: var(--pen); }

/* ---------- Footer ---------- */
.foot { padding-block: 26px 40px; border-top: 1px solid var(--rule); }
.foot h2 { font-size: 1.02rem; margin: 0 0 2px; }
.foot p { margin: 0 0 8px; color: var(--ink-soft); max-width: 44em; font-size: .95rem; }
/* 5 Nov 2026: links to the sections, and Contact (the WhatsApp number from CONFIG). */
.foot-nav { display: flex; flex-wrap: wrap; gap: 0 20px; margin: 0 0 16px; padding-bottom: 10px; border-bottom: 1px solid var(--rule); }
.foot-nav a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; font-weight: 600; text-decoration: none; }
.foot-nav a:hover { text-decoration: underline; }
.foot-contact { margin-bottom: 16px; }
.foot-contact a { font-weight: 700; }
.config-error { background: var(--redpen); color: var(--on-redpen); padding: 8px 16px; font-size: .9rem; }

@media (max-width: 420px) {
  body { font-size: 16px; }
  .log { padding-inline-start: 40px; padding-inline-end: 10px; --margin-x: 29px; }
  .msg-bot .nb-mark { inset-inline-start: -40px; }
  .card { margin-inline-start: -28px; }
  .icon-btn { width: 46px; height: 48px; }
  /* Once the service and the counter fill the row, the help button shows its icon only. */
  .chat-head:not(.roomy) .help-btn span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .help-btn { padding: 4px 10px; }
}

/* ---------- The order page: "Track your order" (/review) ---------- */
/* One route card: the friendly line for the current stage, the progress stroke, then the seven stops
   (a vertical list on phones, a horizontal route from 760px, right to left in Arabic). Done stops are filled
   blue with a check, the current stop is the highlighter yellow with its own icon and the word "Now", later
   stops are hollow with their number: shape and text carry the meaning, never color alone. */
.tr-main { max-width: 960px; padding-top: 18px; padding-bottom: 36px; }
.tr-main > .headline { margin-bottom: 6px; }
.tr-main > .section-lead { margin-bottom: 18px; }
.rv-card { margin: 0 0 16px; }
.tr-lookup { max-width: 560px; margin-inline: 0; }
.tr-lookup .form-error { margin-top: 12px; }

.tr { display: grid; gap: 16px; }
@media (prefers-reduced-motion: no-preference) {
  .tr:not([hidden]) > * { animation: rise .32s var(--ease) both; }
  .tr:not([hidden]) > *:nth-child(2) { animation-delay: .06s; }
  .tr:not([hidden]) > *:nth-child(3) { animation-delay: .12s; }
}
.tr-sheet, .tr-panel {
  background: var(--sheet); border: 1px solid var(--rule); border-radius: var(--radius-sheet); box-shadow: var(--shadow);
  padding: 16px 16px 18px;
}
@media (min-width: 720px) { .tr-sheet { padding: 22px 28px 26px; } .tr-panel { padding: 20px 24px 22px; } }

.tr-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.tr-order { margin: 0; font-size: .92rem; color: var(--pencil); line-height: 1.4; }
.tr-num { display: inline-block; color: var(--ink); font-weight: 700; font-size: 1.02rem; direction: ltr; unicode-bidi: isolate; letter-spacing: .02em; }
.tr-refresh {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 4px 12px; border-radius: 999px; cursor: pointer;
  font: inherit; font-size: .88rem; font-weight: 600; color: var(--pen); background: var(--field); border: 1px solid var(--rule);
  touch-action: manipulation; transition: border-color .15s ease, transform .12s ease;
}
.tr-refresh:hover { border-color: var(--pen); }
.tr-refresh[disabled] { opacity: .6; cursor: progress; }
.tr-refresh svg { width: 17px; height: 17px; }
@media (prefers-reduced-motion: no-preference) {
  .tr-refresh:active { transform: scale(.97); }
  .tr-refresh.busy svg { animation: spin .9s linear infinite; }
}
@keyframes spin { to { transform: rotate(360deg); } }

.tr-now { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center; margin-top: 14px; }
.tr-now-icon { width: 50px; height: 50px; border-radius: 15px; display: grid; place-items: center; background: var(--bubble-me); color: var(--pen-press); }
.tr-now-icon.answers { background: var(--amber-bg); color: var(--amber-ink); }
.tr-now-icon.done { background: var(--pen); color: var(--on-pen); }
.tr-now-icon svg { width: 27px; height: 27px; }
.tr-line { margin: 0; font-size: clamp(1.12rem, .98rem + .8vw, 1.5rem); font-weight: 700; line-height: 1.45; text-wrap: balance; outline: none; }
html[lang="en"] .tr-line { line-height: 1.3; letter-spacing: -.005em; }

/* The progress stroke: blue up to the current stop. Scaled, not resized, so it never moves the layout. */
.tr-progress { position: relative; height: 10px; margin-top: 16px; border-radius: 999px; background: var(--rule); overflow: hidden; }
.tr-fill { position: absolute; inset: 0; background: var(--pen); transform: scaleX(var(--p, 0)); transform-origin: left center; }
html[dir="rtl"] .tr-fill { transform-origin: right center; }
@media (prefers-reduced-motion: no-preference) { .tr-fill { transition: transform .4s var(--ease); } }
.tr-meta { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 4px 16px; margin-top: 8px; font-size: .92rem; color: var(--ink-soft); line-height: 1.5; }
.tr-stepof { font-weight: 600; color: var(--ink); }
.tr-eta { display: inline-flex; align-items: center; gap: 6px; }
.tr-eta svg { width: 17px; height: 17px; flex: none; color: var(--pen); }
.tr-eta .when { color: var(--pencil); }
.tr-note { margin: 10px 0 0; padding: 9px 12px; border-radius: 10px; background: var(--field); color: var(--ink-soft); font-size: .92rem; line-height: 1.55; }
.tr-note.warn { background: var(--amber-bg); color: var(--amber-ink); }

/* The stops. */
.tr-route { list-style: none; margin: 20px 0 0; padding: 0; display: grid; }
.tr-stop { position: relative; display: grid; grid-template-columns: 40px 1fr; column-gap: 14px; align-items: start; padding-bottom: 16px; }
.tr-stop:last-child { padding-bottom: 0; }
.tr-node {
  position: relative; z-index: 1; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  border: 2px solid var(--pencil); background: var(--sheet); color: var(--pencil); font-weight: 700; font-size: .95rem; line-height: 1;
}
@media (prefers-reduced-motion: no-preference) { .tr-node { transition: background-color .3s ease, border-color .3s ease, color .3s ease; } }
.tr-node svg { width: 21px; height: 21px; }
/* The rail to the next stop: solid blue after a done stop, dashed otherwise. */
.tr-stop:not(:last-child)::before {
  content: ""; position: absolute; top: 42px; bottom: 2px; inset-inline-start: 19px; width: 2px;
  background: repeating-linear-gradient(to bottom, var(--rule-strong) 0 5px, transparent 5px 10px);
}
.tr-stop.is-done:not(:last-child)::before { background: var(--pen); }
.tr-stop.is-done .tr-node { background: var(--pen); border-color: var(--pen); color: var(--on-pen); }
.tr-stop.is-current .tr-node { background: var(--marker); border-color: var(--now-ring); color: var(--marker-ink); }
.tr-stop.is-current.answers .tr-node { background: var(--amber-bg); border-color: var(--amber-ink); color: var(--amber-ink); }
/* The current stop breathes gently; with reduced motion it keeps a still ring. */
.tr-stop.is-current .tr-node::after {
  content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid var(--halo); opacity: .45; pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) { .tr-stop.is-current .tr-node::after { animation: halo 2.6s cubic-bezier(.3, .6, .3, 1) infinite; } }
@keyframes halo { 0% { transform: scale(.86); opacity: .75; } 70%, 100% { transform: scale(1.35); opacity: 0; } }
.tr-text { display: grid; justify-items: start; gap: 2px; padding-top: 7px; min-width: 0; }
.tr-label { font-weight: 600; line-height: 1.45; }
html[lang="en"] .tr-label { line-height: 1.3; }
.tr-stop.is-next .tr-label { color: var(--pencil); font-weight: 500; }
.tr-stop.is-current .tr-label { font-weight: 700; }
.tr-date { font-size: .82rem; color: var(--pencil); line-height: 1.4; }
.tr-tag { display: inline-block; padding: 1px 9px; border-radius: 999px; background: var(--ink); color: var(--sheet); font-size: .74rem; font-weight: 700; line-height: 1.6; }
.tr-side { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; padding: 3px 10px; border-radius: 999px; font-size: .84rem; font-weight: 600; line-height: 1.4; }
.tr-side svg { width: 16px; height: 16px; flex: none; }
.tr-side.answers { background: var(--amber-bg); color: var(--amber-ink); }
.tr-side.revision { background: var(--bubble-me); color: var(--pen-press); }

@media (min-width: 760px) {
  .tr-route { grid-template-columns: repeat(7, minmax(0, 1fr)); margin-top: 26px; }
  .tr-stop { grid-template-columns: none; grid-template-rows: auto 1fr; align-content: start; justify-items: center; row-gap: 10px; padding-bottom: 0; text-align: center; }
  .tr-stop:not(:last-child)::before {
    top: 19px; bottom: auto; inset-inline-start: calc(50% + 22px); width: calc(100% - 44px); height: 2px;
    background: repeating-linear-gradient(to right, var(--rule-strong) 0 5px, transparent 5px 10px);
  }
  .tr-text { justify-items: center; align-content: start; padding-top: 0; padding-inline: 4px; }
  .tr-label { font-size: .92rem; }
  .tr-side { width: max-content; max-width: calc(100% + 24px); text-align: center; border-radius: 12px; justify-content: center; padding-inline: 8px; }
}

/* Phones, when the order asks something of the customer (questions to answer, files to download, the rating; review.js
   adds .act): the seven stops shrink to one row of circles under the progress bar, as the chat's step bar does at the
   review step, so the questions or the downloads are on the first screen (UX test, 5 Nov 2026). The stop names stay for
   screen readers; the headline and "Step n of 7" say where the order is. */
@media (max-width: 759.98px) {
  .tr.act .tr-route { grid-template-columns: repeat(7, minmax(0, 1fr)); margin-top: 14px; }
  .tr.act .tr-stop { grid-template-columns: none; justify-items: center; padding-bottom: 0; }
  .tr.act .tr-stop:not(:last-child)::before {
    top: 15px; bottom: auto; inset-inline-start: calc(50% + 17px); width: calc(100% - 34px); height: 2px;
    background: repeating-linear-gradient(to right, var(--rule-strong) 0 5px, transparent 5px 10px);
  }
  .tr.act .tr-stop.is-done:not(:last-child)::before { background: var(--pen); }
  .tr.act .tr-node { width: 32px; height: 32px; font-size: .85rem; }
  .tr.act .tr-node svg { width: 17px; height: 17px; }
  .tr.act .tr-text { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* The panels under the card: questions, files, rating. Files and rating side by side on wide screens. */
.tr-panels { display: grid; gap: 16px; align-items: start; }
@media (min-width: 900px) { .tr-panels.two { grid-template-columns: 1.15fr 1fr; } }
.tr-panel-title { display: flex; align-items: center; gap: 10px; margin: 0 0 4px; font-size: 1.15rem; line-height: 1.4; }
.tr-panel-title .ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; flex: none; background: var(--bubble-me); color: var(--pen-press); }
.tr-panel-title .ic.amber { background: var(--amber-bg); color: var(--amber-ink); }
.tr-panel-title .ic svg { width: 19px; height: 19px; }
.tr-panel-lead { margin: 0 0 8px; color: var(--ink-soft); font-size: .95rem; line-height: 1.55; }

.tr-files { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 10px; }
.tr-file { display: grid; grid-template-columns: 42px 1fr auto; gap: 12px; align-items: center; padding: 10px 12px; border: 1px solid var(--rule); border-radius: 12px; background: var(--field); }
.tr-file-icon { position: relative; width: 38px; height: 46px; color: var(--pen); }
.tr-file-icon svg { width: 38px; height: 46px; }
.tr-file-type { position: absolute; inset-inline: 0; bottom: 7px; text-align: center; font-size: .58rem; font-weight: 700; color: var(--pen-press); line-height: 1; direction: ltr; }
.tr-file-type.docx { font-size: .5rem; }
.tr-file-text { display: grid; min-width: 0; }
.tr-file-name { font-weight: 600; line-height: 1.4; overflow-wrap: anywhere; }
.tr-file-meta { font-size: .84rem; color: var(--pencil); line-height: 1.4; }
.tr-file .btn { min-height: 46px; padding: 8px 16px; width: auto; margin: 0; }
.tr-file .btn svg { width: 18px; height: 18px; }
@media (max-width: 440px) {
  .tr-file { grid-template-columns: 38px 1fr; }
  .tr-file .btn { grid-column: 1 / -1; width: 100%; }
}
.tr-files-note { margin: 12px 0 0; }
/* The referral code (5 Nov 2026), under the files: the code to share, a copy button and the rules in one line. */
.ref-box { display: grid; gap: 8px; margin-top: 16px; padding: 12px 14px 14px; border: 1.5px dashed var(--pen); border-radius: 12px; background: var(--field); }
.ref-title { margin: 0; font-size: 1rem; }
.ref-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.ref-code { font-size: 1.45rem; font-weight: 700; letter-spacing: .12em; font-variant-numeric: tabular-nums; unicode-bidi: isolate; user-select: all; }
.tr-panel .ref-copy { width: auto; margin-top: 0; min-height: 44px; padding: 6px 16px; }
.ref-rules { line-height: 1.6; }

.tr-q { display: grid; gap: 6px; margin-top: 14px; }
.tr-q label { display: grid; gap: 2px; }
.tr-q-num { font-size: .84rem; font-weight: 700; color: var(--amber-ink); }
.tr-q-text { font-weight: 600; line-height: 1.55; white-space: pre-line; overflow-wrap: anywhere; }
.tr-q-intro { margin: 8px 0 0; padding: 10px 12px; border-radius: 10px; background: var(--field); white-space: pre-line; line-height: 1.6; font-size: .95rem; }
.tr-panel textarea, .rv-card textarea {
  font: inherit; font-size: 16px; color: var(--ink); background: var(--field); border: 1px solid var(--field-line);
  border-radius: 10px; padding: 9px 12px; width: 100%; resize: vertical; min-height: 96px; line-height: 1.6;
}
.tr-count { margin: 8px 0 0; font-size: .84rem; color: var(--pencil); text-align: end; font-variant-numeric: tabular-nums; }
.tr-count.over { color: var(--redpen); font-weight: 600; }
.tr-panel .btn { width: 100%; margin-top: 12px; }
@media (min-width: 720px) { .tr-answers .btn { width: auto; min-width: 240px; } }

.tr-msg { margin: 0; padding: 12px 14px; border-radius: 12px; background: var(--bubble-me); color: var(--ink); font-weight: 600; line-height: 1.55; }
.tr-foot { display: grid; gap: 4px; justify-items: start; }
.tr-foot .fine { line-height: 1.5; }
.tr-foot .link-btn { min-height: 44px; margin-top: 4px; }

.rating { border: 0; padding: 0; margin: 0; min-width: 0; }
.rating legend { font-weight: 600; font-size: .92rem; padding: 0; margin-bottom: 6px; }
.rating-row { display: flex; gap: 6px; }
.star {
  width: 50px; height: 50px; border-radius: 12px; border: 1.5px solid var(--rule-strong); background: var(--sheet);
  color: var(--pencil); font-size: 1.5rem; line-height: 1; cursor: pointer; touch-action: manipulation;
  transition: background-color .15s ease, border-color .15s ease, transform .12s ease;
}
.star:hover { border-color: var(--pen); }
.star.on { color: var(--pen); border-color: var(--pen); background: var(--field); }
.tr-file-icon .page { fill: var(--sheet); }
.tr, .tr-panel { scroll-margin-top: 76px; }

/* Footer: seller details and policies (5 Nov 2026). Existing tokens only. */
.foot-seller { margin-bottom: 16px; }
.foot-policies { display: flex; flex-wrap: wrap; gap: 0 18px; margin: 0; }
.foot-policies a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; font-weight: 600; font-size: .95rem; }
.foot #reviewLink { display: inline-flex; align-items: center; min-height: 44px; }
.faq { scroll-margin-top: 76px; }

/* ======================================================================================================================
   5 Nov 2026, navigation and look: section links in the header (a menu panel when narrow), back to top, the price cards
   with the job-ready pack as the recommended one, the pack offer in the chat, the order summary on the order card, the
   service terms, and calm motion. Tokens only (no new colours). Every movement sits inside
   @media (prefers-reduced-motion: no-preference) and is opacity or transform only; tests/unit-test.js checks both.
   ====================================================================================================================== */

/* ---------- Header: section links ---------- */
.menu-btn {
  flex: none; display: none; place-items: center; width: 44px; height: 44px; padding: 0; border-radius: 50%; cursor: pointer;
  color: var(--ink); background: transparent; border: 1px solid var(--rule-strong); touch-action: manipulation;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .12s ease;
}
.menu-btn svg { width: 22px; height: 22px; }
.menu-btn .ico-close { display: none; }
.menu-btn:hover { border-color: var(--pen); background: var(--sheet); }
.menu-btn[aria-expanded="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.menu-btn[aria-expanded="true"] .ico-open { display: none; }
.menu-btn[aria-expanded="true"] .ico-close { display: block; }
.site-nav { flex: 0 1 auto; min-width: 0; margin-inline-start: 18px; }
.nav-list { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 2px; }
.nav-list a {
  position: relative; z-index: 0; display: inline-flex; align-items: center; min-height: 40px; padding: 6px 11px; border-radius: 8px;
  color: var(--ink-soft); font-weight: 600; font-size: .94rem; line-height: 1.2; text-decoration: none; white-space: nowrap;
  transition: background-color .15s ease, color .15s ease;
}
html[lang="ar"] .nav-list a { font-size: .97rem; }
.nav-list a:hover { color: var(--ink); background: var(--sheet); }
/* The section in view: a saffron highlighter stroke behind the word, with an ink line under it (so the state does not
   depend on the yellow alone). */
.nav-list a::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--marker);
  transform: scaleX(0); transform-origin: left center;
}
html[dir="rtl"] .nav-list a::before { transform-origin: right center; }
.nav-list a[aria-current="true"] { color: var(--marker-ink); }
.nav-list a[aria-current="true"]:hover { background: transparent; }
.nav-list a[aria-current="true"]::before { transform: none; }
.nav-list a[aria-current="true"]::after { content: ""; position: absolute; inset-inline: 11px; bottom: 6px; height: 2px; border-radius: 2px; background: var(--marker-ink); }
.nav-scrim { position: fixed; inset: 0; z-index: 8; background: color-mix(in srgb, var(--ink) 26%, transparent); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .nav-scrim { background: color-mix(in srgb, var(--paper) 62%, transparent); } }
:root[data-theme="dark"] .nav-scrim { background: color-mix(in srgb, var(--paper) 62%, transparent); }

/* Narrower than 1100px: the menu button, and the links in a panel that drops from under the header. */
@media (max-width: 1099.98px) {
  .menu-btn { display: grid; }
  .site-nav {
    display: none; position: absolute; top: 100%; inset-inline: 0; z-index: 11; margin: 0;
    background: var(--sheet); border-bottom: 1px solid var(--rule); box-shadow: var(--shadow);
    padding: 10px max(16px, env(safe-area-inset-right, 0px)) 16px max(16px, env(safe-area-inset-left, 0px));
    max-height: calc(100svh - 61px); overflow-y: auto; overscroll-behavior: contain;
  }
  .site-nav.open { display: block; }
  .nav-list { flex-direction: column; align-items: stretch; gap: 2px; max-width: 640px; margin-inline: auto; }
  .nav-list a { display: flex; min-height: 50px; padding: 10px 16px; border-radius: 12px; color: var(--ink); font-size: 1.05rem; }
  .nav-list li + li { border-top: 1px solid var(--rule); padding-top: 2px; }
  html[lang="ar"] .nav-list a { font-size: 1.08rem; }
  .nav-list a:hover { background: var(--field); }
  .nav-list a[aria-current="true"]::after { inset-inline: 16px auto; width: 2.2em; bottom: 9px; }
  .top-row .brand + .site-nav + .top-actions { margin-inline-start: auto; }
}
/* Phones: the same one-row header, a little tighter, so the chat and its first buttons stay on the first screen. */
@media (max-width: 560px) {
  .top-row { gap: 6px; }
  .top-actions { gap: 4px; }
  .brand { gap: 7px; }
  .brand-mark { width: 28px; height: 28px; }
  html[lang="en"] .brand { font-size: 1.06rem; }
  html[lang="ar"] .brand { font-size: 1.26rem; }
  .track-btn { padding: 4px 12px; gap: 5px; }
  .track-btn svg { width: 17px; height: 17px; }
  .lang-btn { border-color: transparent; padding: 4px 9px; }
  .lang-btn:hover { border-color: var(--rule-strong); }
}
/* Very narrow phones: the logo symbol alone in the header (the name stays in the link for screen readers). */
/* 360 to 389 px in English: a little tighter, so "Maseera" stays beside the mark (QA m12). */
@media (min-width: 360px) and (max-width: 389.98px) {
  html[lang="en"] .top-row { gap: 4px; }
  html[lang="en"] .top-actions { gap: 2px; }
  html[lang="en"] .brand { font-size: 1rem; }
  html[lang="en"] .track-btn { padding: 4px 9px; }
  html[lang="en"] .lang-btn { padding: 4px 6px; }
}
@media (max-width: 359.98px) { html[lang="en"] .top .brand > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } }
@media (max-width: 359.98px) { html[lang="ar"] .top .brand > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } }
/* The chat as an anchor (the price cards' buttons, the skip link): its headline stays clear of the sticky header. */
.chat-top { scroll-margin-top: 58px; }

/* ---------- Back to top ---------- */
button.to-top {
  position: fixed; z-index: 9; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); inset-inline-end: 18px;
  width: 48px; height: 48px; padding: 0; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  color: var(--pen); background: var(--sheet); border: 1px solid var(--rule-strong); box-shadow: var(--shadow); touch-action: manipulation;
  opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility 0s linear .2s, background-color .15s ease, border-color .15s ease;
}
button.to-top svg { width: 22px; height: 22px; }
button.to-top.show { opacity: 1; visibility: visible; transition: opacity .2s ease, visibility 0s linear 0s, background-color .15s ease, border-color .15s ease; }
button.to-top:hover { border-color: var(--pen); background: var(--field); }

/* ---------- Links, buttons and cards: hover, focus and press ---------- */
a { text-decoration-thickness: 1px; transition: color .15s ease, text-decoration-color .15s ease; }
a:hover { text-decoration-thickness: 2px; }
.btn-quiet:hover { color: var(--pen-press); }
.why-list li, .review, .tr-file { transition: border-color .2s ease; }
.why-list li:hover, .review:hover { border-color: var(--rule-strong); }
.guide-links a:hover { box-shadow: var(--shadow); }
.faq summary { border-radius: 6px; transition: color .15s ease; }
.foot-nav a, .foot-policies a { text-underline-offset: 4px; }

/* ---------- Prices: the job-ready pack first, as the recommended card, then the single services ---------- */
.price-cards { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 14px; }
@media (min-width: 760px) { .price-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } .price-card.is-pack { grid-column: 1 / -1; } }
.price-card {
  display: flex; flex-direction: column; gap: 6px; padding: 16px 18px 18px; background: var(--sheet);
  border: 1px solid var(--rule); border-radius: var(--radius-sheet);
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s var(--ease);
}
.price-card:hover { border-color: var(--rule-strong); box-shadow: var(--shadow); }
.price-card h3 { margin: 0; font-size: 1.05rem; line-height: 1.45; }
.pc-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.pc-price { font-weight: 700; font-size: 1.15rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pc-desc { margin: 0; flex: 1; color: var(--ink-soft); font-size: .95rem; line-height: 1.55; }
.price-card .pc-cta { margin-top: 10px; min-height: 46px; padding: 8px 18px; }
.price-card:not(.is-pack) .pc-cta { margin-top: auto; align-self: flex-start; min-width: 150px; }
.price-card:not(.is-pack) .pc-desc { margin-bottom: 12px; }
.price-card.is-pack { display: grid; gap: 16px; padding: 20px 18px 20px; border: 2px solid var(--pen); box-shadow: var(--shadow); }
.price-card.is-pack:hover { border-color: var(--pen); }
@media (min-width: 760px) {
  .price-card.is-pack {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); grid-template-areas: "main stack" "cta stack";
    grid-template-rows: auto 1fr; column-gap: 36px; row-gap: 18px; align-items: start; padding: 26px 30px 28px;
  }
  .is-pack .pc-main { grid-area: main; }
  .is-pack .pc-stack { grid-area: stack; align-self: center; }
  .is-pack .pc-cta { grid-area: cta; }
}
.pc-main { display: flex; flex-direction: column; align-items: flex-start; }
.pc-badge {
  display: inline-block; max-width: 100%; padding: 3px 12px; border-radius: 6px;
  background: var(--marker); color: var(--marker-ink); font-size: .84rem; font-weight: 700; line-height: 1.55;
}
.is-pack h3 { margin: 12px 0 4px; font-size: clamp(1.25rem, 1.05rem + .8vw, 1.6rem); line-height: 1.35; }
html[lang="en"] .is-pack h3 { line-height: 1.2; letter-spacing: -.01em; }
.pc-benefit { margin: 0; color: var(--ink-soft); font-size: 1rem; line-height: 1.6; max-width: 30em; }
.is-pack .pc-cta { margin-top: 2px; justify-self: stretch; }
@media (min-width: 760px) { .is-pack .pc-cta { justify-self: start; align-self: start; min-width: 220px; margin-top: 0; } }
/* What the pack holds, each part with its price bought separately, then that sum and the pack's price: a small receipt. */
.pc-stack { padding: 14px 16px 16px; border-radius: 12px; background: var(--field); }
.pc-parts { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.pc-parts li { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 10px; align-items: start; font-size: .97rem; line-height: 1.5; }
.tick { width: 22px; height: 22px; margin-top: 1px; border-radius: 50%; display: grid; place-items: center; background: var(--pen); color: var(--on-pen); flex: none; }
.tick svg { width: 13px; height: 13px; }
.part-price { color: var(--pencil); font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
/* The pack's extras (5 Nov 2026): included at no extra charge, so a tag stands where a price would be. */
.extra-tag { display: inline-block; padding: 1px 9px; border-radius: 999px; background: var(--bubble-me); color: var(--pen-press); font-size: .78rem; font-weight: 700; line-height: 1.6; white-space: nowrap; vertical-align: 1px; }
.pc-parts .extra-tag { align-self: center; }
.pc-sum { display: flex; align-items: center; gap: 8px 12px; margin: 0; }
.pc-sum > span:first-child { flex: 1; }
.pc-total { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "label price" ". save"; align-items: center; gap: 4px 12px; margin: 0; }
.pc-total > span:first-child { grid-area: label; }
.pc-total .pc-price { grid-area: price; justify-self: end; }
.pc-total .pc-save { grid-area: save; justify-self: end; }
@media (min-width: 1000px) { .pc-total { grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "label save price"; } }
.pc-sum { margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--rule-strong); color: var(--ink-soft); font-size: .95rem; }
.pc-sep { font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pc-total { margin-top: 6px; font-weight: 700; }
.pc-total .pc-price { font-size: 1.65rem; line-height: 1.25; }
.pc-save { display: inline-block; padding: 2px 10px; border-radius: 999px; background: var(--bubble-me); color: var(--pen-press); font-size: .84rem; font-weight: 700; line-height: 1.5; white-space: nowrap; }

/* ---------- The pack offer in the chat (only when the customer has a job ad and the pack saves money) ---------- */
.choices.offer { flex-direction: column; align-items: stretch; width: min(100%, 31em); }
.offer-card { display: grid; gap: 8px; padding: 14px 14px 14px; border: 2px solid var(--pen); border-radius: 16px; background: var(--sheet); box-shadow: var(--shadow); }
.offer-card .pc-badge { justify-self: start; }
.offer-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 2px 0 0; }
.offer-title { font-weight: 700; font-size: 1.05rem; line-height: 1.4; }
.offer-price { font-weight: 700; font-size: 1.2rem; white-space: nowrap; }
.offer-ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: .95rem; line-height: 1.5; }
.offer-ticks li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 9px; align-items: start; }
.offer-anchor { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 2px 0 2px; color: var(--ink-soft); font-size: .9rem; line-height: 1.5; }
.offer-card .choice { width: 100%; border-radius: 12px; }
.choices.offer > .choice { border-radius: 14px; text-align: start; padding: 12px 16px; }
/* "Or one service:" between the pack card and the single services. */
.offer-or { margin: 6px 2px 0; color: var(--ink-soft); font-size: .92rem; font-weight: 600; }
.choice.choice-primary { background: var(--pen); border-color: var(--pen); color: var(--on-pen); }
.choice.choice-primary:hover, .choice.choice-primary:active, .choice.choice-primary.pressed { background: var(--pen-press); border-color: var(--pen-press); }
.choice.choice-primary .sub { color: var(--on-pen); }
@media (max-width: 560px) {
  .offer-card { gap: 6px; padding: 12px 12px 12px; }
  .offer-ticks { gap: 4px; font-size: .92rem; }
  .offer-anchor { font-size: .86rem; }
  .offer-card .choice { min-height: 46px; padding: 8px 14px; }
}

/* ---------- The order card: the order summary (its lines with their prices and the total), then the details ---------- */
.basket-head h3 { font-size: 1.15rem; }
.basket-head .fine { margin: 2px 0 0; }
.basket-lines { list-style: none; margin: 12px 0 0; padding: 0; border-top: 2px solid var(--ink); }
.line {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "label price" "control control";
  gap: 6px 12px; align-items: center; padding: 10px 0 12px; border-bottom: 1px solid var(--rule);
}
.line-addon { grid-template-areas: "check price"; }
.line-label { grid-area: label; font-weight: 600; font-size: .86rem; color: var(--pencil); }
.line select { grid-area: control; }
.line-check, .line-inc { grid-area: check; }
.line select {
  font: inherit; font-size: 16px; color: var(--ink); background: var(--field); border: 1px solid var(--field-line);
  border-radius: 10px; padding: 9px 12px; min-height: 48px; width: 100%; transition: border-color .15s ease;
}
.line select:hover { border-color: var(--pen); }
.line-price { grid-area: price; justify-self: end; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.line-price.muted { color: var(--pencil); font-weight: 600; font-size: .92rem; }
.line.is-off .line-price { color: var(--pencil); font-weight: 600; }
.line-check { display: flex; align-items: center; gap: 10px; min-height: 44px; font-weight: 600; cursor: pointer; }
.line-check input { width: 22px; height: 22px; margin: 0; accent-color: var(--pen); }
.line-inc { display: flex; align-items: center; gap: 10px; min-height: 44px; font-weight: 600; }
.basket .total-row { margin-top: 0; padding-top: 12px; border-top: 0; }
/* The discount line: its name with "Remove", and the amount taken off. */
.line-discount .line-inc { flex-wrap: wrap; gap: 4px 12px; }
.line-discount .line-price { color: var(--pen-press); }
.line-discount .link-btn { min-height: 44px; min-width: 44px; font-size: .92rem; }
/* "Have a code?" under the total: a quiet link that opens the field, its Apply button beside it. */
.code-box { display: grid; gap: 6px; margin-top: 6px; }
.code-toggle { justify-self: start; min-height: 44px; }
.code-group { display: grid; gap: 6px; padding: 10px 12px 12px; border-radius: 12px; background: var(--field); }
.code-label { font-weight: 600; font-size: .92rem; }
.code-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: stretch; }
.code-row input {
  font: inherit; font-size: 16px; color: var(--ink); background: var(--sheet); border: 1px solid var(--field-line);
  border-radius: 10px; padding: 9px 12px; min-height: 48px; width: 100%; letter-spacing: .04em; text-transform: uppercase;
}
.code-row input::placeholder { text-transform: none; letter-spacing: 0; }
.code-row input[aria-invalid="true"] { border-color: var(--redpen); }
.card .code-row .btn { width: auto; margin-top: 0; min-height: 48px; padding: 8px 18px; }
.code-group .hint { font-size: .8rem; color: var(--pencil); line-height: 1.5; }
.code-group .err { font-size: .85rem; color: var(--redpen); font-weight: 600; }
.code-note { margin: 0; padding: 8px 12px; border-radius: 10px; background: var(--bubble-me); color: var(--pen-press); font-size: .9rem; font-weight: 600; line-height: 1.55; }
.basket-note { margin: 10px 0 0; padding: 9px 12px; border-radius: 10px; background: var(--bubble-me); color: var(--pen-press); font-size: .92rem; font-weight: 600; line-height: 1.55; }
.basket-upsell { display: grid; gap: 10px; margin-top: 12px; padding: 12px 14px; border: 1.5px dashed var(--pen); border-radius: 12px; background: var(--field); }
.basket-upsell p { margin: 0; color: var(--ink); font-size: .95rem; line-height: 1.55; }
.card .basket-upsell .btn { width: auto; justify-self: start; min-height: 44px; margin-top: 0; padding: 8px 16px; }
.basket-details { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--rule); }
.basket-details h4 { margin: 0; font-size: 1rem; }
.basket-details .field:first-of-type { margin-top: 6px; }
.basket-actions { margin-top: 16px; }
.basket-actions .delivery { margin: 0 0 10px; }
.terms-box { padding: 10px 12px; border-radius: 12px; background: var(--field); }
.terms-check { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; font-size: .95rem; line-height: 1.6; cursor: pointer; }
html[lang="en"] .terms-check { line-height: 1.5; }
.terms-check input { width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--pen); }
.terms-check input[aria-invalid="true"] { outline: 2px solid var(--redpen); outline-offset: 2px; }
.terms-box .form-error { margin: 8px 0 0; }
.pay-note { margin-top: 10px; text-align: center; line-height: 1.55; }

/* After sending: the same summary, read-only, under the order number and its date. Start-aligned inside the centred card. */
.done .order-date { margin: 0; color: var(--ink-soft); font-size: .95rem; }
.receipt { margin: 14px auto 16px; max-width: 30em; padding: 12px 16px 14px; border: 1px solid var(--rule); border-radius: 12px; background: var(--field); text-align: start; }
.receipt h4 { margin: 0 0 6px; font-size: 1rem; }
.rc-lines { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule-strong); }
.rc-lines li { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 8px 0; border-bottom: 1px dashed var(--rule-strong); font-size: .95rem; line-height: 1.5; }
.rc-amount { font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.rc-amount.muted { color: var(--pencil); font-weight: 600; }
.rc-total { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; margin: 10px 0 6px; font-weight: 700; font-size: 1.08rem; }
.receipt .fine { margin: 0; }

/* ---------- Service terms ---------- */
.terms-list { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 12px; counter-reset: term; }
@media (min-width: 760px) { .terms-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 28px; } }
@media (min-width: 1080px) { .terms-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.terms-list li { counter-increment: term; display: grid; grid-template-columns: 30px minmax(0, 1fr); align-content: start; column-gap: 10px; padding-top: 12px; border-top: 1px solid var(--rule); }
.terms-list li::before { content: counter(term); grid-row: 1 / span 2; font-weight: 700; color: var(--pen); line-height: 1.5; }
.terms-list h3 { margin: 0; font-size: 1rem; line-height: 1.5; }
.terms-list p { margin: 2px 0 0; color: var(--ink-soft); font-size: .95rem; line-height: 1.6; }
html[lang="en"] .terms-list p { line-height: 1.5; }
.terms-updated { margin-top: 16px; }

/* ---------- The order page: a Home button in the header ---------- */
.home-btn {
  display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 4px 15px; border-radius: 999px;
  border: 1px solid var(--rule-strong); color: var(--pen); font-weight: 600; font-size: .95rem; line-height: 1.2; text-decoration: none; white-space: nowrap;
  transition: background-color .15s ease, border-color .15s ease, transform .12s ease;
}
.home-btn svg { width: 19px; height: 19px; flex: none; }
.home-btn:hover { border-color: var(--pen); background: var(--sheet); color: var(--pen-press); }

/* ---------- Motion (none with "reduce motion") ---------- */
@keyframes panel-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@keyframes stop-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes check-in { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: none; } }
@keyframes rail-y { from { transform: scaleY(0); } to { transform: none; } }
@keyframes rail-x { from { transform: scaleX(0); } to { transform: none; } }
@keyframes icon-turn { from { transform: rotate(-90deg); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: no-preference) {
  .site-nav.open { animation: panel-in .22s var(--ease) both; }
  .nav-scrim:not([hidden]) { animation: fade .22s ease both; }
  .menu-btn[aria-expanded="true"] .ico-close { animation: icon-turn .22s var(--ease) both; }
  .nav-list a::before { transition: transform .3s var(--ease); }
  .menu-btn:active, .home-btn:active, .price-card .pc-cta:active { transform: scale(.97); }
  button.to-top { transform: translateY(10px); transition: opacity .22s ease, visibility 0s linear .22s, transform .22s var(--ease), background-color .15s ease, border-color .15s ease; }
  button.to-top.show { transform: none; transition: opacity .22s ease, visibility 0s linear 0s, transform .22s var(--ease), background-color .15s ease, border-color .15s ease; }
  button.to-top.show:active { transform: scale(.94); }
  .price-card:hover, .guide-links a:hover { transform: translateY(-2px); }
  .guide-links a { transition: border-color .15s ease, color .15s ease, box-shadow .2s ease, transform .2s var(--ease); }
  /* Cards come in one after another as their section comes into view (app.js adds .in once). */
  .reveal-on main > .section.in :is(.price-cards, .why-list, .step-list, .guide-links, .review-list, .terms-list) > li { animation: rise .4s var(--ease) backwards; }
  .reveal-on main > .section:not(.in) :is(.price-cards, .why-list, .step-list, .guide-links, .review-list, .terms-list) > li { opacity: 0; }
  .reveal-on main > .section.in :is(.price-cards, .why-list, .step-list, .guide-links, .review-list, .terms-list) > li:nth-child(2) { animation-delay: .06s; }
  .reveal-on main > .section.in :is(.price-cards, .why-list, .step-list, .guide-links, .review-list, .terms-list) > li:nth-child(3) { animation-delay: .12s; }
  .reveal-on main > .section.in :is(.price-cards, .why-list, .step-list, .guide-links, .review-list, .terms-list) > li:nth-child(4) { animation-delay: .18s; }
  .reveal-on main > .section.in :is(.price-cards, .why-list, .step-list, .guide-links, .review-list, .terms-list) > li:nth-child(5) { animation-delay: .24s; }
  .reveal-on main > .section.in :is(.price-cards, .why-list, .step-list, .guide-links, .review-list, .terms-list) > li:nth-child(n+6) { animation-delay: .3s; }
  /* The pack offer in the chat and the order summary arrive like the other cards; the summary's saving fades in. */
  .log > .choices.offer .offer-card { animation: rise .32s var(--ease) both; }
  /* The order page: the stops come in one by one, the done ones get their check, and the solid rail fills to the next. */
  .tr-stop { animation: stop-in .4s var(--ease) backwards; animation-delay: var(--d, 0s); }
  .tr-stop:nth-child(2) { --d: .05s; }
  .tr-stop:nth-child(3) { --d: .1s; }
  .tr-stop:nth-child(4) { --d: .15s; }
  .tr-stop:nth-child(5) { --d: .2s; }
  .tr-stop:nth-child(6) { --d: .25s; }
  .tr-stop:nth-child(7) { --d: .3s; }
  .tr-stop.is-done .tr-node svg { animation: check-in .36s var(--ease) backwards; animation-delay: calc(var(--d, 0s) + .14s); }
  .tr-stop.is-done:not(:last-child)::before { transform-origin: top center; animation: rail-y .5s var(--ease) backwards; animation-delay: calc(var(--d, 0s) + .2s); }
}
@media (prefers-reduced-motion: no-preference) and (min-width: 760px) {
  .tr-stop.is-done:not(:last-child)::before { transform-origin: left center; animation-name: rail-x; }
  html[dir="rtl"] .tr-stop.is-done:not(:last-child)::before { transform-origin: right center; }
}
/* With "reduce motion": no smooth scrolling, no entrance or stagger, and the menu, back-to-top and cards stay still. */
@media (prefers-reduced-motion: reduce) {
  .site-nav.open, .nav-scrim, .menu-btn .ico-close, .tr-stop, .tr-stop .tr-node svg, .tr-stop::before, .offer-card { animation: none !important; }
  .nav-list a::before, button.to-top { transition: none; }
  button.to-top, .price-card, .guide-links a { transform: none !important; }
}

/* ======================================================================================================================
   QA fixes (5 Nov 2026). No new colours besides --field-line (above); no movement.
   ====================================================================================================================== */
/* The order summary on phones (QA M5): at the review step the chat fills the screen under the sticky header (app.js
   brings it into view when the card appears) and the step bar keeps only its numbers (the step names stay for screen
   readers), so the card is read in a window about 1.6 times as tall as before. The chat keeps working below it. */
@media (max-width: 759.98px) {
  .chat-sheet[data-step="review"] .chat { height: calc(100vh - 78px); height: calc(100svh - 78px); min-height: 440px; scroll-margin-top: 70px; }
  .chat-sheet[data-step="review"] .steps { padding-block: 6px; }
  .chat-sheet[data-step="review"] .steps li > span:not(.num) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
/* Wide screens too (UX test, 5 Nov 2026): at the review step the chat grows to the screen's height under the header, as on
   phones, so a laptop reads the order summary in a taller window (on 1440 x 900, about 580 px instead of 465 px). */
@media (min-width: 760px) {
  .chat-sheet[data-step="review"] .chat { height: calc(100vh - 78px); height: calc(100svh - 78px); min-height: 560px; max-height: 1100px; scroll-margin-top: 70px; }
}
/* The page behind the open menu panel stays still (QA m16); the panel scrolls on its own. */
@media (max-width: 1099.98px) { html.nav-open, html.nav-open body { overflow: hidden; } }

/* ======================================================================================================================
   Pilot test and UX follow-ups (5 Nov 2026). Tokens only; no new colours; motion only under no-preference.
   ====================================================================================================================== */
/* The pilot test notice (CONFIG pilot; README "Pilot test"). The home page shows it in place of the subtitle, the order
   page under its title; "My orders" uses the same markup:
   <p class="pilot-note" role="note"><strong class="pilot-title">pilotTitle</strong> <span>pilotText</span></p> */
.pilot-note { margin: -4px 0 14px; padding: 8px 12px; max-width: 44em; border-radius: 12px; background: var(--amber-bg); color: var(--amber-ink); font-size: .93rem; line-height: 1.6; text-wrap: pretty; }
.pilot-title { display: inline-block; margin-inline-end: 4px; padding: 0 9px; border-radius: 999px; background: var(--marker); color: var(--marker-ink); font-size: .86rem; font-weight: 700; line-height: 1.75; }
.tr-main .pilot-note { margin: 0 0 14px; }
@media (prefers-reduced-motion: no-preference) { .chat-col > .pilot-note { animation: rise .32s var(--ease) .05s both; } }

/* The order summary: the name and the WhatsApp number as one line with "Change"; the two fields open below it. */
.who-line { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 12px; margin: 6px 0 2px; padding: 2px 4px 2px 12px; border-radius: 12px; background: var(--field); }
html[dir="rtl"] .who-line { padding: 2px 12px 2px 4px; }
.who-text { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; min-width: 0; padding-block: 8px; font-weight: 600; overflow-wrap: anywhere; }
.who-sep { color: var(--pencil); }
.who-edit { min-height: 44px; min-width: 44px; padding-inline: 8px; }

/* The order page's final states (Cancelled, Closed): one clear line and a short note; no progress bar and no stops. */
.tr.final .tr-progress, .tr.final .tr-meta, .tr.final .tr-route { display: none; }
.tr-now-icon.stopped { background: var(--field); color: var(--ink-soft); }

/* The pack offer in the chat on small phones (UX test follow-up): tighter lines, so the single services under it come
   into view sooner. Every button stays at least 44 px. */
@media (max-width: 400px) {
  .offer-card { gap: 4px; padding: 10px 10px 10px; border-radius: 14px; }
  .offer-card .pc-badge { padding: 1px 9px; font-size: .78rem; }
  .offer-head { margin: 0; }
  .offer-title { font-size: 1rem; }
  .offer-price { font-size: 1.08rem; }
  .offer-ticks { gap: 2px; font-size: .86rem; line-height: 1.45; }
  .offer-ticks li { grid-template-columns: 18px minmax(0, 1fr); gap: 6px; }
  .offer-ticks .tick { width: 18px; height: 18px; }
  .offer-ticks .tick svg { width: 11px; height: 11px; }
  .offer-ticks .extra-tag { font-size: .74rem; padding: 0 7px; }
  .offer-anchor { margin: 0; font-size: .82rem; }
  .offer-card .choice { min-height: 44px; padding: 6px 12px; }
  .offer-or { margin-top: 2px; }
}

/* ======================================================================================================================
   Talk mode (5 Nov 2026): public/talk.js. The switch sits at the start of the line under the message box; while talk
   mode is on, the same line shows what is happening (a level meter while listening), the next step and a pause
   button. Existing colours only (the track's edge is --field-line, 3:1 like a text field's); every control is 44 px;
   the thumb slides and the meter moves only without "reduce motion" (talk.js then shows the level in three steps).
   ====================================================================================================================== */
.composer-meta.has-talk { flex-wrap: wrap; align-items: center; row-gap: 2px; }
.composer-meta.talk-on #composerNote:empty, .composer-meta.talk-on #charCount:empty { display: none; }
.talk { display: flex; align-items: center; gap: 6px; min-width: 0; color: var(--ink-soft); }
.composer-meta.talk-on .talk { flex: 1 1 100%; }
.talk-switch {
  flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 8px; margin-inline-start: -8px;
  font: inherit; font-size: .86rem; font-weight: 600; line-height: 1.3; color: var(--ink-soft); background: transparent; border: 0; border-radius: 10px;
  cursor: pointer; touch-action: manipulation;
}
.talk-track { position: relative; flex: none; width: 38px; height: 22px; border-radius: 999px; border: 1.5px solid var(--field-line); background: var(--field); }
.talk-thumb { position: absolute; top: 2.5px; inset-inline-start: 3px; width: 14px; height: 14px; border-radius: 50%; background: var(--pencil); }
.talk-switch:hover .talk-track { border-color: var(--pen); }
.talk-switch[aria-checked="true"] .talk-track { background: var(--pen); border-color: var(--pen); }
.talk-switch[aria-checked="true"] .talk-thumb { inset-inline-start: 18px; background: var(--on-pen); }
.talk-switch[aria-checked="true"] { color: var(--ink); }
.talk-meter { flex: none; display: inline-flex; align-items: center; gap: 3px; height: 24px; padding-inline: 2px; }
.talk-meter > span { display: block; width: 3px; height: 20px; border-radius: 2px; background: var(--pen); transform: scaleY(.2); }
.talk-status { flex: 1 1 auto; min-width: 0; font-size: .86rem; line-height: 1.35; color: var(--ink); overflow-wrap: anywhere; }
.talk[data-state="off"] .talk-status { color: var(--pencil); }
.talk-main {
  flex: none; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1.5px solid var(--pen); background: var(--sheet); color: var(--pen);
  font: inherit; font-size: .88rem; font-weight: 700; line-height: 1.2; cursor: pointer; touch-action: manipulation;
}
.talk-main:hover { background: var(--field); }
.talk-pause {
  flex: none; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; border: 0; background: transparent; color: var(--pen);
  cursor: pointer; touch-action: manipulation;
}
.talk-pause:hover { background: var(--field); }
.talk-pause svg { width: 20px; height: 20px; }
/* Listening: a calm band behind the line, in the field colour of the message box. */
.talk[data-state="listening"] { background: var(--field); border-radius: 12px; padding-inline-end: 2px; }
@media (prefers-reduced-motion: no-preference) {
  .talk-thumb { transition: inset-inline-start .16s var(--ease), background-color .16s ease; }
  .talk-meter > span { transition: transform .08s linear; }
}
/* Narrow phones: while talk mode is on, the switch keeps its track and its name only for screen readers, so the status,
   "Send now" and the pause button fit on the same line. */
@media (max-width: 479.98px) {
  .talk:not([data-state="off"]) .talk-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .talk { gap: 4px; }
  .talk-meter { gap: 2px; padding-inline: 0; }
  .talk-main { padding: 0 10px; }
}

/* ======================================================================================================================
   "My orders" (/orders, 5 Nov 2026; public/orders.html and orders.js): the email, the one-time code, then the list of that
   email's orders with their stage, dates, files and the order page link; the referral code and credits above. Existing
   tokens and the order page's parts only (no new colours). Movement only inside prefers-reduced-motion: no-preference.
   ====================================================================================================================== */
.mo-card { max-width: 560px; margin-inline: 0; }
.field input[type="email"] {
  font: inherit; font-size: 16px; color: var(--ink); background: var(--field); border: 1px solid var(--field-line);
  border-radius: 10px; padding: 9px 12px; min-height: 48px; width: 100%;
}
/* The code: large, spaced digits that read the same in Arabic and English. */
.field input.mo-code { font-size: 1.5rem; font-weight: 700; letter-spacing: .32em; text-align: center; font-variant-numeric: tabular-nums; min-height: 56px; }
.field input.mo-code::placeholder { letter-spacing: normal; }
.mo-sent { margin: 0 0 4px; line-height: 1.65; outline: none; }
.mo-email { font-weight: 700; overflow-wrap: anywhere; }
.mo-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 18px; margin-top: 8px; }
.mo-row .link-btn { min-height: 44px; padding: 0 2px; }
.mo-row .link-btn[disabled] { color: var(--pencil); text-decoration: none; cursor: default; font-weight: 500; }
.mo-out { max-width: 560px; margin: 0 0 14px; }

.mo-list { display: grid; gap: 16px; }
.mo-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; }
.mo-who { margin: 0; font-size: 1.05rem; line-height: 1.5; outline: none; min-width: 0; }
.mo-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.mo-signout { min-height: 44px; padding: 6px 16px; }
.mo-extras { display: grid; gap: 12px; }
@media (min-width: 900px) { .mo-extras { grid-template-columns: 1fr 1fr; align-items: start; } }
.mo-extras .ref-box { margin-top: 0; }
.mo-extras .ref-copy { min-height: 44px; padding: 6px 16px; }
.mo-credits { display: grid; gap: 8px; padding: 12px 14px 14px; border: 1px solid var(--rule); border-radius: 12px; background: var(--field); }
.mo-credit-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-weight: 600; line-height: 1.55; }

/* One card per order: the number and date, the service, the order page's line, "Step n of 7" with the same progress bar,
   the date, the files and the order page link. An order that asks for answers gets an amber edge (with words saying so). */
.mo-orders { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.mo-order {
  display: grid; gap: 8px; padding: 16px 16px 18px; background: var(--sheet); border: 1px solid var(--rule);
  border-radius: var(--radius-sheet); box-shadow: var(--shadow);
}
@media (min-width: 720px) { .mo-order { padding: 20px 24px 22px; } }
.mo-order.asking { border-inline-start: 4px solid var(--amber-ink); }
.mo-o-top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 14px; }
.mo-o-id, .mo-o-date { margin: 0; font-size: .92rem; color: var(--pencil); line-height: 1.4; }
.mo-o-svc { margin: 0; font-size: 1.1rem; line-height: 1.45; }
.mo-o-line { margin: 0; font-weight: 700; line-height: 1.5; }
.mo-o-step { margin: 0; font-size: .9rem; color: var(--ink-soft); line-height: 1.45; }
.mo-order .tr-progress { margin-top: 2px; height: 8px; }
.mo-o-when { margin: 2px 0 0; font-size: .92rem; color: var(--ink-soft); line-height: 1.5; }
.mo-order .tr-note { margin-top: 2px; }
.mo-files { margin-top: 6px; }
.mo-o-files-note { margin: 0; line-height: 1.5; }
.mo-order .mo-open { justify-self: start; width: auto; min-height: 46px; padding: 8px 18px; margin-top: 6px; }
.mo-open svg { width: 18px; height: 18px; }
@media (max-width: 440px) { .mo-order .mo-open { justify-self: stretch; } }
.foot #myOrdersFoot { display: inline-flex; align-items: center; min-height: 44px; }
/* The links to "My orders" on the done card and the order page. */
.mo-hint { margin-top: 8px; line-height: 1.6; }
.mo-hint a, .mo-link a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }
.mo-link { margin: 10px 0 0; line-height: 1.6; }
.tr-foot .mo-all { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }
@media (prefers-reduced-motion: no-preference) {
  .mo-list:not([hidden]) .mo-order { animation: rise .32s var(--ease) both; }
  .mo-list:not([hidden]) .mo-order:nth-child(2) { animation-delay: .05s; }
  .mo-list:not([hidden]) .mo-order:nth-child(n+3) { animation-delay: .1s; }
}