/* khLink homepage (2026-11-03). Layout, type scale and motion follow the
   khQuant homepage (khsci.com/khQuant/, an Apple-style product page); khLink
   uses a light palette throughout: white, mist and a soft blue tint where
   khQuant alternates in black. Motion only animates transform, opacity and
   filter, and is switched off for prefers-reduced-motion. */

@font-face {
  font-family: "khLink Display";
  src: url("/khlink/assets/fonts/khlink-display-sc.woff2?v=20261103-1") format("woff2");
  font-weight: 600 700;
  font-display: swap;
}

:root {
  --ink: #1d1d1f;
  --ink-2: #6e6e73;
  --ink-3: #86868b;
  --paper: #fff;
  --mist: #f5f5f7;
  --tint: #eef2fd;
  --hair: #d2d2d7;
  --blue: #2453e6;
  --blue-hover: #1d47d1;
  --link: #1f4fd8;
  --violet: #7c5cff;
  --cyan: #12a3d6;
  --good: #1e9e5a;
  --display: "khLink Display", "PingFang SC", -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Microsoft YaHei", sans-serif;
  --text: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC", "Helvetica Neue", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --ease: cubic-bezier(.28, .11, .32, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body.khl { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--text); font-size: 17px; line-height: 1.47; letter-spacing: -.01em; -webkit-font-smoothing: antialiased; }
:where(.khl) :where(h1, h2, h3, p, ul, ol, figure) { margin: 0; padding: 0; }
:where(.khl) :where(ul, ol) { list-style: none; }
:where(.khl) a { color: inherit; text-decoration: none; }
:where(.khl) img { display: block; max-width: 100%; height: auto; }
:where(.khl) button { font: inherit; }
.khl-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.khl-skip { position: absolute; left: 16px; top: -60px; z-index: 100; padding: 8px 14px; border-radius: 10px; background: var(--ink); color: #fff; }
.khl-skip:focus { top: 12px; }
.khl :focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 6px; }

.khl-wrap { width: 100%; max-width: 1024px; margin: 0 auto; padding: 0 22px; }
.khl-wrap--wide { max-width: 1260px; }
.khl-center { text-align: center; }

/* ---- Navigation: translucent white bar, as Apple's ---- */
.khl-nav { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, .72); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid rgba(0, 0, 0, .06); }
.khl-nav-inner { display: flex; align-items: center; gap: 28px; max-width: 1260px; height: 52px; margin: 0 auto; padding: 0 22px; }
.khl-brand { display: inline-flex; align-items: center; gap: 8px; font-family: var(--display); font-size: 19px; font-weight: 700; letter-spacing: -.02em; color: var(--ink); }
.khl-brand b { color: var(--blue); }
.khl-nav-links { display: flex; gap: 24px; margin-left: auto; font-size: 13px; color: var(--ink-2); }
.khl-nav-links a { transition: color .2s var(--ease); }
.khl-nav-links a:hover { color: var(--ink); }
.khl-nav-toggle { display: none; width: 40px; height: 40px; margin-right: -10px; border: 0; background: none; cursor: pointer; }
.khl-nav-toggle span { display: block; width: 18px; height: 1.5px; margin: 5px auto; background: var(--ink); transition: transform .3s var(--ease); }
.khl-nav.is-open .khl-nav-toggle span:first-child { transform: translateY(3.25px) rotate(45deg); }
.khl-nav.is-open .khl-nav-toggle span:last-child { transform: translateY(-3.25px) rotate(-45deg); }

