/* RT Clinica marketing site — shared stylesheet (home + compliance + integrations + faq + solutions/* + insights/*).
   Calm medical identity: navy, teal-blue, mint and editorial apricot accents. */
:root{
  --paper:#FFFFFF; --band:#F4F8FA; --band-2:#EAF5F4; --ink:#18354A; --ink-2:#496372; --muted:#5A7180; --faint:#5A7180;
  --line:#DCE7EC; --line-strong:#BCCED8;
  --blue:#087786; --blue-hover:#066775; --blue-ink:#18354A; --apricot:#FBECDD; --verify:#0C8A5E; --verify-bg:#E4F2EB; --freeze:#A2323F; --freeze-bg:#F5E7E8;
  --serif:"Geist",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --sans:"Geist",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,"SF Mono","JetBrains Mono","Cascadia Code","Roboto Mono",Menlo,Consolas,monospace;
  --maxw:1180px; --pad:32px;
  /* fluid type scale (reference-exact): interpolates 375px→1440px viewports */
  --t-h1: clamp(2rem, calc(2rem + 2 * ((100vw - 23.4375rem) / 66.5625)), 4rem);
  --t-h2: clamp(2rem, calc(2rem + 1 * ((100vw - 23.4375rem) / 66.5625)), 3rem);
  --t-h3: clamp(1.5rem, calc(1.5rem + .375 * ((100vw - 23.4375rem) / 66.5625)), 1.875rem);
  --t-h4: clamp(1.25rem, calc(1.25rem + .125 * ((100vw - 23.4375rem) / 66.5625)), 1.375rem);
  --t-h5: clamp(1rem, calc(1rem + .125 * ((100vw - 23.4375rem) / 66.5625)), 1.125rem);
  --curve-a: cubic-bezier(0,0,1,1); --curve-c: cubic-bezier(0,.56,.46,1); --curve-d: cubic-bezier(.6,0,.4,1);
  --dur-fast:.1s; --dur-short:.2s; --dur-medium:.3s; --dur-long:.4s;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0; background:var(--paper); color:var(--ink); font-family:var(--sans); font-size:17px; line-height:1.62; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 var(--pad)}
