/* ============================================================================
   dCover — the WEBSITE home page, visual v2, Variant A "the counter" (MSD approved 2026-10-01).
   Design: docs/design/visual-v2/prototype.html (home, A) + SPEC.md. Loaded by index.html only.

   THE APP NEVER SEES THIS FILE'S LOOK. Every rule below is scoped to html:not(.app-shell) (shell.js sets .app-shell in
   <head>, before the first paint, inside the iPhone app, the Home Screen web app and ?shell=app). The new website-only
   nodes carry .w-only — hidden in the app by a rule in app.css as well, so a failed load of this file can't show them
   there. The old app-only nodes carry .a-only — hidden here on the website. Shared nodes (#tripform and its sheets,
   .s-note, recent searches) keep their app styling and are restyled below for the website only.

   Spacing ladder: 8 · 16 · 24 · 32 · 40 · 48 · 56 · 64 · 80 · 96 · 128 (4 only inside a component).
   Corners by job: 4 fine detail · 8 controls · 16 cards and photos · 24 the search card · pill = status only.
   One lift per screen: the search card. Red = dCover + the one action (Search; Send on WhatsApp).
   Motion: transform/opacity only, all of it off under prefers-reduced-motion.
   ========================================================================== */

/* ------------------------------------------------------------ TOKENS (home only; brand tokens live in theme.css) */
:root{
  --hx-board:#121316;          /* the departures board — the one ink-black object */
  --hx-board-tile:#2a2d33;     /* a split-flap tile */
  --hx-board-2:#a3a8b0;        /* quiet text on the board (7.4:1 on the board) */
  --hx-board-line:#2c2f35;     /* lines on the board */
  --hx-board-hover:#1b1d22;
  --hx-photo:#2a2d33;          /* the ground behind a photo while it loads */
  --hx-ph-a:#3a3e46; --hx-ph-b:#121316;   /* the "photo to come" gradient (visa, insurance, the person) */
  --hx-ph-ic:rgba(255,255,255,.36);       /* its line icon */
  --hx-on-photo:#ffffff;       /* words on a photo always sit on a dark scrim, in both themes */
  --hx-well-on-photo:rgba(18,19,22,.40); --hx-well-edge-on-photo:rgba(255,255,255,.56);
  --hx-lift:0 1px 2px rgba(18,19,22,.06),0 8px 24px rgba(18,19,22,.12);   /* spent once: the search card */
  --hx-scrim-side:linear-gradient(90deg,rgba(18,19,22,.72) 0%,rgba(18,19,22,.44) 48%,rgba(18,19,22,.12) 100%);
  --hx-scrim-low:linear-gradient(180deg,rgba(18,19,22,0) 48%,rgba(18,19,22,.80) 100%);
  --hx-scrim-top:linear-gradient(180deg,rgba(18,19,22,.64) 0%,rgba(18,19,22,.32) 40%,rgba(18,19,22,.12) 100%);
  --hx-scrim-foot:linear-gradient(180deg,rgba(18,19,22,0) 24%,rgba(18,19,22,.84) 100%);
  --hx-pill-bg:#ffffff; --hx-pill-ink:#121316; --hx-pill-soon:#eef0f2;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --hx-board:#0b0c0e; --hx-board-tile:#24272d; --hx-board-2:#a3a8b0; --hx-board-line:#2c2f35; --hx-board-hover:#1b1d22;
    --hx-photo:#2a2d33; --hx-ph-a:#3a3e46; --hx-ph-b:#121316; --hx-ph-ic:rgba(255,255,255,.36); --hx-on-photo:#ffffff;
    --hx-well-on-photo:rgba(18,19,22,.40); --hx-well-edge-on-photo:rgba(255,255,255,.56);
    --hx-lift:0 0 0 1px #454951;
    --hx-pill-bg:#1b1d22; --hx-pill-ink:#ffffff; --hx-pill-soon:#2a2d33;
  }
}
:root[data-theme="dark"]{
  --hx-board:#0b0c0e; --hx-board-tile:#24272d; --hx-board-2:#a3a8b0; --hx-board-line:#2c2f35; --hx-board-hover:#1b1d22;
  --hx-photo:#2a2d33; --hx-ph-a:#3a3e46; --hx-ph-b:#121316; --hx-ph-ic:rgba(255,255,255,.36); --hx-on-photo:#ffffff;
  --hx-well-on-photo:rgba(18,19,22,.40); --hx-well-edge-on-photo:rgba(255,255,255,.56);
  --hx-lift:0 0 0 1px #454951;
  --hx-pill-bg:#1b1d22; --hx-pill-ink:#ffffff; --hx-pill-soon:#2a2d33;
}

/* ------------------------------------------------------------ which nodes belong to which (see the header note) */
html.app-shell .w-only{display:none!important}
html.app-shell .hx-counter{display:contents}
html:not(.app-shell) .a-only{display:none!important}
html:not(.app-shell) .hx-counter [hidden],html:not(.app-shell) #main .hx [hidden]{display:none!important}

/* ------------------------------------------------------------ BASE (website home) */
html:not(.app-shell) body.home{background:var(--bg)}
html:not(.app-shell) #main{overflow-x:clip}
html:not(.app-shell) #main .hx-w,
html:not(.app-shell) #main .hero7>.wrap7,
html:not(.app-shell) #main .wrap7.hx-w{width:100%;max-width:1312px;margin:0 auto;padding:0 32px}
html:not(.app-shell) .hx-ic{width:24px;height:24px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
html:not(.app-shell) .hx-ic.fill{fill:currentColor;stroke:none}
html:not(.app-shell) #main .hx-h2{margin:0;font-size:32px;line-height:48px;color:var(--ink)}
:root[data-lang="en"]:not(.app-shell) #main .hx-h2{font-size:28px;line-height:36px}
html:not(.app-shell) #main .hx-sec{padding-top:96px}
html:not(.app-shell) #main .hx-sec-h{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:32px}
html:not(.app-shell) #main .hx-sec-h p{margin:0;color:var(--ink-2);font-size:16px;line-height:28px}
:root[data-lang="en"]:not(.app-shell) #main .hx-sec-h p{line-height:24px}
html:not(.app-shell) #main .hx-link{display:inline-flex;align-items:center;gap:8px;min-height:48px;font-weight:600;color:var(--ink);text-decoration:underline;text-underline-offset:4px}
html:not(.app-shell) #main .hx-link .hx-ic{text-decoration:none}
html:not(.app-shell) #main :focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}

/* buttons on the website home: the shared .btn family, sized to the spec (48 min; 56 on a phone for the main action) */
html:not(.app-shell) #main .hx .btn,html:not(.app-shell) #main .hx-counter .hx-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 24px;
  border-radius:8px;font-size:16px;font-weight:700;text-decoration:none;white-space:nowrap;cursor:pointer}
