/* AUTO-SHARED across every page of the Masar public site. Single source for the two theme
   profiles, layout primitives and components — pages hold ONLY their own content.
   Copyright © Apsa. All rights reserved. — Engineer: Samer Alhamid */
:root{
    /* Gold is deliberately rationed: resting UI stays neutral (--lp-border), gold only
       appears at the handful of places that should actually command attention — the brand
       mark, the primary CTA, one accent word in the headline, and as a reveal ON HOVER
       (never as the default state of every card/border). A reference luxury/mobility site
       (wee-sy.com) uses one accent color sparingly against 3-4 total colors, not broadly —
       this mirrors that restraint instead of gold-tinting every container. */
    --lp-bg-0:#050505; --lp-bg-1:#0c0c0e; --lp-bg-2:#141416;
    --lp-ink:#f5f2ea; --lp-ink-dim:rgba(245,242,234,.62); --lp-ink-faint:rgba(245,242,234,.38);
    --lp-glass-bg:rgba(255,255,255,.045); --lp-glass-bg-hover:rgba(255,255,255,.075);
    --lp-border:rgba(255,255,255,.09); --lp-glass-border-hover:rgba(212,175,55,.55);
    --lp-glow:rgba(212,175,55,.07); --lp-radius:20px;
  }
  /* Light "beige" profile — user-selectable (persisted). Emerald ink on warm beige with the same
     canonical gold accent; only surface/ink vars diverge, every component below is theme-agnostic. */
  html[data-theme="light"]{
    --lp-bg-0:#F7F3EA; --lp-bg-1:#FBF8F2; --lp-bg-2:#EFE7D8;
    /* Brand emerald resolves through the generated token - never a loose literal, so a
       palette change in tokens.json propagates everywhere instead of drifting. */
    --lp-ink:var(--masar-emerald); --lp-ink-dim:rgba(11,60,38,.70); --lp-ink-faint:rgba(11,60,38,.45);
    --lp-glass-bg:rgba(255,255,255,.62); --lp-glass-bg-hover:rgba(255,255,255,.85);
    --lp-border:rgba(11,60,38,.12); --lp-glass-border-hover:rgba(212,175,55,.60);
    /* glow reduced 65% vs the dark profile's presence — on beige a strong gold halo reads cheap */
    --lp-glow:rgba(212,175,55,.063);
  }
  /* Gold CTA on beige: shadow also cut ~65% so the button sits on the surface instead of glowing off it. */
  html[data-theme="light"] .btn-gold{
    color:#100c02;
    box-shadow:0 4px 10px rgba(212,175,55,.10), 0 0 0 1px rgba(212,175,55,.18) inset;
  }
  html[data-theme="light"] .btn-gold:hover{
    box-shadow:0 7px 16px rgba(212,175,55,.16), 0 0 0 1px rgba(212,175,55,.26) inset;
  }
  /* Headings in the deep brand emerald for authority on the light profile. */
  html[data-theme="light"] h1,
  html[data-theme="light"] h2,
  html[data-theme="light"] h3{color:var(--masar-emerald)}
  html[data-theme="light"] .brand b{color:var(--masar-emerald)}
  /* Saudi/Gulf character: a faint eight-point (rub-el-hizb) lattice — the same geometric family used
     across Saudi institutional design. Gold at very low alpha so it reads as texture, never pattern-noise. */
  html[data-theme="light"] body::before{
    content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.5;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cg fill='none' stroke='%230B3C26' stroke-opacity='.055' stroke-width='1'%3E%3Crect x='22' y='22' width='28' height='28'/%3E%3Crect x='22' y='22' width='28' height='28' transform='rotate(45 36 36)'/%3E%3C/g%3E%3C/svg%3E");
    background-size:72px 72px;
  }
  html[data-theme="light"] header.scrolled{background:rgba(251,248,242,.78)}
  html[data-theme="light"] .mobile-nav{background:rgba(251,248,242,.96)}
  html[data-theme="light"] .feat .ic{background:radial-gradient(circle at 30% 30%,#fffdf8,#f2ebdd)}
  html[data-theme="light"] .btn-gold{color:#100c02}
  body,header,.feat,.step,.coverage,.cta-band,.dept-card,.btn-ghost,.lang{
    transition:background-color .45s ease, color .45s ease, border-color .45s ease;
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{
    /* SF Pro Display leads the stack so ALL Latin glyphs + numerals render in it; Arabic has no
       coverage there and falls through to DIN Next LT Arabic automatically (per SPRINT-003). */
    font-family:var(--masar-font-latin),var(--masar-font-arabic),system-ui,sans-serif;
    font-variant-numeric:tabular-nums;
    color:var(--lp-ink);
    background:
      radial-gradient(1200px 800px at 85% -10%,rgba(212,175,55,.14),transparent 60%),
      radial-gradient(900px 600px at 5% 110%,rgba(212,175,55,.08),transparent 55%),
      linear-gradient(180deg,var(--lp-bg-1) 0%,var(--lp-bg-0) 55%,var(--lp-bg-2) 100%);
    min-height:100vh; overflow-x:hidden;
  }
  a{color:inherit}

  /* ---------- header ---------- */
  header{
    position:sticky; top:0; z-index:50;
    display:flex; align-items:center; justify-content:space-between;
    padding:18px 6vw; backdrop-filter:blur(0px); -webkit-backdrop-filter:blur(0px);
    background:transparent; border-bottom:1px solid transparent;
    transition:background .35s ease, backdrop-filter .35s ease, border-color .35s ease, padding .35s ease;
  }
  header.scrolled{
    padding:12px 6vw; background:rgba(5,5,5,.72);
    backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
    border-bottom:1px solid var(--lp-border);
  }
  .brand{display:flex; align-items:center; gap:12px; text-decoration:none}
  .brand img{
    width:44px; height:44px; object-fit:contain; border-radius:12px;
    filter:drop-shadow(0 0 6px var(--lp-glow)) drop-shadow(0 0 12px rgba(212,175,55,.05));
    transition:filter .3s ease, transform .3s ease;
  }
  .brand:hover img{transform:scale(1.06); filter:drop-shadow(0 0 9px var(--lp-glow)) drop-shadow(0 0 16px rgba(212,175,55,.08))}
  .brand b{font-size:19px; letter-spacing:.02em; color:var(--lp-ink)}

  nav.desktop-nav{display:flex; align-items:center; gap:30px; font-size:14.5px}
  nav.desktop-nav a:not(.btn){
    position:relative; text-decoration:none; color:var(--lp-ink-dim); font-weight:600; padding:4px 0;
    transition:color .25s ease;
  }
  nav.desktop-nav a:not(.btn)::after{
    content:""; position:absolute; left:0; right:100%; bottom:-2px; height:1.5px;
    background:var(--masar-gold-gradient); transition:right .3s ease;
  }
  nav.desktop-nav a:not(.btn):hover{color:var(--lp-ink)}
  nav.desktop-nav a:not(.btn):hover::after{right:0}

  .btn{
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    border:none; cursor:pointer; font-family:inherit; font-weight:800; font-size:14.5px;
    text-decoration:none; border-radius:14px; padding:13px 26px;
    transition:transform .22s cubic-bezier(.2,.8,.2,1), box-shadow .28s ease, background .28s ease, border-color .28s ease;
    -webkit-tap-highlight-color:transparent;
  }
  .btn:active{transform:scale(.97)}
  .btn-gold{
    color:#100c02; background:var(--masar-gold-gradient);
    box-shadow:0 10px 26px rgba(212,175,55,.28), 0 0 0 1px rgba(212,175,55,.15) inset;
  }
  .btn-gold:hover{transform:translateY(-2px) scale(1.025); box-shadow:0 16px 40px rgba(212,175,55,.42), 0 0 0 1px rgba(212,175,55,.25) inset}
  .btn-ghost{
    color:var(--lp-ink); background:var(--lp-glass-bg); border:1px solid var(--lp-border);
    backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  }
  .btn-ghost:hover{background:var(--lp-glass-bg-hover); border-color:var(--lp-glass-border-hover); transform:translateY(-2px)}
  .btn-sm{padding:9px 18px; font-size:13.5px; border-radius:11px}

  .lang{
    cursor:pointer; border:1px solid var(--lp-border); background:var(--lp-glass-bg); color:var(--lp-ink);
    width:42px; height:38px; border-radius:11px; font-weight:800; font-family:inherit; font-size:13px;
    transition:background .25s ease, border-color .25s ease, transform .2s ease;
  }
  .lang:hover{background:var(--lp-glass-bg-hover); border-color:var(--lp-glass-border-hover); transform:translateY(-1px)}

  .burger{display:none; width:42px; height:42px; border-radius:11px; border:1px solid var(--lp-border);
    background:var(--lp-glass-bg); cursor:pointer; position:relative}
  .burger span{position:absolute; left:11px; right:11px; height:1.5px; background:var(--lp-ink); transition:transform .3s ease, opacity .3s ease}
  .burger span:nth-child(1){top:15px} .burger span:nth-child(2){top:20px} .burger span:nth-child(3){top:25px}
  .burger.open span:nth-child(1){transform:translateY(5px) rotate(45deg)}
  .burger.open span:nth-child(2){opacity:0}
  .burger.open span:nth-child(3){transform:translateY(-5px) rotate(-45deg)}

  .mobile-nav{
    display:none; position:fixed; inset:0 0 auto 0; top:0; z-index:40;
    padding:88px 6vw 26px; background:rgba(5,5,5,.94); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
    flex-direction:column; gap:18px; font-size:17px;
    transform:translateY(-12px); opacity:0; pointer-events:none;
    transition:transform .32s cubic-bezier(.2,.8,.2,1), opacity .32s ease;
  }
  .mobile-nav.open{transform:translateY(0); opacity:1; pointer-events:auto}
  .mobile-nav a{text-decoration:none; color:var(--lp-ink); font-weight:700}

  /* ---------- hero ---------- */
  .hero{max-width:1180px; margin:56px auto 0; padding:0 6vw 70px; position:relative}
  .hero-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center}
  /* min-width:0 overrides the grid item default (min-width:auto), which otherwise refuses to
     shrink below the text's intrinsic content width and overflows the viewport on narrow screens. */
  .hero-copy{text-align:start; min-width:0}
  /* A short gold rule as the headline's accent moment, instead of coloring a word inline —
     the i18n apply() below sets textContent on the whole element, which would silently wipe
     out any child <span> nested inside a data-i18n element on every language switch. */
  .kicker-line{width:60px; height:3px; margin:0 0 24px; border-radius:3px; background:var(--masar-gold-gradient); box-shadow:0 0 16px var(--lp-glow)}
  .hero-copy h1{font-size:clamp(30px,4.2vw,48px); line-height:1.22; margin:0 0 16px; font-weight:800; letter-spacing:-.01em; text-align:start}
  .hero-copy p{font-size:18px; color:var(--lp-ink-dim); max-width:min(480px,100%); margin:0 0 34px; line-height:1.65; text-align:start}
  .cta-row{display:flex; gap:16px; flex-wrap:wrap; justify-content:flex-start}

  /* Squircle-glass placeholder for hero imagery — approved fallback until real photography/
     creative assets are supplied; a line-art mobility silhouette, not a stock photo. */
  .hero-visual{
    position:relative; aspect-ratio:1/1; max-width:400px; margin-inline-start:auto; overflow:hidden;
    display:grid; place-items:center;
    background:var(--lp-glass-bg); border:1px solid var(--lp-border);
    backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
    clip-path:url(#squircle); -webkit-clip-path:url(#squircle);
    filter:drop-shadow(0 24px 60px rgba(0,0,0,.4));
  }
  .hero-visual .glow-ring{
    width:150px; height:150px; margin:0; border-radius:38px; position:relative; display:grid; place-items:center; z-index:1;
  }
  .hero-visual .glow-ring::before{
    content:""; position:absolute; inset:-16px; border-radius:50%;
    background:radial-gradient(circle,var(--lp-glow),transparent 70%); filter:blur(6px);
    animation:pulse 3.6s ease-in-out infinite;
  }
  @keyframes pulse{0%,100%{opacity:.5; transform:scale(1)}50%{opacity:.85; transform:scale(1.04)}}
  .hero-visual img.logo{
    width:116px; height:116px; object-fit:contain; border-radius:30px; position:relative;
    filter:drop-shadow(0 0 8px var(--lp-glow)) drop-shadow(0 14px 34px rgba(0,0,0,.55));
    animation:float 5s ease-in-out infinite;
  }
  @keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
  .hero-silhouette{position:absolute; inset:0; width:100%; height:100%; padding:16%; color:var(--masar-gold); opacity:.14; z-index:0}

  @media(max-width:820px){
    .hero-grid{grid-template-columns:1fr; gap:34px}
    .hero-copy{text-align:center}
    .hero-copy .eyebrow, .kicker-line{margin-inline:auto}
    .hero-copy h1, .hero-copy p{text-align:center; margin-inline:auto}
    .cta-row{justify-content:center}
    .hero-visual{margin-inline:auto; max-width:280px; order:-1}
  }

  /* Dark-profile headline sheen: ivory→gold gradient clipped to the text. Applied to the whole
     element (no inner <span>) because apply() rewrites textContent on every language switch. */
  html[data-theme="dark"] .hero-copy h1{
    background:linear-gradient(105deg,var(--lp-ink) 0%,var(--lp-ink) 42%,var(--masar-gold-soft) 68%,var(--masar-gold) 100%);
    -webkit-background-clip:text; background-clip:text;
    /* text-fill-color (not color:transparent) so if the gradient can't resolve the text still paints
       in --lp-ink instead of vanishing. */
    -webkit-text-fill-color:transparent;
  }
  @supports not ((-webkit-background-clip:text) or (background-clip:text)){
    html[data-theme="dark"] .hero-copy h1{-webkit-text-fill-color:var(--lp-ink)}
  }
  html[data-theme="dark"] .hero::before{
    content:""; position:absolute; inset:-10% 20% 40% 20%; z-index:-1; pointer-events:none;
    background:radial-gradient(closest-side,rgba(212,175,55,.10),transparent 75%); filter:blur(30px);
  }

  /* ---------- reveal-on-scroll ---------- */
  /* PROGRESSIVE ENHANCEMENT — content is VISIBLE by default and the animation is opt-in.
     Previously .reveal started at opacity:0 and depended on JavaScript to reveal it, so any
     single failure (script error, blocked/stale asset, wrong host serving no CSS) rendered the
     entire page blank. The reveal is now armed by script immediately before the observer starts
     watching each element, so if that code never runs the content simply shows, unanimated. */
  .reveal{opacity:1; transform:none}
  .reveal.armed{opacity:0; transform:translateY(26px); transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1)}
  .reveal.armed.in{opacity:1; transform:translateY(0)}
  /* A reader who asked for less motion gets the content immediately, never a fade-in wait. */
  @media (prefers-reduced-motion: reduce){ .reveal.armed{opacity:1; transform:none} }

  /* ---------- feature cards ---------- */
  .feats{max-width:1080px; margin:0 auto 90px; padding:0 6vw; display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
  .feat{
    background:var(--lp-glass-bg); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
    border:1px solid var(--lp-border); border-radius:var(--lp-radius); padding:30px;
    filter:drop-shadow(0 20px 50px rgba(0,0,0,.35));
    transition:transform .32s cubic-bezier(.2,.8,.2,1), border-color .32s ease, filter .32s ease, background .32s ease;
  }
  .feat:hover{
    transform:translateY(-6px); background:var(--lp-glass-bg-hover); border-color:var(--lp-glass-border-hover);
    box-shadow:0 26px 60px rgba(0,0,0,.5), 0 0 40px rgba(212,175,55,.12);
  }
  .feat .ic{
    width:50px; height:50px; border-radius:15px; display:grid; place-items:center; font-size:23px; margin-bottom:18px;
    background:radial-gradient(circle at 30% 30%,#211f1c,#161513); border:1px solid var(--lp-border); color:var(--masar-gold);
  }
  .feat h3{font-size:20px; margin-bottom:10px; font-weight:800; letter-spacing:-.01em}
  .feat p{font-size:14px; color:var(--lp-ink-dim); line-height:1.75}

  /* ---------- section heading (shared by "how it works" + "coverage") ---------- */
  .section-head{max-width:640px; margin:0 auto 46px; padding:0 6vw; text-align:center}
  .eyebrow{
    display:inline-block; font-size:12.5px; font-weight:800; letter-spacing:.06em;
    color:var(--masar-gold); background:rgba(212,175,55,.08); border:1px solid rgba(212,175,55,.22);
    border-radius:20px; padding:6px 16px; margin-bottom:16px;
  }
  .section-head h2{font-size:clamp(24px,3.6vw,34px); font-weight:800; letter-spacing:-.01em; margin-bottom:10px}
  .section-head p{color:var(--lp-ink-dim); font-size:15.5px; line-height:1.7}

  /* ---------- how it works ---------- */
  .steps{max-width:1080px; margin:0 auto 100px; padding:0 6vw; display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
  .step{
    background:var(--lp-glass-bg); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
    border:1px solid var(--lp-border); border-radius:var(--lp-radius); padding:30px; position:relative;
    transition:transform .32s cubic-bezier(.2,.8,.2,1), border-color .32s ease, background .32s ease;
  }
  .step:hover{transform:translateY(-6px); background:var(--lp-glass-bg-hover); border-color:var(--lp-glass-border-hover)}
  .step .num{
    font-size:13px; font-weight:800; color:var(--masar-gold); letter-spacing:.05em;
    border:1px solid rgba(212,175,55,.28); border-radius:10px; width:34px; height:34px;
    display:grid; place-items:center; margin-bottom:18px;
  }
  .step h3{font-size:18px; margin-bottom:9px; font-weight:800}
  .step p{font-size:14px; color:var(--lp-ink-dim); line-height:1.75}

  /* ---------- coverage / expansion roadmap ---------- */
  .coverage{
    max-width:980px; margin:0 auto 100px; padding:44px 6vw; text-align:center;
    background:var(--lp-glass-bg); border:1px solid var(--lp-border); border-radius:28px;
    backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
    filter:drop-shadow(0 24px 60px rgba(0,0,0,.4));
  }
  .coverage h2{font-size:clamp(22px,3.4vw,30px); font-weight:800; margin-bottom:12px}
  .coverage > p{color:var(--lp-ink-dim); font-size:15px; max-width:560px; margin:0 auto 40px; line-height:1.75}
  .roadmap{display:flex; align-items:center; justify-content:center; gap:0; flex-wrap:wrap; max-width:760px; margin:0 auto}
  .roadmap .node{display:flex; flex-direction:column; align-items:center; gap:10px; min-width:110px}
  .roadmap .dot{width:20px; height:20px; border-radius:50%; border:2px solid var(--lp-border); flex:none}
  /* Live market marker: deep emerald core + gold ring — the brand's own emerald/gold lockup. */
  .roadmap .node.live .dot{
    background:var(--masar-emerald); border:2px solid var(--masar-gold);
    box-shadow:0 0 0 4px rgba(212,175,55,.14), 0 0 12px var(--lp-glow);
  }
  html[data-theme="light"] .roadmap .node.live .dot{box-shadow:0 0 0 4px rgba(212,175,55,.10)}
  .roadmap .label{font-size:13.5px; font-weight:700; color:var(--lp-ink)}
  .roadmap .badge{
    font-size:10.5px; font-weight:800; letter-spacing:.04em; padding:3px 10px; border-radius:12px;
  }
  .roadmap .node.live .badge{color:#100c02; background:var(--masar-gold-gradient)}
  .roadmap .node.next .badge{color:var(--lp-ink-faint); background:rgba(255,255,255,.06); border:1px solid var(--lp-border)}
  .roadmap .connector{flex:1; min-width:36px; height:1px; background:linear-gradient(90deg,rgba(212,175,55,.4),rgba(255,255,255,.08)); margin:0 6px 30px}

  /* ---------- closing CTA band ---------- */
  .cta-band{
    max-width:980px; margin:0 auto 80px; padding:6vw; text-align:center; position:relative;
    background:var(--lp-glass-bg); border:1px solid var(--lp-border); border-radius:28px;
    backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
    filter:drop-shadow(0 24px 60px rgba(0,0,0,.4));
  }
  .cta-band h2{font-size:clamp(22px,3.4vw,30px); margin-bottom:12px; font-weight:800}
  .cta-band p{color:var(--lp-ink-dim); margin-bottom:26px; font-size:15.5px}

  .contact{max-width:760px; margin:0 auto; padding:0 6vw 8px; text-align:center}
  .contact .location{color:var(--lp-ink-dim); font-size:14.5px; margin-bottom:28px}

  .dept-grid{
    display:grid; grid-template-columns:repeat(auto-fit,minmax(112px,1fr)); gap:10px;
    margin-bottom:26px;
  }
  .dept-card{
    display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center;
    background:var(--lp-glass-bg); border:1px solid var(--lp-border); border-radius:var(--lp-radius);
    padding:16px 8px; cursor:pointer; font:inherit; color:var(--lp-ink-dim);
    transition:background .25s ease, border-color .25s ease, color .25s ease, transform .25s ease;
  }
  .dept-card svg{width:22px; height:22px; color:var(--masar-gold)}
  .dept-card span{font-size:12px; font-weight:700; line-height:1.3}
  .dept-card:hover{background:var(--lp-glass-bg-hover); transform:translateY(-2px)}
  .dept-card[aria-current="true"]{background:rgba(212,175,55,.10); border-color:rgba(212,175,55,.55); color:var(--lp-ink)}

  /* ---------- contact desk (department -> service -> structured request) ---------- */
  .desk{max-width:640px; margin:0 auto 26px; text-align:start; padding:30px;
    background:var(--lp-glass-bg); border:1px solid var(--lp-border); border-radius:26px;
    backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
    filter:drop-shadow(0 24px 60px rgba(0,0,0,.30))}
  .desk-step{display:flex; align-items:center; gap:10px; font-size:13px; font-weight:800; color:var(--lp-ink); margin:22px 0 12px}
  .desk-step:first-child{margin-top:0}
  .desk-num{width:24px; height:24px; border-radius:8px; display:grid; place-items:center; flex:none;
    font-size:12px; color:var(--masar-gold); border:1px solid rgba(212,175,55,.35); background:rgba(212,175,55,.08)}
  .desk-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px}
  .svc-select{flex:1; border:none; outline:none; background:transparent; color:var(--lp-ink);
    font-family:inherit; font-size:15px; min-width:0; cursor:pointer; appearance:none}
  .svc-select option{background:var(--lp-bg-1); color:var(--lp-ink)}
  .cell textarea{flex:1; border:none; outline:none; background:transparent; color:var(--lp-ink);
    font-family:inherit; font-size:15px; min-width:0; resize:vertical; line-height:1.7}
  .cell textarea::placeholder{color:var(--lp-ink-faint)}
  .fld-err{display:none; color:#e2786d; font-size:12.5px; margin-top:7px}
  .fld-err.show{display:block}
  .desk-route{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:22px 0 16px; padding:13px 16px;
    border-radius:16px; border:1px dashed var(--lp-border); font-size:13px; color:var(--lp-ink-dim)}
  .desk-route b{color:var(--lp-ink); font-family:var(--masar-font-latin),system-ui,sans-serif; font-weight:700}
  .copy-chip{margin-inline-start:auto; cursor:pointer; font-family:inherit; font-size:12px; font-weight:700;
    color:var(--masar-gold); background:rgba(212,175,55,.09); border:1px solid rgba(212,175,55,.28);
    border-radius:10px; padding:6px 12px; transition:background .25s ease}
  .copy-chip:hover{background:rgba(212,175,55,.16)}
  .copy-chip.done{color:var(--lp-ink); border-color:var(--lp-border)}
  .desk-note,.desk-hours{font-size:12.5px; color:var(--lp-ink-faint); line-height:1.75}
  .desk-note{margin-top:16px} .desk-hours{margin-top:8px}
  .contact .location{margin-top:6px}
  @media(max-width:640px){ .desk{padding:24px} .desk-grid{grid-template-columns:1fr} }

  .contact-sub{color:var(--lp-ink-dim); font-size:14.5px; line-height:1.7; max-width:520px; margin:0 auto 22px}
  .dept-actions{display:flex; gap:10px; justify-content:center; flex-wrap:wrap}
  .dept-address{
    margin-top:14px; font-size:13px; color:var(--lp-ink-faint); letter-spacing:.01em;
    font-family:var(--masar-font-latin),system-ui,sans-serif;
  }
  .dept-address b{color:var(--lp-ink-dim); font-weight:700}
  .dept-address.copied{color:var(--masar-gold)}

  /* motion.spring.sheet (damping 1.0 / responseSec 0.30) approximated as a CSS opacity
     crossfade at the same duration — a true spring needs a JS animation loop, out of scope
     for a static-only page; this is an honest approximation, not the real physics model. */
  .dept-action{transition:opacity .3s ease}
  .dept-action.switching{opacity:0}

  footer{
    text-align:center; padding:30px 6vw; color:var(--lp-ink-faint); font-size:13px;
    border-top:1px solid var(--lp-border);
  }

  /* Containment: long Arabic strings (notes, roadmap labels, dept names) must wrap inside their
     card instead of spilling past the rounded/clipped edge. */
  p,h1,h2,h3,span,label,a,button{overflow-wrap:anywhere}
  .book-card,.sched,.pillar,.feat,.step,.coverage,.cta-band,.getapp,.dept-card{min-width:0}
  .roadmap .node{min-width:0; max-width:150px; text-align:center}
  .roadmap .label{overflow-wrap:anywhere; line-height:1.45}
  .book-note{max-width:100%}

  /* ---------- booking / scheduling block (static, no pricing engine) ---------- */
  .book{max-width:1180px; margin:0 auto 96px; padding:0 6vw}
  .book-card{
    background:var(--lp-glass-bg); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
    border:1px solid var(--lp-border); border-radius:26px; padding:34px;
    filter:drop-shadow(0 24px 60px rgba(0,0,0,.32));
  }
  .book-card h2{font-size:clamp(21px,3vw,28px); font-weight:800; margin-bottom:8px}
  .book-card .sub{color:var(--lp-ink-dim); font-size:15px; margin-bottom:26px; line-height:1.7}
  .field{margin-bottom:16px}
  .field label{display:block; font-size:12.5px; font-weight:700; color:var(--lp-ink-dim); margin-bottom:8px}
  .cell{
    display:flex; align-items:center; gap:12px; padding:14px 16px; border-radius:16px;
    background:var(--lp-glass-bg); border:1px solid var(--lp-border);
    transition:border-color .25s ease, box-shadow .25s ease, background .25s ease;
  }
  .cell:focus-within{border-color:var(--masar-gold); box-shadow:0 0 0 4px rgba(212,175,55,.14)}
  .cell .pin{width:9px; height:9px; border-radius:50%; background:var(--masar-gold); flex:none}
  .cell .pin.dest{background:transparent; border:2px solid var(--lp-ink-dim)}
  .cell input{
    flex:1; border:none; outline:none; background:transparent; color:var(--lp-ink);
    font-family:inherit; font-size:15px; min-width:0;
  }
  .cell input::placeholder{color:var(--lp-ink-faint)}
  .cell.invalid{border-color:rgba(220,90,80,.7)}
  .book-error{color:#e2786d; font-size:13px; margin:-6px 0 14px; display:none}
  .book-error.show{display:block}
  .book-note{color:var(--lp-ink-faint); font-size:12.5px; line-height:1.7; margin-top:16px}
  .book-grid{display:grid; grid-template-columns:1.15fr .85fr; gap:26px; align-items:stretch}
  .sched{
    background:var(--lp-glass-bg); border:1px solid var(--lp-border); border-radius:26px; padding:30px;
    display:flex; flex-direction:column; justify-content:center; gap:12px;
  }
  .sched .tag{
    align-self:flex-start; font-size:11.5px; font-weight:800; letter-spacing:.04em; color:var(--masar-gold);
    background:rgba(212,175,55,.10); border:1px solid rgba(212,175,55,.28); border-radius:20px; padding:5px 13px;
  }
  .sched h3{font-size:19px; font-weight:800}
  .sched p{color:var(--lp-ink-dim); font-size:14px; line-height:1.75}
  .sched .clock{width:44px; height:44px; border-radius:14px; display:grid; place-items:center;
    border:1px solid var(--lp-border); color:var(--masar-gold); margin-bottom:4px}

  /* ---------- split section (business / captains) ---------- */
  .split{max-width:1080px; margin:0 auto 100px; padding:0 6vw}
  .split .pillars{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:34px}
  .pillar{
    background:var(--lp-glass-bg); border:1px solid var(--lp-border); border-radius:var(--lp-radius); padding:26px;
    transition:transform .32s cubic-bezier(.2,.8,.2,1), border-color .32s ease, background .32s ease;
  }
  .pillar:hover{transform:translateY(-5px); background:var(--lp-glass-bg-hover); border-color:var(--lp-glass-border-hover)}
  .pillar .ic{width:44px; height:44px; border-radius:14px; display:grid; place-items:center; color:var(--masar-gold);
    border:1px solid var(--lp-border); margin-bottom:16px}
  .pillar h3{font-size:17px; font-weight:800; margin-bottom:8px}
  .pillar p{font-size:13.5px; color:var(--lp-ink-dim); line-height:1.75}
  .split .cta-row{margin-top:30px}

  /* ---------- get-the-app band ---------- */
  .getapp{max-width:980px; margin:0 auto 90px; padding:44px 6vw; text-align:center;
    background:var(--lp-glass-bg); border:1px solid var(--lp-border); border-radius:28px;
    backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
}
  .getapp h2{font-size:clamp(22px,3.4vw,30px); font-weight:800; margin-bottom:12px}
  .getapp p{color:var(--lp-ink-dim); font-size:15px; max-width:600px; margin:0 auto 20px; line-height:1.75}
  .store-soon{display:inline-flex; align-items:center; gap:9px; font-size:13px; font-weight:700;
    color:var(--lp-ink-dim); border:1px dashed var(--lp-border); border-radius:14px; padding:11px 20px; margin-bottom:22px}

  @media(max-width:820px){
    .book-grid{grid-template-columns:1fr}
    .split .pillars{grid-template-columns:1fr}
  }
  @media(max-width:820px){
    nav.desktop-nav{display:none}
    .burger{display:block}
    .mobile-nav{display:flex}
    .feats{grid-template-columns:1fr}
    .steps{grid-template-columns:1fr}
    .roadmap{flex-direction:column; gap:24px}
    .roadmap .connector{width:1px; height:28px; min-width:0; margin:0}
  }

/* ---------- inner pages: hero, lists, legal prose ---------- */
.page-hero{max-width:900px; margin:56px auto 60px; padding:0 6vw; text-align:start}
.page-hero h1{font-size:clamp(28px,4vw,44px); line-height:1.25; font-weight:800; letter-spacing:-.01em; margin:0 0 14px}
.page-hero p{font-size:17px; color:var(--lp-ink-dim); line-height:1.7; max-width:620px; margin:0 0 26px}
html[data-theme="dark"] .page-hero h1{
  background:linear-gradient(105deg,var(--lp-ink) 0%,var(--lp-ink) 45%,var(--masar-gold-soft) 72%,var(--masar-gold) 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  html[data-theme="dark"] .page-hero h1{-webkit-text-fill-color:var(--lp-ink)}
}
.req-list{max-width:700px; margin:26px auto 0; padding:0; list-style:none; display:grid; gap:12px}
.req-list li{
  position:relative; padding:15px 46px 15px 18px; border-radius:16px; font-size:14.5px; color:var(--lp-ink);
  background:var(--lp-glass-bg); border:1px solid var(--lp-border);
}
html[dir="ltr"] .req-list li{padding:15px 18px 15px 46px}
.req-list li::before{
  content:"✓"; position:absolute; inset-inline-start:16px; top:50%; transform:translateY(-50%);
  width:22px; height:22px; border-radius:50%; display:grid; place-items:center; font-size:12px;
  color:var(--masar-gold); border:1px solid rgba(212,175,55,.35); background:rgba(212,175,55,.08);
}
.legal{max-width:820px; margin:0 auto 90px; padding:0 6vw; text-align:start}
.legal .updated{font-size:13px; color:var(--lp-ink-faint); margin-bottom:8px}
.legal .review-note{
  font-size:13px; color:var(--lp-ink-dim); line-height:1.7; padding:14px 18px; border-radius:16px;
  border:1px dashed var(--lp-border); margin-bottom:34px;
}
.legal h2{font-size:19px; font-weight:800; margin:32px 0 10px; color:var(--lp-ink)}
.legal p,.legal li{font-size:14.5px; color:var(--lp-ink-dim); line-height:1.9}
.legal ul{padding-inline-start:22px; margin:8px 0}
.legal li{margin-bottom:6px}
.foot-links{display:flex; gap:20px; justify-content:center; flex-wrap:wrap; margin-bottom:14px; font-size:13.5px}
.foot-links a{color:var(--lp-ink-dim); text-decoration:none; transition:color .25s ease}
.foot-links a:hover{color:var(--masar-gold)}
.foot-note{font-size:12px; color:var(--lp-ink-faint); margin-top:6px}
.legal-contact{display:flex; gap:10px; flex-wrap:wrap; margin-top:14px}
.legal-contact .btn{font-family:var(--masar-font-latin),var(--masar-font-arabic),system-ui,sans-serif}

/* ---------- FAQ (help centre) ---------- */
.faq-wrap{max-width:820px; margin:0 auto 90px; padding:0 6vw; display:grid; gap:12px}
.faq{background:var(--lp-glass-bg); border:1px solid var(--lp-border); border-radius:18px; padding:0 20px;
 transition:border-color .3s ease, background .3s ease}
.faq[open]{border-color:var(--lp-glass-border-hover); background:var(--lp-glass-bg-hover)}
.faq summary{cursor:pointer; list-style:none; padding:18px 0; font-size:15.5px; font-weight:700; color:var(--lp-ink);
  display:flex; align-items:center; justify-content:space-between; gap:14px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; color:var(--masar-gold); font-size:20px; font-weight:400; flex:none; transition:transform .3s ease}
.faq[open] summary::after{transform:rotate(45deg)}
.faq p{padding:0 0 18px; font-size:14.5px; color:var(--lp-ink-dim); line-height:1.85; margin:0}
.faq-more{align-self:center; color:var(--lp-ink-dim); font-size:14.5px}
/* ---------- structured footer ---------- */
.foot-cols{display:grid; grid-template-columns:repeat(3,1fr); gap:28px; max-width:900px; margin:0 auto 30px;
  text-align:start; padding:0 6vw}
.foot-col h2{font-size:13px; font-weight:800; color:var(--lp-ink); margin-bottom:12px; letter-spacing:.02em}
.foot-col a{display:block; color:var(--lp-ink-dim); text-decoration:none; font-size:13.5px; padding:5px 0; transition:color .25s ease}
.foot-col a:hover{color:var(--masar-gold)}
.skip-link{position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0}
.skip-link:focus{position:fixed; inset-block-start:12px; inset-inline-start:12px; width:auto; height:auto;
  margin:0; overflow:visible; clip:auto; clip-path:none; z-index:200; background:var(--masar-gold);
  color:#100c02; padding:12px 20px; border-radius:12px; font-weight:800; text-decoration:none;
  box-shadow:0 10px 30px rgba(0,0,0,.35)}
@media(max-width:640px){ .foot-cols{grid-template-columns:1fr; gap:20px; text-align:center} }

/* ---------- city coverage (hub + per-city pages) ---------- */
.cities-wrap{max-width:1040px; margin:0 auto 90px; padding:0 6vw}
.city-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:18px; margin-bottom:26px}
.city-card{display:flex; flex-direction:column; gap:10px; text-decoration:none; padding:26px 24px;
  background:var(--lp-glass-bg); border:1px solid var(--lp-border); border-radius:22px;
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  transition:background .3s ease, border-color .3s ease, transform .3s ease}
.city-card:hover{background:var(--lp-glass-bg-hover); border-color:var(--lp-glass-border-hover); transform:translateY(-3px)}
.city-flag{align-self:flex-start; font-size:11.5px; font-weight:800; letter-spacing:.02em; color:var(--masar-gold);
  background:rgba(212,175,55,.10); border:1px solid rgba(212,175,55,.30); border-radius:999px; padding:5px 12px}
.city-card h3{font-size:21px; font-weight:800; color:var(--lp-ink); margin:0}
.city-card p{font-size:14px; color:var(--lp-ink-dim); line-height:1.75; margin:0; flex:1}
.city-go{font-size:13px; font-weight:700; color:var(--masar-gold)}
.city-next{text-align:center; padding:34px 26px; border-radius:22px;
  border:1px dashed var(--lp-border); background:var(--lp-glass-bg)}
.city-next h3{font-size:20px; font-weight:800; color:var(--lp-ink); margin-bottom:10px}
.city-next p{font-size:14.5px; color:var(--lp-ink-dim); line-height:1.75; max-width:560px; margin:0 auto 20px}
.city-back{max-width:1040px; margin:0 auto 90px; padding:0 6vw; text-align:center}
@media(max-width:640px){ .city-grid{grid-template-columns:1fr} }

/* ---------- services / ride tiers ---------- */
.tiers-wrap{max-width:1100px; margin:0 auto 26px; padding:0 6vw}
.tier-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(258px,1fr)); gap:18px}
.tier{display:flex; flex-direction:column; gap:11px; padding:26px 24px; border-radius:22px;
  background:var(--lp-glass-bg); border:1px solid var(--lp-border);
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px)}
.tier-tag{align-self:flex-start; font-size:11.5px; font-weight:800; color:var(--masar-gold);
  background:rgba(212,175,55,.10); border:1px solid rgba(212,175,55,.30); border-radius:999px; padding:5px 12px}
.tier h3{font-size:21px; font-weight:800; color:var(--lp-ink); margin:0; letter-spacing:-.01em}
.tier p{font-size:14px; color:var(--lp-ink-dim); line-height:1.75; margin:0; flex:1}
.tier-cap{display:flex; align-items:center; justify-content:space-between; gap:10px; padding-top:13px;
  border-top:1px solid var(--lp-border); font-size:13px; color:var(--lp-ink-faint)}
.tier-cap b{color:var(--lp-ink); font-weight:700}
.tier-note{max-width:1100px; margin:20px auto 80px; padding:0 6vw; text-align:center;
  font-size:13px; color:var(--lp-ink-faint); line-height:1.8}
.xfeats-wrap{max-width:1100px; margin:0 auto 90px; padding:0 6vw}
.xfeats-title{text-align:center; font-size:clamp(20px,3vw,27px); font-weight:800; color:var(--lp-ink);
  margin-bottom:26px; letter-spacing:-.015em}
.xfeat-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(215px,1fr)); gap:16px}
.xfeat{padding:22px 20px; border-radius:18px; background:var(--lp-glass-bg); border:1px solid var(--lp-border)}
.xfeat h3{font-size:15.5px; font-weight:800; color:var(--lp-ink); margin-bottom:8px}
.xfeat p{font-size:13.5px; color:var(--lp-ink-dim); line-height:1.75; margin:0}
@media(max-width:640px){ .tier-grid{grid-template-columns:1fr} }

/* ======================================================================
   MOTION LAYER — Apple fluid-interface principles, approved by the owner.
   Reference: WWDC "Designing Fluid Interfaces" + "The Details of UI Typography".
   ====================================================================== */

/* 1. RESPONSE — feedback lives on pointer-DOWN, not on release. Waiting for
      click to show state is the single thing that makes a UI feel dead. */
.btn, .dept-card, .city-card, .tier, .copy-chip, .lang, .faq summary{
  -webkit-tap-highlight-color:transparent; touch-action:manipulation;
}
.btn:active, .copy-chip:active, .lang:active{ transform:scale(.97); transition:transform 100ms ease-out }
.dept-card:active, .city-card:active, .faq summary:active{ transform:scale(.985); transition:transform 100ms ease-out }

/* 2. TYPOGRAPHY — tracking is size-specific. Large display text reads too loose
      as it grows, so it tightens; body copy stays near zero. A single global
      letter-spacing is wrong at one end of the scale or the other. */
h1{ letter-spacing:-.022em; line-height:1.08 }
h2{ letter-spacing:-.016em; line-height:1.15 }
h3{ letter-spacing:-.01em }
p, li{ letter-spacing:0 }
.eyebrow, .tier-tag, .city-flag{ letter-spacing:.02em }   /* small text opens up slightly */
:root:lang(ar) h1, :root:lang(ar) h2{ letter-spacing:0 }  /* Arabic script must NOT be tracked */

/* 3. MATERIALS — a bigger surface reads as thicker glass than a small chip,
      and the sticky header is a translucent layer content scrolls *under*. */
#site-header{ transition:backdrop-filter .35s ease, background .35s ease, box-shadow .35s ease }

/* 4. SPATIAL CONSISTENCY — the mobile sheet enters and leaves along the same
      path, anchored to the burger that summoned it. */
.mobile-nav{ transform-origin:top center }

/* 5. REDUCED MOTION — not "no feedback", a gentler non-vestibular equivalent:
      keep opacity cues, drop travel and overshoot. */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.15s !important; scroll-behavior:auto !important;
  }
  .reveal{ transform:none !important }
  .btn:active, .dept-card:active, .city-card:active, .tier:active{ transform:none }
}

/* 6. REDUCED TRANSPARENCY — frost the glass into a solid instead of blurring. */
@media (prefers-reduced-transparency: reduce){
  .desk,.tier,.xfeat,.city-card,.city-next,.dept-card,.faq,.cta-band,#site-header,.mobile-nav{
    backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
    background:var(--lp-bg-2) !important;
  }
}

