/* Klikit site UI: landing, sign-up and log-in. Same design language as the artist pages. Scoped to .kl. */
.kl{
	--kl-accent:#daea49;--kl-on-accent:#000;--kl-ink:#000;--kl-ink-2:#111827;--kl-muted:#4b5563;--kl-soft:#6b7280;--kl-faint:#9ca3af;
	--kl-line:#e5e7eb;--kl-line-2:#f3f4f6;--kl-alt:#f4f4f5;--kl-input:#fafafa;--kl-ok:#16a34a;--kl-bad:#dc2626;
	--f-sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
	--f-mono:"Space Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
	--f-display:"Anton",Impact,"Arial Narrow Bold",sans-serif;
	--f-serif:"DM Serif Display",Georgia,"Times New Roman",serif;
	font-family:var(--f-sans);color:var(--kl-ink);line-height:1.5;
}
.kl *,.kl *::before,.kl *::after{box-sizing:border-box}
.kl [hidden]{display:none !important}
.kl a{color:inherit}
:where(.kl) :where(h1,h2,h3,p){margin:0} /* Zero specificity so component margins (.kl-lead, .kl-sub…) win. */
.kl-svg{width:20px;height:20px;flex:none}
.kl .k-ico{display:inline-block;width:22px;height:22px;flex:none;background:currentColor;-webkit-mask:var(--i) center/contain no-repeat;mask:var(--i) center/contain no-repeat}
.kl-label{font:700 12px/16px var(--f-mono);letter-spacing:.3em;text-transform:uppercase;color:var(--kl-muted)}
.kl-tag{font:400 14px/20px var(--f-mono);letter-spacing:.6em;padding-left:.6em;text-transform:uppercase;color:#9ca3af}

/* ---------- Buttons, notices, fields (also used by sign-up / log-in) ---------- */
.kl-button{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:14px 26px;border:0;border-radius:12px;background:#000;color:#fff !important;font:700 15px/20px var(--f-mono);letter-spacing:.1em;text-transform:uppercase;text-decoration:none;cursor:pointer;white-space:nowrap;transition:background .2s,color .2s}
.kl-button:hover{background:var(--kl-accent);color:var(--kl-on-accent) !important}
.kl-button:disabled{opacity:.6;cursor:wait}
.kl-button-block{width:100%;padding:16px}
.kl-notice{padding:12px 16px;border-radius:12px;background:var(--kl-alt);margin:0 0 20px;font-size:14px}
.kl-notice-ok{background:#ecfdf3;color:#166534}
.kl-notice-error{background:#fef2f2;color:#991b1b}

.kd-field{display:flex;flex-direction:column;gap:8px;margin:0 0 20px}
.kd-field>span:first-child{font:700 10px/15px var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--kl-muted)}
.kd-field input[type=text],.kd-field input[type=email],.kd-field input[type=password],
.kl-auth input[type=text],.kl-auth input[type=password]{width:100%;height:48px;padding:12px 16px;border:0;border-radius:12px;background:var(--kl-input);color:var(--kl-ink);font:16px/24px var(--f-sans);outline:none;transition:box-shadow .2s}
.kd-field input:focus,.kl-auth input:focus{box-shadow:0 0 0 2px #000}
.kd-prefixed{display:flex;align-items:stretch;height:48px;border-radius:12px;background:var(--kl-input);overflow:hidden;transition:box-shadow .2s}
.kd-prefixed:focus-within{box-shadow:0 0 0 2px #000}
.kd-prefixed em{display:flex;align-items:center;padding:0 0 0 16px;font:700 14px var(--f-mono);font-style:normal;color:var(--kl-soft);white-space:nowrap}
.kl .kd-prefixed input[type=text]{flex:1;min-width:0;height:auto;padding:0 16px 0 2px;border:0;border-radius:0;background:transparent;box-shadow:none;font:700 15px var(--f-mono);color:var(--kl-ink);outline:none}
.k-hp{position:absolute !important;left:-9999px;width:1px;height:1px;opacity:0}

/* ---------- Sign-up / log-in card ---------- */
.kl-auth{max-width:480px;margin:24px auto}
.kl-card{padding:48px;border-radius:24px;background:#fff;border:1px solid var(--kl-line-2);box-shadow:0 25px 50px -12px rgba(0,0,0,.08)}
.kl-card .kl-title{display:block;font:400 56px/1 var(--f-display);letter-spacing:-.025em;text-transform:uppercase;margin:0 0 12px}
.kl-sub{margin-bottom:28px;color:var(--kl-soft);font-size:15px}
.kl-alt{margin-top:24px;text-align:center;font:700 11px/16px var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--kl-soft)}
.kl-alt a{color:var(--kl-ink);text-decoration:underline;text-underline-offset:3px}
.kl-availability{min-height:20px;margin:-12px 0 16px;font:700 12px/18px var(--f-mono);letter-spacing:.05em;text-transform:uppercase}
.kl-availability.is-ok{color:var(--kl-ok)}
.kl-availability.is-bad{color:var(--kl-bad)}
.kl-auth #loginform p{display:flex;flex-direction:column;gap:8px;margin:0 0 20px}
.kl-auth #loginform label{font:700 10px/15px var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--kl-muted)}
.kl-auth #loginform .login-remember label{display:inline-flex;align-items:center;gap:8px;font-size:11px}
.kl-auth #loginform .button-primary{width:100%;padding:16px;border:0;border-radius:12px;background:#000;color:#fff;font:700 16px/24px var(--f-mono);letter-spacing:.1em;text-transform:uppercase;cursor:pointer;transition:background .2s,color .2s}
.kl-auth #loginform .button-primary:hover{background:var(--kl-accent);color:#000}
@media (max-width:520px){.kl-card{padding:28px 20px;border-radius:20px}.kl-card .kl-title{font-size:44px}}

/* ---------- Landing: layout ---------- */
.kl-landing{overflow-x:clip;background:#fff}
.kl-sec{padding:96px 48px;background:#fff;border-top:1px solid var(--kl-line-2)}
.kl-sec-alt{background:var(--kl-alt)}
.kl-wrap{max-width:1280px;margin:0 auto}
.kl-title{display:flex;align-items:center;flex-wrap:wrap;gap:0 16px;font:400 64px/1 var(--f-display);letter-spacing:.015em;text-transform:uppercase;margin:0}
.kl-title em{font-style:normal;color:transparent;-webkit-text-stroke:1.5px #000}
.kl-title-row{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:48px}
.kl-title-rule{padding-bottom:24px;border-bottom:1px solid rgba(0,0,0,.06)}
.kl-shop-all{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600;letter-spacing:.025em;text-transform:uppercase;text-decoration:none}
.kl-shop-all:hover{text-decoration:underline;text-underline-offset:4px}
.kl-shop-all .kl-svg{width:16px;height:16px}

/* ---------- Hero ---------- */
.kl-hero{position:relative;display:flex;align-items:center;justify-content:center;min-height:calc(100vh - 61px);min-height:calc(100svh - 61px);padding:72px 16px 120px;overflow:hidden;background:radial-gradient(60% 55% at 50% 55%,#262626 0%,#0b0b0b 55%,#000 100%);color:#fff;text-align:center}
.kl-hero-inner{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;width:100%}
.kl-hero .kl-tag{margin-bottom:12px}
.kl-hero-title{display:flex;flex-direction:column;align-items:center;font:400 15vw/.82 var(--f-serif);letter-spacing:-.03em;text-transform:uppercase;white-space:nowrap;color:#fff}
.kl-hero-title span:last-child{color:transparent;-webkit-text-stroke:2px #fff}
.kl-lead{max-width:46ch;margin:32px auto 32px;font-size:18px;line-height:1.6;color:#d1d5db}
.kl-claim-form{display:flex;gap:8px;width:100%;max-width:560px;margin:0 auto;padding:8px;border-radius:16px;background:#fff;box-shadow:0 25px 50px -12px rgba(0,0,0,.4)}
.kl-claim-form .kl-claim{flex:1;min-width:0;background:transparent}
.kl-claim-form .kl-claim em,.kl-claim-form .kl-claim input{font-size:16px !important}
.kl-claim-form .kl-claim:focus-within{box-shadow:none}
.kl-claim-dark .kl-button{background:var(--kl-accent);color:#000 !important}
.kl-claim-dark .kl-button:hover{background:#000;color:#fff !important}
.kl-hero .kl-availability,.kl-cta .kl-availability{margin:14px 0 0;min-height:18px}
.kl-hero .kl-availability.is-ok,.kl-cta .kl-availability.is-ok{color:var(--kl-accent)}
.kl-hero .kl-availability.is-bad,.kl-cta .kl-availability.is-bad{color:#fca5a5}
.kl-ticker{position:absolute;left:0;right:0;bottom:0;height:48px;display:flex;align-items:center;overflow:hidden;background:#000;border-top:1px solid rgba(255,255,255,.1)}
.kl-ticker-track{display:flex;width:max-content;animation:kl-ticker 40s linear infinite}
.kl-ticker-group{display:flex;align-items:center;gap:16px;padding-right:16px;white-space:nowrap;font:700 14px/20px var(--f-mono);letter-spacing:.1em;text-transform:uppercase}
.kl-ticker-group i{font-style:normal;color:var(--kl-accent)}
.kl-ticker-disc{width:18px;height:18px;color:var(--kl-accent)}
@keyframes kl-ticker{to{transform:translateX(-50%)}}

/* ---------- Showcase: browser + phone mock of an artist page ---------- */
.kl-showcase-grid{position:relative;padding-right:120px}
.kl-browser{border-radius:16px;overflow:hidden;border:1px solid var(--kl-line);box-shadow:0 30px 60px -15px rgba(0,0,0,.25);background:#fff}
.kl-browser-bar{display:flex;align-items:center;gap:8px;height:40px;padding:0 16px;background:var(--kl-alt);border-bottom:1px solid var(--kl-line)}
.kl-browser-bar i{width:11px;height:11px;border-radius:50%;background:#d4d4d8}
.kl-browser-bar span{margin-left:16px;padding:4px 14px;border-radius:999px;background:#fff;font:700 11px var(--f-mono);color:var(--kl-soft)}
.kl-site{font-size:10px}
.kl-site-nav{display:flex;justify-content:space-between;align-items:center;height:36px;padding:0 20px;border-bottom:1px solid var(--kl-line-2);font:700 9px var(--f-mono);letter-spacing:.2em;text-transform:uppercase}
.kl-site-nav b{font-size:14px;letter-spacing:.25em}
.kl-site-nav span:last-child{width:120px}
.kl-site-hero{position:relative;display:flex;flex-direction:column;align-items:center;padding:36px 0 64px;background:radial-gradient(60% 60% at 50% 55%,#2a2a2a,#000 75%);color:#fff;overflow:hidden}
.kl-site-hero small{font:400 9px var(--f-mono);letter-spacing:.6em;text-transform:uppercase;color:#9ca3af;margin-bottom:6px}
.kl-site-hero strong{font:400 clamp(48px,8.5vw,120px)/.8 var(--f-serif);letter-spacing:-.03em;text-transform:uppercase}
.kl-site-ticker{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;gap:10px;height:30px;padding:0 16px;background:#000;border-top:1px solid rgba(255,255,255,.12);font:700 10px var(--f-mono);letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;overflow:hidden}
.kl-site-ticker i{font-style:normal;color:var(--kl-accent)}
.kl-site-ticker .kl-svg{width:13px;height:13px;color:var(--kl-accent)}
.kl-site-music{display:grid;grid-template-columns:200px 1fr;gap:32px;align-items:center;padding:28px 32px 32px}
.kl-site-release{position:relative;display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;aspect-ratio:1;padding:16px;border-radius:12px;overflow:hidden;background:linear-gradient(to top,rgba(0,0,0,.85),transparent 60%),radial-gradient(90% 80% at 70% 20%,#7c5cff,#ff3d7f 45%,#111 90%);color:#fff}
.kl-site-badge{padding:2px 7px;margin-bottom:6px;border-radius:2px;background:var(--kl-accent);color:#000;font:700 8px var(--f-mono);letter-spacing:.05em;text-transform:uppercase}
.kl-site-release b{font:400 28px/1 var(--f-display);text-transform:uppercase;margin-bottom:10px}
.kl-site-play{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;background:#fff;color:#000;font:700 8px var(--f-sans);letter-spacing:.1em;text-transform:uppercase}
.kl-site-play .kl-svg{width:8px;height:8px}
.kl-site-tracks small{display:block;margin-bottom:6px;font:700 8px var(--f-mono);letter-spacing:.3em;text-transform:uppercase;color:var(--kl-muted)}
.kl-site-track{display:flex;align-items:center;gap:12px;padding:8px 0;border-bottom:1px solid var(--kl-line-2)}
.kl-site-track span{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:#f3f4f6;color:#9ca3af}
.kl-site-track .kl-svg{width:9px;height:9px;margin-left:1px}
.kl-site-track.is-on span{background:var(--kl-accent);color:#000}
.kl-site-track b{font-size:11px;letter-spacing:-.02em;text-transform:uppercase}
.kl-showcase-phone{position:absolute;right:0;bottom:-40px;width:230px;padding:8px;border-radius:36px;background:#0a0a0a;box-shadow:0 0 0 1px #2c2a38,0 30px 60px rgba(0,0,0,.35)}
.kl-phone-screen{position:relative;height:440px;border-radius:29px;overflow:hidden;background:radial-gradient(70% 50% at 50% 45%,#2a2a2a,#000 80%);color:#fff}
.kl-phone-hero{display:flex;flex-direction:column;align-items:center;padding-top:90px}
.kl-phone-hero small{font:400 7px var(--f-mono);letter-spacing:.4em;text-transform:uppercase;color:#9ca3af;margin-bottom:4px}
.kl-phone-hero strong{font:400 46px/.82 var(--f-serif);letter-spacing:-.03em;text-transform:uppercase}
.kl-phone-player{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;gap:10px;padding:14px;background:#0a0a0a;border-top:1px solid rgba(255,255,255,.1)}
.kl-phone-player>span{width:34px;height:34px;border-radius:6px;background:linear-gradient(135deg,#7c5cff,#ff3d7f);flex:none}
.kl-phone-player div{flex:1;display:grid;gap:6px}
.kl-phone-player b{font:400 13px var(--f-display);text-transform:uppercase}
.kl-phone-player i{height:3px;border-radius:2px;background:linear-gradient(90deg,var(--kl-accent) 40%,#333 40%)}
.kl-phone-player em{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#fff;color:#000}
.kl-phone-player .kl-svg{width:11px;height:11px}

/* ---------- How it works ---------- */
.kl-steps{margin:0;padding:0;list-style:none;border-top:1px solid var(--kl-line)}
.kl-step{display:flex;align-items:center;gap:48px;padding:28px 0;border-bottom:1px solid var(--kl-line)}
.kl-step-num{width:140px;flex:none;font:400 88px/1 var(--f-display);color:transparent;-webkit-text-stroke:1.5px #000}
.kl-step h3{margin-bottom:6px;font:400 32px/1.1 var(--f-display);text-transform:uppercase;letter-spacing:.01em}
.kl-step p{font-size:17px;color:var(--kl-muted)}
.kl-step:hover .kl-step-num{color:var(--kl-accent);-webkit-text-stroke-color:#000}

/* ---------- Features ---------- */
.kl-features{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.kl-feature{padding:32px;border-radius:16px;border:1px solid var(--kl-line);background:#fff;transition:border-color .2s,transform .2s}
.kl-feature:hover{border-color:#000;transform:translateY(-3px)}
.kl-feature-icon{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:#f3f4f6;color:#000;transition:background .2s}
.kl-feature:hover .kl-feature-icon{background:var(--kl-accent)}
.kl-feature-icon .kl-svg{width:22px;height:22px}
.kl-feature h3{margin:24px 0 8px;font:400 26px/1.1 var(--f-display);text-transform:uppercase;letter-spacing:.01em}
.kl-feature p{font-size:15px;line-height:1.6;color:var(--kl-muted)}

/* ---------- Themes ---------- */
.kl-themes{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:20px}
.kl-theme{margin:0}
.kl-theme figcaption{margin-top:14px;font:700 11px var(--f-mono);letter-spacing:.2em;text-transform:uppercase;text-align:center}
.kl-theme-page{--sec:#fff;--ink:#000;--card:#f3f4f6;display:flex;flex-direction:column;aspect-ratio:9/15;border-radius:14px;overflow:hidden;border:1px solid rgba(0,0,0,.08);box-shadow:0 20px 40px -10px rgba(0,0,0,.2);background:var(--sec);transition:transform .25s}
.kl-theme:hover .kl-theme-page{transform:translateY(-6px)}
.kl-theme-hero{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;height:45%;background:radial-gradient(70% 60% at 50% 55%,#2a2a2a,#000 85%)}
.kl-theme-hero b{display:block;width:62%;height:12px;border-radius:2px;background:#fff}
.kl-theme-hero b+b{width:76%}
.kl-theme-body{flex:1;display:flex;flex-direction:column;gap:7px;padding:12px}
.kl-theme-body i{display:block;height:8px;border-radius:3px;background:var(--card)}
.kl-theme-body .kl-theme-card{height:34%;border-radius:6px;background:linear-gradient(to top,rgba(0,0,0,.6),transparent),var(--a,#daea49)}
.kl-theme-studio .kl-theme-page{--a:#daea49}
.kl-theme-midnight .kl-theme-page{--sec:#0a0a0a;--card:#1f1f25;--a:#7c5cff}
.kl-theme-daylight .kl-theme-page{--sec:#f7f6f2;--card:#e7e5df;--a:#ff6b2c}
.kl-theme-neon .kl-theme-page{--sec:#06060b;--card:#1d1d2b;--a:#00e5ff}
.kl-theme-neon .kl-theme-card{box-shadow:0 0 14px #00e5ff}
.kl-theme-sunset .kl-theme-page{--sec:#180a26;--card:#2c1745;--a:#ff3d7f}
.kl-theme-mono .kl-theme-page{--sec:#fff;--card:#e5e7eb;--a:#111;border:2px solid #000;box-shadow:5px 5px 0 #000}
.kl-theme-custom .kl-theme-page{--sec:#fff1f2;--card:#fecdd3;--a:#fb7185;border:2px dashed #000}
.kl-theme-custom .kl-theme-hero{background:conic-gradient(from 200deg,#ff3d7f,#f5b700,#daea49,#00b3d6,#7c5cff,#ff3d7f)}

/* ---------- Custom theme section ---------- */
.kl-custom-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:72px;align-items:center}
.kl-custom-copy .kl-label{margin-bottom:16px}
.kl-custom-title{margin-bottom:24px;font:400 80px/.95 var(--f-display);letter-spacing:.01em;text-transform:uppercase}
.kl-custom-title em{display:block;font-style:normal;color:transparent;-webkit-text-stroke:1.5px #000}
.kl-custom-lead{margin-bottom:24px;font-size:17px;line-height:1.65;color:var(--kl-muted)}
.kl-custom-points{display:grid;gap:12px;margin:0 0 32px;padding:0;list-style:none}
.kl-custom-points li{display:flex;align-items:center;gap:12px;font:700 12px/18px var(--f-mono);letter-spacing:.08em;text-transform:uppercase}
.kl-custom-points .kl-svg{width:22px;height:22px;padding:4px;border-radius:50%;background:var(--kl-accent);stroke-width:3}
.kl-custom-demo{--d-bg:#fff;--d-ink:#000;--d-hero:#000;--d-accent:#daea49;--d-font:"DM Serif Display",serif;--d-weight:400;display:grid;grid-template-columns:minmax(0,1fr) 230px;gap:24px;padding:24px;border-radius:24px;background:var(--kl-alt);border:1px solid var(--kl-line)}
.kl-demo-page{border-radius:16px;overflow:hidden;border:1px solid rgba(0,0,0,.08);box-shadow:0 25px 50px -15px rgba(0,0,0,.25);background:var(--d-bg);transition:background .35s}
.kl-demo-hero{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:220px;padding:24px 12px;background:radial-gradient(60% 70% at 50% 60%,color-mix(in srgb,var(--d-hero) 82%,#fff),var(--d-hero) 70%);color:#fff;text-align:center;transition:background .35s}
.kl-demo-hero small{margin-bottom:8px;font:400 9px var(--f-mono);letter-spacing:.5em;text-transform:uppercase;opacity:.6}
.kl-demo-hero strong{font-family:var(--d-font);font-weight:var(--d-weight);font-size:56px;line-height:.9;letter-spacing:-.02em;text-transform:uppercase}
.kl-demo-body{display:grid;gap:12px;justify-items:start;padding:22px;color:var(--d-ink);transition:color .35s}
.kl-demo-title{font:400 28px/1 var(--f-display);text-transform:uppercase}
.kl-demo-title em{font-style:normal;color:transparent;-webkit-text-stroke:1px var(--d-ink)}
.kl-demo-badge{padding:3px 10px;border-radius:2px;background:var(--d-accent);color:#000;font:700 10px var(--f-mono);letter-spacing:.05em;text-transform:uppercase;transition:background .35s}
.kl-demo-row{display:flex;align-items:center;gap:12px;width:100%;padding:6px 0;border-bottom:1px solid color-mix(in srgb,var(--d-ink) 12%,transparent)}
.kl-demo-row span{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:color-mix(in srgb,var(--d-ink) 8%,transparent);color:var(--d-ink)}
.kl-demo-row:first-of-type span{background:var(--d-accent);color:#000}
.kl-demo-row .kl-svg{width:10px;height:10px;margin-left:2px}
.kl-demo-row i{flex:1;height:8px;border-radius:4px;background:color-mix(in srgb,var(--d-ink) 14%,transparent)}
.kl-demo-controls{display:flex;flex-direction:column;gap:10px}
.kl-demo-controls .kl-label{margin-top:6px;font-size:10px}
.kl-demo-chips{display:flex;flex-direction:column;gap:6px}
.kl-chip{display:flex;align-items:center;gap:10px;width:100%;padding:9px 12px;border:2px solid transparent;border-radius:12px;background:#fff;color:#000;font:700 12px/16px var(--f-mono);letter-spacing:.05em;text-align:left;cursor:pointer;transition:border-color .15s}
.kl-chip:hover{border-color:var(--kl-line)}
.kl-chip.is-on{border-color:#000}
.kl-chip code{margin-left:auto;font:700 10px var(--f-mono);color:var(--kl-soft)}
.kl-dots{display:flex}
.kl-dots i{width:14px;height:14px;margin-right:-4px;border-radius:50%;box-shadow:0 0 0 2px #fff}
.kl-fontchip{font-size:18px;letter-spacing:0;text-transform:none;justify-content:center}

/* ---------- FAQ ("Get in touch" layout) ---------- */
.kl-faq-sec{background:var(--kl-alt);border-top:1px solid var(--kl-line)}
.kl-faq-wrap{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:80px;max-width:1120px;margin:0 auto;align-items:start}
.kl-faq-head h2{margin-bottom:24px;font:400 96px/1 var(--f-display);letter-spacing:-.025em;text-transform:uppercase}
.kl-faq-head h2 span{color:var(--kl-muted)}
.kl-faq{padding:16px 40px;border-radius:24px;background:#fff;border:1px solid var(--kl-line-2);box-shadow:0 25px 50px -12px rgba(0,0,0,.06)}
.kl-faq details{border-bottom:1px solid var(--kl-line-2)}
.kl-faq details:last-child{border-bottom:0}
.kl-faq summary{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:22px 0;font-size:16px;font-weight:700;letter-spacing:-.01em;text-transform:uppercase;cursor:pointer;list-style:none}
.kl-faq summary::-webkit-details-marker{display:none}
.kl-faq-icon{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:#f3f4f6;flex:none;transition:transform .2s,background .2s}
.kl-faq-icon .kl-svg{width:14px;height:14px}
.kl-faq details[open] .kl-faq-icon{transform:rotate(45deg);background:var(--kl-accent)}
.kl-faq details p{padding:0 48px 22px 0;font-size:15px;line-height:1.7;color:var(--kl-muted)}

/* ---------- Final CTA ---------- */
.kl-cta{padding:112px 16px;background:#0a0a0a;color:#fff;text-align:center}
.kl-cta .kl-tag{margin-bottom:20px}
.kl-landing .kl-cta h2{margin-bottom:40px;font:900 clamp(56px,9vw,128px)/.95 Impact,var(--f-display);letter-spacing:.02em;text-transform:uppercase;color:#fff}
.kl-cta-login{margin-top:28px;font:700 11px var(--f-mono);letter-spacing:.15em;text-transform:uppercase;color:#9ca3af}
.kl-cta-login a{color:#fff;text-decoration:underline;text-underline-offset:3px}

/* ---------- Responsive ---------- */
@media (max-width:1023px){
	.kl-sec{padding:72px 32px}
	.kl-title{font-size:52px}
	.kl-showcase-grid{padding-right:0}
	.kl-showcase-phone{display:none}
	.kl-features{grid-template-columns:repeat(2,minmax(0,1fr))}
	.kl-themes{grid-template-columns:repeat(3,minmax(0,1fr))}
	.kl-faq-wrap{grid-template-columns:minmax(0,1fr);gap:40px}
	.kl-faq-head h2{font-size:72px}
	.kl-themes{grid-template-columns:repeat(4,minmax(0,1fr))}
	.kl-custom-grid{grid-template-columns:minmax(0,1fr);gap:48px}
	.kl-custom-title{font-size:64px}
}
@media (max-width:767px){
	.kl-hero{min-height:calc(92svh - 49px);padding:56px 16px 104px}
	.kl-tag{font-size:10px;letter-spacing:.4em;padding-left:.4em}
	.kl-hero-title{font-size:18vw}
	.kl-hero-title span:last-child{-webkit-text-stroke-width:1.2px}
	.kl-lead{font-size:16px;margin:24px auto}
	.kl-claim-form{flex-direction:column;padding:6px}
	.kl-claim-form .kl-button{width:100%}
	.kl-ticker-group{font-size:12px}
	.kl-sec{padding:56px 20px}
	.kl-title{font-size:40px}
	.kl-title em{-webkit-text-stroke-width:1px}
	.kl-title-row{margin-bottom:32px}
	.kl-site-nav span:first-child,.kl-site-nav span:last-child{display:none}
	.kl-site-nav{justify-content:center}
	.kl-site-music{grid-template-columns:minmax(0,1fr);padding:20px}
	.kl-site-release{max-width:220px}
	.kl-site-hero{padding:28px 0 52px}
	.kl-step{gap:20px;padding:22px 0}
	.kl-step-num{width:auto;font-size:56px}
	.kl-step h3{font-size:24px}
	.kl-step p{font-size:15px}
	.kl-features{grid-template-columns:minmax(0,1fr);gap:16px}
	.kl-feature{padding:24px}
	.kl-themes{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
	.kl-themes .kl-theme:nth-child(n+5):not(.kl-theme-custom){display:none}
	.kl-themes .kl-theme:nth-child(4){display:none}
	.kl-custom-title{font-size:48px}
	.kl-custom-demo{grid-template-columns:minmax(0,1fr);padding:14px}
	.kl-demo-hero strong{font-size:40px}
	.kl-demo-chips{flex-direction:row;flex-wrap:wrap}
	.kl-demo-chips .kl-chip{width:auto}
	.kl-palette code{display:none}
	.kl-faq-head h2{font-size:56px}
	.kl-faq{padding:4px 20px}
	.kl-faq summary{font-size:14px;padding:18px 0}
	.kl-faq details p{padding-right:0}
	.kl-cta{padding:80px 16px}
}
@media (prefers-reduced-motion:reduce){
	.kl-ticker-track{animation:none}
	.kl-feature,.kl-theme-page{transition:none}
}