/* ==========================================================================
   Veltrion Laboratories — design system
   Clinical white. One stylesheet, shared by every page.

   Replaces ~323KB of per-page inline CSS. Nothing here is page-specific:
   if a rule only serves one page, it does not belong in this file.

   Contents
     01  tokens
     02  reset + base
     03  typography
     04  layout
     05  header / nav
     06  buttons + links
     07  surfaces: cards, panels, data tables
     08  forms
     09  footer
     10  motion + accessibility
   ========================================================================== */

/* --- 01 tokens ----------------------------------------------------------- */
:root{
  /* surface */
  --w:          #FFFFFF;
  --w-2:        #F8FAFC;   /* secondary surface */
  --w-3:        #F1F5F9;   /* tertiary / hover */

  /* ink */
  --ink:        #0F172A;
  --ink-2:      #475569;   /* secondary text */
  --ink-3:      #64748B;   /* metadata */
  --ink-4:      #94A3B8;   /* faint */

  /* line */
  --line:       #E2E8F0;
  --line-2:     #CBD5E1;

  /* accent — used sparingly, and never decoratively */
  --acc:        #2563EB;
  --acc-d:      #1D4ED8;
  --acc-wash:   #EFF6FF;

  /* state */
  --ok:         #0F766E;
  --warn:       #B45309;

  /* type */
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* metrics */
  --maxw:   1200px;
  --maxw-n: 760px;         /* narrow measure for prose */
  --gut:    32px;
  --r:      4px;           /* institutional, not rounded-startup */
}

/* --- 02 reset + base ----------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100% }
body,h1,h2,h3,h4,p,figure,blockquote,dl,dd{ margin:0 }
ul[class],ol[class]{ list-style:none;margin:0;padding:0 }
img,svg{ max-width:100%;display:block }
button,input,select,textarea{ font:inherit;color:inherit }

body{
  background:var(--w);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.65;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

::selection{ background:var(--acc); color:#fff }

/* --- 03 typography ------------------------------------------------------- */
h1,h2,h3,h4{ font-weight:600; letter-spacing:-0.021em; line-height:1.18; color:var(--ink) }

.t-display{ font-size:clamp(34px,5.2vw,60px); line-height:1.08; letter-spacing:-0.031em; font-weight:600 }
.t-h1{ font-size:clamp(28px,3.6vw,42px) }
.t-h2{ font-size:clamp(23px,2.5vw,31px) }
.t-h3{ font-size:19px; letter-spacing:-0.012em }

.t-lead{ font-size:clamp(16.5px,1.5vw,19px); line-height:1.6; color:var(--ink-2); max-width:62ch }
.t-body{ color:var(--ink-2) }
.t-sm{ font-size:14.5px; line-height:1.6; color:var(--ink-2) }

/* uppercase metadata — small, tracked, never for headlines */
.t-meta{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.11em;
  text-transform:uppercase;
  color:var(--ink-3);
  font-weight:500;
}
.t-meta-acc{ color:var(--acc) }

.measure{ max-width:var(--maxw-n) }

/* --- 04 layout ----------------------------------------------------------- */
.wrap{ max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut) }
.wrap-n{ max-width:var(--maxw-n); margin-inline:auto; padding-inline:var(--gut) }

.section{ padding-block:clamp(64px,8vw,112px) }
.section--tint{ background:var(--w-2) }
.section--line{ border-top:1px solid var(--line) }

.stack > * + *{ margin-top:var(--s,20px) }
.grid{ display:grid; gap:clamp(20px,2.4vw,32px) }
.grid-2{ grid-template-columns:repeat(2,minmax(0,1fr)) }
.grid-3{ grid-template-columns:repeat(3,minmax(0,1fr)) }
.grid-auto{ grid-template-columns:repeat(auto-fit,minmax(260px,1fr)) }

.section-head{ max-width:64ch; margin-bottom:clamp(36px,4vw,56px) }
.section-head .t-meta{ display:block; margin-bottom:14px }
.section-head p{ margin-top:16px }

@media(max-width:820px){
  .grid-2,.grid-3{ grid-template-columns:1fr }
  :root{ --gut:22px }
}