/* 7. INCREASED CONTRAST — near-solid surfaces with a defined border. */
@media (prefers-contrast: more){
  .desk,.tier,.xfeat,.city-card,.dept-card,.faq{ border-color:var(--lp-ink-dim) !important }
  .tier p,.xfeat p,.city-card p,.desk-note,.desk-hours{ color:var(--lp-ink) !important }
}

/* 8. Focus is a first-class state, not an afterthought. */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible{
  outline:2px solid var(--masar-gold); outline-offset:3px; border-radius:8px;
}

/* ---------- airports + how-it-works flow ---------- */
.airport{display:flex; flex-direction:column; gap:10px; padding:26px 24px; border-radius:22px;
  background:var(--lp-glass-bg); border:1px solid var(--lp-border);
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px)}
.airport h3{font-size:19px; font-weight:800; color:var(--lp-ink); margin:0; letter-spacing:-.01em; line-height:1.35}
.airport p{font-size:13px; color:var(--lp-ink-faint); line-height:1.7; margin:0}
.flow-wrap{max-width:820px; margin:0 auto 80px; padding:0 6vw}
.flow{display:grid; gap:14px}
.flowstep{display:flex; align-items:flex-start; gap:16px; padding:22px 22px; border-radius:20px;
  background:var(--lp-glass-bg); border:1px solid var(--lp-border)}