html:not(.app-shell) #main .hx .btn.ink{background:var(--ink);border:1px solid var(--ink);color:var(--surface)}
html:not(.app-shell) #main .hx .btn.line,html:not(.app-shell) #main .hx-counter .hx-btn.line{background:var(--surface);border:1px solid var(--field-edge);color:var(--ink)}
html:not(.app-shell) #main .hx .btn[aria-disabled="true"],html:not(.app-shell) #main .hx-counter .hx-btn[aria-disabled="true"]{opacity:.56;cursor:default}
html:not(.app-shell) #main .hx .btn .hx-ic,html:not(.app-shell) #main .hx-counter .hx-btn .hx-ic{width:24px;height:24px}
html:not(.app-shell) #main .hx-spark{width:24px;height:24px;flex:none}

/* ------------------------------------------------------------ HEADER: Help and the language on a laptop */
.hx-hlink{display:none}
@media (min-width:1024px){
  html:not(.app-shell) body.home .appbar .hx-hlink{display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:0 16px;border:0;border-radius:8px;background:none;
    font:inherit;font-size:15px;font-weight:600;color:var(--ink);text-decoration:none;cursor:pointer;white-space:nowrap}
  html:not(.app-shell) body.home .appbar .hx-hlink:hover{background:var(--surface-2)}
  html:not(.app-shell) body.home .appbar .hx-hlink .hx-ic{width:20px;height:20px}
}

/* ============================================================ HERO · the counter */
html:not(.app-shell) #main .hero7{position:relative;padding:64px 0 48px;background:none;isolation:isolate}
html:not(.app-shell) #main .hero7>.wrap7{position:relative}
html:not(.app-shell) #main .hpanel{display:block;background:none;box-shadow:none;border-radius:0;min-height:0;max-height:none;overflow:visible}
html:not(.app-shell) #main .hp-l{padding:0;min-width:0;container:hxc / inline-size}

/* the photo: behind the whole hero (≥ 600), behind the top 304 px on a phone */
.hx-bg{position:absolute;inset:0;z-index:-1;overflow:hidden;background:var(--hx-photo)}
.hx-bg .hx-layer{position:absolute;inset:0;opacity:0;transition:opacity .36s ease}
.hx-bg .hx-layer.on{opacity:1}
.hx-bg picture,.hx-bg img{position:absolute;inset:0;width:100%;height:100%}
.hx-bg img{object-fit:cover;object-position:50% 50%;transform-origin:60% 45%;will-change:transform}
.hx-bg::after{content:"";position:absolute;inset:0;background:var(--hx-scrim-low),var(--hx-scrim-side);pointer-events:none}
.hx-bg .hx-phband{position:absolute;inset:0;display:flex;align-items:center;justify-content:flex-end;padding:0 96px;background:linear-gradient(120deg,var(--hx-ph-a),var(--hx-ph-b));color:var(--hx-ph-ic)}
.hx-bg .hx-phband .hx-ic{width:256px;height:256px;stroke-width:.75}
/* MSD's ask: the hero photo drifts — slow, small, transform only; paused off-screen and in a hidden tab (v2-home.js) */
@media (prefers-reduced-motion:no-preference){
  html:not(.app-shell) .hx-bg .hx-layer.on img{animation:hx-drift 26s ease-in-out infinite alternate}
  html:not(.app-shell) .hx-bg.hx-still .hx-layer img{animation-play-state:paused}
}
@keyframes hx-drift{from{transform:scale(1) translate3d(0,0,0)}to{transform:scale(1.08) translate3d(-1.5%,-1%,0)}}

/* the headline: white on the scrim, left-aligned */
html:not(.app-shell) #main .h7.v15-display{position:static;width:auto;height:auto;clip:auto;overflow:visible;white-space:normal;margin:0 0 40px;max-width:24em;
  font-size:48px;line-height:64px;color:var(--hx-on-photo);letter-spacing:0}
:root[data-lang="en"]:not(.app-shell) #main .h7.v15-display{font-size:44px;line-height:56px;letter-spacing:-.01em}

/* the counter — the one lifted thing on the page */
html:not(.app-shell) #main .hx-counter{position:relative;background:var(--surface);border-radius:24px;box-shadow:var(--hx-lift)}
html:not(.app-shell) #main .hx-tabs{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));border-bottom:1px solid var(--hair)}
html:not(.app-shell) #main .hx-tab{position:relative;display:flex;align-items:center;gap:16px;min-width:0;min-height:80px;padding:16px;border:0;background:none;
  font:inherit;color:var(--ink);text-align:start;cursor:pointer}
html:not(.app-shell) #main .hx-tab:first-child{border-top-left-radius:24px}
html:not(.app-shell) #main .hx-tab:last-child{border-top-right-radius:24px}
html:not(.app-shell) #main .hx-well{display:flex;align-items:center;justify-content:center;width:48px;height:48px;flex:none;border-radius:16px;background:var(--chip);color:var(--ink)}
html:not(.app-shell) #main .hx-tx{display:flex;flex-direction:column;min-width:0}
html:not(.app-shell) #main .hx-nm{font-size:16px;line-height:24px;font-weight:600;white-space:nowrap}
html:not(.app-shell) #main .hx-st{font-size:14px;line-height:20px;color:var(--ink-2);white-space:nowrap}
html:not(.app-shell) #main .hx-tab[aria-selected="true"] .hx-well{background:var(--ink);color:var(--surface)}
html:not(.app-shell) #main .hx-tab[aria-selected="true"] .hx-nm{font-weight:700}
html:not(.app-shell) #main .hx-tab[aria-selected="true"]::after{content:"";position:absolute;left:16px;right:16px;bottom:-1px;height:4px;border-radius:4px 4px 0 0;background:var(--ink)}
html:not(.app-shell) #main .hx-tab[data-status="soon"] .hx-well{background:transparent;border:1px dashed var(--field-edge)}
html:not(.app-shell) #main .hx-tab:hover .hx-well{outline:1px solid var(--field-edge)}
html:not(.app-shell) #main .hx-tab:focus-visible{outline:2px solid var(--focus-ring);outline-offset:-4px;border-radius:16px}

