/* Musafir Health — shared stylesheet. Wordmark MUSAFIR✦HEALTH: Sitara, the star, is the dot. Identity: the Musafir character, a Bedouin-style
   traveller with keffiyeh, agal and staff, walking into a low desert sun.
   Palette "desert at dusk": sand, dune, oasis, dusk sky, sun. Type: Reem Kufi
   (headings, wordmark) and Hind (text; Hind Siliguri / Hind Devanagari / Noto
   Nastaliq Urdu join for the other languages). Logical properties only, so RTL
   pages mirror. Every colour is a token below. */

@font-face{font-family:"Reem Kufi";font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/reem-kufi-latin-500.woff2) format("woff2")}
@font-face{font-family:"Reem Kufi";font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/reem-kufi-latin-700.woff2) format("woff2")}
@font-face{font-family:"Hind";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/hind-latin-400.woff2) format("woff2")}
@font-face{font-family:"Hind";font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/hind-latin-600.woff2) format("woff2")}
@font-face{font-family:"Hind";font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/hind-latin-700.woff2) format("woff2")}

:root{
  --sand:#f7ecda; --card:#fffaf1; --ink:#2b1a10; --text:#36281d; --muted:#6a5644;
  --dune:#a8481a; --oasis:#17635d; --sun:#f0a830; --sun-soft:#fbe1a8;
  --line:#e6d2b3; --notice-bg:#fbe1a8; --notice-ink:#5a3500;
  /* night-sky band and the illustration (same in both modes: it is always dusk) */
  --dusk:#232a4d; --on-dusk:#f7ecda; --dusk-muted:#c9c3d6;
  --sc-sky-low:#7a3b3a; --sc-dune-far:#c8642a; --sc-dune-mid:#a9501f; --sc-dune-near:#8e3f19;
  --sc-shadow:#1a1426; --sc-cloth:#f3e6cc; --sc-cloak:#5c2f17; --sc-trim:#f0a830; --sc-skin:#a0623a; --sc-staff:#3d2414; --sc-star:#fff4d6;
  --head:"Reem Kufi","Hind",system-ui,sans-serif;
  --font:"Hind",system-ui,-apple-system,"Segoe UI",sans-serif;
  --radius:16px; --wrap:1060px;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root{
  --sand:#15120f; --card:#1f1a15; --ink:#f6e8d2; --text:#eadcc6; --muted:#c0ad96;
  --dune:#f29a63; --oasis:#6fcac0; --sun:#f3b545; --sun-soft:#3b2c12;
  --line:#3a2f24; --notice-bg:#3b2c12; --notice-ink:#f6dca0;
  --dusk:#0f1428;
  color-scheme:dark;
}}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--sand);color:var(--text);font-family:var(--font);font-size:1.0625rem;line-height:1.65}
img,svg{max-width:100%}
a{color:var(--oasis);text-underline-offset:3px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--sun);outline-offset:3px;border-radius:4px}
h1,h2,h3{font-family:var(--head);color:var(--ink);line-height:1.2;text-wrap:balance;margin:0 0 .5em}
h1{font-size:clamp(2rem,5vw,3.2rem);font-weight:700}
h2{font-size:clamp(1.45rem,3vw,1.95rem);font-weight:700}
h3{font-size:1.15rem;font-weight:500;letter-spacing:.01em}
p{margin:0 0 1em;max-width:65ch}
ul{margin:0 0 1em;padding-inline-start:1.2em}
li{margin-block-end:.4em}
li::marker{color:var(--dune)}

.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:max(16px,env(safe-area-inset-left,0px)) max(16px,env(safe-area-inset-right,0px))}
.wrap>*{min-width:0}
.skip{position:absolute;inset-inline-start:-999px}
.skip:focus{inset-inline-start:16px;top:16px;z-index:10;background:var(--card);color:var(--ink);padding:8px 12px;border-radius:8px}

/* Under-construction notice (top) */
.site-notice{background:var(--notice-bg);color:var(--notice-ink);font-size:.92rem;padding-block:.55rem;text-align:center}
.site-notice p{margin:0 auto;max-width:none;padding-inline:16px}

