/* Additions to the original Gene Matrix styles (site.css is the original build — don't edit it). */

/* Noura buttons in the header */
.gm-portal-btn{display:inline-flex;align-items:center;gap:.4rem;height:2.25rem;padding:0 .75rem;border-radius:.375rem;
  font-size:.75rem;font-weight:600;white-space:nowrap;border:1px solid hsl(var(--primary) / .35);color:hsl(var(--primary-dark));
  background:hsl(var(--primary) / .06);transition:var(--transition-base)}
.gm-portal-btn:hover{background:hsl(var(--primary) / .12);border-color:hsl(var(--primary))}
.gm-portal-btn svg{width:1rem;height:1rem;flex-shrink:0}
.gm-portal-btn:focus-visible{outline:2px solid hsl(var(--ring));outline-offset:2px}

/* Digital-health block in the footer */
.gm-digital a{display:inline-flex;align-items:center;gap:.5rem}

/* Mobile menu panel */
.gm-mobile{border-top:1px solid hsl(var(--border));background:hsl(var(--background))}
.gm-mobile[hidden]{display:none}
.gm-mobile nav{display:flex;flex-direction:column;padding:.75rem 1rem 1.25rem;gap:.125rem}
.gm-mobile nav a{padding:.75rem .5rem;border-radius:.375rem;font-size:.95rem;font-weight:500;color:hsl(var(--foreground) / .8)}
.gm-mobile nav a[aria-current="page"]{color:hsl(var(--primary))}
.gm-mobile .gm-mobile-actions{display:grid;gap:.5rem;padding:.5rem 1rem 1.25rem}
.gm-mobile .gm-mobile-actions a{justify-content:center;height:2.75rem;font-size:.875rem}
@media (min-width:1024px){.gm-mobile{display:none!important}}

/* Accordion & checkbox (were React widgets) */
[role="region"][hidden]{display:none}
button[role="checkbox"]{display:inline-grid;place-items:center}
button[role="checkbox"][data-state="checked"]{background:hsl(var(--primary));border-color:hsl(var(--primary));color:hsl(var(--primary-foreground))}

/* Form status line */
.gm-form-note{font-size:.8rem;color:hsl(var(--muted-foreground));margin-top:.5rem}
.gm-form-note.err{color:hsl(var(--destructive))}

