/* Marinova UI tokens ui-1.0.0-candidate. Generated from scripts/ui-system/tokens.json. */
.ui-page{--ui-font-sans:Outfit,'Helvetica Neue',Arial,sans-serif;--ui-font-serif:Georgia,'Times New Roman',serif;--ui-font-arabic:Tajawal,Outfit,system-ui,sans-serif;--ui-font-cjk:Outfit,'PingFang SC','Hiragino Sans GB','Noto Sans SC','Microsoft YaHei',sans-serif;--ui-font:var(--ui-font-sans);--ui-type-display:clamp(2rem,1.35rem + 2.8vw,3.4rem);--ui-type-h1:clamp(1.9rem,1.4rem + 2vw,2.75rem);--ui-type-h2:clamp(1.45rem,1.2rem + 1vw,1.9rem);--ui-type-h3:1.2rem;--ui-type-lede:1.1rem;--ui-type-body:1rem;--ui-type-small:0.875rem;--ui-type-label:0.72rem;--ui-line-body:1.6;--ui-line-tight:1.2;--ui-space-1:4px;--ui-space-2:8px;--ui-space-3:12px;--ui-space-4:16px;--ui-space-5:24px;--ui-space-6:32px;--ui-space-7:48px;--ui-space-8:64px;--ui-space-9:96px;--ui-container-page:1280px;--ui-container-reading:760px;--ui-container-prose:68ch;--ui-radius-lg:12px;--ui-radius-sm:6px;--ui-radius-pill:999px;--ui-target:44px;--ui-header:66px;--ui-header-mobile:56px;--ui-logo-h:32px;--ui-logo-h-wide:46px;--ui-logo-h-compact:30px;--ui-logo-h-small:28px;--ui-logo-h-footer:36px;--ui-section-feather:32px;--ui-shell-gutter:clamp(18px,4vw,54px);--ui-shell-gutter-mid:clamp(16px,2vw,40px);--ui-shell-gutter-tight:8px;--ui-shell-gutter-small:12px;--ui-z-header:600;--ui-z-popover:620;--ui-z-drawer:700;--ui-z-consent:560;--ui-z-float:500;--ui-motion-fast:160ms;--ui-motion-base:240ms;--ui-gutter:16px;--ui-surface:#F8F6F0;--ui-surface-rgb:248,246,240;--ui-raised:#FFFFFF;--ui-alt:#F2EFE7;--ui-section-alt:#F2EFE7;--ui-cta-band:#0B2234;--ui-cta-band-edge:none;--ui-ink:#0B2234;--ui-ink-hover:#143046;--ui-ink-2:#425466;--ui-gold:#B99762;--ui-gold-text:#80602F;--ui-border:#DDD8CE;--ui-border-strong:#C8C0B2;--ui-panel:#0B2234;--ui-on-panel:rgba(255,255,255,.86);--ui-on-panel-2:rgba(255,255,255,.72);--ui-on-panel-line:rgba(255,255,255,.14);--ui-on-panel-link:rgba(255,255,255,.80);--ui-on-panel-faint:rgba(255,255,255,.50);--ui-on-panel-mark:rgba(255,255,255,.75);--ui-on-ink:#FFFFFF;--ui-on-gold:#0B2234;--ui-gold-hover:#C9A97A;--ui-shadow:rgba(11,34,52,.08);--ui-scrim:rgba(11,34,52,.42);--ui-focus:#0B2234;--ui-info:#1F5A84;--ui-info-bg:#E8F0F7;--ui-success:#2E6B45;--ui-success-bg:#E7F2EA;--ui-warning:#7A5410;--ui-warning-bg:#FBF1DC;--ui-error:#A1261E;--ui-error-bg:#FBE9E7;--ui-wa:#1EAA52;color-scheme:light}
html[data-theme="dark"] .ui-page{--ui-surface:#0A1B29;--ui-surface-rgb:10,27,41;--ui-raised:#0F2536;--ui-alt:#16324A;--ui-section-alt:#0D2233;--ui-cta-band:#081724;--ui-cta-band-edge:linear-gradient(to bottom,rgba(var(--ui-surface-rgb),1) 0%,rgba(var(--ui-surface-rgb),0.96) 12.5%,rgba(var(--ui-surface-rgb),0.84) 25%,rgba(var(--ui-surface-rgb),0.68) 37.5%,rgba(var(--ui-surface-rgb),0.5) 50%,rgba(var(--ui-surface-rgb),0.32) 62.5%,rgba(var(--ui-surface-rgb),0.16) 75%,rgba(var(--ui-surface-rgb),0.04) 87.5%,rgba(var(--ui-surface-rgb),0) 100%);--ui-ink:#EAF1F7;--ui-ink-hover:#D7E3EC;--ui-ink-2:#A9BDD0;--ui-gold:#C8A97A;--ui-gold-text:#D9B981;--ui-border:#22384C;--ui-border-strong:#33506B;--ui-panel:#081724;--ui-on-panel:rgba(255,255,255,.86);--ui-on-panel-2:rgba(255,255,255,.72);--ui-on-panel-line:rgba(255,255,255,.14);--ui-on-panel-link:rgba(255,255,255,.80);--ui-on-panel-faint:rgba(255,255,255,.50);--ui-on-panel-mark:rgba(255,255,255,.75);--ui-on-ink:#0A1B29;--ui-on-gold:#0B2234;--ui-gold-hover:#D6BA8C;--ui-shadow:rgba(0,0,0,.45);--ui-scrim:rgba(0,0,0,.55);--ui-focus:#EAF1F7;--ui-info:#9CC7EA;--ui-info-bg:#12304A;--ui-success:#9BD3AE;--ui-success-bg:#123524;--ui-warning:#F0C977;--ui-warning-bg:#3A2C0E;--ui-error:#F4A39B;--ui-error-bg:#40171A;--ui-wa:#1EAA52;color-scheme:dark}
.ui-page .ui-theme-light{--ui-surface:#F8F6F0;--ui-surface-rgb:248,246,240;--ui-raised:#FFFFFF;--ui-alt:#F2EFE7;--ui-section-alt:#F2EFE7;--ui-cta-band:#0B2234;--ui-cta-band-edge:none;--ui-ink:#0B2234;--ui-ink-hover:#143046;--ui-ink-2:#425466;--ui-gold:#B99762;--ui-gold-text:#80602F;--ui-border:#DDD8CE;--ui-border-strong:#C8C0B2;--ui-panel:#0B2234;--ui-on-panel:rgba(255,255,255,.86);--ui-on-panel-2:rgba(255,255,255,.72);--ui-on-panel-line:rgba(255,255,255,.14);--ui-on-panel-link:rgba(255,255,255,.80);--ui-on-panel-faint:rgba(255,255,255,.50);--ui-on-panel-mark:rgba(255,255,255,.75);--ui-on-ink:#FFFFFF;--ui-on-gold:#0B2234;--ui-gold-hover:#C9A97A;--ui-shadow:rgba(11,34,52,.08);--ui-scrim:rgba(11,34,52,.42);--ui-focus:#0B2234;--ui-info:#1F5A84;--ui-info-bg:#E8F0F7;--ui-success:#2E6B45;--ui-success-bg:#E7F2EA;--ui-warning:#7A5410;--ui-warning-bg:#FBF1DC;--ui-error:#A1261E;--ui-error-bg:#FBE9E7;--ui-wa:#1EAA52;color-scheme:light}
.ui-page .ui-theme-dark{--ui-surface:#0A1B29;--ui-surface-rgb:10,27,41;--ui-raised:#0F2536;--ui-alt:#16324A;--ui-section-alt:#0D2233;--ui-cta-band:#081724;--ui-cta-band-edge:linear-gradient(to bottom,rgba(var(--ui-surface-rgb),1) 0%,rgba(var(--ui-surface-rgb),0.96) 12.5%,rgba(var(--ui-surface-rgb),0.84) 25%,rgba(var(--ui-surface-rgb),0.68) 37.5%,rgba(var(--ui-surface-rgb),0.5) 50%,rgba(var(--ui-surface-rgb),0.32) 62.5%,rgba(var(--ui-surface-rgb),0.16) 75%,rgba(var(--ui-surface-rgb),0.04) 87.5%,rgba(var(--ui-surface-rgb),0) 100%);--ui-ink:#EAF1F7;--ui-ink-hover:#D7E3EC;--ui-ink-2:#A9BDD0;--ui-gold:#C8A97A;--ui-gold-text:#D9B981;--ui-border:#22384C;--ui-border-strong:#33506B;--ui-panel:#081724;--ui-on-panel:rgba(255,255,255,.86);--ui-on-panel-2:rgba(255,255,255,.72);--ui-on-panel-line:rgba(255,255,255,.14);--ui-on-panel-link:rgba(255,255,255,.80);--ui-on-panel-faint:rgba(255,255,255,.50);--ui-on-panel-mark:rgba(255,255,255,.75);--ui-on-ink:#0A1B29;--ui-on-gold:#0B2234;--ui-gold-hover:#D6BA8C;--ui-shadow:rgba(0,0,0,.45);--ui-scrim:rgba(0,0,0,.55);--ui-focus:#EAF1F7;--ui-info:#9CC7EA;--ui-info-bg:#12304A;--ui-success:#9BD3AE;--ui-success-bg:#123524;--ui-warning:#F0C977;--ui-warning-bg:#3A2C0E;--ui-error:#F4A39B;--ui-error-bg:#40171A;--ui-wa:#1EAA52;color-scheme:dark}
html[lang^="ar"] .ui-page{--ui-font:var(--ui-font-arabic)}
html[lang^="zh"] .ui-page{--ui-font:var(--ui-font-cjk)}
@media (min-width:390px){.ui-page{--ui-gutter:20px}}
@media (min-width:768px){.ui-page{--ui-gutter:32px}}
@media (min-width:1200px){.ui-page{--ui-gutter:48px}}
/* Marinova UI system: base. Workshop source; the public copy is the generated, content-hashed bundle.
   Every rule is scoped to .ui-page so a stylesheet shared with a legacy page cannot restyle it. */
.ui-page{margin:0;background:var(--ui-surface);color:var(--ui-ink-2);font-family:var(--ui-font);font-size:var(--ui-type-body);line-height:var(--ui-line-body);-webkit-text-size-adjust:100%;text-size-adjust:100%;text-rendering:optimizeLegibility;overflow-wrap:break-word}
.ui-page *,.ui-page *::before,.ui-page *::after{box-sizing:border-box}
.ui-page img{max-width:100%;height:auto;display:block}
.ui-page :where(h1,h2,h3,h4){color:var(--ui-ink);margin:0;font-weight:400;line-height:var(--ui-line-tight)}
.ui-page :where(p,ul,ol,dl,figure,blockquote){margin:0}
.ui-page :where(a){color:inherit}
.ui-page :focus-visible{outline:2px solid var(--ui-focus);outline-offset:3px;border-radius:4px}
.ui-page ::selection{background:var(--ui-gold);color:var(--ui-on-gold)}
.ui-skip{position:absolute;inset-inline-start:var(--ui-gutter);top:-100px;z-index:800;padding:10px 16px;min-height:var(--ui-target);display:inline-flex;align-items:center;background:var(--ui-ink);color:var(--ui-on-ink);border-radius:var(--ui-radius-sm);text-decoration:none;font-weight:500}
.ui-skip:focus{top:8px}
.ui-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.ui-page[dir="rtl"],[dir="rtl"] .ui-page{text-align:start}
/* Scroll lock while the drawer is open (set on <html> by the runtime). */
html.ui-lock,html.ui-lock body{overflow:hidden}
/* Transitions are enabled only after load (the runtime adds .ui-ready). WebKit otherwise animates from
   the browser's default link colours on first paint, briefly showing low-contrast text. */
html.ui-ready .ui-btn{transition:background-color var(--ui-motion-fast),color var(--ui-motion-fast),border-color var(--ui-motion-fast)}
html.ui-ready .ui-disc__ic,html.ui-ready .ui-pop>summary .ui-chev,html.ui-ready .ui-ftr__chev{transition:transform var(--ui-motion-fast)}
@media (prefers-reduced-motion:reduce){.ui-page *,.ui-page *::before,.ui-page *::after{transition-duration:0s!important;animation-duration:0s!important;scroll-behavior:auto!important}}
/* UI-02 Stage 0a: double-tap zoom off with pinch zoom and panning kept, as on every live page. Never replace
   with pan-y pinch-zoom (it would block horizontal panning in descendants). */
html,body{touch-action:manipulation}

/* Layout primitives: containers and reading widths, section rhythm, grids and card rows, type roles. */
.ui-container{width:100%;max-width:calc(var(--ui-container-page) + 2 * var(--ui-gutter));margin-inline:auto;padding-inline:var(--ui-gutter)}
.ui-reading{width:100%;max-width:calc(var(--ui-container-reading) + 2 * var(--ui-gutter));margin-inline:auto;padding-inline:var(--ui-gutter)}
.ui-prose{max-width:var(--ui-container-prose)}
.ui-section{padding-block:var(--ui-space-7)}
/* UI-02-OWNER-R1: the alternate band is a calm tonal lift that feathers into the page surface at both edges
   (background only; its content always sits inside the solid middle, because the feather is shorter than the
   section padding). Its own token, so --ui-alt consumers (card media, facts, table heads, hovers) are unchanged. */
.ui-section--alt{background-color:var(--ui-section-alt);background-image:linear-gradient(to bottom,var(--ui-surface),var(--ui-section-alt) var(--ui-section-feather),var(--ui-section-alt) calc(100% - var(--ui-section-feather)),var(--ui-surface))}
.ui-section--tight{padding-block:var(--ui-space-6)}
@media (min-width:768px){.ui-section{padding-block:var(--ui-space-8)}}
.ui-stack{display:flex;flex-direction:column;gap:var(--ui-space-4)}
.ui-stack--lg{gap:var(--ui-space-6)}
.ui-cluster{display:flex;flex-wrap:wrap;align-items:center;gap:var(--ui-space-3)}
.ui-grid{display:grid;gap:var(--ui-space-5);grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr))}
.ui-grid--2{grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr))}
/* Type roles */
.ui-eyebrow{display:inline-flex;align-items:center;gap:10px;color:var(--ui-gold-text);font-size:var(--ui-type-label);font-weight:600;letter-spacing:.24em;text-transform:uppercase}
.ui-eyebrow::before{content:"";width:22px;height:1px;background:var(--ui-gold);flex:none}
html[lang^="ar"] .ui-eyebrow,html[lang^="zh"] .ui-eyebrow{letter-spacing:.04em}
.ui-display{font-family:var(--ui-font-serif);font-size:var(--ui-type-display);letter-spacing:-.01em}
.ui-h1{font-family:var(--ui-font-serif);font-size:var(--ui-type-h1);letter-spacing:-.01em}
.ui-h2{font-family:var(--ui-font-serif);font-size:var(--ui-type-h2)}
.ui-h3{font-family:var(--ui-font);font-size:var(--ui-type-h3);font-weight:500}
html[lang^="ar"] .ui-display,html[lang^="ar"] .ui-h1,html[lang^="ar"] .ui-h2,html[lang^="zh"] .ui-display,html[lang^="zh"] .ui-h1,html[lang^="zh"] .ui-h2{font-family:var(--ui-font);font-weight:500}
.ui-h1 em,.ui-display em{font-style:italic;color:var(--ui-gold-text)}
.ui-lede{font-size:var(--ui-type-lede);color:var(--ui-ink-2);max-width:var(--ui-container-prose)}
.ui-small{font-size:var(--ui-type-small)}
.ui-muted{color:var(--ui-ink-2)}
/* Long-form text */
.ui-rich{color:var(--ui-ink-2)}
.ui-rich>*+*{margin-top:var(--ui-space-4)}
.ui-rich h2{font-family:var(--ui-font-serif);font-size:var(--ui-type-h2);margin-top:var(--ui-space-7)}
.ui-rich h3{font-size:var(--ui-type-h3);font-weight:500;margin-top:var(--ui-space-6)}
html[lang^="ar"] .ui-rich h2,html[lang^="zh"] .ui-rich h2{font-family:var(--ui-font);font-weight:500}
.ui-rich ul,.ui-rich ol{padding-inline-start:1.25em}
.ui-rich li+li{margin-top:var(--ui-space-2)}
/* Prose links only. UI-02-OWNER-R1: a button nested in prose keeps its own variant colours and no underline;
   the :where() keeps this rule at its original specificity; it used to outrank .ui-btn--primary/secondary and painted them gold and underlined. */