/* --- 05 header / nav ----------------------------------------------------- */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.88);
  backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--line);
}
.site-header .wrap{
  display:flex; align-items:center; justify-content:space-between;
  gap:28px; min-height:68px;
}
.brand{ display:inline-flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink) }
.brand img{ width:30px; height:30px }
.brand-name{ font-weight:600; font-size:16px; letter-spacing:-.015em; line-height:1.1 }
.brand-sub{
  display:block; font-family:var(--mono); font-size:8.5px;
  letter-spacing:.22em; color:var(--ink-3); margin-top:2px; font-weight:500;
}

.nav{ display:flex; align-items:center; gap:30px }
.nav a{
  font-size:14.5px; color:var(--ink-2); text-decoration:none;
  transition:color .18s ease;
}
.nav a:hover{ color:var(--ink) }
.nav a[aria-current="page"]{ color:var(--ink); font-weight:500 }

@media(max-width:900px){ .nav{ display:none } }

/* --- 06 buttons + links -------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:12px 22px; border-radius:var(--r); border:1px solid transparent;
  font-size:14.5px; font-weight:500; text-decoration:none; cursor:pointer;
  transition:background-color .18s ease, border-color .18s ease, color .18s ease;
}
.btn-primary{ background:var(--acc); color:#fff }
.btn-primary:hover{ background:var(--acc-d) }
.btn-secondary{ background:var(--w); color:var(--ink); border-color:var(--line-2) }
.btn-secondary:hover{ border-color:var(--ink-3); background:var(--w-2) }
.btn-sm{ padding:9px 16px; font-size:13.5px }

/* text link with a rule that thickens — restrained, no arrow bounce */
.link{
  color:var(--acc); text-decoration:none;
  border-bottom:1px solid rgba(37,99,235,.32);
  padding-bottom:1px; transition:border-color .18s ease, color .18s ease;
}
.link:hover{ color:var(--acc-d); border-bottom-color:var(--acc-d) }

/* prose links inside body copy stay underlined for accessibility */
.prose a{ color:var(--acc); text-decoration:underline; text-underline-offset:2px }
.prose a:hover{ color:var(--acc-d) }

/* --- 07 surfaces --------------------------------------------------------- */
.card{
  background:var(--w); border:1px solid var(--line); border-radius:var(--r);
  padding:clamp(22px,2.4vw,30px);
  transition:border-color .18s ease;
}
.card:hover{ border-color:var(--line-2) }
.card h3{ margin-bottom:10px }
.card p{ color:var(--ink-2); font-size:15px }
.card .t-meta{ display:block; margin-bottom:14px }

a.card{ text-decoration:none; color:inherit; display:block }
a.card:hover{ border-color:var(--acc) }

.panel{ background:var(--w-2); border:1px solid var(--line); border-radius:var(--r) }

/* numbered decision/answer rows */
.rows{ border-top:1px solid var(--line) }
.row{
  display:grid; grid-template-columns:44px 1fr 1.25fr; gap:clamp(16px,2.4vw,36px);
  padding:26px 0; border-bottom:1px solid var(--line); align-items:start;
}
.row .num{ font-family:var(--mono); font-size:12px; color:var(--acc); padding-top:4px }
.row h3{ font-size:18px }
.row p{ color:var(--ink-2); font-size:15px }
@media(max-width:820px){
  .row{ grid-template-columns:1fr; gap:8px }
  .row .num{ padding-top:0 }
}

/* data table — the dossier look */
.dl{ width:100%; border-collapse:collapse; font-size:14.5px }
.dl th,.dl td{ text-align:left; padding:13px 16px; border-bottom:1px solid var(--line); vertical-align:top }
.dl th{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-3); font-weight:500; background:var(--w-2); white-space:nowrap;
}
.dl td{ color:var(--ink-2) }
.dl td strong{ color:var(--ink); font-weight:600 }
.dl tr:last-child td{ border-bottom:0 }
.table-scroll{ overflow-x:auto; border:1px solid var(--line); border-radius:var(--r) }