/* ---- Buttons and links ---- */
.khl-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 11px 22px; border: 1px solid transparent; border-radius: 980px; font-size: 17px; line-height: 1.2; white-space: nowrap; cursor: pointer; transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease); }
.khl-btn:active { transform: scale(.98); }
.khl .khl-btn--primary { background: var(--blue); color: #fff; }
.khl .khl-btn--primary:hover { background: var(--blue-hover); }
.khl .khl-btn--secondary { border-color: var(--blue); color: var(--blue); background: transparent; }
.khl .khl-btn--secondary:hover { background: var(--blue); color: #fff; }
.khl .khl-btn--small { min-height: 30px; padding: 5px 14px; font-size: 13px; }
.khl .khl-more { display: inline-flex; align-items: center; gap: 2px; color: var(--link); font-size: 17px; line-height: 1.3; }
.khl .khl-more::after { content: ""; width: 7px; height: 7px; margin-left: 6px; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; transform: rotate(45deg); transition: transform .2s var(--ease); }
.khl .khl-more:hover { text-decoration: underline; text-underline-offset: 3px; }
.khl .khl-more:hover::after { transform: translateX(3px) rotate(45deg); }
.khl-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 18px 28px; }

/* ---- Type ---- */
.khl-eyebrow { display: block; margin-bottom: 14px; font-family: var(--display); font-size: 21px; font-weight: 600; line-height: 1.2; color: var(--ink-2); }
.khl-eyebrow b { color: var(--blue); font-weight: 700; margin-right: 6px; }
.khl-eyebrow--grad { background: linear-gradient(90deg, var(--blue), var(--violet) 55%, var(--cyan), var(--violet), var(--blue)); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; }
.khl-headline { font-family: var(--display); font-size: clamp(38px, 5.4vw, 64px); font-weight: 700; line-height: 1.12; letter-spacing: -.012em; text-wrap: balance; word-break: keep-all; }
.khl-lead { margin-top: 22px; max-width: 680px; font-size: clamp(19px, 1.7vw, 21px); font-weight: 500; line-height: 1.5; color: var(--ink-2); }
.khl-center .khl-lead { margin-left: auto; margin-right: auto; }
.khl-small { margin-top: 26px; font-size: 14px; line-height: 1.6; color: var(--ink-2); text-align: center; }
.khl-small a { color: var(--link); }
.khl-small a:hover { text-decoration: underline; }

/* ---- Sections ---- */
.khl-sec { position: relative; padding: 140px 0; }
.khl-sec[id] { scroll-margin-top: 52px; }
.khl-tone-mist { background: var(--mist); }
.khl-tone-tint { background: linear-gradient(180deg, var(--tint), #f6f8fe); }
.khl-intro { margin-bottom: 72px; }
.khl-chapter .khl-intro { margin-bottom: 64px; }

/* ---- Hero: light, with a slow aurora and a pointer spotlight ---- */
.khl-hero { position: relative; padding: 96px 0 56px; text-align: center; overflow: hidden; background: linear-gradient(180deg, #fbfcff 0%, #fff 60%); }
.khl-aurora { position: absolute; left: -15%; right: -15%; top: 18%; height: 760px; pointer-events: none; }
.khl-aurora i { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .55; }
.khl-aurora i:nth-child(1) { left: 14%; top: 10%; width: 46%; height: 70%; background: radial-gradient(closest-side, rgba(36, 83, 230, .35), transparent); }
.khl-aurora i:nth-child(2) { right: 12%; top: 0; width: 40%; height: 66%; background: radial-gradient(closest-side, rgba(124, 92, 255, .3), transparent); }
.khl-aurora i:nth-child(3) { left: 38%; top: 46%; width: 34%; height: 54%; background: radial-gradient(closest-side, rgba(18, 163, 214, .26), transparent); }
.khl-hero::after { content: ""; position: absolute; inset: 0; background: radial-gradient(560px circle at var(--sx, 50%) var(--sy, 30%), rgba(36, 83, 230, .07), transparent 60%); opacity: var(--so, 0); transition: opacity .5s var(--ease); pointer-events: none; }
.khl-hero-copy { position: relative; z-index: 1; transform: translate3d(0, calc(var(--hp, 0) * -70px), 0); opacity: calc(1 - var(--hp, 0) * 1.15); }
.khl-hero .khl-eyebrow { margin-bottom: 18px; }
.khl-hero h1 { font-family: var(--display); font-size: clamp(44px, 7vw, 88px); font-weight: 700; line-height: 1.06; letter-spacing: -.015em; text-wrap: balance; word-break: keep-all; }
.khl-hero-sub { margin: 30px auto 0; max-width: 780px; font-family: var(--display); font-size: clamp(21px, 2.4vw, 30px); font-weight: 600; line-height: 1.32; color: var(--ink-3); text-wrap: balance; word-break: keep-all; }
.khl-hero-sub strong { display: inline-block; color: var(--ink); font-weight: 600; }
.khl-hero .khl-cta { margin-top: 38px; }
.khl-hero-notice { display: inline-flex; align-items: center; gap: 8px; margin-top: 26px; padding: 8px 16px; border-radius: 980px; border: 1px solid rgba(0, 0, 0, .08); background: rgba(255, 255, 255, .7); color: var(--ink-2); font-size: 15px; line-height: 1.4; }
.khl-hero-notice svg { flex: none; width: 18px; height: 18px; color: var(--good); }
.khl-hero-stage { position: relative; z-index: 1; width: min(1100px, calc(100% - 44px)); margin: 72px auto 0; padding-right: 7%; transform: scale(var(--hs, .9)); transform-origin: 50% 0; will-change: transform; }
.khl-hero-cap { position: relative; z-index: 1; margin-top: 18px; font-size: 13px; color: var(--ink-3); }

/* Window and phone frames */
.khl-win { overflow: hidden; border-radius: 16px; background: #fff; box-shadow: 0 40px 100px -40px rgba(20, 40, 110, .35), 0 0 0 1px rgba(0, 0, 0, .06); }
.khl-win-bar { display: flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; background: #f2f3f5; border-bottom: 1px solid rgba(0, 0, 0, .05); }
.khl-win-bar i { display: block; flex: none; width: 10px; height: 10px; border-radius: 50%; background: #ff5f57; }
.khl-win-bar i:nth-child(2) { background: #febc2e; }
.khl-win-bar i:nth-child(3) { background: #28c840; }
.khl-win-bar em { margin-left: 10px; font-style: normal; font-size: 12px; color: var(--ink-3); }
.khl-zoom { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.khl-phone { position: relative; width: 100%; max-width: 280px; }
.khl-phone .khl-zoom { overflow: hidden; border: 9px solid #1d1d1f; border-radius: 42px; background: #1d1d1f; box-shadow: 0 30px 70px -30px rgba(20, 40, 110, .45); }
.khl-phone img { border-radius: 33px; }
.khl-phone figcaption { margin-top: 14px; font-size: 14px; color: var(--ink-2); text-align: center; }
.khl-hero-phone { position: absolute; right: 0; bottom: -40px; width: 24%; max-width: 250px; }
.khl-hero-phone .khl-zoom { border-width: 7px; border-radius: 34px; }
.khl-hero-phone img { border-radius: 27px; }

/* ---- Bento ---- */
.khl-bento { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 20px; }
.khl-tile { position: relative; display: flex; flex-direction: column; min-height: 300px; padding: 40px; border-radius: 28px; background: var(--paper); overflow: hidden; }
.khl-tile--s2 { grid-column: span 2; }
.khl-tile--s4 { grid-column: span 4; }
.khl-tile-label { font-size: 14px; font-weight: 600; color: var(--ink-2); }
.khl-tile h3 { margin-top: 10px; font-family: var(--display); font-size: clamp(26px, 2.6vw, 34px); font-weight: 700; line-height: 1.18; letter-spacing: -.01em; text-wrap: balance; word-break: keep-all; }
.khl-tile p { margin-top: 12px; font-size: 17px; line-height: 1.47; color: var(--ink-2); }
.khl-tile .khl-more { align-self: flex-start; margin-top: auto; padding-top: 22px; }
.khl-tile-icon { position: absolute; right: 34px; top: 34px; width: 48px; height: 48px; color: var(--blue); opacity: .9; }
.khl-tile:has(.khl-tile-icon) h3 { padding-right: 56px; }
.khl-tile--shot { padding-right: 46%; }
.khl-tile-shot { position: absolute; right: 7%; top: 44px; width: 31%; border: 7px solid #1d1d1f; border-radius: 30px; box-shadow: 0 24px 60px -24px rgba(20, 40, 110, .45); transition: transform .8s var(--ease-out); }
.khl-tile--shot:hover .khl-tile-shot { transform: translateY(-8px); }
.khl-big-number { margin-top: auto; font-family: var(--display); font-size: clamp(58px, 6.4vw, 84px); font-weight: 700; line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; background: linear-gradient(135deg, var(--blue) 0%, var(--violet) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.khl-tile--agents { background: linear-gradient(var(--paper), var(--paper)) padding-box, conic-gradient(from var(--khl-ang, 0deg), var(--blue), var(--violet), var(--cyan), var(--blue)) border-box; border: 2px solid transparent; }
.khl-tile--agents h3 { background: linear-gradient(90deg, var(--blue), var(--violet) 60%, var(--cyan)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.khl-logos { display: flex; flex-wrap: wrap; gap: 14px 22px; margin-top: 26px; }
.khl-logos li { display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-2); }
.khl-logos img { width: 44px; height: 44px; border-radius: 11px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .06); }
.khl-tile::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(36, 83, 230, .08), transparent 60%); opacity: 0; transition: opacity .35s var(--ease); pointer-events: none; }
.khl-tile.is-hover::after { opacity: 1; }
.khl-dots { display: none; }

/* ---- Why / security items with lines drawn from the left ---- */
.khl-why { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 36px; }
.khl-why-item { position: relative; padding-top: 22px; }
.khl-why-item::before, .khl-spec::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--hair); transform-origin: 0 50%; }
.khl-why-item em { display: block; font-style: normal; font-family: var(--display); font-size: 15px; font-weight: 600; color: var(--blue); }
.khl-why-item h3 { margin-top: 10px; font-family: var(--display); font-size: 21px; font-weight: 700; line-height: 1.3; }
.khl-why-item p { margin-top: 8px; font-size: 15px; line-height: 1.55; color: var(--ink-2); }
.khl .khl-why-link { margin-top: 12px; font-size: 15px; }
.khl-scrub .khl-ch { opacity: .18; transition: opacity .3s linear; }
.khl-scrub .khl-ch.is-lit { opacity: 1; }

/* ---- Chapters: showcase stage and spec grid ---- */
.khl-showcase { position: relative; display: grid; place-items: center; padding: 64px 44px 56px; border-radius: 32px; background: radial-gradient(90% 120% at 50% 0%, #fff 0%, #eef0f4 100%); overflow: hidden; }
.khl-tone-mist .khl-showcase { background: radial-gradient(90% 120% at 50% 0%, #fff 0%, #e8eaef 100%); }
.khl-tone-tint .khl-showcase { background: radial-gradient(90% 120% at 50% 0%, #fff 0%, #e4e9fb 100%); }
.khl-showcase::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 45%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .7), transparent); transform: translateX(-120%); pointer-events: none; }
.khl-phones { display: flex; justify-content: center; align-items: flex-start; gap: clamp(24px, 6vw, 72px); width: 100%; transform: scale(var(--sz, .94)); transform-origin: 50% 70%; will-change: transform; }
.khl-phones .khl-phone { flex: 0 1 280px; }
.khl-phone--lift { margin-top: 48px; }
.khl-specs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 44px 32px; margin-top: 80px; }
.khl-spec { position: relative; padding-top: 18px; }
.khl-spec h3 { font-size: 17px; font-weight: 600; line-height: 1.35; }
.khl-spec p { margin-top: 6px; font-size: 14px; line-height: 1.55; color: var(--ink-2); }

/* ---- Agent orbit ---- */
.khl-orbit { position: relative; width: min(440px, 86vw); aspect-ratio: 1; margin: 0 auto 72px; }
.khl-orbit-ring { position: absolute; inset: 9%; border: 1px dashed rgba(36, 83, 230, .3); border-radius: 50%; }
.khl-orbit-ring::after { content: ""; position: absolute; inset: 18%; border: 1px solid rgba(124, 92, 255, .16); border-radius: 50%; }
.khl-orbit-core { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; gap: 6px; width: 132px; height: 132px; margin: -66px 0 0 -66px; border-radius: 34px; background: #fff; box-shadow: 0 24px 60px -24px rgba(36, 83, 230, .45), 0 0 0 1px rgba(0, 0, 0, .05); font-family: var(--display); font-weight: 700; color: var(--ink); }
.khl-orbit-core img { width: 56px; height: 56px; }
.khl-orbit-icon { position: absolute; left: 50%; top: 50%; width: 58px; height: 58px; margin: -29px 0 0 -29px; border-radius: 15px; background: #fff; box-shadow: 0 14px 30px -14px rgba(20, 40, 110, .4), 0 0 0 1px rgba(0, 0, 0, .05); transform: rotate(var(--a)) translateY(calc(min(440px, 86vw) * -.41)) rotate(calc(-1 * var(--a))); }

/* ---- Tables, Apple "compare" style ---- */
.khl-table-wrap { overflow-x: auto; }
.khl-compare { width: 100%; border-collapse: collapse; }
.khl-compare th, .khl-compare td { padding: 16px 12px 16px 0; border-bottom: 1px solid var(--hair); font-size: 15px; line-height: 1.45; text-align: left; vertical-align: middle; }
.khl-compare thead th { font-family: var(--display); font-size: 19px; font-weight: 700; border-bottom-color: var(--ink); }
.khl-compare tbody th { font-weight: 600; }
.khl-compare .khl-c { text-align: center; }
.khl-compare small { color: var(--ink-2); font-size: 13px; }
.khl-yes { display: inline-block; width: 22px; height: 22px; border-radius: 50%; background: var(--ink); position: relative; }
.khl-yes::after { content: ""; position: absolute; left: 7px; top: 5px; width: 6px; height: 10px; border-right: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(45deg); }
.khl-agents-table th { width: 32%; }
#agents .khl-table-wrap { max-width: 880px; margin: 0 auto; }

/* ---- Download ---- */
.khl-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-bottom: 48px; }
.khl-steps li { display: flex; gap: 14px; padding: 24px; border-radius: 22px; background: var(--mist); }
.khl-steps li > span { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--blue); color: #fff; font-family: var(--display); font-weight: 700; }
.khl-steps strong { font-size: 17px; }
.khl-steps p { margin-top: 4px; font-size: 14px; line-height: 1.55; color: var(--ink-2); }
.khl-release-state { margin-bottom: 18px; font-size: 14px; color: var(--ink-2); text-align: center; }
.khl-release-state.error { color: #b42318; }
.khl-release-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
.khl-release-grid .release-card { padding: 32px; border-radius: 28px; background: var(--paper); box-shadow: 0 0 0 1px rgba(0, 0, 0, .07), 0 20px 50px -30px rgba(20, 40, 110, .35); }
.khl-release-grid h3 { font-family: var(--display); font-size: 24px; font-weight: 700; }
.khl-release-grid .release-meta { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 18px 0 22px; font-size: 14px; color: var(--ink-2); }
.khl-release-grid .release-meta strong { color: var(--ink); font-weight: 600; }
.khl-release-grid .hash { font-family: ui-monospace, Consolas, monospace; font-size: 12px; word-break: break-all; }
.khl-release-grid .button { display: inline-flex; min-height: 44px; align-items: center; padding: 11px 22px; border-radius: 980px; background: var(--blue); color: #fff; }
.khl-release-grid .button:hover { background: var(--blue-hover); }

/* ---- Free and open source: three ways to connect ---- */
.khl-ways { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.khl-way { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 36px 32px; border-radius: 28px; background: var(--mist); }
.khl-way--paid { background: var(--tint); }
.khl-way-head { display: flex; align-items: center; gap: 12px; }
.khl-way-no { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--ink); color: #fff; font-family: var(--display); font-size: 19px; font-weight: 700; }
.khl-way-tag { padding: 4px 12px; border-radius: 999px; background: rgba(30, 158, 90, .12); color: var(--good); font-size: 14px; font-weight: 600; }
.khl-way--paid .khl-way-tag { background: rgba(36, 83, 230, .12); color: var(--blue); }
.khl-way h3 { margin-top: 6px; font-family: var(--display); font-size: clamp(24px, 2.4vw, 30px); font-weight: 700; line-height: 1.2; }
.khl-way p { color: var(--ink); font-size: 16px; line-height: 1.55; }
.khl-way .khl-way-note { color: var(--ink-2); font-size: 14px; }
.khl-way .khl-more { margin-top: auto; padding-top: 8px; }
.khl-connect-table td { font-size: 14px; }

/* ---- Pricing ---- */
.khl-plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.khl-plan { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 36px; border-radius: 28px; background: var(--paper); }
.khl-plan--featured { background: linear-gradient(var(--paper), var(--paper)) padding-box, linear-gradient(135deg, var(--blue), var(--violet)) border-box; border: 2px solid transparent; }
.khl-plan h3 { font-family: var(--display); font-size: 21px; font-weight: 700; }
.khl-plan-price { font-family: var(--display); font-size: 56px; font-weight: 700; line-height: 1; letter-spacing: -.02em; }
.khl-plan-price span { font-size: 24px; margin-right: 2px; }
.khl-plan p { color: var(--ink-2); font-size: 15px; }
.khl-plan .khl-btn { margin-top: 14px; }
.khl-membership { display: flex; flex-wrap: wrap; gap: 6px 14px; justify-content: center; margin-top: 28px; font-size: 15px; color: var(--ink-2); }
.khl-membership strong { color: var(--ink); }

/* ---- FAQ, final call, footer ---- */
.khl-faq details { border-bottom: 1px solid var(--hair); }
.khl-faq summary { position: relative; padding: 22px 40px 22px 0; font-family: var(--display); font-size: 21px; font-weight: 600; cursor: pointer; list-style: none; }
.khl-faq summary::-webkit-details-marker { display: none; }
.khl-faq summary::after { content: ""; position: absolute; right: 8px; top: 50%; width: 9px; height: 9px; margin-top: -7px; border-right: 1.5px solid var(--ink-2); border-bottom: 1.5px solid var(--ink-2); transform: rotate(45deg); transition: transform .3s var(--ease); }
.khl-faq details[open] summary::after { transform: rotate(225deg); margin-top: -2px; }
.khl-faq p { padding: 0 0 24px; font-size: 17px; line-height: 1.6; color: var(--ink-2); }
.khl-final { padding: 120px 0 140px; background: radial-gradient(70% 90% at 50% 100%, var(--tint), #fff 70%); }
.khl-final .khl-cta { margin-top: 34px; }
.khl-foot { background: var(--mist); color: var(--ink-2); font-size: 12px; }
.khl-foot .khl-wrap { padding-top: 34px; padding-bottom: 34px; max-width: 1260px; }
.khl-foot-top { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 32px; padding-bottom: 18px; border-bottom: 1px solid var(--hair); }
.khl-foot .khl-brand { font-size: 16px; }
.khl-foot-links { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-left: auto; }
.khl-foot-links a:hover { color: var(--ink); text-decoration: underline; }
.khl-foot-note { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; padding-top: 16px; }

/* ---- Screenshot lightbox ---- */
.khl-lightbox { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; gap: 12px; padding: 48px 20px; background: rgba(250, 250, 252, .92); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); opacity: 0; visibility: hidden; transition: opacity .3s var(--ease), visibility .3s; }
.khl-lightbox.is-open { opacity: 1; visibility: visible; }
.khl-lightbox img { max-width: min(1200px, 100%); max-height: calc(100vh - 140px); width: auto; border-radius: 14px; box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .35); }
.khl-lightbox p { font-size: 14px; color: var(--ink-2); text-align: center; }
.khl-lightbox-close { position: absolute; right: 18px; top: 14px; width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(0, 0, 0, .06); font-size: 26px; line-height: 1; color: var(--ink); cursor: pointer; }

/* ---- Motion (scripts add .khl-js; nothing is hidden without them) ---- */
@property --khl-ang { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes khlRise { to { opacity: 1; transform: none; } }
@keyframes khlRiseBlur { to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes khlFade { to { opacity: 1; } }
@keyframes khlShimmer { to { background-position: -200% 0; } }
@keyframes khlAurora { 0% { transform: translate3d(-4%, 0, 0) scale(1) rotate(0deg); } 50% { transform: translate3d(3%, -3%, 0) scale(1.08) rotate(3deg); } 100% { transform: translate3d(-2%, 2%, 0) scale(1.03) rotate(-2deg); } }
@keyframes khlGlare { to { transform: translateX(260%); } }
@keyframes khlSpin { to { --khl-ang: 360deg; } }
@keyframes khlBob { 50% { translate: 0 -7px; } }
@keyframes khlRing { to { transform: rotate(360deg); } }
@keyframes khlLine { from { transform: scaleX(0); } to { transform: scaleX(1); } }

@media (prefers-reduced-motion: no-preference) {
  .khl-js .khl-hero-copy > * { opacity: 0; transform: translate3d(0, 24px, 0); animation: khlRise 1.1s var(--ease-out) forwards; }
  .khl-js .khl-hero-copy > h1 { filter: blur(14px); animation-name: khlRiseBlur; animation-duration: 1.4s; }
  .khl-js .khl-hero-copy > *:nth-child(2) { animation-delay: .08s; }
  .khl-js .khl-hero-copy > *:nth-child(3) { animation-delay: .16s; }
  .khl-js .khl-hero-copy > *:nth-child(4) { animation-delay: .26s; }
  .khl-js .khl-hero-copy > *:nth-child(5) { animation-delay: .34s; }
  .khl-js .khl-hero-copy > .khl-eyebrow--grad { animation: khlRise 1.1s var(--ease-out) forwards, khlShimmer 6s linear infinite; }
  .khl-js .khl-hero-stage { opacity: 0; animation: khlFade 1.4s var(--ease-out) .35s forwards; }
  .khl-aurora i { animation: khlAurora 18s ease-in-out infinite alternate; }
  .khl-aurora i:nth-child(2) { animation-duration: 22s; animation-delay: -6s; }
  .khl-aurora i:nth-child(3) { animation-duration: 26s; animation-delay: -12s; }

  .khl-js [data-reveal] { opacity: 0; transform: translate3d(0, 32px, 0); transition: opacity 1s var(--ease-out), transform 1s var(--ease-out); transition-delay: var(--d, 0s); }
  .khl-js [data-reveal].is-in { opacity: 1; transform: none; }
  .khl-js .khl-intro[data-reveal] { filter: blur(8px); transition: opacity 1.1s var(--ease-out), transform 1.1s var(--ease-out), filter 1.1s var(--ease-out); }
  .khl-js .khl-intro[data-reveal].is-in { filter: blur(0); }
  .khl-line { display: block; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; }
  .khl-js .khl-line-in { display: block; transform: translate3d(0, 105%, 0); transition: transform 1s var(--ease-out); transition-delay: calc(var(--li, 0) * .1s + .05s); }
  .khl-js .is-in .khl-line-in { transform: none; }
  .khl-js .khl-why-item::before, .khl-js .khl-spec::before { transform: scaleX(0); transition: transform 1.2s var(--ease-out); transition-delay: inherit; }
  .khl-js .khl-why-item.is-in::before, .khl-js .khl-spec.is-in::before { transform: scaleX(1); }
  .khl-js .khl-showcase.is-lit::after { animation: khlGlare 1.6s var(--ease) .2s forwards; }
  .khl-js .khl-tile.is-ready { transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out), opacity 1s var(--ease-out); transition-delay: 0s; }
  .khl-js .khl-bento .khl-tile.is-hover { transform: perspective(1100px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-4px); box-shadow: 0 34px 70px -34px rgba(20, 40, 110, .3); }
  .khl-tile--agents { animation: khlSpin 8s linear infinite; }
  .khl-js .khl-logos li { opacity: 0; transform: translate3d(0, 12px, 0); transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); }
  .khl-js .khl-tile--agents.is-in .khl-logos li { opacity: 1; transform: none; }
  .khl-js .khl-tile--agents.is-in .khl-logos li:nth-child(2) { transition-delay: .08s; }
  .khl-js .khl-tile--agents.is-in .khl-logos li:nth-child(3) { transition-delay: .16s; }
  .khl-js .khl-tile--agents.is-in .khl-logos li:nth-child(4) { transition-delay: .24s; }
  .khl-js .khl-tile--agents.is-in .khl-logos li:nth-child(5) { transition-delay: .32s; }
  .khl-js .khl-tile--agents.is-in .khl-logos li:nth-child(6) { transition-delay: .40s; }
  .khl-orbit-ring { animation: khlRing 60s linear infinite; }
  .khl-orbit-icon { animation: khlBob 3.6s ease-in-out infinite; }
  .khl-orbit-icon:nth-of-type(2n) { animation-delay: -1.2s; }
  .khl-orbit-icon:nth-of-type(3n) { animation-delay: -2.4s; }
}

/* ---- Tablet ---- */
@media (max-width: 1068px) {
  .khl-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .khl-tile--s2, .khl-tile--s4 { grid-column: span 1; }
  .khl-tile--shot, .khl-tile--agents { grid-column: span 2; }
  .khl-specs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .khl-why { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px; }
}
@media (max-width: 834px) {
  .khl-nav-links { position: absolute; left: 0; right: 0; top: 52px; display: none; flex-direction: column; gap: 0; padding: 8px 22px 18px; background: rgba(255, 255, 255, .96); border-bottom: 1px solid rgba(0, 0, 0, .06); font-size: 17px; }
  .khl-nav-links a { padding: 12px 0; border-bottom: 1px solid rgba(0, 0, 0, .05); }
  .khl-nav.is-open .khl-nav-links { display: flex; }
  .khl-nav-inner > .khl-btn { margin-left: auto; }
  .khl-nav-toggle { display: block; }
  .khl-plans, .khl-steps, .khl-ways { grid-template-columns: 1fr; }
}

/* ---- Phone ---- */
@media (max-width: 734px) {
  body.khl { font-size: 16px; }
  .khl-sec { padding: 72px 0; }
  .khl-intro { margin-bottom: 44px; }
  .khl-hero { padding: 56px 0 40px; }
  /* Sized so the longest Chinese line still fits a 320px screen. */
  .khl-hero h1 { font-size: 8.2vw; }
  .khl-headline { font-size: clamp(28px, 9.2vw, 38px); }
  .khl-tile h3 { font-size: clamp(21px, 6.4vw, 26px); word-break: normal; }
  .khl-hero-stage { margin-top: 48px; padding-right: 0; }
  .khl-hero-phone { width: 30%; bottom: -24px; right: -2%; }
  .khl-hero-notice { font-size: 13px; }
  .khl-eyebrow { font-size: 17px; }
  /* Highlights become one horizontally scrolling row with page dots. */
  .khl-bento { display: flex; gap: 14px; margin: 0 -22px; padding: 4px 22px 10px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .khl-bento::-webkit-scrollbar { display: none; }
  .khl-tile { flex: 0 0 82%; min-height: 360px; padding: 24px; scroll-snap-align: start; }
  .khl-tile--shot { padding-right: 24px; padding-bottom: 210px; }
  .khl-tile-shot { top: auto; bottom: -40px; right: 50%; width: 46%; transform: translateX(50%); }
  .khl-tile--shot:hover .khl-tile-shot { transform: translateX(50%); }
  .khl-dots { display: flex; justify-content: center; gap: 8px; margin-top: 16px; }
  .khl-dots button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%; background: var(--hair); cursor: pointer; }
  .khl-dots button.is-active { background: var(--ink); }
  .khl-why { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 18px; }
  .khl-why-item h3 { font-size: 18px; }
  .khl-showcase { padding: 36px 16px 32px; border-radius: 24px; }
  .khl-phones { gap: 14px; }
  .khl-phone .khl-zoom { border-width: 6px; border-radius: 28px; }
  .khl-phone img { border-radius: 22px; }
  .khl-phone--lift { margin-top: 28px; }
  .khl-specs { gap: 28px 18px; margin-top: 48px; }
  .khl-faq summary { font-size: 18px; }
  .khl-final { padding: 80px 0 96px; }
  .khl-foot-links { margin-left: 0; }
}

/* ---- Themes: four phones, list or conversation ---- */
.khl-theme-switch { display: inline-flex; gap: 4px; margin-top: 28px; padding: 4px; border-radius: 999px; background: rgba(255, 255, 255, .7); box-shadow: inset 0 0 0 1px rgba(20, 30, 60, .08); }
.khl-theme-switch button { min-width: 96px; padding: 9px 18px; border: 0; border-radius: 999px; background: transparent; color: var(--ink-2); font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; }
.khl-theme-switch button.is-on { background: #1d1d1f; color: #fff; }
.khl-theme-switch button:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.khl-themes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(18px, 3vw, 40px); margin-top: 56px; justify-items: center; }
.khl-theme { max-width: 260px; }
.khl-theme .khl-zoom { border-width: 7px; border-radius: 34px; }
.khl-theme img { border-radius: 27px; transition: opacity .2s ease; }
.khl-theme figcaption b { display: block; font-size: 16px; color: var(--ink); }
.khl-theme figcaption span { display: block; margin-top: 2px; font-size: 13px; }
#themes .khl-hero-cap { margin-top: 28px; text-align: center; }
@media (max-width: 980px) { .khl-themes { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px; } }
@media (max-width: 420px) { .khl-themes { gap: 14px; row-gap: 28px; } .khl-theme .khl-zoom { border-width: 5px; border-radius: 24px; } .khl-theme img { border-radius: 19px; } }

/* Connection table as cards on phones (built by khlink-home.js). */
.khl-connect-cards { display: none; }
@media (max-width: 640px) {
  .khl-table-wrap.khl-has-cards { display: none; }
  .khl-connect-cards { display: grid; gap: 14px; }
  .khl-connect-card { border: 1px solid var(--hair); border-radius: 16px; padding: 16px 18px; background: rgba(255,255,255,.55); }
  .khl-connect-card h3 { font-family: var(--display); font-size: 19px; font-weight: 700; margin: 0 0 8px; }
  .khl-connect-card dl { display: grid; grid-template-columns: 7.5em 1fr; gap: 8px 12px; margin: 0; font-size: 15px; line-height: 1.45; }
  .khl-connect-card dt { color: var(--ink-2); }
  .khl-connect-card dd { margin: 0; }
  .khl-connect-card small { color: var(--ink-2); font-size: 13px; }
}