/* ---- the flight panel = today's search form (#tripform), restyled. Its behaviour is v2-search.js, untouched. ---- */
html:not(.app-shell) #main #tripform{display:grid;margin:0;padding:24px;gap:8px;background:none;border-radius:0;box-shadow:none;align-items:stretch;
  grid-template-columns:minmax(400px,1fr) minmax(240px,auto) minmax(200px,auto) auto;
  grid-template-areas:"seg seg flex flex" "pair dates pax go" "err err err err"}
html:not(.app-shell) #main #tripform[hidden]{display:none}
html:not(.app-shell) #main #tripform>.kform,html:not(.app-shell) #main #tripform .sgroup{display:contents}
html:not(.app-shell) #main #tripform .qtabs{grid-area:seg;display:flex;gap:8px;margin:0 0 8px;padding:0;border:0;align-self:center}
html:not(.app-shell) #main #tripform .qtabs button{min-height:48px;padding:0 16px;border:0;border-radius:8px;font-size:16px;font-weight:600;color:var(--ink-2);background:none}
html:not(.app-shell) #main #tripform .qtabs button[aria-pressed="true"]{color:var(--ink);background:var(--chip);box-shadow:inset 0 -2px 0 var(--ink)}
html:not(.app-shell) #main #tripform .places2{grid-area:pair;position:relative;display:grid;grid-template-columns:1fr 1fr;gap:8px;min-width:0}
html:not(.app-shell) #main #tripform .ptile,html:not(.app-shell) #main #tripform .dtile,html:not(.app-shell) #main #tripform .wtile{
  position:relative;display:flex;flex-direction:column;justify-content:center;width:auto;min-width:0;min-height:64px;margin:0;padding:8px 16px;
  border:1px solid var(--field-edge);border-radius:8px;background:var(--surface);box-shadow:none;text-align:start;cursor:pointer}
html:not(.app-shell) #main #tripform .ptile:hover,html:not(.app-shell) #main #tripform .dtile:hover,html:not(.app-shell) #main #tripform .wtile:hover{background:var(--surface-2)}
html:not(.app-shell) #main #tripform .ptile:focus-visible,html:not(.app-shell) #main #tripform .dtile:focus-visible,html:not(.app-shell) #main #tripform .wtile:focus-visible{outline:2px solid var(--focus-ring);outline-offset:0}
html:not(.app-shell) #main #tripform .places2 .ptile:first-child{padding-inline-end:32px}
html:not(.app-shell) #main #tripform .places2 .ptile+.swap+.ptile,html:not(.app-shell) #main #tripform .places2 .ptile~.ptile{padding-inline-start:32px;border:1px solid var(--field-edge)}
html:not(.app-shell) #main #tripform .pk{position:static;width:auto;height:auto;clip:auto;overflow:visible;white-space:nowrap;display:block;font-size:14px;line-height:20px;font-weight:400;color:var(--ink-2)}
html:not(.app-shell) #main #tripform .pv{display:block;font-size:18px;line-height:28px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html:not(.app-shell) #main #tripform .pv .code{margin-inline-start:8px;font-size:14px;font-weight:600;color:var(--ink-2)}
html:not(.app-shell) #main #tripform .ptile.empty .pv{font-weight:400;color:var(--ink-2)}
html:not(.app-shell) #main #tripform .ps{display:none}
html:not(.app-shell) #main #tripform .ptile.bad{box-shadow:inset 4px 0 0 var(--ink)}
html:not(.app-shell) #main #tripform .dtile{grid-area:dates}
html:not(.app-shell) #main #tripform .wtile{grid-area:pax}
html:not(.app-shell) #main #tripform .dtile .wd{display:none}
html:not(.app-shell) #main #tripform .px-l{display:none}
html:not(.app-shell) #main #tripform .px-s{display:inline}
html:not(.app-shell) #main #tripform .places2 .swap{position:absolute;z-index:2;left:calc(50% - 24px);top:8px;right:auto;margin:0;width:48px;height:48px;padding:0;
  display:flex;align-items:center;justify-content:center;border-radius:50%;background:var(--surface);border:1px solid var(--field-edge);color:var(--ink)}
html:not(.app-shell) #main #tripform .places2 .swap:hover{background:var(--surface-2)}
html:not(.app-shell) #main #tripform .swap .sw-h{display:block}
html:not(.app-shell) #main #tripform .swap .sw-v{display:none}
html:not(.app-shell) #main #s-go{grid-area:go;align-self:stretch;min-height:64px!important;height:auto;margin:0!important;padding:0 32px;min-width:0;width:auto;
  font-size:18px!important;border-radius:8px!important;box-shadow:none!important}
html:not(.app-shell) #main #tripform .s-err{grid-area:err;margin:0}
html:not(.app-shell) #main #tripform .quietchk{grid-area:flex;justify-self:end;align-self:center;display:inline-flex;align-items:center;gap:8px;min-height:48px;margin:0 0 8px;
  font-size:16px;color:var(--ink-2)}
html:not(.app-shell) #main #tripform .quietchk input{width:24px;height:24px}

/* ---- request panels (Hotels · Umrah & Hajj · Holidays) and the coming-soon panels (Visa · Insurance) ---- */
html:not(.app-shell) #main .hx-panel{padding:24px}
html:not(.app-shell) #main .hx-req-head{display:flex;align-items:center;gap:8px;margin:0 0 16px;font-weight:600;color:var(--ink)}
html:not(.app-shell) #main .hx-rfields{display:grid;grid-template-columns:1.4fr 1fr 1fr auto;gap:8px}
html:not(.app-shell) #main .hx-fld{position:relative;display:flex;flex-direction:column;justify-content:center;min-width:0;min-height:64px;padding:8px 16px;
  border:1px solid var(--field-edge);border-radius:8px;background:var(--surface);cursor:text}
html:not(.app-shell) #main .hx-fld:focus-within{outline:2px solid var(--focus-ring);outline-offset:0}
html:not(.app-shell) #main .hx-k{font-size:14px;line-height:20px;color:var(--ink-2)}
html:not(.app-shell) #main .hx-v{width:100%;min-width:0;margin:0;padding:0;border:0;background:none;font:inherit;font-size:18px;line-height:28px;font-weight:600;color:var(--ink);
  outline:none;appearance:none;-webkit-appearance:none}
html:not(.app-shell) #main .hx-v::placeholder{color:var(--ink-2);font-weight:400;opacity:1}
html:not(.app-shell) #main .hx-fld.sel{cursor:pointer}
html:not(.app-shell) #main .hx-fld.sel .hx-v{cursor:pointer;padding-inline-end:24px}
html:not(.app-shell) #main .hx-fld.sel::after{content:"";position:absolute;right:16px;top:50%;width:8px;height:8px;border-right:2px solid var(--ink-2);border-bottom:2px solid var(--ink-2);
  transform:translateY(-50%) rotate(45deg);pointer-events:none}
