/* ============================== tokens ============================== */
:root{
  --navy:#0A1B2E;        /* midnight — primary surface & headings   */
  --navy-2:#12293F;      /* raised navy                             */
  --blue:#2F72B5;        /* CAD CARE brand blue — action & accent   */
  --blue-lt:#3C79B6;
  --teal:#0E7C86;        /* healthcare teal — secondary / semantic  */
  --green:#19A649;       /* brand green — evidence terminals only   */
  --grey:#566B7C;        /* cool grey — body                        */
  --grey-2:#8598A6;      /* muted                                   */
  --rule:#D9E1E7;
  --rule-2:#EDF1F4;
  --bg:#FFFFFF;
  --bg-2:#F4F7F9;        /* off-white                               */
  --bg-3:#EAF0F4;
  --focus:#F0A32E;

  --w:1200px;
  --sans:"IBM Plex Sans","Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --mono:"IBM Plex Mono","SF Mono",ui-monospace,Menlo,Consolas,monospace;
}

/* ============================== reset =============================== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;font-family:var(--sans);font-size:17px;line-height:1.65;
     color:var(--grey);background:var(--bg);-webkit-font-smoothing:antialiased}
img,svg{max-width:100%}
a{color:var(--blue);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{color:var(--navy);font-weight:600;letter-spacing:-.021em;margin:0}
h1{font-size:clamp(2.1rem,5.1vw,3.5rem);line-height:1.08;letter-spacing:-.032em;font-weight:600}
h2{font-size:clamp(1.5rem,3vw,2.1rem);line-height:1.17;letter-spacing:-.026em}
h3{font-size:1.14rem;line-height:1.32}
h4{font-size:.95rem;line-height:1.35}
p{margin:0 0 1.05em}
ul{margin:0;padding:0;list-style:none}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:2px}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* ============================ primitives ============================ */
.wrap{max-width:var(--w);margin:0 auto;padding:0 28px}
.narrow{max-width:820px}
.skip{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
      clip:rect(0,0,0,0);white-space:nowrap;top:0;left:0;background:var(--navy);color:#fff;
      z-index:200}
.skip:focus{width:auto;height:auto;padding:12px 18px;margin:0;overflow:visible;
      clip:auto;white-space:normal}
.eyebrow{font-family:var(--mono);font-size:.688rem;letter-spacing:.16em;
         text-transform:uppercase;color:var(--teal);font-weight:500;margin:0 0 14px}
.eyebrow.on-dark{color:#6FC7D6}
.lede{font-size:clamp(1.06rem,1.9vw,1.29rem);line-height:1.55;color:var(--navy);
      font-weight:400;letter-spacing:-.011em}
.muted{color:var(--grey-2)}
.rule{height:1px;background:var(--rule);border:0;margin:0}
.mono{font-family:var(--mono)}

/* ============================== header ============================== */
.top{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.96);
     backdrop-filter:saturate(1.6) blur(10px);border-bottom:1px solid var(--rule)}
.top-in{display:flex;align-items:center;gap:14px;height:74px;
        max-width:var(--w);margin:0 auto;padding:0 28px}
.brand{display:flex;align-items:center;gap:11px;flex:none}
.brand:hover{text-decoration:none}
.brand .mk{width:19px;height:29px;display:block}
.brand-tx{line-height:1.06}
.brand-nm{font-size:1.02rem;font-weight:600;color:var(--navy);letter-spacing:.01em;display:block}
.brand-sb{font-family:var(--mono);font-size:.563rem;letter-spacing:.13em;
          text-transform:uppercase;color:var(--grey-2);display:block;margin-top:2px}
.nav{display:flex;align-items:center;gap:2px;margin-left:auto}
.nav>li{position:relative}
.nav-mobile-only{display:none}
.nav>li>a{display:block;padding:10px 10px;font-size:.844rem;font-weight:500;white-space:nowrap;
          color:var(--navy);border-radius:3px;letter-spacing:-.006em}
