/* Kavvi trial goodbye (trialend-20261012; one page since goodbye2-20261012). The welcome film's stage, after dark: the
   same deep green that drains to grey as Pro goes to sleep. Dark by default; the light theme gets a pale stage. Phones first; only transform,
   opacity and filter animate. The app's mobile.css sizes every button - the stage's buttons reset that. */
.kvgb[aria-modal] {
  --kvgb-bg: #07110e; --kvgb-bg2: #12201b; --kvgb-ink: #ecf6f1; --kvgb-ink2: #a7bdb4; --kvgb-cell: 125,227,184; --kvgb-grey: 112,126,120;
  --kvgb-card: rgba(255,255,255,.045); --kvgb-edge: rgba(255,255,255,.1); --kvgb-accent: #7de3b8; --kvgb-on-accent: #06140f;
  --kvgb-gone: #ffb4a3; --kvgb-offer: #ffd27a; --kvgb-offer-bg: rgba(255,196,92,.1); --kvgb-offer-edge: rgba(255,196,92,.38);
  --kvgb-face: 'Syne', var(--kv-font-head, system-ui), sans-serif; --kvgb-body: var(--kv-font-body, 'DM Sans'), system-ui, sans-serif;
  position: fixed; inset: 0; z-index: 10060; overflow: hidden; color: var(--kvgb-ink); text-align: center; cursor: default;
  background: radial-gradient(80% 60% at 50% 30%, var(--kvgb-bg2) 0%, var(--kvgb-bg) 72%);
  animation: kvgb-in .25s ease-out both; -webkit-tap-highlight-color: transparent; box-sizing: border-box;
}
.kvgb[aria-modal] *, .kvgb[aria-modal] *::before { box-sizing: border-box; }
.kvgb[aria-modal].is-ar { --kvgb-face: 'Kavvi Alexandria', var(--kv-font-ar, system-ui), sans-serif; --kvgb-body: var(--kv-font-ar, 'Plex Arabic'), system-ui, sans-serif; }
:root[data-theme='light'] .kvgb[aria-modal] {
  --kvgb-bg: #eef3f1; --kvgb-bg2: #ffffff; --kvgb-ink: #10241d; --kvgb-ink2: #50665d; --kvgb-cell: 31,138,100; --kvgb-grey: 150,160,156;
  --kvgb-card: rgba(255,255,255,.8); --kvgb-edge: rgba(16,36,29,.1); --kvgb-accent: #17694c; --kvgb-on-accent: #ffffff;
  --kvgb-gone: #b5432b; --kvgb-offer: #8a5200; --kvgb-offer-bg: rgba(255,176,50,.13); --kvgb-offer-edge: rgba(184,106,0,.35);
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme='dark']) .kvgb[aria-modal] {
    --kvgb-bg: #eef3f1; --kvgb-bg2: #ffffff; --kvgb-ink: #10241d; --kvgb-ink2: #50665d; --kvgb-cell: 31,138,100; --kvgb-grey: 150,160,156;
    --kvgb-card: rgba(255,255,255,.8); --kvgb-edge: rgba(16,36,29,.1); --kvgb-accent: #17694c; --kvgb-on-accent: #ffffff;
    --kvgb-gone: #b5432b; --kvgb-offer: #8a5200; --kvgb-offer-bg: rgba(255,176,50,.13); --kvgb-offer-edge: rgba(184,106,0,.35);
  }
}
/* goodbye2-20261012: Kavvi's Arabic display face - Alexandria (Mohamed Gaber, an Egyptian type designer; SIL OFL 1.1,
   /assets/pro-fonts/Alexandria-OFL.txt), variable 100-900, Arabic letters only. It replaces Reem Kufi, whose geometric
   Kufi was hard to read at title sizes, in the welcome film, this goodbye, the Pro reveal, the limit offer and Answers. */
