/* ==========================================================================================
   Al Hayat Solutions | v5 public-site prototype | /assets/site/site.css
   Loads AFTER /assets/site/kit/tokens.css and components.css (reuse .btn, .card, .badge, .chip, .field,
   .input, .select, .textarea, .check, .grid, .row, .eyebrow, .caption, .sr-only, .skip, .icon).
   White page, pale sky top bar and hero panels, warm light beige quiet bands and footer, blue only
   for primary buttons, gold accents from the emblem. Logical properties only (RTL safe). No text < 13px.
   Premium variant: body.theme-global (deep navy + gold, restrained).
   ========================================================================================== */

:root{
  --gold:#D9A23A; --gold-ink:#8A5E10; --gold-soft:#F6E7C4; --gold-line:#E8CF98;
  --navy:#102A43; --navy-2:#173B5C; --navy-3:#1E4A74; --navy-line:rgba(255,255,255,.14); --navy-text:#F4EFE4; --navy-muted:#BFCBD9;
  --wa:#15754A; --wa-bg:#E6F4EC; --wa-line:#BFE0CC;  /* 5.3:1 on white */
  --top-h:68px; --band-y:clamp(44px,7vw,88px); --band-y-sm:clamp(28px,5vw,56px);
  --site-max:1200px; --read-max:66ch;
  --sky-bar-bg:rgba(240,247,254,.92);
}
html{scroll-padding-block-start:calc(var(--top-h) + 12px)}
body{background:var(--canvas);overflow-x:clip}
body.drawer-open{overflow:hidden}
main{display:block;min-inline-size:0}
*,*::before,*::after{min-inline-size:0}
img,video{max-inline-size:100%;block-size:auto}

/* ---------- type scale for the public site (big calm serif headings) ---------- */
h1,.h1{font:var(--fw-semibold) clamp(32px,4.6vw,52px)/1.08 var(--font-serif);letter-spacing:-.02em;color:var(--ink);text-wrap:balance}
h2,.h2{font:var(--fw-semibold) clamp(26px,3vw,36px)/1.15 var(--font-serif);letter-spacing:-.015em;color:var(--ink);text-wrap:balance}
h3,.h3{font:var(--fw-semibold) clamp(20px,2vw,24px)/1.25 var(--font-serif);letter-spacing:-.01em;color:var(--ink)}
h4,.h4{font:var(--fw-semibold) var(--fs-18)/1.3 var(--font-sans);color:var(--ink)}
.lead{font-size:clamp(17px,1.5vw,20px);line-height:1.55;color:var(--ink-2);max-inline-size:var(--read-max)}
.measure{max-inline-size:var(--read-max)}
.eyebrow{display:inline-block;margin-block-end:var(--s-3)}
.eyebrow-gold{color:var(--gold-ink)}
.prose p,.prose li{max-inline-size:var(--read-max)}
.prose ul,.prose ol{margin-block:0 var(--s-4)}
.prose li{margin-block-end:6px}
:root[dir="rtl"] h1,:root[dir="rtl"] h2,:root[dir="rtl"] h3,:root[dir="rtl"] .h1,:root[dir="rtl"] .h2,:root[dir="rtl"] .h3{letter-spacing:0;line-height:1.35}
:root[dir="rtl"] body{line-height:1.75}