/* Header: a night-sky band carrying the badge and wordmark */
.top{background:var(--dusk);color:var(--on-dusk)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding-block:12px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--on-dusk)}
.brand img{width:48px;height:48px}
.brand-text{display:flex;flex-direction:column;gap:4px}
.brand b{font-family:var(--head);font-size:1.45rem;font-weight:700;letter-spacing:.05em;line-height:1;text-transform:uppercase}
.brand b{display:inline-flex;align-items:center}
.brand-star{width:.62em;height:.62em;margin-inline:.16em;fill:var(--sun);flex:none}
.brand-text>span{font-size:.82rem;color:var(--dusk-muted);letter-spacing:.02em;line-height:1.1}
@media (max-width:380px){.brand b{font-size:1.2rem}}
.langs{display:flex;gap:6px;flex-wrap:wrap;font-size:.95rem}
.langs a,.langs span{padding:4px 12px;border:1px solid var(--dusk-muted);border-radius:999px;text-decoration:none;color:var(--on-dusk)}
.langs [aria-current]{background:var(--sun);color:var(--sc-shadow);border-color:var(--sun);font-weight:600}
.langs .soon{color:var(--dusk-muted);border-style:dashed}

/* Dune-wave divider (replaces a plain rule) */
.dunes{height:14px;border:0;margin-block:2.4rem;background:var(--dune);opacity:.75;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 14'%3E%3Cpath d='M0 10C10 2 20 2 30 10S50 18 60 10' fill='none' stroke='black' stroke-width='3'/%3E%3C/svg%3E") repeat-x center/60px 14px;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 14'%3E%3Cpath d='M0 10C10 2 20 2 30 10S50 18 60 10' fill='none' stroke='black' stroke-width='3'/%3E%3C/svg%3E") repeat-x center/60px 14px}

/* Hero */
.hero{padding-block:2.4rem 1rem;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:2rem;align-items:center}
.eyebrow{font-weight:600;color:var(--oasis);letter-spacing:.08em;text-transform:uppercase;font-size:.85rem;margin-block-end:.4rem}
.lead{font-size:1.2rem}
.scene{border-radius:var(--radius);overflow:hidden;box-shadow:0 10px 30px -18px var(--sc-shadow);line-height:0}
.scene svg{width:100%;height:auto;display:block}
@media (max-width:760px){.hero{grid-template-columns:1fr}}

/* Illustration parts (classes so the scene uses tokens) */
.sc-sky-hi{stop-color:var(--dusk)} .sc-sky-lo{stop-color:var(--sc-sky-low)}
.sc-sun{fill:var(--sun)} .sc-far{fill:var(--sc-dune-far)} .sc-mid{fill:var(--sc-dune-mid)} .sc-near{fill:var(--sc-dune-near)}
.sc-shadow{fill:var(--sc-shadow)} .sc-cloth{fill:var(--sc-cloth)} .sc-cloak{fill:var(--sc-cloak)} .sc-skin{fill:var(--sc-skin)}
.sc-star{fill:var(--sc-star)} .sc-trim{fill:none;stroke:var(--sc-trim)} .sc-staff{stroke:var(--sc-staff)} .sc-agal{fill:none;stroke:var(--sc-shadow)}
/* Short entrance: the traveller strides a few steps, footprints appear, stars blink; then still (under 5 s) */
.walker{animation:mz-walk .9s ease-in-out 4 alternate}
.tail{transform-box:fill-box;transform-origin:100% 0;animation:mz-flap .6s ease-in-out 6 alternate}
.step-print{opacity:0;animation:mz-print .4s ease-out forwards;animation-delay:var(--d,0s)}
.twinkle{animation:mz-twinkle 1.6s ease-in-out 2 alternate}
@keyframes mz-walk{to{transform:translateY(-3px)}}
@keyframes mz-flap{to{transform:rotate(-8deg)}}
@keyframes mz-print{to{opacity:1}}
@keyframes mz-twinkle{to{opacity:.3}}

/* Steps along the journey: numbered waypoints on a footprint trail */
.journey{list-style:none;padding:0;margin:0;display:grid;gap:14px;position:relative}
.step{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px;display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px}
.step .n{width:44px;height:44px;border-radius:50%;background:var(--dusk);color:var(--sun);display:grid;place-items:center;font-family:var(--head);font-weight:700;font-size:1.15rem;box-shadow:0 0 0 4px var(--sun-soft)}
.step h3,.step h2{margin-block-end:.3em}
.step h2{font-size:1.35rem}
.step p:last-child,.step ul:last-child{margin-block-end:0}

.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
.card{background:var(--card);border:1px solid var(--line);border-block-start:4px solid var(--sun);border-radius:var(--radius);padding:18px 20px;min-width:0}
.card h3{margin-block-end:.3em}
.card p:last-child{margin:0}

.callout{border-inline-start:5px solid var(--dune);background:var(--card);border-radius:0 var(--radius) var(--radius) 0;padding:16px 20px;margin-block:1.4rem}
.callout p:last-child{margin:0}

.sources{font-size:.95rem}
.crumbs{font-size:.92rem;margin-block:1.2rem .4rem;color:var(--muted)}
.crumbs a{display:inline-block;padding-block:12px}

/* Language chooser (old home list, kept for reference pages) */
.choose{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin-block:1.2rem 2rem}
.choose a,.choose div{display:block;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;text-decoration:none;color:var(--ink)}
.choose a{border-color:var(--sun);border-width:2px}
.choose a:hover{background:var(--sun-soft)}
.choose b{display:block;font-size:1.3rem}
.choose small{color:var(--muted);font-size:.9rem}
.choose div{border-style:dashed}

/* Footer: the night band again */
footer{background:var(--dusk);color:var(--dusk-muted);margin-block-start:3rem;padding-block:1.8rem 2.4rem;font-size:.92rem}
footer p{max-width:none}
footer a{color:var(--sun)}
.not-them{border-inline-start:3px solid var(--sun);padding-inline-start:10px;color:var(--on-dusk)}
.footer-notice{color:var(--notice-ink);background:var(--notice-bg);padding:8px 12px;border-radius:8px}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}.step-print{opacity:1}}