/* ---------------- Arabic (RTL) ---------------- */
@font-face{font-family:"Noto Sans Arabic";font-style:normal;font-display:swap;font-weight:400;src:url(/assets/fonts/noto-sans-arabic-arabic-400-normal.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0898-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:"Noto Sans Arabic";font-style:normal;font-display:swap;font-weight:500;src:url(/assets/fonts/noto-sans-arabic-arabic-500-normal.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0898-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:"Noto Sans Arabic";font-style:normal;font-display:swap;font-weight:600;src:url(/assets/fonts/noto-sans-arabic-arabic-600-normal.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0898-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:"Noto Sans Arabic";font-style:normal;font-display:swap;font-weight:700 800;src:url(/assets/fonts/noto-sans-arabic-arabic-700-normal.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0898-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}

[lang="ar"] body,[lang="ar"] input,[lang="ar"] textarea,[lang="ar"] select,[lang="ar"] button{font-family:"Noto Sans Arabic",Inter,system-ui,sans-serif}
/* Arabic script has no capitals and must not be letter-spaced (it breaks the joins). */
[lang="ar"] *{letter-spacing:0!important}
[lang="ar"] .uppercase{text-transform:none}
[lang="ar"] h1,[lang="ar"] h2,[lang="ar"] h3{line-height:1.35}
[lang="ar"] p,[lang="ar"] li{line-height:1.85}

/* Physical-direction utilities used by the original layout, mirrored for RTL. */
[dir="rtl"] .text-left{text-align:right}
[dir="rtl"] .left-3{left:auto;right:.75rem}
[dir="rtl"] .left-4{left:auto;right:1rem}
[dir="rtl"] .pl-9{padding-left:.75rem;padding-right:2.25rem}
[dir="rtl"] .pl-8{padding-left:0;padding-right:2rem}
[dir="rtl"] .-left-\[42px\]{left:auto;right:-42px}
[dir="rtl"] .-right-2{right:auto;left:-.5rem}
[dir="rtl"] .right-0{right:auto;left:0}
[dir="rtl"] .border-l-4{border-left-width:0;border-right-width:4px}
[dir="rtl"] .border-l-2{border-left-width:0;border-right-width:2px}
[dir="rtl"] .bg-gradient-to-r{background-image:linear-gradient(to left,var(--tw-gradient-stops))}
/* Directional icons (arrows, chevrons) point the other way in Arabic. */
[dir="rtl"] .lucide-arrow-right,[dir="rtl"] .lucide-chevron-right,[dir="rtl"] .lucide-arrow-left,[dir="rtl"] .lucide-chevron-left,[dir="rtl"] .lucide-arrow-up-right{scale:-1 1} /* `scale` composes with hover translate */
/* Keep numbers, emails, phone numbers and Latin codes in their natural order inside Arabic text. */
[dir="rtl"] a[href^="tel:"],[dir="rtl"] a[href^="mailto:"]{direction:ltr;unicode-bidi:isolate}

/* Language switch */
.gm-lang{display:inline-flex;align-items:center;height:2.25rem;padding:0 .7rem;border-radius:.375rem;font-size:.8rem;font-weight:600;
  color:hsl(var(--foreground) / .75);border:1px solid hsl(var(--border));background:transparent;transition:var(--transition-base)}
.gm-lang:hover{color:hsl(var(--primary));border-color:hsl(var(--primary) / .4)}
.gm-lang-m{display:inline-flex;align-items:center;justify-content:center;height:2.5rem;padding:0 .75rem;font-size:.85rem;font-weight:600;color:hsl(var(--primary-dark))}
@media (min-width:1024px){.gm-lang-m{display:none}}
[dir="rtl"] .callout-card:before{left:auto;right:0;border-radius:.25rem 0 0 .25rem}

/* =====================================================================================
   Design polish pass (2026-11). Everything below refines the original look; nothing in site.css is changed.
   ===================================================================================== */

/* ---- Tokens used only by this layer ---- */
:root{
  --gm-teal-text:182 83% 24%;   /* teal for small text on light/tinted surfaces: 5.4–6.1:1 (brand teal is 4.2–4.8:1 there) */
  --gm-teal-on-navy:182 55% 60%;/* teal for text on navy: 8:1 */
  --gm-field-border:211 14% 58%;/* form-field outline: 3.1:1 against white (WCAG 1.4.11) */
}
.gm-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}

/* ---- Typography ---- */
/* Arabic fallback for Arabic words on English pages (footer "تطبيق نورة", the «العربية» switch). Loaded only when Arabic glyphs appear. */
body{font-family:Inter,"Noto Sans Arabic",system-ui,-apple-system,sans-serif}
/* site.css pins headings to Inter, which has no Arabic: Arabic headings fell back to the OS font. */
[lang="ar"] h1,[lang="ar"] h2,[lang="ar"] h3,[lang="ar"] h4,[lang="ar"] h5,[lang="ar"] h6{font-family:"Noto Sans Arabic",Inter,system-ui,sans-serif}
[lang="ar"] h1{line-height:1.3}
/* Balanced headline wrapping (no one-word last lines) and fewer orphans in paragraphs. */
h1,h2,h3{text-wrap:balance}
p,li,dd{text-wrap:pretty}
/* Arabic needs ~1px more than Latin at small sizes to keep dots and joins legible. Header controls keep their size (space). */
[lang="ar"] main .text-xs,[lang="ar"] footer .text-xs,[lang="ar"] .eyebrow,[lang="ar"] .gm-mobile .text-xs{font-size:.8125rem;line-height:1.35rem}
[lang="ar"] .text-\[10px\],[lang="ar"] .text-\[11px\]{font-size:.8rem;line-height:1.15rem}
[lang="ar"] .eyebrow{font-weight:700}
.text-\[10px\]{font-size:11px}
/* Values in small cards must not break between number and unit ("+10" / "Pa"). */
.tabular-nums{white-space:nowrap}

/* ---- Contrast ---- */
.eyebrow{color:hsl(var(--gm-teal-text))}
.text-primary:not(footer *):not(.bg-navy *):not(.bg-gradient-hero *):not(.bg-primary):not(.bg-primary *){color:hsl(var(--gm-teal-text))}
footer .text-primary\/80{color:hsl(var(--gm-teal-on-navy))}
footer .text-primary{color:hsl(var(--gm-teal-on-navy))}
.bg-saudi .text-white\/75,section .text-white\/75{color:rgb(255 255 255 / .88)}
.bg-gradient-hero .text-white\/80{color:rgb(255 255 255 / .9)}
.text-primary\/30{color:hsl(var(--primary) / .75)}                 /* step numerals: 3.1:1 (large bold) */
footer input::placeholder{color:rgb(255 255 255 / .65)}
/* Pressure cascade (Inside the factory): light steps get dark teal / navy text. */
.bg-primary\/10.text-primary,.bg-primary\/20.text-primary{color:hsl(var(--primary-dark))!important}
.bg-primary\/40.text-white{color:hsl(var(--navy))}
.bg-primary\/10.text-primary .opacity-90,.bg-primary\/20.text-primary .opacity-90,.bg-primary\/40.text-white .opacity-90{opacity:1}
/* Form fields: visible boundary. */
main input.border-input,main select.border-input,main textarea.border-input{border-color:hsl(var(--gm-field-border))}
main button[role="checkbox"]{border-color:hsl(var(--primary))}

/* ---- Focus (keyboard) ---- */
a:focus-visible,summary:focus-visible,button:focus-visible{outline:2px solid hsl(var(--ring));outline-offset:2px;border-radius:.25rem}
footer a:focus-visible,footer button:focus-visible,.bg-navy a:focus-visible,.bg-gradient-hero a:focus-visible,.bg-saudi a:focus-visible{outline-color:#fff}
/* Inputs keep their original ring. */

/* ---- Floor plan (SVG) ---- */
/* Light rooms: dark labels instead of white (was 1.3–2.1:1). */
svg rect[fill="hsl(var(--primary) / 0.5)"]~text,svg rect[fill="hsl(var(--primary) / 0.3)"]~text,svg rect[fill="hsl(var(--primary) / 0.18)"]~text{fill:hsl(var(--navy))}
/* Narrow rooms (18 units): smaller label so it fits instead of being clipped. */
svg g:has(> rect[width="18"]) text[font-size="2"]{font-size:1.5px}

/* ---- Kit-page FAQ (<details>): visible affordance and a full-card hit area ---- */
details.group{padding:0}
details.group>summary{position:relative;padding:1.125rem 1.25rem;padding-inline-end:3rem;min-height:44px;border-radius:inherit}
details.group>summary::-webkit-details-marker{display:none}
details.group>summary::after{content:"";position:absolute;inset-inline-end:1.25rem;top:50%;width:1rem;height:1rem;margin-top:-.5rem;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f2843' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat;
  transition:transform .2s}
details.group[open]>summary::after{transform:rotate(180deg)}
details.group>summary:hover{color:hsl(var(--primary-dark))}
details.group>p{margin-top:0;padding:0 1.25rem 1.25rem}

/* ---- Touch targets (phones/tablets) ---- */
button[role="checkbox"]{position:relative;width:1.125rem;height:1.125rem}
button[role="checkbox"]::after{content:"";position:absolute;inset:-13px}
@media (max-width:1023px){
  header button[aria-expanded]{width:2.75rem;height:2.75rem}
  .gm-lang-m{height:2.75rem;margin-inline-start:auto}  /* sits with the menu button instead of floating mid-header */
  main input.h-10,main select.h-10,footer input.h-10{height:2.75rem}
  footer button.h-9{height:2.75rem;padding:0 1rem}
  main nav.mb-6 a{display:inline-block;padding-block:.875rem;margin-block:-.875rem}  /* breadcrumb (its aria-label is translated) */
  main a[href^="mailto:"],main a[href^="tel:"]{display:inline-block;padding-block:.75rem;margin-block:-.75rem}
  main a.inline-flex.text-sm:not([class*=" h-"]),main a.group.inline-flex:not([class*=" h-"]){padding-block:.75rem;margin-block:-.75rem}
  footer ul.space-y-2\.5>:not([hidden])~:not([hidden]){margin-top:0}
  footer ul.space-y-2\.5 a{display:inline-flex;align-items:center;min-height:2.75rem}
  footer ul.space-y-3 a{display:inline-flex;align-items:center;min-height:2.75rem;margin-block:-.75rem}
}

/* ---- Home hero stat strip on phones ---- */
@media (max-width:639px){
  dl.grid-cols-3 dd.text-2xl{font-size:clamp(1.05rem,4.6vw,1.5rem);line-height:1.25;white-space:nowrap}
  dl.grid-cols-3{gap:1rem}
}

/* ---- Header: language switch, Noura App, Health Portal ---- */
.gm-portal-btn .gm-portal-label{display:inline}
header .gm-lang{margin-inline-end:.375rem;position:relative}
header .gm-lang::after{content:"";position:absolute;inset-inline-end:-.5rem;top:.5rem;bottom:.5rem;width:1px;background:hsl(var(--border))}
header .lg\:flex .gm-portal-btn{color:hsl(var(--navy))}
header .lg\:flex .gm-portal-btn svg{color:hsl(var(--primary))}
header .container-prose>nav a{white-space:nowrap}
/* 1024–1279px: there isn't room for 7 links + 4 controls. Products collapse to icon buttons (name kept for AT + tooltip). */
@media (min-width:1024px) and (max-width:1279px){
  header .container-prose>nav a{padding-inline:.5rem}
  header .lg\:flex .gm-portal-btn{width:2.25rem;padding:0;justify-content:center}
  header .lg\:flex .gm-portal-btn .gm-portal-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}
[lang="ar"] header .container-prose>nav a{font-size:.9375rem}

/* ---- Mobile menu ---- */
.gm-mobile nav a{min-height:2.75rem;display:flex;align-items:center;padding-inline:.75rem}
.gm-mobile nav a[aria-current="page"]{background:hsl(var(--primary) / .08);font-weight:600}
.gm-mobile nav a:hover{background:hsl(var(--surface))}
.gm-mobile .gm-mobile-actions{border-top:1px solid hsl(var(--border));padding-top:1rem}
.gm-btn-primary{background:hsl(var(--primary));color:hsl(var(--primary-foreground));border-color:hsl(var(--primary))}
.gm-btn-primary:hover{background:hsl(var(--primary-dark));border-color:hsl(var(--primary-dark))}
.gm-mobile-label{margin:.75rem .25rem 0;font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.12em;color:hsl(var(--muted-foreground))}
.gm-mobile-portals{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}
.gm-mobile .gm-mobile-portals a{justify-content:center;height:2.75rem;font-size:.8125rem;padding:0 .5rem}
@media (max-width:359px){.gm-mobile-portals{grid-template-columns:1fr}}

/* ---- Footer "Digital Health" ---- */
.gm-digital a svg{width:1rem;height:1rem;flex-shrink:0;color:hsl(var(--gm-teal-on-navy))}
.gm-digital a .gm-ext{width:.75rem;height:.75rem;opacity:.7;color:currentColor}
[dir="rtl"] .gm-digital a .gm-ext{scale:-1 1}

/* ---- RTL completions ---- */
[dir="rtl"] .bg-gradient-hero{background-image:linear-gradient(225deg,hsl(211 64% 16%) 0%,hsl(182 86% 19%) 60%,hsl(182 83% 28%) 100%)}
@media (min-width:768px){
  [dir="rtl"] .md\:text-left{text-align:right}
  [dir="rtl"] .md\:-left-\[54px\]{left:auto;right:-54px}
  [dir="rtl"] .md\:pl-12{padding-left:0;padding-right:3rem}
}
/* Email addresses are typed and read left-to-right, also on Arabic pages. */
[dir="rtl"] input[type="email"],[dir="rtl"] input[type="tel"]{direction:ltr;text-align:right}
[dir="rtl"] input[type="email"]:placeholder-shown,[dir="rtl"] input[type="tel"]:placeholder-shown{text-align:right}
/* Short Latin tokens inside Arabic sentences ("700 m²", "Real-Time PCR", "96-well") never break across lines. */
.gm-nw{white-space:nowrap}
/* Arabic header controls: 13px where the header has room. */
@media (min-width:1280px){[lang="ar"] header .lg\:flex .text-xs,[lang="ar"] header .gm-portal-btn,[lang="ar"] header .gm-lang{font-size:.8125rem}}
/* Inter's stylistic sets (cv11, ss01) from site.css must not reach the Arabic font. */
[lang="ar"],[lang="ar"] *{font-feature-settings:normal}
/* Gradient text is painted only inside the span's box; Arabic dots below the baseline (e.g. final ي) fell outside it. */
[lang="ar"] .bg-clip-text{padding-block:.08em .3em;-webkit-box-decoration-break:clone;box-decoration-break:clone}