/* ---------- layout: container and bands ---------- */
.container{inline-size:100%;max-inline-size:var(--site-max);margin-inline:auto;padding-inline:var(--gutter)}
@media (min-width:720px){.container{padding-inline:var(--gutter-lg)}}
.container-narrow{max-inline-size:860px}
.band{padding-block:var(--band-y)}
.band-sm{padding-block:var(--band-y-sm)}
.band-white{background:var(--canvas)}
.band-sky{background:var(--band-sky);border-block:1px solid var(--line-sky)}
.band-beige{background:var(--sidebar);border-block:1px solid var(--line-beige)}
.band-sky+.band-sky,.band-beige+.band-beige{border-block-start:0}
.band-head{max-inline-size:760px;margin-block-end:clamp(24px,4vw,40px)}
.band-head.center{margin-inline:auto;text-align:center}
.band-head p{margin-block-start:var(--s-3)}
.section-row{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s-4);flex-wrap:wrap;margin-block-end:var(--s-6)}
.stack-lg{display:flex;flex-direction:column;gap:var(--s-6)}
.actions{display:flex;gap:var(--s-3);flex-wrap:wrap;align-items:center}
.actions .btn{flex:0 1 auto}
@media (max-width:520px){.actions .btn{inline-size:100%}}
.grid-auto{display:grid;gap:var(--s-5);grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}
.grid-auto-wide{display:grid;gap:var(--s-5);grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr))}
@media (max-width:860px){.grid-2,.grid-3,.grid-4,.grid-main{grid-template-columns:minmax(0,1fr)}}
@media (min-width:861px) and (max-width:1100px){.grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---------- top bar ---------- */
.skip{inset-inline-start:12px;inset-block-start:12px}
.site-top{position:sticky;inset-block-start:0;z-index:60;background:var(--sky-bar-bg);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-block-end:1px solid var(--line-sky)}
.site-top-in{display:flex;align-items:center;gap:var(--s-4);min-block-size:var(--top-h)}
/* the header is injected by site-chrome.js after the first paint: keep its row (68px + 1px border) so the page does not jump down (CLS) */
#site-header:empty{min-block-size:calc(var(--top-h) + 1px)}
.site-brand{display:inline-flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;border-radius:var(--r-sm);padding:4px 6px;margin-inline-start:-6px;flex:none}
.site-brand:hover{text-decoration:none}
.site-emblem{inline-size:30px;block-size:42px;flex:none;filter:drop-shadow(0 2px 3px rgba(74,56,32,.14))}
.site-wordmark{display:flex;flex-direction:column;line-height:1}
.site-wordmark-name{font:var(--fw-semibold) 19px/1 var(--font-serif);letter-spacing:.09em;text-transform:uppercase;color:var(--ink)}
.site-wordmark-sub{font:var(--fw-semibold) 13px/1 var(--font-sans);letter-spacing:.18em;text-transform:uppercase;color:var(--gold-ink);margin-block-start:4px}
:root[dir="rtl"] .site-wordmark-sub{letter-spacing:.06em}
.site-nav{margin-inline-start:var(--s-4);display:none}
.site-nav-list{list-style:none;margin:0;padding:0;display:flex;gap:2px}
.nav-link{display:inline-flex;align-items:center;min-block-size:44px;padding:0 13px;border-radius:var(--r-pill);font-weight:var(--fw-medium);font-size:var(--fs-15);color:var(--ink-2);text-decoration:none;white-space:nowrap;transition:background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease)}
.nav-link:hover{background:var(--hover-sky);color:var(--ink);text-decoration:none}
.nav-link[aria-current="page"]{background:var(--white);color:var(--primary-ink);box-shadow:var(--shadow-1);font-weight:var(--fw-semibold)}
.site-top-actions{margin-inline-start:auto;display:flex;align-items:center;gap:8px}
.lang-wrap{position:relative}
.lang-btn,.menu-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-block-size:44px;min-inline-size:44px;padding:0 12px;border-radius:var(--r-pill);background:var(--white);border:1px solid var(--line-sky);color:var(--ink-2);font-weight:var(--fw-semibold);font-size:var(--fs-14);transition:background var(--dur-fast) var(--ease)}
.lang-btn:hover,.menu-btn:hover{background:var(--sky)}
.lang-btn[aria-expanded="true"]{background:var(--sky);border-color:var(--info-line)}
.lang-cur{display:none}
.lang-code{display:inline;letter-spacing:.04em}
.lang-menu{position:absolute;inset-inline-end:0;inset-block-start:calc(100% + 8px);list-style:none;margin:0;padding:6px;min-inline-size:200px;background:var(--white);border:1px solid var(--border);border-radius:var(--r-md);box-shadow:var(--shadow-3);z-index:70}
.lang-menu[hidden]{display:none}
.lang-item{display:flex;inline-size:100%;align-items:center;justify-content:space-between;gap:10px;min-block-size:44px;padding:0 12px;border-radius:var(--r-sm);font-size:var(--fs-15);font-weight:var(--fw-medium);color:var(--ink);text-align:start}
.lang-item:hover{background:var(--card-2)}
.lang-item[aria-current="true"]{background:var(--sky);color:var(--primary-ink);font-weight:var(--fw-semibold)}
.lang-item[aria-current="true"]::after{content:"";inline-size:8px;block-size:8px;border-radius:50%;background:var(--primary);flex:none}
.wa-pill{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-block-size:44px;min-inline-size:44px;padding:0 14px;border-radius:var(--r-pill);background:var(--white);border:1px solid var(--wa-line);color:var(--wa);font-weight:var(--fw-semibold);font-size:var(--fs-14);text-decoration:none;white-space:nowrap;transition:background var(--dur-fast) var(--ease)}
.wa-pill .icon{color:var(--wa)}
.wa-pill:hover{background:var(--wa-bg);text-decoration:none}
.wa-pill span{display:none}
.signin-btn{display:none;align-items:center;min-block-size:44px;padding:0 16px;border-radius:var(--r-pill);background:var(--primary);color:var(--on-solid);font-weight:var(--fw-semibold);font-size:var(--fs-14);text-decoration:none;white-space:nowrap;transition:background var(--dur-fast) var(--ease)}
.signin-btn:hover{background:var(--primary-hover);color:var(--on-solid);text-decoration:none}
@media (min-width:640px){.signin-btn{display:inline-flex}}
/* a signed-in visitor: the one clear way back to the portal, at the top, on every screen size (public/assets/site/site-chrome.js paintHello) */
.signin-btn.is-in{display:inline-flex;gap:8px;box-shadow:var(--shadow-1,0 2px 10px rgb(36 87 214 / .28))}
.signin-btn.is-in::after{content:"\2192";font-size:1.15em;line-height:1}
[dir="rtl"] .signin-btn.is-in::after{content:"\2190"}
/* on a phone the header has no room: the pill gives way to a slim bar under the header ("Hello, Name" and the same button) */
.site-portal-bar{display:none}
@media (max-width:639px){
  .signin-btn.is-in{display:none}
  body.is-signed-in .site-portal-bar{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);padding:6px var(--s-4);background:var(--sky);border-block-end:1px solid var(--line)}
  .site-portal-bar-hi{min-inline-size:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--fs-14);font-weight:var(--fw-semibold);color:var(--ink)}
  .site-portal-bar .signin-btn{display:inline-flex;flex:none}
}
/* the portal button is wider than "Sign in": between 1000 and 1099px the menu moves into the phone menu instead of the links running into each other */
@media (min-width:1000px) and (max-width:1099.98px){body.is-signed-in .site-nav{display:none}body.is-signed-in .menu-btn{display:inline-flex}}
@media (prefers-reduced-motion:no-preference){.signin-btn.is-in::after{transition:transform var(--dur-fast) var(--ease)}.signin-btn.is-in:hover::after{transform:translateX(3px)}[dir="rtl"] .signin-btn.is-in:hover::after{transform:translateX(-3px)}}
.site-drawer-cta{display:block;text-align:center;margin-block:12px}
.theme-global .signin-btn{background:var(--gold,#d4af37);color:var(--navy,#0b1b33)}
.menu-btn{padding:0}
/* both icon buttons are exactly 44px tall in every header */
.menu-btn,.theme-top-btn{box-sizing:border-box;block-size:44px;min-block-size:44px;flex:none}
@media (min-width:1000px){
  .site-nav{display:block}
  .menu-btn{display:none}
  .lang-cur{display:inline}
  .lang-code{display:none}
  .wa-pill span{display:inline}
}
@media (min-width:1000px) and (max-width:1120px){.nav-link{padding:0 10px;font-size:var(--fs-14)}}
/* QA 2026-10-10: the right-hand group (language, WhatsApp, account) never shrinks or overlaps; the menu gives way instead, and the signed-in
   "Hello, name" collapses to the round initials while the row is tight (1000 to 1439px). */
.site-top-actions{flex:none;gap:var(--s-2)}
.site-nav{flex:0 1 auto;min-inline-size:0}
.lang-wrap,.wa-pill,.signin-btn,.site-top-actions .acct{flex:none}
@media (min-width:1000px) and (max-width:1439.98px){
  .site-top-actions .acct-hi{display:none}
  .site-top-actions .acct-btn,:root[dir="rtl"] .site-top-actions .acct-btn{padding:4px}
}

/* ---------- phone drawer ---------- */
.drawer-backdrop{position:fixed;inset:0;background:var(--scrim);z-index:80;backdrop-filter:blur(2px)}
.drawer-backdrop[hidden]{display:none}
.site-drawer{position:fixed;inset-block:0;inset-inline-end:0;inline-size:min(360px,92vw);background:var(--canvas);z-index:90;display:flex;flex-direction:column;gap:var(--s-4);padding:var(--s-4) var(--s-5) var(--s-6);box-shadow:var(--shadow-3);overflow-y:auto;animation:drawer-in var(--dur) var(--ease)}
.site-drawer[hidden]{display:none}
@keyframes drawer-in{from{transform:translateX(12%);opacity:0}to{transform:none;opacity:1}}
:root[dir="rtl"] .site-drawer{animation-name:drawer-in-rtl}
@keyframes drawer-in-rtl{from{transform:translateX(-12%);opacity:0}to{transform:none;opacity:1}}
.site-drawer-head{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);min-block-size:var(--top-h)}
.drawer-close{inline-size:42px;block-size:42px;border-radius:var(--r-pill);display:grid;place-items:center;background:var(--card-2);color:var(--ink-2)}
.site-drawer-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.site-drawer-list .nav-link{display:flex;min-block-size:48px;font-size:var(--fs-18);border-radius:var(--r-sm)}
.site-drawer-list .nav-link[aria-current="page"]{background:var(--sky);box-shadow:none}
.site-drawer-label{font-size:var(--fs-14);font-weight:var(--fw-semibold);color:var(--muted);margin:var(--s-2) 0 0}
.site-drawer-langs{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.lang-chip[aria-current="true"]{background:var(--sky);border-color:var(--primary);color:var(--primary-ink)}
.site-drawer-foot{margin-block-start:auto;display:flex;flex-direction:column;gap:var(--s-3);padding-block-start:var(--s-4);border-block-start:1px solid var(--border)}
.site-drawer-signin{font-size:var(--fs-15);color:var(--muted);text-align:center}

/* ---------- heroes ---------- */
.hero{position:relative;overflow:hidden;background:var(--hero-bg);border-block-end:1px solid var(--line-sky)}
.hero-in{position:relative;display:grid;gap:clamp(24px,4vw,48px);padding-block:clamp(40px,7vw,96px);align-items:center}
.hero-copy{max-inline-size:640px;display:flex;flex-direction:column;gap:var(--s-5)}
.hero-copy .lead{margin:0}
.hero-copy .actions{margin-block-start:var(--s-2)}
.hero-note{font-size:var(--fs-14);color:var(--muted);display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.hero-panel{position:relative}
@media (min-width:900px){.hero-in{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)}.hero-in.hero-wide{grid-template-columns:minmax(0,1fr)}}
/* video hero: poster on phones / reduced motion / Save-Data, muted loop on wide screens */
.hero-video-wrap{position:relative;border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--shadow-3);aspect-ratio:16/10;background:var(--sky-2);isolation:isolate}
.hero-video-wrap.ar-16-9{aspect-ratio:16/9}
.hero-video,.hero-video-wrap img{position:absolute;inset:0;inline-size:100%;block-size:100%;object-fit:cover;display:block}
.hero-video-wrap::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(16,42,67,0) 55%,rgba(16,42,67,.35) 100%);pointer-events:none}
.hero-video-caption{position:absolute;inset-inline:12px;inset-block-end:12px;z-index:2;margin:0;font-size:var(--fs-13);display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}
.hero-video-caption>span:not(.badge){background:var(--navy);color:#fff;border-radius:var(--r-pill);padding:4px 10px;line-height:1.3}
.hero-video-caption a{color:#fff}
/* full-bleed video hero (copy over footage): keep text readable with a scrim */
.hero-bleed{position:relative;min-block-size:min(72vh,640px);display:grid;align-items:end;color:#fff;background:var(--navy);isolation:isolate}
.hero-bleed .hero-video,.hero-bleed>img{position:absolute;inset:0;inline-size:100%;block-size:100%;object-fit:cover;z-index:0}
.hero-bleed::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(16,42,67,.15) 0%,rgba(16,42,67,.72) 100%)}
.hero-bleed .container{position:relative;z-index:2;padding-block:clamp(40px,7vw,80px)}
.hero-bleed h1,.hero-bleed .lead,.hero-bleed p{color:#fff}
.hero-bleed .lead{color:rgba(255,255,255,.9)}
/* split hero: copy + a demo card / screenshot */
.hero-split .hero-panel .card{box-shadow:var(--shadow-3)}
.hero-figure{border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--shadow-3);border:1px solid var(--line-sky);background:var(--white)}
.hero-figure img{inline-size:100%;display:block}
.hero-figure figcaption{padding:10px 14px;font-size:var(--fs-13);color:var(--muted);border-block-start:1px solid var(--border);display:flex;gap:8px;align-items:center;flex-wrap:wrap}

/* ---------- media band (footage with a caption, between sections) ---------- */
.media-band{position:relative;overflow:hidden;isolation:isolate;background:var(--navy)}
.media-band .hero-video,.media-band>img{position:absolute;inset:0;inline-size:100%;block-size:100%;object-fit:cover;z-index:0}
.media-band-in{position:relative;z-index:2;min-block-size:min(46vh,420px);display:grid;align-items:end;color:#fff;padding-block:clamp(32px,5vw,56px)}
.media-band::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(16,42,67,.1) 0%,rgba(16,42,67,.7) 100%)}
.media-band h2,.media-band p{color:#fff}
.media-band .caption{color:rgba(255,255,255,.8)}
.media-credit{font-size:var(--fs-13);color:rgba(255,255,255,.8)}
.media-credit a{color:#fff}

/* ---------- cards and feature grid ---------- */
.card{border-radius:var(--r-lg)}
.card-xl{padding:clamp(20px,3vw,32px);border-radius:var(--r-xl)}
.card-beige{background:var(--sidebar);border-color:var(--line-beige);box-shadow:none}
.card-sky{box-shadow:none}
.card-navy{background:var(--navy);color:var(--navy-text);border-color:var(--navy)}
.card-navy h2,.card-navy h3,.card-navy h4,.card-navy p{color:var(--navy-text)}
.card-navy .muted,.card-navy .caption{color:var(--navy-muted)}
.card-link{display:block;color:inherit;text-decoration:none;transition:transform var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease)}
.card-link:hover{text-decoration:none;transform:translateY(-2px);box-shadow:var(--shadow-2)}
.card-link:focus-visible{box-shadow:var(--shadow-focus)}
.feature-grid{display:grid;gap:var(--s-5);grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr))}
.feature{display:flex;flex-direction:column;gap:var(--s-3);padding:var(--s-6);background:var(--card);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow-1)}
.feature-icon{inline-size:44px;block-size:44px;border-radius:14px;display:grid;place-items:center;background:var(--sky);color:var(--primary-ink);flex:none}
.feature-icon .icon{inline-size:22px;block-size:22px}
.feature-icon-gold{background:var(--gold-soft);color:var(--gold-ink)}
.feature-icon-beige{background:var(--card-2);color:var(--svc-business)}
.feature h3{font-size:var(--fs-20)}
.feature p{color:var(--ink-2);margin:0}
.feature .link-btn{margin-block-start:auto;align-self:flex-start}
.feature-row{display:flex;gap:var(--s-4);align-items:flex-start}
.feature-row .feature-icon{margin-block-start:2px}
/* service tiles (home) */
.svc-tile{position:relative;display:flex;flex-direction:column;gap:var(--s-3);padding:var(--s-6);background:var(--card);border:1px solid var(--border);border-radius:var(--r-xl);box-shadow:var(--shadow-1);min-block-size:220px;color:inherit;text-decoration:none;border-block-start:4px solid var(--svc,var(--primary))}
.svc-tile:hover{text-decoration:none;box-shadow:var(--shadow-2);transform:translateY(-2px)}
.svc-tile.svc-pathways{--svc:var(--svc-study)}.svc-tile.svc-global{--svc:var(--navy)}.svc-tile.svc-careers{--svc:var(--svc-work)}.svc-tile.svc-business{--svc:var(--svc-business)}.svc-tile.svc-tools{--svc:var(--ok)}
.svc-tile .badge{align-self:flex-start}
.btn-gold{background:var(--gold);color:var(--navy);box-shadow:0 8px 18px -10px rgba(217,162,58,.8)}
.btn-gold:hover{background:#C9922F;color:var(--navy)}
.card-navy .eyebrow{color:var(--gold)}
.svc-tile h3{font-size:var(--fs-24)}
.svc-tile p{color:var(--ink-2);margin:0}
.svc-tile .svc-tile-foot{margin-block-start:auto;display:flex;justify-content:space-between;align-items:center;gap:8px;font-weight:var(--fw-semibold);color:var(--primary-ink)}

/* ---------- badges: Sample, Example, By quote, Free, Live demo ---------- */
.badge{block-size:auto;min-block-size:24px;line-height:1.1;padding-block:2px}
.badge-sample{background:var(--warn-bg);color:var(--warn-ink);border-color:var(--warn-line)}
.badge-example{background:var(--gold-soft);color:var(--gold-ink);border-color:var(--gold-line)}
.badge-quote{background:var(--card-2);color:var(--ink-2);border-color:var(--border-strong)}
.badge-free{background:var(--ok-bg);color:var(--ok-ink);border-color:var(--ok-line)}
.badge-demo{background:var(--sky);color:var(--primary-ink);border-color:var(--info-line)}
.badge-gold{background:var(--gold);color:var(--navy);border-color:var(--gold)}
.badge-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.proto-tag{position:fixed;inset-block-end:12px;inset-inline-start:12px;inset-inline-end:auto;inline-size:max-content;z-index:70;font-size:var(--fs-13);font-weight:var(--fw-semibold);background:var(--warn-bg);color:var(--warn-ink);border:1px solid var(--warn-line);border-radius:var(--r-pill);padding:5px 11px;box-shadow:var(--shadow-1);pointer-events:none;max-inline-size:calc(100vw - 140px)}
/* source + last-checked line under any number from the repo data */
.source{font-size:var(--fs-13);color:var(--muted);display:inline-flex;gap:6px;flex-wrap:wrap;align-items:center}
.source a{color:var(--muted);text-decoration:underline;text-underline-offset:2px}
.source .icon{inline-size:14px;block-size:14px}
.source-block{margin-block-start:var(--s-3);padding-block-start:var(--s-3);border-block-start:1px dashed var(--border-strong)}

/* ---------- price ladder and price table ---------- */
.price-hook{display:grid;gap:var(--s-5);align-items:start}
@media (min-width:900px){.price-hook{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr)}}
.price-big{font:var(--fw-semibold) clamp(40px,6vw,64px)/1 var(--font-serif);letter-spacing:-.03em;color:var(--ink);font-variant-numeric:tabular-nums}
.price-big small{font:var(--fw-medium) var(--fs-16)/1.2 var(--font-sans);color:var(--muted);letter-spacing:0;margin-inline-start:6px}
.price-line{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.price-line .price{font:var(--fw-semibold) var(--fs-28)/1 var(--font-serif);font-variant-numeric:tabular-nums}
.price-line .per{font-size:var(--fs-14);color:var(--muted)}
.ladder{display:grid;gap:var(--s-4);grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr))}
.ladder-tier{display:flex;flex-direction:column;gap:var(--s-3);padding:var(--s-5);background:var(--card);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow-1);position:relative}
.ladder-tier.is-featured{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft),var(--shadow-2)}
.ladder-tier .eyebrow{margin:0}
.ladder-tier .price{font:var(--fw-semibold) var(--fs-32)/1 var(--font-serif);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.ladder-tier .price-sub{font-size:var(--fs-14);color:var(--muted)}
.ladder-tier ul{margin:0;padding-inline-start:1.1em;color:var(--ink-2);font-size:var(--fs-15);display:flex;flex-direction:column;gap:4px}
.ladder-tier .btn{margin-block-start:auto}
.price-table{inline-size:100%;border-collapse:separate;border-spacing:0;font-size:var(--fs-15);background:var(--card);border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden}
.price-table th,.price-table td{padding:12px 14px;text-align:start;border-block-end:1px solid var(--border);vertical-align:top}
.price-table thead th{background:var(--card-2);font-size:var(--fs-13);font-weight:var(--fw-semibold);letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--muted)}
:root[dir="rtl"] .price-table thead th{text-transform:none;letter-spacing:0}
.price-table tbody tr:last-child td{border-block-end:0}
.price-table .num{text-align:end;white-space:nowrap}
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--r-lg)}
.refund-lines{display:grid;gap:10px;margin:0;padding:0;list-style:none}
.refund-lines li{display:flex;gap:10px;align-items:flex-start;font-size:var(--fs-15);color:var(--ink-2)}
.refund-lines .icon{color:var(--ok);flex:none;margin-block-start:3px}
.refund-box{background:var(--ok-bg);border:1px solid var(--ok-line);border-radius:var(--r-md);padding:var(--s-4) var(--s-5)}
.refund-box h3,.refund-box h4{font-size:var(--fs-16);font-family:var(--font-sans);margin-block-end:8px;color:var(--ok-ink)}

