/* Blixtflow – bransch: tandvård och privata kliniker (prefix dnt-). Rent, lugnt och kliniskt: mint och
   violett, mjuka rundade kakelplattor och ett ljus som andas. ind-clinic.js räknar morgonkön när man
   skrollar, sköter samtalet att prova, tidkortet och hjältens kö. Bygger på ai.css. */
.page-clinic { --mint: #BFF0DC; --mint-2: #EAF8F2; --mint-ink: #0E6A52; --tile: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Crect x='5' y='5' width='54' height='54' rx='16' fill='none' stroke='%23BFF0DC' stroke-opacity='.16' stroke-width='1.5'/%3E%3C/svg%3E"); }

.page-clinic .lp-split .h2 + .lead { margin-top: 16px; }

/* ==========================================================================
   1. Hjälten
   ========================================================================== */
.dnt-hero { background: radial-gradient(55% 55% at 80% 8%, rgba(191, 240, 220, .16), transparent 62%), radial-gradient(70% 60% at 100% 95%, rgba(155, 93, 229, .32), transparent 60%), var(--natt); }
.dnt-tiles { position: absolute; inset: 0 0 0 auto; z-index: -1; width: 58%; background: var(--tile); -webkit-mask-image: radial-gradient(70% 70% at 70% 40%, #000, transparent 75%); mask-image: radial-gradient(70% 70% at 70% 40%, #000, transparent 75%); }
.motion .dnt-tiles { animation: dnt-tiles 40s linear infinite; }
.dnt-glow { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.dnt-glow i { position: absolute; border-radius: 50%; filter: blur(60px); }
.dnt-glow i:nth-child(1) { right: 8%; top: 14%; width: 340px; height: 340px; background: rgba(191, 240, 220, .2); }
.dnt-glow i:nth-child(2) { right: 30%; bottom: 10%; width: 260px; height: 260px; background: rgba(155, 93, 229, .35); }
.dnt-glow i:nth-child(3) { left: -6%; top: 30%; width: 300px; height: 300px; background: rgba(126, 69, 201, .25); }
.motion .dnt-glow i { animation: dnt-breathe 9s ease-in-out infinite; }
.motion .dnt-glow i:nth-child(2) { animation-delay: -3s; }
.motion .dnt-glow i:nth-child(3) { animation-delay: -6s; }
.dnt-hero .air-title { max-width: 14ch; }
.dnt-show { position: relative; display: grid; justify-items: end; padding: 64px 0 88px; }
.dnt-phone { position: relative; z-index: 2; width: min(430px, 100%); padding: 16px; border-radius: 30px; color: var(--ink); background: #fff; box-shadow: 0 0 0 1px rgba(255, 255, 255, .1), 0 60px 110px -40px rgba(0, 0, 0, .95), 0 30px 90px -40px rgba(191, 240, 220, .45); }
.motion .dnt-phone { animation: chp-rise 1.2s .2s var(--ease-out) backwards; }
.dnt-phone__top { display: flex; align-items: center; gap: 10px; padding: 2px 2px 14px; border-bottom: 1px solid var(--line-2); }
.dnt-phone__logo { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 14px; color: var(--mint-ink); background: var(--mint); }
.dnt-phone__logo .ic { width: 20px; height: 20px; }
.dnt-phone__name { display: grid; min-width: 0; }
.dnt-phone__name b { font-size: .98rem; }
.dnt-phone__name small { display: inline-flex; align-items: center; gap: 5px; font-size: .76rem; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
.dnt-phone__name .ic { width: 12px; height: 12px; }
.dnt-phone__q { display: grid; justify-items: center; margin-left: auto; padding: 6px 12px; border-radius: 16px; background: var(--mint-2); box-shadow: inset 0 0 0 1px rgba(14, 106, 82, .14); }
.dnt-phone__q small { font-size: .62rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--mint-ink); }
.dnt-phone__q b { font-size: 1.5rem; line-height: 1; color: var(--mint-ink); font-variant-numeric: tabular-nums; }
.dnt-phone__q b.is-bump { animation: bump .35s var(--spring); }
.dnt-calls { display: grid; gap: 8px; margin-top: 14px; }
.dnt-call { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 16px; background: var(--ljus); }
.dnt-call > i { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 11px; color: var(--primar-ink); background: #fff; box-shadow: 0 0 0 1px var(--line); }
.dnt-call > i .ic { width: 15px; height: 15px; }
.dnt-call span { display: grid; min-width: 0; }
.dnt-call small { font-size: .68rem; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
.dnt-call b { overflow: hidden; font-size: .84rem; white-space: nowrap; text-overflow: ellipsis; }
.dnt-call em { display: inline-flex; align-items: center; gap: 4px; padding: 4px 9px; border-radius: 999px; font-size: .7rem; font-style: normal; font-weight: 800; white-space: nowrap; color: var(--mint-ink); background: var(--mint); }
.dnt-call em .ic { width: 12px; height: 12px; stroke-width: 2.6; }
.dnt-call--free em { color: var(--natt); background: var(--gnista); }
.dnt-call--staff em { color: #fff; background: var(--natt); }
.motion .dnt-call { animation: chp-pop .55s var(--spring) backwards; animation-delay: calc(1s + var(--i) * .45s); }
.motion .dnt-call em { animation: fade-up .45s var(--ease-out) backwards; animation-delay: calc(1.35s + var(--i) * .45s); }
.dnt-phone__ai { display: flex; align-items: center; gap: 8px; margin-top: 12px; padding: 10px 12px; border-radius: 14px; font-size: .78rem; font-weight: 700; color: #fff; background: linear-gradient(90deg, var(--primar-ink), var(--primar)); }
.dnt-phone__ai span { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: rgba(255, 255, 255, .2); }
.dnt-phone__ai .ic { width: 14px; height: 14px; }
.motion .dnt-phone__ai span { animation: glow-ring 2.6s 3s ease-in-out infinite; }
.dnt-maskcard { position: absolute; right: -14px; top: 0; z-index: 3; width: 236px; padding: 12px 14px; border-radius: 18px; color: #fff; background: rgba(58, 22, 80, .82); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1px var(--on-dark-line), 0 30px 60px -24px rgba(0, 0, 0, .8); }
.dnt-maskcard__h { display: flex; align-items: center; gap: 6px; font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--mint); }
.dnt-maskcard__h .ic { width: 13px; height: 13px; }
.dnt-maskcard__row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-top: 6px; font-size: .8rem; color: var(--on-dark-muted); }
.dnt-maskcard__row b { white-space: nowrap; font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: .95rem; letter-spacing: .04em; color: var(--gnista); }
.motion .dnt-maskcard { animation: chp-pop .7s 3.4s var(--spring) backwards, bob 7s 4.2s ease-in-out infinite; }
.dnt-slot { position: absolute; left: -10px; bottom: 6px; z-index: 3; display: flex; align-items: center; gap: 10px; max-width: 290px; padding: 11px 14px 11px 11px; border-radius: 18px; color: var(--ink); background: #fff; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .85); }
.dnt-slot i { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 12px; color: var(--natt); background: var(--gnista); }
.dnt-slot .ic { width: 17px; height: 17px; }
.dnt-slot span { display: grid; }
.dnt-slot small { font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--mint-ink); }
.dnt-slot b { font-size: .84rem; line-height: 1.3; }
.motion .dnt-slot { animation: dnt-slide 1s 3s var(--ease-out) backwards; }
.dnt-bx { position: absolute; left: -6px; top: -26px; z-index: 4; width: 160px; }
@media (min-width: 1000px) { .dnt-phone { margin-right: 18px; } }
@media (max-width: 999px) { .dnt-show { justify-items: center; } }
@media (max-width: 599px) {
  .dnt-show { padding: 96px 0 176px; }
  .dnt-phone { padding: 12px; border-radius: 24px; }
  .dnt-call { grid-template-columns: minmax(0, 1fr) auto; gap: 8px; padding: 8px; }
  .dnt-call > i { display: none; }
  .dnt-call b { font-size: .78rem; }
  .dnt-call em { font-size: .64rem; padding: 3px 7px; }
  .dnt-maskcard { right: 0; top: 4px; width: 200px; padding: 9px 11px; }
  .dnt-slot { left: 0; right: auto; bottom: 34px; max-width: 68%; }
  .dnt-bx { top: auto; left: auto; right: -12px; bottom: -14px; width: 108px; }
}

/* ==========================================================================
   2. Morgonkön 08:00
   ========================================================================== */
.dnt-am { --p: 1; color: #fff; background: linear-gradient(180deg, #1F0A2E, var(--natt) 70%); overflow: clip; }
.dnt-am__light { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(60% 50% at 85% 0%, rgba(191, 240, 220, .22), transparent 70%), var(--tile); opacity: calc(.25 + var(--p) * .75); -webkit-mask-image: linear-gradient(180deg, #000, transparent 85%); mask-image: linear-gradient(180deg, #000, transparent 85%); }
.dnt-am .lp-pin__sticky { position: relative; }
.dnt-am__grid { position: relative; display: grid; gap: 28px; align-items: center; }
@media (min-width: 1000px) { .dnt-am__grid { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 56px; } }
.dnt-am__copy .lead { margin-top: 14px; color: var(--on-dark-muted); }
.dnt-ticket { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 1px; overflow: hidden; margin-top: 24px; border-radius: 22px; background: rgba(191, 240, 220, .14); box-shadow: inset 0 0 0 1px rgba(191, 240, 220, .2), 0 30px 60px -30px rgba(0, 0, 0, .9); }
.dnt-ticket p { display: grid; align-content: center; gap: 4px; padding: 14px 16px; background: #170823; }
.dnt-ticket small { font-size: .66rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--on-dark-muted); }
.dnt-ticket b { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: 1.6rem; line-height: 1; color: var(--mint); font-variant-numeric: tabular-nums; text-shadow: 0 0 18px rgba(191, 240, 220, .55); }
.dnt-ticket__now b { font-size: 2.6rem; color: var(--gnista); text-shadow: 0 0 22px rgba(242, 250, 163, .6); }
.dnt-ticket b.is-bump { animation: bump .4s var(--spring); }
.dnt-ticket__clock { grid-column: 1 / -1; display: flex !important; align-items: center; gap: 8px; padding-block: 10px !important; }
.dnt-ticket__clock .ic { width: 16px; height: 16px; color: var(--mint); }
.dnt-ticket__clock b { font-size: 1rem; color: #fff; text-shadow: none; }
.dnt-board { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 16px; border-radius: 28px; color: var(--ink); background: #fff; box-shadow: 0 50px 100px -40px rgba(0, 0, 0, .9), 0 0 0 6px rgba(191, 240, 220, .08); }
.dnt-queue { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 7px 10px; border-radius: 16px; background: var(--mint-2); }
.dnt-queue__h { flex: none; font-size: .68rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--mint-ink); }
.dnt-queue ol { display: flex; min-width: 0; overflow: hidden; }
.dnt-qi { flex: none; display: flex; align-items: center; gap: 4px; max-width: 80px; margin-right: 6px; padding: 5px 9px 5px 5px; border-radius: 999px; background: #fff; box-shadow: 0 0 0 1px rgba(14, 106, 82, .14); transition: max-width .45s var(--ease-out), opacity .3s, transform .45s var(--ease-out), margin .45s var(--ease-out), padding .45s var(--ease-out); }
.dnt-qi i { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; color: #fff; background: var(--primar-ink); }
.dnt-qi .ic { width: 12px; height: 12px; }
.dnt-qi small { font-size: .72rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.dnt-qi.is-gone { max-width: 0; margin-right: 0; padding-inline: 0; opacity: 0; transform: translateY(14px) scale(.6); }
.dnt-queue__empty { display: none; align-items: center; gap: 6px; font-size: .78rem; font-weight: 800; color: var(--mint-ink); }
.dnt-queue__empty .ic { width: 15px; height: 15px; stroke-width: 2.6; }
.dnt-board.is-clear .dnt-queue__empty { display: inline-flex; animation: fade-up .4s var(--ease-out); }
.dnt-trays { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.dnt-tray { display: grid; align-content: start; gap: 6px; min-height: 352px; padding: 10px; border-radius: 18px; background: var(--ljus); }
.dnt-tray__h { display: flex; align-items: center; gap: 7px; margin-bottom: 2px; font-size: .78rem; font-weight: 800; }
.dnt-tray__h span { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 9px; color: #fff; background: var(--primar-ink); }
.dnt-tray__h .ic { width: 14px; height: 14px; }
.dnt-tray__h em { min-width: 0; font-style: normal; line-height: 1.2; }
.dnt-tray__h b { margin-left: auto; padding: 1px 8px; border-radius: 999px; font-size: .74rem; color: var(--primar-ink); background: #fff; box-shadow: 0 0 0 1px var(--line); font-variant-numeric: tabular-nums; }
.dnt-tray--move .dnt-tray__h span { color: var(--natt); background: var(--gnista); }
.dnt-tray--staff .dnt-tray__h span { background: var(--natt); }
.dnt-tray--staff { background: #EFE8F6; }
.dnt-tray ul { display: grid; gap: 6px; }
.dnt-card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 7px; max-height: 70px; padding: 7px 8px; border-radius: 12px; background: #fff; box-shadow: 0 0 0 1px var(--line), 0 6px 14px -10px rgba(44, 14, 61, .4); opacity: 0; transform: translateY(-26px) scale(.9); transition: opacity .3s, transform .55s var(--spring), max-height .45s var(--ease-out), padding .45s, margin .45s; }
.dnt-card:not(.is-on) { max-height: 0; padding-block: 0; margin-bottom: -6px; }
.dnt-card.is-on { opacity: 1; transform: none; }
.dnt-card.is-new { box-shadow: 0 0 0 2px var(--mint-ink), 0 10px 20px -10px rgba(14, 106, 82, .6); }
.dnt-card > i { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 8px; color: var(--primar-ink); background: var(--soft); }
.dnt-card > i .ic { width: 13px; height: 13px; }
.dnt-card span { display: grid; min-width: 0; }
.dnt-card b { overflow: hidden; font-size: .76rem; line-height: 1.25; white-space: nowrap; text-overflow: ellipsis; }
.dnt-card small { overflow: hidden; font-size: .68rem; color: var(--muted); white-space: nowrap; text-overflow: ellipsis; }
.dnt-card time { font-size: .66rem; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
.dnt-tray--staff .dnt-card { box-shadow: inset 3px 0 0 var(--natt), 0 0 0 1px var(--line); }
.dnt-am__note { display: flex; align-items: center; gap: 8px; font-size: .78rem; color: var(--muted); }
.dnt-am__note .ic { flex: none; width: 15px; height: 15px; color: var(--mint-ink); }
@media (max-width: 1199px) { .dnt-card time { display: none; } .dnt-card { grid-template-columns: auto minmax(0, 1fr); } }
@media (max-width: 999px) {
  .dnt-am.is-pinned .dnt-am__copy .lead { display: none; }
  .dnt-am.is-pinned .dnt-am__grid { gap: 14px; }
  .dnt-am.is-pinned .h2 { font-size: 1.7rem; }
  .dnt-am.is-pinned .dnt-ticket { margin-top: 12px; }
  .dnt-am.is-pinned .dnt-ticket__clock { display: none !important; }
  .dnt-ticket p { padding: 10px 12px; }
  .dnt-ticket b { font-size: 1.3rem; }
  .dnt-ticket__now b { font-size: 1.8rem; }
  .dnt-board { padding: 10px; gap: 8px; border-radius: 22px; }
  .dnt-queue { min-height: 40px; padding: 5px 8px; }
  .dnt-qi { padding: 3px; }
  .dnt-qi small { display: none; }
  .dnt-trays { gap: 6px; }
  .dnt-tray { min-height: 0; padding: 7px; gap: 5px; }
  .dnt-tray__h { font-size: .66rem; gap: 5px; }
  .dnt-tray__h span { width: 20px; height: 20px; border-radius: 7px; }
  .dnt-tray__h .ic { width: 11px; height: 11px; }
  .dnt-tray__h b { padding: 0 6px; font-size: .66rem; }
  .dnt-card { grid-template-columns: minmax(0, 1fr); padding: 6px 7px; gap: 0; }
  .dnt-card > i, .dnt-card small { display: none; }
  .dnt-card b { font-size: .66rem; white-space: normal; }
  .dnt-am.is-pinned .dnt-am__note { display: none; }
}
@media (max-width: 479px) { .dnt-tray__h em { font-size: .6rem; } .dnt-tray--move .dnt-tray__h em { overflow: hidden; } }

/* ==========================================================================
   3. Prova ett samtal
   ========================================================================== */
.dnt-sim { display: grid; gap: 16px; padding: clamp(18px, 3vw, 26px); border-radius: 30px; background: #fff; box-shadow: 0 0 0 1px var(--line), var(--shadow-2); }
.dnt-sim__label { margin-bottom: 10px; font-size: .74rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.dnt-sim__btns { display: flex; flex-wrap: wrap; gap: 8px; }
.dnt-sim__btns button { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px 8px 8px; border: 0; border-radius: 999px; cursor: pointer; font: inherit; font-size: .88rem; font-weight: 700; color: var(--ink); background: var(--ljus); box-shadow: inset 0 0 0 1px var(--line); transition: background-color .2s, color .2s, transform .3s var(--spring), box-shadow .2s; }
.dnt-sim__btns button i { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; color: var(--primar-ink); background: #fff; box-shadow: 0 0 0 1px var(--line); }
.dnt-sim__btns .ic { width: 14px; height: 14px; }
.dnt-sim__btns button:hover { transform: translateY(-2px); }
.dnt-sim__btns button[aria-pressed="true"] { color: #fff; background: var(--natt); box-shadow: 0 12px 24px -12px rgba(44, 14, 61, .7); }
.dnt-sim__btns button[aria-pressed="true"] i { color: var(--mint-ink); background: var(--mint); box-shadow: none; }
.dnt-sim__btns button:focus-visible { outline: 3px solid var(--primar); outline-offset: 2px; }
.dnt-sim__call { display: grid; gap: 12px; padding: 16px; border-radius: 24px; background: linear-gradient(160deg, var(--mint-2), #F4EEFB); box-shadow: inset 0 0 0 1px rgba(14, 106, 82, .1); }
.dnt-sim__top { display: flex; align-items: center; gap: 10px; }
.dnt-sim__top > span:nth-child(2) { display: grid; }
.dnt-sim__top small { font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--mint-ink); }
.dnt-sim__top b { font-variant-numeric: tabular-nums; }
.dnt-sim__ring { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; color: #fff; background: var(--ok); }
.dnt-sim__ring .ic { width: 18px; height: 18px; }
.dnt-sim__top em { margin-left: auto; padding: 5px 12px; border-radius: 999px; font-size: .74rem; font-style: normal; font-weight: 800; color: var(--mint-ink); background: var(--mint); transition: background-color .3s, color .3s; }
.dnt-sim__call.is-staff .dnt-sim__top em { color: #fff; background: var(--natt); }
.dnt-sim__chat { display: grid; gap: 8px; min-height: 150px; align-content: start; }
.dnt-sim__q { justify-self: start; max-width: 88%; padding: 10px 14px; border-radius: 18px 18px 18px 5px; font-size: .92rem; line-height: 1.45; background: #fff; box-shadow: 0 0 0 1px var(--line); }
.dnt-sim__a { justify-self: end; display: flex; align-items: flex-end; gap: 8px; max-width: 92%; }
.dnt-sim__a > span:last-child { padding: 10px 14px; border-radius: 18px 18px 5px 18px; font-size: .92rem; line-height: 1.45; color: #fff; background: var(--primar-ink); }
.dnt-sim__av { order: 2; flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; color: var(--natt); background: var(--gnista); }
.dnt-sim__av .ic { width: 15px; height: 15px; }
.dnt-sim__call.is-staff .dnt-sim__a > span:last-child { background: var(--natt); }
.dnt-pnr { display: inline-flex; align-items: center; padding: 1px 8px; border-radius: 8px; font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: .86em; letter-spacing: .04em; color: var(--gnista); background: var(--natt); }
.dnt-sim.is-swap .dnt-sim__q { animation: fade-up .4s var(--ease-out); }
.dnt-sim.is-swap .dnt-sim__a { animation: fade-up .45s .35s var(--ease-out) backwards; }
.dnt-sim__after { font-size: .7rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.dnt-sim__steps { display: grid; gap: 6px; }
.dnt-sim__steps li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 14px; font-size: .86rem; font-weight: 700; background: rgba(255, 255, 255, .8); }
.dnt-sim__steps .ic { flex: none; width: 22px; height: 22px; padding: 4px; border-radius: 50%; stroke-width: 3; color: #fff; background: var(--mint-ink); }
.dnt-sim__call.is-staff .dnt-sim__steps .ic { background: var(--natt); }
.dnt-sim.is-swap .dnt-sim__steps li { animation: chp-pop .45s var(--spring) backwards; animation-delay: calc(.8s + var(--i) * .15s); }
.dnt-sim__note { font-size: .8rem; color: var(--muted); }

/* ==========================================================================
   4. Tidkortet
   ========================================================================== */
.dnt-calc { background: radial-gradient(60% 60% at 0% 100%, rgba(191, 240, 220, .1), transparent 60%), linear-gradient(180deg, var(--natt), #321147); }
.dnt-sliders { display: grid; gap: 16px; margin-top: 24px; }
.dnt-range p { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.dnt-range label { font-weight: 700; }
.dnt-range output { flex: none; font-size: 1.1rem; font-weight: 800; color: var(--mint); font-variant-numeric: tabular-nums; }
.dnt-range input { --fill: 50%; width: 100%; height: 28px; margin: 0; appearance: none; -webkit-appearance: none; background: transparent; cursor: pointer; }
.dnt-range input::-webkit-slider-runnable-track { height: 8px; border-radius: 99px; background: linear-gradient(90deg, var(--mint) var(--fill), rgba(255, 255, 255, .15) var(--fill)); }
.dnt-range input::-moz-range-track { height: 8px; border-radius: 99px; background: linear-gradient(90deg, var(--mint) var(--fill), rgba(255, 255, 255, .15) var(--fill)); }
.dnt-range input::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; margin-top: -9px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px var(--mint), 0 0 18px rgba(191, 240, 220, .6); }
.dnt-range input::-moz-range-thumb { width: 20px; height: 20px; border: 4px solid var(--mint); border-radius: 50%; background: #fff; }
.dnt-range input:focus-visible { outline: 3px solid var(--mint); outline-offset: 4px; border-radius: 8px; }
.dnt-tk { display: grid; justify-items: center; }
.dnt-tk__card { display: grid; grid-template-columns: minmax(0, 1fr) 112px; width: min(480px, 100%); overflow: hidden; border-radius: 26px; color: var(--ink); background: #fff; box-shadow: 0 50px 90px -40px rgba(0, 0, 0, .95), 0 0 0 6px rgba(191, 240, 220, .1); transform: rotate(-1.5deg); }
.motion .dnt-tk.is-in .dnt-tk__card { animation: dnt-deal 1.1s var(--ease-out) backwards; }
.dnt-tk__main { padding: 22px 22px 20px; }
.dnt-tk__head { display: flex; align-items: center; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid var(--line-2); }
.dnt-tk__logo { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 12px; color: var(--mint-ink); background: var(--mint); }
.dnt-tk__logo .ic { width: 18px; height: 18px; }
.dnt-tk__head span:last-child { display: grid; }
.dnt-tk__head b { font-size: .8rem; letter-spacing: .16em; text-transform: uppercase; }
.dnt-tk__head small { font-size: .8rem; color: var(--muted); }
.dnt-arch { position: relative; height: 150px; margin: 10px 0 4px; }
.dnt-arch ol { position: absolute; inset: 0; }
.dnt-arch li { --a: calc(-78deg + var(--i) * 10.4deg); position: absolute; left: calc(50% - 10px); top: 117px; width: 20px; height: 26px; border: 2px solid #C9B5E6; border-radius: 45% 45% 40% 40% / 35% 35% 65% 65%; background: linear-gradient(180deg, #fff 30%, #EEE6F8); box-shadow: 0 3px 6px -3px rgba(44, 14, 61, .35); transform: rotate(var(--a)) translateY(-104px); transition: background-color .35s, border-color .35s, box-shadow .35s, opacity .35s; }
.dnt-arch li.is-lost { border-style: dashed; border-color: #E4A3AE; background: transparent; box-shadow: none; opacity: .9; }
.dnt-arch p { position: absolute; left: 0; right: 0; top: 54px; display: grid; justify-items: center; text-align: center; }
.dnt-arch p b { font-size: 2.2rem; line-height: 1; color: var(--bad); font-variant-numeric: tabular-nums; }
.dnt-arch p small { max-width: 18ch; margin-top: 4px; font-size: .72rem; line-height: 1.3; color: var(--muted); }
.dnt-tk__row, .dnt-tk__total { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; font-size: .86rem; }
.dnt-tk__row { border-bottom: 1px dashed var(--line); }
.dnt-tk__row b { font-variant-numeric: tabular-nums; }
.dnt-tk__total { align-items: baseline; margin-top: 6px; padding: 12px 14px; border-radius: 14px; font-weight: 800; background: #FBEFF1; }
.dnt-tk__total b { font-size: 1.3rem; color: var(--bad); white-space: nowrap; font-variant-numeric: tabular-nums; }
.dnt-tk__row--vs { margin-top: 6px; border-bottom: 0; }
.dnt-tk__row--vs b { color: var(--mint-ink); }
.dnt-tk__row--vs .air-price { font: inherit; color: inherit; }
.dnt-tk__stub { position: relative; display: grid; align-content: center; justify-items: center; gap: 10px; padding: 18px 12px; text-align: center; background: var(--mint-2); border-left: 2px dashed #B9DCCB; }
.dnt-tk__stub::before, .dnt-tk__stub::after { content: ""; position: absolute; left: -11px; width: 20px; height: 20px; border-radius: 50%; background: #2F1043; }
.dnt-tk__stub::before { top: -10px; }
.dnt-tk__stub::after { bottom: -10px; }
.dnt-tk__stub small { font-size: .66rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--mint-ink); }
.dnt-tk__stub b { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 16px; color: var(--mint-ink); background: #fff; box-shadow: 0 0 0 1px rgba(14, 106, 82, .16); }
.dnt-tk__stub .ic { width: 22px; height: 22px; }
.dnt-tk__stub p { font-size: .76rem; line-height: 1.35; color: var(--ink-2); }
.dnt-calc__note { max-width: 440px; margin-top: 20px; font-size: .78rem; line-height: 1.5; text-align: center; color: var(--on-dark-muted); }
@media (max-width: 519px) {
  .dnt-tk__card { grid-template-columns: minmax(0, 1fr); transform: none; }
  .dnt-tk__main { padding: 18px 16px; }
  .dnt-tk__stub { grid-template-columns: auto minmax(0, 1fr); justify-items: start; text-align: left; border-left: 0; border-top: 2px dashed #B9DCCB; }
  .dnt-tk__stub small { grid-column: 1 / -1; }
  .dnt-tk__stub::before, .dnt-tk__stub::after { top: -11px; bottom: auto; }
  .dnt-tk__stub::before { left: -10px; }
  .dnt-tk__stub::after { left: auto; right: -10px; }
  .dnt-arch { transform: scale(.9); margin-block: 0; }
}

/* ==========================================================================
   5. Alla kanaler, alla språk
   ========================================================================== */
.dnt-langs { overflow: clip; background: radial-gradient(50% 50% at 50% 60%, rgba(191, 240, 220, .45), transparent 70%), var(--ljus); }
.dnt-stage { position: relative; display: grid; gap: 22px; }
.dnt-bubbles { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.dnt-bubbles li { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px 9px 9px; border-radius: 20px 20px 20px 6px; font-size: .9rem; font-weight: 600; background: #fff; box-shadow: 0 0 0 1px var(--line), var(--shadow-1); }
.dnt-bubbles li[dir="rtl"] { padding: 9px 9px 9px 14px; border-radius: 20px 20px 6px 20px; }
.dnt-bubbles em { flex: none; padding: 3px 7px; border-radius: 8px; font-size: .66rem; font-style: normal; font-weight: 800; letter-spacing: .08em; color: var(--mint-ink); background: var(--mint); }
.dnt-inbox { justify-self: center; width: min(430px, 100%); padding: 8px; border-radius: 26px; background: #fff; box-shadow: 0 0 0 1px var(--line), var(--shadow-2); }
.dnt-inbox__h { display: flex; align-items: center; gap: 8px; padding: 10px 12px 12px; }
.dnt-inbox__h img { padding: 3px; border-radius: 7px; background: var(--ljus); }
.dnt-inbox__h span { margin-left: auto; padding: 2px 9px; border-radius: 999px; font-size: .72rem; font-weight: 800; color: var(--natt); background: var(--gnista); }
.dnt-inbox__row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 11px 12px; border-top: 1px solid var(--line-2); }
.dnt-inbox__row i { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 12px; color: var(--primar-ink); background: var(--soft); }
.dnt-inbox__row i .ic { width: 17px; height: 17px; }
.dnt-inbox__row span { display: grid; min-width: 0; }
.dnt-inbox__row small { font-size: .74rem; font-weight: 700; color: var(--muted); }
.dnt-inbox__row b { font-size: .9rem; }
.dnt-inbox__row > .ic { width: 22px; height: 22px; padding: 4px; border-radius: 50%; stroke-width: 3; color: var(--mint-ink); background: var(--mint); }
.reveal-on .dnt-stage.is-in .dnt-inbox__row { animation: fade-up .6s var(--ease-out) backwards; animation-delay: calc(.4s + var(--i) * .18s); }
@media (min-width: 1000px) {
  .dnt-stage { display: block; min-height: 460px; }
  .dnt-bubbles { position: absolute; inset: 0; display: block; pointer-events: none; }
  .dnt-bubbles li { position: absolute; }
  .dnt-bubbles li:nth-child(1) { left: 4%; top: 6%; }
  .dnt-bubbles li:nth-child(2) { left: 10%; top: 40%; }
  .dnt-bubbles li:nth-child(3) { left: 2%; top: 74%; }
  .dnt-bubbles li:nth-child(4) { right: 6%; top: 4%; }
  .dnt-bubbles li:nth-child(5) { right: 1%; top: 30%; }
  .dnt-bubbles li:nth-child(6) { right: 4%; top: 56%; }
  .dnt-bubbles li:nth-child(7) { right: 12%; top: 82%; }
  .dnt-inbox { position: relative; margin-inline: auto; }
  .motion .dnt-bubbles li { animation: chp-float 7s ease-in-out infinite; animation-delay: calc(var(--i) * -1.1s); }
}
.dnt-kinds { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; margin-top: clamp(30px, 4vw, 48px); }
.dnt-kinds span { margin-right: 4px; font-size: .74rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.dnt-kinds b { padding: 7px 14px; border-radius: 999px; font-size: .88rem; background: #fff; box-shadow: 0 0 0 1px var(--line); }

/* ==========================================================================
   6. Integritet
   ========================================================================== */
.dnt-priv { overflow: clip; }
.dnt-priv__tiles { position: absolute; inset: 0; pointer-events: none; background: var(--tile); -webkit-mask-image: radial-gradient(60% 50% at 50% 0%, #000, transparent 80%); mask-image: radial-gradient(60% 50% at 50% 0%, #000, transparent 80%); }
.dnt-priv .wrap { position: relative; }
.dnt-priv__grid { display: grid; gap: 18px; }
@media (min-width: 1000px) { .dnt-priv__grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); align-items: stretch; } }
.dnt-scope { display: grid; gap: 1px; overflow: hidden; border-radius: 28px; color: var(--ink); background: var(--line); box-shadow: 0 50px 100px -40px rgba(0, 0, 0, .9); }
@media (min-width: 640px) { .dnt-scope { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.dnt-scope__col { padding: clamp(20px, 3vw, 28px); background: #fff; }
.dnt-scope__col--no { background: #F5F1F9; }
.dnt-scope h3 { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; font-size: 1.05rem; }
.dnt-scope h3 .ic { width: 28px; height: 28px; padding: 6px; border-radius: 50%; stroke-width: 2.8; color: var(--mint-ink); background: var(--mint); }
.dnt-scope__col--no h3 .ic { color: #fff; background: var(--natt); }
.dnt-scope li { position: relative; padding: 9px 0 9px 22px; border-top: 1px solid var(--line-2); font-size: .92rem; line-height: 1.4; }
.dnt-scope li::before { content: ""; position: absolute; left: 2px; top: 15px; width: 9px; height: 9px; border-radius: 50%; background: var(--mint-ink); }
.dnt-scope__col--no li { color: var(--ink-2); }
.dnt-scope__col--no li::before { top: 18px; height: 2px; border-radius: 2px; background: var(--muted); }
.dnt-masker { position: relative; display: grid; align-content: center; gap: 14px; overflow: hidden; padding: clamp(20px, 3vw, 28px); border-radius: 28px; background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px var(--on-dark-line); }
.dnt-masker__h { display: flex; align-items: center; gap: 8px; font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--mint); }
.dnt-masker__h .ic { width: 15px; height: 15px; }
.dnt-masker__line { font-size: 1.15rem; line-height: 1.5; }
.dnt-masker__val { position: relative; display: inline-grid; overflow: hidden; vertical-align: bottom; border-radius: 10px; }
.dnt-masker__val > * { grid-area: 1 / 1; padding: 2px 10px; border-radius: 10px; font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: .95em; text-decoration: none; white-space: nowrap; }
.dnt-masker__val s { color: #fff; background: rgba(255, 255, 255, .1); opacity: 0; }
.dnt-masker__val b { color: var(--natt); background: var(--gnista); }
.motion .dnt-masker.is-in .dnt-masker__val s { animation: dnt-unmask 6s 0.6s ease-in-out infinite; }
.motion .dnt-masker.is-in .dnt-masker__val b { animation: dnt-mask 6s 0.6s ease-in-out infinite; }
.dnt-masker__scan { position: relative; height: 4px; overflow: hidden; border-radius: 4px; background: rgba(255, 255, 255, .08); }
.dnt-masker__scan i { position: absolute; inset: 0 auto 0 0; width: 30%; border-radius: 4px; background: linear-gradient(90deg, transparent, var(--mint), transparent); }
.motion .dnt-masker.is-in .dnt-masker__scan i { animation: dnt-scan 6s 0.6s ease-in-out infinite; }
.dnt-masker__flow { display: grid; gap: 8px; counter-reset: dnt; }
.dnt-masker__flow li { position: relative; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; font-size: .88rem; background: rgba(255, 255, 255, .05); }
.dnt-masker__flow li::before { counter-increment: dnt; content: counter(dnt); flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; font-size: .74rem; font-weight: 800; color: var(--natt); background: var(--mint); }
.dnt-masker__flow li:last-child::before { background: var(--gnista); }
.dnt-masker__flow b { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: .86em; color: var(--gnista); }
.dnt-masker__foot { display: flex; gap: 10px; font-size: .86rem; line-height: 1.45; color: var(--on-dark-muted); }
.dnt-masker__foot .ic { flex: none; width: 18px; height: 18px; color: var(--mint); }
.dnt-sec { display: grid; gap: 12px; margin-top: 18px; }
@media (min-width: 640px) { .dnt-sec { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .dnt-sec { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.dnt-sec li { display: grid; align-content: start; gap: 8px; padding: 18px; border-radius: 22px; background: rgba(255, 255, 255, .04); box-shadow: inset 0 0 0 1px var(--on-dark-line); transition: background-color .3s, transform .4s var(--ease-out); }
.dnt-sec li:hover { background: rgba(191, 240, 220, .07); transform: translateY(-3px); }
.dnt-sec span { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 14px; color: var(--mint-ink); background: var(--mint); }
.dnt-sec span .ic { width: 19px; height: 19px; }
.dnt-sec h3 { font-size: 1rem; }
.dnt-sec p { font-size: .86rem; line-height: 1.45; color: var(--on-dark-muted); }
.dnt-def { padding-bottom: calc(clamp(76px, 10vw, 136px) + var(--sheet-r)); }

@keyframes dnt-tiles { to { background-position: 64px 128px; } }
@keyframes dnt-breathe { 0%, 100% { opacity: .7; transform: scale(1); } 50% { opacity: 1; transform: scale(1.18); } }
@keyframes dnt-slide { from { opacity: 0; transform: translateX(-40px); } }
@keyframes dnt-deal { from { opacity: 0; transform: translateY(40px) rotate(-8deg); } }
@keyframes dnt-unmask { 0%, 8% { opacity: 1; transform: none; } 22%, 92% { opacity: 0; transform: translateY(-100%); } 100% { opacity: 1; transform: none; } }
@keyframes dnt-mask { 0%, 8% { opacity: 0; transform: translateY(100%); } 22%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(100%); } }
@keyframes dnt-scan { 0%, 6% { transform: translateX(-100%); } 32%, 100% { transform: translateX(340%); } }