html:not(.app-shell) #main .hx-fld select.hx-v option{color:var(--text);background:var(--surface)}
html:not(.app-shell) #main .hx-send{min-height:64px;padding:0 32px;font-size:18px}
html:not(.app-shell) #main .hx-rnote{margin:16px 0 0;font-size:14px;line-height:24px;color:var(--ink-2)}
html:not(.app-shell) #main .hx-soonbox{display:flex;gap:24px;align-items:flex-start}
html:not(.app-shell) #main .hx-soonbox .hx-big{display:flex;align-items:center;justify-content:center;width:80px;height:80px;flex:none;border-radius:16px;border:1px dashed var(--field-edge);color:var(--ink)}
html:not(.app-shell) #main .hx-soonbox .hx-big .hx-ic{width:40px;height:40px;stroke-width:1.5}
html:not(.app-shell) #main .hx-soonbox .hx-sh{margin:0 0 8px;font-size:20px;line-height:28px;font-weight:600;color:var(--ink)}
html:not(.app-shell) #main .hx-soonbox p{margin:0;color:var(--ink-2)}
html:not(.app-shell) #main .hx-chips{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0}
html:not(.app-shell) #main .hx-chip{display:inline-flex;align-items:center;min-height:40px;padding:0 16px;border-radius:8px;background:var(--chip);color:var(--ink);font-size:14px;line-height:20px;font-weight:600}
html:not(.app-shell) #main .hx-soonbox .hx-btn{margin-top:16px}
html:not(.app-shell) #main .hx-soonbox .hx-chips+.hx-btn{margin-top:0}

/* ---- under the card: the honest line (by the tab's status), then three facts ---- */
html:not(.app-shell) #main .hero7 .s-note{display:flex;align-items:center;gap:8px;max-width:none;margin:16px 0 0;padding:0;font-size:16px;line-height:24px;color:var(--hx-on-photo)}
html:not(.app-shell) #main .hero7 .s-note .ic{display:none}
html:not(.app-shell) #main .hero7 .s-note .hx-chk{color:var(--hx-on-photo)}
html:not(.app-shell) #main .hero7 .s-note .hx-b-req{display:none}
html:not(.app-shell) #main .hero7[data-hx-status="request"] .s-note .hx-b-live,
html:not(.app-shell) #main .hero7[data-hx-status="soon"] .s-note .hx-b-live{display:none}
html:not(.app-shell) #main .hero7[data-hx-status="request"] .s-note .hx-b-req,
html:not(.app-shell) #main .hero7[data-hx-status="soon"] .s-note .hx-b-req{display:inline}
html:not(.app-shell) #main .hx-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin:0;padding:40px 0 0;list-style:none}
html:not(.app-shell) #main .hx-facts li{display:flex;align-items:center;gap:16px;font-weight:600;color:var(--hx-on-photo)}
html:not(.app-shell) #main .hx-facts .hx-fwell{display:flex;align-items:center;justify-content:center;width:48px;height:48px;flex:none;border-radius:50%;
  background:var(--hx-well-on-photo);border:1px solid var(--hx-well-edge-on-photo);color:var(--hx-on-photo)}

/* ---- the counter's inner layout follows the room it has (container queries): Hadi docked beside the page narrows it ---- */
@container hxc (max-width:1159px){
  html:not(.app-shell) #main .hx-tabs{grid-template-columns:repeat(3,minmax(0,1fr))}
  html:not(.app-shell) #main .hx-tab:nth-child(3){border-top-right-radius:24px}
  html:not(.app-shell) #main .hx-tab:last-child{border-top-right-radius:0}
  html:not(.app-shell) #main #tripform{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"seg flex" "pair pair" "dates pax" "go go" "err err"}
  html:not(.app-shell) #main .hx-rfields{grid-template-columns:1fr 1fr}
  html:not(.app-shell) #main .hx-rfields .hx-send{grid-column:1 / -1}
}
@container hxc (max-width:599px){
  /* phone: the six services are tiles on the photo (3 × 2), the card below holds the panel */
  html:not(.app-shell) #main .hx-counter{background:none;box-shadow:none;border-radius:0}
  html:not(.app-shell) #main .hx-tabs{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-bottom:16px;border:0}
  html:not(.app-shell) #main .hx-tab{flex-direction:column;align-items:flex-start;justify-content:center;gap:0;min-height:72px;padding:8px;border-radius:16px!important;background:var(--surface)}
  html:not(.app-shell) #main .hx-tab .hx-well{width:24px;height:24px;border-radius:0;background:none!important;border:0!important;outline:0!important;color:var(--ink)}
  html:not(.app-shell) #main .hx-nm{font-size:15px;line-height:20px}
  html:not(.app-shell) #main .hx-st{font-size:14px;line-height:16px}
  html:not(.app-shell) #main .hx-tab[aria-selected="true"]{background:var(--ink);color:var(--surface)}
  html:not(.app-shell) #main .hx-tab[aria-selected="true"] .hx-well{color:var(--surface)!important}
  html:not(.app-shell) #main .hx-tab[aria-selected="true"] .hx-st{color:var(--surface);opacity:.8}
  html:not(.app-shell) #main .hx-tab[aria-selected="true"]::after{display:none}
  html:not(.app-shell) #main .hx-tab[data-status="soon"]{background:var(--surface-2)}
  html:not(.app-shell) #main .hx-tab[data-status="soon"][aria-selected="true"]{background:var(--ink)}
  html:not(.app-shell) #main .hx-tab:focus-visible{outline-offset:2px}
  html:not(.app-shell) #main #tripform,html:not(.app-shell) #main .hx-panel{background:var(--surface);border-radius:24px;box-shadow:var(--hx-lift);padding:16px}
  html:not(.app-shell) #main #tripform{grid-template-columns:minmax(0,1fr);grid-template-areas:"seg" "pair" "dates" "pax" "go" "err"}
  html:not(.app-shell) #main #tripform .qtabs{display:grid;grid-template-columns:1fr 1fr;margin:0}
  html:not(.app-shell) #main #tripform .qtabs button{text-align:center}
  html:not(.app-shell) #main #tripform .quietchk{display:none}
  html:not(.app-shell) #main #tripform .places2{grid-template-columns:minmax(0,1fr)}
  html:not(.app-shell) #main #tripform .ptile,html:not(.app-shell) #main #tripform .dtile,html:not(.app-shell) #main #tripform .wtile{min-height:56px;padding:0 16px}
  html:not(.app-shell) #main #tripform .places2 .ptile:first-child,
  html:not(.app-shell) #main #tripform .places2 .ptile+.swap+.ptile,html:not(.app-shell) #main #tripform .places2 .ptile~.ptile{padding-inline-start:16px;padding-inline-end:64px}
  html:not(.app-shell) #main #tripform .pv{font-size:16px;line-height:24px}
  html:not(.app-shell) #main #tripform .places2 .swap{left:auto;right:16px;top:36px}
  html:not(.app-shell) #main #tripform .swap .sw-h{display:none}
  html:not(.app-shell) #main #tripform .swap .sw-v{display:block}
  html:not(.app-shell) #main #s-go{min-height:56px!important;width:100%}
  html:not(.app-shell) #main .hx-rfields{grid-template-columns:minmax(0,1fr)}
  html:not(.app-shell) #main .hx-fld{min-height:56px;padding:0 16px}
  html:not(.app-shell) #main .hx-v{font-size:16px;line-height:24px}
  html:not(.app-shell) #main .hx-send{min-height:56px;width:100%}
  html:not(.app-shell) #main .hx-soonbox{flex-direction:column;gap:16px}
  html:not(.app-shell) #main .hx-soonbox .hx-big{width:64px;height:64px}
  html:not(.app-shell) #main .hx-soonbox .hx-btn{white-space:normal;text-align:center;width:100%}
}

