/* /install: de gids en de tekening van het toestel.
   De pagina volgt het merk van de winkel (--orange, --ink); het scherm in de telefoon volgt het
   toestel zelf (iOS, Samsung One UI, Android), zodat de klant herkent wat hij straks ziet. */

.guide-page { padding-block: 40px 96px; }
.guide-page h1 { font-size: clamp(34px, 5.4vw, 56px); }
.guide-lead { font-size: 18px; max-width: 60ch; }
.guide-page .installed-note { max-width: 640px; margin-bottom: 20px; }
.guide-card { margin-top: 24px; background: var(--paper); border: 1px solid var(--line); border-radius: 28px; padding: clamp(16px, 3vw, 32px); box-shadow: var(--shadow); display: grid; gap: 22px; }
.guide-note { font-size: 14px; margin-top: 16px; }

.guide-pick { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.guide-pick button { display: grid; justify-items: center; gap: 2px; padding: 14px 8px; border-radius: 20px; border: 2px solid var(--line); background: var(--paper); color: var(--ink); font: inherit; cursor: pointer; text-align: center; }
.guide-pick button svg { width: 30px; height: 30px; margin-bottom: 4px; }
.guide-pick button b { font-size: 16px; }
.guide-pick button small { font-size: 12.5px; color: var(--muted); line-height: 1.3; }
.guide-pick button[aria-pressed="true"] { border-color: var(--orange); background: var(--orange-soft); }

.guide-phase { display: flex; flex-wrap: wrap; gap: 8px; }
.guide-phase button { padding: 10px 18px; border-radius: 999px; border: 2px solid var(--line); background: var(--paper); color: var(--ink); font: 700 15px/1.2 var(--body); cursor: pointer; }
.guide-phase button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }

.guide-stage { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(20px, 4vw, 52px); align-items: center; }
@media (max-width: 720px) { .guide-stage { grid-template-columns: 1fr; justify-items: center; } .guide-say { justify-self: stretch; } }
.guide-say { display: grid; gap: 14px; max-width: 46ch; min-width: 0; }
.guide-no { display: flex; align-items: center; gap: 10px; margin: 0; color: var(--muted); font-weight: 600; }
.guide-no b { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--orange); color: var(--ink); font: 700 21px/1 var(--display); }
.guide-say h2 { font-size: clamp(24px, 3.2vw, 32px); margin: 0; text-wrap: balance; }
.guide-s { font-size: 17px; color: var(--muted); margin: 0; }
/* Dataroaming klinkt als duur: daarom staat de uitleg als apart, rustig blok in beeld. */
.guide-s.guide-roaming { color: var(--ink); background: #e8f5ee; border-radius: var(--radius-sm); padding: 12px 14px 12px 44px; position: relative; }
.guide-s.guide-roaming::before { content: "€0"; position: absolute; left: 10px; top: 12px; font-weight: 800; font-size: 13px; color: var(--ok); }
.guide-action { display: grid; justify-items: start; gap: 10px; }
.guide-action .install-button { box-shadow: 0 6px 0 var(--ink); }
.guide-qr { width: 200px; height: 200px; background: #fff; border-radius: 16px; border: 1px solid var(--line); }
.guide-code { display: grid; gap: 10px; justify-items: start; width: 100%; }
.guide-code code { display: block; width: 100%; font-size: 13px; background: var(--cream); border: 1px solid var(--line); padding: 10px 12px; border-radius: 10px; word-break: break-all; user-select: all; }
.guide-warn { margin: 0; padding: 10px 14px; border: 2px solid var(--error); color: var(--error); border-radius: var(--radius-sm); font-weight: 700; }
/* Het einde van deel 1: rustig, geen waarschuwing. */
.guide-tip { margin: 0; padding: 10px 14px; background: var(--cream); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.guide-planb { justify-self: start; padding: 0; border: 0; background: none; color: var(--ink); font: 700 16px/1.3 var(--body); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.guide-dots { display: flex; flex-wrap: wrap; gap: 6px; }
.guide-dots i { width: 26px; height: 6px; border-radius: 3px; background: var(--line); }
.guide-dots i.on { background: var(--orange); }
.guide-nav { display: flex; flex-wrap: wrap; gap: 12px; }
.guide-nav .button { padding: 16px 30px; font-size: 18px; }
.guide-nav .button:disabled { opacity: .35; cursor: default; transform: none; }

/* ---------- het toestel ---------- */

.guide-phone { width: 282px; max-width: 100%; aspect-ratio: 9 / 19; padding: 11px; border-radius: 48px; background: linear-gradient(145deg, #2a3138, #0c1013); box-shadow: inset 0 0 0 2px #3b444c, 0 24px 60px rgba(22, 36, 46, .28); }
.os { position: relative; height: 100%; overflow: hidden; border-radius: 38px; display: flex; flex-direction: column; font: 400 13px/1.3 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif; color: #000; background: #F2F2F7; }
.os-body-wrap { position: relative; flex: 1; display: flex; flex-direction: column; min-height: 0; padding: 0 12px 14px; }

/* statusbalk */
.sb { flex: none; height: 38px; display: flex; align-items: center; justify-content: space-between; padding: 6px 22px 0 26px; font-weight: 600; font-size: 13px; position: relative; }
.sb-right { display: flex; align-items: center; gap: 4px; }
.sb-sig { width: 17px; height: 12px; fill: currentColor; }
.sb-sig .leeg { opacity: .25; }
.sb-wifi { width: 15px; height: 15px; }
.sb-net { font-size: 11px; font-weight: 700; }
.sb-bat { width: 24px; height: 12px; border: 1.5px solid currentColor; border-radius: 4px; padding: 1.5px; opacity: .9; position: relative; }
.sb-bat::after { content: ""; position: absolute; right: -4px; top: 3px; width: 2px; height: 4px; border-radius: 0 1px 1px 0; background: currentColor; }
.sb-bat i { display: block; height: 100%; width: 78%; border-radius: 1.5px; background: currentColor; }
.island { position: absolute; left: 50%; top: 9px; width: 86px; height: 24px; margin-left: -43px; border-radius: 14px; background: #000; }
.punch { position: absolute; left: 50%; top: 11px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: #000; }
.os-home { position: absolute; left: 50%; bottom: 7px; width: 108px; height: 4px; margin-left: -54px; border-radius: 3px; background: #000; opacity: .85; }

/* navigatie en titel */
.os-nav { min-height: 22px; display: flex; align-items: center; }
.os-back { color: #007AFF; font-size: 15px; display: inline-flex; align-items: center; gap: 2px; }
.os-back::before { content: ""; width: 9px; height: 9px; border: solid currentColor; border-width: 0 0 2.5px 2.5px; transform: rotate(45deg); margin-right: 2px; }
.os-title { font-weight: 700; font-size: 26px; letter-spacing: -.02em; padding: 2px 4px 10px; line-height: 1.1; }

/* lijsten */
.os-grp { background: #fff; border-radius: 12px; margin-bottom: 14px; }
.os-grp:empty { display: none; }
.os-sec { font-size: 11.5px; text-transform: uppercase; color: #6D6D72; padding: 0 14px 6px; letter-spacing: .02em; }
.os-row { position: relative; display: flex; align-items: center; gap: 10px; min-height: 42px; padding: 7px 12px; }
.os-row + .os-row::before { content: ""; position: absolute; top: 0; left: 48px; right: 0; height: 1px; background: #E5E5EA; }
.os-row:not(:has(.os-ico)) + .os-row::before, .os-grp .os-row:first-child::before { left: 12px; }
.os-l { flex: 1; min-width: 0; display: grid; font-size: 14.5px; }
.os-l small { font-size: 12px; color: #8A8A8E; }
.os-r { display: flex; align-items: center; gap: 6px; color: #8A8A8E; font-size: 14px; white-space: nowrap; }
.os-chev { width: 7px; height: 7px; border: solid #C4C4C7; border-width: 2px 2px 0 0; transform: rotate(45deg); margin-left: 4px; }
.os-ck { color: #007AFF; font-weight: 700; font-size: 16px; }
.os-ico { flex: none; width: 28px; height: 28px; border-radius: 7px; background: var(--ico); color: #fff; display: grid; place-items: center; }
.os-ico svg { width: 18px; height: 18px; }
.os-plus { flex: none; width: 28px; height: 28px; display: grid; place-items: center; font-size: 22px; color: #007AFF; }

/* schakelaar, met de beweging die de klant zelf gaat maken */
.os-tog { flex: none; position: relative; width: 46px; height: 28px; border-radius: 14px; background: #E5E5EA; transition: background .25s; }
.os-tog::after { content: ""; position: absolute; top: 2px; left: 2px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 2px 4px rgba(0, 0, 0, .2); transition: left .25s; }
.os-tog.on { background: #34C759; }
.os-tog.on::after { left: 20px; }
.os-tog.flip.on { animation: tog-bg-on 2.6s ease-in-out infinite; }
.os-tog.flip.on::after { animation: tog-knop-on 2.6s ease-in-out infinite; }
.os-tog.flip:not(.on) { animation: tog-bg-uit 2.6s ease-in-out infinite; }
.os-tog.flip:not(.on)::after { animation: tog-knop-uit 2.6s ease-in-out infinite; }
@keyframes tog-bg-on { 0%, 30% { background: #E5E5EA; } 45%, 100% { background: var(--aan, #34C759); } }
@keyframes tog-knop-on { 0%, 30% { left: 2px; } 45%, 100% { left: 20px; } }
@keyframes tog-bg-uit { 0%, 30% { background: var(--aan, #34C759); } 45%, 100% { background: #E5E5EA; } }
@keyframes tog-knop-uit { 0%, 30% { left: 20px; } 45%, 100% { left: 2px; } }

/* knoppen in het toestel */
.os-foot { margin-top: auto; display: grid; }
.os-btn { position: relative; display: block; text-align: center; padding: 13px; border-radius: 14px; background: #007AFF; color: #fff; font-weight: 600; font-size: 15px; }
.os-btn.ghost { background: transparent; color: #007AFF; }

/* vraag van het toestel */
.os-dim { position: absolute; z-index: 5; inset: -38px 0 0; background: rgba(0, 0, 0, .38); display: flex; align-items: flex-end; padding: 8px; }
.os-sheet { width: 100%; background: #fff; border-radius: 30px; padding: 22px 16px 16px; display: grid; gap: 10px; text-align: center; }
.os-card { width: 96px; height: 62px; margin: 0 auto 4px; border-radius: 10px; background: linear-gradient(135deg, #3a3a3c, #1c1c1e); color: #fff; display: grid; place-items: end start; padding: 7px 9px; font-weight: 700; font-size: 11px; box-shadow: 0 6px 14px rgba(0, 0, 0, .2); }
.os-h { font-weight: 700; font-size: 19px; }
.os-body { color: #3C3C43; font-size: 13.5px; }
.os-btns { display: grid; gap: 6px; margin-top: 6px; }

/* wachten, klaar */
.os-center { flex: 1; display: grid; place-items: center; align-content: center; gap: 16px; text-align: center; font-size: 15px; }
.os-spin { width: 40px; height: 40px; border-radius: 50%; border: 4px solid #D1D1D6; border-top-color: #007AFF; animation: os-draai 1s linear infinite; }
@keyframes os-draai { to { transform: rotate(360deg); } }
.os-check { width: 84px; height: 84px; border-radius: 50%; background: #34C759; color: #fff; display: grid; place-items: center; font-size: 44px; font-weight: 700; }

/* mail, Mijn eSIM, scanner, invoervak */
.os-mail { background: #fff; border-radius: 14px; padding: 12px; display: grid; gap: 10px; }
.os-from { display: flex; align-items: center; gap: 9px; }
.os-from span:last-child { display: grid; font-size: 14px; }
.os-from small { color: #6D6D72; font-size: 12px; }
.os-av { width: 32px; height: 32px; border-radius: 50%; background: var(--ink); color: var(--orange); display: grid; place-items: center; font: 700 16px/1 var(--display); }
.os-pass { border: 1.5px dashed var(--orange); background: var(--orange-soft); border-radius: 12px; padding: 10px; display: grid; }
.os-pass small { color: #6D6D72; font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; }
.os-pass b { font: 700 17px/1.2 var(--display); color: var(--ink); }
.os-mbtn { position: relative; display: grid; text-align: center; padding: 13px; border-radius: 14px; background: var(--orange); color: var(--ink); font-weight: 800; font-size: 14.5px; box-shadow: 0 4px 0 var(--ink); }
.os-mbtn small { font-weight: 600; font-size: 11px; }
.os-code { font: 11px/1.4 ui-monospace, Menlo, monospace; background: #F2F2F7; border-radius: 8px; padding: 9px; word-break: break-all; color: #333; }
.os-cam { flex: 1; border-radius: 18px; background: radial-gradient(circle at 40% 30%, #4a4f55, #15181b); display: grid; place-items: center; margin-bottom: 12px; }
.os-cam span { width: 130px; height: 130px; border-radius: 18px; background:
  linear-gradient(#fff, #fff) top left / 26px 4px, linear-gradient(#fff, #fff) top left / 4px 26px,
  linear-gradient(#fff, #fff) top right / 26px 4px, linear-gradient(#fff, #fff) top right / 4px 26px,
  linear-gradient(#fff, #fff) bottom left / 26px 4px, linear-gradient(#fff, #fff) bottom left / 4px 26px,
  linear-gradient(#fff, #fff) bottom right / 26px 4px, linear-gradient(#fff, #fff) bottom right / 4px 26px;
  background-repeat: no-repeat; }
.os-link { position: relative; display: block; text-align: center; padding: 11px; border-radius: 12px; color: #007AFF; font-weight: 600; font-size: 14px; }
/* De iPhone vraagt adres en code in aparte vakken, elk met zijn naam erboven. */
.os-fieldrow { display: grid; gap: 4px; margin-bottom: 10px; }
.os-fieldrow small { font-size: 11px; color: #555; }
.os-fieldrow .os-field { position: relative; }
.os-fieldrow.bl .os-field { border-color: #ccc; }
/* Herstarten en "schrijf ons": een icoon in plaats van het vinkje. */
.os-check.os-icon { background: #8E8E93; }
.os-check.os-icon svg { width: 42px; height: 42px; }
.os-field { font: 11.5px/1.4 ui-monospace, Menlo, monospace; background: #fff; border: 2px solid #007AFF; border-radius: 10px; padding: 12px; word-break: break-all; }

/* hier tikken: oranje rand en een kloppende vingertop */
.os .hl { outline: 3px solid var(--orange); outline-offset: 2px; border-radius: 12px; z-index: 2; }
.os .hl::after { content: ""; position: absolute; right: -14px; top: 50%; width: 30px; height: 30px; margin-top: -15px; border-radius: 50%; background: rgba(242, 166, 90, .55); border: 2px solid #fff; animation: os-tik 1.5s ease-out infinite; pointer-events: none; }
.os .os-row.hl:has(.os-tog)::after { right: -12px; }
.os .look { outline: 2px dashed var(--orange); outline-offset: 2px; border-radius: 12px; }
@keyframes os-tik { 0% { box-shadow: 0 0 0 0 rgba(242, 166, 90, .7); } 100% { box-shadow: 0 0 0 20px rgba(242, 166, 90, 0); } }

/* ---------- Samsung One UI: grote lucht boven de titel, ronde kaarten, blauw ---------- */
.os.samsung { background: #F4F4F6; font-family: "SamsungOne", Roboto, "Segoe UI", sans-serif; --aan: #3E91FF; }
.samsung .os-title { font-weight: 400; font-size: 27px; padding: 34px 8px 18px; }
.samsung .os-grp { border-radius: 22px; padding: 4px 0; }
.samsung .os-row { min-height: 52px; padding: 8px 16px; }
.samsung .os-row + .os-row::before { display: none; }
.samsung .os-ico { border-radius: 50%; background: transparent; color: var(--ico); }
.samsung .os-ico svg { width: 22px; height: 22px; }
.samsung .os-l small { color: #3E91FF; }
.samsung .os-r { color: #3E91FF; }
.samsung .os-chev { display: none; }
.samsung .os-tog { width: 40px; height: 22px; background: #fff; border: 2px solid #8A8A8E; }
.samsung .os-tog::after { top: 2px; left: 2px; width: 14px; height: 14px; background: #8A8A8E; box-shadow: none; }
.samsung .os-tog.on { background: #3E91FF; border-color: #3E91FF; }
.samsung .os-tog.on::after { left: 20px; background: #fff; }
.samsung .os-tog.flip.on { animation: none; }
.samsung .os-tog.flip.on::after { animation: tog-knop-sam 2.6s ease-in-out infinite; }
@keyframes tog-knop-sam { 0%, 30% { left: 2px; } 45%, 100% { left: 20px; } }
.samsung .os-sec { color: #3E91FF; text-transform: none; font-size: 13px; padding: 0 16px 6px; }
.samsung .os-plus { color: #3E91FF; }
.samsung .os-btn { background: #3E91FF; border-radius: 999px; }
.samsung .os-btn.ghost, .samsung .os-link { color: #3E91FF; }
.samsung .os-dim { align-items: flex-end; padding: 10px; }
.samsung .os-sheet { border-radius: 26px; text-align: left; padding: 22px 20px 12px; }
.samsung .os-btns { grid-template-columns: 1fr 1fr; }
.samsung .os-sheet .os-btn { background: transparent; color: #000; font-weight: 600; padding: 10px; }
.samsung .os-sheet .os-btn.hl { color: #3E91FF; }
.samsung .os-spin { border-top-color: #3E91FF; }
.samsung .os-field { border-color: #3E91FF; }

/* ---------- Pixel / Android: getinte vlakken, losse rijen, pillen ---------- */
.os.pixel { background: #F8F9FF; font-family: "Google Sans", Roboto, "Segoe UI", sans-serif; --aan: #3B5BA9; }
.pixel .os-title { font-weight: 400; font-size: 26px; padding: 10px 6px 14px; }
.pixel .os-back { color: #1B1B1F; font-size: 0; }
.pixel .os-back::before { width: 11px; height: 11px; border-color: #1B1B1F; }
.pixel .os-grp { background: transparent; display: grid; gap: 3px; }
.pixel .os-row { background: #fff; border-radius: 6px; min-height: 54px; padding: 8px 14px; }
.pixel .os-grp .os-row:first-child { border-radius: 20px 20px 6px 6px; }
.pixel .os-grp .os-row:last-child { border-radius: 6px 6px 20px 20px; }
.pixel .os-grp .os-row:only-child { border-radius: 20px; }
.pixel .os-row + .os-row::before { display: none; }
.pixel .os-ico { background: transparent; color: #44474F; }
.pixel .os-ico svg { width: 22px; height: 22px; }
.pixel .os-chev { display: none; }
.pixel .os-tog { width: 48px; height: 28px; background: #E1E2EC; border: 2px solid #74777F; }
.pixel .os-tog::after { top: 4px; left: 4px; width: 16px; height: 16px; background: #74777F; box-shadow: none; }
.pixel .os-tog.on { background: #3B5BA9; border-color: #3B5BA9; }
.pixel .os-tog.on::after { top: 2px; left: 22px; width: 20px; height: 20px; background: #fff; }
.pixel .os-tog.flip.on { animation: none; }
.pixel .os-tog.flip.on::after { animation: tog-knop-pix 2.6s ease-in-out infinite; }
@keyframes tog-knop-pix { 0%, 30% { left: 4px; top: 4px; width: 16px; height: 16px; background: #74777F; } 45%, 100% { left: 22px; top: 2px; width: 20px; height: 20px; background: #fff; } }
.pixel .os-plus { color: #3B5BA9; }
.pixel .os-btn { background: #3B5BA9; border-radius: 999px; }
.pixel .os-btn.ghost, .pixel .os-link { color: #3B5BA9; }
.pixel .os-dim { align-items: center; padding: 18px; }
.pixel .os-sheet { border-radius: 28px; text-align: left; background: #EEF0FA; padding: 22px 20px 14px; }
.pixel .os-btns { display: flex; justify-content: flex-end; gap: 4px; }
.pixel .os-sheet .os-btn { background: transparent; color: #3B5BA9; padding: 10px 12px; font-size: 14px; }
.pixel .os-spin { border-top-color: #3B5BA9; }
.pixel .os-field { border-color: #3B5BA9; }

@media (prefers-reduced-motion: reduce) {
  .os .hl::after, .os-spin, .os-tog.flip, .os-tog.flip::after { animation: none !important; }
}
/* Op een schakelaar alleen een ring: anders bedekt de vinger de beweging die hij moet laten zien. */
.os .os-row.hl:has(.os-tog)::after { background: transparent; border-color: var(--orange); }
/* Onder een vraag van het toestel is de mail alleen achtergrond: daar hoort geen tikrondje meer. */
.os-achter .hl { outline: 0; }
.os-achter .hl::after { display: none; }

/* Op de telefoon: elke stap is één blok op één scherm (390x844). Bovenaan klein het toestel en het
   deel, dan wat je moet doen, dan de echte knop (installeren of kopiëren), dan de tekening. Terug en
   Volgende staan vast onderaan, zodat niemand hoeft te zoeken of te scrollen. De tekening wordt
   kleiner, niet anders (Texas 10-11: telefoon eerst, alles zichtbaar, helder en rustig). */
@media (max-width: 720px) {
  .guide-page { padding-block: 10px 0; }
  .guide-page .eyebrow, .guide-lead, .guide-note { display: none; }
  .guide-page h1 { font-size: 22px; margin: 0; }
  .guide-page .installed-note { margin: 8px 0 0; font-size: 14px; }
  .guide-card { margin-top: 10px; padding: 12px 12px 0; gap: 10px; border-radius: 22px; }
  .guide-pick { gap: 6px; }
  .guide-pick button { grid-auto-flow: column; align-items: center; justify-content: center; gap: 6px; padding: 8px 4px; border-radius: 14px; }
  .guide-pick button svg { width: 18px; height: 18px; margin: 0; }
  .guide-pick button b { font-size: 14px; line-height: 1.15; }
  .guide-pick button small { display: none; }
  .guide-phase { flex-wrap: nowrap; gap: 6px; }
  .guide-phase button { flex: 1 1 0; min-width: 0; padding: 8px 6px; font-size: 13px; }
  .guide-stage { gap: 10px; }
  .guide-say { display: contents; }
  .guide-no { order: 1; justify-self: start; font-size: 14px; }
  .guide-no b { width: 32px; height: 32px; font-size: 16px; }
  .guide-say h2 { order: 2; justify-self: stretch; font-size: 21px; }
  .guide-s { order: 3; justify-self: stretch; font-size: 15px; }
  /* Alles wat je leest of aanraakt staat boven de tekening; de tekening komt als laatste. */
  .guide-action, .guide-warn, .guide-tip, .guide-planb { order: 4; justify-self: stretch; font-size: 15px; }
  .guide-phone { order: 5; zoom: .52; }
  /* Code en kopieerknop op één regel, zodat de tekening in beeld blijft. */
  .guide-code { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; }
  .guide-code .button { padding: 10px 14px; font-size: 15px; }

  .guide-dots { order: 7; justify-self: center; }
  .guide-nav { order: 8; justify-self: stretch; display: grid; grid-template-columns: 1fr 2fr; gap: 10px;
    position: sticky; bottom: 0; z-index: 5; margin-inline: -12px; padding: 10px 12px max(12px, env(safe-area-inset-bottom, 0px));
    background: var(--paper); border-top: 1px solid var(--line); }
  .guide-nav .button { padding: 14px 18px; font-size: 17px; }
}

/* ---------- alles wat de telefoon nog meer toont, wazig ---------- */
/* De klant moet het scherm herkennen (alle rijen en knoppen staan erop) en toch maar één ding
   zien: wat hij moet aanraken. De rest blijft op zijn plek, maar onscherp. */
.os .bl { filter: blur(2.4px); opacity: .7; }
.os-achter { position: absolute; inset: 0 12px 14px; display: flex; flex-direction: column; filter: blur(3px); }
.os-achter .bl { filter: none; opacity: 1; }
.os-search { height: 34px; border-radius: 11px; background: #E3E3E8; margin: 0 2px 12px; flex: none; }
.os-red span { color: #FF3B30; }
.os-blue span { color: #007AFF; }
.os-keys { margin-top: 12px; height: 150px; border-radius: 10px; background: repeating-linear-gradient(90deg, #fff 0 22px, transparent 22px 26px) 0 0 / 100% 34px, #D1D3D9; flex: none; }

/* fysieke knoppen aan de zijkant */
.guide-phone { position: relative; }
.guide-phone::before { content: ""; position: absolute; left: -3px; top: 22%; width: 3px; height: 64px; border-radius: 2px 0 0 2px; background: #2a3138; box-shadow: 0 -38px 0 #2a3138; }
.guide-phone::after { content: ""; position: absolute; right: -3px; top: 27%; width: 3px; height: 74px; border-radius: 0 2px 2px 0; background: #2a3138; }

/* beginscherm */
.os.op-home { color: #fff; background: linear-gradient(160deg, #F2A65A 0%, #C9667A 45%, #3B4E8C 100%); }
.op-home .os-home { background: #fff; }
.os-widget { display: grid; margin: 6px 4px 16px; padding: 12px 14px; border-radius: 20px; background: rgba(255, 255, 255, .22); }
.os-widget b { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: #FF6B5E; }
.os-widget span { font-size: 32px; font-weight: 300; line-height: 1; }
.os-apps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px 8px; }
.os-app { display: grid; justify-items: center; gap: 4px; position: relative; }
.os-app i { width: 50px; height: 50px; border-radius: 13px; background: var(--c); display: grid; place-items: center; box-shadow: 0 2px 6px rgba(0, 0, 0, .15); }
.os-app small { font-size: 10px; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .3); white-space: nowrap; }
.os-dock { margin-top: auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 10px 6px; border-radius: 26px; background: rgba(255, 255, 255, .28); }
.os-dock .os-app small { display: none; }
.os-mailapp i { background: linear-gradient(180deg, #4FB4FF, #1A6CFF); color: #fff; }
.os-mailapp i svg { width: 32px; height: 32px; }
.os-mailapp.hl { outline-offset: 3px; border-radius: 16px; }
.os .os-dock .os-mailapp small { display: block; position: absolute; bottom: -18px; font-weight: 700; }
.os-gsearch { margin: 18px 4px 12px; height: 40px; border-radius: 999px; background: rgba(255, 255, 255, .85); }
.os:not(.iphone).op-home .os-dock { background: transparent; }
.os:not(.iphone) .os-mailapp i { background: #fff; color: #EA4335; border-radius: 50%; }
.os:not(.iphone) .os-app i { border-radius: 50%; }

/* inbox */
.os-inbox { display: grid; background: #fff; border-radius: 12px; }
.os-msg { position: relative; display: flex; gap: 10px; padding: 10px 12px 10px 18px; border-bottom: 1px solid #E5E5EA; }
.os-msg .os-av { display: none; }
.os-msg.unread::before { content: ""; position: absolute; left: 6px; top: 16px; width: 8px; height: 8px; border-radius: 50%; background: #007AFF; }
.os-msg-tekst { flex: 1; min-width: 0; display: grid; font-size: 13px; }
.os-msg-kop { display: flex; justify-content: space-between; gap: 6px; }
.os-msg-kop time { color: #8A8A8E; font-size: 12px; }
.os-msg-tekst small { color: #8A8A8E; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.os-msg.unread .os-msg-tekst > span { font-weight: 600; }
.os-fab { position: absolute; right: 16px; bottom: 22px; padding: 14px 18px; border-radius: 16px; background: #C2E7FF; color: #001D35; font-weight: 600; }
.os:not(.iphone) .os-inbox { background: transparent; gap: 2px; }
.os:not(.iphone) .os-msg { border: 0; padding: 10px 8px; }
.os:not(.iphone) .os-msg .os-av { display: grid; flex: none; width: 36px; height: 36px; font-size: 15px; }
.os:not(.iphone) .os-msg.unread::before { display: none; }
.os:not(.iphone) .os-msg.unread { background: #fff; border-radius: 14px; }

/* de mail zelf */
.os-from { display: flex; align-items: center; gap: 9px; padding: 0 4px 10px; }
.os-from > span:last-child { display: grid; font-size: 14px; }
.os-from small { color: #6D6D72; font-size: 12px; }
.os-mail-h { font: 700 18px/1.15 var(--display); color: var(--ink); }
.os-lines { margin: 0; display: grid; gap: 6px; }
.os-lines i { display: block; height: 7px; border-radius: 4px; background: #D8D8DE; }
.os-lines i:nth-child(2) { width: 82%; }
.os-lines i:nth-child(3) { width: 64%; }
.os-mbtn2 { position: relative; display: block; text-align: center; padding: 10px; border-radius: 999px; border: 2px solid var(--ink); color: var(--ink); font-weight: 700; font-size: 13.5px; background: #fff; }
.os .os-app.hl::after { right: auto; left: 50%; top: 25px; margin-left: -15px; }