.flownum{flex:none; width:32px; height:32px; border-radius:11px; display:grid; place-items:center;
  font-family:var(--masar-font-latin),system-ui,sans-serif; font-size:14px; font-weight:700;
  color:var(--masar-gold); background:rgba(212,175,55,.09); border:1px solid rgba(212,175,55,.32)}
.flowstep h3{font-size:16px; font-weight:800; color:var(--lp-ink); margin-bottom:7px; letter-spacing:-.008em}
.flowstep p{font-size:14px; color:var(--lp-ink-dim); line-height:1.8; margin:0}

/* ---------- homepage explore hub (routes visitors to the deeper pages) ---------- */
.explore-wrap{max-width:1100px; margin:0 auto 90px; padding:0 6vw; text-align:center}
.explore-wrap .eyebrow{display:inline-block; margin-bottom:14px}
.explore-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(232px,1fr)); gap:16px; margin-top:22px}
.explore-card{display:flex; flex-direction:column; gap:9px; text-align:start; text-decoration:none;
  padding:24px 22px; border-radius:20px; background:var(--lp-glass-bg); border:1px solid var(--lp-border);
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  transition:background .3s ease, border-color .3s ease, transform .3s ease}
.explore-card:hover{background:var(--lp-glass-bg-hover); border-color:var(--lp-glass-border-hover); transform:translateY(-3px)}
.explore-card h3{font-size:17.5px; font-weight:800; color:var(--lp-ink); margin:0; letter-spacing:-.008em}
.explore-card p{font-size:13.5px; color:var(--lp-ink-dim); line-height:1.7; margin:0; flex:1}
@media(max-width:640px){ .explore-grid{grid-template-columns:1fr} }