/* the ±3 days box moves into the calendar sheet on a phone (a mirror of #flex; the form still submits #flex) */
.hx-calflex{display:none}
@media (max-width:599px){
  html:not(.app-shell) .hx-calflex{display:flex;align-items:center;gap:8px;min-height:48px;margin:0 0 8px;font-size:16px;color:var(--ink-2);cursor:pointer}
  html:not(.app-shell) .hx-calflex input{width:24px;height:24px;margin:0;accent-color:var(--ink);flex:none}
}

/* ============================================================ RECENT SEARCHES (shared node, website look) */
html:not(.app-shell) #main #recent-sec{padding-top:64px}
html:not(.app-shell) #main #recent-sec .sec7-h{margin-bottom:16px}
html:not(.app-shell) #main #recent-sec .h2-7{font-family:"Tiro Bangla","Figtree","Noto Sans Bengali",sans-serif;font-weight:400;font-size:24px;line-height:36px;letter-spacing:0}
:root[data-lang="en"]:not(.app-shell) #main #recent-sec .h2-7{font-family:var(--sans);font-weight:700;font-size:22px;line-height:28px}

/* ============================================================ POPULAR ROUTES: the departures board + four photos */
html:not(.app-shell) #main .hx-routes{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:240px 240px;gap:24px}
html:not(.app-shell) #main .hx-board{grid-column:span 6;grid-row:span 2;display:flex;flex-direction:column;border-radius:16px;background:var(--hx-board);color:#fff;overflow:hidden}
html:not(.app-shell) #main .hx-board-h{display:flex;align-items:center;gap:16px;padding:24px 24px 16px}
html:not(.app-shell) #main .hx-bttl{font-family:"Tiro Bangla","Figtree","Noto Sans Bengali",sans-serif;font-size:24px;line-height:32px;color:#fff}
:root[data-lang="en"]:not(.app-shell) #main .hx-bttl{font-family:var(--sans);font-weight:700}
html:not(.app-shell) #main .hx-bplane{width:32px;height:32px;color:var(--accent);transform:rotate(45deg)}
html:not(.app-shell) #main .hx-bbrand{margin-inline-start:auto;font-weight:700;color:var(--hx-board-2)}
html:not(.app-shell) #main .hx-board-cols,html:not(.app-shell) #main .hx-brow{display:grid;grid-template-columns:1.3fr 1.2fr 1.2fr auto;gap:16px;align-items:center;padding:0 24px}
html:not(.app-shell) #main .hx-board-cols{font-size:14px;line-height:20px;color:var(--hx-board-2);padding-bottom:8px;border-bottom:1px solid var(--hx-board-line)}
html:not(.app-shell) #main .hx-brows{margin:0;padding:0;list-style:none;min-height:280px}
html:not(.app-shell) #main .hx-brow{width:100%;min-height:56px;margin:0;border:0;border-bottom:1px solid var(--hx-board-line);background:none;font:inherit;color:#fff;text-align:start;cursor:pointer}
html:not(.app-shell) #main .hx-brow:hover,html:not(.app-shell) #main .hx-brow:focus-visible{background:var(--hx-board-hover)}
html:not(.app-shell) #main .hx-brow:focus-visible{outline:2px solid #fff;outline-offset:-2px}
html:not(.app-shell) #main .hx-brow .hx-to{font-family:"Tiro Bangla","Figtree","Noto Sans Bengali",sans-serif;font-size:20px;line-height:28px}
:root[data-lang="en"]:not(.app-shell) #main .hx-brow .hx-to{font-family:var(--sans);font-weight:700;font-size:18px}
html:not(.app-shell) #main .hx-brow .hx-from{color:var(--hx-board-2)}
html:not(.app-shell) #main .hx-flaps{display:flex;gap:4px}
html:not(.app-shell) #main .hx-flap{display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:32px;padding:0 4px;border-radius:4px;background:var(--hx-board-tile);
  font-family:"Figtree",sans-serif;font-weight:600;font-size:16px;line-height:24px;color:#fff;letter-spacing:.02em}
html:not(.app-shell) #main .hx-flap.arw{background:none;color:var(--hx-board-2);min-width:16px}
html:not(.app-shell) #main .hx-act{display:inline-flex;align-items:center;gap:4px;font-weight:600}
html:not(.app-shell) #main .hx-board-f{margin:auto 0 0;padding:16px 24px;font-size:14px;line-height:20px;color:var(--hx-board-2)}
/* the board "updates" once as it comes into view (v2-home.js adds .hx-flip; without it the rows simply stand) */
@media (prefers-reduced-motion:no-preference){
  html:not(.app-shell) #main .hx-board.hx-flip .hx-brow{animation:hx-flipin .48s cubic-bezier(.2,.7,.2,1) both}
}
@keyframes hx-flipin{from{transform:perspective(400px) rotateX(-80deg);opacity:0}to{transform:none;opacity:1}}

