/* Blixtflow – kundsidan. Bygger på ai.css (rubrik, fakta, steg, frågor) men har egen rörelse:
   profilen byggs av bitar som flyger in, en cirkel öppnas och visar kundpanelen (--r från cust.js),
   en besökare som surfar, en historik som filtreras och "Glöm personen" som löses upp. */

.kup-av { display: grid; flex: none; place-items: center; width: 32px; height: 32px; border-radius: 50%; font-size: .72rem; font-weight: 800; color: #fff; background: var(--c, #BE185D); }
.kup-tag { padding: 3px 9px; border-radius: 8px; font-size: .72rem; font-style: normal; font-weight: 700; color: #fff; background: var(--natt); }
.kup-ti { display: grid; flex: none; place-items: center; width: 34px; height: 34px; border-radius: 11px; color: #fff; background: var(--primar-ink); }
.kup-ti .ic { width: 16px; height: 16px; }
.kup-ti--mail { background: #BE185D; }
.kup-ti--phone { background: #15803D; }
.kup-ti--bag { background: #7F54B3; }
.kup-ti--calendar { color: var(--natt); background: var(--gnista); }
.kup-ti--chat { background: #1D4ED8; }

/* ==========================================================================
   1. Hjälten
   ========================================================================== */
.kup-hero { position: relative; isolation: isolate; overflow: clip; padding: calc(var(--header-h) + env(safe-area-inset-top) + 26px) 0 calc(var(--sheet-r) + 60px); color: #fff; background: var(--natt); }
.kup-hero__grid { display: grid; gap: 50px; align-items: center; }
@media (min-width: 1024px) { .kup-hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; } }
.kup-build { position: relative; display: grid; place-items: center; padding: 30px 0; }
.kup-build__glow { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(closest-side, rgba(155, 93, 229, .5), transparent); }
.kup-card { position: relative; z-index: 1; width: min(400px, 100%); padding: 20px; border-radius: 26px; 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(155, 93, 229, .7); }
.motion .kup-card { animation: chp-rise 1.1s .2s var(--ease-out) backwards; }
.kup-card__top { display: flex; align-items: center; gap: 12px; }
.kup-card__av { position: relative; display: grid; flex: none; place-items: center; width: 52px; height: 52px; border-radius: 17px; font-weight: 800; color: #fff; background: #BE185D; }
.kup-card__av i { position: absolute; right: -3px; bottom: -3px; width: 14px; height: 14px; border-radius: 50%; background: #16A34A; box-shadow: 0 0 0 3px #fff; }
.kup-card__av--sm { width: 40px; height: 40px; border-radius: 13px; font-size: .8rem; }
.kup-card__av--lg { width: 84px; height: 84px; border-radius: 50%; font-size: 1.4rem; }
.kup-card__av--lg i { width: 18px; height: 18px; box-shadow: 0 0 0 4px #1b0726; }
.kup-card__who { display: grid; flex: 1; min-width: 0; }
.kup-card__who b { font-size: 1.05rem; }
.kup-card__who small { font-size: .78rem; color: var(--muted); }
.kup-live { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; padding: 4px 10px; border-radius: 999px; font-size: .72rem; font-weight: 700; color: var(--ok); background: var(--ok-soft); }
.kup-live i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.motion .kup-live i { animation: rec 1.6s ease-in-out infinite; }
.kup-card__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 16px 0 12px; }
.kup-card__stats span { display: grid; padding: 10px; border-radius: 14px; font-size: .74rem; color: var(--muted); text-align: center; background: var(--ljus); }
.kup-card__stats b { font-size: 1.3rem; font-weight: 800; color: var(--ink); }
.kup-card__pieces { display: grid; gap: 6px; }
.kup-piece { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 1px var(--line-2); }
.kup-piece__ic { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 10px; color: var(--primar-ink); background: var(--soft); }
.kup-piece__ic .ic { width: 16px; height: 16px; }
.kup-piece > span:last-child { display: grid; min-width: 0; }
.kup-piece b { overflow: hidden; font-size: .86rem; white-space: nowrap; text-overflow: ellipsis; }
.kup-piece small { font-size: .7rem; color: var(--muted); }
.motion .kup-piece { animation: kup-fly 1.1s var(--spring) backwards; animation-delay: calc(.9s + var(--i) * .22s); }
.kup-card__acts { display: flex; gap: 8px; margin-top: 12px; }
.kup-card__acts span { display: inline-flex; flex: 1; align-items: center; justify-content: center; gap: 6px; padding: 9px; border-radius: 12px; font-size: .82rem; font-weight: 700; color: var(--natt); background: var(--gnista); }
.kup-card__acts span + span { color: #fff; background: var(--primar-ink); }
.kup-card__acts .ic { width: 15px; height: 15px; }
.kup-bx { position: absolute; left: -40px; bottom: -20px; z-index: 2; width: 130px; }
@media (max-width: 599px) { .kup-bx { left: -12px; bottom: -70px; width: 90px; } }

/* ==========================================================================
   2. Cirkeln
   ========================================================================== */
.kup-portal { --r: 150%; position: relative; z-index: 1; margin-top: calc(var(--sheet-r) * -1); border-radius: var(--sheet-r) var(--sheet-r) 0 0; color: #fff; background: radial-gradient(70% 60% at 50% 70%, #3e1659, var(--natt-3) 70%); }
.kup-portal__sticky { display: grid; grid-template-columns: minmax(0, 1fr); align-content: center; gap: 26px; padding: clamp(70px, 9vw, 110px) 0 calc(var(--sheet-r) + 50px); }
.kup-portal.is-pinned .kup-portal__sticky { position: sticky; top: 0; height: 100vh; height: 100svh; padding-top: calc(var(--header-h) + 18px); padding-bottom: 24px; overflow: hidden; }
.kup-portal__head { text-align: center; }
.kup-portal__head .lead { max-width: 600px; margin: 14px auto 0; color: var(--on-dark-muted); }
.kup-lens { position: relative; width: min(100% - 2 * var(--gutter), 1040px); margin-inline: auto; clip-path: circle(var(--r) at 50% 50%); }
.kup-lens::before { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: 26px; box-shadow: inset 0 0 0 2px var(--gnista); opacity: calc(1 - var(--r) / 80%); }
.kup-app { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); overflow: hidden; border-radius: 26px; color: var(--ink); background: #fff; transform: scale(calc(.86 + var(--k, 1) * .14)); transition: transform .2s linear; }
.kup-app__ticket { display: grid; align-content: start; gap: 12px; padding: 22px; border-right: 1px solid var(--line-2); }
.kup-app__th { display: flex; align-items: center; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid var(--line-2); }
.kup-app__th b { margin-right: auto; }
.kup-bubble { max-width: 86%; padding: 12px 14px; border-radius: 16px 16px 16px 5px; font-size: .92rem; background: var(--ljus); box-shadow: inset 0 0 0 1px var(--line-2); }
.kup-bubble--out { justify-self: end; border-radius: 16px 16px 5px 16px; color: #fff; background: var(--primar-ink); box-shadow: none; }
.kup-app__compose { margin-top: 80px; padding: 14px 16px; border-radius: 14px; font-size: .88rem; color: var(--muted); box-shadow: inset 0 0 0 1.5px var(--line); }
.kup-app__panel { display: grid; align-content: start; gap: 12px; padding: 22px; background: #FCFAFE; }
.kup-app__ph { display: flex; align-items: center; gap: 10px; }
.kup-app__ph span:last-child { display: grid; }
.kup-app__ph small { font-size: .78rem; color: var(--muted); }
.kup-app__now { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 12px; font-size: .85rem; color: var(--natt); background: var(--gnista); }
.kup-app__now .ic { width: 16px; height: 16px; }
.kup-app__h { margin-top: 4px; font-size: .7rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.kup-app__list { display: grid; gap: 6px; }
.kup-app__list li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1px var(--line-2); }
.kup-app__list li > span:last-child { display: grid; min-width: 0; }
.kup-app__list b { overflow: hidden; font-size: .84rem; white-space: nowrap; text-overflow: ellipsis; }
.kup-app__list small { font-size: .72rem; color: var(--muted); }
.kup-app__acts { display: flex; flex-wrap: wrap; gap: 6px; }
.kup-app__acts span { display: inline-flex; align-items: center; gap: 5px; padding: 7px 11px; border-radius: 10px; font-size: .76rem; font-weight: 700; background: var(--ljus); box-shadow: inset 0 0 0 1px var(--line); }
.kup-app__acts span:first-child { color: #fff; background: var(--primar-ink); box-shadow: none; }
.kup-app__acts .ic { width: 14px; height: 14px; }
@media (max-width: 799px) {
  .kup-app { grid-template-columns: minmax(0, 1fr); }
  .kup-app__ticket { display: none; }
  .kup-lens { width: min(100% - 2 * var(--gutter), 440px); }
}

/* ==========================================================================
   3. Besökaren i realtid
   ========================================================================== */
.kup-live-sec { padding-top: clamp(70px, 9vw, 110px); }
.kup-live__grid { display: grid; gap: 40px; align-items: center; }
@media (min-width: 1000px) { .kup-live__grid { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 56px; } }
.kup-surf { display: grid; gap: 14px; }
@media (min-width: 640px) { .kup-surf { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); align-items: stretch; } }
.kup-browser { overflow: hidden; border-radius: 20px; background: #fff; box-shadow: 0 0 0 1px var(--line), var(--shadow-2); }
.kup-browser__bar { display: flex; align-items: center; gap: 6px; height: 38px; padding: 0 12px; background: #FBF8FE; border-bottom: 1px solid var(--line-2); }
.kup-browser__bar > i { width: 9px; height: 9px; border-radius: 50%; background: #E3D7F0; }
.kup-browser__bar span { margin: 0 auto; padding: 3px 14px; border-radius: 999px; font-size: .74rem; color: var(--muted); background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.kup-browser__bar b { font-weight: 700; color: var(--primar-ink); }
.kup-browser__page { position: relative; height: 270px; }
.kup-pg { position: absolute; inset: 0; padding: 22px; opacity: 0; transform: translateX(20px); transition: opacity .4s, transform .5s var(--ease-out); }
.kup-pg.is-on { opacity: 1; transform: none; }
.kup-pg__h { font-size: 1.4rem; font-weight: 800; letter-spacing: -.02em; color: #3B2A26; }
.kup-pg__lines { display: grid; gap: 8px; margin-top: 12px; }
.kup-pg__lines i { width: var(--w); height: 10px; border-radius: 5px; background: #F2E6E1; }
.kup-pg__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 18px; }
.kup-pg__cards i { height: 80px; border-radius: 14px; background: linear-gradient(135deg, #F8D9CC, #EBC2B3); }
.kup-pg:nth-child(2) .kup-pg__cards i { background: linear-gradient(135deg, #E9D5FF, #C8A8F2); }
.kup-pg:nth-child(3) .kup-pg__cards i { background: linear-gradient(135deg, #DCFCE7, #A7F3D0); }
.kup-pg:nth-child(4) .kup-pg__cards i { background: linear-gradient(135deg, #FEF9C3, #F2FAA3); }
.kup-cursor { position: absolute; left: var(--cx, 60%); top: var(--cy, 70%); z-index: 2; width: 22px; height: 22px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 3l14 8-6.2 1.6L10 19z' fill='%23fff' stroke='%232C0E3D' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; transition: left .9s var(--ease-out), top .9s var(--ease-out), transform .2s; }
.kup-cursor.is-click { transform: scale(.75); }
.kup-info { display: grid; align-content: start; gap: 12px; padding: 18px; border-radius: 20px; color: #fff; background: radial-gradient(120% 120% at 100% 0%, #5b2a80, var(--natt) 65%); box-shadow: var(--shadow-2); }
.kup-info__now { position: relative; display: grid; padding: 12px 14px; border-radius: 14px; color: var(--natt); background: var(--gnista); }
.kup-info__now small { font-size: .72rem; font-weight: 700; }
.kup-info__now b { font-size: 1.15rem; }
.kup-info__now b.is-new { animation: bump .5s var(--spring); }
.kup-info__dot { position: absolute; right: 14px; top: 14px; width: 10px; height: 10px; border-radius: 50%; background: #16A34A; box-shadow: 0 0 0 0 rgba(22, 163, 74, .5); }
.motion .kup-info__dot { animation: ping 1.8s infinite; }
.kup-info dl { display: grid; gap: 6px; }
.kup-info dl div { display: flex; justify-content: space-between; gap: 10px; font-size: .84rem; }
.kup-info dt { color: var(--ton); }
.kup-info dd { margin: 0; font-weight: 700; text-align: right; }
.kup-info dd.is-ok { color: #7BE3AE; }
.kup-info__h { font-size: .7rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--ton); }
.kup-visited { display: flex; flex-wrap: wrap; gap: 6px; }
.kup-visited li { padding: 4px 10px; border-radius: 999px; font-size: .78rem; font-weight: 650; background: rgba(255, 255, 255, .1); animation: pop-in .4s var(--spring) both; }

.kup-def { padding-top: 0; }

/* ==========================================================================
   5. Historiken
   ========================================================================== */
.kup-hist { background: linear-gradient(180deg, var(--natt), #321147); }
.kup-tl { max-width: 760px; margin-inline: auto; }
.kup-filters { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 28px; }
.kup-filter { --focus: var(--gnista); display: inline-flex; align-items: center; gap: 7px; padding: 9px 15px; border: 0; border-radius: 999px; cursor: pointer; font-size: .88rem; font-weight: 650; color: #fff; background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px rgba(200, 168, 242, .22); transition: background-color .25s, color .25s; }
.kup-filter .ic { width: 15px; height: 15px; }
.kup-filter[aria-pressed="true"] { color: var(--natt); background: var(--gnista); box-shadow: none; }
.kup-tl__list { position: relative; display: grid; gap: 12px; padding-left: 30px; }
.kup-tl__list::before { content: ""; position: absolute; left: 16px; top: 10px; bottom: 10px; width: 2px; background: linear-gradient(var(--gnista), rgba(155, 93, 229, .2)); }
.kup-ev { position: relative; display: flex; gap: 14px; margin-left: -30px; padding: 14px 16px; border-radius: 18px; background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px var(--on-dark-line); transition: opacity .35s, transform .45s var(--spring); }
.kup-ev .kup-ti { box-shadow: 0 0 0 5px var(--natt); }
.kup-ev b { display: block; font-size: 1rem; }
.kup-ev small { font-size: .8rem; color: var(--ton); }
.kup-ev p { margin-top: 4px; font-size: .9rem; color: var(--on-dark-2); }
.kup-ev.is-out { display: none; }
.kup-ev.is-in-now { animation: kup-ev .5s var(--spring) both; }

/* ==========================================================================
   6. Den som ringer
   ========================================================================== */
.kup-call__grid { display: grid; gap: 50px; align-items: center; }
@media (min-width: 1000px) { .kup-call__grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 64px; } }
.kup-call .h2 { margin-bottom: 14px; }
.kup-call__cb { display: flex; align-items: flex-start; gap: 10px; margin-top: 22px; padding: 14px 16px; border-radius: 16px; font-weight: 650; color: var(--natt); background: var(--soft); }
.kup-call__cb .ic { flex: none; width: 20px; height: 20px; color: var(--primar-ink); }
.kup-ring { position: relative; display: grid; place-items: center; padding: 30px 0; }
.kup-ring__waves { position: absolute; left: 50%; top: 50%; }
.kup-ring__waves i { position: absolute; left: -170px; top: -170px; width: 340px; height: 340px; border-radius: 50%; border: 2px solid rgba(155, 93, 229, .35); opacity: 0; }
.motion .kup-ring__waves i { animation: air-ring 3s ease-out infinite; }
.motion .kup-ring__waves i:nth-child(2) { animation-delay: 1s; }
.motion .kup-ring__waves i:nth-child(3) { animation-delay: 2s; }
.kup-phone { position: relative; z-index: 1; display: grid; justify-items: center; gap: 8px; width: 270px; padding: 34px 20px 26px; border-radius: 44px; text-align: center; color: #fff; background: radial-gradient(130% 70% at 50% 0%, #52227a, #1b0726 65%); box-shadow: inset 0 0 0 9px #140519, inset 0 0 0 10px rgba(255, 255, 255, .12), 0 60px 100px -40px rgba(44, 14, 61, .8); }
.kup-phone__in { font-size: .8rem; color: var(--ton); }
.kup-phone__name { font-size: 1.4rem; font-weight: 800; }
.kup-known { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; font-size: .8rem; font-weight: 800; color: var(--natt); background: var(--gnista); }
.kup-known .ic { width: 14px; height: 14px; stroke-width: 3; }
.reveal-on .kup-ring .kup-known { opacity: 0; transform: scale(.6); }
.reveal-on .kup-ring.is-in .kup-known { opacity: 1; transform: none; transition: opacity .4s 1s, transform .6s 1s var(--spring); }
.kup-phone__open { font-size: .8rem; color: var(--on-dark-2); }
.kup-phone__say { margin-top: 8px; padding: 12px 14px; border-radius: 16px 16px 16px 5px; font-size: .88rem; line-height: 1.4; text-align: left; background: rgba(255, 255, 255, .1); }
.reveal-on .kup-ring .kup-phone__say { opacity: 0; transform: translateY(10px); }
.reveal-on .kup-ring.is-in .kup-phone__say { opacity: 1; transform: none; transition: opacity .5s 1.8s, transform .6s 1.8s var(--ease-out); }

/* ==========================================================================
   7. Glöm personen
   ========================================================================== */
.kup-gdpr { padding-top: 0; padding-bottom: calc(clamp(76px, 10vw, 136px) + var(--sheet-r)); }
.kup-gdpr__grid { display: grid; gap: 40px; align-items: center; }
@media (min-width: 1000px) { .kup-gdpr__grid { grid-template-columns: 1fr 1fr; gap: 64px; } }
.kup-gdpr .h2 { margin-bottom: 14px; }
.kup-forget { position: relative; display: grid; min-height: 380px; }
.kup-forget > * { grid-area: 1 / 1; }
.kup-forget__card { position: relative; padding: 22px; border-radius: 26px; background: #fff; box-shadow: 0 0 0 1px var(--line), var(--shadow-2); transition: opacity .5s; }
.kup-forget__top { display: flex; align-items: center; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--line-2); }
.kup-forget__top span:last-child { display: grid; min-width: 0; }
.kup-forget__top small { overflow: hidden; font-size: .8rem; color: var(--muted); white-space: nowrap; text-overflow: ellipsis; }
.kup-forget__rows { display: grid; gap: 6px; margin: 14px 0; }
.kup-forget__rows li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; font-size: .88rem; font-weight: 650; background: var(--ljus); transition: opacity .6s, transform .9s var(--ease-out), filter .6s; transition-delay: calc(var(--i) * 90ms); }
.kup-forget__acts { display: flex; flex-wrap: wrap; gap: 8px; }
.kup-forget__acts .ic { width: 15px; height: 15px; }
.kup-forget__btn { color: #fff; background: var(--bad); box-shadow: 0 12px 26px -12px rgba(197, 48, 48, .7); }
.kup-forget__btn:hover { transform: translateY(-2px); }
.kup-forget__toast { position: absolute; left: 50%; bottom: -18px; display: inline-flex; align-items: center; gap: 8px; padding: 9px 15px; border-radius: 999px; font-size: .85rem; font-weight: 700; white-space: nowrap; color: #fff; background: var(--ok); translate: -50% 0; opacity: 0; transform: translateY(10px); transition: opacity .3s, transform .4s var(--spring); pointer-events: none; }
.kup-forget__toast .ic { width: 15px; height: 15px; stroke-width: 3; }
.kup-forget__toast.is-on { opacity: 1; transform: none; }
.kup-forget.is-gone .kup-forget__rows li, .kup-forget.is-gone .kup-forget__top { opacity: 0; filter: blur(6px); transform: translate(calc((var(--i, 2) - 1.5) * 40px), -60px) rotate(calc((var(--i, 2) - 1.5) * 8deg)) scale(.8); }
.kup-forget.is-gone .kup-forget__top { transition: opacity .6s .4s, filter .6s .4s, transform .9s .4s var(--ease-out); }
.kup-forget.is-gone .kup-forget__card { opacity: 0; transition: opacity .4s 1.1s; pointer-events: none; }
.kup-forget__done { display: grid; place-content: center; justify-items: center; gap: 8px; padding: 30px; border-radius: 26px; text-align: center; background: var(--ok-soft); box-shadow: inset 0 0 0 1.5px rgba(22, 122, 91, .3); opacity: 0; transform: scale(.94); pointer-events: none; transition: opacity .4s, transform .6s var(--spring); }
.kup-forget.is-gone .kup-forget__done { opacity: 1; transform: none; pointer-events: auto; transition-delay: 1.3s; }
.kup-forget__ok { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; color: #fff; background: var(--ok); }
.kup-forget__ok .ic { width: 30px; height: 30px; stroke-width: 3; }
.kup-forget__done b { font-size: 1.2rem; }
.kup-forget__done small { color: var(--muted); }
.kup-forget__done .btn { margin-top: 8px; }
.kup-forget__done .ic { width: 15px; height: 15px; }
.kup-go { padding-bottom: calc(clamp(76px, 10vw, 136px) + var(--sheet-r)); }

@keyframes kup-fly { from { opacity: 0; transform: translate(var(--fx), var(--fy)) rotate(var(--fr)) scale(.8); } }
@keyframes kup-ev { from { opacity: 0; transform: translateX(-20px) scale(.97); } }
.kup-call, .kup-live-sec, .kup-gdpr { overflow-x: clip; }