/* ---------- coverage map (generated from real WGS84 coordinates) ----------
   The silhouette and the pin positions come from packages/contracts/geo/saudi-coverage.json
   via tooling/codegen/gen-coverage-map.mjs. Nothing here is positioned by eye. */
.ksa-title{text-align:center; font-size:clamp(17px,2.4vw,21px); font-weight:800; color:var(--lp-ink);
  margin:6px 0 18px; letter-spacing:-.01em}
.ksa-wrap{display:grid; grid-template-columns:1.6fr .9fr; gap:26px; align-items:center;
  max-width:820px; margin:0 auto 18px}
.ksa-map{width:100%; height:auto; display:block; overflow:visible}

/* The landmass reads as a single quiet surface; the gold is rationed to the live markers,
   so the eye lands on where we actually operate rather than on the outline. */
.ksa-land{
  fill:color-mix(in srgb, var(--masar-emerald) 26%, transparent);
  stroke:color-mix(in srgb, var(--masar-gold) 42%, transparent);
  stroke-width:1.4; stroke-linejoin:round; vector-effect:non-scaling-stroke;
}
html[data-theme="light"] .ksa-land{
  fill:color-mix(in srgb, var(--masar-emerald) 12%, transparent);
  stroke:color-mix(in srgb, var(--masar-emerald) 34%, transparent);
}
@supports not (color: color-mix(in srgb, red 50%, blue)){
  .ksa-land{fill:rgba(11,60,38,.26); stroke:rgba(212,175,55,.42)}
  html[data-theme="light"] .ksa-land{fill:rgba(11,60,38,.12); stroke:rgba(11,60,38,.34)}
}