@font-face { font-family: 'Kavvi Alexandria'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('/assets/pro-fonts/Alexandria-arabic.woff2') format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
html.kvgb-open, html.kvgb-open body { overflow: hidden; }
.kvgb[aria-modal].is-leaving { animation: kvgb-out .3s ease-in forwards; }

/* every control on the stage sizes to its content (the app's mobile.css gives buttons min-heights and ratios) */
.kvgb[aria-modal] button, .kvgb[aria-modal] a { min-width: 0 !important; aspect-ratio: auto !important; font: inherit; }
.kvgb[aria-modal] button:focus-visible, .kvgb[aria-modal] a:focus-visible { outline: 2px solid rgba(var(--kvgb-cell), .85); outline-offset: 3px; }
.kvgb[aria-modal] .kvgb-x {
  position: absolute; top: max(12px, env(safe-area-inset-top, 0px)); inset-inline-end: 12px; z-index: 3; display: inline-grid; place-items: center;
  width: 40px; height: 40px !important; min-height: 0 !important; padding: 0; border: 1px solid var(--kvgb-edge); border-radius: 99px;
  background: transparent; color: var(--kvgb-ink2); cursor: pointer;
}
.kvgb[aria-modal] .kvgb-x:hover { color: var(--kvgb-ink); }

/* the one page: a column that fits a phone, scrolls on a short one */
.kvgb[aria-modal] .kvgb-page {
  position: absolute; inset: 0; overflow-y: auto; overscroll-behavior: contain; display: grid; align-content: center; justify-items: center; gap: 12px;
  padding: max(52px, calc(env(safe-area-inset-top, 0px) + 46px)) 18px calc(22px + env(safe-area-inset-bottom, 0px));
}
.kvgb[aria-modal] .kvgb-page > * { width: min(100%, 460px); }
.kvgb[aria-modal] .kvgb-mark { width: 104px !important; height: 96px; margin-bottom: 2px; }
.kvgb[aria-modal] .kvgb-title { margin: 0; font: 800 clamp(30px, 6vw, 46px)/1.08 var(--kvgb-face); letter-spacing: -.03em; color: var(--kvgb-ink); }
.kvgb[aria-modal].is-ar .kvgb-title { font-weight: 700; letter-spacing: 0; line-height: 1.35; }
.kvgb[aria-modal] .kvgb-line { margin: -4px 0 2px; font: 500 15px/1.5 var(--kvgb-body); color: var(--kvgb-ink2); }
.kvgb[aria-modal] .kvgb-line b { color: var(--kvgb-ink); font-weight: 800; }

/* what locks: four chips, each lock clicking shut */
.kvgb[aria-modal] .kvgb-locks { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; text-align: start; }
.kvgb[aria-modal] .kvgb-locks li { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 12px; background: var(--kvgb-card); border: 1px solid var(--kvgb-edge); font: 600 12.5px/1.25 var(--kvgb-body); color: var(--kvgb-ink2); }
.kvgb[aria-modal] .kvgb-lock { display: inline-grid; place-items: center; width: 22px; height: 22px; flex: none; border-radius: 7px; background: color-mix(in srgb, var(--kvgb-gone) 14%, transparent); color: var(--kvgb-gone); }
.kvgb[aria-modal] .kvgb-lock svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; }
.kvgb[aria-modal] .kvgb-lock__body { fill: currentColor; fill-opacity: .2; }
.kvgb[aria-modal] .kvgb-lock__arm { transform: translateY(-3px); transform-box: view-box; animation: kvgb-click .3s cubic-bezier(.5,0,.3,1.6) both; animation-delay: calc(.35s + var(--i) * 110ms); }