.nav>li>a:hover{background:var(--bg-2);text-decoration:none}
.nav>li[data-on]>a{color:var(--blue)}
.nav>li[data-on]>a::after{content:"";display:block;height:2px;background:var(--blue);
                          margin:6px -4px -12px}
.drop{position:absolute;top:100%;left:-8px;min-width:274px;background:#fff;
      border:1px solid var(--rule);border-top:2px solid var(--blue);
      box-shadow:0 18px 44px -18px rgba(10,27,46,.34);padding:8px;
      opacity:0;visibility:hidden;transform:translateY(-5px);
      transition:opacity .14s,transform .14s,visibility .14s}
.nav>li:hover .drop,.nav>li:focus-within .drop{opacity:1;visibility:visible;transform:none}
.drop a{display:block;padding:8px 12px;font-size:.844rem;color:var(--navy);border-radius:3px}
.drop a:hover{background:var(--bg-2);color:var(--blue);text-decoration:none}
.drop .sep{margin:6px 12px;height:1px;background:var(--rule-2)}
.btn{display:inline-block;padding:11px 20px;border-radius:3px;font-size:.875rem;
     font-weight:500;letter-spacing:-.004em;border:1px solid transparent;cursor:pointer}
.btn:hover{text-decoration:none}
.btn-p{background:var(--blue);color:#fff}
.btn-p:hover{background:#255E99}
.btn-s{border-color:var(--rule);color:var(--navy);background:#fff}
.btn-s:hover{border-color:var(--blue);color:var(--blue)}
.btn-g{border-color:rgba(255,255,255,.34);color:#fff;background:transparent}
.btn-g:hover{background:rgba(255,255,255,.1);border-color:#fff}
.top .btn{flex:none;margin-left:8px}
.burger{display:none;flex:none;margin-left:auto;background:none;border:1px solid var(--rule);
        border-radius:3px;width:42px;height:38px;padding:0;cursor:pointer}
.burger span{display:block;width:18px;height:1.5px;background:var(--navy);margin:4px auto}

/* ============================ breadcrumb ============================ */
.crumb{border-bottom:1px solid var(--rule-2);background:var(--bg)}
.crumb ol{list-style:none;display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0;padding:11px 0;
          font-family:var(--mono);font-size:.688rem;letter-spacing:.045em}
.crumb li{color:var(--grey-2)}
.crumb a{color:var(--grey)}
.crumb li+li::before{content:"/";margin-right:8px;color:var(--rule)}

/* ============================== hero ================================ */
.hero{background:var(--navy);color:#fff;position:relative;overflow:hidden}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(880px 420px at 84% 8%,rgba(47,114,181,.30),transparent 62%),
             radial-gradient(660px 360px at 8% 100%,rgba(14,124,134,.24),transparent 60%)}
.hero-in{position:relative;z-index:1;padding:78px 0 74px}
.hero h1{color:#fff}
.hero .lede{color:#C6D6E2;max-width:720px;margin-top:20px}
.hero-sup{font-family:var(--mono);font-size:.75rem;letter-spacing:.1em;color:#7FA6C6;
          margin-top:26px;text-transform:uppercase}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.hero-lg .hero-in{padding:104px 0 96px}
.hero-lg h1{font-size:clamp(2.4rem,6.2vw,4.25rem);max-width:15ch}
.hero-art{position:absolute;right:0;top:50%;transform:translateY(-50%);width:43%;
          max-width:530px;z-index:0;opacity:.9;pointer-events:none}
.hero-art svg{display:block;width:100%;height:auto}
@media (max-width:1080px){.hero-art{display:none}}

/* ============================= sections ============================= */
.sec{padding:74px 0;border-top:1px solid var(--rule-2)}
.sec:first-of-type{border-top:0}
.sec.tint{background:var(--bg-2);border-top:1px solid var(--rule)}
.sec.dark{background:var(--navy);color:#B9CBD9;border-top:0}
.sec.dark h2,.sec.dark h3,.sec.dark h4{color:#fff}
.sec.dark .lede{color:#C6D6E2}
.sec.dark a{color:#7FC2E8}
.sec-hd{max-width:760px;margin-bottom:38px}
.sec-hd p{margin-bottom:0}
.sec-hd .lede{margin-top:14px}

/* ============================== grids =============================== */
.g2{display:grid;grid-template-columns:repeat(2,1fr);gap:26px}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.g4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.g1{display:block}
.split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}

/* ============================== cards =============================== */
.card{background:#fff;border:1px solid var(--rule);padding:28px;position:relative}
.card h3{margin-bottom:9px}
.card p{font-size:.938rem;margin-bottom:0}
.card .idx{font-family:var(--mono);font-size:.688rem;letter-spacing:.14em;color:var(--blue);
           display:block;margin-bottom:12px}
.card-l{border-left:2px solid var(--blue)}
.card a.more{display:inline-block;margin-top:16px;font-size:.844rem;font-weight:500}
.sec.tint .card{background:#fff}
.sec.dark .card{background:var(--navy-2);border-color:#22405B}
.sec.dark .card p{color:#B9CBD9}

.pill{display:inline-block;font-family:var(--mono);font-size:.688rem;letter-spacing:.08em;
      padding:4px 9px;border:1px solid var(--rule);color:var(--grey);margin:0 6px 6px 0;
      background:#fff;border-radius:2px}
.sec.dark .pill{background:transparent;border-color:#2B4A66;color:#9FBACE}

/* ========================== capability cols ========================= */
.cols{display:grid;grid-template-columns:repeat(3,1fr);gap:30px 34px}
.cols h4{font-size:.875rem;letter-spacing:.02em;padding-bottom:9px;margin-bottom:12px;
         border-bottom:1px solid var(--rule)}
.cols li{font-size:.938rem;padding:5px 0 5px 15px;position:relative;color:var(--grey)}
.cols li::before{content:"";position:absolute;left:0;top:14px;width:5px;height:1px;
                 background:var(--teal)}
.sec.dark .cols h4{border-color:#22405B}
.sec.dark .cols li{color:#B9CBD9}

/* ============================ statements =========================== */
.stmt{border-left:2px solid var(--teal);padding:6px 0 6px 26px;max-width:760px}
.stmt p{font-size:clamp(1.06rem,1.7vw,1.22rem);color:var(--navy);line-height:1.5;
        margin-bottom:0;letter-spacing:-.012em}
.sec.dark .stmt p{color:#fff}
.note{background:var(--bg-2);border:1px solid var(--rule);border-left:2px solid var(--grey-2);
      padding:22px 26px}
.note h4{font-family:var(--mono);font-size:.688rem;letter-spacing:.14em;text-transform:uppercase;
         color:var(--grey);margin-bottom:9px}
.note p{font-size:.938rem;margin-bottom:0}
.sec.dark .note{background:var(--navy-2);border-color:#22405B}
.sec.dark .note p{color:#B9CBD9}

/* ============================== steps ============================== */
.steps{counter-reset:s;display:grid;grid-template-columns:repeat(6,1fr);gap:0;
       border-top:1px solid var(--rule)}
.steps li{counter-increment:s;padding:22px 20px 24px 0;border-right:1px solid var(--rule-2)}
.steps li:last-child{border-right:0}
.steps li::before{content:counter(s,decimal-leading-zero);display:block;font-family:var(--mono);
                  font-size:.688rem;letter-spacing:.12em;color:var(--blue);margin-bottom:10px}
.steps b{display:block;color:var(--navy);font-size:.938rem;font-weight:600;margin-bottom:6px}
.steps span{font-size:.875rem;display:block}

/* ============================== table ============================== */
table{width:100%;border-collapse:collapse;font-size:.938rem}
th{text-align:left;font-family:var(--mono);font-size:.688rem;letter-spacing:.12em;
   text-transform:uppercase;color:#fff;background:var(--navy);padding:11px 14px;font-weight:500}
td{padding:12px 14px;border-bottom:1px solid var(--rule-2);vertical-align:top;color:var(--grey)}
td:first-child{color:var(--navy);font-weight:500}
.tw{overflow-x:auto}

/* ============================= diagram ============================= */
.fig{margin:0}
.fig svg{display:block;width:100%;height:auto}
.fig figcaption{font-family:var(--mono);font-size:.688rem;letter-spacing:.09em;color:var(--grey-2);
                margin-top:14px;text-transform:uppercase}
.fig-box{border:1px solid var(--rule);background:#fff;padding:30px}
.fig-hint{display:none;font-family:var(--mono);font-size:.688rem;letter-spacing:.07em;
          color:var(--grey-2);margin-top:9px}
.sec.dark .fig-box{background:var(--navy-2);border-color:#22405B}

/* ============================ layer rail =========================== */
.rail{display:flex;flex-direction:column;gap:2px;font-family:var(--mono);font-size:.688rem;
      letter-spacing:.06em}
.rail div{display:flex;gap:12px;align-items:baseline;padding:9px 12px;background:var(--bg-2);
          color:var(--grey-2);border-left:2px solid var(--rule)}
.rail div b{color:var(--grey);font-weight:500;min-width:22px}
.rail div[data-on]{background:#fff;border-left-color:var(--blue);color:var(--navy)}
.rail div[data-on] b{color:var(--blue)}

/* ============================== ctas =============================== */
.cta{background:var(--navy);color:#C6D6E2;padding:70px 0;position:relative;overflow:hidden}
.cta::after{content:"";position:absolute;inset:0;
  background:radial-gradient(700px 340px at 78% 12%,rgba(47,114,181,.28),transparent 62%)}
.cta>*{position:relative;z-index:1}
.cta h2{color:#fff;max-width:16ch}
.cta p{max-width:56ch;margin-top:14px}

/* ============================== forms ============================== */
.form{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.field{display:flex;flex-direction:column;gap:6px}
.field.full{grid-column:1/-1}
label{font-size:.813rem;font-weight:500;color:var(--navy)}
input,select,textarea{font-family:var(--sans);font-size:.938rem;color:var(--navy);
  padding:11px 13px;border:1px solid var(--rule);border-radius:3px;background:#fff;width:100%}
input:focus,select:focus,textarea:focus{border-color:var(--blue)}
textarea{min-height:130px;resize:vertical}
.hint{font-size:.813rem;color:var(--grey-2)}
.ok{display:none;background:#EAF6EE;border:1px solid #B7DFC5;border-left:2px solid var(--green);
    padding:16px 20px;font-size:.938rem;color:#1A5B31}
.ok[data-show]{display:block}
.err{display:none;background:#FBEAEA;border:1px solid #E8B9B9;border-left:2px solid #B3372B;
     padding:16px 20px;font-size:.938rem;color:#7A231C;margin-top:14px}
.err[data-show]{display:block}
.btn[data-busy]{opacity:.6;pointer-events:none}
/* Honeypot — a real, focusable-free field that bots which fill every input
   will fill, but which no sighted or AT user encounters. Uses the clip
   pattern, NOT left:-9999px: a large negative offset inflates
   document.scrollWidth under dir="rtl" and creates phantom horizontal
   scroll (the same bug previously fixed on .skip). Keep it clip-based. */
.hp-field{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
          overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);
          white-space:nowrap;border:0}

/* ============================== footer ============================= */
.foot{background:var(--navy);color:#8FA9BE;padding:64px 0 30px;font-size:.875rem}
.foot h4{color:#fff;font-family:var(--mono);font-size:.688rem;letter-spacing:.14em;
         text-transform:uppercase;margin-bottom:14px}
.foot a{color:#8FA9BE}
.foot a:hover{color:#fff}
.foot-g{display:grid;grid-template-columns:1.5fr repeat(4,1fr);gap:34px}
.foot li{padding:4px 0}
.foot-brand .mk{width:24px;height:37px;margin-bottom:16px;display:block}
.foot-brand strong{color:#fff;font-size:1.06rem;display:block;letter-spacing:.01em}
.foot-brand span{display:block;font-size:.813rem;margin-top:3px}
.foot-tag{font-family:var(--mono);font-size:.688rem;letter-spacing:.13em;text-transform:uppercase;
          color:#5F809B;margin-top:14px}
.foot-b{margin-top:44px;padding-top:22px;
        display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;
        font-size:.813rem;color:#5F809B;border-top:1px solid #1D3651}

/* ========================== language switch ========================= */
html[lang="hi"] .nav>li>a,html[lang="te"] .nav>li>a,
html[lang="de"] .nav>li>a,html[lang="ar"] .nav>li>a{padding:10px 8px;font-size:.813rem;
  letter-spacing:-.008em}
html[lang="hi"] .top-in,html[lang="te"] .top-in,
html[lang="de"] .top-in,html[lang="ar"] .top-in{gap:10px}

.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}
.lang-switch{flex:none;margin-left:6px}
.lang-switch select{font-family:var(--mono);font-size:.75rem;letter-spacing:.02em;
          padding:8px 26px 8px 10px;border:1px solid var(--rule);background:#fff
          url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="6"><path d="M0 0 L5 6 L10 0" fill="none" stroke="%23566B7C" stroke-width="1.4"/></svg>')
          no-repeat right 9px center;appearance:none;-webkit-appearance:none;
          color:var(--navy);cursor:pointer;border-radius:2px;line-height:1}
.lang-switch select:hover{border-color:var(--blue)}
.lang-switch select:focus-visible{outline:3px solid var(--focus);outline-offset:1px}
/* Devanagari, Telugu and Arabic use combining marks and conjuncts that break
   apart under Latin-style letter-spacing/tracking — reset it everywhere for
   these three languages. German stays untouched (Latin script). */
html[lang="hi"] *, html[lang="te"] *, html[lang="ar"] *{letter-spacing:normal!important}
html[dir="rtl"] .hero-art{right:auto;left:0}
html[lang="hi"] body{font-family:"Noto Sans Devanagari",var(--sans)}
html[lang="te"] body{font-family:"Noto Sans Telugu",var(--sans)}
html[lang="ar"] body{font-family:"Noto Sans Arabic",var(--sans)}
/* Mono-styled elements (eyebrows, pills, table headers, the language select)
   use IBM Plex Mono, which has no Devanagari/Telugu/Arabic glyphs — without
   a script-aware fallback those strings drop to an arbitrary system font and
   render inconsistently (visible on the Arabic language selector). Keeping
   Plex Mono first preserves the intended look for Latin standards codes
   (HL7 FHIR, SNOMED CT) while the browser falls back per-character for the
   local script. */
html[lang="hi"]{--mono:"IBM Plex Mono","Noto Sans Devanagari",ui-monospace,monospace}
html[lang="te"]{--mono:"IBM Plex Mono","Noto Sans Telugu",ui-monospace,monospace}
html[lang="ar"]{--mono:"IBM Plex Mono","Noto Sans Arabic",ui-monospace,monospace}
html[lang="hi"] h1,html[lang="hi"] h2,html[lang="hi"] h3{font-family:"Noto Sans Devanagari",var(--sans)}
html[lang="te"] h1,html[lang="te"] h2,html[lang="te"] h3{font-family:"Noto Sans Telugu",var(--sans)}
html[lang="ar"] h1,html[lang="ar"] h2,html[lang="ar"] h3{font-family:"Noto Sans Arabic",var(--sans)}
/* RTL: flip icon-adjacent spacing and card accent borders so the reading eye still meets them first */
html[dir="rtl"] .card-l{border-left:none;border-right:2px solid var(--blue)}
html[dir="rtl"] .stmt{border-left:none;border-right:2px solid var(--teal);padding:6px 26px 6px 0}
html[dir="rtl"] .note{border-left:none;border-right:2px solid var(--grey-2)}
html[dir="rtl"] .rail div{border-left:none;border-right:2px solid var(--rule)}
html[dir="rtl"] .rail div[data-on]{border-right-color:var(--blue)}
html[dir="rtl"] .nav>li[data-on]>a::after{margin:6px -4px -12px}
html[dir="rtl"] .lang-switch select{background-position:left 9px center;padding:8px 10px 8px 26px}

/* ============================== trust bar ============================ */
.trust{border-top:1px solid rgba(255,255,255,.14);border-bottom:1px solid rgba(255,255,255,.14);
       background:#0D2137}
.trust .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px;padding:16px 28px}
.trust b{font-family:var(--mono);font-size:.688rem;letter-spacing:.12em;color:#6FC7D6;
         text-transform:uppercase;flex:none}
.trust span{font-family:var(--mono);font-size:.75rem;letter-spacing:.05em;color:#B9CBD9}
.trust span i{color:#3E5E78;font-style:normal;margin:0 12px}

/* ============================== acronym =============================== */
.acro{display:flex;align-items:stretch;gap:14px;flex-wrap:wrap;margin-top:8px}
.acro-word{display:flex;gap:8px}
.acro-tile{flex:1 1 84px;min-width:80px;border:1px solid var(--rule);border-left:2px solid var(--blue);
           padding:16px 14px;background:#fff}
.acro-tile.care{border-left-color:var(--teal)}
.acro-tile b{display:block;font-size:1.9rem;color:var(--navy);font-weight:600;line-height:1;
             letter-spacing:-.01em}
.acro-tile span{display:block;margin-top:10px;font-family:var(--mono);font-size:.656rem;
                letter-spacing:.05em;color:var(--grey);text-transform:uppercase;line-height:1.4}
.acro-sep{display:flex;align-items:center;font-size:1.3rem;color:var(--grey-2);padding:0 2px;
          font-weight:300}
.acro-unpack{margin-top:26px;max-width:760px}
.acro-unpack p{font-size:.938rem;color:var(--grey);margin-bottom:8px}
.acro-unpack b{color:var(--navy)}
@media (max-width:640px){
  .acro{flex-direction:column}
  .acro-word{flex-wrap:wrap}
  .acro-sep{display:none}
}

/* ============================ responsive =========================== */
@media (max-width:1080px){
  .g4{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(3,1fr)}
  .foot-g{grid-template-columns:1fr 1fr 1fr}
}
@media (max-width:900px){
  .burger{display:block}
  .nav{display:none;position:absolute;top:74px;left:0;right:0;background:#fff;
       border-bottom:1px solid var(--rule);flex-direction:column;align-items:stretch;
       padding:10px;gap:0;max-height:calc(100vh - 74px);overflow:auto;
       box-shadow:0 22px 44px -22px rgba(10,27,46,.3)}
  .nav[data-open]{display:flex}
  .nav>li>a{padding:13px 12px;border-bottom:1px solid var(--rule-2)}
  .nav>li[data-on]>a::after{display:none}
  .drop{position:static;opacity:1;visibility:visible;transform:none;border:0;
        border-left:2px solid var(--rule);box-shadow:none;margin:2px 0 10px 12px;padding:0}
  .drop a{padding:9px 12px}
  .top .btn{display:none}
  .nav-mobile-only{display:block}
  .nav-mobile-only>a{font-weight:600;color:var(--blue)}
  .g2,.g3,.split{grid-template-columns:1fr;gap:22px}
  .cols{grid-template-columns:1fr 1fr}
  .split{gap:34px}
  .sec{padding:56px 0}
  .hero-in,.hero-lg .hero-in{padding:60px 0 56px}
}
@media (max-width:760px){
  .fig-box{overflow-x:auto;padding:16px;-webkit-overflow-scrolling:touch}
  .fig-box svg{min-width:640px}
  .fig-hint{display:block}
  .hero-sup{font-size:.688rem;line-height:1.9}
  .hero-sup .sep{display:block;height:0;overflow:hidden}
}
@media (max-width:640px){
  body{font-size:16px}
  .wrap{padding:0 20px}
  .g4,.cols,.steps{grid-template-columns:1fr}
  .steps li{border-right:0;border-bottom:1px solid var(--rule-2);padding-right:0}
  .steps li:last-child{border-bottom:0}
  .foot-g{grid-template-columns:1fr 1fr}
  .form{grid-template-columns:1fr}
  .card{padding:22px}
  .fig-box{padding:18px}
}
@media print{
  .top,.burger,.crumb{position:static}
  .sec{page-break-inside:avoid}
}