/* Safarnama, shared style for content / legal pages */
:root{
  --bg:#F0F8FF; --surface:#FFFFFF; --text:#03045E; --muted:#4A6FA5;
  --saffron:#0077B6; --saffron-deep:#005F8F; --green:#0077B6; --navy:#03045E;
  --border:rgba(0,119,182,.18); --border-soft:rgba(0,119,182,.1);
  --line:rgba(0,119,182,.18); --line-soft:rgba(0,119,182,.1); --bg-2:#FFFFFF; --wrap:1140px;
  --saffron-tint:#CAF0F8; --callout-bg:#CAF0F8; --callout-border:rgba(0,119,182,.3);
  --doc-text:#03045E; --error:#E5484D; --warning:#B5720A;
  --serif:'Playfair Display',Georgia,'Times New Roman',serif;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  /* Two border-radius values sitewide (buttons/inputs vs cards/panels, same
     two-value discipline as index.html's --radius/--radius-lg, sized for
     this page family's tighter document layout) plus a pill radius for
     chips/tags, and one caption size for every label/eyebrow/fine-print role. */
  --radius:8px; --radius-lg:14px; --radius-pill:999px; --fs-cap:12px;
}
:root[data-theme="dark"]{
  --bg:#0B1230; --surface:#141B3D; --text:#E8ECF5; --muted:#90E0EF;
  --saffron:#00B4D8; --saffron-deep:#0077B6; --green:#00B4D8; --navy:#0077B6;
  --border:rgba(0,180,216,.15); --border-soft:rgba(0,180,216,.1);
  --line:rgba(0,180,216,.15); --line-soft:rgba(0,180,216,.1); --bg-2:#141B3D;
  --doc-text:#90E0EF; --callout-bg:rgba(0,119,182,.2); --callout-border:rgba(0,180,216,.3);
  --saffron-tint:rgba(0,180,216,.08); --error:#FF6B6B; --warning:#FFB347;
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{font-family:var(--sans);background:var(--bg);color:var(--text);line-height:1.7;font-size:16px;-webkit-font-smoothing:antialiased}
a{color:var(--saffron-deep);text-decoration:none}
a:hover{text-decoration:underline}
:where(:root[data-theme="dark"]) a{color:var(--saffron)}

/* ---------- SHARED SITE NAV (matches index.html) ---------- */
.nav{position:sticky;top:0;z-index:100;background:rgba(240,248,255,.82);
  backdrop-filter:saturate(180%) blur(12px);-webkit-backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--line-soft);transition:background .3s ease,box-shadow .3s ease,border-color .3s ease}
.nav.scrolled{background:var(--bg-2);border-bottom-color:transparent;box-shadow:0 1px 20px rgba(0,0,0,.06)}
:root[data-theme="dark"] .nav{background:rgba(2,4,54,.82)}
.nav-inner{max-width:var(--wrap);margin:0 auto;padding:14px 24px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.nav .brand{display:flex;align-items:baseline;gap:9px}
.nav .brand .mark{font-family:var(--serif);font-weight:700;font-size:22px;letter-spacing:-.01em;color:var(--text)}
.nav .brand .mark b{color:var(--saffron-deep);font-weight:700}
.nav .brand .by{font-size:var(--fs-cap);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);text-decoration:none;transition:color .15s ease}
.nav .brand .by:hover{color:var(--saffron-deep)}
.nav .brand .brand-home{color:inherit;text-decoration:none}
.nav-links{display:flex;align-items:center;gap:32px;font-size:15px;font-weight:500}
.nav-links a{color:var(--muted);transition:color .18s ease;white-space:nowrap}
.nav-links a:hover{color:var(--text);text-decoration:none}

/* ---------- NAV, Explore dropdown (matches index.html) ---------- */
.nav-explore{position:relative}
.nav-explore-btn{display:flex;align-items:center;gap:6px;background:none;border:none;padding:0;margin:0;
  font:inherit;font-size:15px;font-weight:500;color:var(--muted);cursor:pointer;transition:color .18s ease}
.nav-explore-btn:hover,.nav-explore.open .nav-explore-btn{color:var(--text)}
.nav-explore-btn svg{transition:transform .18s ease;flex-shrink:0}
.nav-explore.open .nav-explore-btn svg{transform:rotate(180deg)}
.nav-dropdown{position:absolute;top:calc(100% + 20px);left:-22px;width:280px;background:var(--bg-2);
  border-radius:var(--radius-lg);padding:22px 24px;box-shadow:0 22px 48px rgba(3,4,30,.22);
  opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .18s ease,transform .18s ease,visibility .18s ease}