/* photo cards and doors share one figure */
html:not(.app-shell) #main .hx-fig{position:absolute;inset:0;display:block;overflow:hidden;border-radius:16px;background:var(--hx-photo)}
html:not(.app-shell) #main .hx-fig img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .3s ease}
html:not(.app-shell) #main .hx-fig::after{content:"";position:absolute;inset:0;background:var(--hx-scrim-foot);pointer-events:none}
html:not(.app-shell) #main .hx-phb{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:64px 24px 96px;background:linear-gradient(150deg,var(--hx-ph-a),var(--hx-ph-b));color:var(--hx-ph-ic)}
html:not(.app-shell) #main .hx-phb .hx-ic{width:96px;height:96px;stroke-width:1}
html:not(.app-shell) #main .hx-dest,html:not(.app-shell) #main .hx-door{position:relative;display:block;width:100%;height:100%;min-height:48px;margin:0;padding:0;border:0;border-radius:16px;
  background:none;font:inherit;color:var(--hx-on-photo);text-align:start;text-decoration:none;cursor:pointer}
html:not(.app-shell) #main .hx-dest{grid-column:span 3}
html:not(.app-shell) #main .hx-cap{position:absolute;left:16px;right:16px;bottom:16px;z-index:2;display:flex;flex-direction:column;align-items:flex-start;gap:8px}
html:not(.app-shell) #main .hx-dest .hx-cap{gap:0}
html:not(.app-shell) #main .hx-cap b{font-family:"Tiro Bangla","Figtree","Noto Sans Bengali",sans-serif;font-weight:400;font-size:24px;line-height:32px}
:root[data-lang="en"]:not(.app-shell) #main .hx-cap b{font-family:var(--sans);font-weight:700;font-size:20px;line-height:28px}
html:not(.app-shell) #main .hx-cap>span:not(.hx-pill):not(.hx-go){font-size:14px;line-height:20px}
html:not(.app-shell) #main .hx-dest:focus-visible,html:not(.app-shell) #main .hx-door:focus-visible{outline:2px solid var(--focus-ring);outline-offset:4px}
/* a gentle zoom on hover / keyboard focus */
@media (prefers-reduced-motion:no-preference) and (hover:hover){
  html:not(.app-shell) #main .hx-dest:hover .hx-fig img,html:not(.app-shell) #main .hx-door:hover .hx-fig img{transform:scale(1.04)}
}
@media (prefers-reduced-motion:no-preference){
  html:not(.app-shell) #main .hx-dest:focus-visible .hx-fig img,html:not(.app-shell) #main .hx-door:focus-visible .hx-fig img{transform:scale(1.04)}
}
/* a short fade/rise as photos come into view — from a complete resting state: .hx-pre is only ever added by script, to
   cards still below the screen, and taken away as they arrive. No script, no observer, reduced motion → they just stand. */
@media (prefers-reduced-motion:no-preference){
  html:not(.app-shell) #main .hx-rv{transition:opacity .48s ease,transform .48s cubic-bezier(.2,.7,.2,1)}
  html:not(.app-shell) #main .hx-rv.hx-pre{opacity:0;transform:translate3d(0,16px,0)}
}

/* status pills: words, never colour alone */
html:not(.app-shell) #main .hx-pill{display:inline-flex;align-items:center;height:32px;padding:0 16px;border-radius:999px;background:var(--hx-pill-bg);color:var(--hx-pill-ink);
  font-size:14px;line-height:20px;font-weight:600}
html:not(.app-shell) #main .hx-pill.soon{background:var(--hx-pill-soon)}
html:not(.app-shell) #main .hx-go{display:inline-flex;align-items:center;gap:4px;min-height:48px;font-weight:700}

/* ============================================================ WHAT ELSE WE DO: five doors, Umrah the wide one */
html:not(.app-shell) #main .hx-doors{display:grid;grid-template-columns:4fr 2fr 2fr 2fr 2fr;grid-template-rows:400px;gap:24px}
html:not(.app-shell) #main .hx-door.big .hx-cap b{font-size:32px;line-height:48px}
:root[data-lang="en"]:not(.app-shell) #main .hx-door.big .hx-cap b{font-size:28px;line-height:36px}

/* ============================================================ A PERSON BEHIND EVERY BOOKING */
html:not(.app-shell) #main .hx-people{display:grid;grid-template-columns:7fr 5fr;gap:48px;align-items:start}
html:not(.app-shell) #main .hx-people>*{min-width:0}
html:not(.app-shell) #main .hx-trail{position:relative;margin:32px 0 40px;padding-top:48px}
html:not(.app-shell) #main .hx-trail::before{content:"";position:absolute;left:24px;right:24px;top:24px;border-top:2px dashed var(--accent)}
html:not(.app-shell) #main .hx-track{position:absolute;left:0;top:8px;width:100%;height:32px;pointer-events:none;transform:translate3d(0,0,0)}
html:not(.app-shell) #main .hx-tplane{position:absolute;left:0;top:0;width:32px;height:32px;color:var(--accent);transform:rotate(90deg)}
html:not(.app-shell) #main .hx-trail.hx-done .hx-track{transform:translate3d(calc(100% - 40px),0,0)}
@media (prefers-reduced-motion:no-preference){
  html:not(.app-shell) #main .hx-trail.hx-armed .hx-track{transition:transform 1.6s cubic-bezier(.3,.6,.2,1)}
}
html:not(.app-shell) #main .hx-stops{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;margin:0;padding:0;list-style:none}
html:not(.app-shell) #main .hx-stop{position:relative}
html:not(.app-shell) #main .hx-stop::before{content:"";position:absolute;top:-32px;left:16px;width:16px;height:16px;border-radius:50%;background:var(--bg);border:2px solid var(--ink)}
html:not(.app-shell) #main .hx-stop b{display:block;font-weight:700;color:var(--ink)}
html:not(.app-shell) #main .hx-who{display:flex;flex-wrap:wrap;gap:4px;margin-top:8px}
html:not(.app-shell) #main .hx-who>span{display:inline-flex;align-items:center;gap:4px;height:32px;padding:0 8px;border-radius:8px;background:var(--chip);font-size:14px;line-height:20px;font-weight:600;color:var(--ink)}
html:not(.app-shell) #main .hx-who>.h{background:transparent;border:1px solid var(--field-edge)}
html:not(.app-shell) #main .hx-who .hx-spark{width:16px;height:16px}
html:not(.app-shell) #main .hx-btnrow{display:flex;flex-wrap:wrap;gap:16px}
html:not(.app-shell) #main .hx-co{margin:24px 0 0;font-size:14px;line-height:24px;color:var(--ink-2)}
html:not(.app-shell) #main .hx-person{margin:0;border:1px solid var(--hair);border-radius:16px;background:var(--surface);overflow:hidden}
html:not(.app-shell) #main .hx-pfig{position:relative;height:320px;display:flex;align-items:center;justify-content:center;background:linear-gradient(150deg,var(--hx-ph-a),var(--hx-ph-b));color:var(--hx-ph-ic)}
html:not(.app-shell) #main .hx-pfig .hx-ic{width:96px;height:96px;stroke-width:1}
html:not(.app-shell) #main .hx-pfig img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
html:not(.app-shell) #main .hx-pfig.logo{background:#fff}
html:not(.app-shell) #main .hx-pfig.logo img{object-fit:contain;padding:40px}
html:not(.app-shell) #main .hx-pcap{padding:16px 24px 24px}
html:not(.app-shell) #main #v15-people{margin:0;padding:0;list-style:none;display:grid;gap:16px}
html:not(.app-shell) #main #v15-people .v15-tm{display:flex;flex-direction:column;align-items:flex-start;gap:0;padding:0;border-radius:0;background:none;box-shadow:none}
html:not(.app-shell) #main #v15-people .v15-tm>*{margin:0}
html:not(.app-shell) #main #v15-people .v15-tm+.v15-tm{padding-top:16px;border-top:1px solid var(--hair)}
html:not(.app-shell) #main #v15-people .kind{display:block;padding:0;border-radius:0;background:none;font-size:14px;line-height:20px;font-weight:600;color:var(--ink-2)}
html:not(.app-shell) #main #v15-people b{font-size:20px;line-height:28px;font-weight:600;color:var(--ink)}
html:not(.app-shell) #main #v15-people .city,html:not(.app-shell) #main #v15-people .langs,html:not(.app-shell) #main #v15-people .note{font-size:14px;line-height:24px;color:var(--ink-2)}
html:not(.app-shell) #main #v15-people .v15-tm .btn{margin-top:8px;align-self:flex-start}