/* the offer */
.kvgb[aria-modal] .kvgb-offer[hidden] { display: none; }
.kvgb[aria-modal] .kvgb-offer { display: grid; gap: 8px; padding: 13px 15px; border-radius: 18px; background: var(--kvgb-offer-bg); border: 1px solid var(--kvgb-offer-edge); text-align: start; }
.kvgb[aria-modal].is-ready .kvgb-offer { animation: kvgb-offer .45s cubic-bezier(.2,.9,.25,1.2) both; }
.kvgb[aria-modal] .kvgb-offer__top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.kvgb[aria-modal] .kvgb-offer__tag { font: 800 18px/1.2 var(--kvgb-body); color: var(--kvgb-offer); }
.kvgb[aria-modal] .kvgb-offer__left { font: 600 13px/1.2 var(--kvgb-body); color: var(--kvgb-ink2); }
.kvgb[aria-modal] .kvgb-offer__left b { font-variant-numeric: tabular-nums; color: var(--kvgb-ink); unicode-bidi: isolate; }
.kvgb[aria-modal] .kvgb-prices { display: grid; gap: 5px; }
.kvgb[aria-modal] .kvgb-price { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font: 600 14px/1.3 var(--kvgb-body); color: var(--kvgb-ink2); }
.kvgb[aria-modal] .kvgb-price__n { display: inline-flex; align-items: baseline; gap: 8px; }
.kvgb[aria-modal] .kvgb-price s { color: var(--kvgb-ink2); opacity: .75; font-weight: 500; }
.kvgb[aria-modal] .kvgb-price b { font: 800 20px/1 var(--kvgb-body); color: var(--kvgb-ink); }