.ksa-dot{fill:var(--masar-gold); filter:drop-shadow(0 0 6px rgba(212,175,55,.55))}
.ksa-halo{fill:rgba(212,175,55,.16); transform-box:fill-box; transform-origin:center;
  animation:ksa-pulse 3.2s ease-in-out infinite}
.ksa-pin:nth-of-type(2) .ksa-halo{animation-delay:.5s}
.ksa-pin:nth-of-type(3) .ksa-halo{animation-delay:1s}
@keyframes ksa-pulse{
  0%,100%{opacity:.30; transform:scale(.72)}
  50%    {opacity:.85; transform:scale(1)}
}

.ksa-legend{list-style:none; display:grid; gap:12px; margin:0; padding:0; text-align:start}
.ksa-legend li{display:flex; align-items:center; gap:10px; font-size:14px; color:var(--lp-ink-dim)}
.ksa-legend b{color:var(--lp-ink); font-weight:800; font-size:15px}
.ksa-legend span[data-i18n]{font-size:11.5px; font-weight:800; color:var(--masar-gold);
  background:rgba(212,175,55,.10); border:1px solid rgba(212,175,55,.28);
  border-radius:999px; padding:3px 9px; margin-inline-start:auto}
.ksa-key{width:9px; height:9px; border-radius:50%; background:var(--masar-gold); flex:none;
  box-shadow:0 0 0 4px rgba(212,175,55,.14)}