/* key/value stack, used inside the intelligence module */
.kv{ border-top:1px solid var(--line); padding:14px 0 }
.kv .k{ font-family:var(--mono); font-size:10px; letter-spacing:.11em; text-transform:uppercase; color:var(--ink-3); margin-bottom:5px }
.kv .v{ font-size:15px; color:var(--ink); line-height:1.55 }

/* disclaimer / provenance block — credibility cue, deliberately plain */
.note{
  font-size:12.5px; line-height:1.6; color:var(--ink-3);
  border-left:2px solid var(--line-2); padding-left:14px;
}

/* --- 08 forms ------------------------------------------------------------ */
.field{ display:grid; gap:7px; margin-bottom:20px }
.field label{ font-family:var(--mono); font-size:10.5px; letter-spacing:.11em; text-transform:uppercase; color:var(--ink-3) }
.field input[type=text],.field input[type=email],.field select,.field textarea{
  width:100%; background:var(--w); border:1px solid var(--line-2); border-radius:var(--r);
  padding:11px 13px; font-size:15.5px; color:var(--ink);
  transition:border-color .18s ease, box-shadow .18s ease;
}
.field textarea{ min-height:104px; resize:vertical }
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; border-color:var(--acc); box-shadow:0 0 0 3px var(--acc-wash);
}
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:20px }
@media(max-width:640px){ .field-row{ grid-template-columns:1fr } }

.choice{ display:flex; gap:10px; flex-wrap:wrap }
.choice label{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--sans); font-size:14px; text-transform:none; letter-spacing:0;
  color:var(--ink); border:1px solid var(--line-2); border-radius:var(--r);
  padding:9px 14px; cursor:pointer; transition:border-color .18s ease, background-color .18s ease;
}
.choice label:hover{ border-color:var(--ink-3) }
.choice input{ accent-color:var(--acc) }

.hp{ position:absolute; left:-9999px }

/* --- 09 footer ----------------------------------------------------------- */
.site-footer{ background:var(--w-2); border-top:1px solid var(--line); padding-block:56px 32px; font-size:14px }
.footer-grid{ display:grid; grid-template-columns:1.8fr 1fr 1fr; gap:40px; padding-bottom:32px; border-bottom:1px solid var(--line) }
.footer-grid h4{ font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); margin-bottom:12px; font-weight:500 }
.footer-grid a{ display:block; color:var(--ink-2); text-decoration:none; padding:3px 0 }
.footer-grid a:hover{ color:var(--ink) }
.footer-note{ max-width:58ch; color:var(--ink-3); font-size:12.5px; line-height:1.65; margin-top:14px }
.footer-bottom{ padding-top:22px; display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap; font-size:12.5px; color:var(--ink-3) }
@media(max-width:820px){ .footer-grid{ grid-template-columns:1fr; gap:26px } }

/* --- 10 motion + accessibility ------------------------------------------- */
a.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--ink); color:#fff; padding:11px 18px; font-size:14px;
  font-weight:500; text-decoration:none; border-radius:0 0 var(--r) 0;
}
a.skip:focus{ left:0 }

:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:2px solid var(--acc); outline-offset:2px; border-radius:2px;
}
a:focus:not(:focus-visible),button:focus:not(:focus-visible){ outline:none }

/* Reveal-on-scroll removed deliberately.
   .rv started at opacity:0 and depended on JS adding .in, so any page whose
   observer script was missing rendered blank. Content must never depend on JS
   to be visible. The class is kept inert so existing markup stays valid. */
.rv{ opacity:1; transform:none }

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important; scroll-behavior:auto!important }
  .rv{ opacity:1; transform:none }
}

