@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Sans+Arabic:wght@400;500;600;700&family=IBM+Plex+Sans:wght@400;500;600;700&display=swap");
/* GSEIN site theme (from the Coverage page): a dark brand band at the top of every page,
   the light paper page below it, white cards with soft borders and rounded corners,
   mint for actions and active states, metallic gold only for key figures. Styling only:
   no markup, link or route depends on this file. */
:root{--st-ink:#0B181A;--st-ink-2:#13272A;--st-mint:#67DEC1;--st-mint-ink:#0E6B57;--st-paper:#FBFAF6;--st-card:#fff;
  --st-line:#E6E3DA;--st-line-2:#F0EEE7;--st-fg:#14211F;--st-muted:#5E6B68;--st-faint:#8C9794;
  --st-band:radial-gradient(1200px 400px at 85% -10%,#1C3A3D 0,transparent 60%),#0B181A}
html[data-page] body{background:var(--st-paper)!important;color:var(--st-fg)}

/* Type, as on the Coverage page: IBM Plex Sans (Latin), IBM Plex Sans Arabic, IBM Plex Mono for figures. */
:root{--st-font:"IBM Plex Sans","IBM Plex Sans Arabic",system-ui,"Segoe UI",Arial,sans-serif;--st-font-ar:"IBM Plex Sans Arabic","IBM Plex Sans",Tahoma,"Segoe UI",sans-serif;--st-mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace}
html[data-page] body,html[data-page] body :is(h1,h2,h3,h4,h5,h6,p,a,span,li,dt,dd,button,input,select,textarea,label,small,strong,b,em,td,th,div,section,article,nav,main,header,footer,figcaption,blockquote){font-family:var(--st-font)!important}
html[data-page][lang="ar"] body,html[data-page][lang="ar"] body :is(h1,h2,h3,h4,h5,h6,p,a,span,li,dt,dd,button,input,select,textarea,label,small,strong,b,em,td,th,div,section,article,nav,main,header,footer,figcaption,blockquote),
html[data-page][lang="fa"] body,html[data-page][lang="fa"] body :is(h1,h2,h3,h4,h5,h6,p,a,span,li,dt,dd,button,input,select,textarea,label,small,strong,b,em,td,th,div,section,article,nav,main,header,footer,figcaption,blockquote){font-family:var(--st-font-ar)!important}
html[data-page] main[lang="en"] :is(h1,h2,h3,h4,h5,h6,p,a,span,li,td,th,div,small,strong){font-family:var(--st-font)!important}
html[data-page][lang] body :is(code,pre,kbd,samp,.cov-num,.cov-cc,.itg-num){font-family:var(--st-mono)!important}
html[data-page] body main[lang="en"] :is(.subpage-hero,.legal-hero,.page-hero) h1{font-weight:700!important;letter-spacing:-.02em!important}

/* Top band: every subpage hero becomes the dark band. */
html[data-page] .subpage-hero,html[data-page] .inst-hero{background:var(--st-band)!important;color:#E9F1EF;border-bottom:0!important}
html[data-page] .subpage-hero:before{background-image:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px)!important}
html[data-page] .subpage-hero h1,html[data-page] .inst-hero h1{color:#fff!important}
html[data-page] .subpage-hero p,html[data-page] .inst-hero .inst-heading p:not(.section-kicker){color:#B9C8C4!important}
html[data-page] .subpage-hero .section-kicker,html[data-page] .subpage-hero .faq-kicker,html[data-page] .inst-hero .section-kicker{color:var(--st-mint)!important}
html[data-page] .subpage-hero .breadcrumbs,html[data-page] .subpage-hero .breadcrumbs a{color:#8DA29D!important}
html[data-page] .subpage-hero .breadcrumbs a:hover{color:var(--st-mint)!important}
html[data-page] .subpage-hero .governance-pill{background:rgba(103,222,193,.12)!important;color:var(--st-mint)!important}
html[data-page] .inst-hero .inst-switch a{border-color:rgba(255,255,255,.18)!important;color:#E9F1EF!important;background:transparent!important}
html[data-page] .inst-hero .inst-switch a:hover{border-color:var(--st-mint)!important;color:var(--st-mint)!important}

/* Page sections on paper; the alternate band a shade deeper. */
html[data-page] .page-section,html[data-page] .section{background:var(--st-paper)}
html[data-page] .page-section.alt{background:#F4F2EC!important}
html[data-page] main .section-kicker{color:var(--st-mint-ink)}

/* Cards: white, soft border, rounded, mint on hover. */
html[data-page] :is(.principle-card,.governance-card,.page-mini-stat,.faq-item,.feature-card,.home-metric-card,.country-status-card,.inst-plan,.result-card,.profile-main,.contact-card){
  background:var(--st-card)!important;border:1px solid var(--st-line)!important;border-radius:18px!important;box-shadow:0 1px 2px rgba(11,24,26,.04)!important}
html[data-page] :is(.principle-card,.governance-card,.feature-card,.inst-plan):hover{border-color:var(--st-mint)!important}
html[data-page] :is(.principle-card span,.governance-card .governance-index,.feature-index){color:var(--st-mint-ink)!important}
html[data-page] .feature-card{border-top:1px solid var(--st-line)!important}
html[data-page] .home-metric-card strong,html[data-page] .home-metric-card .home-metric-value{background:var(--gsein-gold-shine);-webkit-background-clip:text;background-clip:text;color:transparent}
html[data-page] .content-aside nav a:hover,html[data-page] .content-aside nav a[aria-current]{color:var(--st-mint-ink)!important}

/* Actions: mint with dark text; ghost buttons outlined. */
html[data-page] .button-accent{background:var(--st-mint)!important;color:var(--st-ink)!important;border-color:var(--st-mint)!important}
html[data-page] .button-accent:hover{filter:brightness(.95)}
html[data-page] main a:not(.button):not(.cov-chip):focus-visible,html[data-page] main button:focus-visible{outline:2px solid var(--st-mint);outline-offset:2px}

/* Footer joins the band. */
html[data-page] .site-footer{background:var(--st-ink)!important}
html[data-page] .inst-hero .inst-switch{background:rgba(255,255,255,.06)!important;border:1px solid rgba(255,255,255,.12)!important;box-shadow:none!important}
html[data-page] .inst-hero .inst-switch a{border:0!important}

/* Brand: the approved gold logo (G + GSEIN) with the tagline beside it on one line, in soft gold capitals
   (Noor, 2026-10-20: no mint, the same single line in every language). */
html body .brand .brand-lockup{display:block;height:40px;width:auto;flex:none}
html body .shell-footer .brand .brand-lockup{height:44px}
html body .brand .brand-copy small{color:#D9BC74!important;font-size:.62rem!important;font-weight:600;letter-spacing:.12em;text-transform:uppercase;line-height:1.35;max-width:none;white-space:nowrap}
html[lang="ar"] body .brand .brand-copy small,html[lang="fa"] body .brand .brand-copy small{letter-spacing:0;font-size:.72rem!important}
html[lang="zh-CN"] body .brand .brand-copy small,html[lang="hi"] body .brand .brand-copy small{letter-spacing:.04em;font-size:.7rem!important}
/* On narrower screens the header tagline gives way first, so the links always stay on one row. */
@media(max-width:1240px){html body .site-header .brand .brand-copy small{display:none!important}}
@media(max-width:760px){html body .site-header .brand .brand-lockup{height:34px}}

/* Header, as in the Coverage preview: one dark band with the hero and pill links. The active page is white
   with a thin gold underline (Noor, 2026-10-19: no mint highlight); every link keeps the same box, so no link moves. */
html body .site-header{background:#0B181A!important;border-bottom:1px solid rgba(255,255,255,.07)!important}
html body .site-header .shell-nav-link{color:#B9C8C4!important;font-size:14px!important;font-weight:500!important;padding:6px 12px!important;border-radius:999px!important;border:0!important;margin-inline-start:0!important}
html body .site-header .shell-nav-link:hover{color:#fff!important;background:rgba(255,255,255,.06)!important}
html body .site-header .shell-nav-link.is-active{color:#fff!important;background:transparent!important;font-weight:500!important}
html body .site-header .shell-nav-link.is-active:after{display:block!important;content:""!important;position:absolute!important;left:12px!important;right:12px!important;bottom:0!important;height:2px!important;border-radius:2px!important;background:linear-gradient(90deg,#F3D27A,#C9952F)!important}
html body .site-header .shell-mobile-nav .shell-nav-link.is-active:after{left:50%!important;right:auto!important;width:56px!important;bottom:4px!important;transform:translateX(-50%)!important}
/* GSEIN Portal link: gold text instead of mint (Noor, 2026-10-19), same box as the other links; active keeps the gold underline. */
html body .site-header .shell-desktop-nav .shell-nav-link[data-shell-link="company"]{color:#F3D27A!important;background:transparent!important}
html body .site-header .shell-desktop-nav .shell-nav-link[data-shell-link="company"]:hover{color:#FCE7A8!important;background:rgba(255,255,255,.06)!important}
html body .site-header .shell-language select{border-radius:999px!important;background:transparent!important;border-color:rgba(255,255,255,.18)!important;color:#E9F1EF!important;font-size:13px!important;font-weight:500!important}
html body .site-header .shell-language select option{color:#14211F;background:#fff}
html body .site-header .shell-language select:hover,html body .site-header .shell-language select:focus-visible{border-color:#E7C679!important}
html body :is(.site-header,.shell-mobile-nav,.site-footer) :is(a,button,select,input,textarea,summary):focus-visible{outline-color:#E7C679!important}
html[data-page] .cov select{border-radius:12px!important}

/* One heading scale on every page, as on Coverage (Noor, 2026-10-19): page titles 36px desktop, section titles 24px (Noor: smaller, calm and consistent),
   the same weight, start alignment and hero spacing everywhere. */
html[data-page] body main h1,html[data-page] body .hero h1,html[data-page] body :is(.subpage-hero,.legal-hero,.inst-hero,.hero-copy,.cov-hero) h1{font-size:clamp(26px,3vw,36px)!important;font-weight:700!important;line-height:1.2!important;letter-spacing:-.01em!important;max-width:none!important;text-align:start!important;margin-inline:0!important}
html[data-page][lang="ar"] body main h1,html[data-page][lang="fa"] body main h1,html[data-page][lang="ar"] body .hero h1,html[data-page][lang="fa"] body .hero h1{line-height:1.3!important;letter-spacing:0!important}
html[data-page] body :is(.subpage-hero,.inst-hero) p{text-align:start!important;margin-inline:0!important}
html[data-page] body .inst-hero :is(.shell,.inst-hero-inner,header){text-align:start!important}
html[data-page] body :is(.subpage-hero,.legal-hero){padding-top:48px!important;padding-bottom:40px!important}
html[data-page] body .inst-hero{padding-top:48px!important}
html[data-page] body main h2:not(.sr-only):not(:is(.contact-card,.company-portal-nav,.cov-region,.cov-rhead) h2){font-size:clamp(20px,2vw,24px)!important;font-weight:700!important;line-height:1.3!important;letter-spacing:-.01em!important}
html[data-page][lang="ar"] body main h2,html[data-page][lang="fa"] body main h2{letter-spacing:0!important;line-height:1.4!important}
html[data-page] body .cov-hero{padding-top:48px!important}
html[data-page] body .inst-hero :is(.inst-heading,.section-kicker){text-align:start!important;margin-inline:0!important;max-width:none!important}
html[data-page] body .inst-hero .inst-switch{margin-inline:0!important;justify-content:flex-start!important}
html[data-page] body .inst-group-head{text-align:start!important;margin-inline:0!important}
html[data-page] body .inst-group-head p{margin-inline:0!important}

/* One hero layout on every page (Noor, 2026-10-19): title, then one lede line, same spacing and colours.
   Breadcrumbs are not shown (the header already marks the current page); every hero keeps one kicker line. Links in the header and footer are unchanged. */
html[data-page] body :is(.subpage-hero,.legal-hero,.inst-hero,.cov-hero) .breadcrumbs{display:none!important}
/* Every hero opens with the same small kicker as Pricing: a short gold rule, then the label in mint. */
html[data-page] body :is(.subpage-hero,.legal-hero,.inst-hero,.cov-hero) :is(.section-kicker,.faq-kicker,.cov-eyebrow,.governance-pill),html[data-page] body .hero .eyebrow{display:inline-flex!important;align-items:center!important;gap:8px!important;margin:0 0 12px!important;padding:0!important;background:none!important;border:0!important;box-shadow:none!important;border-radius:0!important;color:var(--st-mint)!important;font-size:13px!important;font-weight:600!important;line-height:1.4!important;letter-spacing:.06em!important;text-transform:uppercase!important;order:0}
html[data-page][lang="ar"] body :is(.subpage-hero,.legal-hero,.inst-hero,.cov-hero,.hero) :is(.section-kicker,.faq-kicker,.cov-eyebrow,.governance-pill,.eyebrow),html[data-page][lang="fa"] body :is(.subpage-hero,.legal-hero,.inst-hero,.cov-hero,.hero) :is(.section-kicker,.faq-kicker,.cov-eyebrow,.governance-pill,.eyebrow){letter-spacing:0!important}
html[data-page] body :is(.subpage-hero,.legal-hero,.inst-hero,.cov-hero) :is(.section-kicker,.faq-kicker,.cov-eyebrow,.governance-pill):before,html[data-page] body .hero .eyebrow:before{content:""!important;display:inline-block!important;width:14px!important;height:2px!important;margin:0!important;border-radius:2px!important;background:linear-gradient(90deg,#F3D27A,#C9952F)!important;flex:0 0 auto}
html[data-page] body :is(.subpage-hero,.legal-hero,.inst-hero,.cov-hero) .governance-pill:after,html[data-page] body .hero .eyebrow .eyebrow-dot{display:none!important}
html[data-page] body :is(.subpage-hero,.legal-hero,.inst-hero,.cov-hero) .governance-pill svg{display:none!important}
html[data-page] body :is(.subpage-hero,.inst-hero,.cov-hero) h1{margin:0 0 12px!important}
html[data-page] body :is(.subpage-hero,.inst-hero) .shell,html[data-page] body .inst-hero .inst-heading{display:flex!important;flex-direction:column;align-items:flex-start}
html[data-page] body :is(.subpage-hero,.inst-hero,.cov-hero) :is(h1+p,.cov-lede,.inst-heading>p:not(.section-kicker)){font-size:16px!important;line-height:1.7!important;color:#B9C8C4!important;max-width:68ch!important;margin:0!important}
html[data-page] body :is(.subpage-hero,.legal-hero,.inst-hero,.cov-hero){padding-top:48px!important}
html[data-page] body :is(.subpage-hero,.legal-hero){padding-bottom:40px!important}

/* Footer: three balanced link columns and social buttons in the site theme (Noor, 2026-10-19). */
html body .site-footer .shell-footer-grid{grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,1fr))!important;gap:48px!important}
@media(max-width:900px){html body .site-footer .shell-footer-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:32px!important}}
@media(max-width:560px){html body .site-footer .shell-footer-grid{grid-template-columns:1fr 1fr!important}}
html body .site-footer .footer-social{display:flex!important;gap:10px!important}
html body .site-footer .footer-social a{width:36px!important;height:36px!important;padding:0!important;border-radius:999px!important;border:1px solid rgba(255,255,255,.18)!important;background:transparent!important;color:#E9F1EF!important;display:grid!important;place-items:center!important;overflow:visible!important}
html body .site-footer .footer-social a svg{width:16px!important;height:16px!important;fill:currentColor!important}
html body .site-footer .footer-social a:hover,html body .site-footer .footer-social a:focus-visible{border-color:#E7C679!important;color:#E7C679!important;background:rgba(231,198,121,.08)!important}
/* Footer column headings in soft gold, links turn gold on hover (Noor, 2026-10-20: no mint). */
html body .site-footer .shell-footer-grid>div>strong{color:#D9BC74!important}
html body .site-footer .shell-footer-grid a:hover{color:#E7C679!important}
html[data-page] body .subpage-hero .page-mini-stat{background:#13272A!important;border:1px solid rgba(255,255,255,.08)!important;box-shadow:none!important}
html[data-page] body .subpage-hero .page-mini-stat strong{color:#fff!important;font-family:var(--st-mono)!important;font-weight:500!important}
html[data-page] body .subpage-hero .page-mini-stat span{color:#9FB3AE!important}

/* Smooth page-to-page navigation (Noor, 2026-10-19): the header and footer stay put while the new page fades in
   over the old one. The old page stays fully visible underneath, so the light page never dims through the dark
   background between the two (Noor, 2026-10-20: the transition looked messy). */
@view-transition{navigation:auto}
::view-transition-old(root){animation:none!important;mix-blend-mode:normal!important}
::view-transition-new(root){animation:220ms ease-out both st-fade-in!important;mix-blend-mode:normal!important}
@keyframes st-fade-in{from{opacity:0}}
@media(prefers-reduced-motion:reduce){@view-transition{navigation:none}}
/* Search boxes on Coverage and Data Integrity: the rounded box shows the focus ring, so the input inside
   it gets no second (dark, square) outline from brand.css. */
html[data-page] body :is(.cov-search,.itg-search) input:is(:focus,:focus-visible){outline:none!important;box-shadow:none!important}