.ksa-note{text-align:center; font-size:12.5px; color:var(--lp-ink-faint); line-height:1.75;
  max-width:520px; margin:0 auto}

@media(max-width:720px){
  .ksa-wrap{grid-template-columns:1fr; gap:18px}
  .ksa-legend{max-width:320px; margin-inline:auto}
}
/* A slow looping pulse is exactly the kind of motion vestibular sensitivity reacts to. */
@media (prefers-reduced-motion: reduce){
  .ksa-halo{animation:none; opacity:.5; transform:scale(.9)}
}

/* ---------- touch-target floor (Apple HIG 44pt / WCAG 2.5.5) ----------
   The language, theme, burger, small-button and copy controls render between 28px and 42px.
   That is comfortable with a mouse and genuinely hard with a thumb - the reason a phone user
   has to aim at the language toggle. The hit area is expanded with a centred pseudo-element
   so the CONTROL LOOKS EXACTLY THE SAME: no size, spacing or identity change, only a larger
   region that accepts the tap. Applied on coarse pointers only, so desktop layout is untouched. */
@media (pointer: coarse){
  .lang, .burger, .btn-sm, .copy-chip, .dept-card, [data-action]{ position:relative }
  .lang::after, .burger::after, .btn-sm::after, .copy-chip::after, [data-action]::after{
    content:""; position:absolute; inset:50% auto auto 50%;
    width:max(100%, 44px); height:max(100%, 44px);
    transform:translate(-50%, -50%);
  }
  /* The expanded region must not swallow taps meant for a neighbour. */
  nav.desktop-nav, .dept-actions, .desk-route{ gap:max(10px, 12px) }
}