/* ---------- steps ---------- */
.steps{counter-reset:step;list-style:none;margin:0;padding:0;display:grid;gap:var(--s-4)}
.steps>li{counter-increment:step;display:grid;grid-template-columns:44px minmax(0,1fr);gap:var(--s-4);align-items:start}
.steps>li::before{content:counter(step);inline-size:44px;block-size:44px;border-radius:50%;display:grid;place-items:center;background:var(--sky);color:var(--primary-ink);font:var(--fw-semibold) var(--fs-18)/1 var(--font-serif);border:1px solid var(--info-line)}
.steps h3{font-size:var(--fs-20);margin-block-end:4px}
.steps p{color:var(--ink-2);margin:0}
.steps-row{grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}
.steps-row>li{grid-template-columns:minmax(0,1fr);gap:var(--s-3)}
.steps-gold>li::before{background:var(--gold-soft);color:var(--gold-ink);border-color:var(--gold-line)}

/* ---------- FAQ (details/summary) ---------- */
.faq{display:flex;flex-direction:column;gap:10px;max-inline-size:860px}
.faq details{background:var(--card);border:1px solid var(--border);border-radius:var(--r-md);box-shadow:var(--shadow-1);overflow:hidden}
.faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);padding:14px 18px;font-weight:var(--fw-semibold);font-size:var(--fs-16);color:var(--ink);min-block-size:52px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";inline-size:10px;block-size:10px;border-inline-end:2px solid var(--muted);border-block-end:2px solid var(--muted);transform:rotate(45deg);flex:none;margin-inline-end:4px;transition:transform var(--dur-fast) var(--ease)}
.faq details[open] summary::after{transform:rotate(225deg)}
.faq summary:hover{background:var(--card-2)}
.faq summary:focus-visible{box-shadow:inset var(--shadow-focus)}
.faq details>div{padding:0 18px 16px;color:var(--ink-2)}
.faq details>div p{max-inline-size:var(--read-max)}

