html{color-scheme:light dark}
body{margin:0}
img{max-width:100%}
[hidden]{display:none!important}

:root{
  --ink:#101617; --ink-2:#39474a; --ink-3:#69797b;
  --paper:#f1f3f1; --card:#ffffff; --sunk:#e8ebe7;
  --petrol:#0a4f56; --petrol-ink:#0a4f56; --petrol-soft:#e2ecec; --on-petrol:#ffffff;
  --brass:#8a6a2c; --brass-soft:#f2ecdd;
  --line:#d8ddd8; --line-2:#e6e9e5;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --sans:'IBM Plex Sans',system-ui,-apple-system,Segoe UI,sans-serif;
  --display:'Archivo','IBM Plex Sans',system-ui,sans-serif;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --ink:#e9ece9; --ink-2:#a9b5b5; --ink-3:#7b8889;
  --paper:#0c1112; --card:#141a1b; --sunk:#101617;
  --petrol:#63b3ae; --petrol-ink:#8fcbc6; --petrol-soft:#0f2b2d; --on-petrol:#08191a;
  --brass:#cba25c; --brass-soft:#241e12;
  --line:#25302f; --line-2:#1b2424;
}}
:root[data-theme="dark"]{
  --ink:#e9ece9; --ink-2:#a9b5b5; --ink-3:#7b8889;
  --paper:#0c1112; --card:#141a1b; --sunk:#101617;
  --petrol:#63b3ae; --petrol-ink:#8fcbc6; --petrol-soft:#0f2b2d; --on-petrol:#08191a;
  --brass:#cba25c; --brass-soft:#241e12;
  --line:#25302f; --line-2:#1b2424;
}

*{box-sizing:border-box}
body{background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
.wrap{max-width:1080px;margin:0 auto;padding:0 28px}
a{color:inherit}
:focus-visible{outline:2px solid var(--petrol);outline-offset:3px;border-radius:2px}

/* ---------- shared type ---------- */
.label{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
h2{font-family:var(--display);font-variation-settings:'wdth' 92,'wght' 620;font-size:clamp(26px,3.4vw,36px);line-height:1.1;letter-spacing:-.015em;margin:0 0 12px;text-wrap:balance}
h3{font-family:var(--display);font-variation-settings:'wdth' 95,'wght' 600;font-size:18px;margin:0 0 6px;letter-spacing:-.005em}
p{margin:10px 0;max-width:66ch;color:var(--ink-2)}
p.lead{font-size:17.5px;color:var(--ink-2)}
code{font-family:var(--mono);font-size:.86em;color:var(--petrol-ink)}
section{padding:74px 0;border-top:1px solid var(--line)}
.head{margin-bottom:34px}
.head .label{display:block;margin-bottom:14px}

/* ---------- masthead ---------- */
header.top{padding:22px 0;position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--paper) 88%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--line-2)}
.bar{display:flex;align-items:center;justify-content:space-between;gap:20px}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none}
.brand .mark{display:block;width:26px;height:26px;flex:none}
.brand b{font-family:var(--display);font-variation-settings:'wdth' 88,'wght' 660;font-size:19px;letter-spacing:-.01em}
nav.top-nav{display:flex;gap:22px}
nav.top-nav a{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);text-decoration:none}
nav.top-nav a:hover{color:var(--petrol-ink)}
@media(max-width:940px){nav.top-nav{display:none}}

/* ---------- opening ---------- */
.open{padding-block:84px 68px}
.open h1{font-family:var(--display);font-variation-settings:'wdth' 90,'wght' 640;
  font-size:clamp(38px,6.2vw,68px);line-height:1.02;letter-spacing:-.028em;margin:0 0 22px;max-width:19ch;text-wrap:balance}
.open .stand{font-size:19px;line-height:1.55;color:var(--ink-2);max-width:60ch;margin:0}
.open .meta{display:flex;flex-wrap:wrap;gap:10px 30px;margin-top:34px;font-family:var(--mono);font-size:11.5px;color:var(--ink-3)}
.open .meta span b{color:var(--ink-2);font-weight:500}

