/* ==========================================================================
   Kynvo illustration system
   Every illustration is a container; 1em inside = 1.6% of its width.
   Design canvas width = 62.5em.
   ========================================================================== */

.ka { container-type: inline-size; position: relative; width: 100%; }
.ka-in {
	--ink: #141414; --paper: #F4F1EB; --sand: #EAE4DA; --line: #E8E2D8; --muted: #8A837A; --o: #DD6629; --o-soft: #F7DFCF; --good: #2F8A57;
	--sh: 0 0.08em 0.15em rgba(30,20,10,.05), 0 0.6em 1.2em -0.4em rgba(30,20,10,.10), 0 2.2em 4em -1.6em rgba(30,20,10,.20), 0 5em 8em -4em rgba(30,20,10,.22);
	--sh-sm: 0 0.06em 0.12em rgba(30,20,10,.06), 0 0.5em 1em -0.3em rgba(30,20,10,.12), 0 1.6em 3em -1.2em rgba(30,20,10,.18);
	position: relative; width: 100%; font-size: 1.6cqw; line-height: 1.35;
	font-family: "DM Sans", system-ui, sans-serif; color: var(--ink);
	-webkit-font-smoothing: antialiased; letter-spacing: 0; text-transform: none;
}
.ka-in * { box-sizing: border-box; }
.ka-in b { font-weight: 700; }
.ka-in i, .ka-in em { font-style: normal; }
.ka-in p { margin: 0; }