/* ---------- callouts ---------- */
.callout{display:flex;gap:var(--s-3);align-items:flex-start;padding:var(--s-4) var(--s-5);border-radius:var(--r-md);background:var(--sky);border:1px solid var(--info-line);color:var(--ink)}
.callout .icon{flex:none;margin-block-start:2px;color:var(--primary-ink)}
.callout p{margin:0}
.callout-warn{background:var(--warn-bg);border-color:var(--warn-line)}
.callout-warn .icon{color:var(--warn-ink)}
.callout-ok{background:var(--ok-bg);border-color:var(--ok-line)}
.callout-ok .icon{color:var(--ok-ink)}
.callout-beige{background:var(--sidebar);border-color:var(--line-beige)}
.callout-beige .icon{color:var(--svc-business)}
.callout-gold{background:var(--gold-soft);border-color:var(--gold-line)}
.callout-gold .icon{color:var(--gold-ink)}
.callout-honest{border-inline-start:4px solid var(--warn)}
.notlaw{font-size:var(--fs-14);color:var(--muted);max-inline-size:var(--read-max)}

/* ---------- code box (Pathways and Global only) ---------- */
.code-box{background:var(--card);border:1px solid var(--border);border-radius:var(--r-xl);box-shadow:var(--shadow-2);padding:clamp(20px,3vw,28px);display:flex;flex-direction:column;gap:var(--s-3);max-inline-size:520px}
.code-box h2,.code-box h3{font-size:var(--fs-24)}
.code-box-lead{color:var(--ink-2);margin:0}
.code-box-row{display:flex;gap:10px;flex-wrap:wrap}
.code-box-row .input{flex:1 1 180px;font-family:var(--font-mono);letter-spacing:.06em;text-transform:uppercase}
:root[dir="rtl"] .code-box-row .input{text-transform:none;letter-spacing:0}
.code-box-row .btn{flex:0 0 auto}
@media (max-width:520px){.code-box-row .btn{inline-size:100%}}
.code-box-none{display:flex;gap:8px;flex-wrap:wrap;align-items:center;font-size:var(--fs-15);color:var(--ink-2);margin:0}
.code-box-none a{display:inline-flex;align-items:center;gap:6px;font-weight:var(--fw-semibold);color:var(--wa)}
.code-box-none .icon{inline-size:18px;block-size:18px}
.code-box .hint{font-size:var(--fs-13);color:var(--muted);margin:0}