.kvgb[aria-modal] .kvgb-go {
  display: flex; align-items: center; justify-content: center; min-height: 54px; padding: 0 22px; border-radius: 16px; text-decoration: none;
  background: linear-gradient(180deg, #d9fbe9, #7de3b8); color: #06140f !important; font: 800 17px/1.2 var(--kvgb-body);
  box-shadow: 0 14px 40px rgba(var(--kvgb-cell), .28); animation: kvgb-glow 2.4s 1.2s ease-in-out infinite;
}
:root[data-theme='light'] .kvgb[aria-modal] .kvgb-go { background: linear-gradient(180deg, #1f8a64, #15684b); color: #fff !important; }
@media (prefers-color-scheme: light) { :root:not([data-theme='dark']) .kvgb[aria-modal] .kvgb-go { background: linear-gradient(180deg, #1f8a64, #15684b); color: #fff !important; } }
.kvgb[aria-modal] .kvgb-go:hover { filter: brightness(1.05); }
.kvgb[aria-modal] .kvgb-week[hidden] { display: none; }
.kvgb[aria-modal] .kvgb-week { width: auto !important; color: var(--kvgb-ink); font: 700 14.5px/1.3 var(--kvgb-body); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(var(--kvgb-cell), .5); padding: 4px; }
.kvgb[aria-modal] .kvgb-free { width: auto !important; min-height: 0 !important; height: auto !important; border: 0; background: none; color: var(--kvgb-ink2); font: 500 13.5px/1 var(--kvgb-body); cursor: pointer; padding: 8px; }
.kvgb[aria-modal] .kvgb-kept { margin: 0; font: 500 12.5px/1.4 var(--kvgb-body); color: var(--kvgb-ink2); opacity: .8; }

/* it comes in quickly: everything is there within about a second */
.kvgb[aria-modal] .kvgb-page > * { animation: kvgb-up .4s ease-out both; }
.kvgb[aria-modal] .kvgb-page > .kvgb-mark { animation: none; }
.kvgb[aria-modal] .kvgb-page > .kvgb-title { animation-delay: .05s; }
.kvgb[aria-modal] .kvgb-page > .kvgb-line { animation-delay: .1s; }
.kvgb[aria-modal] .kvgb-page > .kvgb-locks { animation-delay: .15s; }
.kvgb[aria-modal] .kvgb-page > .kvgb-go { animation: kvgb-up .4s .25s ease-out both, kvgb-glow 2.4s 1.2s ease-in-out infinite; }
.kvgb[aria-modal] .kvgb-page > .kvgb-week, .kvgb[aria-modal] .kvgb-page > .kvgb-free, .kvgb[aria-modal] .kvgb-page > .kvgb-kept { animation-delay: .3s; }

@media (max-width: 380px) { .kvgb[aria-modal] .kvgb-locks { grid-template-columns: 1fr; } .kvgb[aria-modal] .kvgb-page { align-content: start; } }
@media (max-height: 700px) { .kvgb[aria-modal] .kvgb-page { align-content: start; } .kvgb[aria-modal] .kvgb-mark { height: 76px; width: 84px !important; } }

@keyframes kvgb-in { from { opacity: 0; } }
@keyframes kvgb-out { to { opacity: 0; transform: scale(1.02); } }
@keyframes kvgb-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes kvgb-click { from { transform: translateY(-3px); } to { transform: translateY(0); } }
@keyframes kvgb-offer { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }
@keyframes kvgb-glow { 0%, 100% { box-shadow: 0 14px 40px rgba(var(--kvgb-cell), .2); } 50% { box-shadow: 0 14px 54px rgba(var(--kvgb-cell), .45), 0 0 0 4px rgba(var(--kvgb-cell), .12); } }

/* reduced motion: everything is simply there */
.kvgb[aria-modal].is-still *, .kvgb[aria-modal].is-still { animation-duration: .01s !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: .01s !important; }

/* ------------------------------------------------------------------ after the film (kv-trial-20261010.js) */
/* the grey Pro badge in the navigation while the comeback offer runs */
.kvtt.kvte-badge { --kvtt-acc: #9aa8a2; --kvtt-edge: rgba(154,168,162,.35); --kvtt-bg: rgba(154,168,162,.08); }
.kvtt.kvte-badge .kvtt__label { color: #ffc45c; }
:root[data-theme='light'] .kvtt.kvte-badge { --kvtt-acc: #6c7a74; --kvtt-edge: rgba(108,122,116,.35); --kvtt-bg: rgba(108,122,116,.07); }
:root[data-theme='light'] .kvtt.kvte-badge .kvtt__label { color: #a05d00; }
.kvtt.kvte-badge .kvtt__core { animation: none; opacity: .55; }
/* phones: the nav has no room for both - the badge opens the offer, which leads to the same page */
@media (max-width: 760px) { html.kvte-offer .os-top-nav__upgrade { display: none !important; } }
/* the last 10 minutes: a cell drops off the ring every minute */
.kvtt.is-final .kvtt__left { transition: stroke-dasharray .6s cubic-bezier(.5,0,.3,1.4); }
.kvtt.is-drop .kvtt__ring { animation: kvte-drop .6s ease-out; }
@keyframes kvte-drop { 30% { transform: scale(.86) rotate(-8deg); } 70% { transform: scale(1.05); } }
/* the last-hour card's recap row */
.kvtc .kvte-made { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.kvtc .kvte-made li { padding: 6px 10px; border-radius: 10px; background: rgba(255,255,255,.08); font-size: 12.5px; color: #d6efe4; }
.kvtc .kvte-made b { color: #fff; font-weight: 800; margin-inline-end: 4px; }
.kvtc .kvte-was { opacity: .7; margin-inline-end: 6px; font-weight: 600; }
.kvtc--offer { background: radial-gradient(120% 140% at 100% 0%, #3a3524 0%, #1c1a12 60%, #121109 100%); }
.kvtc--offer .kvtc__icon { background: rgba(255,196,92,.16); color: #ffc45c; }
.kvtc--offer .kvtc__clock { color: #ffe2ad; filter: drop-shadow(0 0 14px rgba(255,196,92,.3)); font-size: 34px; }

/* the upgrade page while the offer runs */
.kvte-banner {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 0 14px; padding: 12px 14px; border-radius: 16px; text-align: start;
  background: rgba(255,196,92,.12); border: 1px solid rgba(255,196,92,.4); color: inherit; font: 600 14px/1.35 var(--kv-font-body, 'DM Sans'), 'Plex Arabic', system-ui, sans-serif;
  animation: kvgb-up .5s ease-out both;
}
.kvte-banner strong { font-weight: 800; color: #b86a00; }
:root[data-theme='dark'] .kvte-banner strong { color: #ffc45c; }
@media (prefers-color-scheme: dark) { :root:not([data-theme='light']) .kvte-banner strong { color: #ffc45c; } }
.kvte-banner .kvt-clock { font-weight: 800; }
.kvte-banner__left { margin-inline-start: auto; display: inline-flex; gap: 6px; align-items: baseline; opacity: .85; }
.kvp-price__main .kvte-was { text-decoration: line-through; opacity: .5; font: 700 clamp(22px, 3vw, 30px)/1 var(--kv-font-head, inherit); letter-spacing: -.02em; align-self: center; font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) { .kvte-banner, .kvtt.is-drop .kvtt__ring { animation: none; } }