/* Dashboard home (family-wide rule, in Musafir Health's own tokens): tiles, 2 columns on phones, 3-4 on desktop */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-block:1rem 1.6rem}
@media (min-width:640px){.tiles{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}}
@media (min-width:900px){.tiles:not(.tiles-jump){grid-template-columns:repeat(4,minmax(0,1fr))}}
.tile{display:flex;flex-direction:column;gap:2px;min-height:88px;padding:14px;color:var(--text);text-decoration:none;background:var(--card);border:1px solid var(--line);border-block-start:4px solid var(--tone,var(--sun));border-radius:var(--radius);transition:transform .18s ease,border-color .18s ease}
.tile-title{font-family:var(--head);font-weight:700;font-size:1.15rem;line-height:1.25;color:var(--ink)}
.tile-text{color:var(--muted);font-size:.9rem;line-height:1.35}
a.tile:hover{border-color:var(--tone,var(--sun));transform:translateY(-2px)}
.tile-soon{border-style:dashed;border-block-start-style:solid}
.tile[data-tone="sun"]{--tone:var(--sun)}
.tile[data-tone="dune"]{--tone:var(--dune)}
.tile[data-tone="oasis"]{--tone:var(--oasis)}
.tile[data-tone="ink"]{--tone:var(--ink)}
@media (prefers-reduced-motion:reduce){.tile{transition:none}a.tile:hover{transform:none}}

/* Family tips: a box of up to 3 cards near the end of a guide or tool page, pointing to matching
   pages on the family's other sites. Same markup as the GetReady sites, in Musafir's tokens. Motion: cards rise in as they scroll into view
   (where supported), the icon wiggles and the arrow nudges on hover or focus; none with reduced motion. */