/* ============================================================ FAMILY: the one full-width white band */
html:not(.app-shell) #main .hx-band{margin-top:96px;background:var(--surface);border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
html:not(.app-shell) #main .hx-fam{display:grid;grid-template-columns:7fr 5fr;gap:48px;align-items:center;padding-top:64px;padding-bottom:64px}
html:not(.app-shell) #main .hx-fam p{margin:16px 0 8px;max-width:32em;color:var(--text)}
html:not(.app-shell) #main .hx-card{justify-self:end;width:100%;max-width:400px;border-radius:24px;background:var(--bg);border:1px solid var(--hair);padding:24px}
html:not(.app-shell) #main .hx-card .hx-ctop{display:flex;justify-content:space-between;gap:16px;margin-bottom:16px;font-size:14px;line-height:20px;color:var(--ink-2)}
html:not(.app-shell) #main .hx-card .hx-ctop b{color:var(--ink)}
html:not(.app-shell) #main .hx-card .hx-cttl{display:block;font-size:20px;line-height:28px;font-weight:600;color:var(--ink)}
html:not(.app-shell) #main .hx-card .hx-rt{display:flex;align-items:center;gap:16px;margin:8px 0 16px;font-size:32px;line-height:40px;font-weight:700;color:var(--ink);font-family:"Figtree",sans-serif}
html:not(.app-shell) #main .hx-card .hx-rt .hx-ic{width:32px;height:32px}
html:not(.app-shell) #main .hx-card ul{margin:0;padding:0;list-style:none}
html:not(.app-shell) #main .hx-card li{display:flex;align-items:center;gap:16px;min-height:48px;border-top:1px solid var(--hair);font-size:18px;line-height:28px;color:var(--ink)}

/* ============================================================ CONSULTANTS: slim (#cn-near — v2-consultant.js hides it while one is remembered) */
html:not(.app-shell) #main .hx-cons-in{display:flex;align-items:center;justify-content:space-between;gap:32px;padding:40px 0}
html:not(.app-shell) #main .hx-cons-in>div{min-width:0}
html:not(.app-shell) #main .hx-zip{display:flex;align-items:flex-end;gap:8px;margin:0}
html:not(.app-shell) #main .hx-zip .field{position:relative;display:flex;flex-direction:column;justify-content:center;width:200px;max-width:none;min-height:56px;margin:0;padding:0 16px;
  border:1px solid var(--field-edge);border-radius:8px;background:var(--surface)}
html:not(.app-shell) #main .hx-zip .field:focus-within{outline:2px solid var(--focus-ring);outline-offset:0}
html:not(.app-shell) #main .hx-zip .lbl{margin:0;font-size:14px;line-height:20px;font-weight:400;color:var(--ink-2)}
html:not(.app-shell) #main .hx-zip .control{width:100%;min-height:0;margin:0;padding:0;border:0;border-radius:0;background:none;box-shadow:none;font:inherit;font-size:16px;line-height:24px;color:var(--ink);outline:none}
html:not(.app-shell) #main .hx-zip .control::placeholder{color:var(--ink-2);opacity:1}
html:not(.app-shell) #main .hx-zip .err{position:absolute;left:0;top:calc(100% + 8px);width:max-content;max-width:280px;margin:0;font-size:14px;line-height:20px}
html:not(.app-shell) #main .hx-zip .btn{min-height:56px;padding:0 24px}
html:not(.app-shell) #main #cn-near .cn-minis{margin:0 0 40px}

/* ============================================================ FOOTER (website home) */
html:not(.app-shell) body.home .foot7{margin-top:96px;padding:64px 0 40px}
html:not(.app-shell) body.home .foot7>.wrap7{max-width:1312px;padding:0 32px}
@media (min-width:900px){html:not(.app-shell) body.home .f7-cols{grid-template-columns:3fr 2fr 2fr 2fr 2fr 2fr}}
@media (max-width:899px){
  html:not(.app-shell) body.home .f7-cols{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px}
  html:not(.app-shell) body.home .f7-brand,html:not(.app-shell) body.home .f7-lang{grid-column:1 / -1}
}
html:not(.app-shell) body.home .f7-nav a{min-height:48px}

/* ============================================================ TABLET 600–1023 */
@media (max-width:1023px){
  html:not(.app-shell) #main .hx-routes{grid-template-columns:repeat(6,minmax(0,1fr));grid-template-rows:auto 240px 240px}
  html:not(.app-shell) #main .hx-board{grid-column:1 / -1;grid-row:auto}
  html:not(.app-shell) #main .hx-dest{grid-column:span 3}
  html:not(.app-shell) #main .hx-doors{grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:320px 240px}
  html:not(.app-shell) #main .hx-door.big{grid-column:1 / -1}
  html:not(.app-shell) #main .hx-people,html:not(.app-shell) #main .hx-fam{grid-template-columns:minmax(0,1fr)}
  html:not(.app-shell) #main .hx-card{justify-self:start}
}

