/* ==========================================================================
Platform Technologies — Marketing Site
Design language derived from the "Platform New" Figma file:
warm cream ground, navy ink, tan panels, editorial serif + tight sans,
pill actions, floating chip labels over clinical media.
========================================================================== */
/* ---------- 1. Tokens ---------------------------------------------------- */
/* ---------- Palette ----------------------------------------------------------
The only raw colours in the site. Everything else references these through
the theme roles below (which switch for dark mode) or uses them directly.
Brand: forest green from the logo. Neutrals: ink tinted toward that green.
Separate on purpose: the ClinicPro product UI kit (Figma navy palette),
WhatsApp green and the ClinicPro wordmark red. */
:root{
/* brand greens */
--green-900:#143A21; /* footer, deepest brand surface */
--green-800:#1E5A2D; /* accent hover, icon ink on tints */
--green-700:#27763B; /* primary accent: buttons, links, eyebrows */
--green-500:#2F8D46; /* logo green */
--green-400:#7ABF44; /* logo lime: accents on dark surfaces */
--green-100:#E7F5E0; /* accent tint */
/* ink (green-tinted neutrals, dark to light) */
--ink-950:#0A171C; --ink-930:#0D1D23; --ink-920:#10232A; /* dark-mode grounds */
--ink-900:#122E35; /* headings, dark cards */
--ink-800:#24424B; --ink-700:#3E5059; --ink-600:#455E68; --ink-500:#566773;
--ink-300:#8FA8A5; --ink-200:#B9CCCA; --ink-100:#E3EEEC; /* text on dark */
--sage-600:#5B716D; /* ClinicPro About panel */
/* paper */
--paper-50:#FBFCF9; --paper-100:#F3F5F0; --paper-200:#ECEFE8; --paper-300:#DCE3DE;
/* status */
--red-700:#C0312B; --red-300:#FFA9A5; --red-50:#FDECEA;
--amber-700:#A96300; --amber-50:#FFF3E0;
--blue-700:#2563A8; --blue-50:#E8F1FB;
/* aqua glass (matches the interoperability artwork) */
--aqua-700:#1B6F80; --aqua-200:#BFE6EE; --aqua-100:#DDF2F6; --aqua-50:#EEF9FB;
/* sub-brands */
--whatsapp:#25D366;
}
/* ---------- end palette */
/* ---------- Theme roles: what each colour is for. Dark mode reassigns these
in glass.css; components use roles, never raw palette for themed parts. */
:root{
/* text */
--ink: var(--ink-900); /* headings */
--ink-2: var(--ink-800);
--ink-3: var(--ink-600);
--body: var(--ink-700); /* body copy */
--body-2: var(--ink-500); /* secondary copy */
/* grounds */
--page: var(--paper-100); /* page background */
--page-alt: var(--paper-200); /* alternate band */
--surface: var(--paper-50); /* cards, form */
--white: #FFFFFF;
/* legacy ground names, kept so older rules resolve to the palette */
--cream: var(--paper-50); --cream-2: var(--paper-50); --sand: var(--paper-100); --tan: var(--paper-100);
--tan-2: var(--paper-300); --blue-soft: var(--paper-100); --peach: var(--paper-100);
/* accent */
--accent: var(--green-700);
--accent-2: var(--green-800);
--accent-tint: var(--green-100);
--brand-pure: var(--green-500);
--brand-100: var(--green-100);
--brand-400: var(--green-400);
--forest: var(--green-900);
--dark: var(--green-900); /* the one dark brand surface: CTA, cards, footer */
--gold: var(--green-700);
/* lines & shadow (ink-900 at low alpha) */
--line: rgba(18,46,53,.13);
--line-2: rgba(18,46,53,.09);
--sh-sm: 0 1px 2px rgba(18,46,53,.06), 0 4px 12px rgba(18,46,53,.05);
--sh-md: 0 2px 4px rgba(18,46,53,.06), 0 12px 28px rgba(18,46,53,.08);
--sh-lg: 0 4px 10px rgba(18,46,53,.07), 0 24px 60px rgba(18,46,53,.12);
--sh-chip:0 1px 2px rgba(18,46,53,.10), 0 8px 20px rgba(18,46,53,.14);
--glass-bg: rgba(255,255,255,.70);
--glass-bg-strong:rgba(255,255,255,.84);
--glass-line: rgba(255,255,255,.68);
--glass-surface: var(--surface);
--glass-border: rgba(255,255,255,.86);
--glass-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 12px 36px rgba(18,46,53,.08), 0 1px 3px rgba(18,46,53,.07);
/* Radii */
--r-xs: 8px; --r-sm: 12px; --r-md: 18px; --r-lg: 26px; --r-xl: 34px;
--pill: 999px;
/* Rhythm */
--hdr-h: 72px;
--gutter: clamp(20px, 4vw, 56px);
--maxw: 1200px;
--section-y: clamp(72px, 9vw, 132px);
/* Type */
/* Two faces only, per Platform-new/DESIGN.md section 3:
Manrope carries display + headings + UI labels, Inter carries body copy. */
--display: "Manrope", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
--sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
/* ---------- 2. Reset ----------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:88px; }
body{
margin:0;
background:var(--cream);
color:var(--body);
font-family:var(--sans);
font-size:16px;
line-height:1.65;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
overflow-x:hidden;
}
img,svg{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; }
h1,h2,h3,h4{ font-family:var(--display); color:var(--ink); margin:0; }
p{ margin:0; }
ul{ margin:0; padding:0; list-style:none; }
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:4px; }
/* ---------- 3. Layout ---------------------------------------------------- */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }
.wrap--wide{ max-width:1360px; }
/* Keep full-bleed cards clear of the fixed slide dots and floating actions,
which live in the right margin; mirrored left so the card stays centred. */
@media (min-width:821px){ .wrap--wide{ padding-inline:max(var(--gutter), 96px); } }
.section{ padding-block:var(--section-y); }
.section--tight{ padding-block:clamp(52px,6vw,88px); }
.bg-cream{ background:var(--cream); }
.bg-cream2{ background:var(--cream-2); }
.bg-sand{ background:var(--sand); }
.bg-white{ background:var(--white); }
.bg-ink{ background:var(--ink); }
/* ---------- 4. Type ------------------------------------------------------ */
.display{
font-family:var(--display);
font-weight:800;
letter-spacing:-.033em;
line-height:1.04;
font-size:clamp(2.5rem, 5.6vw, 4.2rem);
color:var(--ink);
}
.h-display{
font-family:var(--display);
font-weight:700;
letter-spacing:-.015em;
line-height:1.1;
font-size:clamp(2rem, 4vw, 3.1rem);
color:var(--ink);
}
.h3{
font-family:var(--display);
font-weight:700;
letter-spacing:-.02em;
line-height:1.2;
font-size:clamp(1.25rem, 1.9vw, 1.6rem);
color:var(--ink);
}
.h4{ font-family:var(--display); font-weight:700; letter-spacing:-.012em; font-size:1.0625rem; color:var(--ink); }
.lede{ font-size:clamp(1.02rem, 1.25vw, 1.18rem); line-height:1.6; color:var(--body); max-width:56ch; }
.sub{ font-size:.95rem; line-height:1.6; color:var(--body); }
.eyebrow{
font-size:.72rem; font-weight:620; letter-spacing:.14em; text-transform:uppercase;
color:var(--gold);
}
.center{ text-align:center; }
.center .lede{ margin-inline:auto; }
.measure{ max-width:62ch; }
.mt-s{ margin-top:.9rem; } .mt-m{ margin-top:1.6rem; } .mt-l{ margin-top:clamp(32px,4vw,56px); }
/* ---------- 5. Buttons --------------------------------------------------- */
.btn{
--btn-bg:var(--accent); --btn-fg:#fff; --btn-bd:transparent;
display:inline-flex; align-items:center; gap:.5em;
padding:.78em 1.4em;
background:var(--btn-bg); color:var(--btn-fg);
border:1px solid var(--btn-bd);
border-radius:var(--pill);
font-family:var(--display); font-size:.9375rem; font-weight:600; letter-spacing:-.006em;
cursor:pointer; white-space:nowrap;
transition:transform .18s cubic-bezier(.2,.7,.3,1), box-shadow .18s ease, background .18s ease, color .18s ease;
}
.btn:hover{ transform:translateY(-1.5px); box-shadow:var(--sh-md); }
.btn:active{ transform:translateY(0); }
.btn .arw{ transition:transform .2s cubic-bezier(.2,.7,.3,1); }
.btn:hover .arw{ transform:translate(2px,-2px); }
.btn--ink{ --btn-bg:var(--ink); --btn-fg:#fff; }
.btn--ghost{ --btn-bg:transparent; --btn-fg:var(--ink); --btn-bd:var(--line); }
.btn--ghost:hover{ --btn-bg:rgba(18,46,53,.04); }
.btn--onink{ --btn-bg:#fff; --btn-fg:var(--ink); }
.btn--onink-ghost{ --btn-bg:transparent; --btn-fg:#fff; --btn-bd:rgba(255,255,255,.32); }
.btn--onink-ghost:hover{ --btn-bg:rgba(255,255,255,.10); }
.btn--sm{ padding:.6em 1.05em; font-size:.875rem; }
.btn--accent{ --btn-bg:var(--accent); --btn-fg:#fff; }
.btn--block{ width:100%; justify-content:center; }
.linkarw{
display:inline-flex; align-items:center; gap:.4em;
font-size:.9375rem; font-weight:560; color:var(--accent);
}
.linkarw:hover{ color:var(--accent-2); }
.linkarw svg{ transition:transform .2s cubic-bezier(.2,.7,.3,1); }
.linkarw:hover svg{ transform:translateX(3px); }
/* ---------- 6. Header ---------------------------------------------------- */
.hdr{
position:sticky; top:0; z-index:60;
background:var(--page);
backdrop-filter:saturate(1.75) blur(18px);
-webkit-backdrop-filter:saturate(1.75) blur(18px);
border-bottom:1px solid rgba(255,255,255,.65);
box-shadow:0 1px 0 rgba(18,46,53,.04);
transition:border-color .25s ease, background .25s ease, box-shadow .25s ease;
}
.hdr.is-stuck{
border-bottom-color:rgba(18,46,53,.08);
background:var(--page);
box-shadow:0 10px 36px rgba(18,46,53,.08);
}
.hdr__in{ display:flex; align-items:center; gap:clamp(16px,3vw,40px); height:72px; }
.brand{ display:inline-flex; align-items:center; gap:.6em; flex:0 0 auto; }
.brand__mark{ width:30px; height:30px; flex:0 0 auto; }
.brand__name{
font-family:var(--display); font-weight:800; letter-spacing:-.028em; font-size:1.11rem; color:var(--ink); line-height:1.15;
}
.brand__name small{ display:block; font-size:.60rem; font-weight:560; letter-spacing:.11em;
text-transform:uppercase; color:var(--body-2); }
.nav{ display:flex; align-items:center; gap:clamp(12px,2vw,28px); margin-inline:auto; }
.nav a{
font-family:var(--display); font-size:.9rem; font-weight:600; color:var(--ink-2); padding:.35em 0;
border-bottom:1.5px solid transparent; transition:color .16s, border-color .16s;
}
.nav a:hover{ color:var(--ink); border-bottom-color:var(--line); }
.nav a[aria-current=page]{ color:var(--ink); border-bottom-color:var(--ink); }
.hdr__cta{ display:flex; align-items:center; gap:14px; flex:0 0 auto; }
.hdr__login{ font-size:.9rem; font-weight:520; color:var(--ink-2); }
.hdr__login:hover{ color:var(--ink); }
.burger{
display:none; width:42px; height:42px; align-items:center; justify-content:center;
background:transparent; border:1px solid var(--line); border-radius:var(--pill); cursor:pointer;
}
.burger span{ display:block; width:16px; height:1.6px; background:var(--ink); position:relative; transition:.2s; }
.burger span::before,.burger span::after{
content:""; position:absolute; left:0; width:16px; height:1.6px; background:var(--ink); transition:.2s;
}
.burger span::before{ top:-5px; } .burger span::after{ top:5px; }
.burger[aria-expanded=true] span{ background:transparent; }
.burger[aria-expanded=true] span::before{ top:0; transform:rotate(45deg); }
.burger[aria-expanded=true] span::after{ top:0; transform:rotate(-45deg); }
/* ---------- 7. Chips (floating labels over media) ------------------------ */
.chip{
display:inline-flex; align-items:center; gap:.55em;
padding:.6em .95em .6em .6em;
background:rgba(255,255,255,.78); border:1px solid rgba(255,255,255,.76); border-radius:var(--pill);
box-shadow:var(--sh-chip), inset 0 1px 0 rgba(255,255,255,.9);
backdrop-filter:blur(16px) saturate(1.4);
-webkit-backdrop-filter:blur(16px) saturate(1.4);
font-size:.875rem; font-weight:580; letter-spacing:-.01em; color:var(--ink);
white-space:nowrap;
}
.chip__ico{
width:28px; height:28px; flex:0 0 auto; display:grid; place-items:center;
border-radius:9px; background:var(--accent-tint); color:var(--accent-2);
}
.chip__ico svg{ width:16px; height:16px; }
.chip--tan .chip__ico{ background:var(--tan); color:var(--green-800); }
.chip--peach .chip__ico{ background:var(--peach); color:var(--green-800); }
.chip--card{
display:block; padding:1.05rem 1.15rem; border-radius:var(--r-md);
white-space:normal; max-width:290px; text-align:left;
}
.chip--card .chip__hd{ display:flex; align-items:center; gap:.55em; margin-bottom:.6rem;
font-size:.9rem; font-weight:640; color:var(--ink); }
.chip--card ul{ display:grid; gap:.45rem; }
.chip--card li{
display:flex; gap:.5em; font-size:.82rem; font-weight:480; line-height:1.42; color:var(--ink-2);
}
.chip--card li svg{ width:14px; height:14px; flex:0 0 auto; margin-top:.28em; color:var(--accent); }
/* ---------- 8. Media panels --------------------------------------------- */
/* .media__frame is the photo slot. Drop an ![]()
inside to
swap the generated scene for real photography — nothing else changes. */
.media{ position:relative; border-radius:var(--r-lg); }
.media__frame{
position:relative; border-radius:var(--r-lg); overflow:hidden;
background:var(--tan-2);
box-shadow:var(--sh-md), inset 0 1px 0 rgba(255,255,255,.34);
border:1px solid rgba(255,255,255,.58);
aspect-ratio:16/10;
}
.media__frame--tall{ aspect-ratio:4/3; }
.media__frame--wide{ aspect-ratio:21/9; }
.media__img{ width:100%; height:100%; object-fit:cover; }
.media__scene{ position:absolute; inset:0; width:100%; height:100%; }
.media__frame > .media__img + .media__scene,
.wfcard__media > img + svg{ display:none; }
.media .chip{ position:absolute; z-index:2; }
.chip-tl{ top:6%; left:-3%; }
.chip-tr{ top:9%; right:-4%; }
.chip-bl{ bottom:9%; left:-4%; }
.chip-br{ bottom:7%; right:-3%; }
@media (max-width:820px){
.chip-tl,.chip-bl{ left:6px; } .chip-tr,.chip-br{ right:6px; }
.chip{ font-size:.76rem; padding:.5em .8em .5em .5em; }
.chip__ico{ width:24px; height:24px; border-radius:8px; }
.chip--card{ max-width:210px; }
}
/* ---------- 9. Hero ------------------------------------------------------ */
.hero{ position:relative; background:var(--sand); padding-block:clamp(48px,6vw,80px) clamp(64px,8vw,110px); }
.hero::after{
content:""; position:absolute; inset:auto 0 0 0; height:200px;
background:linear-gradient(to bottom, rgba(250,251,248,0), var(--cream));
pointer-events:none;
}
.hero__in{ position:relative; z-index:1; }
.hero__head{ max-width:840px; margin-inline:auto; text-align:center; }
.hero__head .lede{ margin:1.15rem auto 0; }
.hero__actions{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:1.9rem; }
.hero__note{ margin-top:1.15rem; font-size:.83rem; color:var(--body-2); }
.hero__media{ margin-top:clamp(40px,5vw,66px); max-width:940px; margin-inline:auto; }
/* ---------- 9b. Photographic hero ---------------------------------------
Full-bleed media card with the headline overlaid. Swap .herofig__scene for
and nothing else changes. */
.hero--photo{ background:var(--cream); padding-block:clamp(8px,1.2vw,16px) 0; }
.hero--photo::after{ display:none; }
.herofig{
--tab-r:var(--r-xl);
position:relative; overflow:hidden;
border-radius:var(--r-xl) var(--r-xl) 0 var(--r-xl);
min-height:clamp(460px, 74vh, 760px);
display:grid; grid-template-columns:minmax(0,1fr); place-items:center start;
isolation:isolate;
}
.herofig__bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.herofig__bg--left{ object-position:left center; }
.herofig__bg--right{ object-position:right center; }
.herofig__bg--top{ object-position:center 35%; }
/* Schools slide: the photo is widened on the left (soft blur) so the nurse and student sit clear of the headline. */
.herofig__bg--school{ object-position:12% center; }
@media (max-width:820px){ .herofig__bg--school{ object-position:74% center; } }
/* Kept light on purpose: enough to hold white text, not enough to kill the
sunset. Legibility comes mostly from the text-shadows below. */
/* Two layers: a tight pool of shade directly behind the copy so text never has
to fight whatever is in the image, plus a gentle overall grade. Sized in %
so it tracks the copy block at any viewport. */
.herofig__scrim{
position:absolute; inset:0; z-index:1;
/* Shade only where the copy sits, so the right half of each photo reads. */
background:linear-gradient(90deg,
rgba(18,46,53,.80) 0%, rgba(18,46,53,.62) 34%, rgba(18,46,53,.18) 62%, rgba(18,46,53,0) 80%);
}
/* Spacing is sized against viewport height so the column keeps clear air
above and below on short laptop screens instead of filling the photo. */
.herofig__body{
position:relative; z-index:2; text-align:left; color:#fff;
width:min(600px, 100%);
padding:clamp(32px,6vh,72px) 0 clamp(40px,7vh,80px) clamp(28px,4.6vw,76px);
}
.herofig__body h1{
color:#fff; max-width:11em; margin:0;
font-weight:800; letter-spacing:-.025em; line-height:.98;
font-size:clamp(2.5rem, min(4.8vw, 7.4vh), 4.9rem);
text-wrap:balance;
}
.herofig__body .eyebrow{ color:var(--brand-400); margin-bottom:clamp(.8rem,1.8vh,1.2rem); }
.herofig__lede{
margin:clamp(1rem,2.4vh,1.6rem) 0 0; max-width:47ch;
font-size:clamp(.98rem, min(1.15vw, 2.1vh), 1.12rem); line-height:1.6;
color:rgba(255,255,255,.84);
}
.herofig__actions{ display:flex; flex-wrap:wrap; gap:12px; justify-content:flex-start; margin-top:clamp(1.4rem,3.6vh,2.4rem); }
.herofig__contact{
list-style:none; padding:0;
display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-start;
gap:0; margin-top:clamp(.8rem,1.8vh,1.1rem); opacity:.8;
}
.herofig__contact li + li::before{
content:""; display:inline-block; width:1px; height:.9em; margin:0 .9em;
background:rgba(255,255,255,.4); vertical-align:middle;
}
.herofig__contact a{
color:rgba(255,255,255,.9);
font-family:var(--display); font-size:.82rem; font-weight:600;
font-variant-numeric:tabular-nums; text-decoration:none;
text-shadow:0 1px 12px rgba(18,46,53,.5);
}
.herofig__contact a:hover{ color:#fff; text-decoration:underline; text-underline-offset:3px; }
/* Credential tab: a bite out of the photo's bottom-right corner, filled with
the page colour. The two pseudo-elements draw the concave fillets where the
tab meets the photo edge (shadow-spread trick, no gradients). */
.herotab{
position:absolute; z-index:3; right:0; bottom:0;
display:flex; align-items:center; gap:clamp(14px,1.6vw,22px);
padding:clamp(14px,2vh,20px) clamp(20px,2.4vw,32px) 0 clamp(20px,2.2vw,30px);
background:var(--page);
border-top-left-radius:var(--tab-r);
}
.herotab::before,.herotab::after{
content:""; position:absolute; width:var(--tab-r); height:var(--tab-r);
border-bottom-right-radius:var(--tab-r);
box-shadow:calc(var(--tab-r) / 2) calc(var(--tab-r) / 2) 0 calc(var(--tab-r) / 2) var(--page);
pointer-events:none; z-index:-1;
}
/* 1px overlap into the tab hides the anti-aliasing seam at each join. */
.herotab::before{ right:0; bottom:calc(100% - 1px); }
.herotab::after{ right:calc(100% - 1px); bottom:0; }
.herotab__lbl{
margin:0; max-width:8.5em;
font-family:var(--display); font-size:.72rem; font-weight:700; line-height:1.3;
letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3);
}
.herotab__logos{
list-style:none; margin:0; padding:0;
display:flex; align-items:center; gap:clamp(14px,1.6vw,22px);
}
.herotab__logos li + li{ padding-left:clamp(14px,1.6vw,22px); border-left:1px solid var(--line); }
/* multiply drops any white matte in the source PNGs onto the tab colour. */
.herotab__logos img{
display:block; width:auto; height:clamp(38px,5.2vh,50px); max-width:180px; object-fit:contain;
mix-blend-mode:multiply;
}
html[data-theme="dark"] .herotab__logos img{ mix-blend-mode:normal; }
.btn--onphoto{ --btn-bg:#fff; --btn-fg:var(--ink); --btn-bd:transparent; }
.btn--onphoto-glass{ --btn-bg:transparent; --btn-fg:#fff; --btn-bd:rgba(255,255,255,.7); }
.btn--onphoto-glass:hover{ --btn-bg:rgba(255,255,255,.12); }
.herofig__note{
position:relative; z-index:2; margin-top:.9rem;
font-size:.8rem; color:rgba(255,255,255,.74); text-shadow:0 1px 12px rgba(18,46,53,.5);
}
@media (max-width:820px){
/* Copy covers far more of the image when stacked, so lean harder on the
scrim to keep white text off the busy window grid. */
.herofig__scrim{
background:
linear-gradient(to bottom, rgba(18,46,53,.42) 0%, rgba(18,46,53,.22) 22%, rgba(18,46,53,.46) 60%, rgba(18,46,53,.66) 100%),
radial-gradient(96% 62% at 50% 48%, rgba(18,46,53,.56) 0%, rgba(18,46,53,0) 76%);
}
}
@media (max-width:640px){
.herofig{ border-radius:var(--r-lg) var(--r-lg) 0 var(--r-lg); min-height:clamp(420px,68vh,560px); }
.herofig__body{ padding-inline:20px; }
.herofig__body h1{ max-width:8em; font-size:clamp(2.15rem,5.7vh,2.85rem); }
.herofig__actions .btn{ flex:1 1 auto; justify-content:center; }
.herofig__contact{ gap:4px 16px; }
.herofig__contact a{ font-size:.8rem; }
.herofig__contact li + li::before{ display:none; }
/* Stacked in flow on phones: copy, slide controls, then the credential tab. */
.herofig{ --tab-r:var(--r-lg); display:flex; flex-direction:column; align-items:stretch; }
html.deck .hero--photo > .wrap,
html.deck .hero--photo > .wrap > .herofig{ max-height:none; }
.herofig__body{ order:1; width:auto; padding:32px 20px 22px; }
.herofig > .heroctl{ order:2; position:relative; left:auto; right:auto; top:auto; bottom:auto; align-items:flex-start; padding:0 20px 18px; }
.herotab{ order:3; position:relative; align-self:flex-end; max-width:calc(100% - var(--tab-r)); padding:12px 16px 12px 18px; gap:12px; }
.herotab__lbl{ display:none; }
.herotab__logos img{ height:34px; max-width:120px; }
}
/* Product preview band (app mockup + floating chips) */
.preview{ max-width:940px; margin-inline:auto; }
.product-preview-slide{
background:var(--surface);
}
.product-showcase{
display:grid;
grid-template-columns:minmax(280px,.74fr) minmax(540px,1.26fr);
align-items:center;
gap:clamp(34px,5vw,76px);
}
.product-preview-slide .center{
max-width:480px;
margin:0;
text-align:left;
}
.product-preview-slide .center .lede{ margin-inline:0; }
.product-preview-slide .h-display{
max-width:11.5ch;
font-size:clamp(2.1rem, min(3.8vw,6vh), 3.65rem);
line-height:1.04;
}
.product-preview-slide .lede{
max-width:42ch;
font-size:clamp(1rem, min(1.15vw,2vh), 1.13rem);
line-height:1.58;
}
.product-preview-slide .preview{
width:100%;
max-width:min(860px,58vw);
justify-self:end;
margin:0 clamp(34px,3.5vw,64px) 0 0;
}
.product-preview-slide .media__frame{
aspect-ratio:3/2;
background:var(--paper-50);
box-shadow:0 24px 70px rgba(18,46,53,.12), inset 0 1px 0 rgba(255,255,255,.72);
}
.product-preview-slide .media__img--product{ object-fit:cover; }
.product-preview-slide .chip{ display:none; }
.product-preview-slide .chip-tl{ left:-12px; top:8%; }
.product-preview-slide .chip-tr{ right:18px; top:12%; }
.product-preview-slide .chip-br{ right:22px; bottom:8%; }
@media (max-width:820px){
.product-showcase{ grid-template-columns:1fr; gap:clamp(24px,8vw,34px); }
.product-preview-slide .center{
text-align:center;
margin-inline:auto;
}
.product-preview-slide .center .lede{ margin-inline:auto; }
.product-preview-slide .h-display{
max-width:12.5ch;
margin-inline:auto;
}
.product-preview-slide .preview{
max-width:100%;
justify-self:center;
margin:0;
}
}
/* ---------- 10. Trust bar ------------------------------------------------ */
.trust{ padding-block:clamp(30px,3.6vw,50px); }
.trust__label{ text-align:center; font-size:.85rem; color:var(--body-2); }
.trust__row{
display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
gap:clamp(24px,5vw,58px); margin-top:1.5rem;
}
.trust__row svg{ height:26px; width:auto; opacity:.4; filter:grayscale(1);
transition:opacity .2s ease, filter .2s ease; }
.trust__row li:hover svg{ opacity:.75; filter:grayscale(.35); }
/* ---------- 11. Grids & cards -------------------------------------------- */
.grid{ display:grid; gap:clamp(16px,2vw,24px); }
.grid-2{ grid-template-columns:repeat(2,1fr); }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }
.card{
background:var(--surface);
border:1px solid rgba(255,255,255,.68); border-radius:var(--r-md);
padding:clamp(20px,2.2vw,28px);
box-shadow:0 1px 0 rgba(18,46,53,.03), inset 0 1px 0 rgba(255,255,255,.86);
backdrop-filter:blur(18px) saturate(1.35);
-webkit-backdrop-filter:blur(18px) saturate(1.35);
transition:transform .22s cubic-bezier(.2,.7,.3,1), box-shadow .22s ease, border-color .22s ease;
}
.card:hover{ transform:translateY(-3px); box-shadow:var(--glass-shadow); border-color:rgba(255,255,255,.82); }
.card--tan{ background:var(--surface); border-color:rgba(255,255,255,.68); }
.card--sand{ background:var(--page-alt); border-color:rgba(255,255,255,.68); }
.card__ico{
width:44px; height:44px; display:grid; place-items:center; border-radius:13px;
background:var(--accent-tint); color:var(--accent-2); margin-bottom:1.15rem;
}
.card--tan .card__ico{ background:#fff; color:var(--green-800); }
.card__ico svg{ width:22px; height:22px; }
.card h3{ margin-bottom:.5rem; }
.card p{ font-size:.9rem; line-height:1.6; }
.card__list{ display:grid; gap:.5rem; margin-top:1.05rem; }
.card__list li{ display:flex; gap:.55em; font-size:.85rem; color:var(--ink-2); }
.card__list svg{ width:15px; height:15px; flex:0 0 auto; margin-top:.28em; color:var(--accent); }
/* Workflow cards (media-topped) */
.wfcard{
background:var(--surface);
border:1px solid rgba(255,255,255,.68); border-radius:var(--r-lg); padding:clamp(14px,1.4vw,18px);
box-shadow:0 1px 0 rgba(18,46,53,.03), inset 0 1px 0 rgba(255,255,255,.82);
backdrop-filter:blur(18px) saturate(1.35);
-webkit-backdrop-filter:blur(18px) saturate(1.35);
text-align:center;
transition:transform .22s cubic-bezier(.2,.7,.3,1), box-shadow .22s ease;
}
.wfcard:hover{ transform:translateY(-4px); box-shadow:var(--glass-shadow); }
.wfcard__media{
border-radius:var(--r-md); overflow:hidden; aspect-ratio:4/3; margin-bottom:1.25rem;
background:var(--tan-2);
}
.wfcard__media svg,.wfcard__media img{ width:100%; height:100%; object-fit:cover; }
.wfcard h3{ font-family:var(--display); font-weight:700; font-size:1.42rem; letter-spacing:-.01em; }
.wfcard p{ font-size:.875rem; margin:.5rem auto 1.15rem; max-width:34ch; color:var(--ink-3); }
/* ---------- 12. Split feature blocks ------------------------------------- */
.split{
display:grid; grid-template-columns:1.02fr .98fr; align-items:center;
gap:clamp(28px,5vw,72px);
background:var(--page-alt); border-radius:var(--r-xl);
border:1px solid rgba(255,255,255,.70);
box-shadow:0 1px 0 rgba(18,46,53,.03), inset 0 1px 0 rgba(255,255,255,.82);
backdrop-filter:blur(18px) saturate(1.25);
-webkit-backdrop-filter:blur(18px) saturate(1.25);
padding:clamp(26px,3.4vw,52px);
}
.split + .split{ margin-top:clamp(18px,2.2vw,28px); }
.split--rev{ direction:rtl; } .split--rev > *{ direction:ltr; }
.split--blue{ background:var(--page-alt); }
.split--peach{ background:var(--page-alt); }
.split--sand{ background:var(--page-alt); }
.split--white{ background:var(--surface); border:1px solid rgba(255,255,255,.72); }
.split__body h2{ font-family:var(--display); font-weight:700; font-size:clamp(1.75rem,2.8vw,2.4rem); line-height:1.12; }
.split__body p{ margin-top:.85rem; font-size:.98rem; line-height:1.62; max-width:44ch; color:var(--ink-3); }
.split__list{ display:grid; gap:.65rem; margin-top:1.4rem; }
.split__list li{ display:flex; gap:.65em; font-size:.92rem; color:var(--ink-2); }
.split__list svg{ width:17px; height:17px; flex:0 0 auto; margin-top:.3em; color:var(--accent); }
.split__body .btn,.split__body .linkarw{ margin-top:1.6rem; }
/* ---------- 13. Value rows ----------------------------------------------- */
.vrow{ display:flex; gap:1rem; }
.vrow + .vrow{ margin-top:1.7rem; }
.vrow__ico{
width:30px; height:30px; flex:0 0 auto; display:grid; place-items:center;
border-radius:var(--pill); background:var(--ink); color:#fff;
}
.vrow__ico svg{ width:15px; height:15px; }
.vrow h4{ margin-bottom:.2rem; }
.vrow p{ font-size:.9rem; line-height:1.58; }
/* ---------- 13b. Glass interoperability section -------------------------- */
.compliance-glass{
overflow:hidden;
background:var(--page-alt);
}
.compliance-glass::before{
content:""; position:absolute; inset:0; pointer-events:none;
display:none;
}
.compliance-glass .wrap{ position:relative; z-index:1; }
.compliance-hero{
display:grid; grid-template-columns:minmax(0,.78fr) minmax(430px,1.1fr);
align-items:center; gap:clamp(26px,4vw,64px);
}
.compliance-hero .h-display{ max-width:18ch; font-size:clamp(1.9rem,3.2vw,3rem); }
.compliance-hero .lede{ margin-inline:0; max-width:52ch; }
.interop-visual{
position:relative; min-height:clamp(260px,31vw,410px);
display:grid; place-items:center;
isolation:isolate;
}
.interop-art{
width:min(100%, clamp(390px,44vw,650px));
height:auto;
object-fit:contain;
filter:drop-shadow(0 26px 50px rgba(18,46,53,.10));
}
.interop-art--wide{
width:min(100%, clamp(540px,50vw,800px));
aspect-ratio:16/9;
object-fit:cover;
border-radius:24px;
box-shadow:0 24px 70px rgba(18,46,53,.13), inset 0 1px 0 rgba(255,255,255,.55);
}
.standard-floaters{
position:absolute;
inset:0;
z-index:2;
pointer-events:none;
}
.standard-float{
position:absolute;
display:inline-flex;
align-items:center;
justify-content:center;
gap:.48rem;
min-height:36px;
padding:.56rem .9rem;
border-radius:var(--pill);
background:var(--surface);
border:1px solid rgba(255,255,255,.76);
box-shadow:0 12px 28px rgba(18,46,53,.11), inset 0 1px 0 rgba(255,255,255,.92);
backdrop-filter:blur(18px) saturate(1.55);
-webkit-backdrop-filter:blur(18px) saturate(1.55);
color:var(--ink-2);
font-family:var(--display);
font-size:.8rem;
font-weight:750;
line-height:1;
white-space:nowrap;
}
.standard-float svg{ width:14px; height:14px; color:var(--accent); }
.standard-float--hl7{ left:5%; top:11%; }
.standard-float--icd{ right:4%; top:9%; } /* top corner: keeps the Riayati sign in the integrations image clear */
.standard-float--doh{ right:9%; bottom:9%; }
.standard-float--multi{ left:6%; bottom:10%; }
.interop-hub{
width:clamp(116px,13vw,170px); aspect-ratio:1; border-radius:50%;
display:grid; place-items:center;
background:var(--accent-tint);
border:1px solid rgba(255,255,255,.78);
box-shadow:
0 18px 48px rgba(39,118,59,.18),
inset 0 1px 0 rgba(255,255,255,.92),
inset 0 -12px 30px rgba(39,118,59,.10);
backdrop-filter:blur(20px) saturate(1.6);
-webkit-backdrop-filter:blur(20px) saturate(1.6);
}
.interop-hub img{ width:44%; height:44%; object-fit:contain; filter:drop-shadow(0 8px 18px rgba(39,118,59,.22)); }
.interop-card{
position:absolute; width:clamp(132px,14vw,190px); min-height:clamp(76px,7.2vw,102px);
display:grid; place-items:center; padding:16px;
border-radius:20px;
background:var(--surface);
border:1px solid rgba(255,255,255,.78);
box-shadow:0 16px 46px rgba(18,46,53,.10), inset 0 1px 0 rgba(255,255,255,.9);
backdrop-filter:blur(18px) saturate(1.55);
-webkit-backdrop-filter:blur(18px) saturate(1.55);
}
.interop-card img{ max-height:40px; width:auto; object-fit:contain; }
.interop-card--top{ top:4%; left:22%; transform:rotate(-8deg); }
.interop-card--left{ left:0; bottom:14%; transform:rotate(7deg); }
.interop-card--right{ right:0; top:30%; transform:rotate(-2deg); }
.interop-line{
position:absolute; height:3px; width:34%;
background:rgba(39,118,59,.45);
box-shadow:0 0 18px rgba(39,118,59,.18);
transform-origin:center;
}
.interop-line--top{ top:34%; left:32%; transform:rotate(-24deg); }
.interop-line--left{ top:58%; left:20%; transform:rotate(155deg); }
.interop-line--right{ top:52%; right:17%; transform:rotate(22deg); }
.compliance-grid{
display:grid; grid-template-columns:1fr 1fr; gap:clamp(16px,2vw,24px);
}
.compliance-grid--clean{
grid-template-columns:minmax(0,1.12fr) minmax(300px,.88fr);
align-items:stretch;
margin-top:clamp(34px,4vw,52px);
}
.glass-card{
position:relative; overflow:hidden;
background:var(--surface);
border:1px solid rgba(255,255,255,.74);
border-radius:var(--r-lg);
padding:clamp(22px,2.6vw,32px);
box-shadow:var(--glass-shadow);
backdrop-filter:blur(22px) saturate(1.55);
-webkit-backdrop-filter:blur(22px) saturate(1.55);
}
.glass-card::before{
content:""; position:absolute; inset:0; pointer-events:none;
display:none;
}
.glass-card > *{ position:relative; }
.glass-card--wide{ grid-column:1 / -1; }
.glass-head{ display:flex; gap:1rem; align-items:flex-start; }
.glass-head .vrow__ico{ width:42px; height:42px; }
.logo-tiles{
display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(10px,1.4vw,16px);
}
.logo-tile{
min-height:112px; display:grid; place-items:center; text-align:center;
padding:14px 12px; border-radius:var(--r-md);
background:rgba(255,255,255,.58);
border:1px solid rgba(18,46,53,.08);
box-shadow:inset 0 1px 0 rgba(255,255,255,.82);
}
.logo-tile img{ max-height:38px; width:auto; object-fit:contain; margin-inline:auto; }
.logo-tile strong{ display:block; margin-top:9px; font-family:var(--display); color:var(--ink); }
.logo-tile span{ display:block; margin-top:3px; font-size:.76rem; line-height:1.3; color:var(--body-2); }
.standard-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.standards-card{
display:flex;
flex-direction:column;
justify-content:center;
}
.standards-card .standard-grid{
grid-template-columns:repeat(3,minmax(120px,1fr));
}
.standards-card .glass-note{
margin-top:1rem;
}
.standard-pill{
display:flex; align-items:center; justify-content:center; gap:.55rem;
min-height:42px; border-radius:var(--pill);
background:var(--accent-tint);
border:1px solid rgba(255,255,255,.74);
font-family:var(--display); font-weight:700; font-size:.9rem; color:var(--ink-2);
}
.standard-pill svg{ width:15px; height:15px; color:var(--accent); }
.glass-note{
margin-top:1.2rem; padding-top:1.1rem; border-top:1px solid rgba(18,46,53,.10);
display:flex; gap:.8rem; color:var(--body); font-size:.9rem;
}
.glass-note .vrow__ico{ background:rgba(18,46,53,.06); color:var(--ink); }
.consultant-strip{
display:flex; align-items:center; justify-content:space-between; gap:clamp(18px,4vw,56px);
}
.consultant-card{
flex-direction:column;
align-items:flex-start;
justify-content:center;
gap:clamp(18px,2.6vw,34px);
}
.consultant-card .hexrow{
width:100%;
flex:0 0 auto;
justify-content:flex-start;
}
.consultant-strip .hexrow{ justify-content:flex-end; flex:1 1 auto; }
.consultant-card .hexrow{ justify-content:flex-start; }
.consultant-strip .hexrow img{ height:clamp(30px,3.4vw,44px); }
@media (max-width:900px){
.compliance-hero,
.compliance-grid,
.compliance-grid--clean{ grid-template-columns:1fr; }
.compliance-hero .h-display{ max-width:none; }
.interop-visual{ min-height:320px; }
.standard-floaters{
inset:auto 8px 8px;
display:flex;
flex-wrap:wrap;
align-items:flex-end;
justify-content:center;
gap:8px;
}
.standard-float{
position:static;
min-height:32px;
padding:.5rem .72rem;
font-size:.72rem;
}
.consultant-strip{ align-items:flex-start; flex-direction:column; }
.consultant-strip .hexrow{ justify-content:flex-start; }
}
@media (max-width:640px){
.logo-tiles,
.standard-grid{ grid-template-columns:1fr; }
.interop-card{ width:138px; min-height:82px; }
.interop-card img{ max-height:36px; }
}
@media (min-width:821px) and (min-height:620px){
.deck .compliance-glass{
padding-block:calc(var(--hdr-h) + clamp(2px,1vh,10px)) clamp(10px,1.8vh,20px);
}
.deck .compliance-hero{
grid-template-columns:minmax(0,.68fr) minmax(470px,1.05fr);
gap:clamp(18px,3vw,46px);
}
.deck .compliance-hero .h-display{
max-width:18ch;
font-size:clamp(1.55rem,3.35vh,2.05rem);
line-height:1.08;
}
.deck .compliance-hero .lede{
max-width:54ch;
font-size:.88rem;
line-height:1.45;
}
.deck .interop-visual{
min-height:0;
height:auto;
}
.deck .interop-art{
width:min(100%, clamp(310px,50vh,500px));
max-height:none;
}
.deck .interop-art--wide{
width:min(100%, clamp(520px,51vw,720px));
border-radius:20px;
}
.deck .interop-hub{ width:clamp(88px,10.5vh,128px); }
.deck .interop-card{
width:clamp(118px,16vh,170px);
min-height:clamp(64px,8.5vh,86px);
padding:12px;
border-radius:18px;
}
.deck .interop-card img{ max-height:34px; }
.deck .compliance-grid{ gap:clamp(12px,1.8vh,18px); }
.deck .compliance-grid--clean{
grid-template-columns:minmax(0,1.05fr) minmax(290px,.75fr);
}
.deck .compliance-glass .compliance-grid--clean.mt-l{ margin-top:clamp(18px,2.7vh,28px); }
.deck .glass-card{
padding:clamp(12px,1.7vh,17px);
border-radius:20px;
}
.deck .glass-card .h3{ font-size:clamp(.95rem,2.1vh,1.12rem); }
.deck .glass-card p{ font-size:.8rem; line-height:1.36; }
.deck .glass-head{ gap:.7rem; }
.deck .glass-head .vrow__ico{ width:30px; height:30px; }
.deck .logo-tiles{ gap:clamp(8px,1.3vh,12px); }
.deck .logo-tile{
min-height:78px;
padding:8px 7px;
}
.deck .logo-tile img{ max-height:24px; }
.deck .logo-tile strong{ margin-top:5px; font-size:.74rem; }
.deck .logo-tile span{ font-size:.6rem; line-height:1.18; }
.deck .standard-grid{ gap:8px; }
.deck .standards-card .glass-note{ margin-top:.65rem; }
.deck .standard-pill{
min-height:30px;
font-size:.72rem;
}
.deck .standard-float{
min-height:30px;
padding:.46rem .68rem;
font-size:.68rem;
box-shadow:0 9px 22px rgba(18,46,53,.10), inset 0 1px 0 rgba(255,255,255,.92);
}
.deck .standard-float svg{ width:12px; height:12px; }
.deck .glass-note{
margin-top:.65rem;
padding-top:.6rem;
gap:.65rem;
}
.deck .consultant-strip .hexrow img{ height:clamp(22px,2.6vh,30px); }
.deck .consultant-card{
gap:clamp(14px,2.2vh,22px);
}
.deck .consultant-card .hexrow{ gap:clamp(10px,1.5vh,16px); }
}
/* ---------- 14. Stats ---------------------------------------------------- */
.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line-2);
border:1px solid var(--line-2); border-radius:var(--r-lg); overflow:hidden; }
.stat{ background:var(--cream); padding:clamp(22px,2.6vw,34px); }
.stat__n{
font-family:var(--display); font-weight:800; letter-spacing:-.02em;
font-size:clamp(2.2rem,3.6vw,3rem); line-height:1; color:var(--ink);
}
.stat__l{ margin-top:.6rem; font-size:.87rem; line-height:1.5; color:var(--body); }
/* ---------- 15. Quote ---------------------------------------------------- */
.quote{ display:grid; grid-template-columns:auto 1fr; gap:clamp(24px,4vw,56px); align-items:center; }
.quote__ava{
width:clamp(120px,15vw,190px); aspect-ratio:1; border-radius:var(--pill); overflow:hidden;
background:var(--tan-2); box-shadow:var(--sh-sm);
}
.quote__ava img,.quote__ava svg{ width:100%; height:100%; object-fit:cover; }
.quote blockquote{
margin:0; font-family:var(--display); font-weight:600;
font-size:clamp(1.2rem,2vw,1.6rem); line-height:1.38; letter-spacing:-.012em; color:var(--ink);
}
.quote__by{ display:flex; align-items:center; gap:.8rem; margin-top:1.5rem; }
.quote__by-ava{ width:38px; height:38px; border-radius:var(--pill); overflow:hidden; background:var(--tan-2); flex:0 0 auto; }
.quote__by-name{ font-size:.95rem; font-weight:700; color:var(--ink); font-family:var(--display); }
.quote__by-org{ font-size:.72rem; font-weight:620; letter-spacing:.1em; text-transform:uppercase; color:var(--body-2); }
/* ---------- 16. Compliance badges ---------------------------------------- */
.badges{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; }
.badge{
display:inline-flex; align-items:center; gap:.5em;
padding:.55em 1em; border:1px solid rgba(255,255,255,.74); border-radius:var(--pill);
background:rgba(255,255,255,.62); font-size:.82rem; font-weight:560; color:var(--ink-2);
box-shadow:inset 0 1px 0 rgba(255,255,255,.9);
backdrop-filter:blur(12px) saturate(1.3);
-webkit-backdrop-filter:blur(12px) saturate(1.3);
}
.badge svg{ width:15px; height:15px; color:var(--accent); }
/* ---------- 17. Case study cards ----------------------------------------- */
.cs{
background:var(--surface);
border:1px solid rgba(255,255,255,.68); border-radius:var(--r-md);
padding:14px; display:flex; flex-direction:column;
box-shadow:0 1px 0 rgba(18,46,53,.03), inset 0 1px 0 rgba(255,255,255,.84);
backdrop-filter:blur(18px) saturate(1.3);
-webkit-backdrop-filter:blur(18px) saturate(1.3);
transition:transform .22s cubic-bezier(.2,.7,.3,1), box-shadow .22s ease;
}
.cs:hover{ transform:translateY(-4px); box-shadow:var(--glass-shadow); }
.cs__media{ border-radius:var(--r-sm); overflow:hidden; aspect-ratio:4/3;
background:var(--tan-2); }
.cs__media img,.cs__media svg{ width:100%; height:100%; object-fit:cover; }
.cs__tag{
align-self:flex-start; margin:14px 0 10px;
padding:.3em .8em; border:1px solid var(--line); border-radius:var(--pill);
font-size:.72rem; font-weight:600; letter-spacing:.02em; color:var(--ink-2); background:var(--cream);
}
.cs__q{ font-family:var(--display); font-weight:600; font-size:1.02rem; line-height:1.4; color:var(--ink); }
.cs__who{ margin-top:.6rem; font-size:.8rem; color:var(--body-2); }
.cs__link{ margin-top:auto; padding-top:1rem; }
.masonry{ columns:3; column-gap:clamp(16px,2vw,24px); }
.masonry > *{ break-inside:avoid; margin-bottom:clamp(16px,2vw,24px); }
/* ---------- 18. CTA band ------------------------------------------------- */
.cta{
background:var(--forest); border-radius:var(--r-xl); color:#fff;
padding:clamp(40px,5.5vw,76px) clamp(24px,4vw,48px); text-align:center;
position:relative; overflow:hidden;
}
.cta::before{
content:""; position:absolute; inset:0;
display:none;
}
.cta > *{ position:relative; }
.cta h2{ color:#fff; font-family:var(--display); font-weight:700;
font-size:clamp(1.8rem,3.2vw,2.7rem); line-height:1.12; }
.cta p{ margin:.9rem auto 0; max-width:52ch; color:rgba(255,255,255,.72); font-size:1rem; }
.cta__actions{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:2rem; }
/* ---------- 19. Footer: minimal sign-off ---------------------------------
Deliberately slim: the demo section above is the real ending; this is
just the logo, a single link row and the contact line. */
.ftr{ background:var(--page); color:var(--body-2); border-top:1px solid var(--line); padding-block:clamp(22px,3.4vh,36px) clamp(18px,2.8vh,28px); }
.ftr__row{ display:flex; align-items:center; justify-content:space-between; gap:clamp(16px,3vw,40px); }
.ftr__row--meta{ margin-top:clamp(16px,2.6vh,24px); padding-top:clamp(14px,2.2vh,20px); border-top:1px solid var(--line-2); font-size:.82rem; }
.ftr .brand__name{ color:var(--ink); }
.ftr__nav{ display:flex; flex-wrap:wrap; justify-content:center; gap:4px clamp(18px,2.4vw,32px); }
.ftr__nav a{ font-family:var(--display); font-size:.9rem; font-weight:600; color:var(--ink-2); transition:color .16s ease; }
.ftr__nav a:hover{ color:var(--accent); }
.ftr__icons{ display:flex; gap:8px; }
.ftr__icons a{
width:34px; height:34px; display:grid; place-items:center; border-radius:50%;
border:1px solid var(--line); color:var(--ink-2); transition:background .18s ease, color .18s ease, border-color .18s ease;
}
.ftr__icons a:hover{ background:var(--accent); border-color:var(--accent); color:#fff; }
.ftr__icons svg{ width:14px; height:14px; }
.ftr__up svg{ transform:rotate(-90deg); }
.ftr__contact{ margin:0; display:flex; flex-wrap:wrap; gap:4px 0; }
.ftr__contact a{ color:var(--body-2); font-variant-numeric:tabular-nums; transition:color .16s ease; }
.ftr__contact a + a::before{ content:"\00b7"; margin:0 .7em; color:var(--line); }
.ftr__contact a:hover{ color:var(--accent); }
.ftr__copy{ margin:0; white-space:nowrap; }
@media (max-width:820px){
.ftr__row{ flex-wrap:wrap; }
.ftr__nav{ order:3; flex-basis:100%; justify-content:flex-start; }
.ftr__row--meta{ flex-direction:column; align-items:flex-start; gap:8px; }
.ftr__contact{ flex-direction:column; gap:4px; }
.ftr__contact a + a::before{ content:none; }
.ftr__copy{ white-space:normal; }
}
/* The last slide shares the final screen with the footer (site.js measures
--ftr-h), so the closing CTA and the footer land together. */
.deck main > .slide:last-child{ min-height:calc(100svh - var(--ftr-h, 0px)); }
/* ---------- 20. Interior page header ------------------------------------- */
.phead{ background:var(--sand); padding-block:clamp(52px,6.5vw,92px); text-align:center; }
.phead .lede{ margin:1.1rem auto 0; }
.phead--image{
isolation:isolate; overflow:hidden; background:var(--dark); color:#fff;
min-height:clamp(420px,64vh,640px); display:flex; align-items:center;
}
.phead--image .phead__bg{
position:absolute; inset:0; z-index:-2; width:100%; height:100%; object-fit:cover;
}
.phead--image .phead__scrim{
position:absolute; inset:0; z-index:-1;
background:
linear-gradient(90deg, rgba(18,46,53,.78) 0%, rgba(18,46,53,.55) 44%, rgba(18,46,53,.22) 72%, rgba(18,46,53,.44) 100%),
linear-gradient(180deg, rgba(18,46,53,.30), rgba(18,46,53,.58));
}
.phead--image .wrap{ width:100%; }
.phead--image .phead__content{
max-width:720px; text-align:left;
}
.clinicpro-page-hero .phead__content{ max-width:680px; }
.clinicpro-page-hero .cplogo{
margin-inline:0;
width:clamp(98px,8vw,132px);
height:auto;
margin-bottom:.45rem;
}
.clinicpro-page-hero .display{
font-size:clamp(2.4rem, min(4.2vw,7vh), 4rem);
line-height:1.02;
max-width:11ch;
}
.clinicpro-page-hero .lede{
max-width:50ch;
font-size:clamp(1rem, min(1.25vw,2.1vh), 1.2rem);
line-height:1.55;
}
.phead--image .display,
.phead--image .h-display,
.phead--image h1,
.phead--image .lede{ color:#fff; margin-inline:0; text-shadow:0 2px 24px rgba(18,46,53,.46); }
.phead--image .eyebrow{ color:var(--green-400); text-shadow:0 1px 14px rgba(18,46,53,.45); }
.phead--image.cp-scope .eyebrow{ color:var(--green-400); }
.phead--image .hero__actions{ justify-content:flex-start; }
.phead--image .btn:not(.btn--ghost){ --btn-bg:#fff; --btn-fg:var(--ink); }
.phead--image .btn--ghost{
--btn-bg:rgba(255,255,255,.14); --btn-fg:#fff; --btn-bd:rgba(255,255,255,.54);
backdrop-filter:blur(12px) saturate(1.4);
-webkit-backdrop-filter:blur(12px) saturate(1.4);
}
.phead--image .cplock__name{ color:#fff; }
.phead--image .cplock__name span{ color:rgba(255,255,255,.72); }
.phead--image .cplock__mark{ filter:drop-shadow(0 10px 24px rgba(0,0,0,.28)); }
/* ---------- 21. Forms ---------------------------------------------------- */
.form{ display:grid; gap:1.05rem; }
.field label{ display:block; font-size:.82rem; font-weight:600; color:var(--ink); margin-bottom:.42rem; }
.field input,.field select,.field textarea{
width:100%; padding:.82em 1em; font:inherit; font-size:.95rem; color:var(--ink);
background:var(--white); border:1px solid var(--line); border-radius:var(--r-sm);
transition:border-color .16s, box-shadow .16s;
}
.field textarea{ min-height:120px; resize:vertical; }
.field input:focus,.field select:focus,.field textarea:focus{
outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-tint);
}
.field__hint{ margin-top:.35rem; font-size:.78rem; color:var(--body-2); }
.form__note{ font-size:.8rem; color:var(--body-2); }
.formcard{
background:var(--surface);
border:1px solid rgba(255,255,255,.72); border-radius:var(--r-lg);
padding:clamp(24px,3vw,40px); box-shadow:var(--glass-shadow);
backdrop-filter:blur(18px) saturate(1.35);
-webkit-backdrop-filter:blur(18px) saturate(1.35);
}
.formok{
display:none; padding:.9em 1.1em; border-radius:var(--r-sm);
background:var(--paper-200); border:1px solid var(--green-400); color:var(--green-800); font-size:.9rem;
}
.formok.is-on{ display:block; }
/* ---------- 22. Reveal --------------------------------------------------- */
/* Gated on .js (set by site.js) so content is never hidden without scripting. */
.js .rv{ opacity:0; transform:translateY(18px); }
.js .rv.is-in{ opacity:1; transform:none; transition:opacity .6s ease, transform .6s cubic-bezier(.2,.7,.3,1); }
@media (prefers-reduced-motion:reduce){
.js .rv,.js .rv.is-in{ opacity:1; transform:none; transition:none; }
html{ scroll-behavior:auto; }
.btn:hover,.card:hover,.cs:hover,.wfcard:hover{ transform:none; }
}
/* ---------- 23. Deck mode (one slide per section) ------------------------
Native CSS scroll-snap rather than wheel-hijacking, so the wheel, trackpad,
keyboard (PageUp/PageDown, Home/End), touch and find-in-page all keep
working. Only engages when the viewport is genuinely big enough to hold a
slide; below that the page falls back to ordinary scrolling. */
.slide{ position:relative; }
@media (min-height:480px){
/* scroll-padding-top exists for anchor links under the sticky header, but it
also offsets every snap position — each slide would rest 88px low and lose
88px off the bottom. Slides clear the header with their own padding-top
instead, so zero it here. */
html.deck{ scroll-snap-type:y mandatory; scroll-padding-top:0; }
/* Pages holding a taller-than-screen section (a long grid, a form) drop to
proximity. Under mandatory snap the scroll must always come to rest on a
snap point, so the middle of such a section would be unreachable. */
html.deck.deck--loose{ scroll-snap-type:y proximity; }
/* Slides pad themselves clear of the header, but an anchor target *inside* a
slide (e.g. #sales on the contact form) would land at y=0 and sit under the
fixed bar. Give every non-slide target its own clearance. */
.deck [id]:not(.slide){ scroll-margin-top:calc(var(--hdr-h) + 20px); }
/* Taking the header out of flow puts slide tops at exact multiples of the
viewport height, so snap positions line up with the slides. */
.deck .hdr{ position:fixed; top:0; left:0; right:0; }
.deck .slide{
min-height:100svh;
scroll-snap-align:start;
scroll-snap-stop:always;
display:flex; flex-direction:column; justify-content:center;
padding-block:calc(var(--hdr-h) + clamp(16px,3vh,40px)) clamp(24px,5vh,56px);
}
/* Sections that legitimately run past one screen (long grids, forms):
still a snap target at their top, but never squashed to fit. */
.deck .slide--flow{
min-height:0;
justify-content:flex-start;
scroll-snap-stop:normal;
}
/* Deck slides supply their own vertical rhythm. */
.deck .slide.section,
.deck .slide.section--tight,
.deck .slide.trust,
.deck .slide.phead{ padding-block:calc(var(--hdr-h) + clamp(16px,3vh,40px)) clamp(24px,5vh,56px); }
/* "end", not "start": the footer is shorter than a slide, so a start-aligned
snap point would sit past maximum scroll and be unreachable — the page
would refuse to scroll past the last slide. Aligning its bottom to the
scrollport bottom puts the snap point exactly at max scroll. */
.deck .ftr{ scroll-snap-align:end; }
/* Hero: the media card takes the leftover height above the trust strip.
It must still clear the fixed header — an earlier `padding-block:0` here
overrode the slide padding and tucked the card's top 73px under the bar. */
.deck .hero--photo{
padding-block:calc(var(--hdr-h) + clamp(14px,2.4vh,30px)) clamp(18px,3vh,40px);
}
/* grow:1 so the card absorbs the space left above the trust strip; the
figure's max-height is what caps it. With grow:0 it only ever took its
copy's natural height and ignored the cap entirely. */
/* The ceiling lives on the WRAP, not the figure. The figure then simply
stretches to fill the wrap, so there is never dead space between the card
and the trust strip; when the ceiling binds on a very tall screen the
leftover goes to the slide, which centres the whole block. */
.deck .hero--photo > .wrap{ flex:1 1 auto; display:flex; min-height:0; max-height:min(82vh,900px); }
.deck .hero--photo > .wrap > .herofig{
flex:1 1 auto; min-height:0; width:100%;
/* Capped so the card stays a band rather than swallowing the screen. */
max-height:min(72vh, 700px);
}
.deck .trust--inhero{ flex:0 0 auto; }
/* In deck mode media is sized against viewport HEIGHT, not its own aspect
ratio — that is what keeps every slide inside one screen on short
laptops. The SVG/img inside still covers via object-fit. */
.deck .preview .media__frame { aspect-ratio:auto; height:clamp(260px,50vh,540px); }
.deck .product-preview-slide{
justify-content:center;
padding-block:calc(var(--hdr-h) + clamp(18px,2.8vh,34px)) clamp(24px,4vh,42px);
}
.deck .product-showcase{ min-height:0; }
.deck .product-preview-slide .h-display{ font-size:clamp(2rem, min(3.7vw,6vh), 3.25rem); }
.deck .product-preview-slide .lede{ font-size:clamp(.94rem,1.8vh,1.05rem); line-height:1.5; }
.deck .product-preview-slide .mt-s{ margin-top:.55rem; }
.deck .product-preview-slide .preview{ max-width:min(850px,58vw); }
.deck .product-preview-slide .preview .media__frame{
aspect-ratio:3/2;
height:auto;
}
.deck .split__media .media__frame { aspect-ratio:auto; height:clamp(230px,42vh,420px); }
.deck .wfcard__media { aspect-ratio:auto; height:clamp(140px,23vh,240px); }
.deck .cs__media { aspect-ratio:auto; height:clamp(120px,19vh,200px); }
.deck .quote__ava { width:clamp(104px,16vh,180px); }
/* Vertical rhythm follows the viewport too. */
.deck .mt-l{ margin-top:clamp(18px,3.4vh,48px); }
.deck .slide .card{ padding:clamp(14px,2.4vh,28px); }
.deck .slide .card__ico{ margin-bottom:clamp(10px,1.5vh,18px); }
.deck .slide .grid{ gap:clamp(12px,1.8vh,24px); }
.deck .wfcard__media{ margin-bottom:clamp(12px,1.6vh,20px); }
.deck .wfcard p{ margin:.45rem auto clamp(10px,1.4vh,18px); }
.deck .clinicpro-page-hero{
align-items:center;
padding-block:calc(var(--hdr-h) + clamp(16px,3vh,34px)) clamp(24px,4vh,44px);
}
.deck .clinicpro-page-hero .phead__content{
max-width:min(650px,48vw);
}
.deck .clinicpro-page-hero .cplogo{ width:clamp(88px,7.5vw,118px); height:auto; }
.deck .clinicpro-page-hero .display{
font-size:clamp(2.2rem, min(4vw,6.5vh), 3.4rem);
}
.deck .clinicpro-page-hero .lede{
margin-top:1rem;
font-size:clamp(.96rem,1.8vh,1.08rem);
}
.deck .clinicpro-page-hero .hero__actions{ margin-top:1.6rem; }
}
/* Trust logos folded into the hero slide */
.trust--inhero{ padding-block:clamp(12px,1.9vh,24px) 0; }
.trust--inhero .trust__label{ font-size:.78rem; }
.trust--inhero .trust__marquee{
--logo-gap:clamp(18px,2vw,34px);
position:relative;
margin-top:.72rem;
overflow:hidden;
contain:paint;
}
/* soft fade at both ends, so logos glide in and out (fixed overlays: cheaper than masking the moving row) */
.trust--inhero .trust__marquee::before,
.trust--inhero .trust__marquee::after{
content:""; position:absolute; top:0; bottom:0; z-index:1; width:7%; pointer-events:none;
background:linear-gradient(90deg,var(--page),transparent);
}
.trust--inhero .trust__marquee::after{ right:0; transform:scaleX(-1); }
.trust--inhero .trust__marquee::before{ left:0; }
.trust--inhero .trust__row{
display:flex;
flex-wrap:nowrap;
align-items:center;
gap:var(--logo-gap);
width:max-content;
min-height:clamp(56px,7.4vh,72px);
margin:0;
}
.trust--inhero .trust__row li{
flex:none;
display:flex;
align-items:center;
justify-content:center;
}
/* every client logo, one slow loop (site.js appends a hidden copy of the list so it joins up seamlessly) */
.trust__row--marquee{ animation:logoMarquee var(--marquee-s,70s) linear infinite; will-change:transform; backface-visibility:hidden; }
.trust__marquee:hover .trust__row--marquee,
.trust__marquee:focus-within .trust__row--marquee{ animation-play-state:paused; }
@keyframes logoMarquee{ to{ transform:translateX(calc(-50% - var(--logo-gap) / 2)); } }
/* no motion: all logos at once, wrapped and centred */
@media (prefers-reduced-motion:reduce){
.trust--inhero .trust__marquee::before, .trust--inhero .trust__marquee::after{ display:none; }
.trust--inhero .trust__row--marquee{ animation:none; width:auto; flex-wrap:wrap; justify-content:center; row-gap:12px; }
.trust__row--marquee li[data-copy]{ display:none; }
}
html.no-motion .trust--inhero .trust__marquee::before, html.no-motion .trust--inhero .trust__marquee::after{ display:none; }
html.no-motion .trust--inhero .trust__row--marquee{ animation:none; width:auto; flex-wrap:wrap; justify-content:center; row-gap:12px; }
html.no-motion .trust__row--marquee li[data-copy]{ display:none; }
/* ...except on phones, where 23 logos would stack too high: a row you can swipe instead */
@media (max-width:820px){
html.no-motion .trust--inhero .trust__marquee{ overflow-x:auto; scrollbar-width:none; }
html.no-motion .trust--inhero .trust__row--marquee{ width:max-content; flex-wrap:nowrap; justify-content:flex-start; }
}
@media (max-width:820px) and (prefers-reduced-motion:reduce){
.trust--inhero .trust__marquee{ overflow-x:auto; scrollbar-width:none; }
.trust--inhero .trust__row--marquee{ width:max-content; flex-wrap:nowrap; justify-content:flex-start; }
}
/* Unframed section navigation with stable targets and individual labels. */
.deckrail{
--rail-dot:var(--ink-300);
--rail-active:var(--green-700);
position:fixed; z-index:55;
right:max(10px, env(safe-area-inset-right));
top:min(50%, calc(100% - 184px - var(--rail-half-height, 160px)));
transform:translateY(-50%);
display:none; flex-direction:column; align-items:center; gap:0;
width:36px; padding:0; border:0; background:none; box-shadow:none;
}
@media (min-width:821px) and (min-height:620px){ .deck .deckrail{ display:flex; } }
.deckrail button{
position:relative; display:grid; place-items:center;
width:36px; height:24px; flex:0 0 24px;
background:none; border:0; padding:0; cursor:pointer; border-radius:4px;
}
.deckrail button:focus-visible{ outline:2px solid var(--rail-active); outline-offset:0; }
.deckrail__tick{
display:block; width:5px; height:5px; border-radius:8px;
background:var(--rail-dot);
transition:height .18s ease, background .18s ease;
}
.deckrail button:hover .deckrail__tick{ background:var(--rail-active); }
.deckrail button[aria-current="true"] .deckrail__tick{
height:18px; background:var(--rail-active);
}
.deckrail__lbl{
position:absolute; right:calc(100% + 8px); top:50%;
padding:8px 12px; border-radius:6px;
background:var(--dark); color:#fff;
font-family:var(--display); font-size:12px; font-weight:600;
letter-spacing:0; line-height:1.4; white-space:nowrap;
opacity:0; visibility:hidden; transform:translate(4px,-50%);
pointer-events:none; transition:opacity .15s ease, transform .15s ease, visibility .15s ease;
}
.deckrail button:hover .deckrail__lbl,
.deckrail button:focus-visible .deckrail__lbl{
opacity:1; visibility:visible; transform:translate(0,-50%);
}
.deckrail__position{
margin-top:10px; font-size:10px; font-weight:500;
line-height:1.5; letter-spacing:0; white-space:nowrap;
font-variant-numeric:tabular-nums; color:var(--rail-dot);
}
.deckrail__position strong{ font-weight:700; color:var(--rail-active); }
html[data-theme="dark"] .deckrail,
.deckrail.is-over-photo{ --rail-dot:var(--ink-300); --rail-active:var(--green-400); }
@media (prefers-reduced-motion:reduce){
.deckrail__tick,.deckrail__lbl{ transition:none; }
}
/* Scroll cue on the first slide */
.scrollcue{
position:absolute; left:50%; bottom:clamp(14px,2.4vh,30px); transform:translateX(-50%);
z-index:3; display:none; align-items:center; gap:.5em;
font-size:.76rem; font-weight:560; letter-spacing:.1em; text-transform:uppercase;
color:var(--ink-3);
}
@media (min-width:821px) and (min-height:620px){ .deck .scrollcue{ display:inline-flex; } }
.scrollcue svg{ width:15px; height:15px; animation:cuebob 1.9s ease-in-out infinite; }
@keyframes cuebob{ 0%,100%{ transform:translateY(0); opacity:.55 } 50%{ transform:translateY(4px); opacity:1 } }
@media (prefers-reduced-motion:reduce){ .scrollcue svg{ animation:none; } }
/* ---------- 24. Responsive ----------------------------------------------- */
@media (max-width:1040px){
.masonry{ columns:2; }
}
@media (max-width:900px){
.nav{ display:none; }
.burger{ display:flex; margin-left:auto; }
.hdr__login{ display:none; }
.hdr__in{ height:64px; }
.nav.is-open{
display:flex; flex-direction:column; align-items:stretch; gap:0;
position:absolute; inset:100% 0 auto 0; margin:0;
background:var(--cream); border-bottom:1px solid var(--line-2);
padding:10px var(--gutter) 20px;
}
.nav.is-open a{ width:100%; padding:.75em 0; border-bottom:1px solid var(--line-2); }
.grid-3,.grid-4{ grid-template-columns:repeat(2,1fr); }
.stats{ grid-template-columns:repeat(2,1fr); }
.split{ grid-template-columns:1fr; }
.split--rev{ direction:ltr; }
.split__media{ order:-1; }
.quote{ grid-template-columns:1fr; text-align:center; justify-items:center; }
.quote__by{ justify-content:center; }
}
@media (max-width:640px){
.grid-2,.grid-3,.grid-4{ grid-template-columns:1fr; }
.stats{ grid-template-columns:1fr 1fr; }
.masonry{ columns:1; }
.hero__actions .btn{ flex:1 1 auto; justify-content:center; }
}
/* Small phones: brand + CTA + burger overflow the header row at ~360px, which
pushes the whole document sideways. Trim them rather than dropping the CTA. */
@media (max-width:430px){
.brand__mark{ width:26px; height:26px; }
.brand__name{ font-size:1rem; }
.brand__name small{ display:none; }
.hdr__in{ gap:10px; }
.hdr__cta{ gap:8px; }
.hdr__cta .btn--sm{ padding:.55em .8em; font-size:.8rem; }
.burger{ width:38px; height:38px; }
}
@media (max-width:380px){
:root{ --gutter:16px; }
.brand__name{ font-size:.95rem; }
.hdr__cta .btn--sm{ padding:.5em .7em; font-size:.75rem; }
.stats{ grid-template-columns:1fr; }
}
/* ---------- 25. Real logo assets ----------------------------------------- */
/* Client logos and integration marks are real SVG/PNG files, so they need
their own sizing rules alongside the inline-SVG ones above. */
.trust__row--img img{
height:clamp(22px,2.4vw,32px); width:auto;
opacity:.9; filter:grayscale(1) contrast(1.25);
transition:opacity .2s ease, filter .2s ease;
}
.trust--inhero .trust__row--img img{
/* all client logos are 1024x300 SVGs with the logo already balanced inside */
width:clamp(112px,8.6vw,146px);
height:auto;
aspect-ratio:1024/300;
max-height:none;
object-fit:contain;
}
/* the grey (light) and gold (dark) are baked into the SVG files: no filters on the moving strip, so it stays smooth */
.trust--inhero .trust__row--img img,
.trust--inhero .trust__row--img li:hover img,
html[data-theme="dark"] .trust--inhero .trust__row--img img,
html[data-theme="dark"] .trust--inhero .trust__row--img li:hover img{ filter:none; opacity:1; transition:none; }
@media (max-width:820px){
.trust--inhero .trust__row{ min-height:44px; }
.trust--inhero .trust__row--img img{ width:clamp(112px,30vw,140px); }
}
.trust__row--img li:hover img{ opacity:1; filter:none; }
img.brand__mark{ object-fit:contain; }
/* Integration / framework logo rows inside the compliance slide */
.hexrow{ display:flex; flex-wrap:wrap; align-items:center; gap:clamp(10px,1.4vw,18px); }
.hexrow img{ height:clamp(24px,2.6vw,34px); width:auto; }
.quote__ava img{ width:100%; height:100%; object-fit:cover; }
/* Testimonial cards (who-we-serve page) */
.tcard{
margin:0; background:var(--white); border:1px solid var(--line-2);
border-radius:var(--r-md); padding:clamp(20px,2.2vw,28px);
display:flex; flex-direction:column; gap:1.1rem;
}
.tcard blockquote{
margin:0; font-family:var(--display); font-weight:600;
font-size:clamp(1rem,1.4vw,1.14rem); line-height:1.45; color:var(--ink);
}
.tcard figcaption{ margin-top:auto; }
.tcard__who{ display:block; font-size:.9rem; font-weight:640; color:var(--ink); }
.tcard__role{ display:block; font-size:.8rem; color:var(--body-2); margin-top:.15rem; }
.stat__sub{ color:var(--body-2); font-size:.8rem; }
/* Long unbreakable strings (the real support email) set a grid item's
min-content width and push the page sideways on small screens. */
.contact > *{ min-width:0; }
.inforow a, .inforow p, .ftr li a{ overflow-wrap:anywhere; }
/* ---------- 26. Large screens --------------------------------------------
Every container used to freeze at ~1366px (wrap 1360, hero card 1248,
headline 64px), so a 2560 or 3440 monitor showed the same layout as a
laptop with a wide cream margin around it. Keep growing, in two steps,
while holding line length inside a readable measure. */
@media (min-width:1700px){
:root{
--maxw:1340px;
--gutter:clamp(40px,3.2vw,80px);
--section-y:clamp(96px,7vw,150px);
}
.wrap--wide{ max-width:1560px; }
.herofig__body{ width:min(680px,100%); }
.herofig__body h1{ font-size:clamp(3.4rem, min(4.4vw,7.4vh), 5.4rem); }
.herofig__lede{ font-size:clamp(1.05rem, min(1.2vw,2.1vh), 1.25rem); max-width:44ch; }
.deck .hero--photo > .wrap > .herofig{ max-height:min(72vh,820px); }
.display{ font-size:clamp(3.2rem,3.4vw,4.4rem); }
.h-display{ font-size:clamp(2.5rem,2.5vw,3.4rem); }
.lede{ font-size:clamp(1.1rem,.95vw,1.26rem); max-width:60ch; }
.deck .preview .media__frame { height:clamp(320px,52vh,660px); }
.deck .split__media .media__frame{ height:clamp(280px,44vh,520px); }
}
@media (min-width:2300px){
:root{ --maxw:1480px; }
.wrap--wide{ max-width:1720px; }
.herofig__body{ max-width:1180px; }
}
/* Compliance slide is the densest one; on short deck viewports (e.g. 1024x700)
it ran ~23px past the fold. Scale its spacing and logo marks with height. */
@media (min-width:821px) and (min-height:620px){
.deck .vrow + .vrow{ margin-top:clamp(12px,2.2vh,28px); }
.deck .hexrow{ gap:clamp(8px,1.2vh,18px); }
.deck .hexrow img{ height:clamp(20px,2.6vh,34px); }
.deck .badges{ gap:clamp(6px,1vh,10px); }
.deck .badge{ padding:.45em .85em; }
}
/* Short deck viewports (roughly 1024x700 laptops): step the whole type and
rhythm scale down a notch so the densest slides still land inside one screen. */
@media (min-width:821px) and (min-height:620px) and (max-height:768px){
.deck .h-display{ font-size:clamp(1.65rem,3.4vh,2.25rem); }
.deck .center .lede{ font-size:.94rem; }
.deck .mt-l{ margin-top:clamp(12px,2.2vh,26px); }
.deck .vrow p, .deck .card p{ font-size:.86rem; line-height:1.5; }
/* Manrope 700 is a heavier face than the serif it replaced, so the split
headings need a step down here too. */
.deck .split__body h2{ font-size:clamp(1.45rem,3.1vh,2rem); }
.deck .split__body p{ font-size:.9rem; }
.deck .split__list li{ font-size:.87rem; }
/* Hero copy has to be able to give up height here, or the card cannot
shrink into its share and the trust logos fall off the fold. */
.deck .herofig__body{ padding-block:clamp(18px,3.2vh,38px); }
.deck .herofig__body h1{ font-size:clamp(3rem, min(4.8vw,7.5vh), 3.9rem); }
.deck .herofig__lede{ font-size:.96rem; margin-top:.82rem; }
.deck .herofig__actions{ margin-top:1.2rem; }
.deck .herofig__contact{ margin-top:.78rem; }
.deck .herofig__note{ font-size:.72rem; margin-top:.68rem; }
.deck .vrow__ico{ width:26px; height:26px; }
.deck .field__hint{ font-size:.74rem; }
}
/* The scroll cue was absolutely positioned at the hero section's bottom edge,
which is exactly where the trust strip sits: on 1024x700, 1280x720 and
1366x768 it landed on top of the client logos. Put it in normal flow after
the strip so the two can never collide. */
@media (min-width:821px) and (min-height:620px){
.deck .hero--photo .scrollcue{
position:static; order:3; align-self:center;
left:auto; bottom:auto; transform:none;
margin-top:clamp(6px,1.3vh,16px);
}
}
/* On the shortest deck viewports there is no room for the cue below the trust
strip; the slide dots already communicate paging, so drop it. */
@media (min-width:821px) and (max-height:780px){
.deck .hero--photo .scrollcue{ display:none; }
}
/* ---------- 27. Hero showcase -------------------------------------------
Slides crossfade in place; only the active one is opaque, so the scrim and
overlaid copy never move. */
.heroshow{ position:absolute; inset:0; z-index:0; }
.heroshow .herofig__bg{
position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
opacity:0; transition:opacity .9s ease;
}
.heroshow .herofig__bg.is-on{ opacity:1; }
/* caption + progress controls */
/* Top-right of the photo: keeps the copy column's bottom clear and balances
the credential tab diagonally. */
.heroctl{
position:absolute; z-index:3; right:clamp(20px,2.6vw,36px); left:auto;
top:clamp(18px,3vh,30px); bottom:auto;
display:flex; flex-direction:column; align-items:flex-end; gap:10px;
pointer-events:none;
}
.heroctl__cap{
padding:.45em .9em; border-radius:var(--pill); background:rgba(18,46,53,.58);
font-family:var(--display); font-size:clamp(.76rem,1vw,.88rem); font-weight:600;
letter-spacing:-.005em; color:rgba(255,255,255,.9);
text-shadow:0 1px 14px rgba(18,46,53,.6);
min-height:1.2em;
}
.heroctl__bars{ display:flex; gap:8px; pointer-events:auto; }
.heroctl__bars button{
width:34px; height:4px; padding:0; border:0; border-radius:99px; cursor:pointer;
background:rgba(255,255,255,.32);
box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);
overflow:hidden; position:relative;
transition:background .25s ease, width .3s cubic-bezier(.2,.7,.3,1);
}
.heroctl__bars button:hover{ background:rgba(255,255,255,.5); }
.heroctl__bars button[aria-current="true"]{ width:52px; background:rgba(255,255,255,.28); }
.heroctl__bars button i{
position:absolute; inset:0; display:block; width:0;
background:#fff;
border-radius:99px;
}
.heroctl__bars button[aria-current="true"] i{ width:100%; transition:width linear; }
@media (max-width:640px){
.heroctl{ flex-direction:column; align-items:flex-start; gap:10px; }
.heroctl__cap{ font-size:.74rem; }
}
@media (prefers-reduced-motion:reduce){
.heroshow .herofig__bg{ transition:none; }
.heroctl__bars button i{ transition:none; }
}
/* ---------- 28. Taller hero on bigger screens ---------------------------- */
@media (min-width:821px) and (min-height:620px){
/* No hand-tuned height subtraction here: the column flex layout already
reserves the trust strip and padding, so the wrap IS the space available
and the figure should fill it. A calc() bound on top of that only ever
left dead space between the card and the logos. The min() below is just a
ceiling for very tall screens. */
.deck .hero--photo > .wrap > .herofig{ max-height:none; }
}
@media (min-width:1700px){
.deck .hero--photo > .wrap{ max-height:min(84vh, 1020px); }
}
/* ---------- 29. ClinicPro sub-brand --------------------------------------
ClinicPro has its own documented palette in the product itself
(MasterPage2.master: --brand-80 #3c5996 family). Adding .cp-scope to a
section re-points the accent tokens, so every accent-driven component
inside it (eyebrow, icon tiles, checks, links, chips, buttons) picks up the
ClinicPro blue without touching a single component rule. */
:root{
/* Sampled from the ClinicPro logo itself. Its green (var(--green-500)) is Platform's
own green to within a rounding error, so the two brands already share it;
the red is what distinguishes ClinicPro. */
--cp-red: #E3262A; /* logo red, for marks and rules */
--cp-red-ink: #CB2224; /* deepened so text clears AA (5.54:1 on white) */
--cp-tint: #FDECEC;
}
/* ClinicPro sections keep the shared green for actions and checks, and pick up
the ClinicPro red for their eyebrow and rules. */
.cp-scope{ --gold: var(--cp-red-ink); }
.cp-scope .eyebrow{ display:inline-flex; align-items:center; gap:.6em; }
.cp-scope .eyebrow::after{
content:""; width:26px; height:2px; border-radius:2px; background:var(--cp-red);
}
/* The real ClinicPro logo, supplied from the product. */
.cplogo{
display:block; width:clamp(82px,6vw,120px); height:auto;
margin-inline:auto; margin-bottom:.4rem;
}
@media (min-width:821px) and (min-height:620px){
.deck .cplogo{ width:clamp(72px,6vw,110px); height:auto; }
}
/* Illustrated cards ("Who we serve"): the picture replaces the icon tile. */
.card__media{
border-radius:var(--r-sm); overflow:hidden;
aspect-ratio:7/5; margin-bottom:clamp(12px,1.4vw,18px);
background:var(--tan);
}
.card__media img{ width:100%; height:100%; object-fit:cover; display:block; }
.card--art{ padding:clamp(14px,1.5vw,18px); }
.card--art h3{ padding-inline:.25rem; }
.card--art p{ padding-inline:.25rem; }
@media (min-width:821px) and (min-height:620px){
/* sized against viewport height so the slide still fits one screen */
.deck .card__media{ aspect-ratio:auto; height:clamp(92px,14vh,150px); }
}
/* ---------- ClinicPro intro + "into the app" sequence --------------------
Two slides. The intro is a cinematic photo with the wordmark; the about
panel slides a laptop in and plays sign-in -> dashboard once, when the
slide first enters view (site.js adds .is-playing). */
.cpintro{ background:var(--page); }
.cpintro__frame{
position:relative; overflow:hidden; isolation:isolate;
border-radius:var(--r-xl);
height:clamp(460px, 78vh, 860px);
display:grid; place-items:center;
background:var(--dark);
}
.cpintro__photo{
position:absolute; inset:0; width:100%; height:100%; z-index:-2;
object-fit:cover; object-position:20% 32%;
transform:scale(1.14); transform-origin:18% 30%;
}
.cpintro__frame::after{ content:""; position:absolute; inset:0; z-index:-1; background:rgba(18,46,53,.22); }
.cpintro__word{
margin:0; display:flex; gap:.22em; flex-wrap:wrap; justify-content:center;
font-family:var(--display); font-weight:800; line-height:.9; letter-spacing:-.045em;
font-size:clamp(4.2rem, 15vw, 15.5rem);
color:var(--cp-red);
text-shadow:0 6px 40px rgba(18,46,53,.35);
}
.cpintro__word span{ display:inline-block; opacity:0; transform:translateY(.35em); }
.cpintro__mark{
position:absolute; left:clamp(22px,3vw,44px); bottom:clamp(18px,3vh,36px);
width:clamp(110px,11vw,180px); aspect-ratio:1.8; overflow:hidden; opacity:0;
}
.cpintro__mark img{ width:100%; height:auto; object-fit:cover; object-position:top; transform:translateY(-1%); }
.cpintro__by{
position:absolute; right:clamp(22px,3vw,44px); bottom:clamp(22px,3.4vh,40px); margin:0;
font-family:var(--display); font-size:.78rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
color:rgba(255,255,255,.86); opacity:0;
}
.cpintro.is-playing .cpintro__photo{ transform:scale(1); transition:transform 2.6s cubic-bezier(.16,1,.3,1); }
.cpintro.is-playing .cpintro__word span{ opacity:1; transform:none; transition:opacity .9s ease, transform 1.1s cubic-bezier(.16,1,.3,1); }
.cpintro.is-playing .cpintro__word span + span{ transition-delay:.14s; }
.cpintro.is-playing .cpintro__mark,
.cpintro.is-playing .cpintro__by{ opacity:1; transition:opacity .8s ease .6s; }
/* About panel */
.cpabout{ background:var(--page); }
.cpabout__panel{
--slate:var(--sage-600);
position:relative; overflow:hidden;
border-radius:var(--r-xl); background:var(--slate); color:var(--paper-100);
display:grid; grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr); align-items:center;
gap:clamp(24px,4vw,64px);
padding:clamp(40px,7vh,88px) 0 clamp(40px,7vh,88px) clamp(28px,5vw,80px);
min-height:clamp(460px, 74vh, 820px);
}
.cpabout__pill{
display:inline-block; margin:0 0 clamp(1.2rem,3vh,2.2rem);
padding:.32em 1.05em; border-radius:var(--pill);
background:var(--paper-50); color:var(--slate);
font-family:var(--display); font-weight:800; letter-spacing:-.02em;
font-size:clamp(1.4rem,2.3vw,2.1rem);
}
.cpabout__lead{
margin:0 0 1rem; color:#fff;
font-family:var(--display); font-weight:700; letter-spacing:-.02em; line-height:1.15;
font-size:clamp(1.35rem,2vw,1.8rem);
}
.cpabout__copy p:not(.cpabout__lead){ max-width:46ch; margin:0 0 1rem; font-size:clamp(.98rem,1.15vw,1.12rem); line-height:1.6; color:rgba(227,238,236,.88); }
.cpabout__actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:1.6rem; }
/* Laptop */
.laptop{
position:relative; width:118%; justify-self:start;
opacity:0; transform:translateX(38%);
}
.laptop__lid{
background:var(--ink-950); border-radius:18px 18px 0 0;
padding:clamp(8px,.9vw,13px) clamp(8px,.9vw,13px) clamp(14px,1.4vw,20px);
box-shadow:0 30px 60px rgba(18,46,53,.35), inset 0 0 0 1px rgba(255,255,255,.08);
}
.laptop__screen{ aspect-ratio:16/10; overflow:hidden; border-radius:4px; background:var(--paper-50); }
.laptop__base{
height:clamp(10px,1.1vw,16px); margin:0 -7%;
background:var(--ink-200); border-radius:0 0 14px 14px;
box-shadow:inset 0 -3px 0 var(--ink-300), 0 18px 30px rgba(18,46,53,.25);
}
.browser{ container-type:inline-size; height:100%; display:flex; flex-direction:column; }
.browser__bar{
flex:0 0 auto; display:flex; align-items:center; gap:2.2cqw;
padding:1.1cqw 1.8cqw; background:var(--ink-100); border-bottom:1px solid var(--paper-300);
font-size:1.5cqw; color:var(--ink-500);
}
.browser__nav{ letter-spacing:.6em; }
.browser__url{ flex:1; padding:.5cqw 1.6cqw; border-radius:99px; background:#fff; color:var(--ink-900); }
.browser__view{ position:relative; flex:1; overflow:hidden; }
.cpabout.is-playing .laptop{ opacity:1; transform:none; transition:transform 1.2s cubic-bezier(.16,1,.3,1), opacity .5s ease; }
.cpabout.is-playing .cpsign{ animation:cpLeave .7s cubic-bezier(.7,0,.84,0) 3.35s forwards; }
.cpabout.is-playing .cpdash{ animation:cpArrive 1s cubic-bezier(.16,1,.3,1) 3.7s forwards; }
@keyframes cpLeave{ to{ opacity:0; transform:scale(.97); } }
@keyframes cpArrive{ to{ opacity:1; transform:none; } }
@media (max-width:640px){ .cpintro__by{ display:none; } }
@media (max-width:900px){
.cpabout__panel{ grid-template-columns:minmax(0,1fr); padding:36px 22px 0; }
.laptop{ width:100%; transform:translateY(24%); }
}
@media (prefers-reduced-motion:reduce){
.cpintro__photo{ transform:none; }
.cpintro__word span,.cpintro__mark,.cpintro__by{ opacity:1; transform:none; }
.laptop{ opacity:1; transform:none; }
.cpsign{ display:none; }
.cpdash{ opacity:1; transform:none; }
.cpabout.is-playing *{ animation:none !important; }
}
/* ---------- ClinicPro module grid: expanding screen ----------------------
Hovering a card grows one shared panel out of it (clip-path from the
card's rect to a 3x2 block of the grid). The panel is an app window with
that module's facts on the left and a looping demo on the right. */
.modgrid{ position:relative; }
.mshow{
position:absolute; z-index:6; left:0; top:0; width:0; height:0;
visibility:hidden; pointer-events:none;
clip-path:inset(0 round var(--r-lg));
transition:clip-path .6s cubic-bezier(.16,1,.3,1), visibility 0s linear .6s;
}
.modgrid.is-open .mshow{ visibility:visible; pointer-events:auto; transition:clip-path .6s cubic-bezier(.16,1,.3,1), visibility 0s; }
.mshow__win{
height:100%; display:flex; flex-direction:column;
background:var(--dark); border-radius:var(--r-lg); padding:8px;
box-shadow:0 30px 70px rgba(18,46,53,.28);
}
.mshow__bar{ display:flex; align-items:center; gap:6px; padding:4px 8px 10px; }
.mshow__bar i{ width:9px; height:9px; border-radius:50%; background:var(--ink-700); }
.mshow__bar i:first-child{ background:var(--cp-red); }
.mshow__bar span{ margin-left:8px; font-family:var(--display); font-size:.74rem; font-weight:700; letter-spacing:.06em; color:var(--ink-300); text-transform:uppercase; }
.mshow__body{ position:relative; flex:1; min-height:0; border-radius:calc(var(--r-lg) - 8px); background:var(--paper-50); overflow:hidden; }
.mpane{
position:absolute; inset:0; display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
gap:clamp(16px,2.4vw,36px); padding:clamp(20px,2.6vw,36px);
opacity:0; visibility:hidden; transition:opacity .25s ease, visibility 0s linear .25s;
}
.mpane.is-on{ opacity:1; visibility:visible; transition:opacity .35s ease .2s, visibility 0s; }
.mpane__info{ display:flex; flex-direction:column; justify-content:center; color:var(--body); }
.mpane__eyebrow{ margin:0 0 .7rem; font-family:var(--display); font-size:.72rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); }
.mpane__info h3{ margin:0; font-family:var(--display); font-weight:800; letter-spacing:-.02em; line-height:1.1; font-size:clamp(1.3rem,1.9vw,1.9rem); color:var(--ink-920); }
.mpane__info ul{ list-style:none; margin:1.2rem 0 1.4rem; padding:0; display:grid; gap:.55rem; }
.mpane__info li{ position:relative; padding-left:1.4rem; font-size:.92rem; line-height:1.45; color:var(--ink-700); }
.mpane__info li::before{ content:""; position:absolute; left:0; top:.42em; width:.62rem; height:.62rem; border-radius:50%; background:var(--accent-tint); box-shadow:inset 0 0 0 3px var(--accent); }
.mpane__demo{
--ink:var(--ink-900); --mut:var(--ink-500); --ln:var(--paper-300); --g:var(--green-700); --gt:var(--green-100); --red:var(--red-700); --amber:var(--amber-700);
--t0:.35s;
position:relative; align-self:stretch; border-radius:16px; background:#fff;
box-shadow:0 1px 0 var(--ln), 0 12px 32px rgba(20,35,42,.08);
padding:clamp(14px,1.6vw,22px); overflow:hidden;
font-size:.8rem; color:var(--ink);
display:flex; flex-direction:column; gap:12px; justify-content:center;
}
.mpane__demo small{ display:block; color:var(--mut); font-size:.68rem; }
/* Demos only animate in the active pane; leaving restarts them next time. */
.mpane:not(.is-on) .mpane__demo, .mpane:not(.is-on) .mpane__demo *{ animation:none !important; }
@media (prefers-reduced-motion:reduce){
.mshow, .mpane{ transition:none !important; }
.mpane.is-on .mpane__demo, .mpane.is-on .mpane__demo *{ animation-duration:.01s !important; animation-delay:0s !important; animation-iteration-count:1 !important; }
}
.modgrid.is-interactive .card[data-mod]{ cursor:pointer; }
.modgrid.is-interactive .card[data-mod]:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
.mshow__close{
margin-left:auto; width:28px; height:28px; display:grid; place-items:center; padding:0;
border:0; border-radius:50%; background:var(--dark); color:var(--paper-300); font-size:1.1rem; line-height:1; cursor:pointer;
transition:background .2s ease, color .2s ease;
}
.mshow__close:hover{ background:var(--ink-800); color:#fff; }
.mshow__close:focus-visible{ outline:2px solid var(--brand-400); outline-offset:2px; }
/* ---------- One container width everywhere --------------------------------
Every slide card, the header and the footer share the same edges, so cards
on consecutive screens line up instead of changing width page to page. */
:root{ --maxw:1360px; }
.wrap--wide{ max-width:var(--maxw); }
@media (min-width:821px){ .wrap, .wrap--wide{ padding-inline:max(var(--gutter), 96px); } }
@media (min-width:1700px){ :root{ --maxw:1560px; } }
@media (min-width:2300px){ :root{ --maxw:1720px; } }
/* ---------- Compliance consulting card ------------------------------------
Dark anchor under the interoperability art: one message on the left, the
three frameworks as equal accreditation tiles that each get a check
stamped on when the card is revealed. */
.assure{
display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.25fr); align-items:center;
gap:clamp(20px,3.6vw,56px);
padding:clamp(18px,2.8vh,30px) clamp(22px,3vw,40px);
border-radius:var(--r-lg); background:var(--dark); color:var(--ink-200);
}
.assure__eyebrow{ margin:0 0 .5rem; font-family:var(--display); font-size:.7rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--brand-400); }
.assure__h{ margin:0; font-family:var(--display); font-weight:800; letter-spacing:-.02em; line-height:1.1; color:#fff; font-size:clamp(1.3rem, min(2vw, 3.4vh), 1.85rem); }
.assure__copy p:last-child{ margin:.6rem 0 0; max-width:46ch; font-size:.86rem; line-height:1.55; }
.assure__tiles{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(10px,1.2vw,16px); }
.assure__tiles li{
position:relative; display:grid; justify-items:center; align-content:center; gap:8px;
padding:clamp(14px,2vh,20px) 12px clamp(12px,1.6vh,16px);
border-radius:16px; background:var(--paper-50); text-align:center;
transition:transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s ease;
}
.assure__tiles li:hover{ transform:translateY(-3px); box-shadow:0 14px 30px rgba(0,0,0,.25); }
.assure__logo{ height:clamp(36px,5.6vh,48px); display:flex; align-items:center; justify-content:center; }
.assure__logo img{ display:block; width:auto; max-width:100%; object-fit:contain; }
.assure__img--tasneef{ height:78%; }
.assure__img--adhics{ height:100%; }
.assure__img--jawda{ height:48%; }
.assure__tiles small{ font-size:.7rem; line-height:1.3; color:var(--sage-600); }
.assure__stamp{
position:absolute; top:-9px; right:-9px; width:26px; height:26px; display:grid; place-items:center;
border-radius:50%; background:var(--accent); color:#fff; box-shadow:0 0 0 3px var(--ink-900);
opacity:0; transform:scale(1.8) rotate(-20deg);
}
.assure__stamp svg{ width:13px; height:13px; }
.assure.is-in .assure__stamp{ animation:assureStamp .45s cubic-bezier(.3,1.4,.5,1) forwards; }
.assure.is-in li:nth-child(1) .assure__stamp{ animation-delay:.45s; }
.assure.is-in li:nth-child(2) .assure__stamp{ animation-delay:.7s; }
.assure.is-in li:nth-child(3) .assure__stamp{ animation-delay:.95s; }
@keyframes assureStamp{ to{ opacity:1; transform:none; } }
@media (max-width:900px){ .assure{ grid-template-columns:1fr; } }
@media (max-width:520px){ .assure__tiles{ grid-template-columns:1fr 1fr 1fr; gap:8px; } .assure__tiles small{ display:none; } }
@media (prefers-reduced-motion:reduce){ .assure__stamp{ opacity:1; transform:none; } .assure.is-in .assure__stamp{ animation:none; } }
/* ---------- Industries: facility explorer ---------------------------------
One stage: pick a facility type on the left, the photo behind and the
solid info panel bottom-right switch to that facility. */
.ind{ background:var(--page); }
.ind__frame{
position:relative; overflow:hidden; isolation:isolate;
display:grid; grid-template-columns:minmax(0,1fr) minmax(320px,440px); align-items:end;
gap:clamp(20px,3vw,48px);
height:clamp(520px, calc(100svh - var(--hdr-h) - clamp(44px,8vh,96px)), 900px);
padding:clamp(24px,4.6vh,56px) clamp(24px,3.4vw,52px);
border-radius:var(--r-xl); background:var(--dark);
}
.ind__photos{ position:absolute; inset:0; z-index:-1; }
.ind__photos img{
position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
opacity:0; transform:scale(1.04); transition:opacity .7s ease, transform 1.4s cubic-bezier(.16,1,.3,1);
}
.ind__photos img.is-on{ opacity:1; transform:none; }
.ind__photos::after{
content:""; position:absolute; inset:0;
background:linear-gradient(90deg, rgba(18,46,53,.86) 0%, rgba(18,46,53,.66) 38%, rgba(18,46,53,.12) 72%, rgba(18,46,53,.04) 100%);
}
.ind__side{ align-self:center; color:#fff; max-width:560px; }
.ind__eyebrow{ margin:0 0 .8rem; font-family:var(--display); font-size:.74rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--brand-400); }
.ind__h{
margin:0 0 clamp(18px,3.6vh,36px); color:#fff; max-width:12em;
font-family:var(--display); font-weight:800; letter-spacing:-.03em; line-height:1;
font-size:clamp(2.1rem, min(3.8vw, 6.4vh), 3.9rem); text-wrap:balance;
}
.ind__tabs{ display:grid; justify-items:start; gap:clamp(2px,.6vh,6px); }
.ind__tabs button{
display:inline-flex; align-items:baseline; gap:.8em;
padding:clamp(.36em,.9vh,.55em) 1em; border:0; border-radius:var(--pill); background:transparent; cursor:pointer;
font-family:var(--display); font-weight:700; letter-spacing:-.01em; color:rgba(255,255,255,.66);
font-size:clamp(.98rem, min(1.35vw, 2.4vh), 1.2rem);
transition:background .25s ease, color .25s ease;
}
.ind__tabs em{ font-style:normal; font-size:.7em; font-weight:700; letter-spacing:.06em; color:rgba(255,255,255,.4); transition:color .25s ease; }
.ind__tabs button:hover{ color:#fff; background:rgba(255,255,255,.1); }
.ind__tabs button[aria-selected="true"]{ background:#fff; color:var(--ink); }
.ind__tabs button[aria-selected="true"] em{ color:var(--accent); }
.ind__tabs button:focus-visible{ outline:2px solid var(--brand-400); outline-offset:2px; }
.ind__panels{ position:relative; align-self:end; }
.ind__panel{
padding:clamp(18px,2.8vh,28px) clamp(20px,2vw,28px);
border-radius:22px; background:var(--paper-50); color:var(--body);
box-shadow:0 24px 60px rgba(18,46,53,.35);
animation:indIn .5s cubic-bezier(.16,1,.3,1);
}
@keyframes indIn{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }
.ind__kicker{ margin:0; font-family:var(--display); font-size:.72rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); }
.ind__desc{ margin:.45rem 0 0; font-family:var(--display); font-size:clamp(1rem, min(1.25vw, 2.3vh), 1.18rem); font-weight:700; line-height:1.35; color:var(--ink-920); }
.ind__label{ margin:clamp(12px,2.2vh,18px) 0 8px; font-size:.68rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--body-2); }
.ind__flow{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; align-items:center; gap:6px; }
.ind__flow{ gap:6px 18px; }
.ind__flow li{ position:relative; padding:.35em .75em; border-radius:8px; background:#fff; box-shadow:inset 0 0 0 1px var(--line); font-size:.78rem; font-weight:600; color:var(--ink-2); }
.ind__flow li + li::before{ content:"\2192"; position:absolute; left:-14px; top:50%; transform:translateY(-50%); color:var(--accent); font-weight:700; }
.ind__mods{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:6px; }
.ind__mods li{ padding:.35em .75em; border-radius:var(--pill); background:var(--accent-tint); color:var(--accent-2); font-size:.76rem; font-weight:700; }
.ind__panel .linkarw{ margin-top:clamp(14px,2.4vh,20px); }
@media (max-width:900px){
.ind__frame{ display:block; height:auto; padding:0; }
.ind__photos{ position:relative; inset:auto; height:clamp(200px,42vw,320px); z-index:0; }
.ind__photos::after{ background:linear-gradient(0deg, var(--ink-900) 0%, rgba(18,46,53,0) 60%); }
.ind__side{ max-width:none; padding:0 20px; margin-top:-48px; position:relative; }
.ind__tabs{ display:flex; overflow-x:auto; gap:6px; padding-bottom:6px; scrollbar-width:none; }
.ind__tabs button{ flex:0 0 auto; background:rgba(255,255,255,.08); }
.ind__panels{ padding:18px 20px 20px; }
}
@media (prefers-reduced-motion:reduce){
.ind__photos img{ transition:none; transform:none; }
.ind__panel{ animation:none; }
}
/* ---------- Industries: proof (outcomes + voices) ------------------------ */
.ind-proof__head{ max-width:640px; }
.ind-proof__stats{
margin:clamp(22px,4vh,44px) 0 0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.ind-proof__stats > div{ padding:clamp(16px,3vh,28px) clamp(14px,2vw,28px); }
.ind-proof__stats > div + div{ border-left:1px solid var(--line); }
.ind-proof__stats > div:first-child{ padding-left:0; }
.ind-proof__stats dt{ font-family:var(--display); font-weight:800; letter-spacing:-.04em; line-height:1; color:var(--ink); font-size:clamp(2.2rem, min(4vw, 7vh), 3.8rem); }
.ind-proof__stats dd{ margin:.6rem 0 0; font-family:var(--display); font-weight:700; color:var(--ink-2); font-size:.95rem; }
.ind-proof__stats dd span{ display:block; margin-top:.25rem; font-family:var(--sans); font-weight:400; font-size:.8rem; color:var(--body-2); }
.ind-proof__quotes{ margin-top:clamp(20px,4vh,44px); display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(20px,3vw,48px); }
.ind-proof__quotes figure{ margin:0; display:flex; flex-direction:column; }
.ind-proof__quotes blockquote{ margin:0; flex:1; font-size:clamp(.95rem,1.1vw,1.05rem); line-height:1.6; color:var(--ink-2); }
.ind-proof__quotes figcaption{ margin-top:1rem; display:grid; gap:2px; font-size:.8rem; color:var(--body-2); }
.ind-proof__quotes figcaption b{ font-family:var(--display); font-size:.9rem; color:var(--ink); }
@media (max-width:900px){
.ind-proof__stats{ grid-template-columns:1fr 1fr; }
.ind-proof__stats > div:nth-child(3){ border-left:0; padding-left:0; }
.ind-proof__stats > div:nth-child(n+3){ border-top:1px solid var(--line); }
.ind-proof__quotes{ grid-template-columns:1fr; }
}
.ftr__copy{ display:flex; flex-wrap:wrap; align-items:center; gap:4px 18px; }
.ftr__copy a{ color:var(--body-2); transition:color .16s ease; }
.ftr__copy a:hover{ color:var(--accent); }
/* ---------- Legal pages (terms, privacy) ----------------------------------
Long-form reading: no slide snapping. A quiet page head with a document
switch, then a sticky contents rail beside one readable column. */
.legal{ background:var(--page); }
.legal__head{ padding-block:clamp(36px,7vh,80px) clamp(24px,4vh,44px); border-bottom:1px solid var(--line); }
.legal__switch{ display:inline-flex; gap:4px; padding:4px; margin-bottom:clamp(20px,4vh,36px); border-radius:var(--pill); background:var(--page-alt); box-shadow:inset 0 0 0 1px var(--line-2); }
.legal__switch a{ padding:.5em 1.1em; border-radius:var(--pill); font-family:var(--display); font-size:.84rem; font-weight:700; color:var(--ink-3); transition:background .2s ease, color .2s ease; }
.legal__switch a:hover{ color:var(--ink); }
.legal__switch a[aria-current="page"]{ background:var(--surface); color:var(--ink); box-shadow:0 1px 2px rgba(18,46,53,.08), 0 4px 12px rgba(18,46,53,.06); }
.legal__h{ margin:.5rem 0 0; font-family:var(--display); font-weight:800; letter-spacing:-.03em; line-height:1; color:var(--ink); font-size:clamp(2.4rem,5vw,4.2rem); }
.legal__meta{ margin:1rem 0 0; font-size:.85rem; font-weight:600; color:var(--body-2); }
.legal__lede{ margin:1rem 0 0; max-width:62ch; font-size:clamp(1rem,1.2vw,1.12rem); line-height:1.6; color:var(--body); }
.legal__body{ padding-block:clamp(32px,6vh,64px) clamp(48px,8vh,96px); }
.legal__grid{ display:grid; grid-template-columns:minmax(200px,260px) minmax(0,1fr); gap:clamp(32px,6vw,96px); align-items:start; }
.legal__toc{ position:sticky; top:calc(var(--hdr-h) + 24px); }
.legal__toc > p{ margin:0 0 .8rem; font-family:var(--display); font-size:.72rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--body-2); }
.legal__toc ol{ list-style:none; margin:0; padding:0; counter-reset:toc; display:grid; gap:2px; }
.legal__toc li{ counter-increment:toc; }
.legal__toc a{ display:flex; gap:.7em; padding:.42em .7em; border-radius:10px; font-size:.88rem; color:var(--ink-3); transition:background .16s ease, color .16s ease; }
.legal__toc a::before{ content:counter(toc, decimal-leading-zero); font-family:var(--display); font-size:.72rem; font-weight:700; color:var(--body-2); padding-top:.15em; }
.legal__toc a:hover{ background:var(--page-alt); color:var(--ink); }
.legal__toc a.is-current{ background:var(--surface); color:var(--ink); font-weight:600; box-shadow:inset 0 0 0 1px var(--line-2); }
.legal__toc a.is-current::before{ color:var(--accent); }
.legal__doc{ max-width:72ch; }
.legal__doc section{ padding-block:clamp(22px,3.4vh,34px); border-top:1px solid var(--line-2); scroll-margin-top:calc(var(--hdr-h) + 20px); }
.legal__doc section:first-child{ border-top:0; padding-top:0; }
.legal__doc h2{ display:flex; align-items:baseline; gap:.7em; margin:0 0 .9rem; font-family:var(--display); font-weight:800; letter-spacing:-.02em; line-height:1.2; color:var(--ink); font-size:clamp(1.3rem,1.8vw,1.6rem); }
.legal__doc h2 span{ font-size:.62em; font-weight:700; letter-spacing:.04em; color:var(--accent); }
.legal__doc h3{ margin:1.4rem 0 .6rem; font-family:var(--display); font-weight:700; font-size:1.02rem; color:var(--ink-2); }
.legal__doc p{ margin:0 0 .9rem; line-height:1.7; color:var(--body); }
.legal__doc strong{ color:var(--ink-2); font-weight:650; }
.legal__doc a{ color:var(--accent); text-decoration:underline; text-underline-offset:3px; }
.legal__doc ul{ list-style:none; margin:0 0 .9rem; padding:0; display:grid; gap:.6rem; }
.legal__doc li{ position:relative; padding-left:1.4rem; line-height:1.65; color:var(--body); }
.legal__doc li::before{ content:""; position:absolute; left:.2rem; top:.7em; width:6px; height:6px; border-radius:50%; background:var(--accent); }
.legal__note{ margin:0 0 1rem; padding:16px 20px; border-radius:14px; background:var(--accent-tint); }
.legal__note p{ margin:0; color:var(--ink-2); }
.legal__note .legal__note-h{ margin-bottom:.3rem; font-family:var(--display); font-weight:800; color:var(--accent-2); }
.legal__contact{ margin:.4rem 0 1rem; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; border-radius:14px; overflow:hidden; background:var(--line-2); box-shadow:inset 0 0 0 1px var(--line-2); }
.legal__contact > div{ padding:14px 18px; background:var(--surface); }
.legal__contact dt{ font-size:.7rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--body-2); }
.legal__contact dd{ margin:.3rem 0 0; font-family:var(--display); font-weight:700; color:var(--ink); overflow-wrap:anywhere; }
.legal__contact dd a{ color:inherit; text-decoration:none; }
.legal__contact dd a:hover{ color:var(--accent); }
@media (max-width:900px){
.legal__grid{ grid-template-columns:1fr; }
.legal__toc{ position:static; }
.legal__toc ol{ grid-template-columns:1fr 1fr; }
.legal__contact{ grid-template-columns:1fr; }
}
/* ---------- Real ClinicPro screens (exported from the ClinicPro Figma) -----
Screens are shown exactly as designed. Static: each shows the top of
the screen. */
.appshot{ display:block; width:100%; height:100%; object-fit:cover; object-position:50% 0%; background:#fff; }
.cpsign, .cpdash{ position:absolute; inset:0; }
.cpsign .appshot{ object-position:0 0; }
/* Module screens: zoom 1.35x from the top-left so the real UI stays legible
in a window much narrower than the 1440px design. */
.cpdash{ opacity:0; transform:scale(1.03); }
.appframe{ display:flex; flex-direction:column; background:#fff; }
.appframe__bar{ flex:0 0 auto; display:flex; align-items:center; gap:6px; padding:8px 12px; background:var(--ink-100); border-bottom:1px solid var(--paper-300); }
.appframe__bar i{ width:9px; height:9px; border-radius:50%; background:var(--ink-200); }
.appframe__bar span{ flex:1; margin-left:10px; padding:3px 12px; border-radius:99px; background:#fff; font-size:11px; color:var(--ink-700); }
.appframe__view{ flex:1; min-height:0; overflow:hidden; }
@media (prefers-reduced-motion:reduce){ .appshot{ animation:none !important; } }
/* ---------- ClinicPro app kit ---------------------------------------------
Faithful mini-renders of the real ClinicPro UI (Figma "ClinicPro —
Responsive UI" tokens): navy menu bar, bordered panels, navy table heads,
status-tinted KPI tiles. Sized by --app-fs so one kit fits the laptop, the
home preview and the module screens. */
.cpapp{
--nv:#3c5a96; --nvd:#254279; --tx:#333; --mut:#808080; --ln:#eaeaea; --alt:#f7f7f7; --sub:#f6f8fb;
--info:#2563a8; --info-bg:#e8f1fb; --warn:#a96300; --warn-bg:#fff3e0;
--ok:#14804a; --ok-bg:#e6f6ec; --bad:#c0312b; --bad-bg:#fdecea;
height:100%; display:flex; flex-direction:column; overflow:hidden;
background:#fff; color:var(--tx); text-align:left;
font-family:"Open Sans","Droid Sans",Arial,sans-serif; font-size:var(--app-fs,11px); line-height:1.4;
}
.cpapp *{ box-sizing:border-box; }
.cpapp__nav{ flex:0 0 auto; display:flex; background:var(--nv); color:#fff; white-space:nowrap; overflow:hidden; font-size:.82em; text-transform:uppercase; letter-spacing:.01em; }
.cpapp__nav span{ padding:.95em 1.05em; border-right:1px solid var(--nvd); }
.cpapp__nav .cpapp__home{ display:grid; place-items:center; padding:0 1em; }
.cpapp__home svg{ width:1.3em; height:1.3em; fill:#fff; }
.cpapp__body{ flex:1; min-height:0; overflow:hidden; display:flex; flex-direction:column; gap:.7em; padding:.7em; }
.cpapp__panel{ border:1px solid var(--nv); padding:.75em; display:flex; flex-direction:column; gap:.6em; min-height:0; }
.cpapp__brand{ display:flex; align-items:center; justify-content:space-between; gap:1em; }
.cpapp__logos{ display:flex; align-items:center; gap:1em; }
.cpapp__logos img{ display:block; height:2.6em; width:auto; }
.cpapp__logos .cpapp__cp{ height:2.4em; width:3.2em; object-fit:cover; object-position:top; }
.cpapp__welcome{ margin:0; color:var(--nv); font-weight:700; font-size:1.05em; }
.cpapp__h{ margin:0; padding-bottom:.3em; border-bottom:1px solid var(--ln); color:var(--nv); font-size:1.18em; font-weight:400; }
.cpapp__filters{ display:flex; flex-wrap:wrap; gap:.5em 1.2em; align-items:center; }
.cpapp__field{ display:inline-flex; align-items:center; gap:.5em; }
.cpapp__input{ min-width:9em; padding:.35em .6em; border:1px solid #ccc; border-radius:3px; color:#555; background:#fff; }
.cpapp__input--sel::after{ content:" \25BE"; float:right; margin-left:.6em; color:#777; }
.cpapp__kpis{ display:grid; grid-template-columns:repeat(auto-fit,minmax(6.4em,1fr)); gap:.5em; }
.cpapp__kpi{ padding:.5em .7em; border:1px solid var(--ln); border-radius:3px; background:var(--sub); }
.cpapp__kpi small{ display:block; color:var(--mut); font-size:.82em; }
.cpapp__kpi b{ display:block; font-size:1.55em; font-weight:600; line-height:1.25; color:#222; }
.cpapp__kpi--info{ background:var(--info-bg); border-color:#d3e3f6; } .cpapp__kpi--info b{ color:var(--info); }
.cpapp__kpi--warn{ background:var(--warn-bg); border-color:#f6e0bd; } .cpapp__kpi--warn b{ color:var(--warn); }
.cpapp__kpi--ok{ background:var(--ok-bg); border-color:#c9ead6; } .cpapp__kpi--ok b{ color:var(--ok); }
.cpapp__kpi--bad{ background:var(--bad-bg); border-color:#f6cfcb; } .cpapp__kpi--bad b{ color:var(--bad); }
.cpapp__tbl{ width:100%; border-collapse:collapse; table-layout:auto; }
.cpapp__tbl th{ padding:.55em .7em; background:var(--nv); color:#fff; font-weight:700; text-align:left; white-space:nowrap; }
.cpapp__tbl td{ padding:.5em .7em; border-bottom:1px solid var(--ln); white-space:nowrap; }
.cpapp__tbl tbody tr:nth-child(even) td{ background:var(--alt); }
.cpapp__btn{ display:inline-block; padding:.25em .75em; border-radius:2px; background:var(--nv); color:#fff; font-size:.92em; line-height:1.5; }
.cpapp__st{ font-weight:600; }
.cpapp__st--ok{ color:var(--ok); } .cpapp__st--warn{ color:var(--warn); } .cpapp__st--bad{ color:var(--bad); } .cpapp__st--info{ color:var(--info); }
.cpapp__flag{ display:inline-block; margin-left:.4em; padding:0 .35em; border-radius:2px; background:var(--bad); color:#fff; font-size:.8em; font-weight:700; }
/* Login screen (Core / Login) */
.cplogin{ height:100%; display:grid; grid-template-columns:auto 1fr; gap:1.4em; align-content:start; padding:1.8em 2em 1em; background:#fff; position:relative; }
.cplogin__ava{ width:6.6em; height:7.4em; }
.cplogin__ava svg{ width:100%; height:100%; }
.cplogin__title{ margin:0; color:#5f7a8d; font-size:2em; font-weight:400; line-height:1.25; padding-bottom:.55em; border-bottom:1px solid #ccc; }
.cplogin__cols{ display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.6fr); gap:1.4em; margin-top:1em; }
.cplogin__form label{ display:block; margin:.6em 0 .3em; color:#333; }
.cplogin__in{ height:2.4em; display:flex; align-items:center; padding:0 .6em; border:1px solid #ccc; border-radius:3px; color:#333; overflow:hidden; white-space:nowrap; }
.cplogin__chk{ display:flex; align-items:center; gap:.5em; margin-top:.6em; color:#333; }
.cplogin__chk i{ width:.95em; height:.95em; border:1px solid #777; border-radius:2px; }
.cplogin__btn{ display:inline-block; margin-top:1em; padding:.5em 2em; border-radius:2px; background:var(--nv); color:#fff; }
.cplogin__rules{ list-style:none; margin:0; padding:.6em 0; border-top:1px solid #333; border-bottom:1px solid #333; display:grid; gap:.55em; }
.cplogin__rules li{ display:flex; align-items:center; gap:.7em; color:#333; }
.cplogin__rules li::before{ content:"\2713"; display:grid; place-items:center; width:1em; height:1em; border-radius:2px; background:#333; color:#fff; font-size:.75em; }
.cplogin__foot{ grid-column:1 / -1; display:flex; align-items:end; justify-content:space-between; margin-top:auto; padding-top:1em; }
.cplogin__ver{ font-weight:700; color:#333; }
/* ---------- Module demos rendered in the real ClinicPro UI --------------- */
.mpane__demo--app{ padding:0; display:block; border-radius:10px; --app-fs:clamp(9px, .66vw, 11px); }
.mpane__demo--app .cpapp{ height:100%; }
.mpane__demo--app .cpapp__body{ gap:.6em; }
@keyframes aIn{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }
@keyframes aPop{ to{ opacity:1; transform:none; } }
@keyframes aGrow{ from{ width:0; } }
@keyframes aRise{ from{ transform:scaleY(0); } }
@keyframes aOut{ to{ opacity:0; } }
@keyframes aDraw{ to{ stroke-dashoffset:0; } }
.mpane.is-on .a-in{ opacity:0; animation:aIn .45s cubic-bezier(.16,1,.3,1) forwards; animation-delay:calc(var(--t0) + var(--i,0) * .18s); }
.mpane.is-on .a-rows tbody tr{ opacity:0; animation:aIn .4s ease forwards; }
.mpane.is-on .a-rows tbody tr:nth-child(1){ animation-delay:calc(var(--t0) + .7s); }
.mpane.is-on .a-rows tbody tr:nth-child(2){ animation-delay:calc(var(--t0) + .85s); }
.mpane.is-on .a-rows tbody tr:nth-child(3){ animation-delay:calc(var(--t0) + 1s); }
.mpane.is-on .a-rows tbody tr:nth-child(4){ animation-delay:calc(var(--t0) + 1.15s); }
.a-alert, .a-note, .a-toast{ margin:0; padding:.45em .75em; border-radius:3px; font-weight:600; align-self:flex-start; }
.a-alert{ background:#fdecea; color:#c0312b; border:1px solid #f6cfcb; }
.a-note{ background:#fff3e0; color:#a96300; border:1px solid #f6e0bd; }
.a-toast{ background:#3c5a96; color:#fff; }
.mpane.is-on .a-alert--late{ opacity:0; animation:aIn .45s ease forwards calc(var(--t0) + 1.6s); }
.mpane.is-on .a-alert--late2{ opacity:0; animation:aIn .45s ease forwards calc(var(--t0) + 2s); }
.mpane.is-on .a-toast{ opacity:0; animation:aIn .45s ease forwards calc(var(--t0) + 2.7s); }
.a-hr svg{ display:block; width:100%; height:1.1em; margin-top:.15em; }
.a-hr path{ fill:none; stroke:#c0312b; stroke-width:2; vector-effect:non-scaling-stroke; stroke-dasharray:140; stroke-dashoffset:140; }
.mpane.is-on .a-hr path{ animation:aDraw 1.4s ease calc(var(--t0) + .6s) infinite; }
/* Scheduler (Calendar / AppointmentSchedulerPerDoc) */
.a-cal{ border:1px solid #dcdfe4; }
.a-cal__bar{ display:flex; justify-content:space-between; align-items:center; gap:.5em; padding:.5em .7em; background:#3c5a96; color:#fff; }
.a-cal__bar i{ font-style:normal; margin-left:.25em; padding:.12em .5em; border-radius:2px; background:rgba(255,255,255,.18); font-size:.85em; }
.a-cal__bar i.on{ background:#fff; color:#3c5a96; }
.a-cal__head, .a-cal__grid{ display:grid; grid-template-columns:3.6em repeat(3,minmax(0,1fr)); }
.a-cal__head{ background:#f6f8fb; border-bottom:1px solid #dcdfe4; }
.a-cal__head b{ padding:.45em .6em; font-size:.9em; }
.a-cal__grid{ grid-template-rows:repeat(6,2.2em); }
.a-t{ grid-column:1; grid-row:var(--r); padding:.3em .5em; color:#808080; font-size:.85em; }
.a-t, .a-cal__grid::before{ border-top:1px solid #eaeaea; }
.a-ev{
grid-column:var(--c); grid-row:var(--r); margin:.25em .35em; padding:0 .55em; overflow:hidden; white-space:nowrap;
display:flex; align-items:center; font-style:normal; font-size:.85em; color:#333;
border-left:3px solid #3c5a96; background:#e8f1fb;
}
.a-ev--ok{ border-left-color:#14804a; background:#e6f6ec; }
.a-ev--warn{ border-left-color:#a96300; background:#fff3e0; }
.a-ev--clash{ border-left-color:#c0312b; background:#fdecea; color:#c0312b; font-weight:600; }
.mpane.is-on .a-ev{ opacity:0; transform:scale(.92); animation:aPop .4s cubic-bezier(.16,1,.3,1) forwards; animation-delay:calc(var(--t0) + var(--d)); }
.mpane.is-on .a-ev--clash{ animation:aPop .4s ease forwards, aClash 1.1s cubic-bezier(.65,0,.35,1) forwards; animation-delay:calc(var(--t0) + 1.6s), calc(var(--t0) + 2.1s); }
@keyframes aClash{
0%{ opacity:1; transform:translateX(5px); } 15%{ opacity:1; transform:translateX(-4px); } 30%{ opacity:1; transform:translateX(3px); }
45%{ opacity:1; transform:none; }
100%{ opacity:1; transform:translateY(calc(100% + .5em)); background:#e6f6ec; color:#333; border-left-color:#14804a; font-weight:400; }
}
/* Claims */
.a-flip{ display:inline-grid; }
.a-flip em{ grid-area:1 / 1; font-style:normal; }
.a-flip em:last-child{ opacity:0; }
.mpane.is-on .a-flip em:first-child{ animation:aOut .3s ease forwards calc(var(--t0) + 2.2s); }
.mpane.is-on .a-flip em:last-child{ animation:aIn .4s ease forwards calc(var(--t0) + 2.35s); }
/* Inventory */
.demo-pharm .cpapp__tbl td:last-child{ width:34%; }
.a-bar{ display:block; height:.65em; width:var(--w); border-radius:2px; background:#3c5a96; }
.a-bar--warn{ background:#e08a1e; }
.mpane.is-on .a-bar{ animation:aGrow .9s cubic-bezier(.16,1,.3,1) both calc(var(--t0) + 1.2s); }
/* Lab */
.a-hi td{ background:#fdecea !important; }
.a-hi td:nth-child(2){ color:#c0312b; font-weight:700; }
/* Users log */
.a-log .cpapp__tbl{ table-layout:fixed; }
.a-log th:nth-child(1), .a-log td:nth-child(1){ width:22%; }
.a-log th:nth-child(2), .a-log td:nth-child(2){ width:18%; }
.a-log th:nth-child(3), .a-log td:nth-child(3){ width:38%; overflow:hidden; text-overflow:ellipsis; }
.a-log__win{ height:11em; overflow:hidden; border-bottom:1px solid #eaeaea; }
.mpane.is-on .a-log__track{ animation:aScroll 9s linear infinite calc(var(--t0) + .6s); }
@keyframes aScroll{ to{ transform:translateY(-66.66%); } }
.a-seal{ margin:0; display:flex; align-items:center; gap:.5em; color:#14804a; font-weight:700; }
.a-seal svg{ width:1.7em; height:1.7em; fill:none; stroke:#14804a; stroke-width:2; stroke-linecap:round; }
.a-shackle{ transform:translateY(-3px); }
.mpane.is-on .a-shackle{ animation:aLock .5s cubic-bezier(.3,1.4,.5,1) forwards calc(var(--t0) + 1.2s); }
@keyframes aLock{ to{ transform:none; } }
/* Reports */
.a-chart{ border:1px solid #eaeaea; padding:.6em .8em .8em; }
.a-chart p{ margin:0 0 .6em; }
.a-bars{ display:flex; align-items:flex-end; gap:.8em; height:9em; }
.a-bars i{ flex:0 0 2.6em; height:var(--h); background:var(--b); transform-origin:bottom; }
.mpane.is-on .a-bars i{ animation:aRise .8s cubic-bezier(.16,1,.3,1) both calc(var(--t0) + .5s); }
.mpane.is-on .a-bars i:nth-child(2){ animation-delay:calc(var(--t0) + .6s); }
.mpane.is-on .a-bars i:nth-child(3){ animation-delay:calc(var(--t0) + .7s); }
.mpane.is-on .a-bars i:nth-child(4){ animation-delay:calc(var(--t0) + .8s); }
.mpane.is-on .a-bars i:nth-child(5){ animation-delay:calc(var(--t0) + .9s); }
.mpane.is-on .a-bars i:nth-child(6){ animation-delay:calc(var(--t0) + 1s); }
/* Integrations hub */
.a-net{ position:relative; flex:1; min-height:15em; }
.d-net{ position:absolute; inset:0; width:100%; height:100%; }
.d-net path{ fill:none; stroke:#c9d5ea; stroke-width:2; stroke-dasharray:6 10; vector-effect:non-scaling-stroke; }
.mpane.is-on .d-net path{ animation:dFlow 1.2s linear infinite; }
@keyframes dFlow{ to{ stroke-dashoffset:-32; } }
.d-hub, .d-node{ position:absolute; transform:translate(-50%,-50%); white-space:nowrap; font-weight:700; }
.d-hub{ left:50%; top:50%; padding:.8em 1.2em; border-radius:3px; background:#3c5a96; color:#fff; font-size:1.1em; }
.mpane.is-on .d-hub{ animation:dPulse 2s ease-out infinite; }
@keyframes dPulse{ 0%{ box-shadow:0 0 0 0 rgba(60,90,150,.45); } 70%,100%{ box-shadow:0 0 0 16px rgba(60,90,150,0); } }
.d-node{ left:var(--x); top:var(--y); padding:.45em .8em; border:1px solid #3c5a96; border-radius:3px; background:#fff; color:#3c5a96; }
.mpane.is-on .d-node{ opacity:0; animation:dNode .5s cubic-bezier(.16,1,.3,1) forwards calc(var(--t0) + .2s); }
@keyframes dNode{ from{ opacity:0; transform:translate(-50%,-50%) scale(.85); } to{ opacity:1; transform:translate(-50%,-50%); } }
/* Login sequence over the real login image (positions are % of the 1440x666 design). */
.cplogin-stage{ position:relative; height:100%; aspect-ratio:1440 / 666; container-type:inline-size; }
.cplogin-stage img{ display:block; width:100%; height:100%; }
.cplogin-stage__in{ position:absolute; left:14.6%; width:12.9%; height:4.5%; display:flex; align-items:center; padding-left:.8cqw;
font-family:"Open Sans",Arial,sans-serif; font-size:1cqw; color:#333; background:#fff; }
.cplogin-stage__in--user{ top:32.4%; }
.cplogin-stage__in--pass{ top:42.5%; }
.cplogin-stage__btn{ position:absolute; left:14.45%; top:65.3%; width:6.4%; height:4.8%; border-radius:2px; background:rgba(0,0,0,0); }
.cpsign__type{ display:inline-block; overflow:hidden; white-space:nowrap; width:0; border-right:.12cqw solid transparent; }
.cpsign__type--user{ --chars:7; }
.cpsign__type--pass{ --chars:8; }
.cpabout.is-playing .cpsign__type--user{ animation:cpType .7s steps(7) 1.25s forwards, cpCaret .7s step-end 1.25s 1; }
.cpabout.is-playing .cpsign__type--pass{ animation:cpType .6s steps(8) 2.1s forwards, cpCaret .6s step-end 2.1s 1; }
.cpabout.is-playing .cpsign__btn{ animation:cpPress .35s ease 2.95s; }
@keyframes cpType{ to{ width:calc(var(--chars) * 1ch); } }
@keyframes cpCaret{ 0%{ border-right-color:#333; } 100%{ border-right-color:transparent; } }
@keyframes cpPress{ 50%{ background:rgba(0,0,0,.28); } }
/* Module demos: tighter rows so each real-design screen fits its window. */
.mpane__demo--app .cpapp__body{ gap:.45em; padding:.55em; }
.mpane__demo--app .cpapp__panel{ gap:.45em; padding:.6em; }
.mpane__demo--app .cpapp__tbl th, .mpane__demo--app .cpapp__tbl td{ padding:.38em .6em; }
.mpane__demo--app .cpapp__kpi{ padding:.35em .6em; }
.mpane__demo--app .cpapp__kpi b{ font-size:1.4em; }
/* ---------- Dark mode: fixed light surfaces keep light-mode text tokens ----
These components sit on white or near-white whatever the theme, so the
dark theme's light ink would vanish on them. Reset the tokens locally. */
html[data-theme="dark"] :is(
.btn--onphoto, .btn--onink, .phead--image .btn:not(.btn--ghost),
.cpabout__pill, .ind__tabs button[aria-selected="true"], .ind__panel,
.mshow__body, .appframe
){
--ink:var(--ink-900); --ink-2:var(--ink-800); --ink-3:var(--ink-500); --body:var(--ink-700); --body-2:var(--ink-500);
--line:rgba(18,46,53,.13); --line-2:rgba(18,46,53,.09);
}
html[data-theme="dark"] .btn--ink{ --btn-bg:var(--paper-100); --btn-fg:var(--ink-950); }
html[data-theme="dark"] .btn--ghost{ --btn-bg:transparent; --btn-fg:var(--paper-100); --btn-bd:rgba(227,238,236,.28); }
html[data-theme="dark"] .btn--ghost:hover{ --btn-bg:rgba(255,255,255,.08); }
/* Regulator marks, client logos and framework badges have dark-mode files (data-dark-src, swapped by site.js). */
html[data-theme="dark"] .herotab__logos img{ mix-blend-mode:normal; }
html[data-theme="dark"] .assure__tiles li{ background:var(--ink-920); box-shadow:inset 0 0 0 1px rgba(227,238,236,.12), 0 6px 18px rgba(0,0,0,.25); }
html[data-theme="dark"] .assure__tiles small{ color:var(--ink-300); }
html[data-theme="dark"] .trust__row--img img{ filter:none; opacity:.9; } /* the gold dark-mode logo files */
html[data-theme="dark"] .trust__row--img li:hover img{ filter:none; opacity:1; }
/* ---------- Contact: minimal ----------------------------------------------
Same language as the rest of the site: page paper, ink type, thin rules,
one green accent. Copy and contact lines on the left, the form on a quiet
surface card on the right. */
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.form-error{ margin:0 0 .7rem; padding:.55em .85em; border-radius:10px; background:var(--red-50); color:var(--red-700); font-size:.84rem; font-weight:600; }
.cx{ background:var(--page); }
.cx__frame{ display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:clamp(32px,6vw,96px); align-items:center; }
.cx__side{ display:flex; flex-direction:column; color:var(--body); }
.cx__eyebrow{ margin:0 0 .6rem; font-family:var(--display); font-size:.72rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); }
.cx__h{ margin:0; color:var(--ink); font-family:var(--display); font-weight:800; letter-spacing:-.035em; line-height:1; font-size:clamp(2rem, min(3.4vw, 5.6vh), 3.4rem); }
.cx__lede{ margin:.8rem 0 0; max-width:40ch; font-size:.95rem; line-height:1.6; color:var(--body); }
.cx__label{ margin:clamp(18px,3.4vh,32px) 0 .5rem; font-family:var(--display); font-size:.68rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--body-2); }
.cx__steps{ list-style:none; margin:0; padding:0; counter-reset:cx; border-top:1px solid var(--line-2); }
.cx__steps li{ display:grid; grid-template-columns:2.2em 1fr; gap:0 .4em; padding:clamp(8px,1.4vh,12px) 0; border-bottom:1px solid var(--line-2); counter-increment:cx; }
.cx__steps li::before{ content:counter(cx, decimal-leading-zero); grid-row:span 2; font-family:var(--display); font-size:.78rem; font-weight:800; color:var(--accent); padding-top:.15em; }
.cx__steps b{ font-family:var(--display); font-size:.92rem; color:var(--ink); }
.cx__steps span{ font-size:.8rem; line-height:1.45; color:var(--body-2); }
.cx__talk{ margin-top:clamp(4px,1vh,10px); }
.cx__wa{ display:inline-flex; align-items:center; gap:10px; padding:.55em 1.1em .55em .8em; border-radius:var(--pill); border:1px solid var(--line); color:var(--ink); transition:border-color .2s ease, background .2s ease; }
.cx__wa:hover{ border-color:var(--accent); background:var(--surface); }
.cx__wa svg{ width:18px; height:18px; color:var(--whatsapp); }
.cx__wa span{ display:flex; align-items:baseline; gap:.6em; }
.cx__wa b{ font-family:var(--display); font-size:.88rem; }
.cx__wa small{ font-size:.76rem; color:var(--body-2); }
.cx__lines{ list-style:none; margin:12px 0 0; padding:0; display:grid; gap:5px; }
.cx__lines li{ display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 12px; font-size:.84rem; }
.cx__lines span{ flex:0 0 48px; font-size:.66rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--body-2); }
.cx__lines a, .cx__lines em{ color:var(--ink-2); font-style:normal; overflow-wrap:anywhere; }
.cx__lines a:hover{ color:var(--accent); }
.cx__form{ padding:clamp(18px,3vh,32px) clamp(20px,2.6vw,36px); border-radius:var(--r-lg); background:var(--surface); box-shadow:inset 0 0 0 1px var(--line-2), 0 18px 44px rgba(18,46,53,.06); }
.cx__form .form{ gap:0; }
.cx__group{ margin:0 0 clamp(8px,1.4vh,12px); padding:0; border:0; min-width:0; }
.cx__group legend{ padding:0; margin-bottom:.4rem; font-family:var(--display); font-size:.66rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--body-2); }
.cx__group legend small{ margin-left:.5em; font-weight:600; letter-spacing:.02em; text-transform:none; }
.cx__row{ display:grid; grid-template-columns:1fr 1fr; gap:8px 12px; margin-bottom:8px; }
.cx__form .field label, .cx__pick-l{ display:block; margin:0 0 .22rem; font-size:.74rem; font-weight:600; color:var(--ink-2); }
.cx__form .field input, .cx__form .field select, .cx__form .field textarea{ border-radius:10px; font-size:.88rem; background:var(--page); }
.cx__form .field input, .cx__form .field select{ height:clamp(34px,4.8vh,40px); padding-block:0; }
.cx__form .field textarea{ height:clamp(44px,7vh,64px); min-height:0; resize:vertical; }
.cx__pick{ display:flex; flex-wrap:wrap; gap:5px; margin-bottom:8px; }
.cx__pick-l{ flex:0 0 100%; }
.cx__chip input, .cx__seg input{ position:absolute; opacity:0; pointer-events:none; }
.cx__chip span{ display:inline-flex; padding:.32em .8em; border-radius:var(--pill); cursor:pointer; border:1px solid var(--line); color:var(--ink-2); font-size:.78rem; font-weight:600; transition:background .16s, color .16s, border-color .16s; }
.cx__chip span:hover{ border-color:var(--ink-3); }
.cx__chip input:checked + span{ background:var(--ink); border-color:var(--ink); color:var(--surface); }
.cx__chip input:focus-visible + span, .cx__seg input:focus-visible + span{ outline:2px solid var(--accent); outline-offset:2px; }
.cx__seg{ display:grid; grid-template-columns:repeat(5,1fr); width:100%; border:1px solid var(--line); border-radius:10px; overflow:hidden; }
.cx__seg label{ position:relative; }
.cx__seg label + label span{ border-left:1px solid var(--line); }
.cx__seg span{ display:block; padding:.34em 0; text-align:center; cursor:pointer; font-size:.8rem; font-weight:600; color:var(--ink-3); transition:background .16s, color .16s; }
.cx__seg input:checked + span{ background:var(--ink); color:var(--surface); }
.cx__submit{ margin-top:4px; padding-block:.75em; font-size:.92rem; }
.cx__form .form__note{ margin-top:.5rem; font-size:.7rem; line-height:1.45; color:var(--body-2); }
.cx__form .form__note a{ color:var(--accent); text-decoration:underline; text-underline-offset:3px; }
@media (max-height:760px){ .deck .cx.slide{ padding-top:calc(var(--hdr-h) + 12px); padding-bottom:12px; } }
@media (max-width:960px){ .cx__frame{ grid-template-columns:1fr; gap:28px; } }
@media (max-width:560px){ .cx__row{ grid-template-columns:1fr; } .cx__seg{ grid-template-columns:repeat(3,1fr); } }
/* Contact: generous spacing (page scrolls on short screens rather than crowd). */
.deck .cx.slide{ padding-block:calc(var(--hdr-h) + clamp(40px,8vh,96px)) clamp(48px,9vh,110px); }
@media (max-height:760px){ .deck .cx.slide{ padding-block:calc(var(--hdr-h) + 40px) 56px; } }
.cx__frame{ gap:clamp(48px,8vw,140px); align-items:start; }
.cx__side{ padding-top:clamp(8px,2vh,24px); }
.cx__h{ font-size:clamp(2.2rem,3.6vw,3.6rem); }
.cx__lede{ margin-top:1.2rem; font-size:1rem; line-height:1.7; }
.cx__label{ margin:clamp(36px,6vh,56px) 0 .8rem; }
.cx__steps li{ padding:clamp(14px,2.2vh,20px) 0; }
.cx__steps span{ margin-top:.2rem; }
.cx__talk{ margin-top:clamp(12px,2vh,20px); }
.cx__lines{ margin-top:18px; gap:10px; }
.cx__form{ padding:clamp(32px,5vh,52px) clamp(28px,3.4vw,52px); }
.cx__group{ margin-bottom:clamp(24px,4vh,36px); }
.cx__group legend{ margin-bottom:1rem; }
.cx__row{ gap:16px 18px; margin-bottom:16px; }
.cx__form .field label, .cx__pick-l{ margin-bottom:.45rem; font-size:.78rem; }
.cx__form .field input, .cx__form .field select{ height:46px; }
.cx__form .field textarea{ height:96px; }
.cx__pick{ gap:8px; margin-bottom:18px; }
.cx__chip span{ padding:.45em 1em; font-size:.82rem; }
.cx__seg span{ padding:.55em 0; }
.cx__submit{ margin-top:8px; padding-block:1em; }
.cx__form .form__note{ margin-top:1rem; }
/* Contact: spacing scales with screen height so it stays open but fits one screen. */
.deck .cx.slide{ padding-block:calc(var(--hdr-h) + clamp(20px,5vh,72px)) clamp(20px,5vh,72px); }
@media (max-height:760px){ .deck .cx.slide{ padding-block:calc(var(--hdr-h) + 20px) 20px; } }
.cx__frame{ align-items:center; }
.cx__side{ padding-top:0; }
.cx__h{ font-size:clamp(2rem, min(3.6vw, 6vh), 3.6rem); }
.cx__lede{ margin-top:clamp(.6rem,1.6vh,1.2rem); }
.cx__label{ margin:clamp(18px,4vh,48px) 0 clamp(.4rem,1vh,.8rem); }
.cx__steps li{ padding:clamp(8px,1.6vh,18px) 0; }
.cx__lines{ margin-top:clamp(10px,1.8vh,18px); gap:clamp(5px,1vh,10px); }
.cx__form{ padding:clamp(22px,4vh,48px) clamp(24px,3.2vw,48px); }
.cx__group{ margin-bottom:0; }
.cx__row{ gap:clamp(10px,1.8vh,18px) 18px; margin-bottom:clamp(10px,1.8vh,18px); }
.cx__form .field label, .cx__pick-l{ margin-bottom:clamp(.25rem,.6vh,.45rem); }
.cx__form .field input, .cx__form .field select{ height:clamp(36px,5vh,46px); }
.cx__form .field textarea{ height:clamp(48px,8vh,96px); }
.cx__pick{ gap:clamp(5px,.9vh,8px); margin-bottom:clamp(10px,1.8vh,18px); }
.cx__chip span{ padding:clamp(.3em,.6vh,.45em) .95em; }
.cx__seg span{ padding:clamp(.3em,.7vh,.55em) 0; }
.cx__opt{ margin-left:.4em; font-weight:500; color:var(--body-2); }
.cx__submit{ margin-top:clamp(12px,2vh,20px); padding-block:clamp(.7em,1.4vh,1em); }
.cx__form .form__note{ margin-top:clamp(.5rem,1.2vh,1rem); }
@media (max-height:760px){
.cx__steps span{ display:none; }
.cx__steps li{ padding:7px 0; }
.cx__label{ margin-top:16px; }
.cx__form{ padding-block:18px; }
.cx__row{ margin-bottom:8px; row-gap:8px; }
.cx__pick{ margin-bottom:8px; }
.cx__form .field textarea{ height:44px; }
.cx__submit{ margin-top:8px; }
.cx__form .form__note{ margin-top:.35rem; font-size:.68rem; }
}
/* ---------- Footer colour: brand forest green ----------------------------- */
.ftr{ background:var(--green-900); border-top:0; color:var(--ink-200); }
.ftr .brand__name{ color:#fff; }
.ftr .brand__name small{ color:rgba(255,255,255,.55); }
.ftr__nav a{ color:var(--paper-200); }
.ftr__nav a:hover{ color:var(--green-400); }
.ftr__row--meta{ border-top-color:rgba(255,255,255,.14); }
.ftr__contact a, .ftr__copy, .ftr__copy a{ color:var(--ink-200); }
.ftr__contact a:hover, .ftr__copy a:hover{ color:#fff; }
.ftr__contact a + a::before{ color:rgba(255,255,255,.3); }
.ftr__icons a{ border-color:rgba(255,255,255,.22); color:var(--paper-200); }
.ftr__icons a:hover{ background:var(--green-400); border-color:var(--green-400); color:var(--green-900); }
html[data-theme="dark"] .ftr{ background:var(--green-900); }
/* ---------- Contact (simple): sized to share one screen with the footer --- */
.deck .cx--simple.slide{ min-height:calc(100svh - var(--ftr-h, 0px)); padding-block:calc(var(--hdr-h) + 16px) 20px; justify-content:center; }
.cx--simple .cx__frame{ grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:clamp(32px,6vw,96px); align-items:center; }
.cx--simple .cx__eyebrow{ margin-bottom:.4rem; }
.cx--simple .cx__h{ font-size:clamp(1.8rem,3vw,2.8rem); }
.cx--simple .cx__lede{ margin-top:.6rem; font-size:.95rem; line-height:1.55; max-width:32ch; }
.cx--simple .cx__lines{ margin-top:clamp(16px,3vh,28px); gap:8px; padding-top:clamp(12px,2vh,18px); border-top:1px solid var(--line-2); }
.cx--simple .cx__lines span{ flex:0 0 76px; }
.cx--simple .cx__form{ padding:clamp(18px,2.8vh,28px) clamp(20px,2.4vw,32px); }
.cx--simple .cx__row{ gap:10px 14px; margin-bottom:10px; }
.cx--simple .field label{ margin-bottom:.25rem; font-size:.74rem; }
.cx--simple .field input, .cx--simple .field select{ height:38px; }
.cx--simple .cx__msg{ margin-bottom:12px; }
.cx--simple .cx__submit{ margin-top:0; padding-block:.7em; }
.cx--simple .form__note{ margin-top:.5rem; font-size:.7rem; }
@media (max-width:960px){ .cx--simple .cx__frame{ grid-template-columns:1fr; } }
/* Footer: The Emirates nation-brand mark on a light plate (dark artwork). */
.ftr__icons{ align-items:center; }
.ftr__uae{ display:inline-flex; align-items:center; margin-right:10px; padding:5px 8px; border-radius:10px; background:var(--paper-50); }
.ftr__uae img{ display:block; width:auto; height:54px; }
.ftr{ background:var(--dark); }
html[data-theme="dark"] .ftr{ background:var(--dark); }
/* Footer: "Located in UAE" pill, as on the previous site. */
.ftr__uae{ display:inline-flex; align-items:center; gap:7px; margin-right:12px; padding:5px 12px 5px 9px; border-radius:var(--pill); background:var(--paper-50); color:var(--ink-900); font-size:.76rem; font-weight:600; white-space:nowrap; }
.ftr__uae svg{ width:20px; height:18px; display:block; }
.ftr__uae img{ display:none; }
/* "Located In UAE": as on the previous site. Plain mark + muted text beside the
copyright, no pill. The flag's black stripes are drawn light on the dark
footer so they stay visible. */
.ftr__uae{ display:inline-flex; align-items:center; gap:6px; margin:0; padding:0; background:none; border-radius:0; color:inherit; font-size:inherit; font-weight:400; }
.ftr__uae svg{ width:30px; height:26px; }
.ftr__uae path[fill="#050404"]{ fill:var(--paper-50); }
/* Compliance card: icy aqua glass, matching the interoperability artwork. */
.assure{
background:rgba(221,242,246,.72);
border:1px solid rgba(255,255,255,.9);
box-shadow:inset 0 1px 0 rgba(255,255,255,.95), 0 18px 44px rgba(27,111,128,.12);
backdrop-filter:blur(16px) saturate(1.3); -webkit-backdrop-filter:blur(16px) saturate(1.3);
color:var(--ink-700);
}
.assure__eyebrow{ color:var(--aqua-700); }
.assure__h{ color:var(--ink-900); }
.assure__copy p:last-child{ color:var(--ink-700); }
.assure__tiles li{ background:rgba(255,255,255,.88); box-shadow:inset 0 0 0 1px rgba(255,255,255,.95), 0 6px 18px rgba(27,111,128,.10); }
.assure__tiles li:hover{ box-shadow:inset 0 0 0 1px #fff, 0 14px 30px rgba(27,111,128,.18); }
.assure__stamp{ background:var(--aqua-700); box-shadow:0 0 0 3px var(--aqua-100); }
html[data-theme="dark"] .assure{
background:rgba(27,111,128,.18); border-color:rgba(191,230,238,.22);
box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 18px 44px rgba(0,0,0,.25); color:var(--ink-200);
}
html[data-theme="dark"] .assure__eyebrow{ color:var(--aqua-200); }
html[data-theme="dark"] .assure__h{ color:var(--paper-100); }
html[data-theme="dark"] .assure__copy p:last-child{ color:var(--ink-200); }
html[data-theme="dark"] .assure__stamp{ box-shadow:0 0 0 3px var(--ink-950); }
/* About ClinicPro panel: the one dark brand surface, like the CTA and footer. */
.cpabout__panel{ --slate:var(--dark); }
/* ---------- No motion: phones, tablets, touch screens, reduced motion ------
site.js adds html.no-motion. Animations and transitions are switched off
and every animated element is pinned to its finished state. */
html.no-motion *, html.no-motion *::before, html.no-motion *::after{
animation:none !important; transition:none !important; scroll-behavior:auto !important;
}
html.no-motion{ scroll-behavior:auto; }
html.no-motion .js .rv, html.no-motion.js .rv{ opacity:1 !important; transform:none !important; }
/* ClinicPro intro and laptop: final frame (dashboard on screen) */
html.no-motion .cpintro__photo{ transform:none; }
html.no-motion .cpintro__word span, html.no-motion .cpintro__mark, html.no-motion .cpintro__by{ opacity:1; transform:none; }
html.no-motion .laptop{ opacity:1; transform:none; }
html.no-motion .cpsign{ display:none; }
html.no-motion .cpdash{ opacity:1; transform:none; }
/* Module demos: final frame */
html.no-motion .mpane .a-in, html.no-motion .mpane .a-rows tbody tr, html.no-motion .mpane .a-ev,
html.no-motion .mpane .a-alert--late, html.no-motion .mpane .a-alert--late2, html.no-motion .mpane .a-toast,
html.no-motion .mpane .d-node, html.no-motion .mpane__demo > *{ opacity:1; transform:none; }
html.no-motion .mpane .d-node{ transform:translate(-50%,-50%); }
html.no-motion .mpane .a-ev--clash{ transform:translateY(calc(100% + .5em)); background:#e6f6ec; color:#333; border-left-color:#14804a; font-weight:400; }
html.no-motion .mpane .a-flip em:first-child{ opacity:0; }
html.no-motion .mpane .a-flip em:last-child{ opacity:1; }
html.no-motion .mpane .a-hr path{ stroke-dashoffset:0; }
html.no-motion .mpane .a-shackle{ transform:none; }
/* Compliance stamps */
html.no-motion .assure__stamp{ opacity:1; transform:none; }
/* ---------- Phones and tablets ------------------------------------------- */
@media (max-width:820px){
/* ClinicPro preview: full width, taller frame (desktop rule caps it at 58vw). */
.deck .product-preview-slide .preview, .product-preview-slide .preview{ max-width:100%; width:100%; }
.deck .product-preview-slide .preview .media__frame, .product-preview-slide .preview .media__frame{ aspect-ratio:4/3; height:auto; }
/* Floating chat + WhatsApp: smaller, and footer text kept clear of them. */
.float-actions{ gap:8px !important; bottom:max(14px, env(safe-area-inset-bottom)) !important; }
.float-action{ width:40px !important; height:40px !important; }
.float-action--whatsapp svg{ width:20px; height:20px; }
.ftr > .wrap{ padding-right:72px; }
}
@media (max-width:640px){
/* Regulator tab sits left, away from the floating buttons. */
.herofig .herotab{ align-self:flex-start; border-top-left-radius:0; border-top-right-radius:var(--tab-r); }
.herofig .herotab::before{ right:auto; left:0; }
.herofig .herotab::after{ right:auto; left:100%; transform:scaleX(-1); }
}
@media (max-width:640px){
.herofig{ border-radius:var(--r-lg) var(--r-lg) var(--r-lg) 0 !important; }
.herofig .herotab::before{ display:none; }
}
/* ClinicPro About panel: back to the sage the client chose. */
.cpabout__panel{ --slate:var(--sage-600); }
/* "Ready when you are": light aqua glass, matching the compliance card, so
cards stay light; only the footer is a dark surface. */
.cta{
background:rgba(221,242,246,.72) !important;
border:1px solid rgba(255,255,255,.9) !important;
box-shadow:inset 0 1px 0 rgba(255,255,255,.95), 0 18px 44px rgba(27,111,128,.12) !important;
backdrop-filter:blur(16px) saturate(1.3); -webkit-backdrop-filter:blur(16px) saturate(1.3);
}
.cta h2{ color:var(--ink-900); }
.cta p{ color:var(--ink-700) !important; }
.cta .btn--onink{ --btn-bg:var(--accent); --btn-fg:#fff; }
.cta .btn--onink:hover{ --btn-bg:var(--accent-2); }
.cta .btn--onink-ghost{ --btn-bg:transparent; --btn-fg:var(--ink-900); --btn-bd:rgba(18,46,53,.25); box-shadow:none; }
.cta .btn--onink-ghost:hover{ --btn-bg:rgba(255,255,255,.6); }
html[data-theme="dark"] .cta{ background:rgba(27,111,128,.18) !important; border-color:rgba(191,230,238,.22) !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 18px 44px rgba(0,0,0,.25) !important; }
html[data-theme="dark"] .cta h2{ color:var(--paper-100); }
html[data-theme="dark"] .cta p{ color:var(--ink-200) !important; }
html[data-theme="dark"] .cta .btn--onink-ghost{ --btn-fg:var(--paper-100); --btn-bd:rgba(227,238,236,.3); }
/* ---------- Contact us: the header button and its dialog ------------------- */
.hdr__contact{ gap:.45em; }
.hdr__contact svg{ width:14px; height:14px; }
.contact-dialog{ width:min(468px, calc(100vw - 32px)); max-height:calc(100dvh - 32px); padding:0; border:1px solid var(--line);
border-radius:24px; background:#FFFFFF; color:var(--ink); box-shadow:0 30px 80px rgba(10,23,28,.28); overflow:auto; }
.contact-dialog::backdrop{ background:rgba(10,23,28,.48); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); }
.contact-dialog[open]{ animation:contact-in .22s cubic-bezier(.16,1,.3,1); }
@keyframes contact-in{ from{ opacity:0; transform:translateY(10px) scale(.98); } to{ opacity:1; transform:none; } }
.contact-dialog__head{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; padding:24px 24px 0; }
.contact-dialog__head .eyebrow{ margin:0 0 4px; }
.contact-dialog__head h2{ margin:0; font-family:var(--display); font-size:1.6rem; font-weight:800; letter-spacing:-.02em; }
.contact-dialog__close{ display:inline-grid; place-items:center; width:38px; height:38px; flex:0 0 38px; border:1px solid var(--line);
border-radius:50%; background:transparent; color:var(--ink); cursor:pointer; }
.contact-dialog__close svg{ width:16px; height:16px; }
.contact-dialog__close:hover{ background:rgba(18,46,53,.05); }
.contact-dialog__lede{ margin:10px 24px 16px; color:var(--body-2); font-size:.92rem; }
.contact-dialog__list{ list-style:none; margin:0; padding:0 16px; display:grid; gap:6px; }
.contact-dialog__list a{ display:flex; align-items:center; gap:14px; padding:12px; border-radius:14px; color:var(--ink); text-decoration:none;
border:1px solid transparent; transition:background .15s ease, border-color .15s ease; }
.contact-dialog__list a:hover, .contact-dialog__list a:focus-visible{ background:var(--page, #F3F5F0); border-color:var(--line); }
.contact-dialog__ico{ display:inline-grid; place-items:center; width:40px; height:40px; flex:0 0 40px; border-radius:12px;
background:var(--green-100, #E7F5E0); color:var(--green-700, #27763B); }
.contact-dialog__ico svg{ width:18px; height:18px; }
.contact-dialog__txt{ display:grid; min-width:0; }
.contact-dialog__txt small{ font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--body-2); font-weight:600; }
.contact-dialog__txt b{ font-weight:700; font-size:.98rem; overflow-wrap:anywhere; }
.contact-dialog__txt b[data-email]{ font-size:.9rem; letter-spacing:-.01em; overflow-wrap:normal; } /* breaks only after the @ */
.contact-dialog__go{ width:16px; height:16px; margin-inline-start:auto; flex:0 0 16px; color:var(--body-2); }
[dir="rtl"] .contact-dialog__go{ transform:scaleX(-1); }
.contact-dialog__demo{ display:flex; justify-content:center; margin:16px 24px 24px; }
html[data-theme="dark"] .contact-dialog{ background:var(--ink-920, #10232A); border-color:rgba(227,238,236,.12); }
html[data-theme="dark"] .contact-dialog__ico{ background:rgba(122,191,68,.14); color:var(--green-400, #7ABF44); }
html[data-theme="dark"] .contact-dialog__list a:hover, html[data-theme="dark"] .contact-dialog__list a:focus-visible{ background:rgba(227,238,236,.05); border-color:rgba(227,238,236,.12); }
html[data-theme="dark"] .contact-dialog__close:hover{ background:rgba(227,238,236,.08); }
/* phones: the header button keeps only its icon */
@media (max-width:640px){
.hdr__contact span{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.hdr__contact{ padding:.5em .62em; }
}
/* ---------- ClinicPro intro: info cards -------------------------------------
Once "Clinic Pro" lands, the title rises and four glass cards slide in under it, one after another. They replay with the
scene (site.js adds and removes .is-playing). */
.cpintro__cards{ position:absolute; left:50%; bottom:clamp(86px, 15vh, 150px); transform:translateX(-50%); z-index:1; width:min(1060px, calc(100% - 64px));
margin:0; padding:0; list-style:none; display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:clamp(10px, 1.2vw, 16px); }
.cpintro__cards li{ display:grid; align-content:start; gap:6px; padding:16px 16px 18px; border-radius:18px; color:#fff;
background:rgba(13,29,35,.42); border:1px solid rgba(255,255,255,.22); box-shadow:0 18px 40px rgba(10,23,28,.28);
-webkit-backdrop-filter:blur(14px) saturate(1.3); backdrop-filter:blur(14px) saturate(1.3);
opacity:0; transform:translateY(18px); }
.cpintro__cardico{ display:inline-grid; place-items:center; width:34px; height:34px; border-radius:10px; margin-bottom:4px;
background:rgba(122,191,68,.22); color:#C9EAA8; }
.cpintro__cardico svg{ width:18px; height:18px; }
.cpintro__cards strong{ font-family:var(--display); font-size:1rem; font-weight:800; letter-spacing:-.01em; line-height:1.2; }
.cpintro__cards li > span:last-child{ font-size:.84rem; line-height:1.45; color:rgba(255,255,255,.84); }
.cpintro__word{ transition:transform .9s cubic-bezier(.16,1,.3,1); }
.cpintro.is-playing .cpintro__word{ transform:translateY(-34%) scale(.72); transition-delay:1.25s; }
.cpintro.is-playing .cpintro__cards li{ opacity:1; transform:none;
transition:opacity .7s ease, transform .9s cubic-bezier(.16,1,.3,1); transition-delay:calc(1.55s + var(--i) * .14s); }
/* tablets and phones: a compact two-by-two grid, the title higher */
@media (max-width:900px){
.cpintro__cards{ grid-template-columns:repeat(2, minmax(0, 1fr)); bottom:clamp(64px, 11vh, 96px); width:calc(100% - 32px); gap:8px; }
.cpintro__cards li{ padding:11px 12px 12px; gap:3px; border-radius:14px; }
.cpintro__cardico{ width:28px; height:28px; border-radius:8px; margin-bottom:2px; }
.cpintro__cardico svg{ width:15px; height:15px; }
.cpintro__cards strong{ font-size:.86rem; }
.cpintro__cards li > span:last-child{ font-size:.74rem; line-height:1.35; }
.cpintro.is-playing .cpintro__word{ transform:translateY(-120%) scale(.62); }
}
@media (max-width:520px){ .cpintro__cards li > span:last-child{ display:none; } } /* small phones: icon and title only */
html.no-motion .cpintro__cards li{ opacity:1; transform:none; }
html.no-motion .cpintro .cpintro__word{ transform:translateY(-34%) scale(.72); }
@media (max-width:900px){ html.no-motion .cpintro .cpintro__word{ transform:translateY(-120%) scale(.62); } }
/* ---------- 29. Home hero: product stage ----------------------------------
A realistic laptop and phone showing the real ClinicPro screens, over a
photo backdrop (assets/img/generated/hero-backdrop.jpg; without it the
brand gradient shows). The scene is drawn at 780x560 and scaled to fit
(site.js sets --hs-scale); it leans toward the pointer (--lean-x/-y).
Screens inside the laptop are the hero slides. Entrance plays each time
the hero is revealed. */
.herofig--product{
background:
linear-gradient(90deg, rgba(9,30,18,.94) 0%, rgba(9,30,18,.80) 34%, rgba(9,30,18,.30) 62%, rgba(9,30,18,.12) 100%),
radial-gradient(52% 62% at 74% 42%, rgba(122,191,68,.30) 0%, rgba(122,191,68,0) 70%),
radial-gradient(60% 60% at 100% 100%, rgba(47,141,70,.38) 0%, rgba(47,141,70,0) 70%),
linear-gradient(135deg, #0C2416 0%, #143A21 48%, #1A4A2A 100%);
}
.herostage{
position:absolute; z-index:1;
top:clamp(52px,7%,84px); bottom:clamp(36px,6%,64px); left:47%; right:0;
perspective:2200px; perspective-origin:50% 30%;
pointer-events:none;
}
.hs-scene{
position:absolute; left:calc(50% - 10px); top:50%; width:780px; height:560px;
transform:translate(-50%,-50%) scale(var(--hs-scale,1)) rotateX(var(--lean-x,0deg)) rotateY(var(--lean-y,0deg));
transform-style:preserve-3d; transition:transform .6s cubic-bezier(.2,.7,.3,1);
font-family:Inter, var(--body-font, system-ui), sans-serif; color:#122E35; text-align:left;
}
.hs-scene > *{ position:absolute; }
.hs-screens{ position:relative; overflow:hidden; }
.hs-screen{ position:absolute; inset:0; opacity:0; transition:opacity .55s ease; }
.hs-screen.is-on{ opacity:1; }
/* entrance (each time the hero is revealed) */
@keyframes hs-rise{ from{ opacity:0; translate:0 46px; } to{ opacity:1; translate:0 0; } }
.js .herofig--product.rv:not(.is-in) .hs-scene > *{ opacity:0; }
.herofig--product.is-in .hs-laptop{ animation:hs-rise 1.1s cubic-bezier(.16,1,.3,1) .1s both; }
.herofig--product.is-in .hs-phone{ animation:hs-rise 1.1s cubic-bezier(.16,1,.3,1) .3s both; }
.herofig--product.is-in .hs-cards{ animation:hs-rise .9s cubic-bezier(.16,1,.3,1) .5s both; }
@media (prefers-reduced-motion:reduce){
.herofig--product .hs-scene > *{ animation:none !important; opacity:1 !important; }
.hs-scene, .hs-screen{ transition:none; }
}
html.no-motion .herofig--product .hs-scene > *{ animation:none !important; opacity:1 !important; }
/* Arabic: the copy sits on the right, so the stage moves left and the shade flips */
[dir="rtl"] .herostage{ left:0; right:47%; }
[dir="rtl"] .herofig--product{
background:
linear-gradient(270deg, rgba(9,30,18,.94) 0%, rgba(9,30,18,.80) 34%, rgba(9,30,18,.30) 62%, rgba(9,30,18,.12) 100%),
linear-gradient(225deg, #0C2416 0%, #143A21 48%, #1A4A2A 100%);
}
/* tablets and phones: copy, then the stage, then the slide controls and the regulators tab */
@media (max-width:980px){
.herofig--product{ display:flex; flex-direction:column; align-items:stretch; }
.herofig--product, [dir="rtl"] .herofig--product{
background:
linear-gradient(180deg, rgba(9,30,18,.94) 0%, rgba(9,30,18,.82) 38%, rgba(9,30,18,.35) 70%, rgba(9,30,18,.25) 100%),
linear-gradient(160deg, #0C2416 0%, #143A21 48%, #1A4A2A 100%);
}
html.deck .hero--product > .wrap, html.deck .hero--product > .wrap > .herofig{ max-height:none; }
.herofig--product .herofig__body{ order:1; width:auto; max-width:640px; }
.herostage{ order:2; position:relative; inset:auto; height:clamp(240px, 58vw, 440px); margin:-8px 8px 0; }
[dir="rtl"] .herostage{ inset:auto; }
.herofig--product > .heroctl{ order:3; position:relative; inset:auto; align-items:flex-start; padding:4px clamp(20px,4.6vw,40px) 18px; }
.herofig--product .herotab{ order:4; position:relative; align-self:flex-end; }
[dir="rtl"] .herofig--product .herotab{ align-self:flex-start; }
}
@media (max-width:520px){
.herostage{ height:clamp(270px, 78vw, 330px); margin-inline:0; }
.hs-scene{ left:calc(50% + 22px); }
}
/* ---------- 29b. Product stage: real system, pointer, detail cards ---------- */
/* realistic laptop: aluminium-rimmed lid with camera and glare, browser chrome, the real app, and the deck */
.hs-laptop{ left:168px; top:34px; width:592px; transform-origin:30% 100%; transform:rotateY(14deg) rotateX(4deg); transform-style:preserve-3d; }
.hs-win{ position:relative; height:370px; padding:13px 13px 15px; border-radius:20px 20px 5px 5px; background:#0A0B0C;
box-shadow:inset 0 0 0 1px #2A2D30, 0 0 0 1.5px #C3C7CB, 0 0 0 2.5px #7E848A, 0 40px 70px -26px rgba(0,0,0,.7); }
.hs-win::before{ content:""; position:absolute; left:50%; top:5px; width:5px; height:5px; margin-left:-2.5px; border-radius:50%;
background:radial-gradient(circle at 35% 35%, #3B4A5C, #0B0D10 70%); }
.hs-win::after{ content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:3;
background:linear-gradient(118deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,.04) 36%, rgba(255,255,255,0) 36.2%); }
.hs-display{ position:relative; height:100%; border-radius:4px; overflow:hidden; background:#fff; }
.hs-bar{ height:28px; display:flex; align-items:center; gap:6px; padding:0 10px; background:#E8EBEE; border-bottom:1px solid #D5DADF; }
.hs-bar b{ width:9px; height:9px; border-radius:50%; background:#FF5F57; }
.hs-bar b:nth-child(2){ background:#FEBC2E; } .hs-bar b:nth-child(3){ background:#28C840; }
.hs-addr{ margin:0 auto; padding:3px 14px; border-radius:7px; background:#fff; font-size:10px; font-weight:600; color:#5B6770; min-width:44%; text-align:center; }
.hs-addr::before{ content:""; display:inline-block; width:6px; height:7px; margin-right:6px; border-radius:1.5px; background:#8A949C; vertical-align:-1px; }
.hs-app--real{ display:block; height:calc(100% - 28px); background:#fff; overflow:hidden; }
.hs-app--real .hs-screens{ position:relative; height:100%; overflow:hidden; }
.hs-app--real .hs-screen{ position:absolute; left:0; top:0; width:100%; height:auto; padding:0; display:block;
transform:scale(1.015); transform-origin:30% 30%; transition:opacity .6s ease, transform 7s linear; }
.hs-app--real .hs-screen.is-on{ transform:scale(1); }
.hs-base{ position:relative; width:686px; height:17px; margin:0 0 0 -47px; border-radius:3px 3px 22px 22px / 3px 3px 14px 14px;
background:linear-gradient(180deg, #F3F5F7 0%, #D6DADE 35%, #A9AEB4 72%, #7B8087 100%);
box-shadow:inset 0 1px 0 rgba(255,255,255,.8), 0 36px 40px -12px rgba(0,0,0,.7), 0 10px 14px -6px rgba(0,0,0,.5); }
.hs-base i{ position:absolute; left:50%; top:0; width:112px; height:7px; margin-left:-56px; border-radius:0 0 9px 9px;
background:linear-gradient(180deg, #A8AEB4, #D8DCE0); }
/* realistic phone, landscape, in front of the laptop: titanium frame, black bezel, camera pill, buttons, glare */
.hs-phone{ left:6px; top:322px; width:318px; height:156px; padding:2.5px; border-radius:30px;
background:linear-gradient(135deg, #EEF0F2 0%, #9BA1A7 28%, #D5D8DB 55%, #7D838A 100%);
transform:translateZ(110px) rotateY(10deg) rotateX(6deg) rotateZ(-4deg);
box-shadow:0 32px 40px -12px rgba(0,0,0,.65), 0 10px 14px -4px rgba(0,0,0,.4); }
.hs-phone::before, .hs-phone::after{ content:""; position:absolute; top:-2px; height:3px; border-radius:2px; background:#8A9096; }
.hs-phone::before{ left:72px; width:34px; } .hs-phone::after{ left:116px; width:52px; }
.hs-phone__in{ position:relative; display:block; height:100%; padding:7px; border-radius:27.5px; background:#050505; overflow:hidden; }
.hs-phone__in img{ display:block; width:100%; height:100%; object-fit:cover; object-position:left top; border-radius:21px; }
.hs-phone__in::before{ content:""; position:absolute; left:13px; top:50%; width:11px; height:46px; margin-top:-23px; border-radius:7px; background:#000; z-index:2; }
.hs-phone__in::after{ content:""; position:absolute; inset:7px; border-radius:21px; pointer-events:none;
background:linear-gradient(120deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,.05) 34%, rgba(255,255,255,0) 34.2%); }/* the pointer: glides to the control, then a click ring */
.hs-pointer{ position:absolute; left:0; top:0; z-index:2; width:22px; height:22px; margin:-3px 0 0 -4px;
transform:translate(330px,150px); transition:transform 1s cubic-bezier(.65,0,.35,1); filter:drop-shadow(0 3px 5px rgba(0,0,0,.35)); }
.hs-pointer svg{ width:22px; height:22px; display:block; }
.hs-pointer i{ position:absolute; left:4px; top:3px; width:30px; height:30px; margin:-15px 0 0 -15px; border-radius:50%;
border:2px solid #2F8D46; opacity:0; transform:scale(.3); }
.hs-pointer.is-click i{ animation:hs-ring .6s ease-out; }
.hs-pointer.is-click svg{ animation:hs-press .25s ease; }
@keyframes hs-ring{ 0%{ opacity:.9; transform:scale(.3); } 100%{ opacity:0; transform:scale(1.4); } }
@keyframes hs-press{ 50%{ transform:scale(.82); } }
/* detail cards: one per slide, the real control magnified */
.hs-cards{ left:488px; top:262px; width:296px; height:200px; transform:translateZ(170px); }
.hs-card{ position:absolute; left:0; bottom:0; width:100%; padding:10px; border-radius:16px; background:rgba(255,255,255,.97);
border:1px solid rgba(255,255,255,.9); box-shadow:0 28px 50px -14px rgba(0,0,0,.55);
opacity:0; transform:translateY(14px) scale(.94); transform-origin:30% 100%; pointer-events:none;
transition:opacity .35s ease, transform .5s cubic-bezier(.34,1.56,.64,1); }
.hs-card.is-on{ opacity:1; transform:none; }
.hs-card__head{ display:flex; align-items:center; gap:9px; margin-bottom:8px; }
.hs-card__head i{ display:grid; place-items:center; width:28px; height:28px; flex:0 0 28px; border-radius:9px; color:#fff; font-style:normal; }
.hs-card__head i svg{ width:15px; height:15px; }
.hs-card__head b{ display:block; font:800 12px/1.25 Manrope, var(--display), sans-serif; color:#122E35; }
.hs-card__head span{ font-size:10px; color:#6B7B84; }
.hs-card--green .hs-card__head i{ background:#2F8D46; } .hs-card--blue .hs-card__head i{ background:#2563A8; } .hs-card--amber .hs-card__head i{ background:#B56A00; }
.hs-card__lens{ border-radius:10px; overflow:hidden; border:1px solid #E1E8E2; background:#fff; display:grid; place-items:center; padding:6px; }
.hs-card__lens img{ display:block; max-width:100%; height:auto; max-height:118px; object-fit:contain; }
@media (prefers-reduced-motion:reduce){ .hs-pointer{ display:none; } .hs-card, .hs-app--real .hs-screen{ transition:opacity .2s ease; transform:none; } }
html.no-motion .hs-pointer{ display:none; }
@media (max-width:520px){
.hs-cards{ left:354px; top:250px; }
}
[dir="rtl"] .hs-card__head{ direction:rtl; text-align:right; }
/* the laptop's reflection on the glossy floor (Chromium/Safari; others simply skip it) */
.hs-laptop{ -webkit-box-reflect:below 4px linear-gradient(transparent 72%, rgba(255,255,255,.14)); }
/* spotlight and a perspective light-grid floor */
.hs-glow{ left:150px; top:-40px; width:640px; height:540px; transform:translateZ(-160px); border-radius:50%;
background:radial-gradient(closest-side, rgba(122,191,68,.36), rgba(122,191,68,.10) 58%, rgba(122,191,68,0)); filter:blur(8px);
animation:hs-breathe 7s ease-in-out infinite; }
@keyframes hs-breathe{ 50%{ opacity:.65; } }
.hs-floor{ left:-140px; top:404px; width:1060px; height:420px; transform-origin:50% 0; transform:translateZ(-40px) rotateX(64deg);
background-image:linear-gradient(rgba(150,220,110,.34) 1.5px, transparent 1.5px), linear-gradient(90deg, rgba(150,220,110,.34) 1.5px, transparent 1.5px);
background-size:46px 46px; background-position:center top;
-webkit-mask-image:radial-gradient(58% 62% at 50% 0%, #000 25%, transparent 78%); mask-image:radial-gradient(58% 62% at 50% 0%, #000 25%, transparent 78%); }
/* integration orbit: dashed lines with travelling pulses, glass chips that light up with their slide */
.hs-orbit{ left:0; top:0; width:780px; height:560px; overflow:visible; transform:translateZ(-70px); }
.hs-line{ fill:none; stroke:rgba(150,220,110,.45); stroke-width:1.6; stroke-linecap:round; stroke-dasharray:3 7; animation:hs-dash 1.4s linear infinite;
transition:stroke .4s ease, stroke-width .4s ease; }
@keyframes hs-dash{ to{ stroke-dashoffset:-20; } }
.hs-pulse{ fill:#C9F7A2; filter:drop-shadow(0 0 4px #7ABF44); }
.hs-chip{ display:inline-flex; align-items:center; gap:8px; padding:10px 17px 10px 13px; border-radius:999px; white-space:nowrap;
font:800 15px/1 Manrope, var(--display), sans-serif; letter-spacing:.05em; color:#fff; transform:translateZ(30px);
background:linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.06)); border:1px solid rgba(255,255,255,.28);
box-shadow:inset 0 1px 0 rgba(255,255,255,.3), 0 14px 30px -12px rgba(0,0,0,.55);
transition:background .4s ease, border-color .4s ease, box-shadow .4s ease; }
.hs-chip i{ width:9px; height:9px; border-radius:50%; background:#7ABF44; box-shadow:0 0 0 3px rgba(122,191,68,.22), 0 0 10px #7ABF44; }
.herofig[data-shot-on="1"] .hs-chip--doh, .herofig[data-shot-on="3"] .hs-chip--malaffi{
background:linear-gradient(180deg, rgba(122,191,68,.42), rgba(47,141,70,.30)); border-color:#A8E57C;
box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 0 0 5px rgba(122,191,68,.16), 0 0 34px rgba(122,191,68,.6); }
.herofig[data-shot-on="1"] .hs-line--doh, .herofig[data-shot-on="3"] .hs-line--malaffi{ stroke:#C9F7A2; stroke-width:2.6; }
@keyframes hs-float{ 0%,100%{ translate:0 0; } 50%{ translate:0 -6px; } }
.herofig--product.is-in .hs-chip{ animation:hs-rise .8s cubic-bezier(.16,1,.3,1) .7s both, hs-float 6s ease-in-out 1.6s infinite; }
.herofig--product.is-in .hs-chip--malaffi{ animation-delay:.8s, 2.2s; } .herofig--product.is-in .hs-chip--riayati{ animation-delay:.9s, 2.8s; }
.herofig--product.is-in .hs-chip--doh{ animation-delay:1s, 3.4s; }
.herofig--product.is-in .hs-orbit, .herofig--product.is-in .hs-floor{ animation:hs-rise 1s ease .5s both; }
@media (prefers-reduced-motion:reduce){ .hs-pulse{ display:none; } .hs-line, .hs-glow{ animation:none; } }
html.no-motion .hs-pulse{ display:none; } html.no-motion .hs-line, html.no-motion .hs-glow{ animation:none; }
/* Arabic: the whole stage is mirrored around the copy (positions and turn only; the real screens are not flipped) */
[dir="rtl"] .hs-laptop{ left:20px; transform-origin:70% 100%; transform:rotateY(-14deg) rotateX(4deg); }
[dir="rtl"] .hs-phone{ left:456px; transform:translateZ(110px) rotateY(-10deg) rotateX(6deg) rotateZ(4deg); }
[dir="rtl"] .hs-cards{ left:22px; }
@media (min-width:981px){ [dir="rtl"] .herostage{ left:2%; } }
@media (max-width:980px){ [dir="rtl"] .herofig--product > .heroctl{ left:auto; right:auto; } }
[dir="rtl"] .hs-card{ transform-origin:70% 100%; }
[dir="rtl"] .hs-glow{ left:-10px; }
[dir="rtl"] .hs-orbit{ transform:translateZ(-70px) scaleX(-1); }
[dir="rtl"] .hs-chip{ left:auto !important; right:var(--l); direction:rtl; }
@media (max-width:520px){
[dir="rtl"] .hs-scene{ left:calc(50% - 22px); }
[dir="rtl"] .hs-cards{ left:130px; }
}
/* ---------- 29c. Hero, dark theme: space-black hardware, deeper room, dark glass ---------- */
html[data-theme="dark"] .herofig--product{
background:
linear-gradient(90deg, rgba(3,10,6,.95) 0%, rgba(3,10,6,.82) 34%, rgba(3,10,6,.40) 62%, rgba(3,10,6,.2) 100%),
radial-gradient(48% 58% at 72% 42%, rgba(122,191,68,.20) 0%, rgba(122,191,68,0) 70%),
radial-gradient(40% 50% at 100% 100%, rgba(37,99,168,.16) 0%, rgba(37,99,168,0) 70%),
linear-gradient(135deg, #020906 0%, #05130B 50%, #0A2115 100%);
box-shadow:none;
}
html[data-theme="dark"] .hs-win{ box-shadow:inset 0 0 0 1px #1B1E21, 0 0 0 1.5px #3B4045, 0 0 0 2.5px #17191C, 0 40px 70px -26px rgba(0,0,0,.9), 0 0 70px -12px rgba(122,191,68,.28); }
html[data-theme="dark"] .hs-base{ background:linear-gradient(180deg, #555B62 0%, #31363B 38%, #1B1E22 100%); box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 36px 40px -12px rgba(0,0,0,.85); }
html[data-theme="dark"] .hs-base i{ background:linear-gradient(180deg, #16181B, #3A3F45); }
html[data-theme="dark"] .hs-bar{ background:#1E2226; border-color:#2B3036; }
html[data-theme="dark"] .hs-addr{ background:#2B3036; color:#B8C2C9; }
html[data-theme="dark"] .hs-app--real .hs-screen, html[data-theme="dark"] .hs-phone__in img{ filter:brightness(.9) contrast(1.04); }
html[data-theme="dark"] .hs-phone{ background:linear-gradient(135deg, #626970 0%, #24282C 30%, #4B5157 55%, #17191C 100%); }
html[data-theme="dark"] .hs-card{ background:rgba(12,27,19,.94); border-color:rgba(122,191,68,.28); box-shadow:0 28px 50px -14px rgba(0,0,0,.8), 0 0 40px -14px rgba(122,191,68,.35); }
html[data-theme="dark"] .hs-card__head b{ color:#EAF4EE; } html[data-theme="dark"] .hs-card__head span{ color:#9DB2A6; }
html[data-theme="dark"] .hs-card__lens{ border-color:rgba(255,255,255,.1); }
html[data-theme="dark"] .hs-chip{ background:linear-gradient(180deg, rgba(122,191,68,.14), rgba(122,191,68,.04)); border-color:rgba(122,191,68,.38); }
html[data-theme="dark"] .hs-floor{ background-image:linear-gradient(rgba(122,191,68,.32) 1px, transparent 1px), linear-gradient(90deg, rgba(122,191,68,.32) 1px, transparent 1px); }
html[data-theme="dark"] .hs-glow{ background:radial-gradient(closest-side, rgba(122,191,68,.30), rgba(37,99,168,.08) 60%, rgba(122,191,68,0)); }
@media (max-width:980px){
html[data-theme="dark"] .herofig--product{
background:linear-gradient(180deg, rgba(3,10,6,.95) 0%, rgba(3,10,6,.8) 40%, rgba(3,10,6,.35) 100%),
linear-gradient(160deg, #020906 0%, #05130B 50%, #0A2115 100%);
}
}
/* ClinicPro / Easy Clinic badge above the laptop (hero-brand.js) */
.hs-brand{ position:absolute; display:inline-grid; grid-template-columns:auto auto; grid-template-rows:auto auto; column-gap:11px; align-items:center;
padding:6px 18px 6px 6px; border-radius:999px; white-space:nowrap; transform:translateZ(30px);
background:linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.06)); border:1px solid rgba(255,255,255,.28);
box-shadow:inset 0 1px 0 rgba(255,255,255,.3), 0 14px 30px -12px rgba(0,0,0,.55); }
.hs-brand__icons{ grid-row:1 / 3; display:flex; }
.hs-brand__icons img + img{ margin-left:-14px; }
.hs-brand__icons img{ width:54px; height:54px; padding:3px; border-radius:50%; background:#fff;
box-shadow:0 0 0 3px rgba(122,191,68,.22), 0 6px 14px -6px rgba(0,0,0,.5); }
.hs-brand b{ align-self:end; font:800 20px/1 Manrope, var(--display), sans-serif; letter-spacing:.01em; color:#fff; }
.hs-brand small{ align-self:start; margin-top:3px; font:700 11.5px/1 Manrope, var(--display), sans-serif; letter-spacing:.16em; text-transform:uppercase; color:#A8E57C; }
.herofig--product.is-in .hs-brand{ animation:hs-rise .8s cubic-bezier(.16,1,.3,1) .6s both, hs-float 6s ease-in-out 1.4s infinite; }
[dir="rtl"] .hs-brand{ left:auto !important; right:var(--l); direction:ltr; }
html[data-theme="dark"] .hs-brand{ background:linear-gradient(180deg, rgba(122,191,68,.14), rgba(122,191,68,.04)); border-color:rgba(122,191,68,.38); }
@media (max-width:980px){ .hs-brand{ top:-26px !important; } }
/* ---------- 29e. Hero polish (hero-polish.js): background, circuit connections, live phone ---------- */
/* Background: a deep emerald-to-teal room. The copy side stays dark for contrast; light gathers behind the laptop. */
.herofig--product{
background:
linear-gradient(90deg, rgba(3,26,20,.82) 0%, rgba(3,26,20,.58) 32%, rgba(3,26,20,0) 60%),
radial-gradient(42% 58% at 72% 38%, rgba(140,214,92,.30) 0%, rgba(140,214,92,0) 70%),
radial-gradient(38% 52% at 96% 6%, rgba(56,196,176,.26) 0%, rgba(56,196,176,0) 72%),
radial-gradient(46% 60% at 12% 108%, rgba(24,150,140,.30) 0%, rgba(24,150,140,0) 72%),
radial-gradient(rgba(255,255,255,.055) 1px, transparent 1.3px) 0 0 / 22px 22px,
linear-gradient(128deg, #04241C 0%, #073528 34%, #0B4A38 66%, #106046 100%);
}
.herofig--product::after{ /* a slow light sweep across the room */
content:""; position:absolute; inset:0; z-index:0; pointer-events:none; border-radius:inherit;
background:linear-gradient(105deg, transparent 30%, rgba(190,255,170,.07) 45%, rgba(120,230,210,.06) 52%, transparent 66%) no-repeat;
background-size:240% 100%; animation:hs-sweep 14s ease-in-out infinite;
}
@keyframes hs-sweep{ 0%{ background-position:120% 0; } 55%,100%{ background-position:-40% 0; } }
.herofig--product > .herofig__body{ position:relative; z-index:2; }
@media (max-width:980px){
.herofig--product, [dir="rtl"] .herofig--product{
background:
linear-gradient(180deg, rgba(3,26,20,.80) 0%, rgba(3,26,20,.52) 42%, rgba(3,26,20,0) 72%),
radial-gradient(70% 40% at 60% 78%, rgba(140,214,92,.28) 0%, rgba(140,214,92,0) 72%),
radial-gradient(60% 34% at 100% 0%, rgba(56,196,176,.24) 0%, rgba(56,196,176,0) 72%),
radial-gradient(rgba(255,255,255,.05) 1px, transparent 1.3px) 0 0 / 20px 20px,
linear-gradient(170deg, #04241C 0%, #073528 40%, #0B4A38 75%, #106046 100%);
}
}
/* Dark theme: the site's slate-teal (page #0A171C, cards #10232A) instead of black-green; muted teal and green light,
a faint gold edge like the theme's gold logos. */
html[data-theme="dark"] .herofig--product{
background:
linear-gradient(90deg, rgba(8,20,25,.78) 0%, rgba(8,20,25,.5) 34%, rgba(8,20,25,0) 62%),
radial-gradient(44% 58% at 72% 40%, rgba(64,190,170,.16) 0%, rgba(64,190,170,0) 70%),
radial-gradient(36% 48% at 92% 96%, rgba(122,191,68,.12) 0%, rgba(122,191,68,0) 72%),
radial-gradient(40% 50% at 8% 0%, rgba(201,168,92,.07) 0%, rgba(201,168,92,0) 70%),
radial-gradient(rgba(255,255,255,.04) 1px, transparent 1.3px) 0 0 / 22px 22px,
linear-gradient(128deg, #0B1A20 0%, #0F232B 40%, #122C35 72%, #15343C 100%);
box-shadow:none; /* no edge ring or drop shadow: both made the page around the regulator cut-out a different shade */
}
html[data-theme="dark"] .herofig--product::after{ background-image:linear-gradient(105deg, transparent 30%, rgba(120,230,210,.05) 47%, rgba(201,168,92,.04) 53%, transparent 66%); }
@media (max-width:980px){
html[data-theme="dark"] .herofig--product{
background:linear-gradient(180deg, rgba(8,20,25,.78) 0%, rgba(8,20,25,.45) 50%, rgba(8,20,25,0) 80%),
radial-gradient(70% 40% at 60% 78%, rgba(64,190,170,.16) 0%, rgba(64,190,170,0) 72%),
linear-gradient(170deg, #0B1A20 0%, #0F232B 45%, #15343C 100%);
}
}
html[data-theme="dark"] .hs-chip{ background:linear-gradient(180deg, rgba(127,231,218,.12), rgba(127,231,218,.03)); border-color:rgba(127,231,218,.30); }
html[data-theme="dark"] .hs-brand{ background:linear-gradient(180deg, rgba(127,231,218,.12), rgba(127,231,218,.03)); border-color:rgba(127,231,218,.30); }
html[data-theme="dark"] .hs-floor{ background-image:linear-gradient(rgba(127,231,218,.16) 1px, transparent 1px), linear-gradient(90deg, rgba(127,231,218,.16) 1px, transparent 1px); }
html[data-theme="dark"] .hs-glow{ background:radial-gradient(closest-side, rgba(64,190,170,.22), rgba(64,190,170,.05) 60%, rgba(64,190,170,0)); }
html[data-theme="dark"] .hs-card{ background:rgba(15,35,43,.95); border-color:rgba(127,231,218,.26); box-shadow:0 28px 50px -14px rgba(0,0,0,.7), 0 0 40px -16px rgba(64,190,170,.35); }
/* Connections: neon buses from the laptop to each exchange, packets with comet tails, ports that ripple on arrival,
and two dotted rings behind the laptop (the ClinicPro logo's circuit rings) turning slowly in opposite directions. */
.hs-orbit--circuit{ overflow:visible; }
.hs-tube{ fill:none; stroke:#7ABF44; stroke-width:12; stroke-linecap:round; stroke-linejoin:round; opacity:.16; }
.hs-orbit--circuit .hs-line{ fill:none; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:none;
animation:hs-draw 1.6s cubic-bezier(.65,0,.35,1) var(--d) both; transition:stroke-width .4s ease; }
.hs-twin{ fill:none; stroke-width:1; stroke-linecap:round; stroke-linejoin:round; opacity:.55; stroke-dasharray:2 3; }
@keyframes hs-draw{ from{ stroke-dasharray:0 100; } to{ stroke-dasharray:100 0; } }
.hs-trail{ fill:none; stroke:#C9F7A2; stroke-width:3; stroke-linecap:round; opacity:.5; stroke-dasharray:14 86;
animation:hs-trail 2.8s cubic-bezier(.45,0,.55,1) calc(var(--d) + 1.4s) infinite both; }
.hs-packet{ fill:none; stroke:#F2FFE6; stroke-width:7; stroke-linecap:round; stroke-dasharray:.1 99.9;
animation:hs-head 2.8s cubic-bezier(.45,0,.55,1) calc(var(--d) + 1.4s) infinite both; }
@keyframes hs-trail{ from{ stroke-dashoffset:14; } to{ stroke-dashoffset:-100; } }
@keyframes hs-head{ from{ stroke-dashoffset:.1; } to{ stroke-dashoffset:-113.9; } }
.hs-packet--back{ stroke:#7FE7DA; stroke-width:4.5; animation:hs-back 3.6s linear calc(var(--d) + 2.8s) infinite both; }
@keyframes hs-back{ from{ stroke-dashoffset:-100; } to{ stroke-dashoffset:.1; } }
.hs-port{ fill:#0B3B2C; stroke:#C9F7A2; stroke-width:2; filter:drop-shadow(0 0 5px rgba(168,229,124,.9)); }
.hs-ring{ fill:none; stroke:#C9F7A2; stroke-width:1.6; transform-box:fill-box; transform-origin:center; opacity:0;
animation:hs-ring 2.8s ease-out calc(var(--d) + 1.4s) infinite; }
@keyframes hs-ring{ 0%,80%{ transform:scale(.7); opacity:0; } 84%{ opacity:.95; } 100%{ transform:scale(3); opacity:0; } }
.hs-rings{ opacity:.55; }
.hs-rings__a, .hs-rings__b{ transform-box:view-box; transform-origin:450px 232px; animation:hs-spin 90s linear infinite; }
.hs-rings__b{ animation-duration:130s; animation-direction:reverse; }
@keyframes hs-spin{ to{ transform:rotate(360deg); } }
.hs-ringline{ fill:none; stroke:rgba(168,229,124,.45); stroke-width:1.4; stroke-dasharray:22 3 9 3 30 3 14 16; }
.hs-ringline--b{ stroke:rgba(127,231,218,.35); stroke-width:1; stroke-dasharray:6 2 34 2 18 6 26 6; }
.hs-ringdot{ fill:#A8E57C; filter:drop-shadow(0 0 4px #7ABF44); }
/* the exchange the current slide is about: brighter, faster */
.herofig[data-shot-on="0"] .hs-trace--nabidh, .herofig[data-shot-on="1"] .hs-trace--doh,
.herofig[data-shot-on="2"] .hs-trace--riayati, .herofig[data-shot-on="3"] .hs-trace--malaffi{ --hot:1; }
.hs-trace .hs-tube{ transition:opacity .4s ease; }
.herofig[data-shot-on="0"] .hs-trace--nabidh .hs-tube, .herofig[data-shot-on="1"] .hs-trace--doh .hs-tube,
.herofig[data-shot-on="2"] .hs-trace--riayati .hs-tube, .herofig[data-shot-on="3"] .hs-trace--malaffi .hs-tube{ opacity:.38; }
.herofig[data-shot-on="0"] .hs-trace--nabidh .hs-line, .herofig[data-shot-on="1"] .hs-trace--doh .hs-line,
.herofig[data-shot-on="2"] .hs-trace--riayati .hs-line, .herofig[data-shot-on="3"] .hs-trace--malaffi .hs-line{ stroke-width:3.2; }
.herofig[data-shot-on="0"] .hs-trace--nabidh :is(.hs-trail,.hs-packet,.hs-ring), .herofig[data-shot-on="1"] .hs-trace--doh :is(.hs-trail,.hs-packet,.hs-ring),
.herofig[data-shot-on="2"] .hs-trace--riayati :is(.hs-trail,.hs-packet,.hs-ring), .herofig[data-shot-on="3"] .hs-trace--malaffi :is(.hs-trail,.hs-packet,.hs-ring){ animation-duration:1.7s; }
.herofig[data-shot-on="0"] .hs-chip--nabidh, .herofig[data-shot-on="1"] .hs-chip--doh,
.herofig[data-shot-on="2"] .hs-chip--riayati, .herofig[data-shot-on="3"] .hs-chip--malaffi{
background:linear-gradient(180deg, rgba(122,191,68,.42), rgba(47,141,70,.30)); border-color:#A8E57C;
box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 0 0 5px rgba(122,191,68,.16), 0 0 34px rgba(122,191,68,.6); }
html[data-theme="dark"] .hs-tube{ stroke:#3FB9A8; }
html[data-theme="dark"] .hs-port{ fill:#0F232B; stroke:#7FE7DA; filter:drop-shadow(0 0 5px rgba(127,231,218,.8)); }
html[data-theme="dark"] .hs-ring{ stroke:#7FE7DA; }
html[data-theme="dark"] .hs-ringline{ stroke:rgba(127,231,218,.32); } html[data-theme="dark"] .hs-ringdot{ fill:#7FE7DA; filter:drop-shadow(0 0 4px #3FB9A8); }
@media (prefers-reduced-motion:reduce){ .hs-trail, .hs-packet, .hs-ring, .herofig--product::after{ animation:none; opacity:0; } .hs-orbit--circuit .hs-line, .hs-rings__a, .hs-rings__b{ animation:none; } }
html.no-motion .hs-trail, html.no-motion .hs-packet, html.no-motion .hs-ring, html.no-motion .herofig--product::after{ animation:none; opacity:0; }
html.no-motion .hs-orbit--circuit .hs-line, html.no-motion .hs-rings__a, html.no-motion .hs-rings__b{ animation:none; }
/* Phone: a live mini ClinicPro screen that follows the slide. Each view's animation restarts when it is shown. */
.hs-phone__in .hs-mini{ position:relative; height:100%; border-radius:21px; overflow:hidden; background:#F5F7FA; padding:0 12px 0 28px;
font:500 8px/1.25 Inter, var(--sans), sans-serif; color:#1F2A33; }
.hs-mini__bar{ display:flex; align-items:center; justify-content:space-between; height:22px; margin:0 -12px 6px -28px; padding:0 12px 0 28px;
background:#3F5B9E; color:#fff; }
.hs-mini__bar b{ font-weight:800; font-size:8.5px; letter-spacing:.02em; }
.hs-mini__live{ display:inline-flex; align-items:center; gap:4px; font-weight:700; font-size:7px; }
.hs-mini__live i{ width:5px; height:5px; border-radius:50%; background:#5BE38B; animation:hs-blink 1.4s ease-in-out infinite; }
@keyframes hs-blink{ 50%{ opacity:.3; } }
.hs-pv{ display:none; position:relative; height:calc(100% - 28px); }
.hs-pv--0, .herofig[data-shot-on="1"] .hs-pv--1, .herofig[data-shot-on="2"] .hs-pv--2,
.herofig[data-shot-on="3"] .hs-pv--3, .herofig[data-shot-on="4"] .hs-pv--4{ display:block; }
.herofig[data-shot-on]:not([data-shot-on="0"]) .hs-pv--0{ display:none; }
.hs-pv__t{ margin:0 0 5px; font-weight:800; font-size:8.5px; color:#2B3F73; }
.hs-toast{ position:absolute; right:0; bottom:6px; padding:3px 8px; border-radius:99px; background:#1F8A4C; color:#fff; font-weight:700; font-size:7px;
display:inline-flex; align-items:center; gap:3px; box-shadow:0 4px 10px -4px rgba(31,138,76,.6); animation:hs-pop .5s cubic-bezier(.2,1.4,.4,1) 2.4s both; }
.hs-toast svg, .hs-steps svg{ width:8px; height:8px; fill:none; stroke:currentColor; stroke-width:3; stroke-linecap:round; stroke-linejoin:round; }
@keyframes hs-pop{ from{ opacity:0; transform:translateY(6px) scale(.8); } }
@keyframes hs-in{ from{ opacity:0; transform:translateX(-10px); } }
/* 0: bookings arrive */
.hs-appts{ list-style:none; margin:0; padding:0; display:grid; gap:3px; }
.hs-appts li{ display:grid; grid-template-columns:24px 1fr auto; align-items:center; gap:5px; padding:3px 6px; border-radius:4px; background:#fff;
border-left:2px solid #3F5B9E; box-shadow:0 1px 2px rgba(20,40,60,.08); animation:hs-in .45s ease both; }
.hs-appts li:nth-child(2){ animation-delay:.35s; } .hs-appts li:nth-child(3){ animation-delay:1.2s; }
.hs-appts time{ font-weight:700; color:#56616B; }
.hs-appts em{ font-style:normal; font-weight:700; font-size:6.5px; padding:1px 5px; border-radius:99px; background:#E7F6EC; color:#1F8A4C; }
.hs-appts li.is-new{ border-left-color:#1F8A4C; background:#EEF9F1; }
.hs-appts li.is-new em{ background:#1F8A4C; color:#fff; animation:hs-pop .4s cubic-bezier(.2,1.4,.4,1) 1.8s both; }
/* 1: an e-claim goes through */
.hs-steps{ list-style:none; margin:4px 0 0; padding:0; display:flex; justify-content:space-between; }
.hs-steps li{ display:inline-flex; align-items:center; gap:3px; font-weight:700; color:#56616B; animation:hs-step .4s ease both; }
.hs-steps li svg{ width:11px; height:11px; padding:1.5px; border-radius:50%; background:#C9D3DC; color:#fff; transition:none; }
.hs-steps li:nth-child(1){ animation-delay:.3s; } .hs-steps li:nth-child(2){ animation-delay:1.2s; } .hs-steps li:nth-child(3){ animation-delay:2.1s; }
@keyframes hs-step{ from{ color:#A8B2BC; } }
.hs-steps li svg{ background:#1F8A4C; }
.hs-track{ height:4px; margin:7px 0 0; border-radius:99px; background:#E1E7ED; overflow:hidden; }
.hs-track i{ display:block; height:100%; width:100%; border-radius:inherit; background:linear-gradient(90deg, #3F5B9E, #1F8A4C); transform-origin:0 50%;
animation:hs-fill 2.2s cubic-bezier(.4,0,.2,1) .3s both; }
@keyframes hs-fill{ from{ transform:scaleX(0); } }
.hs-stamp{ position:absolute; right:4px; bottom:4px; padding:3px 9px; border:1.5px solid #1F8A4C; border-radius:5px; color:#1F8A4C; font-weight:900;
font-size:9px; letter-spacing:.12em; text-transform:uppercase; transform:rotate(-8deg); animation:hs-stamp .45s cubic-bezier(.2,1.5,.4,1) 2.6s both; }
@keyframes hs-stamp{ from{ opacity:0; transform:rotate(-8deg) scale(2.2); } }
/* 2: lab results arrive */
.hs-labs{ list-style:none; margin:0; padding:0; display:grid; gap:3px; }
.hs-labs li{ display:grid; grid-template-columns:1fr auto auto; gap:8px; align-items:center; padding:3px 6px; border-radius:4px; background:#fff;
box-shadow:0 1px 2px rgba(20,40,60,.08); animation:hs-in .45s ease both; }
.hs-labs li:nth-child(2){ animation-delay:.5s; } .hs-labs li:nth-child(3){ animation-delay:1s; }
.hs-labs b{ font-weight:800; color:#2B3F73; }
.hs-labs em{ font-style:normal; font-weight:700; font-size:6.5px; color:#1F8A4C; display:inline-flex; align-items:center; gap:3px; }
.hs-labs em::before{ content:""; width:5px; height:5px; border-radius:50%; background:#2FB463; }
/* 3: records sync to MALAFFI */
.hs-sync{ display:flex; align-items:center; gap:4px; margin-top:6px; }
.hs-sync__doc{ width:16px; height:20px; border-radius:2px; background:#fff; border:1px solid #C9D3DC; position:relative;
box-shadow:0 1px 2px rgba(20,40,60,.1); animation:hs-in .4s ease both; }
.hs-sync__doc::before{ content:""; position:absolute; left:3px; right:3px; top:4px; height:8px;
background:repeating-linear-gradient(#C9D3DC 0 1px, transparent 1px 3px); }
.hs-sync__doc:nth-child(2){ animation-delay:.2s; } .hs-sync__doc:nth-child(3){ animation-delay:.4s; }
.hs-sync__pipe{ position:relative; flex:1; height:3px; margin:0 4px; border-radius:99px; background:#DCE5EC; overflow:hidden; }
.hs-sync__pipe i{ position:absolute; top:0; left:-20%; width:20%; height:100%; border-radius:inherit; background:#1F8A4C; animation:hs-pipe 1.2s linear infinite; }
.hs-sync__pipe i:nth-child(2){ animation-delay:.4s; } .hs-sync__pipe i:nth-child(3){ animation-delay:.8s; }
@keyframes hs-pipe{ to{ left:110%; } }
.hs-sync__dest{ padding:4px 7px; border-radius:6px; background:#122E35; color:#A8E57C; font-weight:900; font-size:7.5px; letter-spacing:.06em;
box-shadow:0 0 0 0 rgba(122,191,68,.6); animation:hs-beat 1.6s ease-out 1s infinite; }
@keyframes hs-beat{ 0%{ box-shadow:0 0 0 0 rgba(122,191,68,.55); } 100%{ box-shadow:0 0 0 8px rgba(122,191,68,0); } }
/* 4: the dashboard fills in */
.hs-kpis{ display:grid; grid-template-columns:repeat(3,1fr); gap:4px; }
.hs-kpis span{ padding:3px 5px; border-radius:4px; background:#fff; box-shadow:0 1px 2px rgba(20,40,60,.08); color:#56616B; font-size:6.5px; animation:hs-pop .4s ease both; }
.hs-kpis span:nth-child(2){ animation-delay:.15s; } .hs-kpis span:nth-child(3){ animation-delay:.3s; }
.hs-kpis b{ display:block; font-weight:900; font-size:10px; color:#2B3F73; }
.hs-bars{ display:flex; align-items:flex-end; gap:5px; height:34px; margin-top:6px; padding:0 2px; border-bottom:1px solid #DCE5EC; }
.hs-bars i{ flex:1; height:calc(var(--v) * 100%); border-radius:2px 2px 0 0; background:linear-gradient(180deg, #2FB463, #1F8A4C); transform-origin:50% 100%;
animation:hs-grow .7s cubic-bezier(.2,.9,.3,1.1) both; }
.hs-bars i:nth-child(2){ animation-delay:.08s; } .hs-bars i:nth-child(3){ animation-delay:.16s; } .hs-bars i:nth-child(4){ animation-delay:.24s; }
.hs-bars i:nth-child(5){ animation-delay:.32s; } .hs-bars i:nth-child(6){ animation-delay:.4s; } .hs-bars i:nth-child(7){ animation-delay:.48s; }
@keyframes hs-grow{ from{ transform:scaleY(0); } }
html[data-theme="dark"] .hs-phone__in .hs-mini{ background:#E9EEF3; }
@media (prefers-reduced-motion:reduce){ .hs-mini *{ animation:none !important; } }
/* the mini screen animates on phones and tablets too (cheap CSS); only reduced-motion users get the still version */
/* ---------- end 29e ---------- */
/* ---------- UAE flag banners ------------------------------------------- */
/* Hung vertically as the flag rules say: red band on top, then black (left), white, green (right).
Each flag slides down from under the navbar and sways very gently (transform only).
Images: assets/img/uae-flag-left.png / -right.png (PNG: the server IIS has no .webp type), rendered in Blender (D:/Platform-Build/flag-blender). */
:root{ --uae-flag-w:clamp(40px, calc((100vw - 1360px) / 2 + 48px), 84px); }
.uae-flag{
position:fixed; z-index:59; /* just under the sticky navbar (60) */
top:var(--hdr-h,72px); bottom:0;
width:var(--uae-flag-w);
pointer-events:none;
clip-path:inset(0 -24px -24px -24px); /* only the top is cut: the flag appears from the navbar's lower edge */
}
.uae-flag--left{ left:4px; }
.uae-flag--right{ right:4px; }
.uae-flag__cloth{
position:absolute; inset:0 0 10px;
animation:uaeFlagDrop 1.8s cubic-bezier(.22,1,.36,1) .25s both;
}
.uae-flag__cloth::before{ /* the cloth: rendered in Blender (cloth simulation), see flag-blender/ */
content:""; position:absolute; inset:0;
background:url(../img/uae-flag-left.png) center top / 100% 100% no-repeat;
filter:drop-shadow(0 6px 10px rgba(0,0,0,.18));
transform-origin:50% 0; will-change:transform;
animation:uaeFlagSway 6.5s ease-in-out 2.1s infinite alternate;
}
.uae-flag--right .uae-flag__cloth::before{ background-image:url(../img/uae-flag-right.png); animation-duration:7.4s; animation-delay:2.6s; }
@keyframes uaeFlagDrop{
from{ transform:translateY(-102%); }
to{ transform:translateY(0); }
}
@keyframes uaeFlagSway{
from{ transform:rotate(-.45deg); }
to{ transform:rotate(.45deg); }
}
@media (prefers-reduced-motion:reduce){
.uae-flag__cloth, .uae-flag__cloth::before{ animation:none; }
}
html.no-motion .uae-flag__cloth, html.no-motion .uae-flag__cloth::before{ animation:none; }
/* keep the slide dots and the chat / WhatsApp buttons clear of the right-hand flag */
@media (min-width:821px){
html.has-uae-flag .deckrail, html.has-uae-flag .float-actions{ margin-right:calc(var(--uae-flag-w) + 4px); }
}
/* phones and small tablets have no side margin to hang them in */
@media (max-width:820px), print{ .uae-flag{ display:none; } }
/* city skyline along the bottom of the screen, behind the page, very faint (UAE theme, "skyline": true) */
html.uae-skyline body::after{
content:""; position:fixed; left:0; right:0; bottom:0; z-index:-1; pointer-events:none;
aspect-ratio:2161 / 860; /* fills the full width, at its own proportions */
background:#000;
-webkit-mask:url(../img/uae-skyline.png) center bottom / 100% 100% no-repeat;
mask:url(../img/uae-skyline.png) center bottom / 100% 100% no-repeat;
opacity:.03;
}
html.uae-skyline[data-theme="dark"] body::after{ background:#fff; opacity:.025; }
html.uae-skyline .slide{ background-color:transparent; } /* let it show between sections */
@media print{ html.uae-skyline body::after{ display:none; } }
/* confetti canvas (celebration mode): over the page and navbar, under the chat buttons, never in the way of clicks */
.confetti{ position:fixed; inset:0; width:100%; height:100%; z-index:61; pointer-events:none; }
/* ---------- Ramadan theme (celebration mode, "theme": "ramadan") --------- */
/* A very light gold geometric pattern behind the page, and a garland of lanterns, crescents and stars
hanging under the navbar. Everything moves with transform/opacity only. */
html.theme-ramadan{ --rg-gold:#B8913A; }
html.theme-ramadan[data-theme="dark"]{ --rg-gold:#D8B970; }
html.ramadan-pattern body::before{
content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
background:url(../img/ramadan-pattern.svg) center top / 48px 48px; /* eight-point stars and octagon rosettes, small and faint */
opacity:.075;
}
html.ramadan-pattern[data-theme="dark"] body::before{ opacity:.05; }
html.ramadan-pattern .slide{ background-color:transparent; } /* let the pattern show between sections */
.deco-garland{
position:fixed; z-index:59; left:0; right:0; top:var(--hdr-h,72px); height:0;
pointer-events:none; color:var(--rg-gold);
}
.rg-swag{ position:absolute; left:0; top:-2px; overflow:visible; }
.rg-swag path{ fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-dasharray:0 6; }
.rg-hang{ position:absolute; top:0; width:0; }
.rg-sway{
position:absolute; left:0; top:0; display:block;
transform-origin:0 0; will-change:transform;
animation:rgDrop 1.4s cubic-bezier(.2,1.25,.4,1) calc(.25s + var(--i) * 70ms) both,
rgSway calc(4.2s + var(--i) * .23s) ease-in-out calc(1.8s + var(--i) * .2s) infinite alternate;
}
.rg-string{
position:absolute; left:-1px; top:0; width:2px; height:var(--len);
background:radial-gradient(circle, currentColor 0 1px, transparent 1.3px) 0 0 / 2px 6px repeat-y;
}
.rg-sway svg{
position:absolute; top:var(--len); left:0; transform:translateX(-50%);
max-width:none; overflow:visible; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linejoin:round; stroke-linecap:round;
}
.rg-sway svg .fill{ fill:currentColor; stroke:none; }
.rg-hang--crescent svg, .rg-hang--star svg, .rg-hang--starFilled svg, .rg-hang--star8 svg{ width:24px; height:24px; }
.rg-spark{
position:absolute; width:9px; height:9px; margin:-4.5px 0 0 -4.5px; background:currentColor;
clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);
animation:rgTwinkle 2.6s ease-in-out calc(var(--i) * -.45s) infinite;
}
@keyframes rgDrop{ from{ transform:translateY(-130px); opacity:0; } to{ transform:translateY(0); opacity:1; } }
@keyframes rgSway{ from{ rotate:-3deg; } to{ rotate:3deg; } }
@keyframes rgTwinkle{ 0%,100%{ opacity:.25; transform:scale(.6); } 50%{ opacity:1; transform:scale(1); } }
@media (max-width:820px){
.rg-sway svg{ scale:.72; transform-origin:0 0; }
}
@media (prefers-reduced-motion:reduce){ .rg-sway, .rg-spark{ animation:none; } }
html.no-motion .rg-sway{ animation:rgDrop 1.2s ease-out .2s both; } /* drop once, no endless sway on small/touch screens */
html.no-motion .rg-spark{ animation:none; opacity:.7; }
@media print{ .deco-garland{ display:none; } html.ramadan-pattern body::before{ display:none; } }
/* ---------- Eid theme (celebration mode, "theme": "eid") ------------------ */
/* Bunting in emerald, gold, teal and rose under the navbar, gold crescents, lanterns and stars hanging between,
an "Eid Mubarak" sign in the middle, a short burst of fireworks, and the faint geometric pattern behind the page. */
html.theme-eid{ --rg-gold:#B8913A; }
html.theme-eid[data-theme="dark"]{ --rg-gold:#D8B970; }
.rg-swag--cord path{ stroke:#B8913A; stroke-width:1.4; stroke-dasharray:none; }
html[data-theme="dark"] .rg-swag--cord path{ stroke:#D8B970; }
.eb-flag{
position:absolute; width:14px; height:18px; margin-left:-7px; background:var(--c);
clip-path:polygon(0 0, 100% 0, 50% 100%);
transform-origin:50% 0; rotate:var(--r);
animation:ebFlutter 3.2s ease-in-out calc(var(--i) * -.29s) infinite alternate;
}
.eb-flag::after{ content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(255,255,255,.22), transparent 55%); }
@keyframes ebFlutter{ from{ transform:rotate(-4deg); } to{ transform:rotate(4deg); } }
.eid-sign-hang .rg-sway{ animation-name:rgDrop, eidSway; }
@keyframes eidSway{ from{ rotate:-1.5deg; } to{ rotate:1.5deg; } }
.eid-sign{
position:absolute; top:22px; left:0; transform:translateX(-50%);
display:flex; flex-direction:column; align-items:center; gap:1px; white-space:nowrap;
padding:7px 16px 8px; border-radius:10px;
background:linear-gradient(160deg,#0F6B58,#0B4F42); color:#F3D58C;
border:1.5px solid #C9A24A; box-shadow:0 6px 16px rgba(10,60,48,.28), inset 0 1px 0 rgba(255,255,255,.12);
font:600 13px/1.15 var(--font-display, inherit); letter-spacing:.04em;
}
.eid-sign b:last-child{ font-size:14px; letter-spacing:0; }
.eid-sign::before, .eid-sign::after{ /* the two cords it hangs from */
content:""; position:absolute; bottom:100%; width:1px; height:24px; background:var(--rg-gold);
}
.eid-sign::before{ left:22%; transform:rotate(14deg); transform-origin:bottom; }
.eid-sign::after{ right:22%; transform:rotate(-14deg); transform-origin:bottom; }
.fireworks{ position:fixed; inset:0; width:100%; height:100%; z-index:61; pointer-events:none; }
@media (max-width:820px){ .eid-sign{ font-size:11px; padding:5px 11px 6px; } .eid-sign b:last-child{ font-size:12px; } }
@media (prefers-reduced-motion:reduce){ .eb-flag{ animation:none; } }
html.no-motion .eb-flag{ animation:none; }
@media print{ .fireworks{ display:none; } }
/* ---------- Plato's welcome bubble ------------------------------------------ */
.plato-hello{
position:absolute; right:calc(100% + 14px); bottom:62px; z-index:2;
width:max-content; max-width:min(270px, calc(100vw - 110px));
display:flex; flex-direction:column; gap:3px;
padding:12px 30px 12px 14px; border-radius:16px 16px 4px 16px;
background:#fff; color:var(--ink-900, #122E35);
border:1px solid rgba(99,184,112,.35);
box-shadow:0 12px 32px rgba(18,46,53,.16);
font-size:.86rem; line-height:1.4; text-align:start;
pointer-events:auto; cursor:pointer;
opacity:0; transform:translateY(8px) scale(.96); transform-origin:100% 100%;
transition:opacity .3s ease, transform .35s cubic-bezier(.2,1.2,.4,1);
}
.plato-hello.is-in{ opacity:1; transform:none; }
.plato-hello strong{ font-size:.92rem; color:var(--green-700, #1E7A3A); }
.plato-hello__festive{ font-size:.78rem; font-weight:700; color:#B8913A; letter-spacing:.02em; }
.plato-hello__close{
position:absolute; top:6px; inset-inline-end:6px; width:22px; height:22px; border:0; border-radius:50%;
background:transparent; color:inherit; opacity:.55; font-size:17px; line-height:1; cursor:pointer;
}
.plato-hello__close:hover{ opacity:1; background:rgba(18,46,53,.06); }
.plato-hello::after{ /* little tail pointing at Plato */
content:""; position:absolute; right:-7px; bottom:10px; width:12px; height:12px; background:inherit;
border-right:1px solid rgba(99,184,112,.35); border-bottom:1px solid rgba(99,184,112,.35);
transform:rotate(-45deg);
}
.plato-hello[dir="rtl"]{ padding:12px 14px 12px 30px; }
html[data-theme="dark"] .plato-hello{ background:#14272b; color:#E8EFEC; border-color:rgba(99,184,112,.3); box-shadow:0 12px 32px rgba(0,0,0,.4); }
html[data-theme="dark"] .plato-hello strong{ color:#7ED38E; }
@media (prefers-reduced-motion:reduce){ .plato-hello{ transition:opacity .2s ease; transform:none; } }
@media print{ .plato-hello{ display:none; } }
/* ---------- Plato is replying: three bouncing balls ------------------------ */
/* Themed with the celebration costume: UAE flag colours, Ramadan crescents, Eid stars. */
.plato-typing{ display:inline-flex; align-items:flex-end; gap:6px; height:22px; padding:2px 2px 0; }
.plato-typing i{
width:9px; height:9px; border-radius:50%; background:#2E9B4E;
animation:platoBounce 1.05s cubic-bezier(.45,0,.55,1) infinite;
}
.plato-typing i:nth-child(2){ animation-delay:.15s; background:#4FB86A; }
.plato-typing i:nth-child(3){ animation-delay:.3s; background:#7ED38E; }
@keyframes platoBounce{
0%, 60%, 100%{ transform:translateY(0) scale(1.12, .88); }
12%{ transform:translateY(-1px) scale(1); }
30%{ transform:translateY(-11px) scale(.94, 1.06); }
48%{ transform:translateY(0) scale(1); }
}
html.theme-uae .plato-typing i:nth-child(1){ background:#EF3340; }
html.theme-uae .plato-typing i:nth-child(2){ background:#00843D; }
html.theme-uae .plato-typing i:nth-child(3){ background:#1A1A1A; }
html.theme-uae[data-theme="dark"] .plato-typing i:nth-child(3){ background:#FFFFFF; }
html.theme-ramadan .plato-typing i{ /* gold crescents */
width:11px; height:11px; border-radius:0; background:#C49A3C;
-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath d='M19 3.5A12 12 0 1 0 27.5 20 9.4 9.4 0 1 1 19 3.5Z'/%3E%3C/svg%3E") center / contain no-repeat;
mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath d='M19 3.5A12 12 0 1 0 27.5 20 9.4 9.4 0 1 1 19 3.5Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
html.theme-eid .plato-typing i{ /* stars */
width:12px; height:12px; border-radius:0;
-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath d='M15 2.5l3.6 7.8 8.5.9-6.3 5.8 1.8 8.4L15 21.1l-7.6 4.3 1.8-8.4-6.3-5.8 8.5-.9Z'/%3E%3C/svg%3E") center / contain no-repeat;
mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath d='M15 2.5l3.6 7.8 8.5.9-6.3 5.8 1.8 8.4L15 21.1l-7.6 4.3 1.8-8.4-6.3-5.8 8.5-.9Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
html.theme-eid .plato-typing i:nth-child(1){ background:#0E7C66; }
html.theme-eid .plato-typing i:nth-child(2){ background:#C49A3C; }
html.theme-eid .plato-typing i:nth-child(3){ background:#B0485F; }
/* the typing balls always bounce: they are tiny, so they stay on even where the site turns other animation off
(phones, tablets, "reduce motion"); with reduce motion they bounce smaller and softer */
html .plato-typing i{ animation:platoBounce 1.05s cubic-bezier(.45,0,.55,1) infinite !important; }
html .plato-typing i:nth-child(2){ animation-delay:.15s !important; }
html .plato-typing i:nth-child(3){ animation-delay:.3s !important; }
@keyframes platoBounceSoft{ 0%, 100%{ transform:translateY(0); opacity:.55; } 40%{ transform:translateY(-7px); opacity:1; } }
@media (prefers-reduced-motion:reduce){ html .plato-typing i{ animation-name:platoBounceSoft !important; animation-duration:1.4s !important; } }
/* light mode shows each client logo in its own brand colours; in dark mode the gold version shows and the
brand colours fade in on hover.
The colour layer is a separate file, so nothing is filtered while the strip moves. */
.trust--inhero .trust__row--img li{ position:relative; }
.trust--inhero .trust__row--img img.logo-color{
position:absolute; inset:0; margin:auto; opacity:0 !important; pointer-events:none;
transition:opacity .25s ease !important;
}
.trust--inhero .trust__row--img li > img:first-child{ transition:opacity .25s ease !important; }
.trust--inhero .trust__row--img li:hover img.logo-color{ opacity:1 !important; }
.trust--inhero .trust__row--img li:hover > img:first-child{ opacity:0 !important; }
/* celebration preview tag (?celebration=...): bottom-left, only for the person previewing */
.celebration-preview{
position:fixed; left:16px; bottom:16px; z-index:90; display:flex; align-items:center; gap:10px;
padding:8px 8px 8px 14px; border-radius:999px; background:#122E35; color:#E8EFEC;
font-size:.82rem; box-shadow:0 10px 28px rgba(18,46,53,.28);
}
.celebration-preview b{ color:#F3D58C; font-weight:700; }
.celebration-preview button{
border:0; border-radius:999px; padding:6px 12px; background:#F3D58C; color:#122E35; font:inherit; font-weight:700; cursor:pointer;
}
.celebration-preview button:hover{ background:#fff; }
@media print{ .celebration-preview{ display:none; } }
@media (min-width:821px){ html.has-uae-flag .celebration-preview{ left:calc(var(--uae-flag-w) + 18px); } }
html:not([data-theme="dark"]) .trust--inhero .trust__row--img img.logo-color{ display:none; } /* light mode already shows the colours */
html:not([data-theme="dark"]) .trust--inhero .trust__row--img li:hover > img:first-child{ opacity:1 !important; }
/* ---------- Client logos: mark + real text ------------------------------------ */
/* Like the Prima Cure / My Health logos: the clinic's mark, then its name as text (Arabic on top, English below).
Light mode: the clinic's own colours. Dark mode: gold, and the clinic's colours on hover. */
.trust--inhero .trust__row--img li.cl{ display:flex; align-items:center; gap:8px; flex:none; }
.trust--inhero .trust__row--img li.cl .cl__mark{ position:relative; flex:none; display:block; width:38px; height:38px; }
.trust--inhero .trust__row--img li.cl .cl__mark img{ width:100% !important; height:100% !important; aspect-ratio:1; display:block; }
.cl__name{ display:flex; flex-direction:column; justify-content:center; align-items:flex-start; gap:1px; color:var(--c); white-space:nowrap; line-height:1.1; transition:color .25s ease; }
.cl__ar{ font:var(--wa, 700) 12.5px/1.3 var(--fa, "IBM Plex Sans Arabic"), "IBM Plex Sans Arabic", var(--sans); align-self:flex-start; }
.cl__en{ font:var(--we, 700) 9.5px/1.2 var(--fe, var(--display)), var(--display); letter-spacing:.04em; text-transform:uppercase; }
.cl__name:not(:has(.cl__ar)) .cl__en{ font-size:12px; }
html[data-theme="dark"] .cl__name{ color:#CCAD6B; }
html[data-theme="dark"] .trust--inhero .trust__row--img li.cl:hover .cl__name{ color:color-mix(in srgb, var(--c) 60%, #fff); }
.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
@media (max-width:820px){
.trust--inhero .trust__row--img li.cl .cl__mark{ width:32px; height:32px; }
.cl__ar{ font-size:11px; } .cl__en{ font-size:8.5px; }
}
/* wordmark logos (no separate mark): cropped to their artwork and sized by height so they weigh the same as
the mark + text logos (wide ones a little shorter, compact ones a little taller) */
.trust--inhero .trust__row--img li.wm{ flex:none; }
.trust--inhero .trust__row--img li.wm img{ width:auto !important; height:var(--h) !important; aspect-ratio:auto !important; max-width:none; }
@media (max-width:820px){ .trust--inhero .trust__row--img li.wm img{ height:calc(var(--h) * .85) !important; } }
/* a wide mark (KKT letters) keeps its proportions, at the height of the name next to it */
.trust--inhero .trust__row--img li.cl--wide .cl__mark{ width:auto; height:var(--mh, 34px); max-width:100px; }
.trust--inhero .trust__row--img li.cl--wide .cl__mark img{ width:auto !important; max-width:100px; object-fit:contain; height:var(--mh, 34px) !important; aspect-ratio:auto !important; }
.trust--inhero .trust__row--img li.cl--wide .cl__mark img.logo-color{ inset:0 auto auto 0; }
/* regulators in the hero tab: emblem + name as real text (Arabic on top, English below), formal type */
.herotab__logos li.reg{ display:flex; align-items:center; gap:8px; }
.herotab__logos li.reg img.reg__mark{ height:36px !important; width:auto !important; max-width:none; mix-blend-mode:normal; }
.herotab__logos li.reg .cl__name{ --fa:'Cairo'; --wa:700; --fe:'Montserrat'; --we:700; }
.herotab__logos li.reg .cl__ar{ font-size:12.5px; }
.herotab__logos li.reg .cl__en{ font-size:8.6px; }
html[data-theme="dark"] .herotab__logos li.reg .cl__name{ color:#CCAD6B; }
@media (max-width:640px){ .herotab__logos li.reg img.reg__mark{ height:28px !important; } .herotab__logos li.reg .cl__ar{ font-size:11px; } }
/* small screens: the three regulators shrink and wrap instead of running off the edge */
@media (max-width:820px){
.herotab__logos{ flex-wrap:wrap; justify-content:center; row-gap:8px; }
.herotab__logos li.reg img.reg__mark{ height:26px !important; }
.herotab__logos li.reg .cl__ar{ font-size:10.5px; }
.herotab__logos li.reg .cl__en{ font-size:7.4px; }
}
/* ---------- 31. Questions and answers (aeo.js) ---------- */
.faq__wrap{ max-width:880px; }
.faq__list{ display:grid; gap:10px; }
.faq__item{ background:var(--surface); border:1px solid var(--paper-300); border-radius:18px; transition:border-color .25s ease, box-shadow .25s ease; }
.faq__item[open]{ border-color:color-mix(in srgb, var(--green-700) 35%, var(--paper-300)); box-shadow:0 12px 30px -18px rgba(18,46,53,.35); }
.faq__item summary{ display:flex; align-items:center; gap:16px; padding:18px 20px; cursor:pointer; list-style:none; }
.faq__item summary::-webkit-details-marker{ display:none; }
.faq__q{ flex:1; margin:0; font-size:clamp(1rem,1.15vw,1.08rem); line-height:1.35; font-weight:700; color:var(--ink); }
.faq__ico{ position:relative; flex:0 0 26px; height:26px; border-radius:50%; background:var(--green-100); transition:transform .3s ease; }
.faq__ico::before, .faq__ico::after{ content:""; position:absolute; left:50%; top:50%; width:11px; height:2px; margin:-1px 0 0 -5.5px; border-radius:2px; background:var(--green-700); }
.faq__ico::after{ transform:rotate(90deg); transition:transform .3s ease; }
.faq__item[open] .faq__ico::after{ transform:rotate(0deg); }
.faq__a{ margin:0; padding:0 20px 20px; font-size:.98rem; line-height:1.65; color:var(--body); max-width:62ch; }
[dir="rtl"] .faq__a{ max-width:none; }
html[data-theme="dark"] .faq__item{ background:var(--ink-920); border-color:rgba(255,255,255,.08); }
html[data-theme="dark"] .faq__item[open]{ border-color:rgba(127,231,218,.3); }
html[data-theme="dark"] .faq__q{ color:#EAF2F0; } html[data-theme="dark"] .faq__a{ color:var(--ink-200); }
html[data-theme="dark"] .faq__ico{ background:rgba(127,231,218,.12); } html[data-theme="dark"] .faq__ico::before, html[data-theme="dark"] .faq__ico::after{ background:#7FE7DA; }
/* ---------- end 31 ---------- */