.nav-explore.open .nav-dropdown{opacity:1;visibility:visible;transform:translateY(0)}
.nd-intro{font-family:var(--serif);font-size:14px;font-weight:600;line-height:1.4;color:var(--text);margin-bottom:16px}
.nd-item{display:flex;align-items:center;justify-content:space-between;padding:9px 0;font-size:14px;color:var(--text);border-bottom:1px solid var(--line-soft)}
.nd-item:last-child{border-bottom:none}
.nd-item:hover{color:var(--saffron-deep);text-decoration:none}
.nd-item .nd-arrow{color:var(--saffron-deep);font-size:13px}

.nav-cta{display:flex;align-items:center;gap:10px}
/* Bold white text, the one shared style for this button wherever the nav
   appears (was dark navy text here, white on index.html; unified to match).
   Selector includes the "a" type on purpose, not just .nav .btn-primary:
   :root[data-theme="dark"] a (general link color, above) is more specific
   in dark mode than a two-class selector alone, and was silently winning,
   the button's own text rendered the same cyan as its background, invisible.
   This matches that selector's specificity and wins on source order. */
.nav a.btn-primary{display:inline-block;background:var(--saffron);color:#fff;font-size:14px;font-weight:600;
  padding:10px 18px;border-radius:var(--radius);text-decoration:none;white-space:nowrap;
  box-shadow:0 2px 6px rgba(0,180,216,.24),0 8px 20px rgba(0,180,216,.16)}
.nav a.btn-primary:hover{text-decoration:none;filter:brightness(1.03)}
/* Plain-text second entry point for returning users, one accent color per nav
   (the primary button) stays the rule, so this stays neutral like the other
   nav items, never cyan. */
.nav-login{color:var(--muted);font-size:14px;font-weight:500;white-space:nowrap;transition:color .18s ease}
.nav-login:hover{color:var(--text);text-decoration:none}
.nav-links .nav-login-mobile{display:none}
.nav-toggle{display:none;background:none;border:none;cursor:pointer;padding:8px;color:var(--text)}
.nav-toggle svg{display:block}
.theme-toggle{display:flex;align-items:center;justify-content:center;width:34px;height:34px;flex-shrink:0;
  border-radius:50%;border:1px solid var(--line);background:var(--bg-2);color:var(--text);font-size:15px;cursor:pointer}
@media(max-width:1140px){
  /* .nav .nav-cta .btn-primary (not just .nav-cta .btn-primary): the desktop
     .nav a.btn-primary rule above is a 3-selector-deep (0,2,1) rule kept
     specific on purpose (see its own comment), so this mobile override needs
     equal or higher specificity to win, (0,3,0) here, rather than relying
     on source order, which loses to a more specific rule regardless of
     position. Same mechanism as the dark-mode nav-cta override further up. */
  .nav-links,.nav .nav-cta .btn-primary,.nav-cta .nav-login{display:none}
  .nav-links .nav-login-mobile{display:block}
  .nav-toggle{display:block}
  .nav.open .nav-links{display:flex;position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:4px;
    background:var(--bg);border-bottom:1px solid var(--line);padding:12px 24px 20px}
  .nav.open .nav-links a{padding:12px 0;font-size:17px;border-bottom:1px solid var(--line-soft)}
  .nav.open .nav-links a:last-child{border-bottom:none}
  /* Explore collapses into the flat mobile list.nav-links a above already
     styles .nd-item the same as every other row (plain descendant selector). */
  .nav-explore{display:contents}
  .nav-explore-btn{display:none}
  .nav-dropdown{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;
    background:transparent;padding:0;width:auto;border-radius:0;display:flex;flex-direction:column}
  .nd-intro{padding:14px 0 2px;font-size:var(--fs-cap);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
}

/* legacy doc-nav (still used until every page is migrated) */
.doc-nav{position:sticky;top:0;z-index:50;background:rgba(240,248,255,0.85);
  backdrop-filter:saturate(180%) blur(12px);-webkit-backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--border-soft)}