@media print{
  .site-header,.site-footer,.btn{ display:none }
  body{ color:#000; background:#fff }
}

/* --- 11 market pages ------------------------------------------------------
   Shared by the twelve country pages. Previously ~11KB of near-identical
   inline CSS on each; defined once here instead. */
.crumb{ font-size:13px; color:var(--ink-3); margin-bottom:14px }
.crumb a{ color:var(--ink-3); text-decoration:none }
.crumb a:hover{ color:var(--ink) }

.mkt-panel{ border:1px solid var(--line); border-radius:var(--r); overflow:hidden; background:var(--w) }
.mkt-head{ padding:22px 24px; border-bottom:1px solid var(--line); background:var(--w-2) }
.mkt-head h2{ font-size:22px; letter-spacing:-.018em }
.mkt-head .auth{ font-size:13.5px; color:var(--ink-2); margin-top:5px }
.mkt-head .auth b{ color:var(--acc); font-weight:600 }

.mkt-roles{ display:grid; grid-template-columns:repeat(3,1fr) }
.mkt-roles .cell{ padding:18px 24px; border-right:1px solid var(--line); border-bottom:1px solid var(--line) }
.mkt-roles .cell:last-child{ border-right:0 }
.mkt-roles .k{ font-family:var(--mono); font-size:10px; letter-spacing:.11em; text-transform:uppercase; color:var(--ink-3) }
.mkt-roles .v{ font-size:15px; font-weight:600; color:var(--ink); margin:5px 0 3px }
.mkt-roles .n{ font-size:13px; color:var(--ink-3); line-height:1.5 }

.mkt-rows .row{ display:grid; grid-template-columns:200px 1fr; gap:20px; padding:15px 24px; border-bottom:1px solid var(--line) }
.mkt-rows .row .k{ font-family:var(--mono); font-size:10px; letter-spacing:.11em; text-transform:uppercase; color:var(--ink-3); padding-top:3px }
.mkt-rows .row .v{ font-size:15px; color:var(--ink); line-height:1.6 }
.mkt-rows .row .v b{ font-weight:600 }
.mkt-rows .row .v em{ font-style:normal; color:var(--ink-2) }

.mkt-foot{ display:flex; justify-content:space-between; align-items:center; gap:20px; padding:16px 24px; flex-wrap:wrap }
.mkt-foot p{ font-size:12.5px; color:var(--ink-3); margin:0; max-width:70ch }
.mkt-foot a{ font-size:14px; font-weight:500; color:var(--acc); text-decoration:none; white-space:nowrap }
.mkt-foot a:hover{ color:var(--acc-d) }

.qa{ border-top:1px solid var(--line) }
.qa details{ border-bottom:1px solid var(--line) }
.qa summary{ cursor:pointer; list-style:none; padding:18px 0; font-size:16.5px; font-weight:500;
             display:flex; justify-content:space-between; gap:20px; align-items:center }
.qa summary::-webkit-details-marker{ display:none }
.qa summary::after{ content:"+"; font-family:var(--mono); font-size:17px; color:var(--acc); line-height:1 }
.qa details[open] summary::after{ content:"\2013" }
.qa p{ padding:0 0 20px; color:var(--ink-2); font-size:15.5px; max-width:76ch }

.mlist{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
        border:1px solid var(--line); border-radius:var(--r); overflow:hidden }
a.ml{ display:block; padding:13px 16px; text-decoration:none;
      border-right:1px solid var(--line); border-bottom:1px solid var(--line);
      transition:background-color .16s ease }
a.ml:hover{ background:var(--w-2) }
a.ml b{ display:block; font-size:14.5px; font-weight:600; color:var(--ink) }
a.ml span{ display:block; font-family:var(--mono); font-size:10.5px; color:var(--ink-3); margin-top:2px }

.strip{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
        border:1px solid var(--line); border-radius:var(--r); overflow:hidden; background:var(--w-2) }
.strip > div{ padding:20px 22px; border-right:1px solid var(--line) }
.strip > div:last-child{ border-right:0 }
.strip h3{ font-size:15px; margin-bottom:6px }
.strip p{ font-size:13.5px; color:var(--ink-2); line-height:1.55 }

@media(max-width:820px){
  .mkt-roles{ grid-template-columns:1fr }
  .mkt-roles .cell{ border-right:0 }
  .mkt-rows .row{ grid-template-columns:1fr; gap:5px }
  .strip > div{ border-right:0; border-bottom:1px solid var(--line) }
}

/* --- 12 policy pages ------------------------------------------------------
   Nine governance documents. Read like a controlled document, not marketing. */
.policy-hero{ border-bottom:1px solid var(--line); background:var(--w-2); padding-block:44px 34px }
.policy-hero h1{ font-size:clamp(27px,3.2vw,38px); margin-top:12px }
.policy-hero .meta{ display:flex; flex-wrap:wrap; gap:10px 32px; margin-top:20px }
.policy-hero .meta span{ font-size:13px; color:var(--ink-2) }
.policy-hero .meta b{ display:block; font-family:var(--mono); font-size:10px; letter-spacing:.11em;
                      text-transform:uppercase; color:var(--ink-3); font-weight:500; margin-bottom:2px }

.policy-grid{ display:grid; grid-template-columns:230px 1fr; gap:clamp(28px,4vw,60px); padding-block:44px 72px; align-items:start }
.toc{ position:sticky; top:92px }
.toc .mh{ font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase;
          color:var(--ink-3); margin-bottom:10px }
.toc a{ display:block; font-size:13.5px; color:var(--ink-2); text-decoration:none; padding:4px 0; line-height:1.45 }
.toc a:hover{ color:var(--acc) }

.prose{ max-width:74ch }
.prose h2{ font-size:19px; margin:34px 0 10px; scroll-margin-top:92px }
.prose h2:first-child{ margin-top:0 }
.prose h3{ font-size:16px; margin:22px 0 8px }
.prose p{ margin-bottom:14px; color:var(--ink-2) }
.prose ul,.prose ol{ margin:0 0 14px 20px; color:var(--ink-2) }
.prose li{ margin-bottom:7px }
.prose table{ width:100%; border-collapse:collapse; margin:16px 0; font-size:14px }
.prose th,.prose td{ text-align:left; padding:10px 12px; border:1px solid var(--line); vertical-align:top }
.prose th{ background:var(--w-2); font-family:var(--mono); font-size:10px; letter-spacing:.09em;
           text-transform:uppercase; color:var(--ink-3); font-weight:500 }
.prose strong{ color:var(--ink) }

@media(max-width:820px){
  .policy-grid{ grid-template-columns:1fr; gap:24px }
  .toc{ position:static; border-bottom:1px solid var(--line); padding-bottom:16px }
}

/* Grid children default to min-width:auto, so a long unbroken TOC label or a
   wide table sets the track's min-content width and pushes the page sideways.
   Opt every grid child out of that, then let wide tables scroll in their own box. */
.policy-grid > *,.grid > *,.footer-grid > *,.mkt-roles > *,.chain > *{ min-width:0 }
.toc a{ overflow-wrap:anywhere }
.prose table{ display:block; max-width:100%; overflow-x:auto }

/* --- 13 article template --------------------------------------------------
   Used by the AMA guide, which shares the service-page component vocabulary
   but carries additional regulatory sections. Its markup is kept intact and
   restyled here rather than regenerated, so no section can be dropped. */
.hero{ padding-block:56px 34px }
.hero .kicker,.sec-head .kicker{ font-family:var(--mono); font-size:11px; letter-spacing:.11em;
  text-transform:uppercase; color:var(--acc); font-weight:500; display:block; margin-bottom:12px }
.hero h1{ font-size:clamp(28px,3.6vw,42px); max-width:22ch }
.hero .lead,.hero p{ font-size:clamp(16.5px,1.5vw,19px); line-height:1.6; color:var(--ink-2);
  max-width:62ch; margin-top:16px }
.hero-cta{ margin-top:26px; display:flex; gap:14px; flex-wrap:wrap }

.define{ background:var(--w-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line);
         padding-block:40px }
.big{ font-size:19px; line-height:1.6; color:var(--ink); max-width:74ch }

.sec-head{ max-width:64ch; margin-bottom:36px }
.sec-head h2{ font-size:clamp(23px,2.5vw,31px) }

.benefits{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:0;
           border:1px solid var(--line); border-radius:var(--r); overflow:hidden }
.ben{ padding:24px; border-right:1px solid var(--line); border-bottom:1px solid var(--line) }
.ben .n{ font-family:var(--mono); font-size:11px; color:var(--acc); display:block; margin-bottom:10px }
.ben h3{ font-size:16.5px; margin-bottom:7px }
.ben p{ font-size:14.5px; color:var(--ink-2); line-height:1.6 }

.offer{ padding-block:clamp(56px,7vw,96px) }
.doors{ padding-block:clamp(56px,7vw,96px); background:var(--w-2); border-top:1px solid var(--line) }
.doorgrid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:16px; margin-top:28px }
.door{ display:block; background:var(--w); border:1px solid var(--line); border-radius:var(--r);
       padding:22px; text-decoration:none; transition:border-color .18s ease }
