/* Display faces for the Pro moments, self-hosted: the site CSP allows
   fonts and styles from 'self' only, so a Google Fonts link is blocked.
   Syne and Reem Kufi are SIL Open Font License 1.1 (variable, one file per
   script); browsers fetch a file only when a Pro moment uses it. */
@font-face { font-family: 'Syne'; font-style: normal; font-weight: 700 800; font-display: swap; src: url('/assets/pro-fonts/Syne-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Reem Kufi'; font-style: normal; font-weight: 600 700; font-display: swap; src: url('/assets/pro-fonts/ReemKufi-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, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1; }
@font-face { font-family: 'Reem Kufi'; font-style: normal; font-weight: 600 700; font-display: swap; src: url('/assets/pro-fonts/ReemKufi-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
:root {
  --kv-pro-cell-rgb: 207, 240, 211;
  --kv-pro-cell: rgb(var(--kv-pro-cell-rgb));
  --kv-pro-edge: rgba(var(--kv-pro-cell-rgb), .24);
  --kv-pro-surface: rgba(13, 43, 34, .72);
  --kv-pro-highlight: rgba(var(--kv-pro-cell-rgb), .09);
  --kv-pro-shadow: 0 18px 54px rgba(3, 18, 13, .22);
}
:root[data-theme='light'] {
  --kv-pro-cell-rgb: 13, 59, 46;
  --kv-pro-surface: rgba(242, 249, 239, .88);
  --kv-pro-highlight: rgba(13, 59, 46, .06);
  --kv-pro-shadow: 0 18px 50px rgba(18, 55, 42, .13);
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme='dark']) {
    --kv-pro-cell-rgb: 13, 59, 46;
    --kv-pro-surface: rgba(242, 249, 239, .88);
    --kv-pro-highlight: rgba(13, 59, 46, .06);
    --kv-pro-shadow: 0 18px 50px rgba(18, 55, 42, .13);
  }
}

.kv-hex-bloom { display: block; overflow: visible; }
.kv-hex-bloom polygon { fill: rgb(var(--kv-pro-cell-rgb)); stroke: var(--kv-pro-gap, rgba(5, 22, 17, .68)); stroke-width: 1.6; vector-effect: non-scaling-stroke; }
:root[data-theme='light'] .kv-hex-bloom polygon { --kv-pro-gap: rgba(255,255,250,.88); }
@media (prefers-color-scheme: light) { :root:not([data-theme='dark']) .kv-hex-bloom polygon { --kv-pro-gap: rgba(255,255,250,.88); } }

.kv-logo-mark-stack { position: relative; display: grid; place-items: center; width: calc(var(--kv-logo-size) * 1.4); height: calc(var(--kv-logo-size) * 1.32); isolation: isolate; }
.kv-logo-mark-stack > .kv-pro-logo-bloom { position: absolute; width: 155%; height: 155%; inset: -28%; opacity: .74; z-index: 0; }
.kv-logo-mark-stack > .kv-pro-logo-bloom polygon { opacity: .92; }
.kv-logo-mark-stack > .kv-logo-mark { position: relative; z-index: 1; filter: drop-shadow(0 2px 5px rgba(2, 18, 12, .45)); }
.kavvi-logo--pro { gap: calc(var(--kv-logo-size, 28px) * .18); }
.kavvi-logo--pro:hover .kv-pro-logo-bloom polygon { animation: kv-pro-logo-touch .7s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--kv-cell-index) * 18ms); }

.kv-pro-lattice { position: fixed; inset: 0; pointer-events: none; z-index: -1; contain: strict; }
.kv-pro-lattice canvas { display: block; width: 100%; height: 100%; }

[data-edition='pro'] .os-top-nav,
[data-edition='pro'] .os-chat-sidebar,
[data-edition='pro'] .kv-composer,
[data-edition='pro'] .premium-workspace-card,
[data-edition='pro'] .panel.glass-panel,
[data-edition='pro'] .kv-panel,
[data-edition='pro'] [role='dialog'] {
  border-color: var(--kv-pro-edge);
  box-shadow: var(--kv-pro-shadow);
  background-image: linear-gradient(145deg, var(--kv-pro-highlight), transparent 44%);
}
/* Frosted glass only on boxes with nothing position:fixed inside. A
   backdrop-filter makes an element the containing block of its fixed
   descendants: on the header it pinned the phone's bottom tab bar
   (nav.os-top-nav__items, fixed; bottom:0) to the header - the top of the
   screen. The chat sidebar drawer and dialogs are excluded the same way. */
[data-edition='pro'] .kv-composer,
[data-edition='pro'] .premium-workspace-card,
[data-edition='pro'] .panel.glass-panel,
[data-edition='pro'] .kv-panel { backdrop-filter: blur(18px) saturate(1.08); }
[data-edition='pro'] .os-top-nav { border-bottom-color: rgba(var(--kv-pro-cell-rgb), .2); }
[data-edition='pro'] .os-nav-link-btn.active,
[data-edition='pro'] .kv-btn--primary,
[data-edition='pro'] .button.primary,
[data-edition='pro'] .ws-card-launch-btn {
  box-shadow: inset 0 0 0 1px rgba(var(--kv-pro-cell-rgb), .15), 0 8px 24px rgba(0, 58, 36, .15);
}
[data-edition='pro'] .os-top-nav__avatar,
[data-edition='pro'] .profile-avatar-orb,
[data-edition='pro'] .kv-mobile-avatar { outline: 1px solid rgba(var(--kv-pro-cell-rgb), .42); outline-offset: 3px; }
[data-edition='pro'] .kv-composer:focus-within { border-color: rgba(var(--kv-pro-cell-rgb), .54); box-shadow: var(--kv-pro-shadow), 0 0 0 3px rgba(var(--kv-pro-cell-rgb), .08); }
[data-edition='pro'] .kv-paper, [data-edition='pro'] .message-content { background-image: none; box-shadow: none; }

.kv-pro-motion { --cell: 17px; position: relative; width: 124px; height: 94px; pointer-events: none; isolation: isolate; }
.kv-pro-motion.is-compact { --cell: 10px; width: 74px; height: 56px; }
.kv-pro-motion i { position: absolute; left: 50%; top: 50%; width: var(--cell); aspect-ratio: 1; background: rgb(var(--kv-pro-cell-rgb)); clip-path: polygon(25% 6.7%,75% 6.7%,100% 50%,75% 93.3%,25% 93.3%,0 50%); opacity: .28; transform: translate(calc(var(--q) * var(--cell) * .78), calc((var(--r) + var(--q) * .5) * var(--cell) * .9)); transform-origin: center; }
.kv-pro-motion.has-motion.kv-pro-motion--idle i { animation: kv-pro-idle 4.8s ease-in-out infinite; animation-delay: calc(var(--i) * -190ms); }
.kv-pro-motion.has-motion.kv-pro-motion--gathering i,
.kv-pro-motion.has-motion.kv-pro-motion--thinking i { animation: kv-pro-think 1.45s ease-in-out infinite; animation-delay: calc(var(--i) * 54ms); }
.kv-pro-motion.has-motion.kv-pro-motion--streaming i { animation: kv-pro-stream 1.15s ease-in-out infinite; animation-delay: calc(var(--i) * 64ms); }
.kv-pro-motion.has-motion.kv-pro-motion--building i { animation: kv-pro-build 1.7s cubic-bezier(.2,.8,.2,1) infinite; animation-delay: calc(var(--i) * 70ms); }
.kv-pro-motion.has-motion.kv-pro-motion--complete i { animation: kv-pro-complete .85s cubic-bezier(.2,.9,.2,1) both; animation-delay: calc(var(--i) * 30ms); }
.kv-pro-motion.kv-pro-motion--error i { opacity: .13; transform: translate(calc(var(--q) * var(--cell)), calc((var(--r) + var(--q) * .5) * var(--cell))) rotate(calc(var(--i) * 3deg)); }

.intent-home__first-screen { isolation: isolate; }
.kavvi-thinking-indicator .kv-pro-motion { flex: none; margin-inline-end: 4px; }
.kavvi-thinking-indicator.is-pro .kavvi-thinking-dots { display: none; }
.kavvi-map-visual.is-pro { width: 90px; }
.kavvi-map-visual.is-pro > :not(.kv-pro-motion) { display: none; }

.kv-pro-upgrade-cue { display: inline-flex; align-items: center; gap: 8px; }
.kv-pro-upgrade-cue__cells { position: relative; display: inline-block; width: 31px; height: 19px; flex: none; }
.kv-pro-upgrade-cue__cells i { position: absolute; width: 12px; aspect-ratio: 1; background: currentColor; clip-path: polygon(25% 6.7%,75% 6.7%,100% 50%,75% 93.3%,25% 93.3%,0 50%); }
.kv-pro-upgrade-cue__cells i:nth-child(1) { left: 0; top: 4px; }
.kv-pro-upgrade-cue__cells i:nth-child(2) { left: 9px; top: 0; }
.kv-pro-upgrade-cue__cells i:nth-child(3) { left: 18px; top: 4px; }
.kv-pro-upgrade-cue__cells i:nth-child(4) { left: 27px; top: 0; }
.kv-pro-upgrade-cue__cells i:nth-child(5) { left: 36px; top: 4px; }
.kv-pro-upgrade-cue__cells i:nth-child(6) { left: 45px; top: 0; }
.kv-pro-upgrade-cue--strip .kv-pro-upgrade-cue__cells { width: 58px; }
.os-top-nav__upgrade .lucide-sparkles { display: none; }
.os-top-nav__upgrade { overflow: hidden; isolation: isolate; }
.os-top-nav__upgrade::after { content: ''; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 25%, rgba(255,255,255,.18), transparent 75%); translate: -120% 0; animation: kv-pro-teaser 5s ease-in-out infinite; z-index: -1; }


