/* Kavvi Pro page (pro-20261014, alive in pro2-20261014) - see kv-pro-20261014.js. Prefix kvpro.
   Phone first; light and dark from the app's tokens; the Pro sheet's (kvlo) honeycomb, mint button and sweep light.
   Motion is transform/opacity only and stops under prefers-reduced-motion. */

html.kvpro-on .kvp, html.kvpro-on .kvp-sticky { display: none !important; }

.kvpro {
  --kvpro-ink: var(--kv-text, #14261f);
  --kvpro-ink-2: var(--kv-text-2, #44564d);
  --kvpro-ink-3: var(--kv-text-3, #6b7b73);
  --kvpro-line: var(--kv-line, rgba(20, 38, 31, .1));
  --kvpro-card: var(--kv-card, #fff);
  --kvpro-green: #1f5a42;
  --kvpro-deep: #0d2d21;
  --kvpro-mint: #8fe3b8;
  --kvpro-accent: var(--kv-accent-fill, #1f5a42);
  --kvpro-on: var(--kv-on-accent, #fff);
  --kvpro-amber: #a86a00;
  position: fixed; inset-inline: 0; top: 56px; bottom: 0; z-index: 30;
  overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  background: var(--kv-canvas, #f3f6f2); color: var(--kvpro-ink);
  font-family: var(--kv-font-body, system-ui), system-ui, sans-serif;
}
html[data-theme='dark'] .kvpro { --kvpro-amber: #f2b84b; }
@media (prefers-color-scheme: dark) { html:not([data-theme='light']) .kvpro { --kvpro-amber: #f2b84b; } }
.kvpro[lang='ar'] { font-family: 'Kavvi Alexandria', var(--kv-font-body, system-ui), system-ui, sans-serif; }
.kvpro *, .kvpro *::before, .kvpro *::after { box-sizing: border-box; }
.kvpro-col { max-width: 640px; margin: 0 auto; padding: 16px 16px 0; }
.kvpro button { font: inherit; }
.kvpro b, .kvpro strong { font-weight: 700; }

/* ---------------------------------------------------------------- the honeycomb hero */
.kvpro-hero { position: relative; overflow: hidden; isolation: isolate; padding: 24px 20px 20px; border-radius: 26px; color: #effbf4;
  background: radial-gradient(130% 90% at 100% 0%, rgba(143, 227, 184, .32), transparent 55%), linear-gradient(165deg, #1f5a42 0%, #0d2d21 80%);
  box-shadow: 0 22px 44px -26px rgba(13, 45, 33, .85); }
.kvpro-hex { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.kvpro-hex i { position: absolute; width: var(--z, 46px); aspect-ratio: 1 / 1.1547; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  background: rgba(207, 240, 211, .09); animation: kvpro-drift 9s ease-in-out infinite alternate; }
.kvpro-hex i:nth-child(1) { --z: 70px; top: -14px; inset-inline-end: 8%; animation-delay: -1s; }
.kvpro-hex i:nth-child(2) { --z: 38px; top: 46px; inset-inline-end: 30%; animation-delay: -3s; background: rgba(143, 227, 184, .16); }
.kvpro-hex i:nth-child(3) { --z: 54px; bottom: 22px; inset-inline-end: -10px; animation-delay: -5s; }
.kvpro-hex i:nth-child(4) { --z: 26px; top: 18px; inset-inline-start: 46%; animation-delay: -2s; background: rgba(255, 214, 120, .18); }
.kvpro-hex i:nth-child(5) { --z: 90px; bottom: -40px; inset-inline-start: -24px; animation-delay: -6s; background: rgba(207, 240, 211, .06); }
.kvpro-hex i:nth-child(6) { --z: 30px; bottom: 40%; inset-inline-start: 18%; animation-delay: -4s; background: rgba(143, 227, 184, .12); }
.kvpro-hex i:nth-child(7) { --z: 44px; top: 40%; inset-inline-end: 4%; animation-delay: -7s; }
.kvpro-hex i:nth-child(8) { --z: 22px; bottom: 16px; inset-inline-start: 52%; animation-delay: -8s; background: rgba(255, 255, 255, .1); }
.kvpro-hex i:nth-child(9) { --z: 34px; top: 6px; inset-inline-start: 6%; animation-delay: -2.5s; }
@keyframes kvpro-drift { from { transform: translate3d(-10px, 6px, 0) rotate(-6deg) scale(.94); } to { transform: translate3d(12px, -8px, 0) rotate(8deg) scale(1.08); } }
.kvpro-glow { position: absolute; z-index: -1; width: 260px; height: 260px; top: -90px; inset-inline-start: -60px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(143, 227, 184, .35), transparent); animation: kvpro-glow 8s ease-in-out infinite alternate; pointer-events: none; }
@keyframes kvpro-glow { to { transform: translate3d(140px, 90px, 0) scale(1.2); } }
.kvpro-brand { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 12px; padding: 5px 10px 5px 8px; border-radius: 999px;
  font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--kvpro-deep); background: var(--kvpro-mint); }
.kvpro-brand svg { animation: kvpro-float 4s ease-in-out infinite; }
@keyframes kvpro-float { 50% { transform: translateY(-2px) rotate(12deg); } }
.kvpro[lang='ar'] .kvpro-brand { letter-spacing: .02em; padding: 5px 8px 5px 10px; }
.kvpro-title { margin: 0; font-size: 27px; line-height: 1.25; font-weight: 800; letter-spacing: -.015em; color: #fff; text-wrap: balance; }
.kvpro[lang='ar'] .kvpro-title { letter-spacing: 0; line-height: 1.45; }
.kvpro-sub { margin: 10px 0 0; font-size: 15px; line-height: 1.6; color: rgba(239, 251, 244, .88); }
.kvpro-sub b, .kvpro-sub bdi { color: #fff; font-weight: 700; font-variant-numeric: tabular-nums; }

/* saved for you: big numbers that count up */
.kvpro-stats { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.kvpro-stat { flex: 1 1 0; min-width: 84px; padding: 10px 12px; border-radius: 16px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(207, 240, 211, .16);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.kvpro-stat b { display: block; font-size: 26px; line-height: 1.1; font-weight: 800; color: #fff; font-variant-numeric: tabular-nums; }
.kvpro-stat span { font-size: 13px; color: rgba(239, 251, 244, .82); }
.kvpro-stats__cap { flex-basis: 100%; margin: 0; font-size: 12.5px; font-weight: 700; color: var(--kvpro-mint); }

/* the comeback offer */
.kvpro-offer { display: flex; align-items: center; gap: 10px; margin: 16px 0 0; padding: 10px 12px; border-radius: 14px;
  background: rgba(255, 214, 120, .14); border: 1px solid rgba(255, 214, 120, .38); font-size: 14px; color: #fff3d6; }
.kvpro-offer__tag { flex: none; padding: 3px 9px; border-radius: 8px; background: #ffd678; color: #3d2a00; font-weight: 800; font-size: 13px; animation: kvpro-pulse-tag 1.8s ease-in-out infinite; }
@keyframes kvpro-pulse-tag { 50% { transform: scale(1.08); box-shadow: 0 0 0 6px rgba(255, 214, 120, .15); } }
.kvpro-offer__what { flex: 1 1 auto; min-width: 0; font-weight: 650; }
.kvpro-offer__clock { flex: none; white-space: nowrap; }
.kvpro-offer__clock b { font-variant-numeric: tabular-nums; color: #fff; }

/* ---------------------------------------------------------------- status (claim) */
.kvpro-status { display: flex; gap: 14px; margin-top: 14px; padding: 18px; border-radius: 20px; background: var(--kvpro-card); border: 1px solid var(--kvpro-line); }
.kvpro-status__icon { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; font-weight: 800; }
.kvpro-status.is-ok .kvpro-status__icon { background: color-mix(in srgb, var(--kvpro-accent) 14%, transparent); color: var(--kvpro-accent); }
.kvpro-status.is-ask .kvpro-status__icon { background: color-mix(in srgb, var(--kvpro-amber) 16%, transparent); color: var(--kvpro-amber); }
.kvpro-status.is-no .kvpro-status__icon { background: color-mix(in srgb, #c2410c 14%, transparent); color: #c2410c; }
.kvpro-status > div { flex: 1 1 auto; min-width: 0; }
.kvpro-status h2 { margin: 6px 0 4px; font-size: 17px; line-height: 1.35; }
.kvpro-status p { margin: 0 0 12px; font-size: 14px; line-height: 1.6; color: var(--kvpro-ink-2); }
.kvpro-status blockquote { margin: 0 0 12px; padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, var(--kvpro-ink) 5%, transparent); font-size: 14px; line-height: 1.6; }

/* ---------------------------------------------------------------- sections + reveal */
.kvpro-sec { margin-top: 28px; }
.kvpro-h2 { margin: 0 0 12px; font-size: 19px; line-height: 1.3; font-weight: 800; }
.kvpro-empty { margin: 24px 0; padding: 18px; border-radius: 16px; background: var(--kvpro-card); color: var(--kvpro-ink-2); text-align: center; }
[data-reveal]:not(.kvpro-stats) { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .55s cubic-bezier(.2, .8, .2, 1); }
[data-reveal].is-in { opacity: 1; transform: none; }
[data-reveal].no-anim, [data-reveal].no-anim * { transition: none !important; }

/* ---------------------------------------------------------------- plans priced like snacks */
.kvpro-snacks { display: flex; flex-direction: column; gap: 10px; }
.kvpro-snack { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; min-height: 84px; padding: 10px 14px 10px 10px; border-radius: 20px;
  cursor: pointer; text-align: start; background: var(--kvpro-card); color: var(--kvpro-ink); border: 2px solid var(--kvpro-line);
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.kvpro[dir='rtl'] .kvpro-snack { padding: 10px 10px 10px 14px; }
.kvpro-snack:hover { transform: translateY(-1px); }
.kvpro-snack.is-on { border-color: var(--kvpro-accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--kvpro-accent) 14%, transparent), 0 14px 30px -18px rgba(31, 90, 66, .55); }
.kvpro-snack.is-pop { animation: kvpro-pop .45s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes kvpro-pop { 40% { transform: scale(1.035); } }
.kvpro-snack:focus-visible { outline: 2px solid var(--kvpro-accent); outline-offset: 3px; }
.kvpro-snack__art { flex: none; display: grid; place-items: center; width: 66px; height: 66px; border-radius: 18px;
  background: color-mix(in srgb, var(--kvpro-accent) 9%, transparent); transition: transform .3s cubic-bezier(.3, 1.6, .5, 1); }
.kvpro-snack.is-on .kvpro-snack__art { transform: rotate(-5deg) scale(1.06); }
.kvpro-snack__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.kvpro-snack__top { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.kvpro-snack__top b { font-size: 16.5px; }
.kvpro-snack__tag { padding: 2px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 800; color: #3d2a00; background: #ffd678; }
.kvpro-snack__line { font-size: 13px; line-height: 1.45; color: var(--kvpro-ink-2); }
.kvpro-snack__price { flex: none; display: flex; flex-direction: column; align-items: flex-end; line-height: 1.15; }
.kvpro-snack__price b { font-size: 21px; font-weight: 800; font-variant-numeric: tabular-nums; }
.kvpro-snack__price s { font-size: 12.5px; color: var(--kvpro-ink-3); }
/* the snacks' little parts */
.kvpro-art--coffee .a-ice { animation: kvpro-ice 3.2s ease-in-out infinite; transform-box: fill-box; }
.kvpro-art--coffee .a-ice2 { animation-delay: -1.4s; }
@keyframes kvpro-ice { 50% { transform: translateY(-3px) rotate(12deg); } }
.kvpro-art--coffee .a-straw { animation: kvpro-straw 3s ease-in-out infinite; transform-box: fill-box; transform-origin: bottom; }
@keyframes kvpro-straw { 50% { transform: rotate(6deg); } }
.kvpro-art--burger .a-bun { animation: kvpro-bun 2.6s ease-in-out infinite; }
@keyframes kvpro-bun { 50% { transform: translateY(-2.5px); } }
.kvpro-art--bottle .a-wave { animation: kvpro-wave 2.8s ease-in-out infinite alternate; }
@keyframes kvpro-wave { to { transform: translateX(-16px); } }
/* pro3: each snack on its own warm tile, with depth */
.kvpro-snack__art.kvpro-art--coffee, .kvpro-sum__art.kvpro-art--coffee { background: radial-gradient(circle at 30% 25%, #fff6ea, #f3dcc0 70%); }
.kvpro-snack__art.kvpro-art--burger, .kvpro-sum__art.kvpro-art--burger { background: radial-gradient(circle at 30% 25%, #fff4df, #ffd9a3 70%); }
.kvpro-snack__art.kvpro-art--bottle, .kvpro-sum__art.kvpro-art--bottle { background: radial-gradient(circle at 30% 25%, #f1fbff, #c9ebf8 70%); }
.kvpro-snack__art { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 6px 14px -8px rgba(60, 40, 10, .35); }
.kvpro-snack.is-on .kvpro-snack__art { background-blend-mode: normal; }
.kvpro-snack.is-on .kvpro-snack__art.kvpro-art--coffee { background: radial-gradient(circle at 30% 25%, #fff6ea, #ecc99d 70%); }
.kvpro-snack.is-on .kvpro-snack__art.kvpro-art--burger { background: radial-gradient(circle at 30% 25%, #fff4df, #ffc677 70%); }
.kvpro-snack.is-on .kvpro-snack__art.kvpro-art--bottle { background: radial-gradient(circle at 30% 25%, #f1fbff, #a9def4 70%); }
.kvpro-art--coffee .a-ice3 { animation: kvpro-ice 3.6s ease-in-out -2.2s infinite; transform-box: fill-box; }
.kvpro-art--bottle .a-bub { animation: kvpro-bub 2.6s ease-in infinite; transform-box: fill-box; }
.kvpro-art--bottle .a-bub2 { animation-delay: -.9s; } .kvpro-art--bottle .a-bub3 { animation-delay: -1.7s; }
@keyframes kvpro-bub { from { transform: translateY(0); opacity: 0; } 20% { opacity: .8; } to { transform: translateY(-22px); opacity: 0; } }
.kvpro-snack:hover .kvpro-snack__art svg { transform: rotate(-4deg) scale(1.05); }
.kvpro-snack__art svg { transition: transform .3s cubic-bezier(.3, 1.6, .5, 1); filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .08)); }

/* the desk-only "Ask Kavvi ⌘K" pill sat over every page's bottom edge (owner: useless, irritating). ⌘K still works. */
.kv-command-hint { display: none !important; }

/* ---------------------------------------------------------------- what Pro unlocks */
.kvpro-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.kvpro-tile { display: flex; flex-direction: column; gap: 2px; padding: 14px; border-radius: 18px; background: var(--kvpro-card); border: 1px solid var(--kvpro-line);
  opacity: 0; transform: translateY(10px) scale(.97); transition: opacity .45s ease, transform .5s cubic-bezier(.2, .9, .3, 1.2); transition-delay: calc(var(--i, 0) * 80ms); }
.is-in .kvpro-tile { opacity: 1; transform: none; }
.kvpro-tile__icon { display: grid; place-items: center; width: 38px; height: 38px; margin-bottom: 6px; border-radius: 12px; color: var(--kvpro-accent);
  background: color-mix(in srgb, var(--kvpro-accent) 11%, transparent); }
.kvpro-tile b { font-size: 28px; line-height: 1.1; font-weight: 800; color: var(--kvpro-accent); font-variant-numeric: tabular-nums; }
.kvpro-tile > span:last-child { font-size: 13px; line-height: 1.4; color: var(--kvpro-ink-2); }

/* ---------------------------------------------------------------- Free vs Pro, racing */
.kvpro-race { padding: 16px; border-radius: 20px; background: var(--kvpro-card); border: 1px solid var(--kvpro-line); display: flex; flex-direction: column; gap: 14px; }
.kvpro-race__what { margin: 0 0 6px; font-size: 14.5px; font-weight: 700; }
.kvpro-race__what small { font-weight: 500; color: var(--kvpro-ink-3); }
.kvpro-race__bar { display: grid; grid-template-columns: 56px minmax(0, 1fr) 48px; align-items: center; gap: 10px; min-height: 22px; }
.kvpro-race__who { font-size: 12.5px; color: var(--kvpro-ink-3); }
.kvpro-race__bar.is-pro .kvpro-race__who { color: var(--kvpro-accent); font-weight: 800; }
.kvpro-race__track { position: relative; height: 10px; border-radius: 999px; background: color-mix(in srgb, var(--kvpro-ink) 8%, transparent); overflow: hidden; }
.kvpro-race__track i { position: absolute; inset-block: 0; inset-inline-start: 0; width: var(--w); border-radius: inherit; transform-origin: left; transform: scaleX(0);
  transition: transform 1.1s cubic-bezier(.2, .8, .2, 1) .15s; background: color-mix(in srgb, var(--kvpro-ink) 28%, transparent); }
.kvpro[dir='rtl'] .kvpro-race__track i { transform-origin: right; }
.is-pro .kvpro-race__track i { background: linear-gradient(90deg, #5fc79a, #1f5a42); overflow: hidden; }
.kvpro[dir='rtl'] .is-pro .kvpro-race__track i { background: linear-gradient(270deg, #5fc79a, #1f5a42); }
.is-pro .kvpro-race__track i::after { content: ''; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .7) 50%, transparent 70%);
  transform: translateX(-120%); animation: kvpro-sweep 3s ease-in-out 1.4s infinite; }
.is-in .kvpro-race__track i { transform: scaleX(1); }
.kvpro-race__bar b { font-size: 15px; font-weight: 800; text-align: end; font-variant-numeric: tabular-nums; }
.kvpro-race__bar.is-free b { color: var(--kvpro-ink-3); font-weight: 600; }
.kvpro-race__keep { display: flex; align-items: center; gap: 8px; margin: 0; padding-top: 12px; border-top: 1px dashed var(--kvpro-line); font-size: 13.5px; color: var(--kvpro-ink-2); }
.kvpro-race__keep svg { flex: none; color: var(--kvpro-accent); }

/* ---------------------------------------------------------------- three taps */
.kvpro-how { position: relative; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.kvpro-how::before { content: ''; position: absolute; top: 25px; inset-inline: 16%; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--kvpro-mint), var(--kvpro-accent));
  transform: scaleX(0); transform-origin: left; transition: transform .9s cubic-bezier(.2, .8, .2, 1) .2s; }
.kvpro[dir='rtl'] .kvpro-how::before { transform-origin: right; }
.is-in .kvpro-how::before { transform: scaleX(1); }
.kvpro-how li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; font-size: 13px; line-height: 1.4; font-weight: 650;
  opacity: 0; transform: translateY(8px); transition: opacity .4s ease, transform .45s ease; transition-delay: calc(.25s + var(--i) * .25s); }
.is-in .kvpro-how li { opacity: 1; transform: none; }
.kvpro-how__icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; color: #fff; background: var(--kvpro-green);
  box-shadow: 0 0 0 6px var(--kv-canvas, #f3f6f2), 0 10px 22px -12px rgba(31, 90, 66, .9); }
.kvpro-how li:last-child .kvpro-how__icon { background: linear-gradient(135deg, #ffd678, #f6a83b); color: #3d2a00; }

/* ---------------------------------------------------------------- promises */
.kvpro-promises { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.kvpro-promises li { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px; font-size: 13.5px; line-height: 1.35; font-weight: 600;
  background: color-mix(in srgb, var(--kvpro-accent) 9%, var(--kvpro-card)); border: 1px solid color-mix(in srgb, var(--kvpro-accent) 18%, transparent); }
.kvpro-promises svg { flex: none; color: var(--kvpro-accent); }

/* ---------------------------------------------------------------- questions */
.kvpro-faq { border-radius: 18px; background: var(--kvpro-card); border: 1px solid var(--kvpro-line); overflow: hidden; }
.kvpro-faq details + details { border-top: 1px solid var(--kvpro-line); }
.kvpro-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 54px; padding: 0 16px; cursor: pointer; list-style: none; font-weight: 700; font-size: 15px; }
.kvpro-faq summary::-webkit-details-marker { display: none; }
.kvpro-faq summary::after { content: '+'; flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; font-size: 18px; font-weight: 500;
  color: var(--kvpro-accent); background: color-mix(in srgb, var(--kvpro-accent) 10%, transparent); transition: transform .25s ease; }
.kvpro-faq details[open] summary::after { transform: rotate(45deg); }
.kvpro-faq details[open] p { animation: kvpro-open .3s ease both; }
@keyframes kvpro-open { from { opacity: 0; transform: translateY(-4px); } }
.kvpro-faq p { margin: 0; padding: 0 16px 16px; font-size: 14px; line-height: 1.7; color: var(--kvpro-ink-2); }

/* ---------------------------------------------------------------- the pinned bar + the shining button */
.kvpro-bar { position: sticky; bottom: 0; z-index: 3; margin: 24px -16px 0; padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
  background: color-mix(in srgb, var(--kv-canvas, #f3f6f2) 86%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-top: 1px solid var(--kvpro-line); }
.kvpro-bar__in { display: flex; flex-direction: column; align-items: stretch; gap: 6px; max-width: 640px; margin: 0 auto; }
.kvpro-bar__alt { margin: 0; text-align: center; font-size: 12.5px; color: var(--kvpro-ink-3); }
.kvpro-cta { position: relative; overflow: hidden; isolation: isolate; display: flex; align-items: center; justify-content: center; width: 100%; min-height: 56px; padding: 0 20px;
  border: 0; border-radius: 18px; cursor: pointer; font-weight: 800; font-size: 17px; color: #072018;
  background: linear-gradient(135deg, #e4fae6 0%, #a6ebbe 55%, #79d79f 100%);
  box-shadow: 0 12px 30px -10px rgba(31, 140, 90, .55), inset 0 1px 0 rgba(255, 255, 255, .7); transition: transform .15s ease, box-shadow .15s ease; }
.kvpro-cta:hover { transform: translateY(-1px); }
.kvpro-cta:active { transform: translateY(1px) scale(.99); }
.kvpro-cta:disabled { opacity: .65; cursor: progress; }
.kvpro-cta.is-bump { animation: kvpro-bump .4s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes kvpro-bump { 40% { transform: scale(1.03); } }
.kvpro-cta__t { position: relative; z-index: 1; }
.kvpro-shine { position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .75) 50%, transparent 70%);
  transform: translateX(-120%); animation: kvpro-sweep 3.4s ease-in-out .9s infinite; }
@keyframes kvpro-sweep { 0% { transform: translateX(-120%); } 45%, 100% { transform: translateX(120%); } }
.kvpro-cta:focus-visible, .kvpro-btn:focus-visible, .kvpro-to:focus-visible, .kvpro-back:focus-visible, .kvpro-chip:focus-visible { outline: 2px solid var(--kvpro-accent); outline-offset: 3px; }

.kvpro-btn { position: relative; overflow: hidden; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 24px;
  border-radius: 999px; border: 0; cursor: pointer; text-decoration: none; font-weight: 800; font-size: 15.5px; }
.kvpro-btn--main { background: var(--kvpro-green); color: #fff; box-shadow: 0 10px 24px -12px rgba(31, 90, 66, .8); }
html[data-theme='dark'] .kvpro-btn--main { background: var(--kvpro-mint); color: #0c1f17; }
@media (prefers-color-scheme: dark) { html:not([data-theme='light']) .kvpro-btn--main { background: var(--kvpro-mint); color: #0c1f17; } }
.kvpro-btn--main:disabled { opacity: .6; cursor: progress; }

/* ---------------------------------------------------------------- payment screen */
.kvpro-back { display: inline-flex; align-items: center; gap: 4px; min-height: 40px; padding: 0 12px 0 6px; border: 0; border-radius: 999px; background: none; color: var(--kvpro-ink-2); cursor: pointer; font-size: 14.5px; }
.kvpro[dir='rtl'] .kvpro-back svg { transform: scaleX(-1); }
.kvpro-sum { position: relative; overflow: hidden; isolation: isolate; display: grid; grid-template-columns: auto 1fr; grid-template-areas: "art what" "art price" "line line";
  align-items: center; column-gap: 14px; row-gap: 2px; margin: 8px 0 14px; padding: 18px 20px; border-radius: 22px; color: #effbf4;
  background: radial-gradient(120% 90% at 100% 0%, rgba(143, 227, 184, .3), transparent 55%), linear-gradient(165deg, #1f5a42, #0d2d21 85%); }
.kvpro-sum__art { grid-area: art; display: grid; place-items: center; width: 68px; height: 68px; border-radius: 18px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8); }
.kvpro-sum__what { grid-area: what; font-size: 13.5px; opacity: .85; }
.kvpro-sum > b { grid-area: price; font-size: 32px; line-height: 1.1; font-variant-numeric: tabular-nums; color: #fff; }
.kvpro-sum > s { grid-area: price; justify-self: end; font-size: 14px; opacity: .65; }
.kvpro-sum__line { grid-area: line; margin-top: 10px; font-size: 13.5px; color: var(--kvpro-mint); font-weight: 650; }
.kvpro-rail { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 0 2px 14px; }
.kvpro-rail i { height: 5px; border-radius: 5px; background: color-mix(in srgb, var(--kvpro-ink) 10%, transparent); position: relative; overflow: hidden; }
.kvpro-rail i::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: var(--kvpro-accent); transform: scaleX(0); transform-origin: left; transition: transform .45s ease; }
.kvpro[dir='rtl'] .kvpro-rail i::after { transform-origin: right; }
.kvpro-rail[data-step="1"] i:nth-child(1)::after,
.kvpro-rail[data-step="2"] i:nth-child(-n+2)::after,
.kvpro-rail[data-step="3"] i::after { transform: scaleX(1); }
.kvpro-steps { list-style: none; margin: 0; padding: 0; counter-reset: kvpro; display: flex; flex-direction: column; gap: 12px; }
.kvpro-steps > li { counter-increment: kvpro; position: relative; padding: 16px 16px 16px 56px; border-radius: 20px; background: var(--kvpro-card); border: 1px solid var(--kvpro-line); }
.kvpro[dir='rtl'] .kvpro-steps > li { padding: 16px 56px 16px 16px; }
.kvpro-steps > li::before { content: counter(kvpro); position: absolute; top: 15px; inset-inline-start: 16px; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  font-weight: 800; font-size: 14px; color: var(--kvpro-on); background: var(--kvpro-accent); }
.kvpro[lang='ar'] .kvpro-steps > li::before { content: counter(kvpro, arabic-indic); }
.kvpro-steps h3 { margin: 3px 0 8px; font-size: 16px; line-height: 1.4; }
.kvpro-hint { margin: 0 0 8px; font-size: 13.5px; line-height: 1.55; color: var(--kvpro-ink-2); }
.kvpro-to { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; margin: 0 0 8px; padding: 12px 12px 12px 16px; border-radius: 16px; cursor: pointer;
  border: 1.5px dashed color-mix(in srgb, var(--kvpro-accent) 45%, var(--kvpro-line)); background: color-mix(in srgb, var(--kvpro-accent) 6%, transparent); color: var(--kvpro-ink); }
.kvpro[dir='rtl'] .kvpro-to { padding: 12px 16px 12px 12px; }
.kvpro-to b { font-size: 22px; letter-spacing: .05em; font-variant-numeric: tabular-nums; }
.kvpro-copy { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 14px; border-radius: 999px; background: var(--kvpro-card); border: 1px solid var(--kvpro-line);
  font-size: 13.5px; font-weight: 700; white-space: nowrap; flex: none; transition: background .2s ease, color .2s ease; }
.kvpro-to.is-copied { border-style: solid; border-color: var(--kvpro-accent); animation: kvpro-pop .45s cubic-bezier(.3, 1.6, .5, 1); }
.kvpro-to.is-copied .kvpro-copy { background: var(--kvpro-accent); color: var(--kvpro-on); border-color: transparent; }
.kvpro-methods { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 10px; }
.kvpro-chip { min-height: 36px; padding: 0 14px; border-radius: 999px; border: 1.5px solid var(--kvpro-line); background: none; color: var(--kvpro-ink); cursor: pointer; font-size: 14px; }
.kvpro-chip.is-on { border-color: var(--kvpro-accent); color: var(--kvpro-accent); font-weight: 700; }
.kvpro-field { display: flex; flex-direction: column; gap: 6px; margin: 0 0 10px; }
.kvpro-field span { font-size: 13.5px; color: var(--kvpro-ink-2); }
.kvpro-field input, .kvpro-field textarea { width: 100%; min-height: 50px; padding: 12px 14px; border-radius: 14px; border: 1.5px solid var(--kvpro-line); background: var(--kv-canvas, #fff); color: var(--kvpro-ink); font: inherit; font-size: 16px; }
.kvpro-field input:focus, .kvpro-field textarea:focus { outline: none; border-color: var(--kvpro-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--kvpro-accent) 16%, transparent); }
.kvpro-shot { position: relative; display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 12px 14px; margin: 0 0 10px; border-radius: 14px; border: 1.5px dashed color-mix(in srgb, var(--kvpro-accent) 40%, var(--kvpro-line)); color: var(--kvpro-accent); cursor: pointer; }
.kvpro-shot.has-file { border-style: solid; animation: kvpro-pop .45s cubic-bezier(.3, 1.6, .5, 1); }
.kvpro-shot input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.kvpro-shot:focus-within { outline: 2px solid var(--kvpro-accent); outline-offset: 2px; }
.kvpro-shot img { width: 44px; height: 44px; object-fit: cover; border-radius: 8px; }
.kvpro-shot span { display: flex; flex-direction: column; gap: 2px; color: var(--kvpro-ink); }
.kvpro-shot small { font-size: 12.5px; color: var(--kvpro-ink-3); }
.kvpro-error { margin: 12px 0 0; padding: 12px 14px; border-radius: 14px; font-size: 14px; line-height: 1.55; color: #9a3412; background: color-mix(in srgb, #ea580c 10%, transparent); animation: kvpro-shake .35s ease; }
@keyframes kvpro-shake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
html[data-theme='dark'] .kvpro-error { color: #fdba74; }
.kvpro-bar--pay { margin-top: 18px; }
.kvpro-small { margin: 10px 0 0; padding-bottom: 18px; text-align: center; font-size: 12.5px; line-height: 1.6; color: var(--kvpro-ink-3); }

/* Pro just started */
.kvpro-hero.is-party .kvpro-title { animation: kvpro-pop .6s cubic-bezier(.3, 1.6, .5, 1) .2s both; }
.kvpro-party { position: fixed; inset: 0; pointer-events: none; z-index: 40; overflow: hidden; }
.kvpro-party i { position: absolute; top: -20px; left: var(--x); width: var(--s); aspect-ratio: 1 / 1.1547; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  animation: kvpro-fall 2.2s cubic-bezier(.25, .6, .4, 1) var(--d) both; }
@keyframes kvpro-fall { from { transform: translate3d(0, 0, 0) rotate(0); opacity: 1; } 80% { opacity: 1; } to { transform: translate3d(var(--dx), 92vh, 0) rotate(var(--r)); opacity: 0; } }

/* loading and failure */
.kvpro-skel { display: flex; flex-direction: column; gap: 12px; }
.kvpro-skel i { display: block; height: 84px; border-radius: 20px; background: color-mix(in srgb, var(--kvpro-ink) 7%, transparent); animation: kvpro-pulse 1.4s ease-in-out infinite; }
.kvpro-skel i:first-child { height: 220px; border-radius: 26px; background: linear-gradient(165deg, rgba(31, 90, 66, .55), rgba(13, 45, 33, .55)); }
.kvpro-fail { padding: 60px 16px; text-align: center; }
@keyframes kvpro-pulse { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }

/* desk: wider hero, plans side by side, tiles in three */
@media (min-width: 761px) {
  .kvpro-col { padding-top: 28px; }
  .kvpro-hero { padding: 34px 34px 28px; }
  .kvpro-title { font-size: 36px; }
  .kvpro-snacks { flex-direction: row; }
  .kvpro-snack, .kvpro[dir='rtl'] .kvpro-snack { flex: 1 1 0; flex-direction: column; align-items: flex-start; gap: 10px; min-height: 210px; padding: 18px; }
  .kvpro-snack__art { width: 72px; height: 72px; }
  .kvpro-snack__price { align-items: flex-start; margin-top: auto; }
  .kvpro-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .kvpro-bar { margin-inline: 0; border-radius: 20px 20px 0 0; }
  .kvpro-bar__in { flex-direction: row; align-items: center; }
  .kvpro-bar__in .kvpro-cta { width: auto; min-width: 280px; }
  .kvpro-bar__alt { text-align: start; flex: 1 1 auto; }
}
@media (max-width: 380px) {
  .kvpro-title { font-size: 23px; }
  .kvpro-stat b { font-size: 22px; }
  .kvpro-snack { gap: 10px; }
  .kvpro-snack__art { width: 52px; height: 52px; }
  .kvpro-snack__art svg { width: 46px; height: 46px; }
  .kvpro-tile b { font-size: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .kvpro *, .kvpro *::before, .kvpro *::after { animation: none !important; transition: none !important; }
  [data-reveal], .kvpro-tile, .kvpro-how li { opacity: 1 !important; transform: none !important; }
  .kvpro-race__track i, .kvpro-how::before { transform: none !important; }
  .kvpro-party { display: none; }
}

/* ------------------------------------------------- /profile "Get Pro" (moved from kv-upgrade) */
html.kvpro-profile-free .kvps-hero .kvps-btn.is-primary {
  position: relative; overflow: hidden; flex-wrap: wrap; justify-content: center; align-content: center; column-gap: 8px; row-gap: 1px; min-height: 58px; padding: 9px 22px !important;
  color: #0c1f17 !important; border: 0 !important;
  background: linear-gradient(135deg, #e9fff3, #a6f0c8 55%, #8fe3b8) !important;
  box-shadow: 0 10px 28px rgba(143, 227, 184, .45), 0 0 0 1px rgba(31, 90, 66, .12) inset !important;
  font-weight: 800 !important;
}
html.kvpro-profile-free .kvps-hero .kvps-btn.is-primary svg { color: #1f5a42 !important; }
html.kvpro-profile-free .kvps-hero .kvps-btn.is-primary::after {
  content: var(--kvpro-pro-line, "") !important; display: block; flex: 0 0 100%; text-align: center; position: static; inset: auto; width: auto; height: auto;
  font-size: 11.5px; font-weight: 700; letter-spacing: 0; opacity: .78; white-space: nowrap; background: none; transform: none; pointer-events: none;
}
html.kvpro-profile-free .kvps-hero .kvps-btn.is-primary::before {
  content: ""; position: absolute; inset: 0; transform: translateX(-120%);
  background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .6) 50%, transparent 70%);
  animation: kvpro-sheen 4s ease-in-out infinite; pointer-events: none;
}
@keyframes kvpro-sheen { 0%, 55% { transform: translateX(-120%); } 85%, 100% { transform: translateX(120%); } }
@media (prefers-reduced-motion: reduce) { html.kvpro-profile-free .kvps-hero .kvps-btn.is-primary::before { animation: none; } }
@media (max-width: 719px) {
  html.kvpro-profile-free .kvps-hero .kvps-btn.is-primary { padding: 9px 12px !important; }
  html.kvpro-profile-free .kvps-hero .kvps-btn.is-primary::after { font-size: 11px; }
}