/* ---------- forms (demos) ---------- */
.form-grid{display:grid;gap:var(--s-4);grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}
.form-grid .span-2{grid-column:1/-1}
.form-foot{display:flex;gap:var(--s-3);align-items:center;flex-wrap:wrap;margin-block-start:var(--s-2)}
.input,.select,.textarea{border-radius:var(--r-sm)}
.textarea{min-block-size:120px;resize:vertical}
:root[dir="rtl"] .select{background-position:left 14px center}
.fieldset{border:0;padding:0;margin:0;min-inline-size:0}
.fieldset legend{font-size:var(--fs-14);font-weight:var(--fw-semibold);color:var(--ink-2);padding:0;margin-block-end:8px}
.choice-grid{display:grid;gap:8px;grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr))}
.choice{display:flex;align-items:center;gap:10px;min-block-size:46px;padding:0 12px;border-radius:var(--r-sm);border:1px solid var(--border-strong);background:var(--card);cursor:pointer;font-size:var(--fs-15)}
.choice input{accent-color:var(--primary);inline-size:18px;block-size:18px;margin:0;flex:none}
.choice:has(input:checked){border-color:var(--primary);background:var(--sky)}
.choice:has(input:focus-visible){box-shadow:var(--shadow-focus)}
.range{inline-size:100%;accent-color:var(--primary)}
.seg-switch{display:inline-flex;gap:2px;background:var(--card-2);border:1px solid var(--border);border-radius:var(--r-pill);padding:3px}
.seg-switch button{min-block-size:44px;padding:0 14px;border-radius:var(--r-pill);font-size:var(--fs-14);font-weight:var(--fw-semibold);color:var(--ink-2)}
.seg-switch button[aria-pressed="true"],.seg-switch button[aria-current="true"]{background:var(--white);color:var(--primary-ink);box-shadow:var(--shadow-1)}

