:root {
  --ck-bg: #050506;
  --ck-surface: #0d0e12;
  --ck-raised: #151720;
  --ck-ink: #f7f8fb;
  --ck-muted: #b7bac5;
  --ck-faint: #7f8492;
  --ck-line: rgba(255, 255, 255, .11);
  --ck-blue: #2aa9ec;
  --ck-blue-deep: #092238;
  --ck-orange: #ff9d2e;
  --ck-purple: #9b6cff;
  --ck-pink: #ef6d91;
  --ck-radius: 16px;
}

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-height) + 20px); }
body { background: var(--ck-bg); }
.ck-page { padding-top: var(--header-height); background: var(--ck-bg); color: var(--ck-ink); overflow: hidden; }
.ck-page h1, .ck-page h2, .ck-page h3 { color: inherit; text-wrap: balance; word-spacing: .055em; }
.ck-page p { text-wrap: pretty; }
.ck-shell { width: min(100% - 64px, 1240px); margin-inline: auto; }
.ck-page a:focus-visible, .ck-page summary:focus-visible { outline: 3px solid var(--ck-orange); outline-offset: 5px; }

.ck-nav-download { background: var(--ck-blue) !important; border-color: var(--ck-blue) !important; color: #061119 !important; }

.ck-hero { min-height: min(900px, calc(100svh - var(--header-height))); display: flex; align-items: center; padding: clamp(6rem, 9vw, 8.5rem) 0; position: relative; }
.ck-hero-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(480px, 1.1fr); gap: clamp(4rem, 7vw, 7rem); align-items: center; }
.ck-brandline { margin: 0 0 1.5rem; display: flex; align-items: center; gap: 12px; color: var(--ck-blue); font-weight: 700; }
.ck-brandline img { width: 42px; height: 42px; border-radius: 11px; }
.ck-hero h1 { max-width: 620px; margin: 0; font-size: clamp(3.15rem, 4.6vw, 4.6rem); font-weight: 500; letter-spacing: -.02em; line-height: 1; }
.ck-hero-lead { max-width: 610px; margin: 1.75rem 0 0; color: var(--ck-muted); font-size: clamp(1.08rem, 1.5vw, 1.27rem); line-height: 1.7; }
.ck-actions { margin-top: 2rem; display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.ck-store-button { min-height: 52px; padding: 0 22px; border-radius: 999px; display: inline-flex; align-items: center; gap: 10px; background: var(--ck-blue); color: #061119; font-weight: 750; text-decoration: none; }
.ck-store-button:hover { background: #65c7f7; color: #061119; }
.ck-text-link { color: var(--ck-ink); font-weight: 650; text-decoration: none; }
.ck-text-link:hover { text-decoration: underline; text-underline-offset: 5px; }
.ck-facts { margin: 1.1rem 0 0; color: var(--ck-faint); font-size: .82rem; line-height: 1.6; }

.ck-hero-art { min-height: 640px; position: relative; display: grid; place-items: center; }
.ck-hero-art::after { display: none; }
.ck-phone { position: absolute; overflow: hidden; border: clamp(4px, .55vw, 7px) solid #24262b; border-radius: 11.5% / 5.4%; background: #111; box-shadow: 0 8px 0 rgba(0,0,0,.32); aspect-ratio: 1170 / 2532; }
.ck-phone img { width: 100%; height: 100%; display: block; object-fit: cover; }
.ck-hero-art .ck-phone--hero { position: relative; z-index: 1; right: auto; bottom: auto; width: min(66%, 370px); aspect-ratio: 1170 / 2532; transform: rotate(2deg); }

.ck-section { padding: clamp(7rem, 11vw, 10.5rem) 0; border-top: 1px solid var(--ck-line); }
.ck-section-head { max-width: 760px; margin-bottom: clamp(4.5rem, 8vw, 7rem); }
.ck-chapter { margin: 0 0 1.1rem; color: var(--ck-blue); font-family: var(--font-mono); font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.ck-heading { max-width: 760px; margin: 0; font-size: clamp(2.4rem, 3.7vw, 3.65rem); font-weight: 500; letter-spacing: -.015em; line-height: 1.05; }
.ck-intro { max-width: 680px; margin: 1.4rem 0 0; color: var(--ck-muted); font-size: 1.08rem; line-height: 1.75; }

.ck-sources { background: #090a0d; }
.ck-sources-grid { display: grid; grid-template-columns: minmax(0,.82fr) minmax(420px,1.18fr); gap: clamp(4rem, 8vw, 8rem); align-items: center; }
.ck-sources .ck-section-copy { max-width: 820px; }
.ck-format-list { margin: 2.2rem 0 0; display: flex; flex-wrap: wrap; gap: 10px; }
.ck-format { padding: 10px 14px; border: 1px solid var(--ck-line); border-radius: 999px; color: #d8dbe3; font-size: .86rem; }
.ck-format:nth-child(2n) { border-color: rgba(155,108,255,.4); color: #d7c7ff; }
.ck-format:nth-child(3n) { border-color: rgba(255,157,46,.42); color: #ffd092; }
.ck-source-stage { width: min(100%, 760px); min-height: 620px; margin-inline: auto; position: relative; overflow: visible; }
.ck-source-stage::before { content: "PDF   EPUB   MP3   MP4"; position: absolute; top: 8%; left: -2%; color: rgba(255,255,255,.055); font-family: var(--font-mono); font-size: clamp(2.6rem, 6vw, 5.8rem); white-space: nowrap; }
.ck-source-stage .ck-phone:first-child { left: 10%; top: 1%; width: min(43%, 285px); transform: rotate(-3deg); }
.ck-source-stage .ck-phone:last-child { right: 10%; top: 10%; width: min(39%, 255px); transform: rotate(4deg); }

.ck-listening { position: relative; background: #160f0a; }
.ck-listening::after { content: ""; position: absolute; right: 0; top: 0; width: 40%; height: 100%; background: radial-gradient(circle at 60% 45%, rgba(255,157,46,.12), transparent 60%); pointer-events: none; }
.ck-listening-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(260px,.56fr); gap: clamp(3rem, 9vw, 9rem); align-items: center; }
.ck-listening .ck-section-copy { max-width: 720px; }
.ck-listening .ck-chapter { color: var(--ck-orange); }
.ck-feature-lines { margin-top: 2rem; border-top: 1px solid var(--ck-line); }
.ck-feature-line { padding: 1rem 0; border-bottom: 1px solid var(--ck-line); display: flex; justify-content: space-between; gap: 1rem; color: var(--ck-muted); }
.ck-feature-line strong { color: var(--ck-ink); font-weight: 650; }
.ck-listening-stage { min-height: 610px; display: grid; place-items: center; }
.ck-listening-stage .ck-phone { position: relative; width: min(78%, 330px); aspect-ratio: 1170 / 2532; transform: rotate(3deg); }

.ck-offline { padding: clamp(7rem, 11vw, 10rem) 0; background: var(--ck-blue); color: #07141c; }
.ck-offline-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, .6fr); gap: clamp(3rem, 9vw, 9rem); align-items: end; }
.ck-offline h2 { max-width: 720px; margin: 0; font-size: clamp(2.8rem, 4.5vw, 4.35rem); font-weight: 500; letter-spacing: -.02em; line-height: 1; }
.ck-offline-copy p { margin: 0; color: #0b2c3f; font-size: 1.08rem; line-height: 1.7; }
.ck-offline-copy p + p { margin-top: 1rem; }
.ck-offline-note { color: #15394b !important; font-size: .88rem !important; }

.ck-library { background: #07080a; }
.ck-library-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(420px, 1.1fr); gap: clamp(4rem, 8vw, 8rem); align-items: center; }
.ck-library .ck-section-copy { max-width: 620px; }
.ck-library-stage { width: min(100%, 580px); min-height: 660px; margin-inline: auto; position: relative; overflow: visible; }
.ck-library-stage .ck-phone { left: 59%; bottom: 0; width: min(54%, 315px); transform: translateX(-50%); z-index: 2; }
.ck-library-stage .ck-catalog { position: absolute; width: min(48%, 278px); border-radius: 11.5% / 5.4%; border: clamp(4px, .5vw, 6px) solid #24262b; box-shadow: 0 8px 0 rgba(0,0,0,.24); z-index: 1; }
.ck-library-stage .ck-catalog--left { left: 2%; top: 7%; transform: rotate(-4deg); }
.ck-small-features { margin-top: 2rem; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1px; background: var(--ck-line); border: 1px solid var(--ck-line); }
.ck-small-feature { padding: 1rem; background: var(--ck-bg); }
.ck-small-feature strong { display: block; margin-bottom: 4px; }
.ck-small-feature span { color: var(--ck-muted); font-size: .88rem; line-height: 1.5; }

.ck-plans { background: #0a0b0f; }
.ck-plan-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1px; background: var(--ck-line); border: 1px solid var(--ck-line); }
.ck-plan { padding: clamp(2rem, 5vw, 4rem); background: #0a0b0f; }
.ck-plan h3 { margin: 0; font-size: clamp(1.8rem, 3vw, 2.6rem); }
.ck-plan > p { margin: .9rem 0 0; color: var(--ck-muted); line-height: 1.65; }
.ck-plan ul { margin: 1.8rem 0 0; padding: 0; list-style: none; }
.ck-plan li { padding: .72rem 0; border-top: 1px solid var(--ck-line); color: #d9dbe2; }
.ck-plan-note { margin: 1.5rem 0 0; color: var(--ck-faint); font-size: .83rem; }

.ck-faq-layout { display: grid; grid-template-columns: minmax(240px,.65fr) minmax(0,1.35fr); gap: clamp(3rem, 9vw, 9rem); }
.ck-faq { border-top: 1px solid var(--ck-line); }
.ck-faq details { border-bottom: 1px solid var(--ck-line); }
.ck-faq summary { position: relative; padding: 1.45rem 3rem 1.45rem 0; list-style: none; cursor: pointer; font-weight: 700; }
.ck-faq summary::-webkit-details-marker { display: none; }
.ck-faq summary::after { content: "+"; position: absolute; right: 4px; top: 1.25rem; font-size: 1.4rem; font-weight: 400; }
.ck-faq details[open] summary::after { content: "−"; }
.ck-faq-answer { padding: 0 2.5rem 1.5rem 0; color: var(--ck-muted); line-height: 1.7; }
.ck-faq-answer p { margin: 0; }

.ck-close { padding: clamp(7rem, 11vw, 10rem) 0; background: #e9edf5; color: #0a1119; text-align: center; }
.ck-close h2 { max-width: 760px; margin: 0 auto; font-size: clamp(2.8rem, 4.7vw, 4.5rem); font-weight: 500; letter-spacing: -.02em; line-height: 1; }
.ck-close p { max-width: 620px; margin: 1.5rem auto 0; color: #3f4854; font-size: 1.08rem; line-height: 1.7; }
.ck-close .ck-actions { justify-content: center; }

.ck-menu-icon { width: 34px; height: 34px; padding: 0; line-height: 1; }
.ck-menu-icon span { display: none; }
.ck-menu-icon::before { content: "☰"; display: block; color: #fff; font-family: Arial, sans-serif; font-size: 28px; font-weight: 400; line-height: 1; }

@media (min-width: 981px) and (max-height: 800px) {
  .ck-hero { padding-block: 4rem; }
  .ck-hero h1 { font-size: clamp(3rem, 4vw, 4rem); }
  .ck-hero-art { min-height: 550px; }
  .ck-hero-lead { margin-top: 1.25rem; font-size: 1rem; }
}

@media (max-width: 980px) {
  .ck-hero-grid, .ck-sources-grid, .ck-listening-grid, .ck-library-grid, .ck-offline-grid, .ck-faq-layout { grid-template-columns: 1fr; }
  .ck-hero-copy { max-width: 760px; }
  .ck-hero-art { width: min(100%, 650px); margin-inline: auto; }
  .ck-source-stage, .ck-library-stage { width: min(100%, 700px); margin-inline: auto; }
  .ck-listening-grid > .ck-section-copy { order: -1; }
  .ck-listening-stage { min-height: 520px; }
}

@media (max-width: 680px) {
  .ck-shell { width: min(100% - 36px, 1240px); }
  .ck-hero { min-height: auto; padding: 5rem 0 6rem; }
  .ck-hero h1 { max-width: 350px; font-size: clamp(2.65rem, 11.5vw, 3.35rem); line-height: 1.02; }
  .ck-page h1, .ck-page h2, .ck-page h3 { word-spacing: .075em; }
  .ck-hero-art { min-height: 500px; }
  .ck-phone { border-width: 5px; }
  .ck-hero-art .ck-phone--hero { width: min(67%, 252px); }
  .ck-heading { font-size: clamp(2.15rem, 9.5vw, 2.8rem); line-height: 1.06; }
  .ck-section { padding-block: 7rem; }
  .ck-source-stage { min-height: 560px; }
  .ck-source-stage .ck-phone:first-child { left: 5%; width: min(50%, 200px); }
  .ck-source-stage .ck-phone:last-child { right: 4%; width: min(45%, 180px); }
  .ck-listening-stage { min-height: 470px; }
  .ck-listening-stage .ck-phone { width: min(62%, 250px); }
  .ck-offline h2 { font-size: clamp(2.55rem, 10.5vw, 3.3rem); }
  .ck-library-stage { min-height: 560px; }
  .ck-library-stage .ck-phone { left: 62%; width: min(49%, 195px); }
  .ck-library-stage .ck-catalog { left: 5%; width: min(44%, 175px); }
  .ck-small-features, .ck-plan-grid { grid-template-columns: 1fr; }
  .ck-faq-layout { gap: 2.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .ck-page *, .ck-page *::before, .ck-page *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}