.door:hover{ border-color:var(--acc) }
.door .tag{ font-family:var(--mono); font-size:10px; letter-spacing:.11em; text-transform:uppercase;
            color:var(--ink-3); margin-bottom:9px }
.door h3{ font-size:16px; margin-bottom:8px }
.door .go{ font-size:13.5px; color:var(--acc); font-weight:500 }

.section-block{ padding-block:clamp(48px,6vw,80px) }

/* --- 14 capability pages --------------------------------------------------
   /services and /for-cros. Their markup is bespoke and content-dense, so the
   components are designed here rather than the pages regenerated: nothing can
   be dropped in translation, and the layout still belongs to this system. */

/* numbered service line: index, title, tagline, scope list, outcome */
.svcs{ border-top:1px solid var(--line) }
.svc{ display:grid; grid-template-columns:56px 1fr; gap:clamp(16px,2.4vw,32px);
      padding:34px 0; border-bottom:1px solid var(--line) }
.svc .sn{ font-family:var(--mono); font-size:12px; color:var(--acc); padding-top:6px }
.svc h2{ font-size:20px; letter-spacing:-.015em }
.svc .sl{ margin-top:6px; font-size:15.5px; color:var(--ink-2); max-width:60ch }
.svc ul{ margin:16px 0 0; padding:0; list-style:none;
         display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:2px 26px }