/* ---------- result panel (every demo ends here) ---------- */
.result{position:relative;background:var(--card);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow-2);padding:var(--s-5);display:flex;flex-direction:column;gap:var(--s-4)}
.result[hidden]{display:none}
.result-head{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);flex-wrap:wrap}
.result-head h3{font-size:var(--fs-20)}
[hidden]{display:none!important} /* an element the page script hides stays hidden whatever display its class sets (the "fill in the form" line must go once a result shows) */
.result-empty{color:var(--muted);font-size:var(--fs-15);padding:var(--s-4);text-align:center;border:1px dashed var(--border-strong);border-radius:var(--r-md)}
.result-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.result-item{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 12px;padding:12px 14px;border:1px solid var(--border);border-radius:var(--r-md);background:var(--card-2)}
.result-item h4{font-size:var(--fs-16);margin:0}
.result-item p{margin:0;font-size:var(--fs-14);color:var(--ink-2);grid-column:1/-1}
.result-item .badge{align-self:start}
.result-total{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s-3);padding-block-start:var(--s-3);border-block-start:1px solid var(--border);font-weight:var(--fw-semibold)}
.result-total .price{font:var(--fw-semibold) var(--fs-28)/1 var(--font-serif);font-variant-numeric:tabular-nums}
.checklist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.checklist li{display:flex;gap:10px;align-items:flex-start;font-size:var(--fs-15)}
.checklist .icon{flex:none;margin-block-start:3px}
.checklist .is-ok .icon{color:var(--ok)}
.checklist .is-warn .icon{color:var(--warn-ink)}
.checklist .is-no .icon{color:var(--danger-ink)}
.odds{display:inline-flex;align-items:center;gap:8px;font-size:var(--fs-14);font-weight:var(--fw-semibold);border-radius:var(--r-pill);padding:3px 10px;border:1px solid var(--border)}
.odds-low{background:var(--danger-bg);color:var(--danger-ink);border-color:var(--danger-line)}
.odds-mid{background:var(--warn-bg);color:var(--warn-ink);border-color:var(--warn-line)}
.odds-good{background:var(--ok-bg);color:var(--ok-ink);border-color:var(--ok-line)}
.odds-na{background:var(--card-2);color:var(--muted)}

/* ---------- device frame for mock previews (home instant preview, Studio Lab) ---------- */
.device{background:var(--white);border:1px solid var(--border-strong);border-radius:22px;box-shadow:var(--shadow-3);overflow:hidden;max-inline-size:420px;margin-inline:auto}
.device-bar{display:flex;align-items:center;gap:8px;padding:8px 12px;background:var(--card-2);border-block-end:1px solid var(--border);font-size:var(--fs-13);color:var(--muted)}
.device-bar i{inline-size:10px;block-size:10px;border-radius:50%;background:var(--border-strong);display:inline-block}
.device-url{flex:1;background:var(--white);border:1px solid var(--border);border-radius:var(--r-pill);padding:3px 10px;font-size:var(--fs-13);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;direction:ltr}
.device-screen{padding:14px;display:flex;flex-direction:column;gap:12px;min-block-size:300px;background:var(--canvas)}
.device-wide{max-inline-size:none;border-radius:var(--r-lg)}

/* ---------- screenshot proof (unused: screenshots are not shipped) ---------- */
.shot{border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;background:var(--white);box-shadow:var(--shadow-2)}
.shot img{inline-size:100%;display:block}
.shot-crop img{max-block-size:420px;object-fit:cover;object-position:top}
.shot figcaption{padding:10px 14px;font-size:var(--fs-14);color:var(--muted);border-block-start:1px solid var(--border)}

/* ---------- footer (beige) ---------- */
.site-footer{background:var(--sidebar);border-block-start:1px solid var(--line-beige);padding-block:clamp(36px,5vw,64px) 96px;margin-block-start:var(--band-y);color:var(--ink-2);font-size:var(--fs-15)}
.site-foot-top{display:grid;gap:var(--s-8)}
@media (min-width:900px){.site-foot-top{grid-template-columns:minmax(0,1.1fr) minmax(0,2.4fr)}}
.site-foot-brand{display:flex;flex-direction:column;gap:var(--s-4);align-items:flex-start}
.site-foot-promise{max-inline-size:34ch;margin:0;color:var(--ink-2)}
.wa-pill-foot span{display:inline}
.site-foot-cols{display:grid;gap:var(--s-6);grid-template-columns:repeat(auto-fit,minmax(min(100%,160px),1fr))}
.site-foot-h{font:var(--fw-semibold) var(--fs-14)/1.2 var(--font-sans);letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--muted);margin-block-end:12px}
:root[dir="rtl"] .site-foot-h{text-transform:none;letter-spacing:0}
.site-foot-col ul{display:flex;flex-direction:column;gap:8px}
.site-foot-col a{color:var(--ink);text-decoration:none;display:inline-flex;align-items:center;min-block-size:28px}
.site-foot-col a:hover{text-decoration:underline}
/* QA 2026-10-10: Bengali footer words are short (the Pathways link is 22px wide): a 44px tap target */
:lang(bn) .site-foot-col a{min-block-size:44px;min-inline-size:44px}
.site-foot-quiet a{color:var(--ink-2)}
.site-foot-facts{margin:0;display:grid;gap:6px;font-size:var(--fs-14)}
.site-foot-facts dt{font-weight:var(--fw-semibold);color:var(--muted)}
.site-foot-facts dd{margin:0 0 6px;color:var(--ink);overflow-wrap:anywhere}
.site-foot-notlaw{margin:var(--s-8) 0 0;padding-block-start:var(--s-5);border-block-start:1px solid var(--line-beige);font-size:var(--fs-14);color:var(--muted);max-inline-size:90ch}
.site-foot-social{display:flex;gap:var(--s-3);flex-wrap:wrap;margin:0;padding:0;list-style:none}
.site-foot-social a{display:inline-flex;align-items:center;min-block-size:44px;color:inherit;text-decoration:none}
.site-foot-social a:hover,.site-foot-social a:focus-visible{text-decoration:underline}
.site-foot-bottom{display:flex;justify-content:space-between;align-items:center;gap:var(--s-3);flex-wrap:wrap;margin-block-start:var(--s-5);font-size:var(--fs-14);color:var(--muted)}
.site-foot-copy{margin:0}