/* ---------------------------------------------------------------------------------------
   Booking place picker. Positioned against the field so it works in RTL and LTR from one
   rule set — `inset-inline` does the mirroring, no flipped stylesheet. Colours resolve
   through the existing --lp-* profile vars, so the list follows the dark/beige theme with
   no theme-specific overrides.
   --------------------------------------------------------------------------------------- */
  .field{position:relative}
  .place-list{
    position:absolute; inset-inline:0; top:100%; z-index:40; margin:6px 0 0; padding:6px;
    list-style:none; max-height:19rem; overflow-y:auto;
    background:var(--lp-bg-1); border:1px solid var(--lp-border); border-radius:14px;
    box-shadow:0 18px 40px rgba(0,0,0,.28);
  }
  html[data-theme="light"] .place-list{box-shadow:0 18px 40px rgba(11,60,38,.10)}
  .place-item{
    display:flex; align-items:center; justify-content:space-between; gap:12px;
    padding:10px 12px; border-radius:10px; cursor:pointer;
    /* Above the 44px touch minimum: tapped one-handed, often in a moving car. */
    min-height:44px;
  }
  .place-item:hover,.place-item.active{background:var(--lp-glass-bg-hover)}
  .place-name{font-weight:600; color:var(--lp-ink)}
  .place-meta{font-size:.8rem; color:var(--lp-ink-faint); white-space:nowrap}
  .place-empty{padding:12px; color:var(--lp-ink-faint); font-size:.9rem; text-align:center}
  /* A chosen field reads as settled, using the same gold affirmation as :focus-within. */
  .cell.chosen{border-color:var(--masar-gold); box-shadow:0 0 0 3px rgba(212,175,55,.14)}
  @media (prefers-reduced-motion:no-preference){
    .place-list{animation:placeIn .16s cubic-bezier(.22,1,.36,1)}
    @keyframes placeIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
  }