.svc li{ position:relative; padding:5px 0 5px 17px; font-size:14.5px; color:var(--ink-2); line-height:1.55 }
.svc li::before{ content:""; position:absolute; left:0; top:13px; width:5px; height:5px;
                 border-radius:50%; background:var(--line-2) }
.svc .so{ margin-top:18px; padding:13px 16px; background:var(--w-2);
          border-left:2px solid var(--acc); font-size:14.5px; color:var(--ink-2); max-width:78ch }
.svc .so b{ color:var(--ink); font-weight:600 }
@media(max-width:820px){ .svc{ grid-template-columns:1fr; gap:6px } .svc .sn{ padding-top:0 } }

/* three-column comparison: capability / usual route / here */
.cmp{ border:1px solid var(--line); border-radius:var(--r); overflow:hidden; margin-top:26px }
.cmp .hd,.cmp .rw{ display:grid; grid-template-columns:1.25fr 1.25fr .8fr; gap:0 }
.cmp .hd{ background:var(--ink); color:#fff }
.cmp .hd > div{ padding:13px 18px; font-family:var(--mono); font-size:10.5px;
                letter-spacing:.1em; text-transform:uppercase; font-weight:500 }
.cmp .rw{ border-top:1px solid var(--line) }
.cmp .rw > div{ padding:14px 18px; font-size:14.5px }
.cmp .lb{ color:var(--ink); font-weight:500 }
.cmp .no{ color:var(--ink-3) }
.cmp .ys{ color:var(--ink); font-weight:600; background:var(--acc-wash) }
@media(max-width:760px){
  .cmp .hd{ display:none }
  .cmp .rw{ grid-template-columns:1fr; padding:6px 0 }
  .cmp .rw > div{ padding:5px 16px }
  .cmp .no::before{ content:"Usually: "; color:var(--ink-4) }
  .cmp .ys{ background:none; color:var(--acc) }
  .cmp .ys::before{ content:"Here: "; color:var(--ink-4); font-weight:400 }
}

/* supporting layers / infrastructure blocks */
.band{ background:var(--w-2); border-top:1px solid var(--line); padding-block:clamp(56px,7vw,96px) }
.layer{ border-top:1px solid var(--line); padding:22px 0 }
.layer .t{ font-size:16.5px; font-weight:600; margin-bottom:5px }
.layer p{ font-size:14.5px; color:var(--ink-2); max-width:76ch }

/* /for-cros: scenarios, scope cards, fit/not-fit, enquiry */
.ch{ padding-block:44px 30px }
.when{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
       gap:0; border-top:1px solid var(--line); margin-top:30px }
.wn{ padding:22px 26px 22px 0; border-bottom:1px solid var(--line) }
.wn h2,.wn h3{ font-size:17px; margin-bottom:6px }
.wn p{ font-size:14.5px; color:var(--ink-2); line-height:1.6; max-width:52ch }

.fail{ background:var(--w-2); border-top:1px solid var(--line); padding-block:clamp(48px,6vw,80px) }
.fh{ max-width:60ch; margin-bottom:26px }
.fh h2{ font-size:clamp(23px,2.5vw,31px) }
.fh p{ margin-top:10px; color:var(--ink-2) }
.fg{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:16px }
.f{ background:var(--w); border:1px solid var(--line); border-radius:var(--r); padding:22px }
.f .fn{ font-family:var(--mono); font-size:11px; color:var(--acc); margin-bottom:10px }
.f h3{ font-size:16.5px; margin-bottom:7px }
.f p{ font-size:14.5px; color:var(--ink-2) }

.fit2{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
       gap:clamp(18px,2.4vw,26px); padding-block:clamp(48px,6vw,80px) }
.fc{ border:1px solid var(--line); border-radius:var(--r); padding:24px 26px; background:var(--w) }
.fc h3{ font-size:17px; margin-bottom:12px }
.fc ul{ margin:0 0 0 18px }
.fc li{ font-size:14.5px; color:var(--ink-2); margin-bottom:8px; line-height:1.55 }
.fc.yes{ border-top:2px solid var(--acc) }
.fc.no{ border-top:2px solid var(--line-2) }

.start{ border-top:1px solid var(--line); padding-block:clamp(48px,6vw,80px) }
.sgrid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,4vw,56px); align-items:start }
.skick{ font-family:var(--mono); font-size:11px; letter-spacing:.11em; text-transform:uppercase;
        color:var(--acc); margin-bottom:12px }