/* ---------- premium variant: Global (deep navy + gold, restrained) ---------- */
.theme-global{--site-ink-on-dark:var(--navy-text)}
.theme-global .site-top{background:rgba(16,42,67,.94);border-block-end-color:rgba(217,162,58,.35)}
.theme-global .site-wordmark-name{color:var(--navy-text)}
.theme-global .site-wordmark-sub{color:var(--gold)}
.theme-global .site-brand{color:var(--navy-text)}
.theme-global .nav-link{color:var(--navy-muted)}
.theme-global .nav-link:hover{background:rgba(255,255,255,.08);color:#fff}
.theme-global .nav-link[aria-current="page"]{background:rgba(217,162,58,.16);color:#F3CF86;box-shadow:none}
.theme-global .lang-btn,.theme-global .menu-btn,.theme-global .wa-pill{background:rgba(255,255,255,.06);border-color:var(--navy-line);color:var(--navy-text)}
.theme-global .lang-btn:hover,.theme-global .menu-btn:hover,.theme-global .wa-pill:hover{background:rgba(255,255,255,.12)}
.theme-global .wa-pill .icon{color:#7FD3A4}
.theme-global .skip{background:var(--gold);color:var(--navy)}
.theme-global .hero,.theme-global .hero-global{background:radial-gradient(120% 90% at 85% 0%,#193C5F 0%,var(--navy-2) 40%,var(--navy) 100%);border-block-end:1px solid rgba(217,162,58,.3);color:var(--navy-text)}
.theme-global .hero h1,.theme-global .hero .lead,.theme-global .hero p{color:var(--navy-text)}
.theme-global .hero .lead{color:var(--navy-muted)}
.theme-global .hero .eyebrow{color:var(--gold)}
.theme-global .hero .hero-note{color:var(--navy-muted)}
.theme-global .hero .btn-secondary{background:transparent;color:var(--navy-text);border-color:rgba(255,255,255,.35)}
.theme-global .hero .btn-secondary:hover{background:rgba(255,255,255,.08)}
.theme-global .btn-primary{background:var(--gold);color:var(--navy);box-shadow:0 8px 18px -10px rgba(217,162,58,.8)}
.theme-global .btn-primary:hover{background:#C9922F}
.theme-global .band-sky{background:linear-gradient(180deg,#F4F0E6 0%,#FBF8F1 100%);border-color:#E8DFCB}
.theme-global .band-beige{background:#F4EFE3}
.theme-global .eyebrow{color:var(--gold-ink)}
.theme-global .card-navy .eyebrow,.card-navy .eyebrow{color:var(--gold)}
.theme-global .feature-icon{background:var(--gold-soft);color:var(--gold-ink)}
.theme-global .steps>li::before{background:var(--navy);color:var(--gold);border-color:var(--navy)}
.theme-global .code-box{border-color:var(--gold-line);box-shadow:0 0 0 4px rgba(217,162,58,.12),var(--shadow-2)}
.theme-global .site-footer{background:var(--navy);border-block-start-color:rgba(217,162,58,.35);color:var(--navy-muted)}
.theme-global .site-footer .site-wordmark-name,.theme-global .site-foot-col a,.theme-global .site-foot-facts dd{color:var(--navy-text)}
.theme-global .site-footer .site-wordmark-sub,.theme-global .site-foot-h{color:var(--gold)}
.theme-global .site-foot-promise,.theme-global .site-foot-notlaw,.theme-global .site-foot-bottom,.theme-global .site-foot-facts dt,.theme-global .site-foot-quiet a{color:var(--navy-muted)}
.theme-global .site-foot-notlaw{border-block-start-color:var(--navy-line)}
.theme-global .site-footer .wa-pill{background:transparent}
.theme-global .site-footer .badge-sample{background:rgba(227,163,58,.18);color:#F1D08A;border-color:rgba(227,163,58,.4)}
.theme-global .site-drawer{background:var(--navy);color:var(--navy-text)}
.theme-global .site-drawer .nav-link{color:var(--navy-text)}
.theme-global .site-drawer .nav-link[aria-current="page"]{background:rgba(217,162,58,.16);color:#F3CF86}
.theme-global .site-drawer .site-wordmark-name{color:var(--navy-text)}
.theme-global .site-drawer .site-wordmark-sub{color:var(--gold)}
.theme-global .site-drawer-label,.theme-global .site-drawer-signin{color:var(--navy-muted)}
.theme-global .site-drawer .chip{background:transparent;color:var(--navy-text);border-color:var(--navy-line)}
.theme-global .site-drawer .chip[aria-current="true"]{background:rgba(217,162,58,.16);border-color:var(--gold);color:#F3CF86}
.theme-global .site-drawer .btn-secondary{background:transparent;color:var(--navy-text);border-color:var(--navy-line)}
.theme-global .site-drawer-foot{border-block-start-color:var(--navy-line)}
.theme-global .drawer-close{background:rgba(255,255,255,.08);color:var(--navy-text)}
.gold-rule{inline-size:56px;block-size:3px;background:var(--gold);border-radius:2px;margin-block:var(--s-3) var(--s-4)}

/* ---------- utilities ---------- */
.mt-0{margin-block-start:0}.mt-2{margin-block-start:var(--s-2)}.mt-4{margin-block-start:var(--s-4)}.mt-6{margin-block-start:var(--s-6)}.mt-8{margin-block-start:var(--s-8)}
.mb-0{margin-block-end:0}.mb-2{margin-block-end:var(--s-2)}.mb-4{margin-block-end:var(--s-4)}.mb-6{margin-block-end:var(--s-6)}
.gap-2{gap:var(--s-2)}.gap-4{gap:var(--s-4)}
.center{text-align:center}
.vis-hidden{visibility:hidden}
.phone-only{display:none}
@media (max-width:719px){.phone-only{display:revert}.wide-only{display:none!important}}
.anchor{scroll-margin-block-start:calc(var(--top-h) + 16px)}
@media (prefers-reduced-motion:reduce){
  .site-drawer{animation:none}
  .card-link,.svc-tile{transition:none}
  .card-link:hover,.svc-tile:hover{transform:none}
}
/* Phones: the fixed tag becomes a slim full-width strip at the very bottom, the page gets room for it, and the bunny sits above it (integration fix 2026-10-01). */
@media (max-width:760px){
  body{padding-block-end:30px}
  .proto-tag{inset-block-end:0;inset-inline-start:0;inset-inline-end:0;inline-size:auto;max-inline-size:none;text-align:center;border-radius:0;border-inline-width:0;border-block-end-width:0;padding:5px 12px;box-shadow:none}
  body .mw{inset-block-end:calc(38px + env(safe-area-inset-bottom,0px))}
}
@media print{.site-top,.site-drawer,.drawer-backdrop,.proto-tag,.mw,.wa-pill{display:none!important}.site-footer{padding-block-end:24px}}

/* Samples link card: points to /business/samples/ (used on business, business-websites, index) */
.sample-cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s-4) var(--s-6);padding:var(--s-5) var(--s-6);background:var(--sky);border:1px solid var(--info-line);border-radius:var(--r-xl)}
.sample-cta-t{flex:1 1 320px;min-inline-size:0}
.sample-cta-h{margin:0 0 var(--s-1);font-family:var(--font-serif);font-size:var(--fs-24);font-weight:var(--fw-semibold);line-height:1.2;color:var(--ink)}
.sample-cta p:not(.sample-cta-h){margin:0;color:var(--ink-2)}
.sample-cta .btn{flex:none}
@media (max-width:560px){.sample-cta .btn{inline-size:100%}}
/* ---- code box feedback (site-chrome.js wireCode) and the signed-in greeting ---- */
.code-box-msg{margin:0;padding:10px 14px;border-radius:var(--r-md,10px);border:1px solid var(--border);font-size:var(--fs-15);line-height:1.5;color:var(--ink)}
.code-box-msg.is-info{background:var(--info-bg);border-color:var(--info-line);color:var(--ink)}
.code-box-msg.is-ok{background:var(--ok-bg);border-color:var(--ok-line);color:var(--ok-ink)}
.code-box-msg.is-error{background:var(--danger-bg);border-color:var(--danger-line);color:var(--danger-ink)}
.code-box-msg[hidden],.code-box-extra[hidden]{display:none}
.code-box-extra{display:flex;flex-wrap:wrap;gap:10px}
.code-box-row .input[aria-invalid="true"]{border-color:var(--danger);box-shadow:0 0 0 3px var(--danger-bg)}
.site-hello{font-size:var(--fs-15);font-weight:var(--fw-semibold);color:var(--ink-2);text-decoration:none;padding:6px 10px;border-radius:var(--r-md,10px);white-space:nowrap;max-inline-size:14ch;overflow:hidden;text-overflow:ellipsis}
.site-hello:hover{color:var(--ink);background:var(--hover)}
@media (max-width:999px){.site-hello{display:none}}

/* ---------- theme menu in the top bar (phone and wide: the one theme control) ---------- */
.theme-wrap{position:relative;display:block}
.theme-top-btn{display:inline-flex;align-items:center;justify-content:center;min-block-size:44px;min-inline-size:44px;border-radius:var(--r-pill);background:var(--white);border:1px solid var(--line-sky);color:var(--ink-2);cursor:pointer;transition:background var(--dur-fast) var(--ease)}
.theme-top-btn:hover,.theme-top-btn[aria-expanded="true"]{background:var(--sky)}
.theme-top-btn .icon{inline-size:22px;block-size:22px}
.theme-menu{min-inline-size:150px}
.theme-menu .lang-item[aria-pressed="true"]{background:var(--sky);color:var(--primary-ink);font-weight:var(--fw-semibold)}
.theme-menu .lang-item[aria-pressed="true"]::after{content:"";inline-size:8px;block-size:8px;border-radius:50%;background:var(--primary);flex:none}

/* ---------- theme control (phone drawer): System / Light / Dark, 44px targets ---------- */
.theme-ctl{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.theme-ctl-label{font-size:var(--fs-14);font-weight:var(--fw-semibold);color:var(--muted)}
.theme-seg{display:inline-flex;gap:2px;background:var(--card-2);border:1px solid var(--border);border-radius:var(--r-pill);padding:3px}
.theme-btn{min-block-size:44px;min-inline-size:44px;padding:0 14px;border-radius:var(--r-pill);border:0;background:transparent;color:var(--ink-2);font:var(--fw-semibold) var(--fs-14)/1 var(--font-sans);cursor:pointer}
.theme-btn:hover{background:var(--hover)}
.theme-btn[aria-pressed="true"]{background:var(--ink);color:var(--on-ink)}
.site-drawer .theme-ctl{flex-direction:column;align-items:stretch;gap:8px}
.site-drawer .theme-ctl-label{margin:0}
.site-drawer .theme-seg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));inline-size:100%}
.site-foot-bottom .theme-ctl{margin-inline-start:auto}

/* ---------- logo: the gold emblem replaces the blue one in the dark theme (the wordmark is text and follows the tokens) ---------- */
.site-emblem-dark{display:none}
:root[data-theme="dark"] .site-emblem{display:none}
:root[data-theme="dark"] .site-emblem-dark{display:block}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .site-emblem{display:none}:root:not([data-theme="light"]) .site-emblem-dark{display:block}}

/* ---------- photos and posters: a slight dim in the dark theme (tokens: --media-dim) ---------- */
.hero-figure img,.shot img,.hero-video-wrap img,.media-band>img{filter:brightness(var(--media-dim))}

/* ---------- phone header: brand, theme, language, WhatsApp, menu all fit one row (375px), in every language ---------- */
@media (max-width:479px){
  .site-top-in{gap:var(--s-2)}
  .site-top-actions{gap:6px;flex:none}
  .site-brand{flex:0 1 auto;min-inline-size:0;gap:6px}
  .site-wordmark{min-inline-size:0}
  .site-wordmark-name{font-size:16px;letter-spacing:.06em}
  .site-wordmark-sub{letter-spacing:.1em}
  .lang-btn{padding:0 10px;gap:4px}
  .lang-btn>.icon:first-child{display:none}
  .wa-pill{padding:0}
  .wa-pill.wa-pill-foot{padding-inline:16px;gap:8px;justify-content:center;white-space:nowrap}
}
@media (max-width:400px){
  .site-wordmark-name{font-size:16px;letter-spacing:.08em}
  .site-wordmark-sub{font-size:13px;letter-spacing:.1em}
  .site-brand{gap:6px}
}
/* the language menu opens toward the screen, never off it (RTL too) */
.lang-menu{max-inline-size:calc(100vw - 24px)}