@font-face{font-family:'Spectral';src:url('/assets/spectral-300-latin.woff2') format('woff2');font-weight:300;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
  @font-face{font-family:'Spectral';src:url('/assets/spectral-400-latin.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
  @font-face{font-family:'Spectral';src:url('/assets/spectral-600-latin.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
  @font-face{font-family:'Spectral';src:url('/assets/spectral-italic-400-latin.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
  @font-face{font-family:'Spectral SC';src:url('/assets/spectralsc-600-latin.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
  /* Latijnse uitbreiding (Pools, Turks, Vietnamees), Cyrillisch en Vietnamees.
     Elk blok laadt alleen als de pagina tekens uit dat bereik bevat. */
  @font-face{font-family:'Spectral';src:url('/assets/spectral-300-latin-ext.woff2') format('woff2');font-weight:300;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
  @font-face{font-family:'Spectral';src:url('/assets/spectral-400-latin-ext.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
  @font-face{font-family:'Spectral';src:url('/assets/spectral-600-latin-ext.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
  @font-face{font-family:'Spectral';src:url('/assets/spectral-italic-400-latin-ext.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
  @font-face{font-family:'Spectral SC';src:url('/assets/spectralsc-600-latin-ext.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
  @font-face{font-family:'Spectral';src:url('/assets/spectral-italic-400-cyrillic-ext.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap;unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F}
  @font-face{font-family:'Spectral';src:url('/assets/spectral-italic-400-cyrillic.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap;unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
  @font-face{font-family:'Spectral';src:url('/assets/spectral-italic-400-vietnamese.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap;unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB}
  @font-face{font-family:'Spectral';src:url('/assets/spectral-300-cyrillic-ext.woff2') format('woff2');font-weight:300;font-style:normal;font-display:swap;unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F}
  @font-face{font-family:'Spectral';src:url('/assets/spectral-300-cyrillic.woff2') format('woff2');font-weight:300;font-style:normal;font-display:swap;unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
  @font-face{font-family:'Spectral';src:url('/assets/spectral-300-vietnamese.woff2') format('woff2');font-weight:300;font-style:normal;font-display:swap;unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB}
  @font-face{font-family:'Spectral';src:url('/assets/spectral-400-cyrillic-ext.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F}
  @font-face{font-family:'Spectral';src:url('/assets/spectral-400-cyrillic.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
  @font-face{font-family:'Spectral';src:url('/assets/spectral-400-vietnamese.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB}
  @font-face{font-family:'Spectral';src:url('/assets/spectral-600-cyrillic-ext.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap;unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F}
  @font-face{font-family:'Spectral';src:url('/assets/spectral-600-cyrillic.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap;unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
  @font-face{font-family:'Spectral';src:url('/assets/spectral-600-vietnamese.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap;unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB}
  @font-face{font-family:'Spectral SC';src:url('/assets/spectralsc-600-cyrillic-ext.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap;unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F}
  @font-face{font-family:'Spectral SC';src:url('/assets/spectralsc-600-cyrillic.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap;unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
  @font-face{font-family:'Spectral SC';src:url('/assets/spectralsc-600-vietnamese.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap;unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB}

  :root{
    --marble:#E7D9B6;
    --parchment:#F2E8CE;
    --ink:#2a2118;
    --brown:#4A361F;
    --brass:#8B5B24;
    --gold:#CDA54C;
    --gold-bright:#EACE8E;
    --line:rgba(139,91,36,.28);
    --panel:rgba(255,251,240,.72);
    --shadow:0 18px 50px rgba(40,28,8,.28);
    --face-body:'Spectral',Georgia,serif;
    --face-display:'Spectral SC','Spectral',Georgia,serif;
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{
    margin:0;
    font-family:var(--face-body);
    color:var(--ink);
    background:linear-gradient(rgba(247,238,218,.84),rgba(247,238,218,.88)),var(--marble) url('/assets/background.jpg');
    background-size:cover;background-attachment:fixed;background-position:center;
    line-height:1.55;
    -webkit-font-smoothing:antialiased;
  }
  img{max-width:100%;height:auto;display:block}
  a{color:var(--brass)}
  .wrap{max-width:1120px;margin:0 auto;padding-inline:20px}
  .eyebrow{font-family:var(--face-display);font-weight:600;letter-spacing:.14em;text-transform:uppercase;font-size:12px;color:var(--brass)}
  h1,h2,h3{font-weight:600;line-height:1.1;text-wrap:balance;margin:0}
  p{margin:0}

  /* ---- Gold-plate buttons: the game's own recipe (border-image 9-slice) ---- */
  .plate{
    display:inline-flex;align-items:center;justify-content:center;text-align:center;
    background:transparent;border-style:solid;border-width:14px 19.7px;
    border-image-source:url('/assets/btn-normal.webp');border-image-slice:54 76 fill;border-image-repeat:stretch;
    border-radius:0;color:var(--gold-bright);
    font-family:var(--face-display);font-weight:600;letter-spacing:.015em;
    font-size:15px;text-decoration:none;cursor:pointer;min-height:20px;padding:5px 8px 2px;
    text-shadow:0 1px 0 rgba(45,22,0,.9),0 2px 3px rgba(0,0,0,.35);
    transition:transform .08s ease;
  }
  .plate:hover{border-image-source:url('/assets/btn-hover.webp');color:#FBEFC8}
  .plate:active{border-image-source:url('/assets/btn-pressed.webp');color:#D9C48F;transform:translateY(1px)}
  .plate-black{border-image-source:url('/assets/btn-black-normal.webp');color:#E9E4D6}
  .plate-black:hover{border-image-source:url('/assets/btn-black-hover.webp');color:#FBEFC8}
  .plate-black:active{border-image-source:url('/assets/btn-black-pressed.webp');color:#D9C48F}
  .plate-light{border-image-source:url('/assets/btn-light-normal.webp');color:#4A3316;text-shadow:0 1px 0 rgba(255,250,235,.55)}
  .plate-light:hover{border-image-source:url('/assets/btn-light-hover.webp');color:#3B2810}
  /* Twee zwarte platen onder elkaar: Google Play is een echte link, iOS nog
     niet. Zonder onderscheid lijken ze allebei aanklikbaar, dus de wachtende
     plaat dooft en reageert nergens op. */
  .plate.is-waiting,.plate.is-waiting:hover,.plate.is-waiting:active{
    border-image-source:url('/assets/btn-black-normal.webp');color:#CBC4B3;
    opacity:.62;transform:none;cursor:default}

  /* thin engraved gold rule, reused as a section marker (not an emoji) */
  .rule{height:1px;border:0;background:linear-gradient(90deg,transparent,var(--gold),transparent);margin:0}

  /* ------------------------------------------------------------ TAALKIEZER -- */
  /* <details> zodat de lijst ook zonder JavaScript open- en dichtgaat en elke
     taal een echte link is (vindbaar voor zoekmachines, werkt met toetsenbord). */
  .langpick{position:relative;font-size:14px}
  .langpick>summary{
    list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:7px;
    padding:7px 12px;border:1px solid var(--line);border-radius:999px;
    background:var(--panel);color:var(--brown);font-family:var(--face-display);
    letter-spacing:.02em;white-space:nowrap;
  }
  .langpick>summary::-webkit-details-marker{display:none}
  .langpick>summary:hover{border-color:var(--gold);color:var(--ink)}
  .langpick>summary .globe{width:15px;height:15px;flex:none;stroke:var(--brass);fill:none;stroke-width:1.3}
  .langpick>summary .chev{width:9px;height:9px;flex:none;stroke:var(--brass);fill:none;stroke-width:1.6;transition:transform .12s ease}
  .langpick[open]>summary .chev{transform:rotate(180deg)}
  .langmenu{
    position:absolute;z-index:40;inset-inline-end:0;margin-top:8px;padding:10px;
    background:var(--parchment);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);
    display:grid;grid-template-columns:repeat(3,minmax(118px,1fr));gap:2px 6px;
    max-height:min(70vh,440px);overflow:auto;
  }
  .langmenu a{
    display:block;padding:6px 9px;border-radius:8px;text-decoration:none;color:var(--brown);
    font-family:var(--face-body);font-size:14px;line-height:1.35;white-space:nowrap;
  }
  .langmenu a:hover{background:rgba(205,165,76,.18);color:var(--ink)}
  .langmenu a[aria-current="true"]{color:var(--ink);background:rgba(205,165,76,.24);font-weight:600}
  @media(max-width:560px){
    .langmenu{grid-template-columns:repeat(2,minmax(110px,1fr));inset-inline-end:auto;inset-inline-start:0}
  }

  /* ---------------------------------------------------------------- HERO --- */
  .hero{padding:34px 0 8px}
  .hero-top{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
  .hero-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
  .wordmark{height:64px;width:auto;filter:drop-shadow(0 3px 6px rgba(40,25,5,.35))}
  .nav-play{white-space:nowrap}
  .hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center;margin-top:26px}
  .hero-copy h1{font-size:clamp(34px,5.4vw,58px);color:var(--ink)}
  .hero-copy .lede{font-size:clamp(17px,2vw,21px);color:var(--brown);margin-top:16px;max-width:34ch}
  .hero-copy .lede b{font-weight:600;color:var(--ink)}
  /* De knoppen staan onder elkaar: eerst de twee winkelplaten, dan de campagne.
     flex-start en niet stretch, anders rekken de platen over de hele kolom. */
  .cta-row{display:flex;flex-direction:column;align-items:flex-start;gap:12px;margin-top:26px}
  /* Een raster van een kolom: die wordt zo breed als de breedste plaat (Google
     Play), en iOS rekt daarnaar mee in plaats van naar zijn korte tekst te
     krimpen. Zo zijn de twee winkelplaten precies even groot. */
  .cta-stores{display:grid;gap:10px;justify-items:stretch}
  .cta-row .plate{font-size:16px}
  /* device: real portrait screenshot in a slim frame, tilted for depth */
  /* De omhulling draagt de plaatsing in het raster; de kanteling blijft op het
     frame zelf, zodat de trailerlink eronder recht staat. */
  .device-wrap{justify-self:center;display:flex;flex-direction:column;align-items:center;gap:14px}
  /* De kanteling zit in een variabele, zodat de zweefstand hem niet hoeft te
     herhalen en de spiegeling voor Arabisch alleen de variabele omzet. */
  .device{--tilt:2deg;display:block;position:relative;width:min(300px,80vw);border-radius:30px;overflow:hidden;
    box-shadow:var(--shadow);border:1px solid rgba(139,91,36,.35);transform:rotate(var(--tilt));background:#000;
    cursor:pointer;transition:transform .18s ease,box-shadow .18s ease}
  /* Een aanklikbaar beeld zonder enig teken dat het aanklikbaar is, vindt
     niemand. Een lichte lift bij zweven is genoeg; de tekstlink eronder zegt
     waar het heen gaat. */
  .device:hover{transform:rotate(var(--tilt)) scale(1.015);box-shadow:0 24px 60px rgba(40,28,8,.36)}
  .device:focus-visible{outline:2px solid var(--gold);outline-offset:4px}
  .device img,.device video{width:100%;display:block}
  .device-media{height:auto}
  /* Wie bewegende beelden liever niet heeft, krijgt de posterafbeelding. De
     lus wordt ook echt gepauzeerd (zie het script onderaan de pagina): CSS
     alleen kan een video niet stilzetten. */
  @media (prefers-reduced-motion:reduce){
    .device-media{animation:none}
    .device{transition:none}
    .device:hover{transform:rotate(var(--tilt))}
  }
  .device-link{font-family:var(--face-display);font-size:13px;letter-spacing:.08em;text-transform:uppercase;
    color:var(--brass);text-decoration:none;border-bottom:1px solid rgba(139,91,36,.4);padding-bottom:2px}
  .device-link:hover{color:var(--ink);border-bottom-color:var(--gold)}
  html[data-caseless] .device-link{text-transform:none;letter-spacing:0;font-size:14px}

  /* ------------------------------------------------------------ FANS STRIP -- */
  .fans{margin-top:30px;padding:16px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
    text-align:center;color:var(--brown);font-size:15px}
  .fans b{color:var(--ink);font-weight:600}

  /* --------------------------------------------------------------- SECTIONS -- */
  section{padding:56px 0}
  .sec-head{max-width:52ch}
  .sec-head h2{font-size:clamp(26px,3.4vw,38px);color:var(--ink);margin-top:8px}
  .sec-head p{color:var(--brown);margin-top:10px;font-size:17px}
  .sec-head h2.oneline{white-space:nowrap}

  /* HOW IT WORKS: a real 3-step sequence, so numbering carries meaning */
  .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:34px}
  .step{position:relative;padding-top:17px}
  /* Zelfde zachte, vervagende goudlijn als .rule, maar smaller (per kolom). */
  .step::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;
    background:linear-gradient(90deg,transparent,var(--gold),transparent)}
  .step .num{font-family:var(--face-display);font-size:13px;letter-spacing:.1em;color:var(--brass)}
  .step h3{font-size:20px;margin-top:6px;color:var(--ink)}
  .step p{color:var(--brown);margin-top:8px;font-size:16px}

  /* GALLERY: hand-painted worlds, uneven rhythm, phone-framed */
  .worlds{padding-top:20px}
  /* Horizontale showcase: 3 werelden in beeld, zijwaarts scrollen voor de rest. */
  .world-scroll{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 32px)/3);gap:16px;
    padding:14px 2px 22px;align-items:start;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline-start:2px}
  .world{scroll-snap-align:start}
  .world .frame{border-radius:16px;overflow:hidden;box-shadow:var(--shadow);border:1px solid rgba(139,91,36,.3);background:#000}
  .world .frame img{width:100%}
  .world .name{font-family:var(--face-display);font-size:16px;color:var(--ink);margin-top:14px;letter-spacing:.02em}
  .world .cap{color:var(--brown);font-size:14px;margin-top:3px;max-width:26ch}

  /* FEATURES: content-driven list, engraved dividers, no icon grid, no emoji */
  .features{display:grid;grid-template-columns:1fr 1fr;gap:0 46px;margin-top:24px}
  .feat{padding:20px 0;border-top:1px solid var(--line)}
  .feat h3{font-size:19px;color:var(--ink)}
  .feat p{color:var(--brown);margin-top:5px;font-size:16px}

  /* BASE vs FULL: parchment plate, game styling */
  .tiers{background:var(--panel);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);
    margin-top:30px;overflow-x:auto;width:max-content;max-width:100%}
  table.cmp{min-width:0}
  table.cmp{width:auto;border-collapse:collapse;font-size:16px}
  table.cmp th,table.cmp td{padding:13px 16px;text-align:start;border-bottom:1px solid var(--line)}
  table.cmp thead th{font-family:var(--face-display);letter-spacing:.06em;font-size:13px;text-transform:uppercase;color:var(--brass);background:rgba(205,165,76,.12)}
  table.cmp thead th:nth-child(2),table.cmp thead th:nth-child(3),
  table.cmp td:nth-child(2),table.cmp td:nth-child(3){text-align:center;min-width:92px}
  table.cmp td:first-child,table.cmp thead th:first-child{padding-inline-end:40px}
  table.cmp td:first-child{color:var(--ink)}
  table.cmp tbody tr:last-child td{border-bottom:0}
  .tick{display:inline-block;width:20px;height:16px;vertical-align:middle;background-color:#675e50;-webkit-mask:url(/assets/tick.png) center/contain no-repeat;mask:url(/assets/tick.png) center/contain no-repeat}
  .dash{color:rgba(74,54,31,.3)}
  /* Full-kolom: shiny gouden locomotief (het masker snijdt een metallic goud-verloop uit). */
  .full-col .tick{background-color:#B0842B;background-image:linear-gradient(155deg,#E7D083 0%,#CDA54C 24%,#B0842B 48%,#8A5D1C 66%,#D3B865 84%,#A67C2B 100%)}
  .tiers .full-col{background:rgba(205,165,76,.10)}
  /* Base/Full-sectie als geheel gecentreerd op de pagina. */
  #tiers .sec-head{max-width:60ch;margin-inline:auto;text-align:center}
  #tiers .tiers{margin-inline:auto}

  /* FINAL CTA */
  .final{text-align:center;padding:64px 0 40px}
  .final h2{font-size:clamp(28px,4vw,44px);color:var(--ink)}
  .final p{color:var(--brown);margin-top:12px;font-size:18px;max-width:46ch;margin-inline:auto}
  .final .plate{margin-top:26px;font-size:17px}

  footer{border-top:1px solid var(--line);padding:30px 0 46px;color:var(--brown);font-size:13px}
  .foot-grid{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;align-items:flex-start}
  footer a{color:var(--brass);text-decoration:none}
  footer a:hover{text-decoration:underline}
  .credits{font-size:12px;opacity:.85;max-width:40ch}

  /* Spiegelbeeld voor Arabisch: de trein-screenshot mag niet kantelen alsof hij
     de andere kant op rijdt, dus de tilt draait mee. */
  [dir="rtl"] .device{--tilt:-2deg}

  /* Schriften zonder hoofdletters (CJK, Arabisch, Devanagari, Thai, ...):
     uppercase doet niets en letterspacing breekt verbonden schrift. */
  html[data-caseless] .eyebrow,
  html[data-caseless] .plate,
  html[data-caseless] table.cmp thead th,
  html[data-caseless] .step .num,
  html[data-caseless] .world .name{text-transform:none;letter-spacing:0}
  html[data-caseless] .eyebrow{font-size:13px}

  @media(max-width:820px){
    .hero-grid{grid-template-columns:1fr;gap:28px}
    .hero-copy{order:2}.device-wrap{order:1}
    .steps{grid-template-columns:1fr}
    .sec-head h2.oneline{white-space:normal}
    .world-scroll{grid-auto-columns:82%;gap:14px}
    .features{grid-template-columns:1fr}
    .feat:nth-child(2){border-top:1px solid var(--line)}
    .wordmark{height:48px}
    /* Tabel altijd passend op mobiel: vul de breedte, geen sidescroll. */
    .tiers{width:auto}
    table.cmp{width:100%;font-size:14px}
    table.cmp th,table.cmp td{padding:11px 8px}
    table.cmp td:first-child,table.cmp thead th:first-child{padding-inline-end:8px}
    table.cmp thead th:nth-child(2),table.cmp thead th:nth-child(3),
    table.cmp td:nth-child(2),table.cmp td:nth-child(3){min-width:0}
  }