/* ---------- Shared atoms ---------- */
.ka-card { position: absolute; background: #fff; border-radius: 1.1em; box-shadow: var(--sh); border: 1px solid rgba(30,20,10,.06); padding: 1.3em 1.4em; }
.ka-card-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: .9em; }
.ka-card-h b { font-size: 1em; display: flex; align-items: center; gap: .5em; }
.ka-k { display: block; font-size: .78em; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.ka-k.is-up { color: var(--good); } .ka-k.is-down { color: #B84A3B; }
.ka-big { display: block; font-family: Anton, Impact, sans-serif; font-weight: 400; font-size: 3.6em; line-height: 1; letter-spacing: .005em; margin: .12em 0 .1em; }
.ka-chip { display: inline-block; font-size: .78em; font-weight: 700; padding: .32em .75em; border-radius: 99em; background: var(--o-soft); color: #A9471A; }
.ka-chip.is-up { background: #E3F1E7; color: var(--good); }
.ka-pill { font-size: .72em; font-weight: 700; letter-spacing: .04em; padding: .35em .8em; border-radius: 99em; background: var(--paper); color: #5D574F; border: 1px solid var(--line); }
.ka-live { font-size: .75em; font-weight: 700; color: var(--good); display: inline-flex; align-items: center; gap: .45em; }
.ka-live::before { content: ""; width: .6em; height: .6em; border-radius: 50%; background: var(--good); box-shadow: 0 0 0 0 rgba(47,138,87,.5); animation: ka-live 1.8s infinite; }
.ka-av { flex: none; font-size: .78em; width: 3em; height: 3em; border-radius: 50%; display: grid; place-items: center; font-weight: 700; background: var(--sand); color: #5D574F; }
.ka-av.is-brand { background: #2A221C; color: #F3EADC; letter-spacing: .05em; }
.ka-av.is-ring { background: #2A221C; color: #F3EADC; box-shadow: 0 0 0 .18em #fff, 0 0 0 .38em var(--o); }
.ka-stars { color: #E0A23A; letter-spacing: .08em; }
.ka-atc { display: block; background: var(--ink); color: #fff; text-align: center; border-radius: .6em; padding: .85em 1em; font-weight: 700; font-size: .88em; letter-spacing: .02em; }
.ka-mark { display: inline-block; width: 1.1em; height: 1.1em; border-radius: .28em; background: var(--o); position: relative; }
.ka-mark::after { content: ""; position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 17 17 7M9 7h8v8' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 70% no-repeat; }
.ka-mark.is-big { width: 2.6em; height: 2.6em; border-radius: .6em; flex: none; }

.ka-mag { flex: none; position: relative; width: 1.1em; height: 1.1em; border: .17em solid var(--muted); border-radius: 50%; display: inline-block; }
.ka-mag::after { content: ""; position: absolute; width: .5em; height: .17em; background: var(--muted); right: -.45em; bottom: -.22em; transform: rotate(45deg); border-radius: 1em; }
.ka .ka-spark { clip-path: inset(0 100% 0 0); }
.ka.is-in .ka-spark { animation: ka-reveal 1.8s cubic-bezier(.6,.05,.2,1) .3s forwards; }
@keyframes ka-reveal { to { clip-path: inset(0 0 0 0); } }
.ka-spark { display: block; width: 100%; height: 4.2em; margin-top: .6em; overflow: visible; }
.ka-fill { display: block; height: 100%; width: var(--w); border-radius: inherit; background: var(--ink); transform-origin: left; }
.ka-bar { height: 2.6em; display: flex; align-items: center; gap: .5em; padding: 0 1em; background: #F3EFE8; border-bottom: 1px solid var(--line); }
.ka-bar > span { width: .72em; height: .72em; border-radius: 50%; background: #D9D1C5; }
.ka-bar > em { margin-left: 1.2em; flex: 1; background: #fff; border-radius: .6em; font-size: .74em; padding: .4em 1em; color: var(--muted); border: 1px solid var(--line); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- Product photography (drawn) ---------- */
.ka-stage { position: relative; width: 100%; height: 100%; overflow: hidden; background: radial-gradient(120% 95% at 72% 12%, #FDEEE2 0%, #F4D7C1 42%, #E8C0A3 100%); }
.ka-sun { position: absolute; width: 70%; aspect-ratio: 1; border-radius: 50%; right: -18%; top: -26%; background: radial-gradient(circle, rgba(255,247,238,.95) 0%, rgba(255,247,238,0) 68%); }
.ka-floor { position: absolute; left: -5%; right: -5%; bottom: 0; height: 27%; background: linear-gradient(180deg, #E2B596 0%, #D9A887 100%); box-shadow: 0 -.06em 0 rgba(255,255,255,.45); }
.ka-floor::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 35%; background: linear-gradient(180deg, rgba(255,255,255,.28), transparent); }
.ka-leaf { position: absolute; width: 60%; height: 120%; left: -22%; top: -18%; background: radial-gradient(ellipse 20% 45% at 50% 50%, rgba(120,60,25,.16), transparent 70%), radial-gradient(ellipse 14% 38% at 72% 40%, rgba(120,60,25,.12), transparent 70%); transform: rotate(-28deg); filter: blur(.4em); }
.ka-prod { position: absolute; bottom: 16%; height: 64%; }
.ka-prod svg { height: 100%; width: auto; display: block; position: relative; z-index: 2; filter: drop-shadow(0 .15em .2em rgba(60,25,5,.25)); }
.ka-prod::after { content: ""; position: absolute; z-index: 1; left: -8%; right: -8%; bottom: -3.5%; height: 7%; border-radius: 50%; background: radial-gradient(closest-side, rgba(70,30,8,.5), transparent); }
.ka-prod::before { content: ""; position: absolute; z-index: 0; bottom: 0; right: 38%; width: 120%; height: 34%; background: linear-gradient(270deg, rgba(90,40,10,.28), rgba(90,40,10,0)); transform: skewX(-58deg); transform-origin: bottom right; filter: blur(.25em); border-radius: 30% 0 0 0; }
.ka-prod-main { left: 50%; transform: translateX(-50%); }
.is-pair .ka-prod-main { left: 60%; }
.ka-prod-tube { left: 26%; height: 57%; bottom: 17%; }

/* ---------- Motion ---------- */
.ka-float { animation: ka-float 7s ease-in-out infinite; animation-delay: var(--d, 0s); }
.ka .ka-fill { transform: scaleX(0); }
.ka.is-in .ka-fill { animation: ka-grow 1.2s cubic-bezier(.6,.05,.2,1) forwards; animation-delay: calc(var(--i, 0) * .09s + .2s); }
.ka .ka-draw { stroke-dasharray: 1; stroke-dashoffset: 1; }
.ka.is-in .ka-draw { animation: ka-draw 2s cubic-bezier(.6,.05,.2,1) .3s forwards; }
.ka-flow { stroke-dasharray: 3 4; animation: ka-flow 1.2s linear infinite; }
@keyframes ka-float { 0%,100% { translate: 0 0; } 50% { translate: 0 -0.7em; } }
@keyframes ka-grow { to { transform: scaleX(1); } }
@keyframes ka-draw { to { stroke-dashoffset: 0; } }
@keyframes ka-flow { to { stroke-dashoffset: -14; } }
@keyframes ka-live { 0% { box-shadow: 0 0 0 0 rgba(47,138,87,.45); } 100% { box-shadow: 0 0 0 .7em rgba(47,138,87,0); } }

/* ==========================================================================
   HERO
   ========================================================================== */
.ka-hero .ka-in { aspect-ratio: 62.5 / 64; }
.ka-glow { position: absolute; inset: 8% 4% 4% 10%; background: radial-gradient(closest-side, rgba(221,102,41,.22), rgba(221,102,41,0)); filter: blur(2em); }
.ka-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(20,20,20,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(20,20,20,.06) 1px, transparent 1px); background-size: 3.2em 3.2em; -webkit-mask-image: radial-gradient(closest-side, #000 30%, transparent 100%); mask-image: radial-gradient(closest-side, #000 30%, transparent 100%); }
.ka-browser { position: absolute; left: 0; top: 14em; width: 50em; background: #fff; border-radius: 1.2em; overflow: hidden; box-shadow: var(--sh); border: 1px solid rgba(30,20,10,.07); }
.ka-shopnav { display: flex; align-items: center; gap: 1.7em; padding: 1em 1.7em; border-bottom: 1px solid #F0EBE3; font-size: .82em; color: #5D574F; }
.ka-shopnav b { letter-spacing: .38em; font-size: 1.2em; color: #2A221C; margin-right: 1em; }
.ka-shopnav i { margin-left: auto; color: var(--ink); font-weight: 700; }
.ka-pdp { display: grid; grid-template-columns: 1.08fr 1fr; }
.ka-pdp-img { position: relative; height: 32em; }
.ka-badge { position: absolute; z-index: 3; top: 1.1em; left: 1.1em; background: #fff; font-size: .72em; padding: .4em .8em; border-radius: 99em; font-weight: 700; box-shadow: var(--sh-sm); }
.ka-pdp-info { padding: 1.5em 1.6em 1.4em; display: flex; flex-direction: column; gap: .62em; }
.ka-crumb { font-size: .7em; color: var(--muted); }
.ka-pdp-title { font-size: 1.65em; line-height: 1.08; letter-spacing: -.015em; }
.ka-rating { font-size: .74em; color: #67615A; }
.ka-price { font-size: 1.25em; font-weight: 700; }
.ka-sizes { display: flex; gap: .45em; }
.ka-sizes i { border: 1px solid #DCD5CA; border-radius: .5em; padding: .4em .85em; font-size: .74em; }
.ka-sizes i.is-on { border: 1.5px solid var(--ink); font-weight: 700; }
.ka-sub { display: flex; align-items: center; gap: .7em; border: 1px solid #E5DFD5; border-radius: .7em; padding: .65em .8em; font-size: .74em; }
.ka-sub:first-of-type, .ka-sub:has(.is-on) { border-color: var(--o); background: #FFF8F2; }
.ka-sub span { display: flex; flex-direction: column; }
.ka-sub em { color: var(--muted); font-size: .9em; }
.ka-sub strong { margin-left: auto; }
.ka-radio { flex: none; width: 1.15em; height: 1.15em; border-radius: 50%; border: .12em solid #BDB5A9; }
.ka-radio.is-on { border: .34em solid var(--o); }
.ka-trust { display: flex; gap: 1em; font-size: .66em; color: var(--muted); }
.ka-trust i::before { content: "✓ "; color: var(--good); font-weight: 700; }

.ka-orders { right: 0; top: 0; width: 25em; padding-bottom: .6em; }
.ka-orders-list { position: relative; }
.ka-order { display: flex; align-items: center; gap: .75em; padding: .62em 0; border-top: 1px solid #F0EBE3; }
.ka-order-t, .ka-order-v { display: flex; flex-direction: column; font-size: .78em; }
.ka-order-t { flex: 1; min-width: 0; } .ka-order-t i, .ka-order-v i { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ka-order-v { text-align: right; }
.ka .ka-order { opacity: 0; transform: translateY(-.8em); }
.ka.is-in .ka-order { animation: ka-order .6s cubic-bezier(.2,.7,.2,1) forwards; animation-delay: calc(1.6s - var(--i) * .35s); }
.ka.is-in .ka-order:first-child { animation: ka-order .6s cubic-bezier(.2,.7,.2,1) 1.6s forwards, ka-new 4s ease 2.4s infinite; }
@keyframes ka-order { to { opacity: 1; transform: none; } }
@keyframes ka-new { 0%, 60%, 100% { background: transparent; } 70% { background: #FFF4EC; } }

.ka-runrate { left: 2.5em; bottom: 0; width: 22em; }
.ka-runrate .ka-chip { position: absolute; right: 1.4em; top: 1.2em; }
.ka-rank { right: 0; bottom: 13em; width: 21em; display: flex; align-items: center; gap: .8em; padding: 1em 1.2em; }
.ka-rank-q { flex: 1; font-size: .85em; color: #4A453F; }
.ka-rank-pos { display: flex; align-items: center; gap: .35em; font-size: .9em; color: var(--muted); }
.ka-rank-pos i { text-decoration: line-through; }
.ka-rank-pos b { font-family: Anton, Impact, sans-serif; font-weight: 400; font-size: 1.9em; line-height: 1; color: var(--o); }

/* ==========================================================================
   VENDORS vs ONE TEAM
   ========================================================================== */
.ka-vendors .ka-in, .ka-oneteam .ka-in { aspect-ratio: 62.5 / 50; border-radius: 1.6em; overflow: hidden; }
.ka-vendors .ka-in { background: var(--sand); }
.ka-oneteam .ka-in { background: #fff; border: 1px solid var(--line); }
.ka-dots { position: absolute; inset: 0; background-image: radial-gradient(rgba(20,20,20,.12) 1px, transparent 1.2px); background-size: 2em 2em; }
.ka-tag-top { position: absolute; z-index: 3; top: 1.8em; left: 2em; font-size: .85em; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #67615A; display: flex; align-items: center; gap: .6em; }
.ka-tag-top::before { content: ""; width: .6em; height: .6em; border-radius: 50%; background: currentColor; }
.ka-tag-top.is-accent { color: var(--o); }
.ka-tangle { position: absolute; inset: 0; width: 100%; height: 100%; }
.ka-vendor { width: 17.5em; padding: 1.1em 1.2em; }
.ka-vm { display: flex; align-items: baseline; justify-content: space-between; margin-top: .5em; }
.ka-vm i { font-size: .82em; color: #67615A; }
.ka-vm b { font-family: Anton, Impact, sans-serif; font-weight: 400; font-size: 2.2em; line-height: 1; }
.ka-up { position: absolute; top: 1.05em; right: 1.2em; font-size: .7em; color: var(--good); }
.ka-v1 { left: 3em; top: 6em; rotate: -5deg; }
.ka-v2 { right: 3em; top: 5em; rotate: 4deg; }
.ka-v3 { left: 2em; top: 19.5em; rotate: 3deg; }
.ka-v4 { right: 2.5em; top: 18.5em; rotate: -3deg; }
.ka-v5 { left: 22.5em; top: 11.5em; rotate: -1deg; z-index: 2; }
.ka-flat { left: 50%; bottom: 3em; width: 24em; translate: -50% 0; border: 1.5px dashed #BDB4A8; box-shadow: var(--sh-sm); background: #FBF9F6; }
.ka-flat b { font-family: Anton, Impact, sans-serif; font-weight: 400; font-size: 2.6em; line-height: 1; color: #9A9188; display: block; margin-top: .15em; }
.ka-flat svg { width: 100%; height: 2.4em; display: block; margin-top: .4em; }
.ka-q { position: absolute; top: -1.1em; right: -1em; background: var(--o); color: #fff; font-size: .78em; font-weight: 700; padding: .45em .9em; border-radius: 99em; rotate: 4deg; box-shadow: var(--sh-sm); }

.ka-oneteam .ka-in::before { content: ""; position: absolute; inset: 20% 0 0 30%; background: radial-gradient(closest-side, rgba(221,102,41,.16), transparent); }
.ka-plan { left: 2.5em; top: 6.5em; width: 30em; }
.ka-strip { left: 2.5em; right: 2.5em; bottom: 3em; display: flex; align-items: center; gap: 1.6em; padding: 1.1em 1.4em; }
.ka-strip .ka-k { margin-right: auto; }
.ka-strip-i { display: flex; align-items: center; gap: .45em; font-size: .9em; }
.ka-strip-i b { color: var(--good); font-size: .8em; }
.ka-strip-i b.is-down { color: var(--good); }
.ka-plan-row { display: grid; grid-template-columns: 5.5em 1fr; align-items: center; gap: 1em; padding: .9em 0; border-top: 1px solid #F0EBE3; font-size: .9em; }
.ka-plan-row i { height: .6em; border-radius: 1em; background: #F0EBE3; overflow: hidden; }
.ka-plan-row .ka-fill { background: linear-gradient(90deg, #E58A57, var(--o)); }
.ka-merge { position: absolute; left: 32.5em; top: 11.05em; width: 8.5em; height: 17em; }
.ka-outcome { right: 2.5em; top: 11.8em; width: 19.5em; }
.ka-outcome .ka-chip { position: absolute; right: 1.2em; top: 1.2em; margin: 0 !important; }
.ka-outcome .ka-big { color: var(--o); }
.ka-outcome .ka-chip { margin-top: .9em; }

/* ==========================================================================
   DIAGNOSTIC
   ========================================================================== */
.ka-diagnostic .ka-in { aspect-ratio: 62.5 / 34; }
.ka-report { left: 0; top: 0; width: 56em; padding: 1.8em 2em; }
.ka-report-h { display: flex; justify-content: space-between; align-items: flex-start; padding-bottom: 1.2em; border-bottom: 1px solid #F0EBE3; }
.ka-report-h b { display: block; font-size: 1.35em; margin-top: .2em; }
.ka-report-body { display: grid; grid-template-columns: 13em 1fr; gap: 2.4em; align-items: center; padding: 1.6em 0; }
.ka-ring { position: relative; width: 13.5em; aspect-ratio: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.ka-ring svg { position: absolute; inset: 0; }
.ka-ring b { position: relative; font-family: Anton, Impact, sans-serif; font-weight: 400; font-size: 4.2em; line-height: 1; }
.ka-ring i { position: relative; margin-top: .5em; font-size: .6em; letter-spacing: .04em !important; white-space: nowrap; color: var(--muted); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.ka-diag-row { display: grid; grid-template-columns: 9.5em 1fr 2.4em 4.6em; align-items: center; gap: .9em; padding: .55em 0; font-size: .88em; }
.ka-diag-row i { height: .55em; background: #F0EBE3; border-radius: 1em; overflow: hidden; }
.ka-diag-row.is-low .ka-fill { background: var(--o); }
.ka-diag-row b { text-align: right; }
.ka-diag-row u { text-decoration: none; font-size: .78em; font-weight: 700; color: #A9471A; background: var(--o-soft); padding: .25em .6em; border-radius: 99em; text-align: center; }
.ka-verdict { display: flex; align-items: center; gap: 1em; background: var(--ink); color: #fff; border-radius: .8em; padding: 1em 1.3em; }
.ka-verdict span { font-size: .75em; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #F08A4B; }
.ka-note { position: absolute; right: 0; bottom: 0; width: 16em; z-index: 3; background: #FCE7D6; padding: 1.2em 1.3em; font-size: .95em; font-weight: 600; line-height: 1.3; color: #5A3218; rotate: 3deg; box-shadow: var(--sh-sm); border-radius: .2em; }
.ka-note::before { content: ""; position: absolute; top: -.7em; left: 50%; width: 5em; height: 1.4em; translate: -50% 0; background: rgba(255,255,255,.6); rotate: -3deg; }

/* ==========================================================================
   BRAND BOARD
   ========================================================================== */
.ka-brandboard .ka-in { aspect-ratio: 62.5 / 47; }
.ka-bb { padding: 1.2em 1.3em; overflow: hidden; }
.ka-bb-logo { left: 0; top: 0; width: 26em; height: 17.5em; display: flex; flex-direction: column; align-items: center; text-align: center; }
.ka-bb-logo .ka-k { align-self: flex-start; }
.ka-old { margin-top: 1.4em; font-family: Georgia, serif; font-style: italic; font-size: 1.5em; color: #AFA79C; text-decoration: line-through; text-decoration-color: var(--o); text-decoration-thickness: .1em; }
.ka-arrow { color: var(--o); font-weight: 700; margin: .3em 0; }
.ka-new { font-weight: 700; letter-spacing: .42em; font-size: 2.3em; color: #2A221C; margin-left: .42em; }
.ka-bb-pal { left: 27.5em; top: 1.6em; width: 35em; height: 15.5em; rotate: 1.5deg; }
.ka-sw { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5em; margin-top: .8em; height: 10.5em; }
.ka-sw i { background: var(--c); border-radius: .6em; position: relative; box-shadow: inset 0 0 0 1px rgba(0,0,0,.06); }
.ka-sw em { position: absolute; left: .7em; bottom: .6em; font-size: .72em; font-weight: 700; color: rgba(255,255,255,.9); }
.ka-sw i:last-child em { color: #6B5E52; }
.ka-bb-type { left: 0; top: 19em; width: 17em; height: 17em; rotate: -2deg; display: flex; flex-direction: column; }
.ka-bb-type b { font-family: Georgia, "Times New Roman", serif; font-weight: 400; font-size: 6.4em; line-height: 1; margin-top: .1em; color: #2A221C; }
.ka-bb-type i { font-size: .78em; color: var(--muted); margin-top: auto; }
.ka-bb-shot { left: 18.5em; top: 18.5em; width: 25em; height: 28.5em; padding: 0; z-index: 2; }
.ka-bb-voice { left: 45em; top: 19.5em; width: 17.5em; height: 21em; rotate: 2deg; display: flex; flex-direction: column; gap: .9em; }
.ka-tags { display: flex; flex-wrap: wrap; gap: .4em; }
.ka-tags i { font-size: .78em; font-weight: 700; padding: .35em .75em; border-radius: 99em; border: 1px solid var(--line); background: var(--paper); }
.ka-bb-voice p { font-family: Georgia, serif; font-style: italic; font-size: 1.25em; line-height: 1.25; color: #2A221C; margin-top: auto; }

/* ==========================================================================
   GROWTH ENGINE
   ========================================================================== */
.ka-engine-wrap, .ka-engine .ka-in { aspect-ratio: auto; }
.ka-engine .ka-in { aspect-ratio: 62.5 / 36; }
.ka-engine .ka-in > .ka-engine, .ka-in > .ka-card.ka-engine { left: 0; top: 0; width: 52em; padding: 1.7em 1.9em; }
.ka-eng-head { display: flex; justify-content: space-between; font-size: .72em; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding: 0 0 .6em; }
.ka-eng-row { display: grid; grid-template-columns: 2.4em 10.5em 2.6em 1fr 3em; align-items: center; gap: .9em; padding: .62em 0; border-top: 1px solid #F0EBE3; font-size: .9em; }
.ka-ico { width: 2.4em; height: 2.4em; border-radius: .55em; display: grid; place-items: center; background: var(--sand); font-weight: 700; font-size: .85em; }
.ka-eng-row:first-of-type .ka-ico { background: var(--ink); color: #fff; }
.ka-toggle { width: 2.6em; height: 1.45em; border-radius: 99em; background: var(--o); position: relative; }
.ka-toggle::after { content: ""; position: absolute; right: .17em; top: .17em; width: 1.1em; height: 1.1em; border-radius: 50%; background: #fff; box-shadow: 0 .1em .2em rgba(0,0,0,.2); }
.ka-eng-bar { height: .55em; background: #F0EBE3; border-radius: 1em; overflow: hidden; }
.ka-eng-row b { text-align: right; }
.ka-eng-foot { display: grid; grid-template-columns: auto 1fr; align-items: end; gap: 1.5em; margin-top: 1em; padding-top: 1.2em; border-top: 1px solid #F0EBE3; }
.ka-eng-foot .ka-k { grid-column: 1; }
.ka-eng-foot b { grid-column: 1; font-family: Anton, Impact, sans-serif; font-weight: 400; font-size: 3em; line-height: 1; }
.ka-eng-foot .ka-spark { grid-column: 2; grid-row: 1 / span 2; height: 4.6em; margin: 0; }
.ka-shift { right: 0; bottom: 0; width: 21em; rotate: -2deg; border-left: .35em solid var(--o); }
.ka-shift b { display: block; font-size: 1.15em; margin: .3em 0 .2em; }
.ka-shift i { font-size: .82em; color: #67615A; }

/* ==========================================================================
   PILLARS (shared canvas)
   ========================================================================== */
.ka-seo .ka-in, .ka-email .ka-in, .ka-social .ka-in, .ka-ads .ka-in, .ka-design .ka-in { aspect-ratio: 62.5 / 44; overflow: hidden; }
.ka-seo .ka-in { background: linear-gradient(160deg, #EFEAE2, #E6DED2); }
.ka-email .ka-in { background: linear-gradient(160deg, #F6E3D5, #EDD2BF); }
.ka-social .ka-in { background: linear-gradient(160deg, #E5E8DD, #D6DBCB); }
.ka-ads .ka-in { background: linear-gradient(160deg, #ECE7E0, #DFD7CB); }
.ka-design .ka-in { background: linear-gradient(160deg, #EDE6F0, #DED5E2); }
.ka-seo .ka-in::after, .ka-email .ka-in::after, .ka-social .ka-in::after, .ka-ads .ka-in::after, .ka-design .ka-in::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(20,20,20,.09) 1px, transparent 1.2px); background-size: 2em 2em; pointer-events: none; z-index: 0; }
.ka-seo .ka-card, .ka-email .ka-card, .ka-social .ka-card, .ka-ads .ka-card, .ka-design .ka-card, .ka-phone { z-index: 1; }

/* SEO */
.ka-serp { left: 4em; top: 4em; width: 47em; padding: 1.6em 1.8em; }
.ka-serp-q { display: flex; align-items: center; gap: .9em; border: 1px solid var(--line); border-radius: 99em; padding: .8em 1.3em; font-size: .95em; box-shadow: 0 .2em .6em rgba(0,0,0,.05); }
.ka-serp-tabs { display: flex; gap: 1.6em; font-size: .78em; color: var(--muted); padding: 1em .4em .7em; border-bottom: 1px solid #F0EBE3; }
.ka-serp-tabs i.is-on { color: var(--ink); font-weight: 700; box-shadow: 0 .9em 0 -.7em var(--ink); }
.ka-serp-r { position: relative; display: grid; grid-template-columns: 2.4em 1fr; column-gap: .8em; row-gap: .25em; padding: 1.1em .4em; }
.ka-serp-r.is-top { background: #FFF9F4; border-radius: .8em; margin-top: .8em; box-shadow: inset 0 0 0 1.5px rgba(221,102,41,.35); padding: 1.1em 1em; }
.ka-serp-r.is-top::before { content: "#1"; position: absolute; left: -2.6em; top: 1em; font-family: Anton, Impact, sans-serif; font-size: 1.4em; color: var(--o); }
.ka-fav { grid-row: span 2; width: 2.4em; height: 2.4em; border-radius: 50%; background: #2A221C; color: #F3EADC; display: grid; place-items: center; font-size: .8em; font-weight: 700; }
.ka-serp-u { display: flex; flex-direction: column; font-size: .76em; line-height: 1.25; }
.ka-serp-u i { color: var(--muted); }
.ka-serp-t, .ka-serp-m, .ka-serp-d { grid-column: 1 / -1; }
.ka-serp-t { font-size: 1.12em; color: #1F3FA8; font-weight: 600; margin-top: .3em; }
.ka-serp-m { font-size: .74em; color: #5D574F; }
.ka-serp-d { font-size: .8em; color: #4A453F; }
.ka-serp-r.is-ghost { display: flex; flex-direction: column; gap: .5em; opacity: .55; }
.ka-serp-r.is-ghost span { height: .7em; border-radius: 1em; background: #ECE6DD; }
.ka-l1 { width: 30%; } .ka-l2 { width: 70%; } .ka-l3 { width: 55%; }
.ka-pos { right: 2.5em; bottom: 9em; width: 15em; text-align: left; }
.ka-pos b { display: block; font-family: Anton, Impact, sans-serif; font-weight: 400; font-size: 3em; line-height: 1; margin-top: .15em; color: var(--o); }
.ka-pos b i { color: #BDB5A9; text-decoration: line-through; text-decoration-thickness: .06em; }

/* Email */
.ka-mail { left: 6em; top: 3.5em; width: 30em; padding: 0; overflow: hidden; rotate: -2deg; }
.ka-mail-h { display: flex; align-items: center; gap: .8em; padding: 1em 1.2em; border-bottom: 1px solid #F0EBE3; }
.ka-mail-h span:nth-child(2) { display: flex; flex-direction: column; font-size: .85em; flex: 1; }
.ka-mail-h span i { color: #67615A; }
.ka-mail-h em { font-size: .72em; color: var(--muted); }
.ka-mail-hero { height: 15em; }
.ka-mail-b { padding: 1.3em 1.4em 1.5em; display: flex; flex-direction: column; gap: .6em; }
.ka-mail-b > b { font-family: Georgia, serif; font-weight: 400; font-size: 1.7em; line-height: 1.05; color: #2A221C; }
.ka-mail-b > i { font-size: .85em; color: #67615A; }
.ka-mail-b .ka-atc { background: #2A221C; margin-top: .4em; }
.ka-flowchips { right: 2.5em; top: 8em; width: 23em; }
.ka-fc { display: flex; flex-direction: column; gap: .5em; margin-top: .8em; position: relative; }
.ka-fc::before { content: ""; position: absolute; left: .55em; top: .6em; bottom: .6em; width: 1.5px; background: var(--line); }
.ka-fc i { position: relative; padding-left: 2em; font-size: .85em; color: #67615A; }
.ka-fc i::before { content: ""; position: absolute; left: .2em; top: .3em; width: .75em; height: .75em; border-radius: 50%; background: #fff; border: 1.5px solid #CFC7BB; }
.ka-fc i.is-on { color: var(--ink); font-weight: 700; }
.ka-fc i.is-on::before { background: var(--o); border-color: var(--o); box-shadow: 0 0 0 .3em var(--o-soft); }

/* Social */
.ka-post { left: 5em; top: 2.5em; width: 27em; padding: 0; overflow: hidden; }
.ka-post-h { display: flex; align-items: center; gap: .7em; padding: .9em 1.1em; font-size: .9em; }
.ka-post-h b { flex: 1; }
.ka-post-h span:nth-child(2) { display: flex; flex-direction: column; line-height: 1.2; flex: 1; }
.ka-post-h span i { font-size: .82em; color: var(--muted); }
.ka-post-img { height: 25em; }
.ka-post-a { display: flex; gap: 1.1em; padding: .8em 1.1em .3em; font-size: 1.15em; color: var(--ink); }
.ka-post-a { align-items: center; }
.ka-ic { width: 1.1em; height: 1.1em; display: block; }
.ka-ic.is-end { margin-left: auto; }
.ka-heart { color: #E0473A; }
.ka-post-c { padding: 0 1.1em 1.1em; font-size: .82em; display: flex; flex-direction: column; gap: .2em; }
.ka-post-c i { color: #4A453F; }
.ka-comment { right: 2.5em; top: 7em; width: 25em; display: flex; gap: .8em; align-items: center; padding: 1em 1.2em; font-size: .9em; }
.ka-comment i { font-size: .92em; color: #4A453F; }
.ka-reach { right: 5em; top: 16.5em; width: 15em; }
.ka-reach b { display: block; font-family: Anton, Impact, sans-serif; font-weight: 400; font-size: 2.8em; line-height: 1; margin-top: .15em; }

/* Ads */
.ka-ad { left: 3.5em; top: 2.5em; width: 27em; padding: 0; overflow: hidden; }
.ka-ad .ka-post-h { padding-bottom: .5em; }
.ka-ad-copy { padding: 0 1.1em .8em; font-size: .85em; color: #3A3530; }
.ka-ad-img { position: relative; height: 19em; }
.ka-ad-over { position: absolute; z-index: 3; left: 1em; bottom: 1em; background: #2A221C; color: #F3EADC; font-family: Anton, Impact, sans-serif; font-size: 1.3em; line-height: 1; padding: .55em .7em; text-transform: uppercase; border-radius: .2em; }
.ka-ad-cta { display: flex; align-items: center; justify-content: space-between; gap: 1em; padding: .9em 1.1em; background: #F6F3EE; font-size: .82em; }
.ka-ad-cta span { display: flex; flex-direction: column; }
.ka-ad-cta i { color: var(--muted); font-size: .9em; }
.ka-ad-cta em { background: #E7E1D7; padding: .55em 1em; border-radius: .5em; font-weight: 700; }
.ka-metrics { right: 2.5em; top: 9.5em; width: 27em; padding: 1.4em 1.5em; }
.ka-met { display: grid; grid-template-columns: 1fr auto auto; align-items: baseline; gap: 1em; padding: .8em 0; border-top: 1px solid #F0EBE3; }
.ka-met span { font-size: .85em; color: #67615A; }
.ka-met b { font-family: Anton, Impact, sans-serif; font-weight: 400; font-size: 1.9em; line-height: 1; }
.ka-met em { font-size: .74em; font-weight: 700; min-width: 4.5em; text-align: right; }
.ka-met em.is-up { color: var(--good); }

/* Design */
.ka-phone { position: absolute; left: 7em; top: 3em; width: 21em; height: 44em; background: #121212; border-radius: 3.2em; padding: .7em; box-shadow: var(--sh), inset 0 0 0 .15em #2B2B2B; rotate: -4deg; }
.ka-phone-s { width: 100%; height: 100%; background: #fff; border-radius: 2.6em; overflow: hidden; display: flex; flex-direction: column; }
.ka-phone-nav { display: flex; justify-content: space-between; align-items: center; padding: 2.2em 1.4em .9em; font-size: .8em; }
.ka-phone-nav b { letter-spacing: .35em; }
.ka-phone-img { position: relative; height: 19em; }
.ka-dots3 { position: absolute; z-index: 3; left: 50%; bottom: .9em; translate: -50% 0; display: flex; gap: .35em; }
.ka-dots3 i { width: .45em; height: .45em; border-radius: 50%; background: rgba(255,255,255,.6); }
.ka-dots3 i.is-on { background: #fff; width: 1.2em; border-radius: 1em; }
.ka-phone-info { padding: 1.1em 1.3em; display: flex; flex-direction: column; gap: .45em; }
.ka-phone-info b { font-size: 1.1em; }
.ka-phone-info .ka-atc { margin-top: .5em; }
.ka-tokens { right: 3em; top: 6.5em; width: 25em; display: flex; flex-direction: column; gap: .9em; rotate: 2deg; }
.ka-tok-btn { background: var(--ink); color: #fff; border-radius: .6em; padding: .8em; text-align: center; font-weight: 700; font-size: .85em; outline: 1.5px dashed #B48BE0; outline-offset: .35em; }
.ka-tok-row { display: flex; gap: .5em; }
.ka-tok-badge { font-size: .74em; font-weight: 700; padding: .35em .8em; border-radius: 99em; background: var(--o-soft); color: #A9471A; }
.ka-tok-badge.is-sage { background: #E3E8DC; color: #4C5A3F; }
.ka-tok-sw { display: flex; gap: .45em; }
.ka-tok-sw i { width: 2.6em; height: 2.6em; border-radius: .5em; background: var(--c); box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }
.ka-tok-type { display: flex; align-items: baseline; gap: .8em; border-top: 1px solid #F0EBE3; padding-top: .8em; }
.ka-tok-type b { font-family: Georgia, serif; font-weight: 400; font-size: 2.6em; line-height: 1; }
.ka-tok-type i { font-size: .78em; color: var(--muted); }

/* ==========================================================================
   DASHBOARD
   ========================================================================== */
.ka-dashboard .ka-in { aspect-ratio: 62.5 / 37; }
.ka-dash { position: absolute; left: 5em; top: 0; width: 57.5em; background: #fff; border-radius: 1.2em; overflow: hidden; box-shadow: var(--sh); border: 1px solid rgba(30,20,10,.07); }
.ka-dash-b { display: grid; grid-template-columns: 10.5em 1fr; }
.ka-dash-side { background: #FAF8F4; border-right: 1px solid #F0EBE3; padding: 1.3em 1em; display: flex; flex-direction: column; gap: .3em; font-size: .82em; }
.ka-dash-side b { display: flex; align-items: center; gap: .5em; margin-bottom: 1em; font-size: 1.05em; }
.ka-dash-side i { padding: .55em .8em; border-radius: .5em; color: #67615A; }
.ka-dash-side i.is-on { background: #fff; color: var(--ink); font-weight: 700; box-shadow: var(--sh-sm); }
.ka-dash-main { padding: 1.4em 1.6em 1.3em; }
.ka-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: .7em; }
.ka-kpi { border: 1px solid #F0EBE3; border-radius: .8em; padding: .8em .9em; display: flex; flex-direction: column; gap: .15em; }
.ka-kpi span { font-size: .68em; color: var(--muted); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.ka-kpi b { font-family: Anton, Impact, sans-serif; font-weight: 400; font-size: 1.75em; line-height: 1.05; }
.ka-kpi em { font-size: .68em; font-weight: 700; color: var(--good); }
.ka-kpi:first-child { background: #FFF8F2; border-color: rgba(221,102,41,.35); }
.ka-chart { position: relative; margin-top: 1.1em; border: 1px solid #F0EBE3; border-radius: .9em; padding: 1em 1.1em .7em; }
.ka-chart-h { display: flex; justify-content: space-between; align-items: center; font-size: .85em; }
.ka-chart-h span { display: flex; gap: .3em; font-size: .85em; }
.ka-chart-h span i { padding: .25em .6em; border-radius: .4em; color: var(--muted); }
.ka-chart-h span i.is-on { background: var(--ink); color: #fff; }
.ka-bars { display: flex; align-items: flex-end; gap: .55em; height: 13em; margin-top: 1em; }
.ka-bars i { flex: 1; height: var(--h); border-radius: .35em .35em .1em .1em; background: linear-gradient(180deg, #E4D9CC, #EFE8DE); transform-origin: bottom; transform: scaleY(0); }
.ka-bars i:nth-last-child(-n+3) { background: linear-gradient(180deg, #E8844C, var(--o)); }
.ka.is-in .ka-bars i { animation: ka-growy 1s cubic-bezier(.6,.05,.2,1) forwards; animation-delay: calc(var(--i) * .06s + .2s); }
@keyframes ka-growy { to { transform: scaleY(1); } }
.ka-goal { position: absolute; left: 1.1em; right: 1.1em; bottom: calc(.7em + 1.6em + 13em * .62); border-top: 1.5px dashed var(--ink); z-index: 2; }
.ka-goal span { position: absolute; left: 0; top: -1.9em; font-size: .7em; font-weight: 700; background: var(--ink); color: #fff; padding: .3em .7em; border-radius: .4em; }
.ka-months { display: flex; gap: .55em; height: 1.6em; align-items: flex-end; }
.ka-months span { flex: 1; text-align: center; font-size: .65em; color: var(--muted); }
.ka-mix { left: 0; top: 17.5em; width: 17em; z-index: 3; }
.ka-donut { width: 8em; margin: .8em auto .6em; }
.ka-donut svg { display: block; width: 100%; }
.ka-mix ul { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: .35em .6em; font-size: .74em; }
.ka-mix li { display: flex; align-items: center; gap: .4em; }
.ka-mix li i { width: .75em; height: .75em; border-radius: .2em; background: var(--c); }
.ka-toast { right: 1.5em; bottom: 0; width: 25em; z-index: 3; display: flex; align-items: center; gap: 1em; padding: 1.1em 1.3em; background: var(--ink); color: #fff; border: 0; }
.ka-toast span:last-child { display: flex; flex-direction: column; font-size: .95em; }
.ka-toast i { color: #BDB5A9; font-size: .88em; }

/* ==========================================================================
   MONTHLY REVIEW
   ========================================================================== */
.ka-review .ka-in { aspect-ratio: 62.5 / 40; }
.ka-review .ka-card { left: 2em; top: 2em; right: 2em; padding: 1.8em 2em; }
.ka-rev-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2em; padding: 1.4em 0; }
.ka-rev-cols > div { background: var(--paper); border-radius: .9em; padding: 1.1em 1.2em; display: flex; flex-direction: column; gap: .55em; }
.ka-rev-cols i { font-size: .88em; padding-left: 1.1em; position: relative; }
.ka-rev-cols i::before { content: ""; position: absolute; left: 0; top: .55em; width: .45em; height: .45em; border-radius: 50%; background: var(--o); }
.ka-rev-cols i.is-x { color: var(--muted); text-decoration: line-through; }
.ka-rev-cols i.is-x::before { background: #C9C1B6; }
.ka-rev-foot { display: grid; grid-template-columns: auto 1fr; gap: 2em; align-items: end; border-top: 1px solid #F0EBE3; padding-top: 1.2em; }
.ka-rev-foot b { display: block; font-family: Anton, Impact, sans-serif; font-weight: 400; font-size: 2.8em; line-height: 1; margin-top: .1em; }
.ka-rev-foot .ka-spark { margin: 0; height: 4em; }

@media (prefers-reduced-motion: reduce) {
	.ka-float, .ka-flow, .ka-live::before { animation: none !important; }
	.ka .ka-fill, .ka .ka-bars i { transform: none !important; }
	.ka .ka-order { opacity: 1 !important; transform: none !important; }
	.ka .ka-spark { clip-path: none !important; }
}