/* Practeca: the page styles on top of base.css and hero.css (sections, products, past work,
   inner pages, brand colours, motion). Loads last. */
/* ------------------------------------------------------------------ rhythm and type */
body{background:#fff}
.section{padding-block:clamp(5rem,11vw,9rem);position:relative}
.section + .section{border-top:0}
.sec-head{max-width:52rem;gap:1.25rem;margin-bottom:clamp(2.5rem,5vw,4.5rem)}
.sec-head h2,.split h2{font-size:clamp(2.25rem,4.6vw,4rem)!important;line-height:1.05;letter-spacing:-.035em}
:root:lang(ar) .sec-head h2,:root:lang(ar) .split h2{letter-spacing:0;line-height:1.35}
/* products heading: "Three products:" on its own line, then who each one is for, balanced so no word is left alone */
#offH .h-lead{display:block}
#offH,#offerings .sec-head .lede{text-wrap:balance}
.lede{font-size:clamp(1.125rem,1.5vw,1.3rem);max-width:44rem}
.kicker{font-size:.9375rem}
/* light, tinted and dark grounds. Dark re-declares the page tokens, so every existing component follows. */
.tone-light{background:#fff}
.tone-tint{background:#F3F7F6}
.tone-dark{
  --page:#0B1726; --card:#12263F; --raised:#162E4A; --border:#24405F; --border-subtle:#1D3552; --border-raised:#33557A; --border-field:#8497A9;
  --text:#F1F5F9; --text-body:#B4C4D3; --text-muted:#93A6B8; --text-faint:#7F93A6;
  --warn-text:#FCD34D; --warn-bg:rgba(245,158,11,.10); --warn-border:rgba(245,158,11,.45); --warn-dot:#F59E0B;
  --ok-text:#6EE7B7; --ok-bg:rgba(16,185,129,.12); --ok-border:rgba(16,185,129,.35);
  --btn-primary-bg:#2DD4BF; --btn-primary-fg:#12263F; --btn-primary-hover:#5EEAD4;
  --focus:#2DD4BF; --link:#5EEAD4; --teal-type:#5EEAD4;
  --shadow-card:0 1px 0 rgba(255,255,255,.04) inset; --shadow-raised:0 30px 60px -30px rgba(0,0,0,.6);
  background:radial-gradient(80% 60% at 50% 0%,#17324F 0%,transparent 70%),#0B1726;color:var(--text)}
.tone-dark::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:64px 64px;
  -webkit-mask-image:radial-gradient(70% 50% at 50% 0%,#000,transparent 75%);mask-image:radial-gradient(70% 50% at 50% 0%,#000,transparent 75%)}
.tone-dark > .wrap{position:relative}
/* two dark sections in a row read as one: the second starts without its own glow, grid or top padding */
.tone-dark + .tone-dark{padding-top:0;background:#0B1726}
.tone-dark + .tone-dark::before{display:none}
.tone-dark .kicker{color:#B4C4D3}
.tone-dark .kicker::before{background:#FB923C}
.tone-dark .offer .role{color:#5EEAD4}
.tone-dark :focus-visible{outline-color:#2DD4BF}
.tone-dark .btn-primary{background:#2DD4BF;color:#12263F}
.tone-dark .btn-primary:hover{background:#5EEAD4}
.tone-dark .card{background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.015));border-color:rgba(255,255,255,.09);box-shadow:0 30px 60px -40px rgba(0,0,0,.7)}
/* ------------------------------------------------------------------ What Practeca does: the rest orbits medicine */
.t-what .split{align-items:center}
@media (min-width:900px){
  .t-what .split{grid-template-columns:1fr 1fr}
}
.chores.orbit{position:relative}
@media (min-width:900px){
  .t-what .split > div:first-child{display:contents!important}
  .t-what .split{grid-template-columns:1fr 1.15fr;align-content:center;row-gap:1.5rem}
  .t-what .split > div:first-child > .kicker{grid-column:1;grid-row:1;align-self:end}
  .t-what .split > div:first-child > h2{grid-column:1;grid-row:2}
  html[lang="en"] #whatH{font-size:clamp(2.25rem,4vw,3.5rem)!important}
  .chores.orbit{grid-column:2;grid-row:1 / span 3;height:30rem;display:block}
  .chores.orbit li{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) translate(var(--x),var(--y));white-space:nowrap;font-size:1.0625rem;padding:.6rem 1.1rem;
        box-shadow:0 10px 24px -14px rgba(18,38,63,.35);background:#fff}
  .chores.orbit li.med{--x:0px;--y:0px;width:10.5rem;height:10.5rem;border-radius:50%;display:grid;place-items:center;font-size:2rem;font-weight:700;padding:0;
        background:radial-gradient(circle at 35% 30%,#1C8C82,#115E59);box-shadow:0 0 0 14px rgba(15,118,110,.08),0 0 0 32px rgba(15,118,110,.05),0 30px 60px -20px rgba(17,94,89,.6)}
  .chores.orbit li:nth-child(2){--x:-9.5rem;--y:-9rem}
  .chores.orbit li:nth-child(3){--x:9.5rem;--y:-9.5rem}
  .chores.orbit li:nth-child(4){--x:12.5rem;--y:.5rem}
  .chores.orbit li:nth-child(5){--x:9rem;--y:9.5rem}
  .chores.orbit li:nth-child(6){--x:-9rem;--y:9.5rem}
  .chores.orbit li:nth-child(7){--x:-12.5rem;--y:.5rem}
  .chores.orbit::before,.chores.orbit::after{content:"";position:absolute;left:50%;top:50%;border:1px dashed #CBD5E1;border-radius:50%;transform:translate(-50%,-50%);pointer-events:none}
  .chores.orbit::before{width:22rem;height:22rem}
  .chores.orbit::after{width:28rem;height:23rem;border-color:#E2E8F0}
  .t-what .split .body{grid-column:1;grid-row:3;align-self:start;font-size:1.1875rem}
}
/* ------------------------------------------------------------------ Offerings: each one shows its product */
.offers{display:grid!important;grid-template-columns:1fr!important;gap:clamp(4rem,9vw,7rem)}
.offer{display:grid;gap:clamp(1.5rem,4vw,4rem);align-items:center;padding:0;background:none!important;border:0!important;box-shadow:none!important}
@media (min-width:980px){
  .offer{grid-template-columns:1.25fr 1fr}
  .offer.o2{grid-template-columns:1fr 1.25fr}
  .offer.o2 .o-dev{order:2}
}
.o-text{display:grid;gap:1.1rem;max-width:32rem}
.o-text bdi{white-space:nowrap}
.offer h3{font-size:clamp(1.75rem,3vw,2.5rem);letter-spacing:-.025em}
.offer .role{font-size:1.125rem;margin-top:-.4rem}
.offer dd{font-size:1.0625rem}
.offer .answer{border-top-color:rgba(255,255,255,.1)}
.o-dev{position:relative;display:grid;place-items:center;min-height:18rem}
.o-dev::before{content:"";position:absolute;inset:8% 4%;background:radial-gradient(closest-side,rgba(45,212,191,.28),transparent);filter:blur(10px);z-index:0}
.o-dev > .dv{position:relative;z-index:1}
/* shared device language */
.dv{--navy:#12263F;--teal-type:#0F766E;--latin:var(--font-latin);--arabic:var(--font-arabic);color:#111827}
.num{font-family:var(--font-latin);font-variant-numeric:tabular-nums}
.dv .sig{display:inline-flex;align-items:flex-end;gap:2px}
.dv .sig i{width:3px;background:currentColor;border-radius:1px}
.dv .sig i:nth-child(1){height:4px}
.dv .sig i:nth-child(2){height:6px}
.dv .sig i:nth-child(3){height:8px}
.dv .sig i:nth-child(4){height:10px}
.dv .sig svg{width:15px;height:11px;margin-inline-start:4px}
.dv .bat b{display:block;width:23px;height:11px;border:1px solid rgba(0,0,0,.4);border-radius:3px;padding:1px}
.dv .bat b::before{content:"";display:block;height:100%;width:80%;background:currentColor;border-radius:1px}
.dv .fict{display:inline-flex;align-items:center;gap:.4em;font-size:.72em;font-weight:600;color:#5F6470;border:1px solid #E2E8F0;border-radius:999px;padding:.15em .7em;background:#fff;white-space:nowrap}
.dv .fict::before{content:"";width:.5em;height:.5em;border-radius:50%;background:#F26D00}
/* phone frame */
.dv-phone{width:min(300px,72vw);padding:9px;border-radius:52px;background:linear-gradient(160deg,#4A5B6E,#0B1520 35%,#0B1520 75%,#3A4B5E);
  box-shadow:0 0 0 1px rgba(255,255,255,.18) inset,0 60px 90px -40px rgba(0,0,0,.8),0 0 90px -20px rgba(45,212,191,.35);container-type:inline-size}
/* tablet: the patient file */
.dv-tab{width:min(680px,100%);aspect-ratio:4/3;padding:clamp(8px,1.2vw,14px);border-radius:clamp(20px,3vw,36px);background:linear-gradient(160deg,#2A3B4F,#0B1520 40%,#0B1520 70%,#243649);
  box-shadow:0 0 0 1px rgba(255,255,255,.12) inset,0 60px 100px -40px rgba(0,0,0,.8),0 0 110px -20px rgba(45,212,191,.4);container-type:inline-size}
.ts{height:100%;border-radius:clamp(12px,2vw,24px);overflow:hidden;background:#F7F9F8;display:grid;grid-template-columns:20% 1fr 29%;grid-template-rows:auto auto 1fr;font-size:1.95cqw;color:#1F2937}
[lang="ar"] .ts,.dv-tab[lang="ar"] .ts{font-family:var(--font-arabic)}
.ts-sb{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;padding:.4em 1.2em 0;background:#fff;font-family:var(--font-latin);font-size:.8em;font-weight:600;color:#111}
.ts-sb .ri{display:flex;align-items:center;gap:.4em;color:#111}
/* browser: the clinic's own website (Practeca Website) */
.dv-br{width:min(640px,100%);border-radius:16px;overflow:hidden;background:#fff;box-shadow:0 0 0 1px rgba(255,255,255,.12),0 60px 100px -40px rgba(0,0,0,.8),0 0 110px -20px rgba(45,212,191,.35);container-type:inline-size;position:relative}
.br-bar{display:flex;align-items:center;gap:6px;padding:10px 12px;background:#EEF1F4;border-bottom:1px solid #E2E8F0}
.br-bar i{width:10px;height:10px;border-radius:50%;background:#CBD5E1}
.br-bar .url{margin-inline-start:14px;flex:1;max-width:60%;background:#fff;border-radius:8px;padding:3px 10px;font-family:var(--font-latin);font-size:12px;color:#4B5563}
.site{font-size:1.9cqw;color:#1F2937;background:linear-gradient(180deg,#F0FDFA,#fff 60%)}
.dv-br[lang="ar"] .site{font-family:var(--font-arabic)}
.s-nav{display:flex;align-items:center;gap:.8em;padding:1em 1.6em}
.s-nav .logo-slot{width:2.2em;height:2.2em;border-radius:.6em;border:1.5px dashed #9CA3AF;display:grid;place-items:center;font-size:.55em;font-weight:700;color:#5F6470;background:#fff}
.s-nav b{color:#12263F}
.s-nav nav{display:flex;gap:1.4em;margin-inline-start:auto;font-size:.9em;color:#4B5563}
.s-cta{background:#12263F;color:#fff;border-radius:.6em;padding:.45em .9em;font-size:.85em;font-weight:600}
.s-hero{display:grid;grid-template-columns:1.2fr 1fr;gap:1.4em;padding:1.4em 1.6em 1.6em;align-items:center}
.s-hero h5{margin:0 0 .4em;font-size:2.5em;line-height:1.1;letter-spacing:-.03em;color:#12263F}
.dv-br[lang="ar"] .s-hero h5{letter-spacing:0;line-height:1.35;font-size:2.4em}
.s-hero p{margin:0 0 1em;color:#4B5563;font-size:1em;line-height:1.5}
.s-btns{display:flex;gap:.6em}
.s-btns span{border-radius:.6em;padding:.55em 1em;font-size:.9em;font-weight:600}
.s-btns .p{background:#0F766E;color:#fff}
.s-photo{aspect-ratio:4/5;border-radius:1em;border:1.5px dashed #9CA3AF;display:grid;place-items:center;color:#5F6470;font-size:.85em;
  background:repeating-linear-gradient(135deg,#F1F5F9 0 10px,#fff 10px 20px)}
.s-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:.8em;padding:0 1.6em 1.6em}
.s-cards div{display:flex;align-items:center;gap:.6em;background:#fff;border:1px solid #E2E8F0;border-radius:.8em;padding:.7em .8em;font-size:.85em;font-weight:600;color:#12263F}
.s-cards i{width:1.6em;height:1.6em;border-radius:.5em;background:#CCFBF1;flex:none}
.br-fict{position:absolute;bottom:10px;inset-inline-end:12px;font-size:11px}
.br-bar{direction:ltr}
/* past work sits on a light ground, after the dark products section */
.showcase .work{padding:clamp(1.25rem,3vw,2rem);border-radius:28px;background:#F3F7F6;border:1px solid #E2E8F0}
.showcase .work h3{font-size:clamp(1.25rem,2vw,1.6rem);color:#12263F}
.tone-light .showcase .work-stage .browser{box-shadow:0 40px 70px -40px rgba(18,38,63,.35),0 0 0 1px rgba(18,38,63,.06)}
.tone-light .showcase .phone{box-shadow:0 30px 50px -25px rgba(18,38,63,.45),0 0 0 1px rgba(18,38,63,.08)}
.about-block{padding:clamp(1.5rem,2.5vw,2.25rem)!important;border-radius:24px!important}
.about-block.exit{background:linear-gradient(160deg,#12263F,#0E3A4A)!important;border:0!important;color:#E6EDF3;box-shadow:0 40px 80px -40px rgba(18,38,63,.6)!important}
.about-block.exit p{color:#C9D6E2!important;font-size:1.125rem}
.about-block.exit .ic svg{color:#5EEAD4}
/* ------------------------------------------------------------------ FAQ */
.faq{max-width:56rem;display:grid;gap:.75rem}
.faq details{background:#fff;border:1px solid #E2E8F0!important;border-radius:18px;padding:.25rem 1.5rem;box-shadow:0 10px 30px -24px rgba(18,38,63,.4)}
.faq summary{font-size:clamp(1.125rem,1.6vw,1.3rem)!important;font-weight:600;padding-block:1.2rem!important}
.faq .ans{font-size:1.0625rem!important;padding-bottom:1.25rem}
/* ------------------------------------------------------------------ Forms: light cards on the dark ground */
#talk .form-card{--card:#fff;--page:#F7F9F8;--raised:#F1F5F9;--border:#E2E8F0;--border-subtle:#F1F5F9;--border-field:#6B7280;--text:#1F2937;--text-body:#4B5563;--text-muted:#5F6470;
  --btn-primary-bg:#12263F;--btn-primary-fg:#fff;--btn-primary-hover:#1B3556;--focus:#0F766E;--link:#0F766E;--err-text:#B91C1C;--teal-type:#0F766E;
  --info-text:#1D4ED8;--info-bg:#EFF6FF;--info-border:#BFDBFE;--ok-text:#047857;--ok-bg:#ECFDF5;--ok-border:#A7F3D0;
  background:#fff!important;color:#1F2937;border-radius:24px!important;border:0!important;padding:clamp(1.5rem,3vw,2.5rem)!important;box-shadow:0 40px 80px -40px rgba(0,0,0,.7)!important}
#talk .form-card :focus-visible{outline-color:#0F766E}
#talk .form-card .btn-primary{background:#12263F;color:#fff}
#talk .mail-line{color:#B4C4D3}
#talk .mail-line a{color:#5EEAD4}
/* footer */
footer{background:#07111D;color:#93A6B8;border-top:1px solid #1D3552}
footer a{color:#B4C4D3!important}
/* header over the whole page: keep it legible over light sections too */
.hx-top .hdr.scrolled{background:rgba(7,17,29,.86)}
/* motion below the hero: one easing and two durations for everything site.js runs (ease-out cubic, no overshoot) */
:root{--m-ease:cubic-bezier(.33,1,.68,1);--m-fade:.6s;--m-draw:1.4s}
/* the page's Arabic label size (:root:lang(ar) :is(.fict …)) must not reach the tablet screen, which scales with the tablet */
:root .hx .top .fict{font-size:.78em}
/* the global h1/h2 colour must not reach the hero */
.hx .copy h1{color:#fff}
.hx ul.hx-reassure{display:flex!important;flex-direction:row;border:0!important;padding:0!important;margin-top:.4rem!important;grid-template-columns:none}
.hx ul.hx-reassure li{color:#A9BBCC!important;border:0!important;padding:0!important;font-size:.9375rem}
@media (max-width:760px){
  .hx ul.hx-reassure{flex-direction:column!important}
  .hx ul.hx-reassure li{font-size:.875rem}
}
/* room for the reassurance row above the devices */
@media (min-width:761px){
  .hx .scene{margin-top:clamp(3rem,6.5vh,4.5rem)}
  .hx .phone-wrap{top:-2.75rem}
}
/* ------------------------------------------------------------------ Product screenshots, in the device frames */
/* Clinic System: the screenshot sits in the tablet under its status bar, on the product's own page grey */
.dv-shot{margin:0;position:relative}
.dv-shot .ts{display:flex;flex-direction:column;background:#F3F5F4}
.dv-shot .shot-body{flex:1;min-height:0;display:grid;place-items:center;padding:clamp(10px,2.4cqw,22px)}
.dv-shot .shot-body img{display:block;width:100%;height:auto;border-radius:clamp(8px,1.4cqw,14px);box-shadow:0 1px 3px rgba(18,38,63,.08)}
@media (max-width:600px){
  .dv-shot .br-fict{font-size:10px;bottom:6px}
}
/* the hero subline wraps into even lines rather than leaving one word alone */
.hx .copy .sub{text-wrap:balance}
/* the header button ("تواصل معنا" / "Contact us") stays on one line on phones */
.hx .act .btn-sm{white-space:nowrap}
@media (max-width:374px){
  .hx .act .btn-sm{padding-inline:.75rem}
}
/* ------------------------------------------------------------------ Home teasers: about, FAQ and contact link to their pages */
.teaser .sec-head{margin-bottom:clamp(1.5rem,3vw,2.25rem)}
.faq-links{list-style:none;margin:0 0 2rem;padding:0;display:grid;gap:.5rem;max-width:56rem}
@media (min-width:760px){
  .faq-links{grid-template-columns:1fr 1fr}
}
.faq-links a{display:flex;align-items:center;min-height:56px;padding:.875rem 1.25rem;background:#fff;border:1px solid #E2E8F0;border-radius:16px;color:#12263F;font-weight:600;text-decoration:none}
.faq-links a:hover{border-color:#0F766E}
.teaser-actions{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 2rem}
.teaser-actions .mail-line{margin:0}
#talk .mail-line{color:#B4C4D3}
#talk .mail-line a{color:#5EEAD4}
/* ------------------------------------------------------------------ Inner pages: a dark page head under the fixed header */
.page-head{padding-block:calc(var(--hdr,72px) + clamp(3rem,7vw,5.5rem)) clamp(3rem,6vw,4.5rem)}
.page-head .sec-head{margin-bottom:0}
.page-head h1{color:#fff;font-size:clamp(2.25rem,4.6vw,4rem);line-height:1.05;letter-spacing:-.035em}
:root:lang(ar) .page-head h1{letter-spacing:0;line-height:1.35}
.about-block h2{font-size:1.5rem}
.about-block.exit h2{color:#fff}
.page-cta{margin-top:clamp(2.5rem,5vw,4rem);display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.5rem}
.page-cta p{font-size:1.25rem;font-weight:600;color:#12263F}
.faq summary h2{margin:0;font:inherit;color:inherit;letter-spacing:inherit;line-height:1.4}
.faq details{scroll-margin-top:calc(var(--hdr,72px) + 1rem)}
/* ------------------------------------------------------------------ Contact form: one form, fields aligned in each row */
.forms.single{grid-template-columns:minmax(0,52rem)!important}
#talk .form-card h2{font-size:1.6rem}
/* each field keeps its own height; the row no longer stretches a field (and its input) to match a neighbour with a hint */
.row2{align-items:start}
.field{align-content:start}
/* the clinic website points patients to its app */
.s-stores .p{background:#12263F}
/* how the three products work together */
.flow{margin-top:clamp(4rem,9vw,7rem);display:grid;gap:1.5rem}
.flow-h{color:#fff;font-size:clamp(1.375rem,2.4vw,1.75rem)}
.flow-steps{list-style:none;margin:0;padding:0;display:grid;gap:1rem;counter-reset:none}
@media (min-width:860px){
  .flow-steps{grid-template-columns:repeat(3,1fr)}
}
.flow-steps li{display:grid;gap:.5rem;align-content:start;padding:1.25rem 1.25rem 1.375rem;border-radius:var(--r-card);
  background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.015));border:1px solid rgba(255,255,255,.09)}
.flow-n{display:grid;place-items:center;width:1.75rem;height:1.75rem;border-radius:50%;background:rgba(45,212,191,.12);border:1px solid rgba(45,212,191,.3);color:#5EEAD4;font-weight:700;font-size:.875rem}
.flow-steps b{color:#fff;font-size:1.0625rem}
.flow-steps p{margin:0;color:#B4C4D3;font-size:1rem}
/* ================================================================== Brand colours
   Navy #12263F leads (text, wordmark, the one colour that carries white type); teal #00A697 for marks, progress bars
   and dots, never behind text; orange #F26D00 for small dots and marks on white, never a button, never on navy.
   Roughly 80% navy and neutrals, 15% teal, 5% orange. See docs/BRAND.md. Last in the file so it wins. */
:root{--teal-fill-dk:#00A697;--orange-fill-dk:#F26D00;--teal-type:#12263F;--link:#12263F;--focus:#00A697}
a{text-decoration-color:#00A697;text-decoration-thickness:2px}
/* the hero: one teal, no orange on navy, ground is navy */
.hx{--deep:#12263F;--ink:#12263F;--teal:#00A697;--teal-2:#00A697;--teal-3:#00A697;--teal-type:#12263F;--wash:#F1F5F9;--hero-body:#CBD5E1}
/* depth comes from navy alone (a lit navy centre, deeper navy at the edges); the light the tablet rises out of is
   brand teal, below the copy, never behind text */
.hx .bg{background:radial-gradient(60% 50% at 50% 78%,rgba(0,166,151,.48),transparent 70%),radial-gradient(80% 60% at 50% 0%,#1D3A5C 0%,transparent 70%),radial-gradient(120% 90% at 50% 40%,#12263F 40%,#0A1828 100%)}
.hx .bg::before{background:conic-gradient(from 180deg at 50% -10%,transparent 42%,rgba(255,255,255,.09) 48%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.09) 52%,transparent 58%)}
.hx .copy h1 .b{background:none;-webkit-background-clip:border-box;background-clip:border-box;color:#fff}
.hx .copy h1 span.dot{display:inline;color:#00A697}
.hx-top .hdr.scrolled,.hx .hdr.scrolled{background:rgba(18,38,63,.94);border-bottom-color:rgba(255,255,255,.1)}
/* buttons on navy: white ground, navy type (teal never behind text) */
.hx .btn-p{background:#fff;color:#12263F;box-shadow:0 0 0 1px rgba(255,255,255,.3) inset,0 10px 34px -8px rgba(255,255,255,.35)}
.hx .btn-p:hover{background:#F1F5F9}
.hx .floor{background:radial-gradient(50% 50% at 50% 50%,rgba(0,166,151,.45),transparent 70%)}
.hx .tablet{box-shadow:0 0 0 1px rgba(255,255,255,.12) inset,0 0 0 2px #0B1520,0 60px 120px -30px rgba(0,0,0,.7),0 0 120px -10px rgba(0,166,151,.45)}
.hx .phone{box-shadow:0 0 0 1px rgba(255,255,255,.14) inset,0 50px 90px -25px rgba(0,0,0,.8),0 0 80px -10px rgba(0,166,151,.45)}
.hx .toast{background:rgba(255,255,255,.1)}
.hx .toast i{background:#00A697;color:#fff}
/* the example tablet: status chips are navy type with a coloured dot, not tinted grounds */
.hx .chip.ok,.hx .chip.or,.hx .main h3 small{background:#F1F5F9;color:#12263F;display:inline-flex;align-items:center;gap:.4em}
.hx .chip.ok::before,.hx .chip.or::before{content:"";width:.5em;height:.5em;border-radius:50%;background:#00A697}
.hx .chip.or::before{background:#F26D00}
.hx .row.now .chip{background:#12263F;color:#fff}
.hx .msg.new{background:#F7F9F8}
.hx .top .me{background:#00A697}
/* dark sections: navy ground, white type; teal only as marks */
.tone-dark{--page:#12263F;--text:#FFFFFF;--text-body:#CBD5E1;--text-muted:#9CA3AF;--text-faint:#9CA3AF;--focus:#00A697;--link:#fff;--teal-type:#CBD5E1;--btn-primary-bg:#fff;--btn-primary-fg:#12263F;--btn-primary-hover:#F1F5F9;
  background:#12263F}
.tone-dark + .tone-dark{background:#12263F}
.tone-dark .kicker::before{background:#00A697}
.tone-dark .offer .role{color:#CBD5E1}
.tone-dark :focus-visible{outline-color:#00A697}
.tone-dark .btn-primary{background:#fff;color:#12263F}
.tone-dark .btn-primary:hover{background:#F1F5F9}
.tone-dark a{color:#fff}
.o-dev::before{background:radial-gradient(closest-side,rgba(0,166,151,.22),transparent)}
.dv-phone{box-shadow:0 0 0 1px rgba(255,255,255,.18) inset,0 60px 90px -40px rgba(0,0,0,.7),0 0 90px -20px rgba(0,166,151,.30)}
.dv-tab{box-shadow:0 0 0 1px rgba(255,255,255,.12) inset,0 60px 100px -40px rgba(0,0,0,.7),0 0 110px -20px rgba(0,166,151,.30)}
.dv-br{box-shadow:0 0 0 1px rgba(255,255,255,.12),0 60px 100px -40px rgba(0,0,0,.7),0 0 110px -20px rgba(0,166,151,.30)}
.flow-n{background:transparent;border:2px solid #00A697;color:#fff}
.flow-steps p{color:#CBD5E1}
#talk .mail-line,#talk .mail-line a{color:#fff}
footer{background:#12263F;color:#CBD5E1;border-top:1px solid rgba(255,255,255,.12)}
footer a{color:#CBD5E1!important}
/* light grounds: navy type; teal only as marks */
.offer .role{color:#12263F}
.about-block.exit .ic svg,.exit .ic svg,.expect svg{color:#00A697}
.exit{border-inline-start-color:#00A697}
.faq-links a:hover{border-color:#00A697}
#talk .form-card :focus-visible{outline-color:#00A697}
/* the example devices (patient app, clinic website, tablet): same rules */
.dv{--teal-type:#12263F}
.s-btns .p{background:#12263F}
.s-cards i{background:transparent;border:2px solid #00A697}
.tone-dark .kicker{color:#CBD5E1}
.hx ul.hx-reassure li{color:#CBD5E1!important}
.hx .nav a{color:#CBD5E1}
/* "Medicine" at the centre of the orbit: navy carries the white type, teal is the ring around it */
.chores li.med{background:#12263F;border-color:#12263F;color:#fff}
.chores.orbit li.med{background:#12263F;box-shadow:0 0 0 3px #fff,0 0 0 6px #00A697,0 0 0 26px rgba(0,166,151,.06),0 30px 60px -20px rgba(18,38,63,.45)}
.about-block.exit p{color:#CBD5E1!important}
#talk .form-card{--text-muted:#6B7280}
/* navy leads: headings and primary text on light grounds are navy; body copy stays the neutral grey */
:root{--text:#12263F}
.tone-light,.tone-tint{--text:#12263F}
.tone-light h2,.tone-light h3,.tone-tint h2,.page-cta p{color:#12263F}
.about-block.exit{background:#12263F!important}
/* focus rings stay brand teal: 5.02:1 on navy and 3.04:1 on white, both over WCAG's 3:1 for focus indicators */
/* Nabd's card links to its live site (new tab) */
figcaption .work-visit{display:inline-flex;align-items:center;gap:.35rem;margin-top:.35rem;font-weight:600;font-size:.9375rem;color:#12263F;text-decoration:underline;text-decoration-color:#00A697;text-decoration-thickness:2px;text-underline-offset:4px;min-height:44px}
figcaption .work-visit:hover{text-decoration-color:#12263F}
a.work-stage{display:block;color:inherit;text-decoration:none;border-radius:12px}
a.work-stage:hover .browser{transform:translateY(-3px)}
a.work-stage .browser{transition:transform .25s ease}
@media (prefers-reduced-motion:reduce){
  a.work-stage .browser{transition:none}
  a.work-stage:hover .browser{transform:none}
}
[dir="rtl"] .work-visit svg{transform:scaleX(-1)}
/* ================================================================== The hero on laptop-height screens
   Up to 900 px tall, the copy scales with the height so the device scene starts high enough for the entrance to play
   on screen. Taller screens and phones are unchanged. */
.hx .copy .sub{max-width:52rem}
@media (min-width:761px) and (max-height:900px){
  .hx .copy{padding-top:calc(var(--hdr) + clamp(.75rem,3.2vh,2.5rem));gap:min(1.25rem,1.9svh)}
  .hx .copy h1{font-size:clamp(2.4rem,min(5vw,7.6svh),4.9rem)}
  .hx .copy h1:lang(ar),:lang(ar) .hx .copy h1{font-size:clamp(2.6rem,min(6vw,7.4svh),5.8rem);line-height:1.18}
  .hx .scene{margin-top:clamp(1.25rem,3.6vh,3rem)}
  /* the floating notifications sit beside the headline, clear of the subtitle and the reassurance row */
  .hx .toasts{top:calc(var(--hdr) + clamp(1.5rem,6vh,4.5rem))}
  .hx .toast:nth-child(2){top:min(5.25rem,8.5svh)}
  .hx .toast:nth-child(3){top:min(2.4rem,4svh)}
}
/* the second notification sits further out so it clears the wide English headline; below 1200 px there is no room beside
   the copy, so it is left out (the other two still arrive) */
.hx .toast:nth-child(2){inset-inline-start:max(1.5vw,calc(50% - 680px))}
@media (max-width:1199px){
  .hx .toast:nth-child(2){display:none}
}
/* ================================================================== Motion below the hero
   Every rule here is a start state (.armed / .rv-armed, added by site.js only when motion is allowed) or a transition
   (.mo / .rv). Without JS, under reduced motion, or once played, the page is the static design. One easing, no bounce. */
/* What Practeca does: the chores gather around "Medicine" */
.chores.mo li:not(.med){transition:opacity var(--m-fade) var(--m-ease) calc(var(--i,0) * 70ms + .1s),transform var(--m-fade) var(--m-ease) calc(var(--i,0) * 70ms + .1s)}
.chores.armed li:not(.med){opacity:0;transform:translateY(6px)}
@media (min-width:900px){
  .chores.orbit.armed li:not(.med){transform:translate(-50%,-50%) translate(calc(var(--x) * .55),calc(var(--y) * .55))}
}
/* How the three work together: the steps arrive in order (no connector line; the numbers carry the sequence) */
.flow.mo .flow-steps li{transition:opacity var(--m-fade) var(--m-ease) calc(var(--i,0) * 350ms),transform var(--m-fade) var(--m-ease) calc(var(--i,0) * 350ms)}
.flow.armed .flow-steps li{opacity:0;transform:translateY(8px)}
/* gentle reveals: section heads and inner-page blocks */
.rv{transition:opacity var(--m-fade) var(--m-ease) calc(var(--i,0) * var(--rv-step,80ms)),transform var(--m-fade) var(--m-ease) calc(var(--i,0) * var(--rv-step,80ms))}
.rv-armed .rv,.rv-armed.rv{opacity:0;transform:translateY(12px)}
@media (prefers-reduced-motion:reduce){
  .rv,.chores li,.flow-steps li{transition:none!important}
}
/* ================================================================== The hero devices on phones
   Side by side, never overlapping: the tablet (clinic system) on the inline-start side, the phone (patient app) beside it
   on the same baseline, both upright and whole, each with a short label. They still tilt flat together on scroll.
   --pw is the phone's width and --px its offset (phone + gap), both as a share of the tablet's width (--tw). */
.hx .dev-label{display:none}
@media (max-width:760px){
  [data-hero="whole"] .hx .stage{--pw:.385;--px:.435;--py:0;
      --tw:min(calc((100vw - 2rem) / (1 + var(--px))),calc((100svh - var(--hdr) - 2 * var(--gap)) / 1.25));
      padding-bottom:3.5rem}
  .hx .phone-tilt{transform:none}
  .hx .dev-label{display:block;position:absolute;inset-inline:0;top:calc(100% + .7rem);text-align:center;
      font-size:.8125rem;font-weight:600;color:#CBD5E1;white-space:nowrap;letter-spacing:.01em}
}
/* ================================================================== Patient-app screens
   The hero phone and the Practeca Patient card show screens from the real patient app (demo data, clinic details
   replaced). The image fills the phone's screen; the frame's own rounding clips it. */
.pscr.shot{padding:0!important;gap:0!important;overflow:hidden;background:#F7F5F2;display:block}
.pscr.shot img{display:block;width:100%;height:100%;object-fit:cover;object-position:top center}
.dv .pscr.shot{aspect-ratio:390/844;border-radius:calc(100cqw * 46 / 390)}
.o-dev .o-cap{position:relative;z-index:1;margin:.9rem 0 0;text-align:center;color:#CBD5E1}