/* ============================================================ PHONE < 600 — designed, not shrunk */
@media (max-width:599px){
  html:not(.app-shell) #main .hx-w,html:not(.app-shell) #main .hero7>.wrap7,html:not(.app-shell) #main .wrap7.hx-w{padding:0 16px}
  html:not(.app-shell) #main .hx-h2{font-size:24px;line-height:36px}
  :root[data-lang="en"]:not(.app-shell) #main .hx-h2{font-size:22px;line-height:28px}
  html:not(.app-shell) #main .hero7{padding:24px 0 0}
  html:not(.app-shell) .hx-bg{bottom:auto;height:304px}
  html:not(.app-shell) .hx-bg::after{background:var(--hx-scrim-top)}
  html:not(.app-shell) .hx-bg .hx-phband{padding:0 24px}
  html:not(.app-shell) .hx-bg .hx-phband .hx-ic{width:160px;height:160px}
  html:not(.app-shell) #main .h7.v15-display{margin:0 0 16px;font-size:28px;line-height:40px;max-width:none}
  :root[data-lang="en"]:not(.app-shell) #main .h7.v15-display{font-size:28px;line-height:36px}
  html:not(.app-shell) #main .hero7 .s-note{align-items:flex-start;font-size:14px;line-height:24px;color:var(--ink-2)}
  html:not(.app-shell) #main .hero7 .s-note .hx-chk{color:var(--ink)}
  html:not(.app-shell) #main .hx-facts{grid-template-columns:minmax(0,1fr);gap:8px;padding-top:24px}
  html:not(.app-shell) #main .hx-facts li{color:var(--ink)}
  html:not(.app-shell) #main .hx-facts .hx-fwell{background:var(--surface);border-color:var(--hair);color:var(--ink)}
  html:not(.app-shell) #main #recent-sec{padding-top:48px}
  html:not(.app-shell) #main .hx-sec{padding-top:64px}
  html:not(.app-shell) #main .hx-sec-h{flex-direction:column;align-items:flex-start;gap:0;margin-bottom:24px}
  html:not(.app-shell) #main .hx-routes{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:auto 168px 168px;gap:8px}
  html:not(.app-shell) #main .hx-dest{grid-column:span 1}
  html:not(.app-shell) #main .hx-board-h{padding:16px}
  html:not(.app-shell) #main .hx-board-cols{display:none}
  html:not(.app-shell) #main .hx-brows{min-height:320px}
  html:not(.app-shell) #main .hx-brow{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"to act" "from act";gap:0 16px;padding:8px 16px;min-height:64px}
  html:not(.app-shell) #main .hx-brow .hx-to{grid-area:to}
  html:not(.app-shell) #main .hx-brow .hx-from{grid-area:from;font-size:14px;line-height:20px}
  html:not(.app-shell) #main .hx-brow .hx-flaps{display:none}
  html:not(.app-shell) #main .hx-brow .hx-act{grid-area:act}
  html:not(.app-shell) #main .hx-board-f{padding:16px}
  html:not(.app-shell) #main .hx-cap{left:8px;right:8px;bottom:8px}
  html:not(.app-shell) #main .hx-cap b{font-size:20px;line-height:28px}
  html:not(.app-shell) #main .hx-doors{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:240px 168px 168px;gap:8px}
  html:not(.app-shell) #main .hx-door .hx-cap{gap:4px}
  html:not(.app-shell) #main .hx-door .hx-l{display:none}
  html:not(.app-shell) #main .hx-door.big .hx-l{display:block}
  html:not(.app-shell) #main .hx-door.big .hx-cap b{font-size:28px;line-height:40px}
  html:not(.app-shell) #main .hx-phb{padding:24px 16px 80px}
  html:not(.app-shell) #main .hx-phb .hx-ic{width:56px;height:56px}
  html:not(.app-shell) #main .hx-trail{padding:40px 0 0 48px;margin:24px 0}
  html:not(.app-shell) #main .hx-stops{grid-template-columns:minmax(0,1fr);gap:16px}
  html:not(.app-shell) #main .hx-trail::before{left:16px;right:auto;top:8px;bottom:8px;border-top:0;border-left:2px dashed var(--accent)}
  html:not(.app-shell) #main .hx-track{left:4px;top:0;width:32px;height:100%}
  html:not(.app-shell) #main .hx-tplane{transform:rotate(180deg)}
  html:not(.app-shell) #main .hx-trail.hx-done .hx-track{transform:translate3d(0,calc(100% - 32px),0)}
  html:not(.app-shell) #main .hx-trail .hx-track{height:100%}
  html:not(.app-shell) #main .hx-trail .hx-tplane{top:0}
  html:not(.app-shell) #main .hx-stop::before{top:8px;left:-40px}
  html:not(.app-shell) #main .hx-btnrow .btn{flex:1 1 100%;min-height:56px}
  html:not(.app-shell) #main .hx-pfig{height:240px}
  html:not(.app-shell) #main .hx-band{margin-top:64px}
  html:not(.app-shell) #main .hx-fam{padding-top:48px;padding-bottom:48px;gap:32px}
  html:not(.app-shell) #main .hx-card .hx-rt{font-size:28px;line-height:36px}
  html:not(.app-shell) #main .hx-cons-in{flex-direction:column;align-items:stretch;gap:24px}
  html:not(.app-shell) #main .hx-zip .field{flex:1;width:auto}
  html:not(.app-shell) #main .hx-zip .err{max-width:100%}
  html:not(.app-shell) body.home .foot7{margin-top:64px}
  html:not(.app-shell) body.home .foot7>.wrap7{padding:0 16px}
}

/* on a phone and a tablet the hero fills the first screen: the floating Hadi pill would sit over it (SPEC D12).
   Hadi stays in the header pill and the "Ask Hadi" button. v2-hadi.js is untouched — this hides only its floater, here. */
@media (max-width:1023px){
  html:not(.app-shell) body.home #hfloat{display:none!important}
  html:not(.app-shell).hadi-float body.home{padding-bottom:var(--safe-b,0px)}   /* no room kept for a pill that isn't there */
}

@media (prefers-reduced-motion:reduce){
  html:not(.app-shell) .hx-bg .hx-layer,html:not(.app-shell) #main .hx-fig img,html:not(.app-shell) #main .hx-rv,html:not(.app-shell) #main .hx-track{transition:none!important}
  html:not(.app-shell) .hx-bg img,html:not(.app-shell) #main .hx-brow{animation:none!important}
}