/* ─────────────────────────────────────────────────────────────
   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: 11px; 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; }
  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: 18px 0 10px; color: var(--navy); letter-spacing: -0.01em; }
  body[data-page="sdk"] .feat ul{ list-style: none; display: flex; flex-direction: column; gap: 8px; }
  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: #93CBDE; }
  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: #93CBDE; }
  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: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
    padding: 4px 10px; border-radius: 100px; margin-bottom: 16px;
  }
  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;
  }
  body[data-page="sdk"] .sec-partners a:hover{ background: var(--navy); color: #fff; }/* ── 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(--teal-light); 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); }
  body[data-page="sdk"] .code-tabs{ display: flex; align-items: center; border-bottom: 1px solid rgba(255,255,255,.08); padding: 0 10px; }
  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;
  }
  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: 11px; 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); }
  @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: 11px; 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: 11px; 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); }
  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) {
    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{ grid-template-columns: 1fr; }
    body[data-page="sdk"] .route-grid{ gap: 34px; }
    body[data-page="sdk"] .feat-grid{ grid-template-columns: 1fr; }
    body[data-page="sdk"] .feat{ border: 1px solid var(--line-blue); }
    /* 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: 10px 14px; }
  }