@media(max-width:600px){:root{--pad:20px}}
a{color:inherit; text-decoration:none}
p{margin:0}
h1,h2,h3{margin:0; font-family:var(--sans); font-weight:500; letter-spacing:-0.025em; line-height:1.12; text-wrap:balance}
::selection{background:#0D1317;color:#fff}

.kicker{font-family:var(--sans); font-size:14px; font-weight:500; letter-spacing:0; text-transform:none; color:var(--ink)}

/* Clear primary actions, 44px minimum targets and white text contrast > 4.5:1. */
.btn{display:inline-flex; align-items:center; gap:8px; font-family:var(--sans); font-size:14px; font-weight:500; min-height:44px; padding:10px 20px; border:1px solid transparent; border-radius:8px; cursor:pointer; transition:background .15s, color .15s}
.btn:focus-visible{outline:2px solid var(--ink); outline-offset:2px}
.btn-solid{background:var(--blue); color:#fff}
.btn-solid:hover{background:var(--blue-hover)}
.btn-line{background:#fff; border-color:var(--line-strong); color:var(--ink)}
.btn-line:hover{background:var(--band-2)}
.btn-lg{min-height:48px; padding:12px 22px}

/* nav — measured from the reference: 13px/500 links clustered after the logotype, pill actions right */
header.nav{position:sticky; top:0; z-index:50; background:rgba(255,255,255,.96); backdrop-filter:blur(8px); border-bottom:1px solid var(--line)}
.nav-in{display:flex; align-items:center; justify-content:space-between; min-height:72px; gap:20px}
.wordmark{display:flex; align-items:center; gap:9px}
.wordmark img{display:block; width:32px; height:32px; flex:none; object-fit:contain}
.wordmark b{white-space:nowrap}
.wordmark b{font-family:var(--sans); font-weight:700; font-size:19px; letter-spacing:-0.02em; color:var(--ink)}
.nav-links{display:flex; gap:26px; font-size:14px; font-weight:500; color:var(--ink)}
.nav-links a{padding:4px 0}
.nav-links a:hover, .nav-links a[aria-current="page"]{opacity:.6}
/* ≤960px the inline rail is replaced by the hamburger panel (.m-nav, built by welcome.js). */
@media(max-width:960px){.nav-links{display:none}}
/* Touch hit areas. Above 960px the inline rail is shown — and that band is exactly iPad landscape
   (1024/1080/1133/1180/1366 CSS px, all coarse-pointer). Measured on an iPad-landscape viewport, the 13px links
   with 4px padding were only 29px tall and the dropdown entries 39px, against a 44px minimum. The 68px bar
   absorbs the larger hit area with no visual change, and fine-pointer desktop is untouched. */
@media(pointer:coarse){
  .nav-links a{min-height:44px; display:inline-flex; align-items:center; padding:4px 0}
  .nav-links .nav-sub-in a{min-height:44px; display:flex; align-items:center; padding:8px 12px}
  .nav-burger{min-width:44px; min-height:44px}
  .nav-in .btn{min-height:44px; display:inline-flex; align-items:center}
  /* 2026-08-04: measured at 820px with the coarse cascade — the footer's four link columns were 33px and the
     wordmark 31px. These are standalone navigation targets in a grid, not links inside a sentence, so the WCAG
     2.5.5 / 2.5.8 inline exception does not cover them. Prose links stay as they are on purpose: enlarging a link
     that sits mid-sentence breaks the line rhythm for no accessibility gain. */
  .o-foot a{min-height:44px; display:flex; align-items:center; padding:2px 0}
  /* Breadcrumb trail: reads as inline text but is the page's "go up" control on every content page. */
  .crumbs a{min-height:44px; display:inline-flex; align-items:center}
  .wordmark, .o-statement a, .o-sec a{min-height:44px; display:inline-flex; align-items:center}
}

/* nav dropdowns — OpenAI-style panels, pure CSS (hover + :focus-within; CSP-safe, no JS).
   Parent links stay clickable (touch = navigate). Panel sits flush under the item, left-aligned so
   sub-item text lines up with the trigger label (-20px = 8px panel pad + 12px item pad).
   The transparent 8px padding-top on .nav-sub is the hover bridge between trigger and panel.
   Sub-link hover fade comes from the existing .nav-links a:hover rule. */
.nav-links .has-sub{position:relative; display:inline-flex}
.nav-links .nav-sub{position:absolute; top:100%; left:-20px; z-index:60; padding-top:8px; opacity:0; visibility:hidden; transition:opacity .15s var(--curve-d), visibility .15s var(--curve-d)}
.nav-links .has-sub:hover .nav-sub, .nav-links .has-sub:focus-within .nav-sub{opacity:1; visibility:visible}
/* touch: welcome.js toggles .open — first tap shows the panel, second tap follows the trigger link */
.nav-links .has-sub.open .nav-sub{opacity:1; visibility:visible}
.nav-sub-in{display:flex; flex-direction:column; min-width:230px; padding:8px; background:#fff; border:1px solid #E3E4E8; border-radius:8px; box-shadow:0 1px 2px rgba(15,27,36,.04), 0 12px 28px -22px rgba(15,27,36,.18)}
.nav-links .nav-sub-in a{display:block; padding:8px 12px; font-size:14px; font-weight:500; color:var(--ink); white-space:nowrap; border-radius:8px}
/* hamburger (≤960px) — button injected by welcome.js into the header's pill cluster */
.nav-burger{display:none; width:44px; height:44px; border:1px solid var(--line); border-radius:8px; background:rgba(0,0,0,.05); cursor:pointer; align-items:center; justify-content:center; padding:0; flex:none}
.nav-burger:hover{background:rgba(0,0,0,.1)}
.nav-burger:focus-visible{outline:2px solid var(--ink); outline-offset:2px}
.nav-burger .nb{position:relative; display:block; width:16px; height:2px; background:var(--ink); border-radius:2px; transition:background .15s}
.nav-burger .nb::before, .nav-burger .nb::after{content:""; position:absolute; left:0; width:16px; height:2px; background:var(--ink); border-radius:2px; transition:transform .2s var(--curve-d), top .2s var(--curve-d)}
.nav-burger .nb::before{top:-5px}
.nav-burger .nb::after{top:5px}
.nav-burger[aria-expanded="true"] .nb{background:transparent}
.nav-burger[aria-expanded="true"] .nb::before{top:0; transform:rotate(45deg)}
.nav-burger[aria-expanded="true"] .nb::after{top:0; transform:rotate(-45deg)}
@media(max-width:960px){.nav-burger{display:inline-flex}}
/* very small phones: the demo pill leaves the header (it lives in the panel + hero + CTA) */
@media(max-width:480px){.nav-in .btn-solid{display:none}}

/* mobile panel — the nav rail cloned by welcome.js into a full-width dropdown under the sticky header.
   Group headers keep the two-tap contract: first tap expands the group, second tap follows the link. */
.m-nav{display:none; position:absolute; top:100%; left:0; right:0; background:#fff; border-bottom:1px solid rgba(0,0,0,.1); box-shadow:0 24px 40px -28px rgba(15,27,36,.3); max-height:calc(100vh - 68px); max-height:calc(100dvh - 68px); overflow-y:auto; -webkit-overflow-scrolling:touch}
.m-nav.open{display:block}
@media(min-width:961px){.m-nav{display:none !important}}
.m-nav .m-in{padding:6px 18px calc(22px + env(safe-area-inset-bottom))}
.m-nav .nav-links{display:flex; flex-direction:column; gap:0; font-size:16px}
.m-nav .nav-links>a, .m-nav .has-sub>a:first-child{display:flex; align-items:center; justify-content:space-between; padding:14px 2px; font-size:16px; font-weight:500; border-bottom:1px solid rgba(0,0,0,.06)}
.m-nav .has-sub{display:block; position:static}
.m-nav .has-sub>a:first-child::after{content:"+"; font-size:18px; font-weight:400; color:rgba(0,0,0,.45); line-height:1; transition:transform .2s var(--curve-d)}
.m-nav .has-sub.open>a:first-child::after{content:"+"; transform:rotate(45deg)}
.m-nav .nav-sub{position:static; opacity:1; visibility:visible; padding:0; display:none; transition:none}
.m-nav .has-sub.open .nav-sub{display:block}
.m-nav .has-sub.open>a:first-child{border-bottom-color:transparent}
.m-nav .nav-sub-in{min-width:0; padding:0 0 12px; background:transparent; border:none; border-radius:0; box-shadow:none}
.m-nav .nav-sub-in a{padding:10px 14px; font-size:15px; color:rgba(0,0,0,.72); white-space:normal}
.m-nav .m-cta{display:flex; gap:10px; padding:18px 2px 4px}
.m-nav .m-cta .btn{flex:1; justify-content:center}

/* subpage hero */
.page-hero{background:linear-gradient(120deg,var(--band),var(--paper) 55%,var(--band-2)); border-bottom:1px solid var(--line)}
.page-hero-in{padding:58px 0 56px}
.crumbs{font-family:var(--sans); font-size:14px; font-weight:500; letter-spacing:0; text-transform:none; color:rgba(0,0,0,.6); margin-bottom:16px}
.crumbs a{color:var(--ink)}
.page-hero h1{font-size:var(--t-h2); line-height:1.16}
.page-hero p{margin-top:14px; color:var(--ink-2); max-width:62ch; font-size:1.08rem}

/* section scaffolding */
section{padding:96px 0}
section.wrap{padding-top:96px; padding-bottom:96px}
@media(max-width:640px){section{padding:58px 0} section.wrap{padding-top:58px; padding-bottom:58px}}
.lede{max-width:64ch}
.lede h2{font-size:var(--t-h3); margin-top:14px; line-height:1.25}
.lede p{margin-top:16px; font-size:1.1rem; color:var(--ink-2)}

/* shared card surface */
.phase, .stat, .lrow{background:var(--paper); border:1px solid var(--line); border-radius:8px; box-shadow:none; transition:transform .18s ease, box-shadow .22s ease, border-color .18s ease}
.phase:hover, .stat:hover, .lrow:hover{transform:translateY(-3px); box-shadow:0 2px 4px rgba(15,27,36,.05), 0 20px 40px -20px rgba(15,27,36,.28); border-color:var(--line-strong)}
@media(prefers-reduced-motion:reduce){.phase,.stat,.lrow,.phase:hover,.stat:hover,.lrow:hover{transform:none; transition:none}}

/* the loop — three cards */
.loop{margin-top:44px; display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
@media(max-width:820px){.loop{grid-template-columns:1fr}}
.phase{padding:30px 28px}
.phase .idx{font-family:var(--sans); font-size:2.2rem; font-weight:800; line-height:1; color:var(--blue)}
.phase .plab{font-family:var(--mono); font-size:13px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin-top:10px}
.phase h3{font-size:1.3rem; margin-top:6px}
.phase p{margin-top:12px; color:var(--ink-2); font-size:.98rem}
.phase ul{margin:16px 0 0; padding:0; list-style:none; display:flex; flex-direction:column; gap:8px; font-size:.9rem; color:var(--ink)}
.phase li{padding-left:18px; position:relative}
.phase li::before{content:"—"; position:absolute; left:0; color:var(--faint)}

/* architecture — dark ledger */
.arch{background:var(--ink); color:#E5E5E5}
.arch .kicker{color:#D4D4D4}
.arch .lede h2{color:#fff}
.arch .lede p{color:#C6D8E3}
.arch-in{display:grid; grid-template-columns:1fr 1fr; gap:52px; align-items:start; margin-top:46px}
@media(max-width:880px){.arch-in{grid-template-columns:1fr; gap:34px}}
.arch dl{margin:0; display:flex; flex-direction:column; gap:26px}
.arch dt{font-family:var(--sans); font-size:1.22rem; font-weight:800; color:#fff}
.arch dd{margin:8px 0 0; color:#AEC3CD; font-size:.97rem}
.arch dd code{font-family:var(--mono); color:#8FC7D8; font-size:.88em}
.rls{border:1px solid #36586A; border-radius:8px; background:#15364A; overflow:hidden; font-family:var(--mono); font-size:13px}
.rls .h{padding:11px 16px; border-bottom:1px solid #36586A; color:#B4CDD9; letter-spacing:.08em; text-transform:uppercase; font-size:13px}
.rls .r{display:flex; align-items:center; gap:12px; padding:13px 16px; border-bottom:1px solid #36586A; color:#E5E5E5}
.rls .r:last-child{border-bottom:0}
.rls .r .tn{color:#8FC7D8}
.rls .r .st{margin-left:auto}
.rls .r.ok .st{color:var(--verify)}
.rls .r.no{color:#B4CDD9}
.rls .r.no .st{color:#C46A76}
.rls .r.pol{background:#214457; color:#E5E5E5}
.rls .r.pol .st{color:#8FC7D8}

/* AI + agents */
.two{display:grid; grid-template-columns:1fr 1fr; gap:52px; align-items:center}
@media(max-width:880px){.two{grid-template-columns:1fr; gap:32px}}
.two h2{font-size:var(--t-h3); line-height:1.25}
.two p{margin-top:16px; color:var(--ink-2); font-size:1.02rem}
.two p + p{margin-top:14px}
.term{border:1px solid var(--line-strong); border-radius:8px; overflow:hidden; background:#0A141A; box-shadow:0 24px 44px -34px rgba(10,20,26,.6)}
.term .bar{display:flex; align-items:center; gap:8px; padding:10px 14px; background:#214457; border-bottom:1px solid #36586A; font-family:var(--mono); font-size:13px; color:#B4CDD9}
.term .bar i{width:10px; height:10px; border-radius:50%; background:#24404C}
.term pre{margin:0; padding:18px; font-family:var(--mono); font-size:13px; line-height:1.85; color:#E5E5E5; overflow-x:auto; white-space:pre-wrap; overflow-wrap:anywhere}
.term .c{color:#57707C}.term .p{color:#67B7D1}.term .g{color:#57C99A}.term .y{color:#E0B872}

/* compliance ledger */
.ledger{margin-top:44px; display:flex; flex-direction:column; gap:12px}
.lrow{display:grid; grid-template-columns:220px 1fr auto; gap:28px; align-items:center; padding:22px 30px}
.lstd{font-family:var(--mono); font-size:.9rem; font-weight:600; color:var(--blue-ink); letter-spacing:.02em}
.ldesc{color:var(--ink-2); font-size:.96rem; line-height:1.5}
.lstate{justify-self:end; font-family:var(--mono); font-size:13px; letter-spacing:.06em; text-transform:uppercase; color:var(--verify); background:var(--verify-bg); border:1px solid #BFE2D2; border-radius:8px; padding:5px 12px; display:inline-flex; align-items:center; gap:7px; white-space:nowrap}
.lstate::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--verify)}
@media(max-width:720px){.lrow{grid-template-columns:1fr; gap:8px; padding:20px 22px}.lstate{justify-self:start}}

/* stats */
.stats{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; margin-top:52px}
.stat{min-width:0; padding:28px 26px; overflow-wrap:anywhere}
@media(max-width:760px){.stats{grid-template-columns:repeat(2,minmax(0,1fr))}.stat{padding:24px 22px}}
@media(max-width:480px){.stats{grid-template-columns:minmax(0,1fr)}}
.stat .n{font-family:var(--sans); font-size:clamp(2rem,4vw,2.6rem); font-weight:800; letter-spacing:-0.02em; font-variant-numeric:tabular-nums}
.stat .l{color:var(--muted); font-size:.9rem; margin-top:6px; max-width:22ch}

/* CTA */
.cta{background:var(--blue-ink); color:#fff}
.cta-in{display:grid; grid-template-columns:1.3fr .7fr; gap:40px; align-items:center; padding:64px 0}
@media(max-width:820px){.cta-in{grid-template-columns:1fr; gap:26px; padding:52px 0}}
.cta .kicker{color:#8FC7D8}
.cta h2{color:#fff; font-size:clamp(2rem,3.6vw,2.8rem); margin-top:12px}
.cta p{color:#E5E5E5; margin-top:14px; max-width:52ch}
.cta .btn-solid{background:#fff; color:var(--blue-ink); border-color:#fff}
.cta .btn-solid:hover{background:var(--band-2)}
.cta .r{display:flex; justify-content:flex-end}
@media(max-width:820px){.cta .r{justify-content:flex-start}}

/* FAQ */
.faq{margin-top:40px; display:grid; grid-template-columns:1fr 1fr; gap:22px 44px}
@media(max-width:760px){.faq{grid-template-columns:1fr; gap:24px}}
.faq .qa h3{font-family:var(--sans); font-size:1.14rem; font-weight:800; letter-spacing:-0.01em}
.faq .qa p{margin-top:8px; color:var(--ink-2); font-size:.98rem}

.reveal{opacity:0; transform:translateY(12px); transition:opacity .6s ease, transform .6s ease}
.reveal.in{opacity:1; transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1; transform:none; transition:none}}

/* ═══ Homepage v3 — tokens measured live from the reference homepage:
   body 17px · headings 500 weight, -3% tracking · hero h1 48px white · section h2 22px · card titles 18px ·
   meta 14px (category #000 + note 60% black) · pills 36/40px r40 · full-width content with 32px gutters. ═══ */
.o-page{padding-bottom:48px}
.o-wrap{max-width:1920px; margin:0 auto; padding:0 32px}
@media(max-width:640px){.o-wrap{padding:0 18px}}
.nav-left{display:flex; align-items:center; gap:44px; min-width:0}

/* hero — full-width rounded banner, white centered copy, one 40px white pill */
/* hero — measured from the original at 1440x613: top offset 112 (nav 68 + 44 gap), height = 100svh - 216px
   (65% of the viewport), radius 6px, ~104px below the fold for the gap + tile peek. */
.o-hero{border-radius:8px; border:1px solid #D5E7EA; margin-top:40px; min-height:420px; display:grid; place-items:center; text-align:center; padding:80px 26px; background:radial-gradient(ellipse at 8% 14%,#D4E8F4 0%,transparent 56%),radial-gradient(ellipse at 92% 84%,#CDECE4 0%,transparent 56%),linear-gradient(120deg,#F1F7FC,#F1FAF6)}
.o-hero .k{font-size:14px; font-weight:600; color:var(--blue-hover)}
.o-hero h1{margin:16px auto 0; max-width:18ch; font-size:var(--t-h1); font-weight:600; letter-spacing:-0.045em; line-height:1.08; color:var(--ink)}
.o-hero p{margin:16px auto 0; max-width:52ch; font-size:17px; font-weight:400; line-height:1.65; color:var(--ink-2)}
.o-hero .act{margin-top:28px; display:flex; gap:10px; justify-content:center; flex-wrap:wrap}
.o-hero .btn{background:var(--blue); color:#fff}
.o-hero .btn:hover{background:var(--blue-hover)}
/* Secondary hero action reads as secondary. Two identical white pills gave the primary CTA no visual priority,
   so "Request a demo" and "Explore the platform" competed for the same click. */
.o-hero .btn.ghost{background:#fff; color:var(--ink); border:1px solid var(--line-strong)}
.o-hero .btn.ghost:hover{background:var(--band)}

/* section header: 22px/500 left, 14px "see all" right */
.o-sec{display:flex; align-items:baseline; justify-content:space-between; margin:96px 0 26px}
.o-sec h2{font-size:var(--t-h4); font-weight:500; letter-spacing:-0.01em; line-height:1.25}
.o-sec a{font-size:14px; font-weight:500; color:var(--ink)}
.o-sec a:hover{opacity:.6}

/* cards: tile, then title below, then meta */
.o-card{display:block; min-width:0; transition:opacity var(--dur-medium) var(--curve-d)}
.o-card .tile{border-radius:8px; overflow:hidden; display:grid; place-items:center; position:relative; transition:opacity var(--dur-medium) var(--curve-d)}
.o-card:hover .tile{opacity:.85}
.o-card .cap{margin-top:14px; font-size:var(--t-h5); font-weight:500; line-height:1.32; letter-spacing:-0.01em; color:var(--ink)}
.o-card .meta{margin-top:8px; font-size:14px; font-weight:500; color:var(--ink); display:flex; gap:14px}
.o-card .meta span{color:rgba(0,0,0,.6)}
.o-card.big .cap{font-size:var(--t-h2); font-weight:500; letter-spacing:-0.03em; line-height:1.16; margin-top:20px}
.tile-word{font-weight:500; letter-spacing:-0.02em; text-align:center; padding:0 22px; text-wrap:balance; line-height:1.2}

/* featured — the reference behaviour: the tall right rail scrolls while the big left card STICKS under the nav;
   once the rail is done, the whole page scrolls on together. (grid + position:sticky, no JS) */
.o-feat{display:grid; grid-template-columns:3fr 1fr; gap:26px; align-items:start; margin-top:64px} /* 64 = measured: featured top lands 40px above the fold (downloaded reference: hero -mb-30 + gap-30, media bottom = 100svh-104, featured top = 100svh-40) */
.o-feat .big{position:sticky; top:80px}
/* near-viewport-height left tile (reference: ~11:8) so while it sticks the screen reads as "page stopped, right rail scrolling" */
.o-feat .big .tile{width:100%; aspect-ratio:16/9; min-height:400px; max-height:calc(100svh - 175px)}
.o-side{display:grid; gap:44px}
.o-side .tile{aspect-ratio:1/1.02}
.o-side .cap{font-size:18px}
@media(max-width:900px){
  .o-feat{grid-template-columns:1fr}
  .o-feat .big{position:static}
  .o-side .tile{aspect-ratio:16/9}
}

/* organic multicolor tiles — like the reference thumbnails: 3-4 pastel hues blurred together per tile
   (pure CSS layered radial gradients; no images, CSP-safe). Each keeps a dominant family for its ink color. */
.gd-ink{background:linear-gradient(135deg,#18354A,#216377); color:#fff}
.gd-peri{background:linear-gradient(145deg,#E6EFF8,#D5E5F4); color:var(--ink); border:1px solid var(--line)}
.gd-peach{background:linear-gradient(145deg,#FFF5EB,var(--apricot)); color:var(--ink); border:1px solid #EDDCCA}
.gd-mint{background:linear-gradient(145deg,#EEF9F4,#CCE9DF); color:var(--ink); border:1px solid #C5E0D8}
.gd-lemon{background:var(--apricot); color:var(--ink); border:1px solid #EDDCCA}
.gd-teal2{background:linear-gradient(145deg,#DCEFF1,#C5E3E8); color:var(--ink); border:1px solid #BCD8DF}

/* provenance content inside the big dark tile */
.o-prov{display:flex; flex-direction:column; align-items:center; gap:18px; padding:0 20px}
.o-prov .w{font-size:clamp(26px,3.2vw,42px); font-weight:500; letter-spacing:-0.03em; color:#fff; text-align:center}
.o-prov .steps{display:flex; flex-wrap:wrap; gap:8px; justify-content:center; font-size:13px; font-weight:500}
.o-prov .steps span{padding:6px 14px; border-radius:8px; border:1px solid rgba(255,255,255,.3); color:#DCEAF1; background:rgba(255,255,255,.07)}

/* list rows: large squarish thumb + 18px title + 14px meta, two loose columns */
.o-list{display:grid; grid-template-columns:1fr 1fr; gap:20px 64px}
@media(max-width:860px){.o-list{grid-template-columns:1fr}}
.o-row{display:flex; align-items:flex-start; gap:36px; padding:10px 0}
.o-row .th{width:200px; height:200px; border-radius:8px; flex:none; transition:opacity var(--dur-medium) var(--curve-d)}
.o-row:hover .th{opacity:.85}
@media(max-width:640px){.o-row .th{width:112px; height:112px}}
.o-row .tt{display:block; margin-top:30px; font-size:var(--t-h5); font-weight:500; line-height:1.32; letter-spacing:-0.01em; color:var(--ink)}
.o-row .mm{display:flex; gap:14px; margin-top:10px; font-size:14px; font-weight:500; color:var(--ink)}
.o-row .mm span{color:rgba(0,0,0,.6)}

/* three case-style cards, 4:3 */
.o-cases{display:grid; grid-template-columns:repeat(3,1fr); gap:28px}
@media(max-width:860px){.o-cases{grid-template-columns:1fr}}
.o-cases .tile{aspect-ratio:4/3}

/* compliance strip — one quiet line between solutions and perspectives */
.o-comp{display:flex; align-items:baseline; justify-content:space-between; gap:12px 24px; flex-wrap:wrap; margin-top:96px; padding:26px 30px; border:1px solid rgba(0,0,0,.1); border-radius:8px; font-size:var(--t-h5); font-weight:500; letter-spacing:-0.01em; line-height:1.32; color:var(--ink); transition:opacity var(--dur-medium) var(--curve-d)}
.o-comp:hover{opacity:.6}
.o-comp .more{font-size:14px; color:rgba(0,0,0,.6); white-space:nowrap}

/* centered CTA — reference: same scale as the hero headline */
.o-cta{margin:120px 0 40px; text-align:center; padding:56px 24px; background:linear-gradient(120deg,var(--band),var(--band-2)); border:1px solid var(--line); border-radius:8px}
.o-cta h2{font-size:var(--t-h2); font-weight:500; letter-spacing:-0.03em; line-height:1.16}
.o-cta p{margin:16px auto 0; max-width:58ch; color:rgba(0,0,0,.65); font-size:17px; line-height:1.55}
.o-cta .act{margin-top:26px; display:flex; gap:10px; justify-content:center; flex-wrap:wrap}

/* footer — reference style: gray 14px headings, plain black links in a wide grid, quiet legal row */
.o-foot{border-top:1px solid rgba(0,0,0,.1); margin-top:72px; padding:56px 0 36px; font-size:14px}
.o-foot .cols{display:grid; grid-template-columns:repeat(4,minmax(150px,1fr)); gap:36px 48px}
@media(max-width:820px){.o-foot .cols{grid-template-columns:1fr 1fr}}
.o-foot h4{font-size:14px; font-weight:400; color:rgba(0,0,0,.5); margin:0 0 14px}
.o-foot a{display:block; padding:5px 0; color:var(--ink); font-weight:400}
.o-foot a:hover{opacity:.6}
.o-foot .legal{margin-top:56px; display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; font-size:13px; color:rgba(0,0,0,.5)}

/* statement band — plain centered manifesto line (company positioning) */
.o-statement{margin:120px auto 0; max-width:38em; padding:40px 28px; text-align:center; background:var(--apricot); border:1px solid #EDDCCA; border-radius:8px}
.o-statement p{font-size:clamp(22px,2.6vw,30px); font-weight:500; letter-spacing:-0.02em; line-height:1.35; color:var(--ink)}
.o-statement a{display:inline-block; margin-top:18px; font-size:14px; font-weight:500; color:var(--ink)}
.o-statement a:hover{opacity:.6}

/* phone rhythm — shorter section falls on small screens; desktop geometry untouched */
@media(max-width:640px){
  .o-sec{margin:64px 0 22px}
  .o-statement{margin-top:88px}
  .o-comp{margin-top:64px; padding:22px 20px}
  .o-cta{margin:88px 0 36px}
  /* hero: fixed svh height can clip stacked content on short phones — let it grow */
  .o-hero{height:auto; min-height:min(72svh,560px); padding:64px 22px}
  /* list rows: the 112px thumb pairs with a tighter gap and top-aligned title */
  .o-row{gap:18px}
  .o-row .tt{margin-top:4px}
  .o-side{gap:32px}
  .o-feat .big .tile{min-height:300px}
  .art-hero{padding:0 18px}
  .art-hero .tile{aspect-ratio:16/9}
}

/* article pages (solutions + perspectives) */
.art{max-width:760px; margin:0 auto; padding:64px 22px 30px}
.art .cat{display:flex; gap:14px; font-size:14px; font-weight:500; color:var(--ink)}
.art .cat span{color:rgba(0,0,0,.6)}
.art h1{margin-top:14px; font-size:var(--t-h2); font-weight:500; letter-spacing:-0.03em; line-height:1.16}
.art .lead{margin-top:20px; font-size:19px; line-height:1.55; color:rgba(0,0,0,.72)}
.art-hero{max-width:1440px; margin:26px auto 0; padding:0 32px}
.art-hero .tile{border-radius:8px; aspect-ratio:16/6; display:grid; place-items:center}
.art-body{max-width:760px; margin:0 auto; padding:44px 22px 20px; font-size:17px; line-height:1.7; color:var(--ink)}
.art-body h2{font-size:22px; font-weight:500; letter-spacing:-0.01em; margin:38px 0 12px}
.art-body p{margin:0 0 16px}
.art-body ul{margin:0 0 16px; padding-left:22px}
.art-body li{margin:6px 0}
.art-body b{font-weight:600}
.art-foot{max-width:760px; margin:0 auto; padding:8px 22px 40px; display:flex; gap:10px; flex-wrap:wrap}


/* art-card tiles: hand-built SVGs in the site's gradient language (gd-* families) — one restrained motif per concept, no external assets */
.im-01{background:url(/img/card-01.svg) center/cover no-repeat}
.im-02{background:url(/img/card-02.svg) center/cover no-repeat}
.im-03{background:url(/img/card-03.svg) center/cover no-repeat}
.im-04{background:url(/img/card-04.svg) center/cover no-repeat}
.im-05{background:url(/img/card-05.svg) center/cover no-repeat}
.im-06{background:url(/img/card-06.svg) center/cover no-repeat}
.im-07{background:url(/img/card-07.svg) center/cover no-repeat}
.im-08{background:url(/img/card-08.svg) center/cover no-repeat}
.im-09{background:url(/img/card-09.svg) center/cover no-repeat}
.im-10{background:url(/img/card-10.svg) center/cover no-repeat}
.im-11{background:url(/img/card-11.svg) center/cover no-repeat}
.im-12{background:url(/img/card-12.svg) center/cover no-repeat}

/* ---------- Enquiry form (/contact) + legal pages (/privacy) — 2026-08-04 --------------------------------
   Added with the form that replaces the site's 52 `mailto:` CTAs. */
.ct-grid{display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr); gap:44px 56px; align-items:start}
.ct-card{background:#fff; border:1px solid var(--line); border-radius:8px; padding:30px 30px 26px}
.ct-form{display:grid; gap:20px}
.ct-row{display:grid; gap:7px}
.ct-row label{font-size:14px; font-weight:600; color:var(--ink)}
.ct-req{color:var(--freeze)}
/* 16px minimum on every text-entry control: iOS Safari zooms the whole page when a smaller input is focused and
   never zooms back out. The same trap cost this project its sign-in screen — do not lower these. */
.ct-form input, .ct-form textarea{
  font-family:var(--sans); font-size:16px; line-height:1.5; color:var(--ink); background:#fff;
  border:1px solid var(--line-strong); border-radius:8px; padding:11px 13px; width:100%;
  transition:border-color .15s, box-shadow .15s;
}
.ct-form textarea{resize:vertical; min-height:132px}
.ct-form input:hover, .ct-form textarea:hover{border-color:var(--blue)}
.ct-form input:focus-visible, .ct-form textarea:focus-visible{outline:none; border-color:var(--blue); box-shadow:0 0 0 3px rgba(8,119,134,.20)}
.ct-form input[aria-invalid="true"], .ct-form textarea[aria-invalid="true"]{border-color:var(--freeze); box-shadow:0 0 0 3px rgba(162,50,63,.14)}
.ct-hint{font-size:13px; color:var(--muted); text-align:right}
/* Errors are never colour-only: each one is a sentence next to its field, announced via aria-describedby. */
.ct-err{font-size:14px; font-weight:500; color:var(--freeze)}
.ct-err a{color:var(--blue); font-weight:650; text-decoration:underline}
/* Honeypot: removed from layout without display:none, which some bots specifically skip. */
.ct-hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.ct-actions{display:flex; align-items:center; gap:16px; flex-wrap:wrap}
.ct-status{font-size:14px; color:var(--freeze)}
.ct-legal{font-size:13px; line-height:1.55; color:var(--muted)}
.ct-legal a{color:var(--blue); font-weight:600; text-decoration:underline}
.ct-aside h2{font-size:1.02rem; font-weight:700; letter-spacing:-0.01em; margin-top:26px}
.ct-aside h2:first-child{margin-top:0}
.ct-aside p{margin-top:7px; font-size:.96rem; color:var(--ink-2)}
.ct-aside a{color:var(--blue); font-weight:600}
.ct-mail{font-family:var(--mono); font-size:.94rem; word-break:break-all}
.ct-done{background:var(--verify-bg); border:1px solid rgba(12,138,94,.3); border-radius:8px; padding:28px 30px}
.ct-done h2{font-size:var(--t-h4); font-weight:500; letter-spacing:-0.01em; color:var(--verify)}
.ct-done p{margin-top:10px; color:var(--ink-2)}
/* Legal prose: a readable measure, not the full page width. */
.legal-doc{max-width:78ch}
.legal-doc h2{font-size:1.12rem; font-weight:700; letter-spacing:-0.01em; margin-top:34px}
.legal-doc h2:first-child{margin-top:0}
.legal-doc p, .legal-doc li{margin-top:10px; color:var(--ink-2); font-size:1rem}
.legal-doc ul{margin:6px 0 0; padding-left:22px}
.legal-doc a{color:var(--blue); font-weight:600; text-decoration:underline}
@media(max-width:900px){
  .ct-grid{grid-template-columns:1fr; gap:34px}
  .ct-card{padding:24px 20px 22px}
}
/* Finger operation: the same 44px floor the app enforces (WCAG 2.5.5 / Apple HIG). */
@media(pointer:coarse){
  .ct-form input, .ct-form textarea{min-height:44px; padding:12px 14px}
  .ct-actions .btn{min-height:44px}
  .ct-legal a, .ct-aside a, .legal-doc a{padding:2px 0; display:inline-block}
  /* The email address is a standalone target on its own line, not a mid-sentence link. */
  .ct-mail{min-height:44px; display:inline-flex; align-items:center}
}
/* Restore the existing blue/mint editorial diagrams; muted saturation keeps
   them expressive without competing with the product's functional colors. */
:is(.tile,.th)[class*="im-"] { filter: saturate(.66); border: 1px solid var(--line); }
.o-wrap { max-width: 1440px; }
.o-row > * { min-width: 0; }
@media(max-width:640px) { .o-hero { min-height: 440px; padding:56px 22px; } .nav-in { gap:12px; } }

/* Clinical homepage: concrete workflow, role-led information, illustrative (never live) data.
   NHS readability and VA error-recovery patterns inform the hierarchy, not regulatory claims. */
.clinical-home { padding-top: 0; padding-bottom: 72px; font-size: 18px; line-height: 1.6; }
.clinical-home :is(section, h2) { scroll-margin-top: 100px; }
.clinical-home h1 { font-size: clamp(38px, 4.8vw, 66px); line-height: 1.08; font-weight: 600; letter-spacing: -.045em; }
.clinical-home h2 { font-size: clamp(28px, 3vw, 40px); line-height: 1.18; font-weight: 600; }
.clinical-home h3 { font-size: 22px; line-height: 1.3; font-weight: 600; }
.clinical-home p { color: var(--ink-2); }
.clinical-home .clinical-eyebrow { font-size: 15px; font-weight: 600; color: var(--blue); margin-bottom: 16px; }
.clinical-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(24px, 4vw, 64px); padding: 72px 0 64px; }
.clinical-hero-copy { max-width: 620px; }
.clinical-lead { font-size: 20px; line-height: 1.6; margin-top: 24px; max-width: 50ch; }
.clinical-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 28px; }
.clinical-home .btn { min-height: 48px; font-size: 16px; white-space: normal; justify-content: center; text-align: center; }
.clinical-home .btn span { margin-left: 8px; }
.clinical-home .clinical-hero-note { font-size: 15px; margin-top: 20px; max-width: 50ch; }
.clinical-preview { margin: 0; border: 1px solid var(--line-strong); border-radius: 18px; background: var(--band); box-shadow: 0 18px 48px -30px #18354a66; overflow: hidden; min-width: 0; }
.clinical-preview figcaption { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; justify-content: space-between; padding: 18px 24px; background: #fff; border-bottom: 1px solid var(--line); color: var(--ink-2); font-size: 13px; }
.clinical-preview-brand { display: inline-flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 600; color: var(--ink); }
.clinical-preview-content { padding: 24px; }
.clinical-preview-context { display: flex; align-items: center; flex-wrap: wrap; justify-content: space-between; gap: 8px; font-size: 14px; color: var(--ink-2); margin-bottom: 24px; }
.clinical-home .clinical-preview h2 { font-size: 28px; margin-bottom: 4px; }
.clinical-preview-content > p { font-size: 16px; margin-bottom: 20px; }
.clinical-chip { display: inline-flex; border-radius: 6px; padding: 4px 8px; font-size: 13px; font-weight: 600; color: var(--blue-hover); background: var(--band-2); border: 1px solid var(--line-strong); }
.clinical-task { display: flex; align-items: center; gap: 14px; padding: 16px; margin-top: 10px; background: #fff; border: 1px solid var(--line); border-radius: 10px; }
.clinical-task > div { flex: 1; min-width: 0; }
.clinical-task strong { display: block; font-size: 17px; font-weight: 600; }
.clinical-task div span { display: block; font-size: 14px; color: var(--ink-2); margin-top: 3px; }
.clinical-task-icon { flex: none; display: grid; place-items: center; width: 36px; height: 36px; background: var(--band-2); color: var(--blue); border-radius: 8px; font-size: 20px; }
.clinical-task:nth-of-type(3) .clinical-task-icon { background: var(--apricot); color: var(--ink); }
.clinical-preview-foot { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 24px; font-size: 14px; color: var(--ink-2); }
.clinical-section { padding: 64px 0; border-top: 1px solid var(--line); }
.clinical-section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; margin-bottom: 32px; }
.clinical-section-heading > p { max-width: 44ch; flex: 0 1 46%; }
.clinical-workflow { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.clinical-workflow li { display: flex; flex-direction: column; padding: 24px; border-radius: 12px; border: 1px solid var(--line); background: var(--band); }
.clinical-step { color: var(--blue-hover); font-size: 15px; font-weight: 600; margin-bottom: 24px; }
.clinical-workflow p { font-size: 17px; margin: 12px 0 18px; }
.clinical-home a:not(.btn) { color: var(--blue-hover); text-decoration: underline; text-underline-offset: 4px; }
.clinical-home a:not(.btn):hover { color: var(--ink); text-decoration-thickness: 2px; }
.clinical-home a:focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; }
.clinical-workflow a, .clinical-roles a, .clinical-trace a, .clinical-foundations a { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; font-size: 16px; margin-top: auto; align-self: flex-start; }
.clinical-roles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.clinical-roles article { padding: 28px; border: 1px solid var(--line); border-radius: 12px; display: flex; flex-direction: column; align-items: flex-start; }
.clinical-roles article:nth-child(1), .clinical-roles article:nth-child(4) { background: var(--band-2); }
.clinical-role-tag { font-size: 15px; font-weight: 600; color: var(--blue-hover); margin-bottom: 18px; }
.clinical-roles p { margin: 12px 0 16px; max-width: 60ch; }
.clinical-trace { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: center; background: var(--ink); color: #fff; padding: 44px; border-radius: 18px; margin: 16px 0 48px; }
.clinical-trace > div > p:not(.clinical-eyebrow) { color: #DFE9EF; margin: 20px 0 16px; }
.clinical-trace .clinical-eyebrow { color: #A5E2DD; }
.clinical-home .clinical-trace a { color: #B8EEE9; }
.clinical-home .clinical-trace a:hover { color: #fff; }
.clinical-home .clinical-trace a:focus-visible { outline-color: #fff; }
.clinical-trace-example { background: #fff; color: var(--ink); border-radius: 12px; padding: 24px; min-width: 0; }
.clinical-home .clinical-trace-example .clinical-example-label { color: var(--ink-2); font-size: 14px; margin: 0 0 16px; }
.clinical-trace-example dl { margin: 20px 0 0; font-size: 16px; }
.clinical-trace-example dl > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 16px; border-top: 1px solid var(--line); padding: 12px 0; }
.clinical-trace-example dt { color: var(--ink-2); }
.clinical-trace-example dd { margin: 0; overflow-wrap: anywhere; }
.clinical-foundations { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 32px; }
.clinical-foundations p { margin: 14px 0; font-size: 17px; }
.clinical-demo { display: flex; align-items: center; justify-content: space-between; gap: 32px; padding: 40px; background: var(--band-2); border: 1px solid var(--line); border-radius: 16px; }
.clinical-demo > div:first-child { max-width: 660px; }
.clinical-demo p { margin-top: 16px; }
.clinical-demo .clinical-eyebrow { margin-top: 0; }
.clinical-demo .clinical-actions { flex: 0 0 240px; margin-top: 0; }
.clinical-demo .btn { width: 100%; }
@media(max-width:1100px) {
  .clinical-hero { gap: 28px; }
  .clinical-workflow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .clinical-trace { gap: 28px; padding: 28px; }
  .clinical-foundations { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .clinical-foundations > div:first-child { grid-column: 1 / -1; }
}
@media(max-width:760px) {
  .clinical-home { font-size: 17px; padding-bottom: 40px; }
  .clinical-hero { grid-template-columns: minmax(0, 1fr); padding: 40px 0; gap: 32px; }
  .clinical-lead { font-size: 18px; margin-top: 20px; }
  .clinical-section { padding: 40px 0; }
  .clinical-section-heading { display: block; }
  .clinical-section-heading > p { max-width: none; margin-top: 18px; }
  .clinical-trace { grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 24px; margin-bottom: 32px; }
  .clinical-demo { display: block; padding: 28px; }
  .clinical-demo .clinical-actions { margin-top: 24px; }
}
@media(max-width:520px) {
  .clinical-workflow, .clinical-roles, .clinical-foundations { grid-template-columns: minmax(0, 1fr); }
  .clinical-hero .clinical-actions > .btn { flex: 1 1 100%; }
  .clinical-preview-content, .clinical-preview figcaption { padding: 18px; }
  .clinical-task { gap: 10px; padding: 12px; }
  .clinical-trace { padding: 22px 16px; }
  .clinical-trace-example { padding: 18px; }
  .clinical-trace-example dl > div { grid-template-columns: minmax(0, 1fr); gap: 4px; }
}