/* ---------- figures strip ---------- */
.figures{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:1px;background:var(--line);border-block:1px solid var(--line);margin-top:54px}
.fig{background:var(--paper);padding:20px 22px}
.fig .n{font-family:var(--display);font-variation-settings:'wdth' 88,'wght' 640;font-size:30px;line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.fig .k{display:block;margin-top:7px;font-size:13px;color:var(--ink-3);line-height:1.35}

/* ---------- practice grid ---------- */
.practices{display:grid;grid-template-columns:repeat(auto-fit,minmax(248px,1fr));gap:22px}
.practice{border-top:2px solid var(--petrol);padding-top:16px}
.practice .label{display:block;margin-bottom:9px}
.practice p{font-size:14.5px;margin:0}

/* ---------- integration ---------- */
.rails{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:10px;overflow:hidden}
.rail{background:var(--card);padding:22px 24px}
.rail h3{margin-bottom:5px}
.rail p{font-size:14px;margin:0 0 12px}
.protocols{display:flex;flex-wrap:wrap;gap:6px}
.protocols span{font-family:var(--mono);font-size:11px;letter-spacing:.02em;color:var(--petrol-ink);background:var(--petrol-soft);padding:3px 8px;border-radius:4px;white-space:nowrap}

figure{margin:44px 0 0}
figure svg{width:100%;height:auto;display:block}
figcaption{font-size:13px;color:var(--ink-3);margin-top:14px;max-width:62ch}

/* ---------- engine ---------- */
.split{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:46px;align-items:start}
@media(max-width:860px){.split{grid-template-columns:1fr;gap:30px}}
.ledger{border:1px solid var(--line);border-radius:10px;background:var(--card);overflow:hidden}
.ledger .row{display:grid;grid-template-columns:118px 1fr;gap:0;border-bottom:1px solid var(--line-2)}
.ledger .row:last-child{border-bottom:0}
.ledger dt{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);padding-block:14px;padding-inline:18px 0}
.ledger dd{margin:0;padding-block:14px;padding-inline:0 18px;font-size:14px;color:var(--ink-2)}
.ledger dd b{color:var(--ink);font-weight:600}

/* ---------- product ---------- */
.product{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:34px 36px}
.product .label{color:var(--brass)}
.cta{display:inline-flex;align-items:center;flex-wrap:wrap;gap:4px 9px;max-width:100%;
  margin-top:18px;padding:11px 20px;border-radius:7px;
  background:var(--petrol);color:var(--on-petrol);text-decoration:none;font-weight:500;font-size:14.5px}
.cta:hover{filter:brightness(1.08)}
.cta .u{font-family:var(--mono);font-size:12px;opacity:.85}
.cta.quiet{background:transparent;color:var(--petrol-ink);border:1px solid var(--petrol);margin-inline-start:8px}
.cta.quiet:hover{background:var(--petrol-soft);filter:none}
@media (max-width:520px){.cta.quiet{margin-inline-start:0}}
.doc-product .doc-points{list-style:none;margin:6px 0 26px;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:9px 30px}
.doc-product .doc-points li{font-size:14.5px;line-height:1.5;color:var(--ink-2);padding-inline-start:16px;position:relative}
.doc-product .doc-points li::before{content:"";position:absolute;inset-inline-start:0;top:.66em;width:7px;height:1.5px;background:var(--brass)}
.doc-product .doc-points b{color:var(--ink);font-weight:600}
@media (max-width:760px){.doc-product .doc-points{grid-template-columns:1fr}}

/* ---------- the suite ---------- */
.suite-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:10px 24px;margin:46px 0 18px}
.suite-head h3{font-size:20px;margin:0}
.suite-head p{margin:0;font-size:14px;color:var(--ink-3);max-width:52ch}
/* Seven cards in a grid that always fills: the two that carry the argument, dentistry
   and contracts, take two columns, so three columns make three full rows and two
   columns make five, and no card is ever left alone beside empty cells. */