.doc-nav-inner{max-width:820px;margin:0 auto;padding:14px 24px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.doc-brand{display:flex;align-items:baseline;gap:8px}
.doc-brand .mark{font-family:var(--serif);font-weight:700;font-size:20px;color:var(--text)}
.doc-brand .mark b{color:var(--saffron-deep)}
.doc-brand .by{font-size:var(--fs-cap);letter-spacing:1.5px;text-transform:uppercase;color:var(--muted)}
.doc-nav a.back{font-size:13px;font-weight:600;color:var(--muted)}
.doc-nav a.back:hover{color:var(--text);text-decoration:none}

/* body */
.doc{max-width:820px;margin:0 auto;padding:56px 24px 96px}
.doc .eyebrow{font-size:var(--fs-cap);font-weight:600;letter-spacing:2.5px;text-transform:uppercase;color:var(--saffron-deep)}
.doc h1{font-family:var(--serif);font-weight:700;font-size:clamp(2rem,5vw,2.9rem);letter-spacing:-0.01em;margin:14px 0 8px}
.doc .updated{color:var(--muted);font-size:13.5px;margin-bottom:28px}
.doc h2{font-family:var(--serif);font-weight:600;font-size:1.4rem;margin:38px 0 12px;letter-spacing:-0.01em}
.doc h3{font-size:1.02rem;font-weight:700;margin:22px 0 8px}
.doc p{margin-bottom:14px;color:var(--doc-text,#03045E)}
.doc ul,.doc ol{margin:0 0 16px 22px;color:var(--doc-text,#03045E)}
.doc li{margin-bottom:7px}
.doc strong{font-weight:600;color:var(--text)}
.doc .lead{font-size:1.12rem;color:var(--text);margin-bottom:22px}

.callout{
  background:var(--callout-bg,#CAF0F8);border:1px solid var(--callout-border,rgba(0,119,182,.3));border-radius:var(--radius);
  padding:16px 18px;margin:22px 0;font-size:14px;color:var(--muted);
}
.callout strong{color:var(--saffron-deep)}

.doc-table{width:100%;border-collapse:collapse;margin:16px 0 22px;font-size:14px}
.doc-table th,.doc-table td{border:1px solid var(--border);padding:10px 12px;text-align:left;vertical-align:top}
.doc-table th{background:var(--callout-bg,#CAF0F8);color:var(--saffron-deep);font-weight:700;font-size:var(--fs-cap);letter-spacing:.5px;text-transform:uppercase}
.doc-table td{color:var(--doc-text,#03045E)}

.doc-toc{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:18px 20px;margin-bottom:32px}
.doc-toc-title{font-size:var(--fs-cap);font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--muted);margin-bottom:10px}

.faq-list{max-width:760px;margin:8px 0 0}
.faq-list details{border-bottom:1px solid var(--line)}
.faq-list details summary{list-style:none;cursor:pointer;padding:18px 40px 18px 2px;position:relative;font-family:var(--serif);font-size:1.06rem;font-weight:600;color:var(--text)}
.faq-list details summary::-webkit-details-marker{display:none}
.faq-list details summary::after{content:"+";position:absolute;right:6px;top:50%;transform:translateY(-50%);font-family:var(--sans);font-size:1.4rem;font-weight:400;color:var(--saffron-deep);line-height:1;transition:transform .2s ease}
.faq-list details[open] summary::after{content:"\2013"}
.faq-list .faq-a{padding:0 40px 20px 2px}
.faq-list .faq-a p{color:var(--muted);font-size:.95rem;line-height:1.7;margin:0}
.faq-list .faq-a strong,.faq-list .faq-a em{color:var(--text)}
.doc-toc a{display:block;font-size:14px;padding:3px 0;color:var(--text)}
.doc-toc a:hover{color:var(--saffron-deep);text-decoration:none}

/* ---------- SHARED SITE FOOTER (matches index.html) ---------- */
.site-foot{background:#0B1230;color:#E8ECF5;padding:0;margin:0;border:0}
.site-foot a{color:inherit}
.footer-stripe{display:flex;height:6px;background:linear-gradient(90deg,#03045E,#0077B6,#00B4D8)}
.footer-stripe span{flex:1;background:transparent}
.footer-inner{max-width:var(--wrap);margin:0 auto;padding:clamp(52px,7vw,80px) 24px 36px}
.footer-lead{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:48px}
.footer-lead .fl-mark{font-family:var(--serif);font-size:clamp(1.7rem,3.2vw,2.3rem);font-weight:700;color:#fff}
.footer-lead .fl-tag{font-family:var(--serif);font-style:italic;font-size:16px;color:#90E0EF;margin-top:4px}
/* .footer-lead a.fl-cta, not just .fl-cta: same specificity collision as the
   nav button above:root[data-theme="dark"] a otherwise wins in dark mode
   and the text renders the same cyan as its own background. */
.footer-lead a.fl-cta{font-size:13px;font-weight:700;letter-spacing:.3px;color:#03045E;background:#00B4D8;padding:11px 20px;border-radius:var(--radius);text-decoration:none;white-space:nowrap}
.footer-lead a.fl-cta:hover{text-decoration:none;filter:brightness(1.05)}
.footer-nav{display:flex;gap:clamp(36px,7vw,84px);flex-wrap:wrap;padding-bottom:34px;border-bottom:1px solid rgba(0,180,216,.15)}
.footer-nav .fn-col h4{font-size:var(--fs-cap);letter-spacing:1.4px;text-transform:uppercase;color:#90E0EF;margin-bottom:12px;font-weight:600}
.footer-nav .fn-col a{display:block;font-size:14px;color:#90E0EF;text-decoration:none;padding:5px 0;transition:color .15s ease}
.footer-nav .fn-col a:hover{color:#00B4D8}
.footer-fine{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-top:26px;font-size:var(--fs-cap);color:#90E0EF}

/* legacy doc-foot (still used until every page is migrated) */
.doc-foot{border-top:1px solid var(--border-soft);background:var(--surface)}
.doc-foot-inner{max-width:820px;margin:0 auto;padding:34px 24px}
.doc-foot .row{display:flex;gap:22px;flex-wrap:wrap;font-size:13.5px;margin-bottom:14px}
.doc-foot .row a{color:var(--text)}
.doc-foot .row a:hover{color:var(--saffron-deep);text-decoration:none}
.doc-foot .fine{font-size:var(--fs-cap);color:var(--muted)}
.doc-foot-stripe{display:flex;height:6px;background:linear-gradient(90deg,#03045E,#0077B6,#00B4D8)}
.doc-foot-stripe span{flex:1;background:transparent}

/* Feedback modal, shared across every content page (index.html has its own
   copy of this same markup/behaviour; this is that same form for the pages
   that only load legal.css + site-nav.js, injected by site-nav.js so the
   "Feedback & ideas" links here open a real form instead of mailto:). */
.fbm-overlay{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;background:rgba(10,10,10,.5);padding:16px;overscroll-behavior:contain}
.fbm-overlay.show{display:flex}
.fbm-card{position:relative;background:var(--bg);border:1px solid var(--line);border-radius:var(--radius-lg);width:100%;max-width:440px;padding:26px;box-shadow:0 12px 40px rgba(0,0,0,.2)}
.fbm-card h3{font-family:var(--serif);font-size:21px;margin:0 0 4px}
.fbm-card p.fbm-sub{font-size:13px;color:var(--muted);margin:0 0 16px;line-height:1.55}
.fbm-card label{display:block;font-size:var(--fs-cap);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:12px 0 5px}
.fbm-card select,.fbm-card input,.fbm-card textarea{width:100%;font:inherit;font-size:14px;padding:9px 11px;border:1px solid var(--line);border-radius:var(--radius);background:var(--bg-2);color:var(--text)}
.fbm-card textarea{resize:vertical;min-height:90px}
.fbm-row{display:flex;gap:10px}
.fbm-row>div{flex:1}
.fbm-err{color:var(--error);font-size:var(--fs-cap);min-height:16px;margin-top:8px}
.fbm-send{margin-top:6px;width:100%;background:var(--saffron);color:#03045E;border:none;font:inherit;font-weight:700;font-size:14px;padding:11px;border-radius:var(--radius);cursor:pointer}
.fbm-send:disabled{opacity:.6;cursor:default}
.fbm-x{position:absolute;top:12px;right:14px;background:none;border:none;font-size:22px;line-height:1;color:var(--muted);cursor:pointer;padding:4px}
.fbm-foot{font-size:var(--fs-cap);color:var(--muted);margin-top:12px;text-align:center}
.nav .brand .by{white-space:nowrap}
@media(max-width:480px){.nav .brand{gap:6px}.nav .brand .by{font-size:9px;letter-spacing:.06em}}

/* a11y 2026-10-01: links in running text must not rely on colour alone; CTA links need 4.5:1 on the callout */
main p a:not(.btn){text-decoration:underline;text-underline-offset:2px}
.story-cta a{color:var(--saffron-deep)!important;border-bottom-color:currentColor!important}
:root:not([data-theme="dark"]) .story-affiliate,.site-foot .story-affiliate{color:inherit;opacity:.85}
/* Dark mode: text on the bright cyan buttons/chips is navy, not white (contrast). */
:root[data-theme="dark"] .btn-solid,:root[data-theme="dark"] .fy-chip.on,:root[data-theme="dark"] .btn-primary{color:#03045E}
:root[data-theme="dark"] .story-cta>div{color:#C9D3EA!important}