/* Homepage in één kleur: donker Melo-blauw (Lucas 5 nov, naar firefox.com: "1 achtergrond kleur.. en zo verder", gekozen:
   donker Melo-blauw, eerst de homepage). Zoals Firefox: de hele pagina één basis, blokken net lichter of donkerder van dezelfde
   kleur, een felle blauwe gloed als accent, lichte kaarten erop, witte tekst. Alleen voor body:is(.home, .nacht); geldt in licht én donker. */
html body:is(.home, .nacht) {
  --kd-basis: #071633; --kd-hoger: #0d2752; --kd-dieper: #040d22; --kd-gloed: #1a8cff; --kd-licht: #e7eefb; --kd-accent: #9cc8ff;
  --bg: var(--kd-basis); --ink: #fff; --muted: #a9bddb; --faint: #8aa0c2; --soft: var(--kd-hoger); --line: rgba(255, 255, 255, .1);
  --card: var(--kd-hoger); --action: var(--kd-accent);
  background: var(--kd-basis); color: #fff; }
body:is(.home, .nacht) main, body:is(.home, .nacht) section { color: inherit; }

/* Menu */
body:is(.home, .nacht) .nav.scrolled { background: rgba(7, 22, 51, .78); box-shadow: 0 1px 0 rgba(255, 255, 255, .06); }
body:is(.home, .nacht) .nav-links a, body:is(.home, .nacht) .nav a { color: #fff; }
body:is(.home, .nacht) .nav .nav-cta { background: linear-gradient(180deg, #8fd0ff, #4fa8ff); color: var(--kd-basis); }
body:is(.home, .nacht) .nav img, body:is(.home, .nacht) .nav svg.logo { filter: brightness(0) invert(1); }

/* Hero: grote kop, felle knop, gloed onderin (zoals Firefox) */
body:is(.home, .nacht) .k-hero { position: relative; }
body:is(.home, .nacht) .k-hero::before { content: ""; position: absolute; z-index: -1; left: 50%; top: 0; width: 100vw; height: 100%; transform: translateX(-50%);
  background: radial-gradient(60% 260px at 50% 100%, rgba(26, 140, 255, .5), transparent 100%), linear-gradient(180deg, var(--kd-basis), #0b2b62); pointer-events: none; }
body:is(.home, .nacht) .k-display { color: #fff; }
body:is(.home, .nacht) .k-swap { color: #6fb6ff; }
body:is(.home, .nacht) .k-lead { color: #c9d8ee; }
body:is(.home, .nacht) .k-btn { background: linear-gradient(180deg, #a6dbff 0%, #4fa8ff 100%); color: var(--kd-basis); font-weight: 600; border-radius: 999px;
  box-shadow: 0 10px 30px -10px rgba(79, 168, 255, .7); }
body:is(.home, .nacht) .k-try { color: var(--kd-accent); }

/* Tabs: geen lichtblauw verloop meer, maar een gloed op de basis */
body:is(.home, .nacht) .mt-bg span { background: radial-gradient(60% 260px at 50% 0, rgba(26, 140, 255, .5), transparent 100%), linear-gradient(180deg, #0b2b62 0, var(--kd-basis) 420px) !important; }
body:is(.home, .nacht) .mt-tab { color: #c9d8ee; }
body:is(.home, .nacht) .mt-tab[aria-selected="true"] { background: rgba(255, 255, 255, .14); color: #fff; }
body:is(.home, .nacht) .mt-pause { background: #fff; color: var(--kd-basis); }
body:is(.home, .nacht) .mt-kop { color: #fff; }
body:is(.home, .nacht) .mw { box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .6); border-radius: 14px; }

/* Apps en woordwiel: op de basis */
body:is(.home, .nacht) .mt + .fam, body:is(.home, .nacht) .mt + .fam + .k-int { background: none !important; }
body:is(.home, .nacht) .fam-apps h2, body:is(.home, .nacht) .mt + .fam h2, body:is(.home, .nacht) .mt + .fam + .k-int .k-int-mid h2 { color: #fff !important; }
body:is(.home, .nacht) .mt + .fam .fam-apps .k-btn { background: linear-gradient(180deg, #a6dbff 0%, #4fa8ff 100%) !important; color: var(--kd-basis) !important; }
body:is(.home, .nacht) .mt + .fam + .k-int .wiel-rij li { color: rgba(255, 255, 255, .28) !important; }
body:is(.home, .nacht) .mt + .fam + .k-int .wiel-rij li.nu, body:is(.home, .nacht) .mt + .fam + .k-int .wiel:not(.loopt) .wiel-rij li:first-child { color: #6fb6ff !important; }
body:is(.home, .nacht) .mt + .fam + .k-int .k-int-dot { box-shadow: 0 14px 34px -14px rgba(0, 0, 0, .6) !important; }
body:is(.home, .nacht) .mt + .fam + .k-int + .k-prive::before, body:is(.home, .nacht) .mt + .fam + .k-int + .k-deck::before { display: none; }

/* Vier beloftes: een vlak net lichter dan de basis */
body:is(.home, .nacht) .k-prive { background: var(--kd-hoger); }

/* Teams, nieuws, waarom, download, voet */
body:is(.home, .nacht) .teams-band, body:is(.home, .nacht) .teams-band * { color: inherit; }
body:is(.home, .nacht) .teams-card { background: var(--kd-hoger) !important; box-shadow: none !important; color: #fff; }
body:is(.home, .nacht) .teams-card p, body:is(.home, .nacht) .teams-card .k-sub { color: #c9d8ee; }
body:is(.home, .nacht) .home-news a, body:is(.home, .nacht) .home-news h3 { color: #fff; }
body:is(.home, .nacht) .hn-head a { color: var(--kd-accent); }
body:is(.home, .nacht) .final-panel { background: none; }
body:is(.home, .nacht) footer, body:is(.home, .nacht) .foot-bottom { background: var(--kd-dieper); }
body:is(.home, .nacht) .foot-cols a { color: #a9bddb; }
body:is(.home, .nacht) .foot-cols a:hover, body:is(.home, .nacht) .foot-cols h4 { color: #fff; }

/* Het Melo-venster blijft licht op het donkere blauw, ook als je Mac in donkere modus staat (lichte kaart op donker, zoals Firefox). */
html body:is(.home, .nacht) .mw { --mw-bg: #fff !important; --mw-lijst: #f4f5f7 !important; --mw-ink: #1d1d1f !important; --mw-grijs: #6e6e73 !important;
  --mw-vlak: #fff !important; --mw-knop: rgba(0, 0, 0, .05) !important; }
html body:is(.home, .nacht) .mp { --mp-pil: #efeff0 !important; --mp-veld: #f3f3f4 !important; --mp-kies: rgba(0, 0, 0, .07) !important; }
html body:is(.home, .nacht) .mw-bar i { background: rgba(0, 0, 0, .14) !important; }
html body:is(.home, .nacht) .mw-lijst { border-color: rgba(0, 0, 0, .06) !important; }

/* Telefoon: de gloed blijft binnen de hero en de tabs beginnen op de basiskleur, dan is er geen naad. */
@media (max-width: 760px) {
  body:is(.home, .nacht) .k-hero::before { background: radial-gradient(90% 55% at 50% 45%, rgba(26, 140, 255, .38), transparent 75%), var(--kd-basis); }
  body:is(.home, .nacht) .mt-bg span { background: radial-gradient(90% 260px at 50% 230px, rgba(26, 140, 255, .28), transparent 75%), var(--kd-basis) !important; }
}
/* Knoppen ook in donkere modus fel blauw (dark.css maakt ze anders wit). */
html body:is(.home, .nacht) .k-btn, html body:is(.home, .nacht) .nav .nav-cta { background: linear-gradient(180deg, #a6dbff 0%, #4fa8ff 100%) !important; color: #071633 !important; }

/* Overgangen zoals firefox.com (Lucas 5 nov: "kijk even naar de overgangen", "zo moet het ook bij ons maar dan voor de dingen
   die er bij ons instaan"): de hero is één paneel met een grote ronde onderrand, van donker naar licht, met het product erin dat
   door de rand wordt afgesneden. Daarna alles op dezelfde basis, zonder vervagingen: blokken los op de basis of als strak
   afgerond paneel in een iets lichtere tint. Onderaan een groot lichter paneel. */
body:is(.home, .nacht) .k-hero { padding-bottom: 0; }
body:is(.home, .nacht) .k-hero::before { height: 100%; border-radius: 0 0 clamp(48px, 9vw, 160px) clamp(48px, 9vw, 160px);
  background: radial-gradient(80% 60% at 50% 100%, rgba(166, 219, 255, .9), transparent 70%),
              linear-gradient(180deg, var(--kd-basis) 0%, #0d2f6e 40%, #2f6fd0 72%, #9fcaf6 100%) !important; }
body:is(.home, .nacht) .k-hero-shot { position: relative; width: min(1080px, 100%); height: clamp(260px, 30vw, 420px); margin: clamp(40px, 5vw, 72px) auto 0;
  overflow: hidden; border-radius: 16px 16px 0 0; box-shadow: 0 -10px 60px -10px rgba(7, 22, 51, .45); }
body:is(.home, .nacht) .k-hero-shot img { display: block; width: 100%; height: auto; }
body:is(.home, .nacht) .k-scroll { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); padding: 10px 22px 12px; border-radius: 22px 22px 0 0;
  background: #1a56c8; color: #fff; font-size: 15px; font-weight: 500; text-decoration: none; white-space: nowrap; }
body:is(.home, .nacht) .k-scroll:hover { background: #1f64e6; text-decoration: none; }

/* Tabs: op de basis, geen gloed meer bovenaan (de hero eindigt nu zelf). Een zachte gloed achter de kop blijft. */
body:is(.home, .nacht) .mt-bg span, body:is(.home, .nacht) .mt-bg span.on { background: radial-gradient(55% 300px at 50% 200px, rgba(26, 140, 255, .16), transparent 75%), var(--kd-basis) !important; }
body:is(.home, .nacht) .k-hero + .mt { padding-top: clamp(80px, 9vw, 130px); }

/* Beloftes: de kaarten staan direct op de basis, zonder vlak eromheen (zoals Firefox). */
body:is(.home, .nacht) .k-prive { background: none; padding-left: 0; padding-right: 0; margin-left: auto; margin-right: auto; max-width: 1500px; }
body:is(.home, .nacht) .mt + .fam + .k-int + .k-prive { margin-top: -200px; }

/* Teams als strak paneel in de lichtere tint; nieuws en waarom op de basis. */
body:is(.home, .nacht) .teams-card { border-radius: clamp(24px, 3vw, 40px) !important; }

/* Downloaden: een groot lichter paneel met ronde hoeken en een gloed, zoals het slotblok van Firefox. */
body:is(.home, .nacht) .final { max-width: none; padding: clamp(40px, 6vw, 80px) var(--k-edge, 16px) 0; }
body:is(.home, .nacht) .final-panel { border-radius: clamp(32px, 5vw, 80px) clamp(32px, 5vw, 80px) 0 0; padding: clamp(80px, 10vw, 140px) 20px;
  background: radial-gradient(70% 90% at 50% 0%, rgba(26, 140, 255, .45), transparent 70%), var(--kd-hoger) !important; }
body:is(.home, .nacht) footer { background: var(--kd-hoger); }
body:is(.home, .nacht) .foot-bottom { background: var(--kd-hoger); border-top: 1px solid rgba(255, 255, 255, .08); }
@media (max-width: 760px) {
  body:is(.home, .nacht) .k-hero::before { border-radius: 0 0 48px 48px; background: radial-gradient(90% 50% at 50% 100%, rgba(166, 219, 255, .9), transparent 70%),
    linear-gradient(180deg, var(--kd-basis) 0%, #0d2f6e 45%, #2f6fd0 75%, #9fcaf6 100%) !important; }
  body:is(.home, .nacht) .k-hero-shot { height: 210px; border-radius: 12px 12px 0 0; }
  body:is(.home, .nacht) .k-hero-shot img { width: 170%; max-width: none; margin-left: -66%; }
  body:is(.home, .nacht) .mt-bg span, body:is(.home, .nacht) .mt-bg span.on { background: var(--kd-basis) !important; }
}
body:is(.home, .nacht) .k-prive { padding-left: var(--gutter); padding-right: var(--gutter); }
body:is(.home, .nacht) .foot-logo img { filter: brightness(0) invert(1); opacity: .9; }

/* Plaatshouders in de Teams-demo duidelijk (Lucas 5 nov: "gebruik duidelijke kleuren voor die placeholders"): elk soort een
   eigen felle kleur met donkere tekst; bedrijf helder blauw, IBAN geel. */
html body:is(.home, .nacht) .teams-demo .ph { padding: 1px 6px; border-radius: 6px; color: #071633 !important; font-weight: 700; }
html body:is(.home, .nacht) .teams-demo .ph:nth-of-type(1) { background: #7cc4ff !important; }
html body:is(.home, .nacht) .teams-demo .ph:nth-of-type(2) { background: #ffd36b !important; }

/* 5 nov (Lucas: "niet mooi dit"): het venster stak links en rechts onder de ronde hoeken van de hero uit, en de pil was te groot.
   Het venster blijft nu binnen het rechte stuk (schermbreedte min twee keer de hoekstraal), de pil is klein en rustig. */
body:is(.home, .nacht) .k-hero-shot { width: min(1040px, calc(100vw - 2 * clamp(48px, 9vw, 160px) - 48px)); height: clamp(240px, 26vw, 380px);
  border-radius: 14px 14px 0 0; box-shadow: 0 -18px 60px -24px rgba(7, 22, 51, .55), 0 0 0 1px rgba(255, 255, 255, .5); }
body:is(.home, .nacht) .k-scroll { bottom: 14px; padding: 8px 16px; border-radius: 999px; font-size: 13px; font-weight: 500;
  background: rgba(7, 22, 51, .82); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 6px 20px -8px rgba(7, 22, 51, .6); }
body:is(.home, .nacht) .k-scroll:hover { background: rgba(7, 22, 51, .95); }
@media (max-width: 760px) {
  body:is(.home, .nacht) .k-hero-shot { width: calc(100vw - 2 * 48px - 16px); height: 200px; }
  body:is(.home, .nacht) .k-scroll { font-size: 12px; bottom: 10px; }
}

/* 5 nov (Lucas: "scroll voor meer moet wel aan de onderkant van de homepage staan"): de pil staat midden op de onderrand van
   het hero-paneel, half eroverheen, zoals bij Firefox. Op smalle schermen het hele venster kleiner in beeld, geen uitsnede. */
body:is(.home, .nacht) .k-hero > .k-scroll { position: absolute; z-index: 2; left: 50%; bottom: 0; transform: translate(-50%, 50%);
  padding: 11px 20px; font-size: 14px; background: #1a56c8; box-shadow: 0 10px 28px -10px rgba(7, 22, 51, .8), 0 0 0 4px var(--kd-basis); }
body:is(.home, .nacht) .k-hero > .k-scroll:hover { background: #1f64e6; }
@media (max-width: 760px) {
  body:is(.home, .nacht) .k-hero-shot { height: auto; aspect-ratio: 1800 / 1000; }
  body:is(.home, .nacht) .k-hero-shot img { width: 100%; margin-left: 0; }
  body:is(.home, .nacht) .k-hero > .k-scroll { font-size: 13px; padding: 9px 16px; }
}
/* "Snap je?": de hero vult precies het eerste scherm, zodat de pil bij binnenkomst onderaan het scherm staat (zoals Firefox). */
body:is(.home, .nacht) .k-hero { min-height: 100svh; grid-template-rows: 1fr auto; align-content: stretch; }
body:is(.home, .nacht) .k-hero-copy { align-self: center; }
body:is(.home, .nacht) .k-hero-shot { align-self: end; }
body:is(.home, .nacht) .k-hero > .k-scroll { bottom: 16px; transform: translateX(-50%); box-shadow: 0 10px 28px -10px rgba(7, 22, 51, .8); }
/* Op elk scherm: tekst in het midden van de vrije ruimte, venster onderaan, en het venster krimpt mee met de schermhoogte zodat
   de pil bij binnenkomst altijd onderaan in beeld staat (ook op een laptop van 720 hoog). */
body:is(.home, .nacht) .k-hero { display: flex; flex-direction: column; align-items: center; }
body:is(.home, .nacht) .k-hero-copy { margin: auto 0; padding-top: 24px; }
body:is(.home, .nacht) .k-hero-shot { flex: none; margin-top: 32px; height: clamp(150px, calc(100svh - 500px), 380px); }
@media (max-width: 760px) {
  body:is(.home, .nacht) .k-hero-shot { aspect-ratio: auto; height: clamp(150px, calc(100svh - 470px), 260px); }
  body:is(.home, .nacht) .k-hero-shot img { width: 100%; }
}
@media (max-width: 760px) {
  body:is(.home, .nacht) .k-hero-shot { height: auto; aspect-ratio: 1800 / 1140; width: min(calc(100vw - 112px), calc((100svh - 470px) * 1.58)); min-width: 200px; }
}

/* Menu zoals firefox.com (Lucas 5 nov: "dit is het enige wat firefox heeft voor nav bar"): drie onderwerpen; elk een compact
   donker paneel onder het woord met icoon + naam, dunne lijnen ertussen en een omlijnde knop onderaan. */
body:is(.home, .nacht) .nav-top { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; }
@media (min-width: 641px) {
  body:is(.home, .nacht) .nav-links { gap: 34px; margin-left: auto; margin-right: auto; }
  body:is(.home, .nacht) .nav-item.has-mega { position: relative; }
  body:is(.home, .nacht) .nav-item.has-mega > .nav-top::after { content: ""; width: 6px; height: 6px; margin-top: -3px; border: solid currentColor; border-width: 0 1.6px 1.6px 0;
    transform: rotate(45deg); transition: transform .2s; opacity: .8; }
  body:is(.home, .nacht) .nav-item.has-mega:hover > .nav-top::after, body:is(.home, .nacht) .nav-item.has-mega:focus-within > .nav-top::after { transform: rotate(-135deg); margin-top: 3px; }
  body:is(.home, .nacht) .mega.dd { left: 50%; right: auto; top: calc(100% + 14px); width: 320px; border-radius: 22px; background: var(--kd-basis);
    border: 1px solid rgba(124, 180, 255, .45); box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .6); transform: translate(-50%, -6px); }
  body:is(.home, .nacht) .nav-item:hover > .mega.dd, body:is(.home, .nacht) .nav-item:focus-within > .mega.dd { transform: translate(-50%, 0); }
  body:is(.home, .nacht) .nav-item.shut > .mega.dd { transform: translate(-50%, -6px); }
  body:is(.home, .nacht) .nav:has(.nav-item:hover > .mega), body:is(.home, .nacht) .nav:has(.nav-item:focus-within > .mega) { background: rgba(7, 22, 51, .92) !important; }
  body:is(.home, .nacht) .mega.dd .mega-in { display: block; max-width: none; padding: 26px 28px 28px; }
  body:is(.home, .nacht) .nav-links .dd-a { display: flex; align-items: center; gap: 14px; width: auto; padding: 11px 0; color: #fff; font-size: 17px; font-weight: 500; }
  body:is(.home, .nacht) .nav-links .dd-a:hover { color: var(--kd-accent); text-decoration: none; }
  body:is(.home, .nacht) .dd-a.ext::after { content: "↗" / ""; margin-left: 6px; opacity: .8; }
  body:is(.home, .nacht) .dd-i { flex: none; width: 22px; height: 22px; color: var(--kd-accent); }
  body:is(.home, .nacht) .dd-lijn { margin: 14px 0; border: 0; border-top: 1px solid rgba(124, 180, 255, .45); }
  body:is(.home, .nacht) .nav-links .dd-knop { display: flex; justify-content: center; margin-top: 6px; padding: 12px 18px; border: 1.5px solid rgba(255, 255, 255, .85);
    border-radius: 999px; color: #fff; font-size: 16px; font-weight: 600; }
  body:is(.home, .nacht) .nav-links .dd-knop:hover { background: rgba(255, 255, 255, .08); text-decoration: none; }
}
@media (max-width: 640px) {
  body:is(.home, .nacht) .dd-a { display: flex !important; align-items: center; gap: 14px; }
  body:is(.home, .nacht) .dd-i { flex: none; width: 24px; height: 24px; color: var(--kd-accent); }
  body:is(.home, .nacht) .dd-lijn { margin: 12px 0; border: 0; border-top: 1px solid rgba(124, 180, 255, .3); }
  body:is(.home, .nacht) .nav-links .dd-knop { display: inline-flex !important; margin-top: 10px; padding: 12px 20px !important; border: 1.5px solid #fff; border-radius: 999px; font-size: 17px !important; }
  body:is(.home, .nacht) .nav.open .nav-links, body:is(.home, .nacht) .nav-links { background: var(--kd-basis); }
}
@media (min-width: 641px) {
  body:is(.home, .nacht) .nav-links { flex: 1; justify-content: center; margin: 0 !important; }
  body:is(.home, .nacht) .nav .nav-cta { margin-left: 0; }
  body:is(.home, .nacht) .nav-top { font-size: 16px; }
}
html body:is(.home, .nacht) .menu-cta { background: linear-gradient(180deg, #a6dbff 0%, #4fa8ff 100%) !important; color: #071633 !important; }

/* Hero: Mac en iPhone samen (Lucas 5 nov: "dit is niet duidelijk voor iphone of iets"). De iPhone staat rechts voor het
   Mac-venster, steekt erboven uit en wordt onderaan door de ronde rand van de hero afgesneden. */
body:is(.home, .nacht) .k-hero-shot { overflow: visible; clip-path: inset(-600px -600px 0 -600px); box-shadow: none; border-radius: 0; }
body:is(.home, .nacht) .k-hero-mac { height: 100%; overflow: hidden; border-radius: 14px 14px 0 0; box-shadow: 0 -18px 60px -24px rgba(7, 22, 51, .55), 0 0 0 1px rgba(255, 255, 255, .5); }
body:is(.home, .nacht) .k-hero-mac img { display: block; width: 100%; height: auto; }
body:is(.home, .nacht) .k-hero-phone { position: absolute; right: -3%; top: -46px; width: clamp(140px, 17vw, 236px); aspect-ratio: 598 / 1300; padding: 7px;
  border-radius: clamp(26px, 3vw, 40px); background: #0b0d12; box-shadow: 0 30px 70px -20px rgba(7, 22, 51, .7), inset 0 0 0 1.5px rgba(255, 255, 255, .14); }
body:is(.home, .nacht) .k-hero-phone img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; border-radius: clamp(20px, 2.4vw, 33px); }
@media (max-width: 760px) {
  body:is(.home, .nacht) .k-hero-phone { right: -10px; top: -28px; width: 34%; padding: 4px; border-radius: 20px; }
  body:is(.home, .nacht) .k-hero-phone img { border-radius: 16px; }
  body:is(.home, .nacht) .k-hero-mac img { width: 100%; margin-left: 0; }
}

/* Hero als tekening (Lucas 5 nov, naar de tekening op firefox.com: "maak hier dit van maar dan voor kamelo"): desktopvenster
   en telefoon in Melo-blauw, de kameleon gluurt over de rand, de krulstaart hangt langs de telefoon. De onderkant valt weg
   achter de ronde rand van de hero. */
body:is(.home, .nacht) .k-hero-ill { width: min(1100px, calc(100vw - 2 * clamp(48px, 9vw, 160px) - 24px)); overflow: visible;
  clip-path: inset(-600px -600px 0 -600px); box-shadow: none; border-radius: 0; }
body:is(.home, .nacht) .k-hero-ill svg { display: block; width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 30px 50px rgba(7, 22, 51, .35)); }
.kh-kam { transform-box: fill-box; transform-origin: 50% 100%; }
/* De kameleon staat stil (Lucas 5 nov: "maar nu niet de kameleon bewegen"). */
@media (max-width: 760px) {
  body:is(.home, .nacht) .k-hero-ill { width: calc(100vw - 32px); aspect-ratio: auto; height: clamp(150px, calc(100svh - 470px), 300px); min-width: 0; }
}

/* Het hele tafereel in beeld, zoals op firefox.com (Lucas 5 nov: "de onderkant ziet er hier beter uit"): niets meer afgesneden.
   De hoogte schaalt mee met het scherm, zodat de pil bij binnenkomst onderaan blijft. */
body:is(.home, .nacht) .k-hero-ill { width: auto; height: auto; clip-path: none; margin-bottom: 44px; }
body:is(.home, .nacht) .k-hero-ill svg { width: auto; height: clamp(220px, calc(100svh - 500px), 540px); max-width: calc(100vw - 2 * clamp(48px, 9vw, 160px) - 24px); }
@media (max-width: 760px) {
  body:is(.home, .nacht) .k-hero-ill { width: auto; height: auto; margin-bottom: 56px; }
  body:is(.home, .nacht) .k-hero-ill svg { height: auto; width: calc(100vw - 40px); max-width: none; max-height: calc(100svh - 470px); }
}
body:is(.home, .nacht) .k-hero-ill { margin-top: 20px; margin-bottom: 70px; }
body:is(.home, .nacht) .k-hero-ill svg { height: clamp(200px, calc(100svh - 590px), 520px); }
body:is(.home, .nacht) .k-hero > .k-scroll { bottom: 18px; }

/* Tabs schoon (Lucas 5 nov: "die tabs zijn niet clean"): de actieve tab werd een witte vlek (witte vulling over witte tekst).
   Nu een effen witte pil met donkerblauwe tekst, zonder de vulling die meeloopt; de rest lichtblauw op de basis. */
html body:is(.home, .nacht) .mt-tab .mt-fill { display: none; }
html body:is(.home, .nacht) .mt-tab { color: #b9cbe6; transition: background .25s, color .25s; }
html body:is(.home, .nacht) .mt-tab:hover { background: rgba(255, 255, 255, .08); color: #fff; }
html body:is(.home, .nacht) .mt-tab[aria-selected="true"] { background: #fff; color: #071633; }
/* Telefoon: alle tabs op één regel, ook in het Duits ("Work" werd "Wo", twee regels was rommelig). De pauzeknop valt daar
   weg; één tik op een tab stopt het wisselen al (melo-tabs.js). */
@media (max-width: 560px) {
  html body:is(.home, .nacht) .mt-pause { display: none !important; }
  html body:is(.home, .nacht) .mt-bar { justify-content: center; }
  html body:is(.home, .nacht) .mt-tabs { gap: 0; justify-content: center; }
  html body:is(.home, .nacht) .mt-tab { padding: 0 5px; font-size: 13px; height: 36px; }
  html body:is(.home, .nacht) .mt-tab[aria-selected="true"] { padding: 0 10px; }
}

/* Chatvensters kaler (Lucas 5 nov: "deze dingen weghalen bij die chats"): geen drie bolletjes en geen titelregel bovenin
   (die herhaalde de vraag). Het gesprek schuift iets omhoog. */
html body:is(.home, .nacht) .mp .mw-bar, html body:is(.home, .nacht) .mp .mp-titel { display: none; }
html body:is(.home, .nacht) .mp .mp-zij { padding-top: 18px; }
html body:is(.home, .nacht) .mp .mp-kol { top: calc(30 * var(--u)); }
@media (max-width: 640px) { html body:is(.home, .nacht) .mp .mp-kol { top: calc(40 * var(--u)); } }
/* Teams kaal en clean (Lucas 5 nov: "nee vind dit gwn niet mooi... maak het een clean design"): kop in het midden, één rustig
   vlak met drie punten naast elkaar, gescheiden door dunne lijnen, geen iconen of nagemaakte schermen, en één witte knop. */
body:is(.home, .nacht) .tp { max-width: 1240px; margin: 0 auto; padding: clamp(80px, 9vw, 140px) var(--gutter, 24px) clamp(40px, 5vw, 80px); text-align: center; }
body:is(.home, .nacht) .tp-kop { max-width: 14em; margin: 0 auto clamp(36px, 4.5vw, 64px); color: #fff; font-size: clamp(32px, 4.4vw, 60px); line-height: 1.05; letter-spacing: -.035em; text-wrap: balance; }
body:is(.home, .nacht) .tp-vlak { display: grid; grid-template-columns: repeat(3, 1fr); padding: clamp(36px, 4.5vw, 64px) 0; border-radius: clamp(28px, 3vw, 44px); background: #0f2554; text-align: left; }
body:is(.home, .nacht) .tp-punt { padding: 0 clamp(24px, 3vw, 48px); }
body:is(.home, .nacht) .tp-punt + .tp-punt { border-left: 1px solid rgba(255, 255, 255, .14); }
body:is(.home, .nacht) .tp-punt h3 { margin: 0 0 12px; color: #fff; font-size: clamp(20px, 1.8vw, 26px); line-height: 1.2; letter-spacing: -.02em; }
body:is(.home, .nacht) .tp-punt p { margin: 0; color: #b9c8e2; font-size: clamp(15.5px, 1.2vw, 17px); line-height: 1.6; }
body:is(.home, .nacht) .tp-knop { margin: clamp(32px, 4vw, 48px) 0 0; }
html body:is(.home, .nacht) .tp-knop a { display: inline-flex; align-items: center; min-height: 50px; padding: 0 28px; border-radius: 999px; background: #fff !important; color: #071633 !important; font-size: 16px; font-weight: 600; text-decoration: none; }
html body:is(.home, .nacht) .tp-knop a:hover { background: #e3edff !important; }
@media (max-width: 760px) {
  body:is(.home, .nacht) .tp-vlak { grid-template-columns: 1fr; padding: 8px 0; border-radius: 28px; }
  body:is(.home, .nacht) .tp-punt { padding: 24px; }
  body:is(.home, .nacht) .tp-punt + .tp-punt { border-left: 0; border-top: 1px solid rgba(255, 255, 255, .14); }
}
/* Nieuwskaarten op de homepage (Lucas 5 nov: "die nieuwsartikelen mogen een betere kaart hebben"): een tegel in Melo-blauw met
   het app-icoon van Melo in het midden en het onderwerp als klein label eronder, ruimere ronde hoeken, het soort bericht als
   pilletje. Alleen CSS, zodat home-news.mjs de kaarten gewoon kan blijven vullen. */
body:is(.home, .nacht) .hn-grid .nw-art { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
  aspect-ratio: 4 / 3; border-radius: clamp(22px, 2.4vw, 32px); color: #fff;
  background: radial-gradient(80% 70% at 50% 0%, #3d7fea 0%, rgba(61, 127, 234, 0) 70%), linear-gradient(180deg, #1a4189, #0f2554) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); transition: transform .45s cubic-bezier(.2, .7, .2, 1); }
body:is(.home, .nacht) .hn-grid .nw-art.a6 { background: radial-gradient(80% 70% at 85% 0%, #5a8dff 0%, rgba(90, 141, 255, 0) 70%), linear-gradient(200deg, #1d3f8f, #0d1f4a) !important; }
body:is(.home, .nacht) .hn-grid .nw-art::before { content: ""; width: clamp(72px, 7vw, 104px); aspect-ratio: 1; border-radius: 23%;
  background: url(/assets/melo-app-icoon.png) center / cover no-repeat; box-shadow: 0 20px 44px -14px rgba(0, 0, 0, .65); }
body:is(.home, .nacht) .hn-grid .nw-art span { padding: 6px 14px; border-radius: 999px; background: rgba(255, 255, 255, .1); color: #d5e2f5;
  font-size: 14px; font-weight: 600; letter-spacing: 0; line-height: 1.2; }
body:is(.home, .nacht) .hn-grid .nw-card a:hover .nw-art { transform: translateY(-4px); }
body:is(.home, .nacht) .hn-grid h3 { margin-top: 20px; color: #fff; font-size: clamp(19px, 1.5vw, 22px); line-height: 1.3; letter-spacing: -.015em; }
body:is(.home, .nacht) .hn-grid .nw-meta { align-items: center; margin-top: 14px; }
body:is(.home, .nacht) .hn-grid .nw-meta span { padding: 3px 10px; border-radius: 999px; background: rgba(255, 255, 255, .08); color: #d5e2f5; font-size: 13px; font-weight: 600; }
body:is(.home, .nacht) .hn-grid .nw-meta time { color: #93a6c6; font-size: 14px; }
@media (prefers-reduced-motion: reduce) { body:is(.home, .nacht) .hn-grid .nw-card a:hover .nw-art { transform: none; } }
/* Elk nieuwsbericht een eigen kaart, zoals de blogkaarten op firefox.com (Lucas 5 nov: "nee ze moeten allemaal een unieke kaart
   hebben..", "zoals dit", "is toch niet hetzelfde als die van firefox"): een vierkante tegel met een eigen tekening in één
   Melo-blauwe pasteltint, geen tekst op de tegel. Tekeningen in assets/nieuws/: Melo voor Mac = het venster van de app;
   1.8.0 = een browser met Melo in het zijpaneel en Melo die onderin over de rand kijkt; de ChatGPT-gids = het logo van ChatGPT
   ("dit logo gebruiken voor chatgpt news artikel"). Op de link herkend, zodat home-news.mjs niets hoeft te weten; een nieuw
   bericht zonder eigen tekening houdt de blauwe tegel met het app-icoon hierboven. */
body:is(.home, .nacht) .hn-grid a[href*="melo-for-mac"] .nw-art,
body:is(.home, .nacht) .hn-grid a[href*="#180"] .nw-art,
body:is(.home, .nacht) .hn-grid a[href*="tell-chatgpt-personal"] .nw-art,
body:is(.home, .nacht) .hn-grid a[href*="#172"] .nw-art,
body:is(.home, .nacht) .hn-grid a[href*="small-language-models"] .nw-art,
body:is(.home, .nacht) .hn-grid a[href*="bezwaartermijn"] .nw-art,
body:is(.home, .nacht) .hn-grid a[href*="your-prompts-say-more-about-you"] .nw-art,
body:is(.home, .nacht) .hn-grid a[href*="who-can-read-your-ai-chats"] .nw-art,
body:is(.home, .nacht) .hn-grid a[href*="mac-dictate-with-fn"] .nw-art,
body:is(.home, .nacht) .hn-grid a[href*="melo-for-iphone-beta"] .nw-art { aspect-ratio: 1; overflow: hidden; border-radius: 14px; box-shadow: none; background: #dcebff center / cover no-repeat !important; transition: transform .5s cubic-bezier(.2, .7, .2, 1); }
body:is(.home, .nacht) .hn-grid a[href*="melo-for-mac"] .nw-art { background-image: url(/assets/nieuws/mac.svg?v=2) !important; }
body:is(.home, .nacht) .hn-grid a[href*="#180"] .nw-art { background-image: url(/assets/nieuws/extensie.svg?v=2) !important; }
body:is(.home, .nacht) .hn-grid a[href*="tell-chatgpt-personal"] .nw-art { background-image: url(/assets/nieuws/chatgpt.svg?v=2) !important; }
body:is(.home, .nacht) .hn-grid a[href*="melo-for-mac"] .nw-art::before, body:is(.home, .nacht) .hn-grid a[href*="melo-for-mac"] .nw-art span,
body:is(.home, .nacht) .hn-grid a[href*="#180"] .nw-art::before, body:is(.home, .nacht) .hn-grid a[href*="#180"] .nw-art span,
body:is(.home, .nacht) .hn-grid a[href*="tell-chatgpt-personal"] .nw-art::before, body:is(.home, .nacht) .hn-grid a[href*="tell-chatgpt-personal"] .nw-art span,
body:is(.home, .nacht) .hn-grid a[href*="#172"] .nw-art::before, body:is(.home, .nacht) .hn-grid a[href*="#172"] .nw-art span,
body:is(.home, .nacht) .hn-grid a[href*="small-language-models"] .nw-art::before, body:is(.home, .nacht) .hn-grid a[href*="small-language-models"] .nw-art span,
body:is(.home, .nacht) .hn-grid a[href*="bezwaartermijn"] .nw-art::before, body:is(.home, .nacht) .hn-grid a[href*="bezwaartermijn"] .nw-art span,
body:is(.home, .nacht) .hn-grid a[href*="your-prompts-say-more-about-you"] .nw-art::before, body:is(.home, .nacht) .hn-grid a[href*="your-prompts-say-more-about-you"] .nw-art span,
body:is(.home, .nacht) .hn-grid a[href*="who-can-read-your-ai-chats"] .nw-art::before, body:is(.home, .nacht) .hn-grid a[href*="who-can-read-your-ai-chats"] .nw-art span,
body:is(.home, .nacht) .hn-grid a[href*="mac-dictate-with-fn"] .nw-art::before, body:is(.home, .nacht) .hn-grid a[href*="mac-dictate-with-fn"] .nw-art span,
body:is(.home, .nacht) .hn-grid a[href*="melo-for-iphone-beta"] .nw-art::before, body:is(.home, .nacht) .hn-grid a[href*="melo-for-iphone-beta"] .nw-art span { display: none; }
body:is(.home, .nacht) .hn-grid .nw-card a:hover .nw-art { transform: scale(.985); }
body:is(.home, .nacht) .hn-grid a[href*="#172"] .nw-art { background-image: url(/assets/nieuws/naam.svg?v=2) !important; }
/* Vier berichten (Lucas 5 nov: "maak hier de 4 laatste posts van"): vier naast elkaar, twee op een tablet, één op de telefoon. */
body:is(.home, .nacht) .hn-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 48px 20px; }
@media (max-width: 1100px) { body:is(.home, .nacht) .hn-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { body:is(.home, .nacht) .hn-grid { grid-template-columns: 1fr; gap: 40px; } }
body:is(.home, .nacht) .hn-grid h3 { font-size: clamp(18px, 1.35vw, 20px); }
body:is(.home, .nacht) .hn-grid a[href*="melo-for-iphone-beta"] .nw-art { background-image: url(/assets/nieuws/iphone.svg?v=2) !important; }
/* 9 nov (Lucas: "waar zijn de previews"): kleine AI = een chip met Melo erop; bezwaartermijn = een kalender van zes weken. */
body:is(.home, .nacht) .hn-grid a[href*="small-language-models"] .nw-art { background-image: url(/assets/nieuws/klein.svg?v=1) !important; }
body:is(.home, .nacht) .hn-grid a[href*="bezwaartermijn"] .nw-art { background-image: url(/assets/nieuws/termijn.svg?v=1) !important; }
/* 10 nov: je prompts = een korte zoekbalk naast een telefoon met een grote chatbubbel vol regels, de Melo-tegel eronder. */
body:is(.home, .nacht) .hn-grid a[href*="your-prompts-say-more-about-you"] .nw-art { background-image: url(/assets/nieuws/prompts.svg?v=1) !important; }
/* 11 nov: wie je AI-chats kan lezen = een chatvenster met een vergrootglas dat meeleest, de Melo-tegel naast het antwoord. */
body:is(.home, .nacht) .hn-grid a[href*="who-can-read-your-ai-chats"] .nw-art { background-image: url(/assets/nieuws/meelezen.svg?v=1) !important; }
/* 11 nov: Melo voor Mac bouw 76 = de Fn-toets (wereldbol) met het zwarte opnamebalkje erboven, de Melo-tegel ernaast. */
body:is(.home, .nacht) .hn-grid a[href*="mac-dictate-with-fn"] .nw-art { background-image: url(/assets/nieuws/fn.svg?v=1) !important; }

/* 5 nov (Lucas: "these look ugly.. look how firefox does it"): Kamelo de kameleon zoals Kit op firefox.com, groot en ergens
   op of in, nooit los zwevend. Beelden: assets/kameleon/ (uit brand/mascotte/houdingen-5nov). Puur versiering: alt leeg. */
body:is(.home, .nacht) .kk { display: block; height: auto; pointer-events: none; user-select: none; -webkit-user-drag: none; }

/* Slot: Kamelo met koffie zit rechts bovenop de rand van het paneel (Lucas: "zet melo hier"). */
body:is(.home, .nacht) .final-panel { position: relative; }
body:is(.home, .nacht) .final-panel .kk-slot { position: absolute; right: clamp(48px, 11%, 180px); bottom: calc(100% - 4px); width: clamp(150px, 16vw, 230px); }

/* Slot (8 nov, Lucas: "alleen 'your artificial intelligence' mooi in het midden", "gwn mooi een logo download for mac"):
   de kop is het grote ding, gecentreerd; de knop is een normale pil met het Apple-logo. */
body:is(.home, .nacht) .final .final-panel, body:is(.home, .nacht) .m-believe + .final .final-panel { padding-top: clamp(72px, 9vw, 128px); padding-bottom: clamp(72px, 9vw, 128px); }
body:is(.home, .nacht) .final h2 { text-align: center; font-size: clamp(40px, 7vw, 96px); line-height: 1.02; letter-spacing: -.035em; margin: 0 auto; text-wrap: balance; }
body:is(.home, .nacht) .final .k-cta { flex-direction: column; align-items: center; gap: 14px; margin-top: clamp(32px, 4vw, 48px); }
body:is(.home, .nacht) .final .k-cta .k-btn[data-download] { min-height: 0; padding: 16px 30px; font-size: 18px; font-weight: 600; line-height: 1; border-radius: 999px; }
body:is(.home, .nacht) .final .k-cta .send-link { font-size: 19px; padding: 18px 30px; border-radius: 999px; }
@media (max-width: 760px) {
  body:is(.home, .nacht) .final-panel .kk-slot { right: 40px; width: 130px; }
}

/* 9 nov (Lucas: "dit moet zwart zijn met een wit apple logo en witte download for mac erop"): de knoppen op de homepage zwart met
   witte tekst en een wit Apple-logo (het logo volgt de tekstkleur). Een dunne lichte rand houdt ze zichtbaar op het donkerblauw. */
html body.home .k-btn, html body.home .nav .nav-cta, html body.home .menu-cta, html body.home .mt + .fam .fam-apps .k-btn {
  background: #000 !important; color: #fff !important; box-shadow: 0 0 0 1px rgba(255, 255, 255, .22), 0 12px 30px -12px rgba(0, 0, 0, .8) !important; }
html body.home .k-btn:hover, html body.home .nav .nav-cta:hover { background: #1a1a1a !important; color: #fff !important; opacity: 1; }
/* 9 nov (Lucas: "deze is te doorzichtig"): de tweede link naast de knop wit en wat zwaarder, zodat hij ook op de lichte gloed leesbaar is */
html body.home .k-try { color: #fff !important; font-weight: 600; opacity: 1; text-shadow: 0 1px 12px rgba(7, 22, 51, .45); }