.family-tip { margin: 36px 0; padding: 20px; border: 1px solid var(--line); border-radius: 16px; background: var(--card); }
.family-tip .family-tip-k { margin: 0 0 14px; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.ft-cards { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.family-tip a.ft-card { display: flex; flex-direction: column; gap: 6px; min-height: 44px; padding: 16px; border: 1px solid var(--line); border-block-start: 3px solid var(--dune); border-radius: 12px; background: var(--sand); color: var(--text); text-decoration: none; transition: translate .2s ease, border-color .2s ease; }
.family-tip a.ft-card:hover { translate: 0 -3px; border-color: var(--dune); }
.family-tip a.ft-card:focus-visible { outline: 2px solid var(--dune); outline-offset: 2px; }
.ft-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: var(--sun-soft); color: var(--dune); }
.ft-icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ft-site { font-size: 0.75rem; font-weight: 600; color: var(--oasis); }
.ft-title { font-size: 1.02rem; font-weight: 700; line-height: 1.3; }
.ft-line { font-size: 0.9rem; line-height: 1.45; color: var(--muted); }
.ft-go { margin-top: auto; padding-top: 4px; font-size: 0.9rem; font-weight: 600; color: var(--dune); }
.ft-arrow { display: inline-block; transition: translate .2s ease; }
.ft-card:hover .ft-arrow, .ft-card:focus-visible .ft-arrow { translate: 4px 0; }
.ft-card:hover .ft-icon, .ft-card:focus-visible .ft-icon { animation: ft-wiggle .6s ease; }
@keyframes ft-wiggle { 0%, 100% { transform: none; } 30% { transform: rotate(-8deg) scale(1.08); } 60% { transform: rotate(6deg) scale(1.08); } }
@keyframes ft-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@supports (animation-timeline: view()) {
  .family-tip a.ft-card { animation: ft-rise linear both; animation-timeline: view(); animation-range: entry 0% entry 70%; }
  .family-tip a.ft-card:nth-child(2) { animation-range: entry 10% entry 80%; }
  .family-tip a.ft-card:nth-child(3) { animation-range: entry 20% entry 90%; }
}
@media (prefers-reduced-motion: reduce) { .family-tip a.ft-card, .ft-arrow, .ft-icon { animation: none !important; transition: none; } .family-tip a.ft-card:hover, .ft-card:hover .ft-arrow { translate: none; } }

/* Emergency bar (Musafir Health): the destination's emergency numbers, first on every dashboard */
.callbar{background:var(--card);border:1px solid var(--line);border-inline-start:5px solid var(--dune);border-radius:var(--radius);padding:12px 16px;margin-block:1rem}
.callbar h2{font-size:1.05rem;margin:0 0 .4rem}
.callbar ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 10px}
.callbar li{display:flex;align-items:center;gap:6px;font-size:.95rem}
.callbar a{display:inline-flex;align-items:center;min-height:44px;min-width:44px;justify-content:center;padding-inline:10px;border-radius:999px;background:var(--dusk);color:var(--on-dusk);font-weight:700;text-decoration:none}
.callbar a:hover{outline:2px solid var(--sun);outline-offset:2px}
.callbar p{margin:.5rem 0 0;font-size:.88rem;color:var(--muted)}
.redflag{border-inline-start:5px solid var(--dune);background:var(--card);border-radius:0 var(--radius) var(--radius) 0;padding:14px 18px;margin-block:1.2rem}
.redflag h2,.redflag h3{margin-block-start:0}

/* Folded groups (family "Folded groups" pattern in Musafir tokens): big tappable rows that open in place */
.groups{display:grid;gap:12px;margin-block:1.2rem}
details.group{background:var(--card);border:1px solid var(--line);border-radius:var(--radius)}
details.group>summary{display:flex;align-items:center;gap:14px;min-height:56px;padding:10px 16px;cursor:pointer;list-style:none}
details.group>summary::-webkit-details-marker{display:none}
details.group>summary::after{content:"";margin-inline-start:auto;flex:none;width:10px;height:10px;border-inline-end:2px solid var(--dune);border-block-end:2px solid var(--dune);transform:rotate(45deg);transition:transform .2s ease}
details.group[open]>summary::after{transform:rotate(-135deg)}
details.group>summary h2{margin:0;font-size:1.2rem}
details.group>summary .n{width:40px;height:40px;flex:none;border-radius:50%;background:var(--dusk);color:var(--sun);display:grid;place-items:center;font-family:var(--head);font-weight:700}
details.group .group-body{padding:0 18px 14px}
@media (prefers-reduced-motion:reduce){details.group>summary::after{transition:none}}

/* Trust strip: key facts low, under the tiles */
.trust{list-style:none;padding:0;margin:1rem 0 0;display:flex;flex-wrap:wrap;gap:8px}
.trust li{display:inline-flex;align-items:center;min-height:44px;padding-inline:14px;border:1px solid var(--line);border-radius:999px;background:var(--card);font-size:.95rem}
.trust a{display:inline-flex;align-items:center;min-height:44px}