/* ─────────────────────────────────────────────────────────────
   HappiMeds - Medicatiemodule-pagina
   Alles onder body[data-page="sdk"]. Dit bestand wordt alleen door
   medicatiemodule.html geladen, want geen andere pagina gebruikt er iets van.
   De attribuutwaarde "sdk" is bewust niet meegehernoemd: die staat in 223
   selectors en is nergens zichtbaar. Alleen de bestandsnamen zijn veranderd.
   ───────────────────────────────────────────────────────────── */
/* ── Medicatiemodule-pagina (medicatiemodule.html, body[data-page="sdk"]) ── */
  body[data-page="sdk"] section[id]{ scroll-margin-top: 92px; }/* ── HERO (sub-hero patroon; extra top-ruimte voor de subnav, extra bodem voor de telefoon) ── */

  
  body[data-page="sdk"][data-page="sdk"] .hero.sub{ min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; overflow: hidden; padding: 164px 0 0; }
  body[data-page="sdk"][data-page="sdk"] .hero.sub .breadcrumb{ flex-shrink: 0; padding-left: 12px; margin-bottom: 26px; }
  body[data-page="sdk"][data-page="sdk"] .hero.sub .hero-grid-wrap{ flex: 1; display: flex; flex-direction: column; justify-content: center; }
  body[data-page="sdk"] .hero.sub .trustbar{ margin-top: auto; padding-top: clamp(16px, 4vh, 88px); flex-shrink: 0; }/* Korte viewports: telefoon en tekstkolom meeschalen zodat hero + trustbar in 1 viewport passen */
  
  @media (min-width: 901px) and (max-height: 900px) {
    body[data-page="sdk"] .hero-grid .phone{ transform: rotate(4deg) scale(.85); margin: -41px auto; }
    body[data-page="sdk"] .hero-grid .hero-meta{ margin-top: 28px; }
  }
  @media (min-width: 901px) and (max-height: 780px) {
    body[data-page="sdk"] .hero-grid .phone{ transform: rotate(4deg) scale(.7); margin: -82px auto; }
    body[data-page="sdk"] .hero-grid h1{ font-size: clamp(28px, 3vw, 38px); }
    body[data-page="sdk"] .hero-grid .lede{ font-size: 19px; margin: 12px 0 20px; }
    body[data-page="sdk"] .hero-grid .hero-meta{ margin-top: 20px; gap: 16px 32px; }
  }
  @media (min-width: 901px) and (max-height: 660px) {
    body[data-page="sdk"][data-page="sdk"] .hero.sub{ padding-top: 156px; }
    body[data-page="sdk"][data-page="sdk"] .hero.sub .breadcrumb{ margin-bottom: 12px; }
    body[data-page="sdk"] .hero-grid .phone{ transform: rotate(4deg) scale(.42); margin: -155px auto; }
    body[data-page="sdk"] .hero-grid .hero-meta{ display: none; }
    body[data-page="sdk"] .hero.sub .trustbar{ padding-top: 0; }
  }
  body[data-page="sdk"] .hero-grid{ display: grid; grid-template-columns: 1.1fr .9fr; gap: 64px; align-items: center; margin-top: 8px; }
  body[data-page="sdk"] .hero-meta{ display: flex; gap: 28px 40px; margin-top: 48px; flex-wrap: wrap; }
  body[data-page="sdk"] .hero-meta div strong{ display: block; font-size: 20px; font-weight: 800; color: var(--navy); }
  body[data-page="sdk"] .hero-meta div span{ font-size: 13px; color: var(--body-c); }
  body[data-page="sdk"] .hero-meta div::before{ content: ""; display: block; width: 21px; height: 9px; border-radius: 100px; background: linear-gradient(90deg, var(--navy) 50%, var(--blue) 50%); margin-bottom: 8px; }/* Phone mockup */

  
  body[data-page="sdk"] .phone{
    width: 292px; margin: 0 auto; position: relative; z-index: 2;
    transform: rotate(4deg);
    filter: drop-shadow(0 44px 72px rgba(5,63,92,.30)) drop-shadow(0 14px 26px rgba(5,63,92,.14));
  }
  body[data-page="sdk"] .phone-frame{ display: block; width: 100%; height: auto; position: relative; z-index: 2; pointer-events: none; }
  body[data-page="sdk"] .phone-screen{
    position: absolute; left: 3.44%; top: 1.24%; width: 93.02%; height: 96.6%;
    background: white; border-radius: 18.68% / 9.15%; overflow: hidden; z-index: 1;
    display: flex; flex-direction: column;
  }
  body[data-page="sdk"] .phone-screen::after{
    content: ""; position: absolute; bottom: 1.3%; left: 50%; transform: translateX(-50%);
    width: 36%; height: 4px; border-radius: 100px; background: rgba(5,20,29,.3); z-index: 6;
  }
  body[data-page="sdk"] .p-status{
    display: flex; justify-content: space-between; align-items: center;
    padding: 15px 26px 2px; font-size: 13px; font-weight: 700; color: var(--navy);
  }
  body[data-page="sdk"] .p-status svg{ display: block; }
  body[data-page="sdk"] .app-header{ padding: 14px 20px 10px; display: flex; justify-content: space-between; align-items: center; }
  body[data-page="sdk"] .app-header b{ font-size: 16px; color: var(--navy); }
  body[data-page="sdk"] .app-avatar{ width: 28px; height: 28px; border-radius: 50%; background: var(--tint); display: flex; align-items: center; justify-content: center; font-size: 13px; }
  body[data-page="sdk"] .app-card{ margin: 8px 16px; background: var(--navy); color: white; border-radius: 16px; padding: 18px; }
  body[data-page="sdk"] .app-card small{ font-size: 11px; opacity: .75; letter-spacing: .06em; }
  body[data-page="sdk"] .app-card .app-h{ display: block; font-size: 17.5px; font-weight: 700; margin: 4px 0 12px; }
  body[data-page="sdk"] .app-card .greet{ font-size: 13px; color: rgba(255,255,255,.85); line-height: 1.55; }
  body[data-page="sdk"] .app-row{ margin: 10px 16px; background: var(--paper); border: 1px solid var(--line-blue); border-radius: 14px; padding: 13px 15px; display: flex; align-items: center; gap: 12px; position: relative; }
  body[data-page="sdk"] .app-row .med{ width: 34px; height: 34px; border-radius: 10px; background: var(--tint); display: flex; align-items: center; justify-content: center; font-size: 16px; }
  body[data-page="sdk"] .app-row div b{ display: block; font-size: 13px; color: var(--navy); }
  body[data-page="sdk"] .app-row div span{ font-size: 11px; color: var(--body-c); }
  body[data-page="sdk"] .app-row .status{ margin-left: auto; font-size: 11px; font-weight: 700; color: var(--navy); background: var(--tint); border-radius: 100px; padding: 4px 10px; }/* Phone screen cycle animation */

  
  body[data-page="sdk"] .pstage{ position: relative; flex: 1; }
  body[data-page="sdk"] .pstage.is-paused *, body[data-page="sdk"] .pstage.is-paused *::after, body[data-page="sdk"] .pstage.is-paused *::before{ animation-play-state: paused; }
  body[data-page="sdk"] .pscreen{
    position: absolute; inset: 0; display: flex; flex-direction: column;
    opacity: 0; background: white;
    animation: pcycle 14s cubic-bezier(.16,1,.3,1) infinite;
  }/* Naadloze overdracht: het inkomende scherm dekt het vorige af voordat dat verdwijnt */
  
  @keyframes pcycle {
    0% { opacity: 0; z-index: 3; transform: translateY(8px); }
    2% { opacity: 1; z-index: 3; transform: translateY(0); }
    25% { opacity: 1; z-index: 3; transform: translateY(0); }
    25.01% { opacity: 1; z-index: 1; }
    27.5% { opacity: 1; z-index: 1; }
    27.51% { opacity: 0; z-index: 1; }
    100% { opacity: 0; z-index: 1; }
  }
  /* De regel html{ scroll-behavior: auto } stond hier ook, terwijl hij niets met
     de SDK-pagina te maken heeft. Nu dit bestand alleen daar laadt, zou hij van de
     vier andere pagina's verdwijnen. Verplaatst naar 1-basis.css. */
  @media (prefers-reduced-motion: reduce) {
    body[data-page="sdk"] .pscreen{ animation: none; opacity: 0; transition: opacity .25s linear; }
    body[data-page="sdk"] .pscreen.rm-on{ opacity: 1; }
    body[data-page="sdk"] .order-btn{ animation: none; opacity: 1; transform: none; }
    body[data-page="sdk"] .tap, body[data-page="sdk"] .tap::after, body[data-page="sdk"] .tap2, body[data-page="sdk"] .tap2::after, body[data-page="sdk"] .tap3, body[data-page="sdk"] .tap3::after{ animation: none; opacity: 0; }
    body[data-page="sdk"] .check-dot, body[data-page="sdk"] .check-dot svg{ animation: none; }
  }
  body[data-page="sdk"] .order-btn{
    position: relative;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    margin: 14px 16px 0; padding: 13px 16px;
    background: var(--yellow); color: var(--navy);
    border-radius: 100px; font-size: 14.5px; font-weight: 800; letter-spacing: .01em;
    box-shadow: inset 0 -2px 0 rgba(5,63,92,.18), 0 8px 18px -6px rgba(247,173,25,.6);
    opacity: 0;
    animation: btnpop 14s cubic-bezier(.16,1,.3,1) infinite;
  }
  body[data-page="sdk"] .order-btn .nieuwtag{
    background: var(--navy); color: white;
    font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
    border-radius: 100px; padding: 3px 8px;
  }
  @keyframes btnpop {
    0%, 2% { opacity: 0; transform: translateY(14px) scale(.9); }
    4.5% { opacity: 1; transform: translateY(0) scale(1); }
    11% { transform: scale(1); }
    12.5% { transform: scale(.93); }
    14% { transform: scale(1); }
    60% { opacity: 1; transform: scale(1); }
    62%, 100% { opacity: 0; transform: scale(1); }
  }
  body[data-page="sdk"] .tap{
    position: absolute; right: 30px; top: 15px; z-index: 6;
    width: 30px; height: 30px; border-radius: 50%;
    background: rgba(255,255,255,.6); box-shadow: 0 3px 10px rgba(0,0,0,.28);
    opacity: 0; pointer-events: none;
    animation: tapmove 14s cubic-bezier(.16,1,.3,1) infinite; animation-delay: inherit;
  }
  body[data-page="sdk"] .tap::after{
    content: ""; position: absolute; inset: -5px; border-radius: 50%;
    border: 2px solid rgba(255,255,255,.95); opacity: 0;
    animation: tapring 14s infinite; animation-delay: inherit;
  }
  @keyframes tapmove {
    0%, 8.5% { opacity: 0; transform: translate(8px, 18px) scale(1); }
    10.5% { opacity: 1; transform: translate(0, 0) scale(1); }
    12.5% { opacity: 1; transform: translate(0, 0) scale(.75); }
    14% { opacity: 1; transform: translate(0, 0) scale(.95); }
    16%, 100% { opacity: 0; transform: translate(0, 0) scale(.95); }
  }
  @keyframes tapring {
    0%, 12% { opacity: 0; transform: scale(.5); }
    13% { opacity: .85; transform: scale(1.15); }
    15.5% { opacity: 0; transform: scale(2); }
    15.6%, 100% { opacity: 0; transform: scale(.5); }
  }
  body[data-page="sdk"] .tap2{
    position: absolute; right: 10px; top: 16px; z-index: 6;
    width: 30px; height: 30px; border-radius: 50%;
    background: rgba(5,63,92,.30); box-shadow: 0 3px 10px rgba(5,63,92,.30);
    opacity: 0; pointer-events: none;
    animation: tap2move 14s cubic-bezier(.16,1,.3,1) infinite; animation-delay: 7s;
  }
  body[data-page="sdk"] .tap2::after{
    content: ""; position: absolute; inset: -5px; border-radius: 50%;
    border: 2px solid rgba(5,63,92,.5); opacity: 0;
    animation: tap2ring 14s infinite; animation-delay: 7s;
  }
  @keyframes tap2move {
    0%, 5% { opacity: 0; transform: translate(8px, 16px) scale(1); }
    7% { opacity: 1; transform: translate(0, 0) scale(1); }
    9% { opacity: 1; transform: translate(0, 0) scale(.75); }
    10.5% { opacity: 1; transform: translate(0, 0) scale(1); }
    13% { opacity: 1; transform: translate(0, 94px) scale(1); }
    15% { opacity: 1; transform: translate(0, 94px) scale(.75); }
    16.5% { opacity: 1; transform: translate(0, 94px) scale(.95); }
    18.5%, 100% { opacity: 0; transform: translate(0, 94px) scale(.95); }
  }
  @keyframes tap2ring {
    0%, 8.5% { opacity: 0; transform: scale(.5); }
    9.5% { opacity: .85; transform: scale(1.2); }
    11.5% { opacity: 0; transform: scale(1.9); }
    11.6%, 14.5% { opacity: 0; transform: scale(.5); }
    15.5% { opacity: .85; transform: scale(1.2); }
    17.5% { opacity: 0; transform: scale(1.9); }
    17.6%, 100% { opacity: 0; transform: scale(.5); }
  }
  body[data-page="sdk"] .tap3{
    position: absolute; right: 22px; top: 50%; margin-top: -15px; z-index: 6;
    width: 30px; height: 30px; border-radius: 50%;
    background: rgba(255,255,255,.6); box-shadow: 0 3px 10px rgba(0,0,0,.28);
    opacity: 0; pointer-events: none;
    animation: tap3move 14s cubic-bezier(.16,1,.3,1) infinite; animation-delay: 3.5s;
  }
  body[data-page="sdk"] .tap3::after{
    content: ""; position: absolute; inset: -5px; border-radius: 50%;
    border: 2px solid rgba(255,255,255,.95); opacity: 0;
    animation: tap3ring 14s infinite; animation-delay: 3.5s;
  }
  @keyframes tap3move {
    0%, 8.5% { opacity: 0; transform: translate(10px, 20px) scale(1); }
    10.5% { opacity: 1; transform: translate(0, 0) scale(1); }
    12.5% { opacity: 1; transform: translate(0, 0) scale(.75); }
    14% { opacity: 1; transform: translate(0, 0) scale(.95); }
    16%, 100% { opacity: 0; transform: translate(0, 0) scale(.95); }
  }
  @keyframes tap3ring {
    0%, 12% { opacity: 0; transform: scale(.5); }
    13% { opacity: .85; transform: scale(1.15); }
    15.5% { opacity: 0; transform: scale(2); }
    15.6%, 100% { opacity: 0; transform: scale(.5); }
  }
  body[data-page="sdk"] .check-dot{
    margin-left: auto; flex-shrink: 0;
    width: 22px; height: 22px; border-radius: 50%;
    border: 2px solid #B9CFDA; background: white;
    display: flex; align-items: center; justify-content: center;
    animation: 14s cubic-bezier(.16,1,.3,1) infinite; animation-delay: 7s;
  }
  body[data-page="sdk"] .check-dot svg{ display: block; opacity: 0; transform: scale(.4); animation: 14s cubic-bezier(.16,1,.3,1) infinite; animation-delay: 7s; }
  body[data-page="sdk"] .fill-1{ animation-name: dotfill1; }
  body[data-page="sdk"] .fill-1 svg{ animation-name: check1; }
  body[data-page="sdk"] .fill-2{ animation-name: dotfill2; }
  body[data-page="sdk"] .fill-2 svg{ animation-name: check2; }
  @keyframes dotfill1 {
    0%, 8.9% { background: white; border-color: #B9CFDA; }
    10%, 100% { background: var(--yellow); border-color: var(--yellow); }
  }
  @keyframes check1 {
    0%, 8.9% { opacity: 0; transform: scale(.4); }
    10.5%, 100% { opacity: 1; transform: scale(1); }
  }
  @keyframes dotfill2 {
    0%, 14.9% { background: white; border-color: #B9CFDA; }
    16%, 100% { background: var(--yellow); border-color: var(--yellow); }
  }
  @keyframes check2 {
    0%, 14.9% { opacity: 0; transform: scale(.4); }
    16.5%, 100% { opacity: 1; transform: scale(1); }
  }
  body[data-page="sdk"] .digid-panel{ margin: 14px 16px; border: 1px solid var(--line-blue); border-radius: 16px; padding: 16px 16px 18px; text-align: center; }
  body[data-page="sdk"] .digid-illu{ display: block; width: 100%; height: auto; border-radius: 12px; }
  body[data-page="sdk"] .digid-panel p{ font-size: 13px; color: var(--body-c); margin: 12px 0 14px; }
  body[data-page="sdk"] .digid-btn{
    position: relative; display: inline-flex; align-items: center; gap: 8px;
    background: #1E3F6E; color: white; border-radius: 100px;
    padding: 8px 18px; font-size: 13px; font-weight: 700;
  }
  body[data-page="sdk"] .digid-btn img{ width: 19px; height: 19px; border-radius: 4px; display: block; }
  body[data-page="sdk"] .thanks-wrap{ flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 0 24px; }
  body[data-page="sdk"] .thanks-wrap .pharmacy{ display: block; margin-bottom: 16px; }
  body[data-page="sdk"] .thanks-wrap .app-h{ display: block; font-size: 17.5px; font-weight: 700; color: var(--navy); margin-bottom: 6px; }
  body[data-page="sdk"] .thanks-wrap p{ font-size: 13px; color: var(--body-c); }/* Trust bar: full-bleed strip zoals de partnerstrip op Home */

  
  body[data-page="sdk"] .trustbar{ padding-bottom: 0; width: 100%; flex-shrink: 0; }
  body[data-page="sdk"] .trustcard{ background: linear-gradient(180deg, rgba(255,255,255,.82), rgba(255,255,255,.62)); border-top: 1px solid var(--line); }
  body[data-page="sdk"] .trustcard-in{ max-width: 1280px; margin: 0 auto; padding: 28px 40px; display: flex; align-items: center; justify-content: flex-start; gap: 16px 40px; flex-wrap: wrap; text-align: left; }
  body[data-page="sdk"] .trustcard span{ font-size: 13px; font-weight: 800; color: var(--blue-text); letter-spacing: .08em; text-transform: uppercase; }
  body[data-page="sdk"] .trustcard em{ font-style: normal; font-size: 16px; font-weight: 800; color: var(--navy); display: inline-flex; align-items: center; gap: 9px; }
  body[data-page="sdk"] .trustcard em svg{ flex-shrink: 0; color: var(--blue-text); transition: transform .25s cubic-bezier(.22,1,.36,1); }
  body[data-page="sdk"] .trustcard em:hover svg{ transform: scale(1.15); }/* Compacte trustbar op korte viewports (na de basisregels, anders verliezen ze de cascade) */
  
  @media (min-width: 901px) and (max-height: 780px) {
    body[data-page="sdk"][data-page="sdk"] .trustcard-in{ padding: 15px 40px; gap: 12px 30px; }
  }
  @media (min-width: 901px) and (max-height: 660px) {
    body[data-page="sdk"][data-page="sdk"] .trustcard-in{ padding: 11px 32px; gap: 10px 22px; flex-wrap: nowrap; }
    body[data-page="sdk"][data-page="sdk"] .trustcard span{ font-size: 12px; letter-spacing: .06em; }
    body[data-page="sdk"][data-page="sdk"] .trustcard em{ font-size: 13px; gap: 7px; white-space: nowrap; }
    body[data-page="sdk"][data-page="sdk"] .trustcard em svg{ width: 15px; height: 15px; }
  }
  @media (prefers-reduced-motion: no-preference) {
    body[data-page="sdk"] .trustcard span, body[data-page="sdk"] .trustcard em{ animation: tc-in .5s cubic-bezier(.22,1,.36,1) both; }
    body[data-page="sdk"] .trustcard em:nth-of-type(1){ animation-delay: .08s; }
    body[data-page="sdk"] .trustcard em:nth-of-type(2){ animation-delay: .16s; }
    body[data-page="sdk"] .trustcard em:nth-of-type(3){ animation-delay: .24s; }
  }
  @keyframes tc-in { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }/* ── FEATURES ── */

  
  body[data-page="sdk"] .features{ padding: 96px 0; }
  body[data-page="sdk"] .feat-grid{
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 44px 40px; margin-top: 56px;
  }
  body[data-page="sdk"] .feat{ position: relative; padding: 0; display: grid; grid-template-columns: 46px minmax(0, 1fr); column-gap: 14px; align-items: center; align-content: start; }
  body[data-page="sdk"] .feat ul{ grid-column: 1 / -1; }
  body[data-page="sdk"] .feat .num{
    transition: background .2s, color .2s, box-shadow .2s;
    display: inline-flex; align-items: center; justify-content: center;
    width: 46px; height: 46px; border-radius: 13px;
    background: var(--tint); color: var(--blue-text);
  }
  body[data-page="sdk"] .feat:hover .num{ background: var(--navy); color: #fff; box-shadow: inset 0 0 0 1px var(--navy); }
  body[data-page="sdk"] .feat h3{ font-size: 17.5px; font-weight: 800; margin: 0; color: var(--navy); letter-spacing: -0.01em; }
  body[data-page="sdk"] .feat ul{ list-style: none; display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
  body[data-page="sdk"] .feat li{
    position: relative; padding-left: 18px;
    font-size: 15px; color: var(--body-c); line-height: 1.6;
  }
  body[data-page="sdk"] .feat li::before{
    content: ""; position: absolute; left: 2px; top: 8px;
    width: 5px; height: 5px; border-radius: 50%;
    background: var(--blue);
  }/* ── JOURNEY ── */

  
  body[data-page="sdk"] .journey{ padding: 96px 0; background: var(--navy); color: white; background-image: var(--dots-dark); background-size: 23px 23px; }
  body[data-page="sdk"] .journey .kicker{ color: var(--blue-on-dark); }
  body[data-page="sdk"] .journey .kicker::before{ background: linear-gradient(90deg, rgba(255,255,255,.95) 50%, var(--blue) 50%); }
  body[data-page="sdk"] .journey .title{ color: white; }
  body[data-page="sdk"] .journey .lede{ color: rgba(255,255,255,.62); }
  body[data-page="sdk"] .journey-flow{ display: grid; grid-template-columns: 300px 1fr; gap: 56px; margin-top: 60px; align-items: start; }
  body[data-page="sdk"] .j-steps{ display: flex; flex-direction: column; }
  body[data-page="sdk"] .j-step{
    display: flex; gap: 16px; align-items: flex-start; text-align: left;
    background: none; border: none; cursor: pointer; font-family: inherit;
    padding: 18px 20px; border-radius: 14px; transition: background .2s;
    color: white; position: relative;
  }
  body[data-page="sdk"] .j-step:hover{ background: rgba(255,255,255,.05); }
  body[data-page="sdk"] .j-step.active{ background: rgba(255,255,255,.09); }
  body[data-page="sdk"] .j-step .jnum{
    font-family: var(--font-mono); font-size: 13px;
    width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
    border: 1.5px dashed rgba(255,255,255,.35);
    display: flex; align-items: center; justify-content: center;
    transition: all .2s;
  }
  body[data-page="sdk"] .j-step.active .jnum{ background: var(--yellow); border: 1.5px solid var(--yellow); color: var(--navy); font-weight: 700; }
  body[data-page="sdk"] .j-step b{ font-size: 17px; display: block; }
  body[data-page="sdk"] .j-step span{ font-size: 13px; color: rgba(255,255,255,.66); }
  body[data-page="sdk"] .j-detail{
    background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1);
    border-radius: var(--radius-lg); padding: 44px; min-height: 380px;
    display: flex; flex-direction: column; justify-content: center;
  }
  body[data-page="sdk"] .j-detail .jbig{ font-family: var(--font-mono); font-size: 13px; color: var(--yellow); margin-bottom: 14px; }
  body[data-page="sdk"] .j-detail .jbig, body[data-page="sdk"] .j-detail h3, body[data-page="sdk"] .j-detail p{ transition: opacity .22s cubic-bezier(.16,1,.3,1), transform .22s cubic-bezier(.16,1,.3,1); }
  body[data-page="sdk"] .j-detail.swap .jbig, body[data-page="sdk"] .j-detail.swap h3, body[data-page="sdk"] .j-detail.swap p{ opacity: 0; transform: translateY(6px); }
  @media (prefers-reduced-motion: reduce) { body[data-page="sdk"] .j-detail.swap .jbig, body[data-page="sdk"] .j-detail.swap h3, body[data-page="sdk"] .j-detail.swap p{ transform: none; } }
  body[data-page="sdk"] .journey :focus-visible{ outline-color: var(--blue-on-dark); }
  body[data-page="sdk"] .j-detail h3{ font-size: 30px; font-weight: 800; letter-spacing: -.02em; margin-bottom: 16px; }
  body[data-page="sdk"] .j-detail p{ font-size: 16px; color: rgba(255,255,255,.72); line-height: 1.75; max-width: 560px; }/* ── ARCHITECTURE ── */

  
  body[data-page="sdk"] .arch{ padding: 96px 0; }
  body[data-page="sdk"] .arch-chain{
    margin-top: 60px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 40px; align-items: start;
  }
  /* Punt Ron (2026-08-17): deze vier kaarten toonden alleen hun tag, kop en
     vakterm; de drie regels die uitleggen wat de schakel doet zaten achter
     "Klik voor details". Nu staan ze open. De kaart is daarmee geen knop meer,
     dus cursor, hover-lift en de .open-toestand zijn weg: er valt niets te
     klikken, en dan hoort hij er ook niet klikbaar uit te zien.
     Vervolg: nu er niets meer uitklapt, is ook het kader weg. Het zijn vier
     kolommen op papier, zoals de features-rij hierboven. De keten wordt nu
     gedragen door het huismotief: een gestippelde rail met ronde knooppunten
     (::before is het knooppunt, ::after het lijnstuk naar de volgende schakel).
     Daarmee zijn de losse pijltjes tussen de kaarten vervallen. */
  body[data-page="sdk"] .arch-node{ position: relative; padding-top: 40px; }
  body[data-page="sdk"] .arch-node::before{
    content: ""; position: absolute; left: 0; top: 0;
    width: 18px; height: 18px; border-radius: 50%;
    background: #fff; border: 1.5px solid var(--rail-blue);
    box-shadow: 0 8px 16px -12px rgba(5,63,92,.55);
  }
  body[data-page="sdk"] .arch-node:not(:last-child)::after{
    content: ""; position: absolute; left: 26px; right: -34px; top: 8px;
    border-top: 2px dashed var(--rail-blue);
  }
  body[data-page="sdk"] .arch-node .tag{
    display: inline-block; font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
    padding: 4px 10px; border-radius: 100px; margin-bottom: 16px;
  }
  /* Kleur per schakel; stond eerst als inline style in medicatiemodule-app.js. */
  body[data-page="sdk"] .arch-node .tag-client{ background: var(--tint); color: var(--teal-deep); }
  body[data-page="sdk"] .arch-node .tag-auth{ background: var(--tint-deep); color: var(--navy); }
  body[data-page="sdk"] .arch-node .tag-middleware{ background: var(--amber-tint); color: var(--amber-ink); }
  body[data-page="sdk"] .arch-node .tag-apotheek{ background: #EEF1EF; color: var(--body-c); }
  body[data-page="sdk"] .arch-node h3{ font-size: 17.5px; font-weight: 800; margin-bottom: 4px; color: var(--navy); }
  body[data-page="sdk"] .arch-node .sub{ font-size: 13px; color: var(--muted); font-family: var(--font-mono); }
  body[data-page="sdk"] .arch-node ul{ list-style: none; display: flex; flex-direction: column; gap: 9px; margin-top: 18px; }
  body[data-page="sdk"] .arch-node ul li{ font-size: 15px; color: var(--body-c); padding-left: 16px; position: relative; }
  body[data-page="sdk"] .arch-node ul li::before{ content: "·"; position: absolute; left: 0; color: var(--blue); font-weight: 800; }
  body[data-page="sdk"] .stateless{
    margin-top: 56px; border-radius: var(--radius); border: 1.5px dashed #9CC3D4;
    background: var(--tint); padding: 36px 40px;
    display: grid; grid-template-columns: auto 1fr; gap: 28px; align-items: center;
  }
  body[data-page="sdk"] .stateless .icon{
    width: 60px; height: 60px; border-radius: 16px; background: var(--navy); color: white;
    display: flex; align-items: center; justify-content: center;
  }
  body[data-page="sdk"] .stateless h3{ font-size: 20px; font-weight: 800; margin-bottom: 6px; color: var(--navy); }
  body[data-page="sdk"] .stateless p{ font-size: 16px; color: var(--body-c); max-width: 720px; }
  body[data-page="sdk"] .stateless strong{ color: var(--navy); }/* ── SECURITY ── */

  
  body[data-page="sdk"] .security{ padding: 96px 0; background: white; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  body[data-page="sdk"] .sec-grid{ display: grid; grid-template-columns: .85fr 1.15fr; gap: 72px; align-items: start; }
  body[data-page="sdk"] .sec-list{ display: flex; flex-direction: column; margin-top: 8px; }
  body[data-page="sdk"] .sec-item{ border-bottom: 1px solid var(--line); }
  body[data-page="sdk"] .sec-item:first-child{ border-top: 1px solid var(--line); }
  body[data-page="sdk"] .sec-item button{
    width: 100%; background: none; border: none; font-family: inherit; cursor: pointer;
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 20px 4px; font-size: 16px; font-weight: 700; color: var(--navy); text-align: left;
    transition: color .2s;
  }
  body[data-page="sdk"] .sec-item button:hover{ color: var(--blue-text); }
  body[data-page="sdk"] .sec-item button .chev{ transition: transform .25s; color: var(--blue); flex-shrink: 0; }
  body[data-page="sdk"] .sec-item.open button .chev{ transform: rotate(90deg); }
  /* Openklappen via grid-template-rows in plaats van max-height, zoals de FAQ in
     5-faq-cta-footer.css. Daarmee vervalt de bovengrens van 320px die een langer
     antwoord stil zou afknippen. De padding hoort op de <p> binnen .body-in: een
     grid-item van 0fr houdt zijn eigen padding en zou dicht niet op 0 uitkomen.
     visibility houdt de dichte tekst buiten schermlezer en tabvolgorde. */
  body[data-page="sdk"] .sec-item .body{ display: grid; grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows .3s ease, visibility 0s .3s; }
  body[data-page="sdk"] .sec-item.open .body{ grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows .3s ease, visibility 0s; }
  body[data-page="sdk"] .sec-item .body > .body-in{ overflow: hidden; min-height: 0; }
  body[data-page="sdk"] .sec-item .body p{ font-size: 15px; color: var(--body-c); line-height: 1.7; padding: 0 4px 22px; max-width: 520px; }
  body[data-page="sdk"] .sec-partners{ display: flex; gap: 12px; margin-top: 32px; flex-wrap: wrap; }
  /* Deze pillen zagen eruit als knoppen maar deden niets. Ze verwijzen nu naar
     de bron zelf, het normenkader voorop. Zie punt 7 van 2026-08-24. */
  body[data-page="sdk"] .sec-partners a{
    font-size: 13px; font-weight: 700; color: var(--navy); background: var(--tint);
    border-radius: 100px; padding: 8px 18px; text-decoration: none;
    transition: background .2s, color .2s;
    /* Waren 36,8px hoog; de eigen norm voor aanraakschermen is 44. */
    display: inline-flex; align-items: center; gap: 6px; min-height: 44px;
  }
  body[data-page="sdk"] .sec-partners a:hover{ background: var(--navy); color: #fff; }
  /* Deze vijf links openen in een nieuw venster. Dat stond alleen in de
     .sr-only-tekst, dus alleen schermlezers wisten het. Het pijltje staat als
     aria-hidden in de HTML in plaats van als ::after-content, zodat het niet
     alsnog wordt voorgelezen naast die tekst. */
  body[data-page="sdk"] .sec-partners .ext{ font-size: 11px; line-height: 1; opacity: .7; }/* ── IMPLEMENTATION ── */

  
  /* Wit vlak met haarlijnen, hetzelfde patroon als .security. Zonder dat liepen
     route, implementatie en CTA als één vlak stuk van ruim 2000px door. */
  body[data-page="sdk"] .impl{ padding: 96px 0; background: #fff; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  body[data-page="sdk"] .impl-grid{ display: grid; grid-template-columns: .9fr 1.1fr; gap: 64px; margin-top: 56px; align-items: start; }
  body[data-page="sdk"] .impl-steps{ counter-reset: step; display: flex; flex-direction: column; }
  body[data-page="sdk"] .impl-step{ counter-increment: step; display: flex; gap: 18px; padding: 18px 0; }
  body[data-page="sdk"] .impl-step + .impl-step{ border-top: 1px dashed var(--line-blue); }
  body[data-page="sdk"] .impl-step code{ font-family: var(--font-mono); font-size: 13px; background: var(--tint); padding: 2px 7px; border-radius: 5px; color: var(--teal-deep); }
  body[data-page="sdk"] .impl-step::before{
    content: counter(step, decimal-leading-zero);
    font-family: var(--font-mono); font-size: 13px; font-weight: 500;
    color: var(--orange-ink); padding-top: 2px; flex-shrink: 0;
  }
  body[data-page="sdk"] .impl-step b{ display: block; font-size: 17px; margin-bottom: 4px; color: var(--navy); }
  body[data-page="sdk"] .impl-step p{ font-size: 15px; color: var(--body-c); line-height: 1.65; }
  body[data-page="sdk"] .impl-note{ margin-top: 44px; font-size: 15px; color: var(--body-c); max-width: 68ch; }
  body[data-page="sdk"] .code-window{ background: var(--navy); border-radius: var(--radius); overflow: hidden; box-shadow: 0 20px 44px -16px rgba(5,63,92,.22); }
  /* De balk boven het codeblok is niet meer hetzelfde element als de tablist:
     de kopieerknop stond binnen role="tablist" zonder tab te zijn. De rand en de
     binnenmarge zitten nu op .code-bar, de tablist eromheen is kaal. */
  body[data-page="sdk"] .code-bar{ display: flex; align-items: center; border-bottom: 1px solid rgba(255,255,255,.08); padding: 0 10px; }
  body[data-page="sdk"] .code-tabs{ display: flex; align-items: center; }
  body[data-page="sdk"] .code-tab{
    background: none; border: none; font-family: inherit; cursor: pointer;
    font-size: 13px; font-weight: 600; color: rgba(255,255,255,.62);
    padding: 12px 15px; border-bottom: 2px solid transparent; margin-bottom: -1px;
    transition: color .15s;
    /* 42px was net onder de eigen norm van 44 voor aanraakschermen. */
    display: inline-flex; align-items: center; min-height: 44px;
  }
  body[data-page="sdk"] .code-tab:hover{ color: rgba(255,255,255,.95); background: rgba(255,255,255,.07); }
  body[data-page="sdk"] .code-tab{ border-radius: 8px 8px 0 0; }
  body[data-page="sdk"] .code-tab.active{ color: white; border-bottom-color: var(--yellow); }
  body[data-page="sdk"] .code-copy{
    margin-left: auto; background: rgba(255,255,255,.07); border: none; color: rgba(255,255,255,.72);
    font-family: inherit; font-size: 12px; font-weight: 600; border-radius: 6px; padding: 4px 10px; cursor: pointer;
    transition: background .15s, color .15s;
  }
  body[data-page="sdk"] .code-copy:hover{ background: rgba(255,255,255,.14); color: white; }
  body[data-page="sdk"] .code-copy.copied{ background: rgba(247,173,25,.22); color: var(--yellow); animation: codeCopyPulse .4s cubic-bezier(.22,1,.36,1); }
  /* Mislukt kopiëren meldt zich in dezelfde vorm als een gelukte poging, maar
     zonder de puls: dat is een bevestiging en die is hier niet op zijn plaats. */
  body[data-page="sdk"] .code-copy.copy-failed{ background: rgba(255,255,255,.14); color: rgba(255,255,255,.95); }
  @keyframes codeCopyPulse { 0%,100%{transform:scale(1)} 45%{transform:scale(1.08)} }
  body[data-page="sdk"] .code-body{
    font-family: var(--font-mono); font-size: 12px; line-height: 1.72;
    padding: 20px 22px; color: #CBE6F1; overflow-x: auto; white-space: pre; margin: 0;
    transition: opacity .18s cubic-bezier(.16,1,.3,1);
  }
  body[data-page="sdk"] .code-body.swap{ opacity: 0; }
  body[data-page="sdk"] .code-body .kw{ color: var(--yellow); }
  body[data-page="sdk"] .code-body .str{ color: #9FDCA9; }
  body[data-page="sdk"] .code-body .cm{ color: rgba(255,255,255,.55); }
  body[data-page="sdk"] .code-body .ty{ color: #86CBE6; }
  body[data-page="sdk"] .sysreq{ display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin-top: 18px; }
  body[data-page="sdk"] .sysreq-tile{ display: flex; align-items: center; gap: 12px; padding: 8px 0; }
  body[data-page="sdk"] .sysreq-tile .sr-icn{ width: 38px; height: 38px; border-radius: 11px; background: var(--tint); color: var(--blue-text); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
  body[data-page="sdk"] .sysreq-tile b{ display: block; font-size: 14.5px; font-weight: 800; color: var(--navy); letter-spacing: -.01em; }
  body[data-page="sdk"] .sysreq-tile span:not(.sr-icn){ font-size: 12px; color: var(--body-c); font-family: var(--font-mono); }
  @media (max-width: 900px) { body[data-page="sdk"] .sysreq{ grid-template-columns: 1fr; } }/* ── ROADMAP ── */

  
  /* Geen border-top: .security hierboven sluit al met een haarlijn af en twee
     lijnen tegen elkaar lezen als één dikkere. */
  body[data-page="sdk"] .roadmap{ padding: 96px 0; background: linear-gradient(100deg, #F4F9FB 0%, #FBFCFA 46%, #FAF9F5 100%); }
  body[data-page="sdk"] .rm-track{ margin-top: 68px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 48px; position: relative; }
  body[data-page="sdk"] .rm-track::before{
    content: ""; position: absolute; left: 7px; right: 7px; top: 8px; height: 2px;
    background: linear-gradient(90deg, var(--navy) 0%, var(--blue) 44%, var(--yellow) 78%, #E6C99A 100%);
    -webkit-mask-image: repeating-linear-gradient(90deg, #000 0 7px, transparent 7px 16px);
    mask-image: repeating-linear-gradient(90deg, #000 0 7px, transparent 7px 16px);
    opacity: .5;
  }
  body[data-page="sdk"] .rm-phase{ position: relative; padding: 0 8px 0 0; }
  body[data-page="sdk"] .rm-node{
    width: 16px; height: 16px; border-radius: 50%; margin-bottom: 26px;
    background: #fff; border: 3.5px solid var(--muted); position: relative; z-index: 1;
  }
  body[data-page="sdk"] .rm-phase.live .rm-node{ border-color: var(--navy); background: var(--blue); box-shadow: 0 0 0 6px rgba(66,158,189,.16); }
  body[data-page="sdk"] .rm-phase.soon .rm-node{ border-color: var(--blue); box-shadow: 0 0 0 6px rgba(66,158,189,.12); }
  body[data-page="sdk"] .rm-phase.later .rm-node{ border-color: var(--yellow); box-shadow: 0 0 0 6px rgba(247,173,25,.14); }
  body[data-page="sdk"] .rm-head{ display: flex; flex-direction: column; gap: 7px; align-items: flex-start; margin-bottom: 22px; }
  body[data-page="sdk"] .rm-head h3{ font-size: 19px; font-weight: 800; letter-spacing: -.01em; color: var(--navy); }
  /* De .rm-tag-pillen ("Live", "In ontwikkeling", "Verkenning") zijn op
     2026-08-24 vervallen: de fase staat nu voluit in de kolomkop. */
  body[data-page="sdk"] .rm-items{ display: flex; flex-direction: column; gap: 12px; }
  body[data-page="sdk"] .rm-items span{ position: relative; padding-left: 19px; font-size: 14.5px; font-weight: 600; line-height: 1.5; color: var(--ink); text-wrap: pretty; }
  body[data-page="sdk"] .rm-items span::before{ content: ""; position: absolute; left: 0; top: .5em; width: 7px; height: 7px; border-radius: 50%; }
  body[data-page="sdk"] .rm-phase.live .rm-items span::before{ background: var(--navy); }
  body[data-page="sdk"] .rm-phase.soon .rm-items span::before{ background: var(--blue); }
  body[data-page="sdk"] .rm-phase.later .rm-items span::before{ background: var(--yellow); }
  body[data-page="sdk"] .rm-phase.later .rm-items span{ color: var(--body-c); }/* ── ROUTE NAAR PRODUCTIE ── */

  /* Eigen klassenaam, geen .route: die bestaat al als blauw paneel in
     3-secties.css en zou hier zijn achtergrond, rand en afronding meegeven. */
  /* Haarlijn onder in plaats van boven: hierboven staat de donkere gebruikersreis,
     die scheidt zichzelf al. De overgang die hulp nodig heeft is die naar de
     architectuursectie eronder, waar lichtblauw en papierwit dicht bij elkaar liggen. */
  body[data-page="sdk"] .mm-route{ padding: 96px 0; background: var(--tint); border-bottom: 1px solid var(--line-blue); }
  /* Het statusblok staat vóór de twee kolommen en zegt in drie zinnen waar de
     module staat. Iets groter dan de lopende tekst eronder, met een amberen
     streep links, zodat het als samenvatting leest en niet als eerste alinea. */
  body[data-page="sdk"] .route-status{
    margin-top: 22px; max-width: 74ch; text-wrap: pretty;
    font-size: 17px; line-height: 1.7; color: var(--body-c);
    border-left: 3px solid var(--yellow); padding-left: 18px;
  }
  body[data-page="sdk"] .route-status strong{ color: var(--navy); }
  body[data-page="sdk"] .route-grid{ display: grid; grid-template-columns: 1.15fr .85fr; gap: 64px; margin-top: 38px; align-items: start; }
  body[data-page="sdk"] .route-txt p{ font-size: 16px; line-height: 1.75; color: var(--body-c); max-width: 60ch; text-wrap: pretty; }
  body[data-page="sdk"] .route-txt p + p{ margin-top: 18px; }
  body[data-page="sdk"] .route-txt a{ color: var(--blue-text); text-underline-offset: 3px; }
  /* De flow: drie mijlpalen op de gestippelde rail van het huismotief, verticaal
     zodat hij niet leest als een tweede roadmap. De middelste knoop pulseert
     zacht; dat zegt "hier wordt aan gewerkt" zonder iets live te noemen. */
  body[data-page="sdk"] .route-flow{ list-style: none; }
  body[data-page="sdk"] .route-flow li{ position: relative; display: flex; gap: 16px; padding-bottom: 26px; }
  body[data-page="sdk"] .route-flow li:last-child{ padding-bottom: 0; }
  body[data-page="sdk"] .route-flow li:not(:last-child)::before{
    content: ""; position: absolute; left: 8px; top: 24px; bottom: 2px;
    border-left: 2px dashed var(--rail-blue);
  }
  body[data-page="sdk"] .rf-dot{
    position: relative; flex-shrink: 0; width: 18px; height: 18px; margin-top: 2px;
    border-radius: 50%; background: #fff; border: 2px solid var(--rail-blue);
  }
  body[data-page="sdk"] .rf.done .rf-dot{ background: var(--navy); border-color: var(--navy); }
  body[data-page="sdk"] .rf.busy .rf-dot{ border-color: var(--yellow); }
  body[data-page="sdk"] .rf.busy .rf-dot::after{
    content: ""; position: absolute; inset: -6px; border-radius: 50%;
    border: 2px solid var(--yellow); opacity: 0;
    animation: rf-pulse 2.6s cubic-bezier(.22,1,.36,1) infinite;
  }
  @keyframes rf-pulse {
    0% { opacity: .6; transform: scale(.72); }
    70% { opacity: 0; transform: scale(1.3); }
    100% { opacity: 0; transform: scale(1.3); }
  }
  @media (prefers-reduced-motion: reduce) {
    body[data-page="sdk"] .rf.busy .rf-dot::after{ animation: none; opacity: .5; transform: none; }
  }
  body[data-page="sdk"] .route-flow b{ display: block; font-size: 15.5px; font-weight: 800; color: var(--navy); }
  body[data-page="sdk"] .route-flow div span{ font-size: 13.5px; color: var(--body-c); line-height: 1.6; }/* ── CTA ── */

  
  body[data-page="sdk"] .cta{ padding: 96px 0 104px; }

  @media (max-width: 900px) {
    /* .stateless hoorde in deze rij thuis maar stond er niet in: het blok bleef
       op een telefoon tweekolommig, met een icoon van 60px naast een tekstkolom
       van 176px. Dat is het kernargument van de pagina, dus juist die tekst las
       het slechtst. Nu icoon boven, tekst over de volle breedte. */
    body[data-page="sdk"] .hero-grid, body[data-page="sdk"] .journey-flow, body[data-page="sdk"] .sec-grid, body[data-page="sdk"] .impl-grid, body[data-page="sdk"] .route-grid, body[data-page="sdk"] .stateless{ grid-template-columns: 1fr; }
    body[data-page="sdk"] .route-grid{ gap: 34px; }
    body[data-page="sdk"] .stateless{ gap: 20px; padding: 28px 24px; }
    body[data-page="sdk"] .feat-grid{ grid-template-columns: 1fr; }
    /* De featurekaarten kregen op mobiel als enig tekstblok een eigen kader,
       tegen de eigen regel in dat tekstblokken geen kader krijgen. De rijafstand
       van 44px uit .feat-grid scheidt ze nu. */
    /* Kolommen mogen smaller dan hun inhoud: het codeblok scrolt dan zelf
       (overflow-x: auto) in plaats van de pagina breder te maken. */
    body[data-page="sdk"] .impl-grid > *, body[data-page="sdk"] .impl-step > div{ min-width: 0; }
    body[data-page="sdk"] .impl-step b{ overflow-wrap: anywhere; }
    /* Onder 900px staan de vier schakels onder elkaar; de rail kantelt mee en
       loopt als verticale route langs de linkerkant. */
    body[data-page="sdk"] .arch-chain{ grid-template-columns: 1fr; gap: 30px; }
    body[data-page="sdk"] .arch-node{ padding-top: 0; padding-left: 36px; }
    body[data-page="sdk"] .arch-node::before{ top: 3px; }
    body[data-page="sdk"] .arch-node:not(:last-child)::after{
      left: 8px; right: auto; top: 29px; bottom: -28px;
      border-top: 0; border-left: 2px dashed var(--rail-blue);
    }
    body[data-page="sdk"] .rm-track{ grid-template-columns: 1fr; gap: 44px; }
    body[data-page="sdk"] .rm-track::before{ left: 7px; right: auto; top: 8px; bottom: 8px; width: 2px; height: auto;
      background: linear-gradient(180deg, var(--navy) 0%, var(--blue) 44%, var(--yellow) 78%, #E6C99A 100%);
      -webkit-mask-image: repeating-linear-gradient(180deg, #000 0 7px, transparent 7px 16px);
      mask-image: repeating-linear-gradient(180deg, #000 0 7px, transparent 7px 16px); }
    body[data-page="sdk"] .rm-phase{ padding-left: 34px; }
    body[data-page="sdk"] .rm-phase .rm-node{ position: absolute; left: 0; top: 0; margin-bottom: 0; }
    body[data-page="sdk"][data-page="sdk"] .hero.sub{ padding: 168px 0 0; min-height: 0; display: block; }
    body[data-page="sdk"] .hero.sub .trustbar{ margin-top: 56px; padding-top: 0; }
    body[data-page="sdk"] .phone{ transform: none; margin-top: 12px; }
    body[data-page="sdk"] .j-detail{ padding: 30px 24px; min-height: 0; }
    body[data-page="sdk"] .features, body[data-page="sdk"] .journey, body[data-page="sdk"] .arch, body[data-page="sdk"] .security, body[data-page="sdk"] .impl, body[data-page="sdk"] .roadmap, body[data-page="sdk"] .mm-route{ padding: 64px 0; }
    body[data-page="sdk"] .cta{ padding: 64px 0 72px; }
  }
  @media (pointer: coarse) {
    body[data-page="sdk"] .code-copy{ padding: 12px 16px; min-height: 44px; }
  }