.ui-rich a:where(:not(.ui-btn)){color:var(--ui-gold-text);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.ui-rich a:where(:not(.ui-btn)):hover{color:var(--ui-ink)}
.ui-rich figure img{border-radius:var(--ui-radius-lg);background:var(--ui-alt)}
.ui-rich figcaption{margin-top:var(--ui-space-2);font-size:var(--ui-type-small);color:var(--ui-ink-2)}
.ui-rich blockquote{border-inline-start:3px solid var(--ui-gold);padding-inline-start:var(--ui-space-4);color:var(--ui-ink)}
/* Page header block used by reading and article layouts */
.ui-pagehead{padding-block:var(--ui-space-7) var(--ui-space-6);border-bottom:1px solid var(--ui-border)}
.ui-pagehead .ui-stack{gap:var(--ui-space-3)}
.ui-meta{display:flex;flex-wrap:wrap;gap:var(--ui-space-2) var(--ui-space-5);font-size:var(--ui-type-small);color:var(--ui-ink-2)}
.ui-crumbs ol{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:4px 0;font-size:var(--ui-type-small)}
.ui-crumbs li{display:inline-flex;align-items:center}
.ui-crumbs li+li::before{content:"/";margin-inline:8px;color:var(--ui-border-strong)}
.ui-crumbs a{color:var(--ui-ink-2);text-decoration:none;display:inline-flex;align-items:center;min-height:var(--ui-target)}
.ui-crumbs a:hover{color:var(--ui-ink)}
.ui-crumbs [aria-current]{color:var(--ui-ink)}

/* Components. `.is-hover`, `.is-focus`, `.is-active` are state-preview classes used only by the
   component catalogue so a static screenshot can show each state. They mirror the real pseudo-classes. */

/* ── Buttons ── */
.ui-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:11px 22px;border-radius:var(--ui-radius-pill);border:1px solid transparent;font:inherit;font-size:.9375rem;font-weight:500;line-height:1.25;text-decoration:none;text-align:center;cursor:pointer}
.ui-btn svg{width:16px;height:16px;flex:0 0 16px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
[dir="rtl"] .ui-btn .ui-ic-dir{transform:scaleX(-1)}
.ui-btn--primary{background:var(--ui-ink);border-color:var(--ui-ink);color:var(--ui-on-ink)}
.ui-btn--primary:hover,.ui-btn--primary.is-hover{background:var(--ui-ink-hover);border-color:var(--ui-ink-hover)}
.ui-btn--secondary{background:transparent;border-color:var(--ui-ink);color:var(--ui-ink)}
.ui-btn--secondary:hover,.ui-btn--secondary.is-hover{background:var(--ui-alt)}
.ui-btn--gold{background:var(--ui-gold);border-color:var(--ui-gold);color:var(--ui-on-gold)}
.ui-btn--gold:hover,.ui-btn--gold.is-hover{background:var(--ui-gold-hover);border-color:var(--ui-gold-hover)}
.ui-btn--text{min-height:var(--ui-target);padding-inline:4px;border-radius:var(--ui-radius-sm);background:none;color:var(--ui-gold-text);text-decoration:underline;text-underline-offset:4px}
.ui-btn--text:hover,.ui-btn--text.is-hover{color:var(--ui-ink)}
.ui-btn--icon{width:var(--ui-target);min-height:var(--ui-target);padding:0;background:none;border-color:var(--ui-border);color:var(--ui-ink)}
.ui-btn--icon:hover,.ui-btn--icon.is-hover{border-color:var(--ui-ink)}
.ui-btn--block{width:100%}
.ui-btn:active,.ui-btn.is-active{transform:translateY(1px)}
.ui-btn.is-focus{outline:2px solid var(--ui-focus);outline-offset:3px}
.ui-btn:disabled,.ui-btn[aria-disabled="true"]{opacity:.5;cursor:not-allowed;transform:none}
.ui-btn[aria-busy="true"]{cursor:progress}
.ui-btn[aria-busy="true"]::after{content:"";width:14px;height:14px;border-radius:50%;border:2px solid currentColor;border-inline-end-color:transparent;animation:ui-spin .8s linear infinite}
@keyframes ui-spin{to{transform:rotate(360deg)}}

/* ── Links ── */
.ui-link{color:var(--ui-gold-text);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.ui-link:hover,.ui-link.is-hover{color:var(--ui-ink)}

/* ── Cards ── */
.ui-card{display:flex;flex-direction:column;background:var(--ui-raised);border:1px solid var(--ui-border);border-radius:var(--ui-radius-lg);overflow:hidden;box-shadow:0 1px 2px var(--ui-shadow)}
.ui-card__media{aspect-ratio:4/3;background:var(--ui-alt);overflow:hidden}
.ui-card__media img{width:100%;height:100%;object-fit:cover}
.ui-card__body{display:flex;flex-direction:column;gap:var(--ui-space-3);padding:var(--ui-space-5);flex:1}
.ui-card__title{font-family:var(--ui-font-serif);font-size:1.35rem;color:var(--ui-ink)}
html[lang^="ar"] .ui-card__title,html[lang^="zh"] .ui-card__title{font-family:var(--ui-font);font-weight:500}
.ui-card__sub{color:var(--ui-gold-text);font-size:var(--ui-type-small);font-weight:500}
.ui-facts{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.ui-facts li{display:inline-flex;align-items:center;min-height:28px;padding:3px 10px;border-radius:var(--ui-radius-pill);background:var(--ui-alt);color:var(--ui-ink);font-size:.8125rem}
.ui-price{color:var(--ui-ink);font-size:1.15rem;font-weight:500}
.ui-price strong{color:var(--ui-gold-text);font-weight:600}
.ui-card__note{font-size:var(--ui-type-small);color:var(--ui-ink-2)}
.ui-card__actions{display:flex;flex-wrap:wrap;gap:var(--ui-space-3);margin-top:auto;padding-top:var(--ui-space-2)}
.ui-card__actions .ui-btn{flex:1 1 180px}

/* ── Form fields ── */
.ui-form{display:flex;flex-direction:column;gap:var(--ui-space-5)}
.ui-fieldset{border:0;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--ui-space-4)}
.ui-fieldset>legend{padding:0;margin-bottom:var(--ui-space-2);font-weight:500;color:var(--ui-ink)}
.ui-field{display:flex;flex-direction:column;gap:6px}
.ui-label{font-weight:500;color:var(--ui-ink);font-size:.9375rem}
.ui-label .ui-opt{font-weight:400;color:var(--ui-ink-2);font-size:var(--ui-type-small)}
.ui-hint{font-size:var(--ui-type-small);color:var(--ui-ink-2)}
.ui-input,.ui-select,.ui-textarea{width:100%;min-height:48px;padding:11px 14px;border:1px solid var(--ui-border-strong);border-radius:var(--ui-radius-sm);background:var(--ui-raised);color:var(--ui-ink);font:inherit;font-size:1rem}
.ui-textarea{min-height:112px;resize:vertical}
.ui-input:hover,.ui-select:hover,.ui-textarea:hover{border-color:var(--ui-ink-2)}
.ui-input:focus-visible,.ui-select:focus-visible,.ui-textarea:focus-visible,.ui-input.is-focus{outline:2px solid var(--ui-focus);outline-offset:1px;border-color:var(--ui-ink)}
.ui-input:disabled,.ui-select:disabled,.ui-textarea:disabled{opacity:.55;cursor:not-allowed;background:var(--ui-alt)}
.ui-input[aria-invalid="true"],.ui-select[aria-invalid="true"],.ui-textarea[aria-invalid="true"]{border-color:var(--ui-error);border-width:2px;padding:10px 13px}
.ui-field__error{display:flex;align-items:flex-start;gap:6px;color:var(--ui-error);font-size:var(--ui-type-small);font-weight:500}
.ui-field__error[hidden]{display:none}
.ui-field__error::before{content:"!";flex:0 0 18px;height:18px;border-radius:50%;background:var(--ui-error);color:var(--ui-error-bg);font-size:12px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;line-height:1}
.ui-field[data-state="success"] .ui-input{border-color:var(--ui-success)}
.ui-field__ok{color:var(--ui-success);font-size:var(--ui-type-small);font-weight:500}
.ui-check{display:flex;align-items:flex-start;gap:10px;min-height:var(--ui-target);padding-block:10px;cursor:pointer;color:var(--ui-ink)}
.ui-check input{width:22px;height:22px;margin:0;flex:0 0 22px;accent-color:var(--ui-ink)}
.ui-choices{display:flex;flex-direction:column;gap:2px}
.ui-error-summary{border:2px solid var(--ui-error);border-radius:var(--ui-radius-lg);background:var(--ui-error-bg);padding:var(--ui-space-4) var(--ui-space-5);color:var(--ui-ink)}
.ui-error-summary h2{font-family:var(--ui-font);font-size:1rem;font-weight:600;color:var(--ui-error);margin-bottom:var(--ui-space-2)}
.ui-error-summary ul{margin:0;padding-inline-start:1.1em}
.ui-error-summary a{color:var(--ui-error);font-weight:500;display:inline-block;min-height:var(--ui-target);padding-block:10px;text-underline-offset:3px}
.ui-review{border:1px solid var(--ui-border);border-radius:var(--ui-radius-lg);background:var(--ui-raised);padding:var(--ui-space-5)}
.ui-review h3{margin-bottom:var(--ui-space-3)}
.ui-review dl{display:grid;grid-template-columns:minmax(110px,auto) 1fr;gap:var(--ui-space-2) var(--ui-space-4)}
.ui-review dt{color:var(--ui-ink-2)}
.ui-review dd{margin:0;color:var(--ui-ink)}
.ui-review .ui-cluster{margin-top:var(--ui-space-4)}

/* ── Alerts ── */
.ui-alert{display:flex;gap:var(--ui-space-3);align-items:flex-start;padding:var(--ui-space-4) var(--ui-space-5);border-radius:var(--ui-radius-lg);border:1px solid;border-inline-start-width:4px}
.ui-alert__t{font-weight:600;color:inherit}
.ui-alert p{color:var(--ui-ink)}
.ui-alert svg{width:20px;height:20px;flex:0 0 20px;margin-top:2px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.ui-alert--info{background:var(--ui-info-bg);border-color:var(--ui-info);color:var(--ui-info)}
.ui-alert--success{background:var(--ui-success-bg);border-color:var(--ui-success);color:var(--ui-success)}
.ui-alert--warning{background:var(--ui-warning-bg);border-color:var(--ui-warning);color:var(--ui-warning)}
.ui-alert--error{background:var(--ui-error-bg);border-color:var(--ui-error);color:var(--ui-error)}

/* ── Disclosures and FAQs (native details: content is reachable with no JavaScript) ── */
.ui-disclosures{border-top:1px solid var(--ui-border)}
.ui-disc{border-bottom:1px solid var(--ui-border)}
.ui-disc>summary{display:flex;align-items:center;justify-content:space-between;gap:var(--ui-space-4);min-height:56px;padding:14px 2px;cursor:pointer;list-style:none;color:var(--ui-ink);font-weight:500}
.ui-disc>summary::-webkit-details-marker{display:none}
.ui-disc>summary:hover{color:var(--ui-gold-text)}
.ui-disc__ic{width:18px;height:18px;flex:0 0 18px;fill:none;stroke:var(--ui-gold-text);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.ui-disc[open] .ui-disc__ic{transform:rotate(180deg)}
.ui-disc__body{padding:0 2px var(--ui-space-5);max-width:var(--ui-container-prose)}

/* ── Tables: intentional labelled scrolling, never page-wide sideways scroll ── */
.ui-table-wrap{overflow-x:auto;border:1px solid var(--ui-border);border-radius:var(--ui-radius-lg);background:var(--ui-raised)}
.ui-table-wrap:focus-visible{outline:2px solid var(--ui-focus);outline-offset:2px}
.ui-table{width:100%;min-width:520px;border-collapse:collapse;font-size:.9375rem}
.ui-table caption{text-align:start;padding:var(--ui-space-3) var(--ui-space-4);color:var(--ui-ink);font-weight:500;caption-side:top}
.ui-table th,.ui-table td{padding:12px var(--ui-space-4);text-align:start;border-top:1px solid var(--ui-border);vertical-align:top}
.ui-table th{color:var(--ui-ink);font-weight:600;background:var(--ui-alt)}

/* ── Call-to-action band ──
   UI-02-OWNER-R1/R3 (owner decisions, docs/ui-system/evidence/UI-02-OWNER-R1/ and UI-02-OWNER-R3/): a full-width navy
   section, no inset card, meeting the footer's navy with no seam. R3: Light has a clean ivory-to-navy boundary, no
   fade; Dark keeps its calm eased entry from the page surface. The band image is a per-theme token,
   --ui-cta-band-edge: none in Light (pure solid navy; no gradient at all, so nothing is dithered or greyed), and in
   Dark the page surface easing out over the band's own top padding (smoothstep alpha), so no extra shelf is added. Background only; content
   starts below it. The whole composition is centred inside the reading-width container. */
.ui-cta-band{background-color:var(--ui-cta-band);background-image:var(--ui-cta-band-edge);background-size:100% var(--ui-space-8);background-repeat:no-repeat;color:var(--ui-on-panel);padding-block:var(--ui-space-8)}
.ui-cta-band :focus-visible{outline-color:var(--ui-gold)}
.ui-cta{color:var(--ui-on-panel);display:flex;flex-direction:column;gap:var(--ui-space-4);align-items:center;text-align:center}
.ui-cta h2,.ui-cta p{text-wrap:balance}
.ui-cta p{max-width:60ch}
.ui-cta .ui-btn{max-width:100%}
.ui-cta h2{color:#fff;font-family:var(--ui-font-serif);font-size:var(--ui-type-h2)}
html[lang^="ar"] .ui-cta h2,html[lang^="zh"] .ui-cta h2{font-family:var(--ui-font);font-weight:500}
.ui-cta p{color:var(--ui-on-panel)}
.ui-cta .ui-btn--gold{color:#0B2234}
/* Other button variants on the always-dark band: pale fill with a navy label, and a light outline. */
.ui-cta .ui-btn--primary{background:#FFFFFF;border-color:#FFFFFF;color:#0B2234}
.ui-cta .ui-btn--primary:hover,.ui-cta .ui-btn--primary.is-hover{background:#EAF1F7;border-color:#EAF1F7}
.ui-cta .ui-btn--secondary{border-color:var(--ui-on-panel-2);color:#FFFFFF}
.ui-cta .ui-btn--secondary:hover,.ui-cta .ui-btn--secondary.is-hover{background:rgba(255,255,255,.08);border-color:#FFFFFF}

/* ── UI-02 Stage 0a: shared brand mark in the CTA band (static final state; D-MOTION M2) and CTA links ── */
.ui-brandmark{align-self:stretch;display:flex;justify-content:center}
.ui-brandmark svg{width:clamp(140px,52vw,240px);height:auto;display:block;overflow:visible}
@media (min-width:901px){.ui-brandmark svg{width:clamp(180px,38vw,340px)}}
.ui-cta__links{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;justify-content:center;gap:0 var(--ui-space-4)}
.ui-cta__links a{display:inline-flex;align-items:center;justify-content:center;min-height:var(--ui-target);min-width:var(--ui-target);color:var(--ui-on-panel-link);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.ui-cta__links a:hover{color:#fff}
.ui-cta h2 em{font-style:italic;color:var(--ui-gold)}

/* Site shell: header, logo, navigation, popovers, drawer and footer.
   Shell boundary: mobile layout through 900px, desktop from 901px (contract section 4).
   UI-01-R6: header, menu and footer values are the resolved styles of the reference homepage (index.html plus
   assets/ui-refresh-home.css at 296abbf), measured at matched widths and states; type sizes are in rem/em so
   the user's text size still scales them. Evidence: docs/ui-system/evidence/UI-01-R6/. */

/* ── Header ── */
.ui-hdr{position:sticky;top:0;z-index:var(--ui-z-header);padding-inline:var(--ui-shell-gutter);background:rgba(var(--ui-surface-rgb),.92);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid transparent}
.ui-hdr.is-scrolled{background:rgba(var(--ui-surface-rgb),.97);border-bottom-color:var(--ui-border)}
/* Total height includes the 1px rule: 56px through 900px and 66px from 901px, as on the homepage. */
.ui-hdr__in{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:calc(var(--ui-header-mobile) - 1px);max-width:var(--ui-container-page);margin-inline:auto}
@media (max-width:360px){.ui-hdr{padding-inline:var(--ui-shell-gutter-small)}.ui-hdr__in{gap:6px}.ui-hdr .ui-hdr__actions{gap:4px}.ui-hdr .ui-lang>summary{padding-inline:8px}}
@media (min-width:901px){
  .ui-hdr--standard .ui-hdr__in{display:grid;grid-template-columns:auto 1fr auto;min-height:calc(var(--ui-header) - 1px)}
}
@media (min-width:901px) and (max-width:1319px){.ui-hdr--standard{padding-inline:var(--ui-shell-gutter-mid)}}
@media (min-width:901px) and (max-width:1059px){.ui-hdr--standard{padding-inline:var(--ui-shell-gutter-tight)}}
/* Logo. The SVG carries direction="ltr" so an RTL page never reverses or clips the wordmark. Heights follow
   the homepage table: 28px to 360px, 32px on phones and at 1060-1319px, 30px at 901-1059px, 46px from 1320px. */
.ui-logo{display:inline-flex;align-items:center;flex:0 0 auto;min-height:var(--ui-target);min-width:var(--ui-target);color:var(--ui-ink);text-decoration:none;direction:ltr;unicode-bidi:isolate}
.ui-logo svg{display:block;height:var(--ui-logo-h);width:auto;overflow:visible}
.ui-logo .ui-logo__w{fill:currentColor}
.ui-logo .ui-logo__s{stroke:currentColor}
.ui-logo .ui-logo__d{fill:var(--ui-gold)}
@media (max-width:360px){.ui-hdr .ui-logo svg{height:var(--ui-logo-h-small)}}
@media (min-width:901px) and (max-width:1059px){.ui-hdr--standard .ui-logo svg{height:var(--ui-logo-h-compact)}}
@media (min-width:1320px){.ui-hdr--standard .ui-logo svg{height:var(--ui-logo-h-wide)}}
/* As on the homepage, the navigation keeps its own width and the logo box gives up its empty side space first
   (down to 130px) when the row is tight; the drawing itself only scales once the box is narrower than it. */
@media (min-width:901px){.ui-hdr--standard .ui-logo{min-width:130px}.ui-hdr--standard .ui-logo svg{max-width:100%}}
/* Navigation (UI-01-R8, owner-chosen style, 2026-09-28): natural-case labels at 14px, weight 500, .02em
   tracking, in rounded 44px-high tabs with 6px side padding. The current page is a raised tab: the raised
   surface, navy text, a 2px gold lower edge and a soft shadow. Hover previews the surface without the gold
   edge; a press uses the alternate surface. Ahmed chose this over the reference homepage's uppercase,
   widely tracked, underlined treatment, so do not restore uppercase because the older homepage uses it
   (docs/ui-system/reference/README.md). Box gaps: 22px from 1320px, 12px from 1060px, 4px from 901px. */
.ui-nav{display:none}
@media (min-width:901px){
  .ui-nav{display:flex;justify-content:center;align-items:center;flex-wrap:nowrap;gap:4px}
  .ui-nav a{display:inline-flex;align-items:center;justify-content:center;min-height:var(--ui-target);min-width:var(--ui-target);padding-inline:6px;color:var(--ui-ink-2);text-decoration:none;font-size:.875rem;font-weight:500;letter-spacing:.02em;line-height:1.65;white-space:nowrap;border-radius:var(--ui-radius-sm)}
  html[lang^="ar"] .ui-nav a{letter-spacing:0}
  html[lang^="zh"] .ui-nav a{letter-spacing:.04em}
  html.ui-ready .ui-nav a{transition:background-color var(--ui-motion-fast),color var(--ui-motion-fast)}
  .ui-nav a:hover{color:var(--ui-ink);background-color:var(--ui-raised)}
  .ui-nav a:active{background-color:var(--ui-alt)}
  .ui-nav a[aria-current="page"]{color:var(--ui-ink);background-color:var(--ui-raised);box-shadow:inset 0 -2px 0 var(--ui-gold),0 1px 3px var(--ui-shadow)}
  .ui-nav a:focus-visible{border-radius:var(--ui-radius-sm)}
  .ui-nav a.is-seasonal{color:var(--ui-gold-text)}
  .ui-nav a.is-seasonal:hover{color:var(--ui-ink)}
  /* Measured fit (runtime): if the navigation does not fit beside the logo and actions, the header uses
     the menu button at this width instead of shrinking type. With no JavaScript it wraps instead. */
  html.ui-js .ui-nav{flex-wrap:nowrap}
  html:not(.ui-js) .ui-nav{flex-wrap:wrap;row-gap:0}
  .ui-hdr--standard[data-ui-nav="collapsed"] .ui-hdr__in{display:flex}
  .ui-hdr--standard[data-ui-nav="collapsed"] .ui-nav{display:none}
  .ui-hdr--standard[data-ui-nav="collapsed"] .ui-menu-btn{display:inline-flex}
}
@media (min-width:1060px){.ui-nav{column-gap:12px}}
@media (min-width:1320px){.ui-nav{column-gap:22px}}
.ui-f1{font-weight:700;letter-spacing:.06em}
/* Actions: 14px apart, as on the homepage. */
.ui-hdr__actions{display:flex;align-items:center;justify-content:flex-end;gap:14px;flex:0 0 auto}
.ui-cta-hdr{display:none}
@media (min-width:1200px){
  .ui-cta-hdr{display:inline-flex;min-height:var(--ui-target);padding:9px 18px;border:0;font-size:.8125rem;line-height:1.65}
  .ui-cta-hdr svg{width:14px;height:14px;flex-basis:14px}
}
.ui-menu-btn{display:inline-flex;align-items:center;justify-content:center;width:var(--ui-target);height:var(--ui-target);color:var(--ui-ink);border-radius:var(--ui-radius-sm);text-decoration:none}
.ui-menu-btn svg{width:20px;height:14.5px;fill:currentColor}
@media (min-width:901px){.ui-hdr--standard:not([data-ui-nav="collapsed"]) .ui-menu-btn{display:none}}
/* Popovers built on <details>: they work with no JavaScript; the runtime adds outside-click and Escape.
   Header triggers: 10.5px uppercase with 1.4px tracking, a 13px globe and a 9px chevron (homepage). */
.ui-pop{position:relative}
.ui-pop>summary{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:var(--ui-target);min-height:var(--ui-target);padding:5px 10px;border:1px solid transparent;border-radius:var(--ui-radius-pill);color:var(--ui-ink);cursor:pointer;list-style:none;font-size:.65625rem;font-weight:500;line-height:normal;letter-spacing:.0875rem;text-transform:uppercase}
.ui-pop>summary::-webkit-details-marker{display:none}
.ui-pop>summary:hover{color:var(--ui-gold-text)}
.ui-pop>summary svg{width:17px;height:17px;flex:0 0 17px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ui-lang>summary svg:first-child{width:13px;height:13px;flex-basis:13px;opacity:.78}
.ui-pop>summary .ui-chev{width:9px;height:9px;flex-basis:9px;stroke-width:1.8}
.ui-pop[open]>summary .ui-chev{transform:rotate(180deg)}
.ui-pop__menu{position:absolute;top:calc(100% + 6px);inset-inline-end:0;z-index:var(--ui-z-popover);min-width:196px;padding:6px;border:1px solid var(--ui-border);border-radius:10px;background:var(--ui-raised);box-shadow:0 12px 30px var(--ui-shadow);display:flex;flex-direction:column}
.ui-pop__menu a,.ui-pop__menu button{display:flex;align-items:center;gap:9px;width:100%;min-height:var(--ui-target);padding:8px 10px;border:0;border-radius:7px;background:none;color:var(--ui-ink-2);font:inherit;font-size:.875rem;letter-spacing:normal;text-transform:none;text-align:start;text-decoration:none;cursor:pointer}
.ui-pop__menu a:hover,.ui-pop__menu button:hover{background:var(--ui-alt);color:var(--ui-ink)}
.ui-pop__menu [aria-pressed="true"],.ui-pop__menu [aria-current="true"]{color:var(--ui-ink);font-weight:600}
.ui-pop__menu [aria-pressed="true"]::after{content:"";margin-inline-start:auto;width:6px;height:6px;border-radius:50%;background:var(--ui-gold)}
/* Appearance needs JavaScript; with scripting off the control is not offered at all. */
html:not(.ui-js) .ui-thm{display:none}
@media (max-width:900px){.ui-hdr--standard .ui-hdr__actions .ui-thm{display:none}}

/* ── Drawer ──
   The reference homepage's menu: full viewport, a close control at the top end, the six links, a compact
   language control and the appearance choices, all centred. The block is centred on the viewport: the panel's
   end padding equals the top bar plus its gap, and auto margins balance the rest. When the content is taller than
   the screen the margins collapse to 0, so short screens, landscape and enlarged text scroll from the top. */
.ui-drawer{position:fixed;inset:0;z-index:var(--ui-z-drawer);display:none}
.ui-drawer.is-open{display:block}
html:not(.ui-js) .ui-drawer:target{display:block}
.ui-drawer__scrim{position:absolute;inset:0;background:var(--ui-scrim)}
.ui-drawer__panel{position:absolute;inset:0;overflow-y:auto;overscroll-behavior:contain;background:rgba(var(--ui-surface-rgb),.98);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);display:flex;flex-direction:column;align-items:center;gap:var(--ui-space-5);padding:0 var(--ui-gutter) calc(20px + var(--ui-target) + var(--ui-space-5));text-align:center}
.ui-drawer.is-open .ui-drawer__panel{animation:ui-drawer-in var(--ui-motion-base) ease-out}
[dir="rtl"] .ui-drawer.is-open .ui-drawer__panel{animation-name:ui-drawer-in-rtl}
@keyframes ui-drawer-in{from{opacity:.4}to{opacity:1}}
@keyframes ui-drawer-in-rtl{from{opacity:.4}to{opacity:1}}
/* Close control 20px from the top and 22px from the end edge, as the homepage's. */
.ui-drawer__top{display:flex;align-items:center;justify-content:flex-end;align-self:stretch;flex:none;padding-top:20px;margin-inline-end:calc(22px - var(--ui-gutter))}
.ui-drawer__nav{margin-block-start:auto}
.ui-drawer__panel>:last-child{margin-block-end:auto}
.ui-drawer__close{display:inline-flex;align-items:center;justify-content:center;width:var(--ui-target);height:var(--ui-target);border:0;border-radius:var(--ui-radius-sm);background:none;color:var(--ui-ink-2);cursor:pointer;text-decoration:none}
.ui-drawer__close:hover{color:var(--ui-ink)}
.ui-drawer__close svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.ui-drawer__nav{display:flex;flex-direction:column;align-items:center;gap:var(--ui-space-5);max-width:100%}
.ui-drawer__nav a{display:inline-flex;align-items:center;justify-content:center;max-width:100%;min-height:var(--ui-target);color:var(--ui-ink);text-decoration:none;text-align:center;font-family:var(--ui-font-serif);font-weight:400;font-size:clamp(1.625rem,7vw,2.125rem);letter-spacing:-.01em;line-height:1.65}
html[lang^="ar"] .ui-drawer__nav a,html[lang^="zh"] .ui-drawer__nav a{font-family:var(--ui-font);font-weight:500;letter-spacing:0}
.ui-drawer__nav a:hover{color:var(--ui-gold-text)}
.ui-drawer__nav a.is-seasonal{color:var(--ui-gold-text)}
.ui-drawer__nav .ui-f1{font-family:var(--ui-font);font-size:.72em;font-weight:700;letter-spacing:.08em;vertical-align:.12em}
.ui-nav-ic{display:inline-block;vertical-align:-.04em;width:.62em;height:.62em;margin-inline-end:.3em;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;opacity:.85}
@media (max-height:700px){.ui-drawer__panel,.ui-drawer__nav{gap:var(--ui-space-4)}}
/* Compact language control: the header's trigger at 13px with the full language name. */
.ui-drawer__lang{margin-top:18px}
.ui-drawer__lang>summary{font-size:.8125rem;padding:9px 16px}
.ui-drawer__lang .ui-pop__menu{inset-inline-end:auto;left:50%;transform:translateX(-50%)}
.ui-drawer__lang .ui-pop__menu a{justify-content:center;font-size:.875rem;letter-spacing:.04em}
/* Appearance: a ruled group under the language control. Its choices are centred (the homepage's own row
   is edge-aligned, a defect not carried over). */
.ui-drawer__thm{display:flex;flex-direction:column;align-items:center;width:calc(100% + 2 * var(--ui-gutter));max-width:420px;margin-top:6px;padding-top:18px;border-top:1px solid var(--ui-border)}
.ui-drawer__label{display:block;margin-bottom:10px;font-size:.6875rem;font-weight:600;letter-spacing:.1818em;line-height:1.65;text-transform:uppercase;color:var(--ui-ink-2)}
html[lang^="ar"] .ui-drawer__label,html[lang^="zh"] .ui-drawer__label{letter-spacing:.04em}
.ui-drawer__opts{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;max-width:100%;padding-inline:var(--ui-gutter)}
.ui-drawer__opts button{display:inline-flex;align-items:center;gap:9px;min-height:var(--ui-target);padding:9px 15px;border:1px solid var(--ui-border);border-radius:var(--ui-radius-pill);background:none;color:var(--ui-ink-2);font:inherit;font-size:.875rem;line-height:normal;cursor:pointer}
.ui-drawer__opts button::before{content:"";flex:0 0 auto;width:9px;height:9px;border:1px solid var(--ui-border);border-radius:999px}
.ui-drawer__opts button:hover{color:var(--ui-ink)}
.ui-drawer__opts [aria-pressed="true"]{border-color:var(--ui-ink);background:var(--ui-ink);color:var(--ui-raised);font-weight:500}
.ui-drawer__opts [aria-pressed="true"]::before{border-color:var(--ui-raised);background:var(--ui-raised)}

/* ── Footer (Standard) ── */
.ui-ftr{background:var(--ui-panel);color:var(--ui-on-panel-2);font-weight:300;padding:44px var(--ui-shell-gutter) 80px}
@media (min-width:901px){.ui-ftr{padding-bottom:40px}}
.ui-ftr a{color:var(--ui-on-panel);text-decoration:none}
.ui-ftr a:hover,.ui-ftr [role="button"]:hover{color:var(--ui-gold)}
.ui-ftr :focus-visible{outline-color:var(--ui-gold)}
.ui-ftr__in{max-width:var(--ui-container-page);margin-inline:auto;display:grid}
@media (min-width:900px){.ui-ftr__in{grid-template-columns:minmax(190px,1fr) 2.6fr;gap:clamp(26px,5vw,72px);align-items:start}}
.ui-ftr__brand{display:flex;flex-direction:column;align-items:flex-start;gap:14px;max-width:420px}
@media (min-width:900px){.ui-ftr__brand{gap:12px;max-width:340px}}
.ui-ftr .ui-logo{padding-block:4px;color:rgba(255,255,255,.92)}
.ui-ftr .ui-logo svg{height:var(--ui-logo-h-footer)}
.ui-ftr .ui-logo .ui-logo__s{stroke:var(--ui-on-panel-mark)}
.ui-ftr__tag{margin:0;font-size:.875rem;line-height:1.6;letter-spacing:.1px;color:var(--ui-on-panel-2)}
.ui-ftr__contact{display:inline-flex;align-items:center;gap:7px;min-height:var(--ui-target);color:var(--ui-gold)!important;font-size:.8125rem;line-height:1.65;letter-spacing:.3px}
.ui-ftr__contact svg{width:14px;height:14px;flex:0 0 14px;fill:currentColor}
.ui-ftr__groups{display:grid;grid-template-columns:1fr;margin-top:16px}
@media (min-width:900px){.ui-ftr__groups{margin-top:0;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:0 clamp(16px,3vw,40px)}}
.ui-ftr__grp{border-bottom:1px solid var(--ui-on-panel-line)}
.ui-ftr__grp>summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:var(--ui-target);list-style:none;cursor:pointer}
.ui-ftr__grp>summary::-webkit-details-marker{display:none}
.ui-ftr__h{margin:0;font-family:var(--ui-font);font-size:.6875rem;font-weight:500;letter-spacing:.1636em;line-height:1.65;text-transform:uppercase;color:var(--ui-gold)}
html[lang^="ar"] .ui-ftr__h,html[lang^="zh"] .ui-ftr__h{letter-spacing:.04em}
.ui-ftr__chev{width:16px;height:16px;flex:0 0 16px;fill:none;stroke:var(--ui-gold);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.ui-ftr__grp[open] .ui-ftr__chev{transform:rotate(180deg)}
.ui-ftr__grp ul{list-style:none;margin:0;padding:0 0 6px;display:flex;flex-direction:column}
.ui-ftr__grp li a,.ui-ftr__grp li [role="button"]{display:flex;align-items:center;min-height:var(--ui-target);font-size:.84375rem;line-height:1.5;letter-spacing:.1px;color:var(--ui-on-panel-link)}
@media (min-width:900px){
  .ui-ftr__grp{border-bottom:0}
  .ui-ftr__grp>summary{cursor:default;margin-bottom:6px;border-bottom:1px solid var(--ui-on-panel-line)}
  .ui-ftr__grp ul{gap:11px;padding-bottom:0}
  .ui-ftr__chev{display:none}
}
/* Base row. Separation comes from spacing alone (the homepage's "|" marks are not carried over), so a wrapped
   line can never begin with a separator. Stacked and centred to 560px; spread across the rail from 561px. */
.ui-ftr__base{max-width:var(--ui-container-page);margin:26px auto 0;padding-top:10px;border-top:1px solid var(--ui-on-panel-line)}
.ui-ftr__base ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;align-items:center;gap:0;font-size:.75rem;letter-spacing:.3px;text-align:center}
@media (min-width:561px){.ui-ftr__base ul{flex-direction:row;flex-wrap:wrap;justify-content:space-between;column-gap:16px;text-align:start}}
.ui-ftr__base li{display:flex;align-items:center;color:var(--ui-on-panel-2)}
.ui-ftr__base li:first-child{font-size:.6875rem;line-height:1.65;color:var(--ui-on-panel-faint)}
.ui-ftr__base a{display:inline-flex;align-items:center;justify-content:center;min-height:var(--ui-target);min-width:var(--ui-target);color:var(--ui-on-panel-2)}
/* Consent integration: the existing consent script clones the Privacy link or appends a fallback button. */
.ui-ftr .mv-pc-a{display:flex;align-items:center;min-height:var(--ui-target);font-size:.75rem;color:var(--ui-on-panel-2)}
.ui-ftr .mv-pc-fb{display:flex;align-items:center;justify-content:center;min-height:var(--ui-target);margin:var(--ui-space-2) auto 0;padding:0 12px;color:var(--ui-on-panel-2);font-size:.75rem}
/* Consent card sits below the drawer so the drawer's own controls stay usable while it is open. */

/* ── Share and Utility variants ── */
.ui-hdr--compact .ui-hdr__in{min-height:calc(var(--ui-header-mobile) - 1px)}
.ui-ftr--compact{padding-block:var(--ui-space-6)}
.ui-ftr--compact .ui-ftr__in{grid-template-columns:1fr;justify-items:center;text-align:center;gap:var(--ui-space-3)}
.ui-ftr--compact .ui-ftr__brand{align-items:center;max-width:none}
.ui-ftr--compact .ui-ftr__links{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;column-gap:var(--ui-space-5)}
.ui-ftr--compact .ui-ftr__links a{display:inline-flex;align-items:center;justify-content:center;min-height:var(--ui-target);min-width:var(--ui-target);font-size:.875rem}
.ui-ftr--compact .ui-ftr__base{margin-top:var(--ui-space-4);text-align:center}
.ui-ftr--compact .ui-ftr__base ul{align-items:center}
@media (min-width:768px){.ui-ftr--compact .ui-ftr__base ul{justify-content:center}}

/* ── UI-02 Stage 0a: optional shared floating WhatsApp contact (absent unless an adapter sets floatContact).
   Same box, place, colour, layer and visibility as the live pages' float: 52px round, bottom 26px, right 22px,
   below the consent banner, header, popovers and drawer, and only from 901px. The physical `bottom` is kept so
   consent-v2's inline lift (it targets the wa-fab hook) wins. UI-02a (O-FLOAT, decided by Ahmed): the --ui-wa
   token is #1EAA52, the nearest darker green (same hue and saturation as the live #25D366) whose white icon
   reaches at least 3:1; hover and focus keep that background. ── */
.ui-wa-float{position:fixed;bottom:26px;right:22px;z-index:var(--ui-z-float);width:52px;height:52px;border-radius:50%;background:var(--ui-wa);display:none;align-items:center;justify-content:center;box-shadow:0 4px 22px rgba(37,211,102,.38);color:#fff;text-decoration:none}
.ui-wa-float svg{width:25px;height:25px;fill:#fff}
.ui-wa-float:hover{transform:scale(1.1);box-shadow:0 6px 30px rgba(37,211,102,.5)}
/* UI-02a: the float is the last control, so keyboard focus reaches it with the page at the navy footer, where
   the Light ring (navy) vanished. A white halo fills the 3px offset gap: two-tone, visible on ivory and navy. */
.ui-wa-float:focus-visible{outline:2px solid var(--ui-focus);outline-offset:3px;box-shadow:0 0 0 3px #fff}
html.ui-ready .ui-wa-float{transition:transform var(--ui-motion-fast),box-shadow var(--ui-motion-fast)}
@media (min-width:901px){.ui-wa-float{display:flex}}
@media (prefers-reduced-motion:reduce){.ui-wa-float:hover{transform:none}}
/* UI-02-STAGE0A-R1: float-present footer clearance only (ui-ftr--float exists only with floatContact). The
   float-layout integration sets --ui-float-reserve from the float's real box (its offset, including any lift
   above the consent card, its height and a 12px margin covering the hover scale and focus ring, less the body's
   bottom padding). The default is the resting float without JavaScript: 26 + 52 + 12. */
@media (min-width:901px){.ui-ftr--float{padding-bottom:max(40px,var(--ui-float-reserve,90px))}}

/* Page-type layouts: reading page, article, share and utility bodies. Body composition only;
   the shell above is never restyled from here. */
.ui-main{display:block}
.ui-main:focus{outline:none}
/* Reading page */
.ui-reading-page .ui-section:first-of-type{padding-top:var(--ui-space-6)}
.ui-reading-page .ui-rich>*{max-width:var(--ui-container-prose)}
/* Article */
.ui-article__figure{margin-top:var(--ui-space-5)}
.ui-article__figure img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:var(--ui-radius-lg);background:var(--ui-alt)}
.ui-article__figure figcaption{margin-top:var(--ui-space-2);font-size:var(--ui-type-small);color:var(--ui-ink-2)}
.ui-article .ui-rich>*{max-width:var(--ui-container-prose)}
.ui-article .ui-rich>.ui-table-wrap{max-width:none}
.ui-related ul{list-style:none;padding:0;display:grid;gap:var(--ui-space-2)}
.ui-related a{display:flex;align-items:center;min-height:var(--ui-target);color:var(--ui-ink);text-decoration:none;border-bottom:1px solid var(--ui-border);gap:8px}
.ui-related a:hover{color:var(--ui-gold-text)}
/* UI-02-OWNER-R2: the related-guide arrow follows the button arrow (.ui-btn svg): 16px, not shrinking, an outline
   in the link colour. Unstyled, it rendered as a 227-623px black triangle in Chromium and collapsed to 0x0 in WebKit.
   Mirrored in right-to-left pages like the button arrow. */
.ui-related a svg{width:16px;height:16px;flex:0 0 16px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
[dir="rtl"] .ui-related .ui-ic-dir{transform:scaleX(-1)}
/* Share landing */
.ui-share{padding-block:var(--ui-space-6) var(--ui-space-7)}
.ui-share__in{max-width:520px;margin-inline:auto;padding-inline:var(--ui-gutter);display:flex;flex-direction:column;gap:var(--ui-space-4)}
.ui-share__eyebrow{text-align:center;justify-content:center}
.ui-share .ui-card__actions{flex-direction:column}
.ui-share .ui-card__actions .ui-btn{flex:none;width:100%}
.ui-share__note{text-align:center;font-size:var(--ui-type-small);color:var(--ui-ink-2)}
/* Utility pages (404, social gateway) */
.ui-utility{padding-block:var(--ui-space-8)}
.ui-utility__in{max-width:640px;margin-inline:auto;padding-inline:var(--ui-gutter);display:flex;flex-direction:column;gap:var(--ui-space-5)}
.ui-utility__links{list-style:none;padding:0;display:grid;gap:var(--ui-space-3)}
.ui-utility__links a{display:flex;flex-direction:column;gap:2px;min-height:56px;justify-content:center;padding:var(--ui-space-3) var(--ui-space-4);border:1px solid var(--ui-border);border-radius:var(--ui-radius-lg);background:var(--ui-raised);text-decoration:none;color:var(--ui-ink)}
.ui-utility__links a:hover{border-color:var(--ui-ink)}
.ui-utility__links small{color:var(--ui-ink-2);font-size:var(--ui-type-small)}

/* ── UI-02 Stage 0a: reading-page body components (section eyebrow, steps, check list, contact cards, meta
   list, note, actions, in-place FAQ, reviews). Body composition only; no shell selector. ── */
.ui-rich .ui-eyebrow+h2{margin-top:var(--ui-space-3)}
.ui-rich .ui-steps{list-style:none;padding:0;display:grid;gap:var(--ui-space-4)}
.ui-rich .ui-steps li{display:grid;grid-template-columns:auto 1fr;gap:var(--ui-space-4);align-items:start;margin:0}
.ui-steps__n{font-family:var(--ui-font-serif);font-size:1.5rem;line-height:1.1;color:var(--ui-gold-text);min-width:2ch}
.ui-steps__t{color:var(--ui-ink);font-weight:500}
.ui-steps li p+p{margin-top:4px}
.ui-rich .ui-checks{list-style:none;padding:0}
.ui-checks li{position:relative;padding-inline-start:28px}
.ui-checks li::before{content:"";position:absolute;inset-inline-start:3px;top:.4em;width:12px;height:6px;border-left:2px solid var(--ui-gold-text);border-bottom:2px solid var(--ui-gold-text);transform:rotate(-45deg)}
.ui-checks strong{color:var(--ui-ink);font-weight:600}
.ui-cards{display:grid;gap:var(--ui-space-4)}
@media (min-width:768px){.ui-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
.ui-ccard{border:1px solid var(--ui-border);border-radius:var(--ui-radius-lg);background:var(--ui-raised);padding:var(--ui-space-5);display:flex;flex-direction:column;gap:var(--ui-space-3);align-items:flex-start}
.ui-rich .ui-ccard h3{margin-top:0}
.ui-ccard__ic{color:var(--ui-gold-text);display:inline-flex}
.ui-ccard__ic svg{width:28px;height:28px}
.ui-ccard__val{color:var(--ui-ink);font-weight:500}
.ui-meta-list{display:grid;gap:var(--ui-space-3)}
@media (min-width:768px){.ui-meta-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
.ui-meta-list dt{font-size:var(--ui-type-label);font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ui-gold-text)}
.ui-meta-list dd{margin:2px 0 0;color:var(--ui-ink)}
.ui-note{font-size:var(--ui-type-small);color:var(--ui-ink-2)}
.ui-actions{display:flex;flex-wrap:wrap;gap:var(--ui-space-3)}
.ui-reviews{display:grid;gap:var(--ui-space-4)}
@media (min-width:768px){.ui-reviews{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}}
.ui-rev{margin:0;border:1px solid var(--ui-border);border-radius:var(--ui-radius-lg);background:var(--ui-raised);padding:var(--ui-space-5);display:flex;flex-direction:column;gap:var(--ui-space-3)}
.ui-rich .ui-rev blockquote{border:0;padding:0;color:var(--ui-ink)}
.ui-rev figcaption{display:flex;flex-direction:column;gap:2px;margin:0}
.ui-rev__name{color:var(--ui-gold-text);font-size:var(--ui-type-small);font-weight:500}
.ui-rev__when{color:var(--ui-ink-2);font-size:.8125rem}
.ui-reviews__src a{display:inline-flex;align-items:center;min-height:var(--ui-target)}