.suite{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.mod.wide{grid-column:span 2}
.mod.wide ul{grid-template-columns:1fr 1fr;column-gap:30px}
@media(max-width:1000px){
  .suite{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mod.wide-2{grid-column:span 2}
  .mod.wide ul{grid-template-columns:1fr}
}
@media(max-width:680px){
  .suite{grid-template-columns:1fr}
  .mod.wide,.mod.wide-2{grid-column:auto}
}
.mod{background:var(--card);padding:24px 26px 22px}
.mod.lead-mod{background:linear-gradient(180deg,var(--petrol-soft),var(--card) 62%)}
.mod .label{display:block;margin-bottom:8px;color:var(--petrol-ink)}
.mod h3{margin-bottom:6px}
.mod > p{font-size:14px;margin:0 0 12px;max-width:none}
.mod ul{margin:0;padding:0;list-style:none;display:grid;gap:7px}
.mod li{font-size:14px;line-height:1.5;color:var(--ink-2);padding-inline-start:16px;position:relative}
.mod li::before{content:"";position:absolute;inset-inline-start:0;top:.66em;width:7px;height:1.5px;background:var(--brass)}
.mod li b{color:var(--ink);font-weight:600}
.across{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.across span{font-family:var(--mono);font-size:11.5px;letter-spacing:.02em;color:var(--ink-2);background:var(--sunk);border:1px solid var(--line-2);padding:5px 10px;border-radius:5px}

/* ---------- principles ---------- */
.principles{counter-reset:p;display:grid;gap:0;border-top:1px solid var(--line)}
.principles li{list-style:none;counter-increment:p;display:grid;grid-template-columns:56px 1fr;gap:0;
  padding:20px 0;border-bottom:1px solid var(--line-2)}
.principles li::before{content:counter(p,decimal-leading-zero);font-family:var(--mono);font-size:11.5px;color:var(--brass);padding-top:3px}
.principles h3{margin-bottom:3px}
.principles p{margin:0;font-size:14.5px}

/* ---------- contact ---------- */
.enquiry{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:52px;align-items:start}
@media(max-width:860px){.enquiry{grid-template-columns:1fr;gap:34px}}
.enquiry .aside p{font-size:14.5px}
.enquiry .aside ul{margin:14px 0 0;padding:0;list-style:none;display:grid;gap:9px}
.enquiry .aside li{font-size:14px;color:var(--ink-2);padding-inline-start:17px;position:relative}
.enquiry .aside li::before{content:"";position:absolute;inset-inline-start:0;top:.62em;width:7px;height:1.5px;background:var(--brass)}

form.drop{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:26px 28px;display:grid;gap:16px}
.field{display:grid;gap:6px}
.field label{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.field .opt{text-transform:none;letter-spacing:0;color:var(--ink-3);opacity:.75}
.field input,.field select,.field textarea{
  font-family:var(--sans);font-size:15px;color:var(--ink);background:var(--paper);
  border:1px solid var(--line);border-radius:7px;padding:10px 12px;width:100%}
.field textarea{resize:vertical;min-height:104px;line-height:1.55}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--petrol);outline:none;box-shadow:0 0 0 3px var(--petrol-soft)}
/* Hidden without pushing it off one side: on a right-to-left page the left side
   scrolls, and a field parked at -9999px made the whole page ten thousand pixels wide. */
.trap{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;margin:-1px}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:520px){.pair{grid-template-columns:1fr}}
form.drop button{justify-self:start;margin-top:2px;padding:11px 22px;border:0;border-radius:7px;cursor:pointer;
  background:var(--petrol);color:var(--on-petrol);font-family:var(--sans);font-weight:500;font-size:15px}
form.drop button:hover{filter:brightness(1.08)}
form.drop .fine{font-size:12.5px;color:var(--ink-3);margin:0;max-width:none}
.sent{border:1px solid var(--petrol);background:var(--petrol-soft);border-radius:8px;padding:13px 15px;font-size:14px;color:var(--ink-2);margin:0}
.sent b{color:var(--ink)}

footer{padding:34px 0 60px;border-top:1px solid var(--line);font-family:var(--mono);font-size:11.5px;color:var(--ink-3);
  display:flex;flex-wrap:wrap;gap:10px 26px;justify-content:space-between}

/* ---------- the two switches: language and light or dark ---------- */
.bar-end{display:flex;align-items:center;gap:14px}
.switch{font-family:var(--sans);font-size:13px;font-weight:500;color:var(--ink-2);text-decoration:none;
  background:transparent;border:1px solid var(--line);border-radius:6px;padding:5px 10px;cursor:pointer;line-height:1.3}
.switch:hover{color:var(--petrol-ink);border-color:var(--petrol)}
.switch.lang[lang="ar"]{font-family:'IBM Plex Sans Arabic',var(--sans);font-size:14px}
.theme-switch{display:inline-flex;align-items:center;justify-content:center;width:32px;height:30px;padding:0}
.theme-switch svg{width:16px;height:16px;display:block}
.theme-switch .moon{display:none}
:root[data-theme="dark"] .theme-switch .sun{display:none}
:root[data-theme="dark"] .theme-switch .moon{display:block}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .theme-switch .sun{display:none}
  :root:not([data-theme="light"]) .theme-switch .moon{display:block}
}

/* ---------- Arabic ----------
   Arabic letters join, so letter spacing and capitals, which the English labels
   rely on, would break the words apart. The Latin display and mono faces have no
   Arabic, so Arabic text is set in IBM Plex Sans Arabic throughout, which shares
   the body face's proportions. Codes such as HL7 keep the mono face. */
:root[lang="ar"]{--sans:'IBM Plex Sans Arabic','IBM Plex Sans',system-ui,sans-serif;--display:var(--sans)}
[lang="ar"] body{line-height:1.8}
[lang="ar"] .label,[lang="ar"] nav.top-nav a,[lang="ar"] .field label,[lang="ar"] .ledger dt,
[lang="ar"] .open .meta,[lang="ar"] footer,[lang="ar"] .across span{
  font-family:var(--sans);letter-spacing:0;text-transform:none}
[lang="ar"] .label{font-size:13px;font-weight:500}
[lang="ar"] .open .meta{font-size:13px}
[lang="ar"] footer{font-size:13px}
[lang="ar"] nav.top-nav a{font-size:14px}
[lang="ar"] .field label{font-size:13px}
[lang="ar"] .ledger dt{font-size:13px;font-weight:500}
[lang="ar"] h1,[lang="ar"] h2,[lang="ar"] h3,[lang="ar"] .brand b{letter-spacing:0;font-variation-settings:normal;font-weight:600}
[lang="ar"] .open h1{line-height:1.25;max-width:22ch}
[lang="ar"] h2{line-height:1.35}
[lang="ar"] .fig .n{font-weight:600}
[lang="ar"] .protocols span,[lang="ar"] .u{font-family:var(--mono);direction:ltr;unicode-bidi:isolate}
[lang="ar"] .brand b{font-family:var(--sans);font-variation-settings:normal;font-weight:600;font-size:20px;letter-spacing:0}