.sleft h2{ font-size:clamp(23px,2.5vw,31px) }
.sleft p{ margin-top:12px; color:var(--ink-2); max-width:52ch }
.q{ display:grid; gap:7px; margin-bottom:18px }
@media(max-width:820px){ .sgrid{ grid-template-columns:1fr } }

/* closing call to action */
.close{ padding-block:clamp(56px,7vw,96px); border-top:1px solid var(--line) }
.close h2{ font-size:clamp(24px,2.8vw,34px) }
.close p{ margin-top:14px; color:var(--ink-2); max-width:60ch }
.close .btn-g,.close .btn-primary{ margin-top:24px }
.ph2 h1,.ch h1{ font-size:clamp(28px,3.6vw,42px) }
.it{ font-style:normal; color:var(--acc) }

/* --- 15 legacy token aliases ---------------------------------------------
   Migrated pages still carry inline styles referencing the old palette's
   variable names. Undefined custom properties fail silently — text inherits
   and backgrounds vanish — so the old names are mapped onto the clinical
   palette here. Warm tokens (gold, coral, cream) resolve to the new accent
   and surface values; no page reintroduces the old colours. */
:root{
  --soft:var(--ink-2);
  --muted:var(--ink-2);
  --faint:var(--ink-3);
  --dark:var(--ink);
  --rule:var(--line);
  --cream:var(--w-2);
  --cream2:var(--w-3);
  --paper:var(--w);
  --white:var(--w);
  --gold:var(--acc);
  --coral:var(--acc);
  --blue:var(--acc);
}

/* section rhythm on the capability pages: some sections carry an inline
   padding-top:0 from the previous layout, so spacing is restored on the block */
.lev,.svcs,.cmp-sec{ padding-block:clamp(40px,5vw,72px) }
.lev > .wrap > h2:first-child,.band > .wrap > h2:first-child{ margin-bottom:14px }
main > section + section{ border-top:0 }