/* The upgrade page's "Pro look" band (2026-09-28): after the pricing hero,
   dark in both themes like that hero, so the mint cells actually show (on the
   old grey tint they read as mud). */
.bl-pro-showcase { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(18px, 3vw, 32px); align-items: center; box-sizing: border-box; inline-size: 100%; max-inline-size: 1080px; margin: clamp(18px, 3vw, 28px) auto; padding: clamp(18px, 3vw, 30px); border: 1px solid rgba(207, 240, 211, .14); border-radius: 26px; overflow: hidden; color: #EAF5E6; background: radial-gradient(120% 90% at 85% 10%, rgba(126, 214, 160, .16), transparent 60%), linear-gradient(160deg, #11271E, #0B1913 70%); box-shadow: 0 18px 50px rgba(6, 24, 17, .22); }
.bl-pro-showcase__copy { position: relative; z-index: 2; display: grid; gap: 12px; min-inline-size: 0; }
.bl-pro-showcase__eyebrow { display: inline-flex; align-items: center; gap: 8px; font: 700 11.5px/1 var(--kv-font-mono, ui-monospace, monospace); letter-spacing: .14em; color: #C8F5AD; }
.bl-pro-showcase__eyebrow .kv-pro-upgrade-cue__cells i { background: #C8F5AD; animation: kv-pro-cta-cell 1.8s ease-in-out infinite; }
.bl-pro-showcase__eyebrow .kv-pro-upgrade-cue__cells i:nth-child(2) { animation-delay: .3s; }
.bl-pro-showcase__eyebrow .kv-pro-upgrade-cue__cells i:nth-child(3) { animation-delay: .6s; }
.bl-pro-showcase__copy h2 { margin: 0; font-size: clamp(24px, 3.2vw, 34px); line-height: 1.15; letter-spacing: -.02em; font-weight: 700; color: #F4FBF1; text-wrap: balance; }
.bl-pro-showcase__copy ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.bl-pro-showcase__copy li { display: flex; align-items: flex-start; gap: 10px; font-size: 14.5px; line-height: 1.5; color: rgba(234, 245, 230, .82); }
.bl-pro-showcase__copy li::before { content: ''; flex: none; inline-size: 9px; block-size: 9px; margin-block-start: .5em; background: #9BE8C4; clip-path: polygon(25% 6.7%, 75% 6.7%, 100% 50%, 75% 93.3%, 25% 93.3%, 0 50%); }
.bl-pro-showcase__demo { position: relative; min-block-size: 240px; display: grid; place-items: center; border-radius: 20px; background: radial-gradient(70% 70% at 50% 45%, rgba(126, 214, 160, .10), transparent 70%), #08140F; border: 1px solid rgba(207, 240, 211, .10); overflow: hidden; cursor: crosshair; touch-action: pan-y; }
.bl-pro-showcase__demo .kavvi-logo { position: relative; z-index: 2; transform: scale(1.6); }
.bl-pro-showcase__field { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.bl-pro-showcase__hint { position: absolute; z-index: 2; inset-block-end: 12px; padding: 5px 11px; border-radius: 99px; font-size: 12px; font-weight: 600; color: #DDF3DF; background: rgba(207, 240, 211, .12); border: 1px solid rgba(207, 240, 211, .14); pointer-events: none; }

.premium-workspace-card.is-plan-locked { position: relative; overflow: hidden; cursor: pointer; }
.premium-workspace-card.is-plan-locked::before { content: ''; position: absolute; inset-inline: 0; top: 0; height: 58px; opacity: .16; background-color: rgb(var(--kv-pro-cell-rgb)); background-size: 36px 31px; background-image: linear-gradient(30deg, transparent 48%, rgba(255,255,255,.35) 49%, transparent 52%); }
.ws-lock-chip { display: inline-flex; align-items: center; padding: 5px 9px; border-radius: 999px; color: rgb(var(--kv-pro-cell-rgb)); border: 1px solid var(--kv-pro-edge); background: rgba(var(--kv-pro-cell-rgb),.08); }

@keyframes kv-pro-logo-touch { 50% { transform: translateY(-2px); opacity: .7; } }
@keyframes kv-pro-idle { 0%,100% { opacity:.12; translate: 0 0; } 50% { opacity:.34; translate: 0 -5px; } }
@keyframes kv-pro-think { 0%,100% { opacity:.12; scale:.82; } 45% { opacity:.7; scale:1; } }
@keyframes kv-pro-stream { 0%,100% { opacity:.12; translate:0 0; } 50% { opacity:.76; translate:4px 0; } }
@keyframes kv-pro-build { 0% { opacity:.12; scale:.65; } 48% { opacity:.8; scale:1.05; } 100% { opacity:.18; scale:1; } }
@keyframes kv-pro-complete { 0% { opacity:.2; scale:.7; } 60% { opacity:.85; scale:1.13; } 100% { opacity:.38; scale:1; } }
@keyframes kv-pro-teaser { 0%,72% { translate:-120% 0; } 90%,100% { translate:120% 0; } }
@keyframes kv-pro-cell-arrive { from { opacity:0; transform:scale(.2) rotate(18deg); } }
@keyframes kv-pro-awaken { 0% { opacity:0; transform:scale(.2) rotate(-10deg); } 32% { opacity:1; transform:scale(1); } 70% { transform:scale(1.08); opacity:.9; } 100% { transform:scale(2.4); opacity:0; } }
@keyframes kv-pro-wave { from { transform:translate(-50%,-50%) scale(.5); opacity:1; } to { transform:translate(-50%,-50%) scale(38); opacity:0; } }
@keyframes kv-pro-burst { from { opacity:0; transform:scale(.8); } 40% { opacity:1; } to { opacity:0; transform:scale(1.2); } }
@keyframes kv-pro-toast { from { opacity:0; transform:translateY(18px) scale(.96); } }

@media (max-width: 760px) {
  .bl-pro-showcase { grid-template-columns: 1fr; margin-block: 16px; padding: 18px; border-radius: 22px; }
  .bl-pro-showcase__demo { min-block-size: 180px; }
  .bl-pro-showcase__copy li { font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .kv-pro-motion i, .kv-pro-logo-bloom polygon, .os-top-nav__upgrade::after { animation: none !important; }
}


/* Runtime integration against the current layered production bundle. */
[data-edition='pro'] .kv-starfield { display:none; }
.kv-pro-lattice-runtime { position:fixed; inset:0; z-index:-1; pointer-events:none; }
/* The field sits UNDER the app (z-index -1) instead of lifting every stage
   child to position:relative - that old rule turned the phone's fixed
   bottom tab bar (and every other fixed piece) into an in-flow block, so on
   Pro the tab bar jumped to the top of the page. The wrappers between the
   field and the root paint the same colour as the root in both themes, so
   in Pro they are made transparent and the field shows through. */
/* html.kavvi-v2 body { background: gradient, colour } outranks a plain
   [data-edition] body - so these carry the same html.kavvi-v2 prefix (and
   come later). Only the colour goes; the app's soft gradient stays. */
html.kavvi-v2[data-edition='pro'] body, html.kavvi-v2[data-edition='pro'] #root,
html.kavvi-v2[data-edition='pro'] .kv-app-shell, html.kavvi-v2[data-edition='pro'] .kv-main { background-color: transparent; }
/* .kv-main (z-index 1) painted an opaque colour over the fixed hex field,
   so cells only ever showed in the gutter beside it. Its colour is identical
   to the shell and body underneath in both themes, so dropping it changes
   nothing but letting the field through; its gradient and all content stay
   above the cells. */
/* The app's square "fabric" grid (fixed, z-index -1) was always hidden
   under the page colour; with the Pro wrappers transparent it showed as
   squares. Pro replaces it with the honeycomb drawn by the hex field. */
html.kavvi-v2[data-edition='pro'] .kv-2d-fabric { display: none; }
/* No layer drift: on touch, single cells blink in place (see mountLattice). */
.kv-pro-lattice-runtime.is-ambient { animation:none; }
.kv-pro-motion-setting { margin-top:14px; grid-template-columns:34px 1fr; padding-inline-start:14px; }
.kv-pro-motion-setting > .kv-pro-upgrade-cue { grid-column:1; }
.kv-pro-motion-setting > span { grid-column:2; }
.kv-pro-motion-setting input,.kv-pro-motion-setting i { grid-column:auto; }
.bl-pro-demo-logo { position:relative; z-index:2; }
.bl-pro-showcase__demo > .kv-pro-motion { position:absolute; left:50%; top:50%; translate:-50% -50%; transition:left .18s ease-out,top .18s ease-out; }
.message.assistant.is-pro-streaming .message-avatar,.message.assistant.is-pro-complete .message-avatar { position:relative; }
.message.assistant.is-pro-streaming .message-avatar::before,.message.assistant.is-pro-complete .message-avatar::before { content:''; position:absolute; inset:-8px; background:rgb(var(--kv-pro-cell-rgb)); opacity:.18; clip-path:polygon(25% 6.7%,75% 6.7%,100% 50%,75% 93.3%,25% 93.3%,0 50%); }
.message.assistant.is-pro-streaming .message-avatar::before { animation:kv-pro-stream 1.15s ease-in-out infinite; }
.message.assistant.is-pro-complete .message-avatar::before { animation:kv-pro-complete .85s cubic-bezier(.2,.9,.2,1) both; }
[data-edition='pro'] .kv-upsheet-backdrop { display:none!important; }
@media (prefers-reduced-motion:reduce){.kv-pro-lattice-runtime.is-ambient{animation:none}.message.assistant .message-avatar::before{animation:none!important}}

.kv-pro-motion-card{position:relative;overflow:hidden}.kvps .kv-pro-motion-card{padding:0}.kvps .kv-pro-motion-setting{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:12px;padding:16px 18px;width:100%;cursor:pointer}.kvps .kv-pro-motion-setting>span{display:grid;gap:3px}.kvps .kv-pro-motion-setting strong{color:var(--kv-text,#eefaf4);font-size:.94rem}.kvps .kv-pro-motion-setting small{color:var(--kv-muted,#9eb6aa);font-size:.78rem;line-height:1.4}.kvps .kv-pro-motion-setting input{accent-color:var(--kv-pro-cell,#9ff5be)}

.kv-pro-lattice-runtime.is-scroll-paused,.kv-pro-lattice-runtime.is-input-paused,.kv-pro-lattice-runtime.is-stream-paused,.kv-pro-lattice-runtime.is-hidden-paused{animation-play-state:paused}
.kv-pro-state-host{position:relative;isolation:isolate;overflow:hidden}
.kv-pro-state-host>.kv-pro-state-motion{position:absolute;left:50%;top:50%;translate:-50% -50%;opacity:.22;z-index:0;transform:scale(1.35)}
.kv-pro-state-host> :not(.kv-pro-state-motion){position:relative;z-index:1}
.message-attachment-chip.kv-pro-state-host>.kv-pro-state-motion,.coursework-options-loading.kv-pro-state-host>.kv-pro-state-motion{transform:scale(.62);opacity:.18}
@media (prefers-reduced-motion:reduce){.message.assistant.is-pro-streaming .message-avatar::before,.message.assistant.is-pro-complete .message-avatar::before{animation:none!important}}

/* ---- Pro moments: hello (each sign-in) and activation (once per grant) ----
   Shared language: a honeycomb assembles from its core cell outward, text
   rises into place, and on exit the cells scatter and fade. Syne / Reem
   Kufi are loaded only for these; the app's own face is the fallback. */
.kv-pro-hello, .kv-pro-activation {
  --kvp-face: 'Syne', var(--kv-font-head, system-ui), sans-serif;
  position: fixed; inset: 0; z-index: 2100; display: grid; place-items: center;
  color: var(--kv-text, #eef4ea); text-align: center; overflow: hidden;
  background: radial-gradient(60% 55% at 50% 42%, rgba(var(--kv-pro-cell-rgb), .10), transparent 70%),
              color-mix(in srgb, var(--kv-canvas, #0d1716) 90%, transparent);
  backdrop-filter: blur(14px) saturate(1.1); -webkit-backdrop-filter: blur(14px) saturate(1.1);
  animation: kvp-veil-in .28s ease-out both; cursor: default;
}
.kv-pro-hello.is-leaving, .kv-pro-activation.is-leaving { animation: kvp-veil-out .42s ease-in forwards; }
[dir='rtl'].kv-pro-hello, [dir='rtl'].kv-pro-activation { --kvp-face: 'Reem Kufi', var(--kv-font-ar, system-ui), sans-serif; }
.kv-pro-hello__stage, .kv-pro-activation__stage { position: relative; z-index: 1; display: grid; justify-items: center; padding: 24px; }
.kv-pro-hello.is-leaving .kv-pro-hello__stage, .kv-pro-activation.is-leaving .kv-pro-activation__stage { animation: kvp-stage-out .38s ease-in forwards; }

/* the honeycomb */
.kv-pro-hello__comb, .kv-pro-activation__comb { width: clamp(92px, 13vw, 132px); overflow: visible; margin-bottom: 18px; }
.kv-pro-activation__comb { width: clamp(120px, 17vw, 180px); }
.kv-pro-hello__comb polygon, .kv-pro-activation__comb polygon {
  fill: rgba(var(--kv-pro-cell-rgb), .13); stroke: rgba(var(--kv-pro-cell-rgb), .72); stroke-width: 1.1;
  transform-box: fill-box; transform-origin: center; opacity: 0;
  animation: kvp-cell-in .44s cubic-bezier(.2,.9,.25,1.25) both; animation-delay: calc(80ms + var(--ring) * 70ms);
}
.kv-pro-hello__comb polygon.is-core, .kv-pro-activation__comb polygon.is-core {
  fill: rgba(var(--kv-pro-cell-rgb), .55); filter: drop-shadow(0 0 10px rgba(var(--kv-pro-cell-rgb), .6));
  animation: kvp-cell-in .44s cubic-bezier(.2,.9,.25,1.25) 80ms both, kvp-core-pulse 1.6s .55s ease-in-out infinite;
}
.is-leaving .kv-pro-hello__comb polygon, .is-leaving .kv-pro-activation__comb polygon {
  animation: kvp-cell-out .36s ease-in both; animation-delay: calc((2 - var(--ring)) * 40ms);
}

/* text */
.kv-pro-hello__eyebrow, .kv-pro-activation__eyebrow { font: 600 11px/1 var(--kv-font-body, system-ui); letter-spacing: .42em; text-indent: .42em; opacity: 0; color: rgb(var(--kv-pro-cell-rgb)); animation: kvp-fade-up .5s .28s ease-out both; }
[dir='rtl'] .kv-pro-hello__eyebrow, [dir='rtl'] .kv-pro-activation__eyebrow { letter-spacing: .08em; text-indent: 0; font-size: 13px; }
/* Syne is a very wide face: sizes are set so ~11 characters fit a phone
   and a desktop without overflowing; longer names wrap onto a second line. */
.kv-pro-hello__title, .kv-pro-activation__title { position: relative; max-width: min(92vw, 1100px); margin: 14px 0 10px; font-family: var(--kvp-face); font-weight: 800; font-size: clamp(32px, 8.2vw, 80px); line-height: 1.08; letter-spacing: -.03em; overflow: hidden; padding: .06em .08em .12em; }
.kvp-word { display: inline-block; white-space: nowrap; }
.kv-pro-activation__title { font-size: clamp(34px, 8.6vw, 92px); }
.kv-pro-hello__title.is-arabic, .kv-pro-activation__title.is-arabic { letter-spacing: 0; font-weight: 700; line-height: 1.35; }
.kvp-rise { display: inline-block; white-space: pre; opacity: 0; transform: translateY(.62em) rotate(3deg); filter: blur(8px);
  animation: kvp-rise .62s cubic-bezier(.16,1,.3,1) both, kvp-glint .7s ease-in-out both;
  animation-delay: calc(.36s + var(--i) * 30ms), calc(.95s + var(--i) * 38ms); }
/* once the words land, light travels across them letter by letter */
.kv-pro-activation .kvp-rise { animation-delay: calc(1.02s + var(--i) * 34ms), calc(1.62s + var(--i) * 40ms); }
.kv-pro-hello__line, .kv-pro-activation__line { margin: 0; font: 500 clamp(14px, 1.5vw, 17px)/1.5 var(--kv-font-body, system-ui); opacity: 0; animation: kvp-fade-up .5s .78s ease-out both; }
[dir='rtl'] .kv-pro-hello__line, [dir='rtl'] .kv-pro-activation__line { font-family: var(--kv-font-ar, system-ui); }

/* The app sets font-family on every element through :lang(en)/:lang(ar),
   so the rising letters would never inherit the display face - they are
   given it directly (two classes outrank the one pseudo-class). */
.kv-pro-hello .kvp-rise, .kv-pro-activation .kvp-rise { font-family: var(--kvp-face); }
/* activation extras */
.kv-pro-activation__field { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.kv-pro-activation__eyebrow { animation-delay: .9s; }
.kv-pro-activation__line { animation-delay: 1.45s; }
.kv-pro-activation__perks { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 22px 0 0; padding: 0; }
.kv-pro-activation__perks li { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px 8px 11px; border-radius: 99px; font: 600 13px/1.2 var(--kv-font-body, system-ui); background: rgba(var(--kv-pro-cell-rgb), .08); border: 1px solid rgba(var(--kv-pro-cell-rgb), .24); opacity: 0; animation: kvp-fade-up .45s cubic-bezier(.2,.9,.2,1) both; animation-delay: calc(1.75s + var(--i) * 110ms); }
[dir='rtl'] .kv-pro-activation__perks li { font-family: var(--kv-font-ar, system-ui); padding: 8px 11px 8px 14px; }
.kv-pro-activation__perks svg { width: 13px; height: 13px; flex: none; }
.kv-pro-activation__perks polygon { fill: rgb(var(--kv-pro-cell-rgb)); }
.kv-pro-activation__go { margin-top: 26px; padding: 13px 30px; border: 0; border-radius: 99px; cursor: pointer; font: 700 15px/1 var(--kv-font-body, system-ui); color: var(--kv-on-accent, #06140f); background: var(--kv-accent-fill, rgb(var(--kv-pro-cell-rgb))); box-shadow: 0 10px 34px rgba(var(--kv-pro-cell-rgb), .28); opacity: 0; animation: kvp-fade-up .45s 2.15s cubic-bezier(.2,.9,.2,1) both; transition: transform .18s ease; }
.kv-pro-activation__go:hover { transform: translateY(-1px) scale(1.02); }
.kv-pro-activation__go:focus-visible { outline: 2px solid rgba(var(--kv-pro-cell-rgb), .45); outline-offset: 4px; }
[dir='rtl'] .kv-pro-activation__go { font-family: var(--kv-font-ar, system-ui); }

/* still versions (reduced motion / Pro effects off): no movement, just there */
.kv-pro-hello.is-still *, .kv-pro-activation.is-still * { animation: none !important; opacity: 1 !important; transform: none !important; filter: none !important; }
@media (prefers-reduced-motion: reduce) {
  .kv-pro-hello *, .kv-pro-activation * { animation: none !important; opacity: 1 !important; transform: none !important; filter: none !important; }
}
@media (max-width: 640px) { .kv-pro-activation__perks { flex-direction: column; align-items: center; } }

@keyframes kvp-veil-in { from { opacity: 0 } to { opacity: 1 } }
@keyframes kvp-veil-out { to { opacity: 0 } }
@keyframes kvp-stage-out { to { opacity: 0; transform: scale(.965); filter: blur(4px) } }
@keyframes kvp-cell-in { from { opacity: 0; transform: scale(.35) } 60% { opacity: 1 } to { opacity: 1; transform: scale(.9) } }
@keyframes kvp-cell-out { from { opacity: 1; transform: scale(.9) } to { opacity: 0; transform: translate(var(--ox), var(--oy)) scale(.5) } }
@keyframes kvp-core-pulse { 50% { fill: rgba(var(--kv-pro-cell-rgb), .85) } }
@keyframes kvp-rise { to { opacity: 1; transform: none; filter: none } }
@keyframes kvp-glint { 0%, 100% { text-shadow: none } 45% { color: rgb(var(--kv-pro-cell-rgb)); text-shadow: 0 0 22px rgba(var(--kv-pro-cell-rgb), .75) } }
@keyframes kvp-fade-up { from { opacity: 0; transform: translateY(8px) } to { opacity: 1; transform: none } }

/* ---- phones & shared fixes (2026-09-27) ---------------------------------
   Loaded for every learner (Free and Pro), after the study-plan sheet. */

/* Study-plan editors: grid and flex children default to min-width:auto, so
   a date or time input's intrinsic width pushed rows past the screen (in
   RTL, off the left edge of the settings drawer). */
.kvp-subjects, .kvp-stack { grid-template-columns: minmax(0, 1fr); }
.kvp-subject, .kvp-subject__head, .kvp-subject__body, .kvp-subject__foot, .kvp-free, .kvp-free__day > div { min-width: 0; }
.kvp-subject__foot > *, .kvp-exam { min-width: 0; max-width: 100%; }
.kvp-exam input, .kvp-lecture input, .kvp-lecture select, .kvp-window input { min-width: 0; max-width: 100%; }
.kvp-drawer, .kvp-drawer__body { min-width: 0; max-width: 100vw; overflow-x: hidden; }

/* Starter chips under the chat box: fast-start-20260923.css forces a
   dark-theme mint on them (#d1fae5 !important), invisible on the light
   theme for Free and Pro alike - so the light override needs !important
   too. "System" theme has no data-theme attribute; light then comes from
   the media query, exactly as the app's own tokens do it. */
:root[data-theme='light'] .intent-home__chips .kv-chip { color: var(--kv-text, #1b2b25) !important; }
:root[data-theme='light'] .intent-home__chips .kv-chip svg { color: var(--kv-accent-fill, #1f5a42) !important; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme='dark']) .intent-home__chips .kv-chip { color: var(--kv-text, #1b2b25) !important; }
  :root:not([data-theme='dark']) .intent-home__chips .kv-chip svg { color: var(--kv-accent-fill, #1f5a42) !important; }
}

@media (max-width: 560px) {
  /* The schedule plan bar was half the first screen: tighter on phones,
     one scrolling row of subjects, settings as a compact button. */
  .kvp-bar { padding: 10px 12px; gap: 8px; margin-block-end: 10px; }
  .kvp-bar__top { align-items: flex-start; }
  .kvp-bar__stats { gap: 4px 12px; font-size: 12.5px; }
  .kvp-bar__stats b { font-size: 14px; }
  .kvp-bar__actions .kv-btn { padding: 6px 10px; min-height: 0; font-size: 12.5px; }
  .kvp-bar__subjects { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: -2px; padding-inline: 2px; }
  .kvp-bar__subjects::-webkit-scrollbar { display: none; }
  .kvp-bar__subjects .kvp-ws-chip { flex: none; }
  /* the drawer is the whole screen on a phone */
  .kvp-drawer { inline-size: 100vw; border-inline-start: 0; }
  .kvp-drawer > header, .kvp-tabs, .kvp-drawer__body { padding-inline: 14px; }
  .kvp-drawer > footer { padding-inline: 14px; }
  .kvp-drawer > footer .kv-btn { flex: 1; justify-content: center; }
  .kvp-free__rules { display: grid; grid-template-columns: 1fr 1fr; }
}

/* ---- Navbar "Get Pro" (2026-09-28) --------------------------------------
   On phones it was an empty 40px blob: the app's mobile sheet hides every
   <span> in the button (the hex cue and the label are both spans) and forces
   a 40px circle with !important. Now it is a pill at every width - the hex
   mark's cells light one after another, a shine sweeps across and the glow
   breathes, all on a loop - and it holds still under reduced motion. */
html body .os-top-nav__upgrade {
  width: auto !important; min-width: 0 !important; max-width: none !important;
  height: 34px !important; min-height: 34px !important; max-height: 34px !important;
  aspect-ratio: auto !important; padding: 0 13px 0 9px !important; gap: 6px !important;
  border-radius: 999px !important; justify-content: center; color: #0E1A15 !important;
  animation: kv-pro-cta-glow 2.6s ease-in-out infinite;
}
html[dir='rtl'] body .os-top-nav__upgrade { padding: 0 9px 0 13px !important; }
html body .os-top-nav__upgrade > span { display: inline-flex !important; align-items: center; }
html body .os-top-nav__upgrade .kv-pro-upgrade-cue__cells { display: inline-block !important; }
html body .os-top-nav__upgrade > span:not(.kv-pro-upgrade-cue) { font-size: 12.5px; font-weight: 800; letter-spacing: .01em; white-space: nowrap; line-height: 1; }
html body .os-top-nav__upgrade .kv-pro-upgrade-cue__cells { width: 26px; height: 17px; }
html body .os-top-nav__upgrade .kv-pro-upgrade-cue__cells i { width: 10px; background: #0E1A15; transform-origin: center; animation: kv-pro-cta-cell 1.8s ease-in-out infinite; }
html body .os-top-nav__upgrade .kv-pro-upgrade-cue__cells i:nth-child(1) { left: 0; top: 4px; }
html body .os-top-nav__upgrade .kv-pro-upgrade-cue__cells i:nth-child(2) { left: 8px; top: 0; animation-delay: .3s; }
html body .os-top-nav__upgrade .kv-pro-upgrade-cue__cells i:nth-child(3) { left: 16px; top: 4px; animation-delay: .6s; }
html body .os-top-nav__upgrade::after { animation: kv-pro-teaser 3.2s ease-in-out infinite !important; background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.65), transparent 70%) !important; }
@keyframes kv-pro-cta-cell { 0%, 100% { opacity: .3; transform: scale(.78); } 28% { opacity: 1; transform: scale(1.1); } 56% { opacity: .55; transform: scale(.9); } }
@keyframes kv-pro-cta-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(128, 214, 170, 0), 0 4px 12px rgba(96, 196, 150, .30); }
  50% { box-shadow: 0 0 0 5px rgba(128, 214, 170, .20), 0 6px 20px rgba(96, 196, 150, .55); }
}
@media (max-width: 380px) {
  html body .os-top-nav__upgrade > span:not(.kv-pro-upgrade-cue) { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  html body .os-top-nav__upgrade, html body .os-top-nav__upgrade .kv-pro-upgrade-cue__cells i, html body .os-top-nav__upgrade::after { animation: none !important; }
  html body .os-top-nav__upgrade .kv-pro-upgrade-cue__cells i { opacity: 1; transform: none; }
}

/* Upgrade page: the phone's sticky "Get Pro" bar waits for the pricing hero to leave (see watchUpgradeHero). */
html.kv-upgrade-hero-visible .kv-app-shell .kvp .kvp-sticky { transform: translateY(calc(100% + 90px)); opacity: 0; pointer-events: none; }