:root {
  --bg: #050a12;
  --bg-soft: #0c1320;
  --panel: rgba(13, 21, 35, 0.82);
  --panel-strong: #101927;
  --line: rgba(180, 201, 235, 0.13);
  --line-strong: rgba(180, 201, 235, 0.22);
  --text: #f5f8ff;
  --muted: #9ca9bc;
  --muted-strong: #c7d0df;
  --accent: #7ca6ff;
  --accent-strong: #4a74ff;
  --accent-soft: rgba(109, 150, 255, 0.14);
  --cyan: #8ddcff;
  --green: #64e6ac;
  --shadow: 0 28px 90px rgba(0, 0, 0, 0.42);
  --radius-xl: 32px;
  --radius-lg: 24px;
  --radius-md: 18px;
  --container: 1240px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--text);
  background:
    radial-gradient(1100px 760px at 5% -8%, rgba(35, 91, 226, 0.25), transparent 62%),
    radial-gradient(920px 700px at 103% 18%, rgba(99, 54, 205, 0.16), transparent 64%),
    radial-gradient(760px 620px at 35% 66%, rgba(17, 118, 166, 0.08), transparent 68%),
    linear-gradient(180deg, #07111f 0%, #050b15 42%, #040912 72%, #02060c 100%);
  background-attachment: fixed;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  position: relative;
}
body::selection { background: rgba(109, 150, 255, 0.3); }
a { color: inherit; text-decoration: none; }
button, summary { font: inherit; }
button { color: inherit; }
svg { display: block; }
main { overflow-x: clip; }


body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background:
    radial-gradient(640px 500px at 78% 48%, rgba(62, 95, 215, 0.08), transparent 72%),
    radial-gradient(720px 520px at 16% 88%, rgba(38, 73, 157, 0.08), transparent 74%);
}

/* Clean load sequence: navigation → copy → product scene */
.js .site-header {
  opacity: 0;
  transform: translateY(-10px);
}
.js.page-ready .site-header {
  opacity: 1;
  transform: translateY(0);
  transition: opacity .42s ease .04s, transform .58s cubic-bezier(.2,.75,.2,1) .04s;
}
.js .hero-intro > *,
.js .hero-product-intro .visual-orbit,
.js .hero-product-intro .phone,
.js .hero-product-intro .channel-preview,
.js .hero-product-intro .progress-pill,
.js .hero-product-intro .focus-pill {
  opacity: 0;
  will-change: transform, opacity;
}
.js .hero-intro .eyebrow { transform: translateY(10px); }
.js .hero-intro h1 { transform: translateY(18px); }
.js .hero-intro .hero-lead { transform: translateY(16px); }
.js .hero-intro .hero-actions,
.js .hero-intro .hero-free-note,
.js .hero-intro .trust-row { transform: translateY(12px); }
.js.page-ready .hero-intro > * {
  opacity: 1;
  transform: translateY(0);
  transition: opacity .58s ease, transform .72s cubic-bezier(.18,.75,.24,1);
}
.js.page-ready .hero-intro .eyebrow { transition-delay: .10s; }
.js.page-ready .hero-intro h1 { transition-delay: .17s; }
.js.page-ready .hero-intro .hero-lead { transition-delay: .25s; }
.js.page-ready .hero-intro .hero-actions { transition-delay: .32s; }
.js.page-ready .hero-intro .hero-free-note { transition-delay: .37s; }
.js.page-ready .hero-intro .trust-row { transition-delay: .42s; }
.js .hero-product-intro .phone { transform: translateY(34px) scale(.975) rotate(1deg); }
.js .hero-product-intro .channel-preview { transform: translate(-18px, 14px) scale(.975) rotate(-4deg); }
.js .hero-product-intro .progress-pill { transform: translate(16px, 12px) scale(.98) rotate(-1deg); }
.js .hero-product-intro .focus-pill { transform: translate(-14px, 12px) scale(.98) rotate(2deg); }
.js .hero-product-intro .visual-orbit { transform: scale(.94); }
.js.page-ready .hero-product-intro .visual-orbit { opacity: 1; transform: scale(1); transition: opacity .72s ease .38s, transform .9s cubic-bezier(.2,.7,.2,1) .38s; }
.js.page-ready .hero-product-intro .phone { opacity: 1; transform: translateY(0) scale(1) rotate(3deg); transition: opacity .7s ease .42s, transform .88s cubic-bezier(.16,.78,.22,1) .42s; }
.js.page-ready .hero-product-intro .channel-preview { opacity: .86; transform: translate(0,0) scale(1) rotate(-7deg); transition: opacity .62s ease .56s, transform .78s cubic-bezier(.16,.78,.22,1) .56s; }
.js.page-ready .hero-product-intro .focus-pill { opacity: 1; transform: translate(0,0) scale(1) rotate(4deg); transition: opacity .58s ease .65s, transform .74s cubic-bezier(.16,.78,.22,1) .65s; }
.js.page-ready .hero-product-intro .progress-pill { opacity: .56; transform: translate(0,0) scale(1) rotate(-3deg); transition: opacity .55s ease .72s, transform .7s cubic-bezier(.16,.78,.22,1) .72s; }

.site-header {
  position: fixed;
  inset: 20px 0 auto;
  z-index: 30;
  padding: 0 24px;
  transition: transform .35s ease;
}
.nav-shell {
  width: min(100%, 1110px);
  height: 72px;
  margin: 0 auto;
  padding: 0 12px 0 22px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: rgba(8, 13, 21, 0.72);
  backdrop-filter: blur(22px) saturate(135%);
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 12px 48px rgba(0, 0, 0, .18);
  transition: height .3s ease, width .3s ease, background .3s ease, border-radius .3s ease;
}
.site-header.is-scrolled .nav-shell {
  width: min(100%, 980px);
  height: 60px;
  border-radius: 20px;
  background: rgba(8, 13, 21, 0.9);
}
.brand { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 800; letter-spacing: .16em; }
.brand-mark {
  width: 30px;
  height: 34px;
  display: grid;
  place-items: center;
  color: #8eb4ff;
  flex: 0 0 auto;
}
.brand-mark svg {
  width: 27px;
  height: 27px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 5px 14px rgba(74, 116, 255, .28));
}
.nav-links { display: flex; align-items: center; gap: 30px; color: var(--muted-strong); font-size: 14px; }
.nav-links a { transition: color .2s ease; }
.nav-links a:hover { color: #fff; }
.menu-toggle { display: none; width: 42px; height: 42px; border: 0; border-radius: 13px; background: rgba(255,255,255,.06); }
.menu-toggle span { width: 18px; height: 1px; background: #fff; display: block; margin: 5px auto; }
.mobile-menu { display: none; }

.button {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 52px; padding: 0 24px;
  border: 1px solid rgba(255,255,255,.14); border-radius: 15px;
  background: rgba(255,255,255,.06); color: #fff;
  font-weight: 700; font-size: 15px;
  cursor: pointer;
  transition: transform .22s ease, background .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.button:hover { transform: translateY(-2px); border-color: rgba(255,255,255,.24); background: rgba(255,255,255,.09); }
.button svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.button-small { min-height: 44px; padding: 0 18px; border-radius: 13px; font-size: 14px; background: #f3f7ff; color: #09101b; }
.button-small:hover { background: white; }
.button-primary {
  min-height: 58px; padding: 0 27px; border: 0;
  background: linear-gradient(135deg, #84adff 0%, #4f76ff 68%, #3f5ce6 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.42), 0 16px 38px rgba(56, 92, 255, .28);
}
.button-primary:hover { background: linear-gradient(135deg, #9abeff, #5a80ff 68%, #4967ed); box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 22px 50px rgba(56, 92, 255, .36); }
.button-wide { width: 100%; }
.button-secondary { background: rgba(255,255,255,.045); border-color: rgba(160,188,239,.18); color: #dbe6f7; }
.button-secondary:hover { background: rgba(104,145,239,.10); border-color: rgba(137,172,255,.32); }
.text-link { display: inline-flex; align-items: center; gap: 10px; color: var(--muted-strong); font-size: 15px; font-weight: 650; }
.text-link span { color: var(--accent); }
.text-link:hover { color: white; }

.section { width: min(calc(100% - 96px), var(--container)); margin: 0 auto; padding: var(--section-space-desktop) 0; position: relative; scroll-margin-top: 104px; }
.section-narrow { max-width: 980px; }
.hero { min-height: 100svh; padding-top: 170px; padding-bottom: 110px; display: grid; grid-template-columns: minmax(0, .92fr) minmax(480px, 1.08fr); gap: 54px; align-items: center; }
.hero-copy { position: relative; z-index: 2; }
.eyebrow, .section-label, .card-kicker, .message-label, .post-kicker {
  color: var(--accent); text-transform: uppercase; letter-spacing: .14em; font-weight: 800; font-size: 11px;
}
.eyebrow { display: inline-flex; align-items: center; gap: 10px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,.035); color: #b7c6df; letter-spacing: .08em; text-transform: none; font-size: 12px; }
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 5px rgba(100,230,172,.08), 0 0 18px rgba(100,230,172,.55); }
.hero h1 { margin: 28px 0 24px; font-size: clamp(62px, 6.2vw, 92px); line-height: .96; letter-spacing: -.062em; font-weight: 790; }
.hero h1 span { color: transparent; background: linear-gradient(90deg, #b8d0ff, #658fff 65%, #9fd7ff); -webkit-background-clip: text; background-clip: text; }
.hero-lead { max-width: 650px; margin: 0; color: var(--muted-strong); font-size: 20px; line-height: 1.62; letter-spacing: -.015em; }
.hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; margin-top: 36px; }
.hero-free-note { max-width: 610px; margin: 16px 0 0; color: #718198; font-size: 12px; line-height: 1.55; }
.trust-row { display: flex; flex-wrap: wrap; gap: 10px 20px; margin-top: 38px; color: #8794a8; font-size: 12px; }
.trust-row span { display: flex; align-items: center; gap: 8px; }
.trust-row span::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: #648af1; }

.hero-visual { min-height: 650px; position: relative; display: flex; align-items: center; justify-content: center; isolation: isolate; }
.hero-visual::before { content:""; position: absolute; width: 560px; height: 560px; border-radius: 50%; background: radial-gradient(circle, rgba(92,132,255,.28), rgba(77,118,255,.10) 42%, transparent 70%); filter: blur(10px); z-index: -2; }
.visual-orbit { position: absolute; border: 1px solid rgba(142,174,255,.13); border-radius: 50%; z-index: -1; }
.orbit-one { width: 560px; height: 560px; animation: orbitSpin 22s linear infinite; }
.orbit-two { width: 430px; height: 430px; border-style: dashed; animation: orbitSpin 16s linear infinite reverse; }
@keyframes orbitSpin { to { transform: rotate(360deg); } }
.glass-card { border: 1px solid var(--line); background: linear-gradient(145deg, rgba(19,28,43,.92), rgba(10,16,26,.83)); backdrop-filter: blur(18px); box-shadow: var(--shadow); }
.channel-preview { position: absolute; left: -14px; top: 76px; width: 322px; padding: 16px; border-radius: 24px; transform: rotate(-7deg); z-index: 1; opacity: .86; box-shadow: 0 34px 70px rgba(0,0,0,.32); }
.channel-head { display: flex; align-items: center; gap: 10px; padding-bottom: 14px; }
.avatar { flex: 0 0 auto; border-radius: 50%; display: grid; place-items: center; font-weight: 800; color: white; }
.avatar-channel { width: 38px; height: 38px; background: linear-gradient(145deg, #8a4dff, #425af8); }
.avatar-bot { width: 38px; height: 38px; background: linear-gradient(145deg, #81b6ff, #445ff1); }
.channel-head div:nth-child(2) { display: grid; gap: 2px; }
.channel-head strong { font-size: 12px; }
.channel-head span { color: #8390a4; font-size: 10px; }
.telegram-badge { margin-left: auto; width: 27px; height: 27px; border-radius: 9px; display: grid; place-items: center; background: rgba(87,136,255,.16); color: #8ab2ff !important; font-size: 14px !important; }
.post-cover { min-height: 220px; padding: 26px 22px; border-radius: 18px; background: radial-gradient(circle at 80% 15%, rgba(117,78,255,.24), transparent 38%), radial-gradient(circle at 18% 0, rgba(101,141,255,.16), transparent 36%), linear-gradient(155deg, #171f31, #101522); display: flex; flex-direction: column; justify-content: flex-end; }
.post-cover h3 { margin: 10px 0 8px; font-size: 21px; line-height: 1.12; letter-spacing: -.025em; }
.post-cover p { margin: 0; color: #9ba8ba; font-size: 11px; line-height: 1.5; }

.phone { position: relative; z-index: 3; width: 350px; height: 670px; border-radius: 52px; padding: 10px; background: linear-gradient(150deg, #46546b, #0a0f18 34%, #182434 78%, #070b10); box-shadow: 0 48px 130px rgba(0,0,0,.62), 0 12px 40px rgba(60,96,205,.18), inset 0 0 0 1px rgba(255,255,255,.2); transform: rotate(3deg); overflow: hidden; }
.phone::before { content:""; position:absolute; inset:0; border-radius:inherit; background: linear-gradient(125deg, rgba(255,255,255,.22), rgba(255,255,255,0) 28%, rgba(255,255,255,0) 70%, rgba(255,255,255,.07)); opacity:.7; pointer-events:none; }
.phone::after { content:""; position:absolute; inset:14px; border-radius:40px; border:1px solid rgba(255,255,255,.06); pointer-events:none; }
.phone-frame { height: 100%; border-radius: 42px; overflow: hidden; background: radial-gradient(circle at 100% 0, rgba(72,112,214,.14), transparent 30%), #0b1320; display: flex; flex-direction: column; border: 1px solid rgba(255,255,255,.08); }
.phone-topbar { height: 38px; padding: 8px 18px 0; display: flex; align-items: flex-start; justify-content: space-between; color: #dbe5f4; font-size: 10px; position: relative; }
.phone-island { position: absolute; left: 50%; top: 6px; width: 83px; height: 24px; transform: translateX(-50%); border-radius: 999px; background: #030508; }
.phone-status { letter-spacing: .04em; }
.telegram-header { height: 64px; padding: 8px 14px 10px; border-bottom: 1px solid rgba(255,255,255,.065); display: flex; align-items: center; gap: 10px; background: linear-gradient(180deg, rgba(12,20,32,.98), rgba(10,18,30,.94)); }
.telegram-header button { border: 0; background: transparent; color: #86aaff; padding: 5px; font-size: 25px; cursor: default; }
.telegram-header button:last-child { margin-left: auto; font-size: 12px; letter-spacing: 2px; }
.telegram-title { display: grid; gap: 2px; }
.telegram-title strong { font-size: 13px; }
.telegram-title span { color: #73829a; font-size: 9px; }
.chat { position: relative; flex: 1; overflow: hidden; padding: 18px 13px; background: radial-gradient(circle at 100% 0, rgba(58,91,157,.13), transparent 32%), linear-gradient(180deg, #0c1522 0%, #0b1320 100%); }
.chat::before { content:""; position:absolute; inset:0; opacity:.14; background-image: radial-gradient(circle, #55709b 1px, transparent 1px); background-size: 28px 28px; }
.day-label { position: relative; width: max-content; margin: 0 auto 16px; padding: 5px 9px; border-radius: 999px; background: rgba(30,43,61,.75); color: #7e8ba0; font-size: 8px; }
.message { position: absolute; z-index: 2; max-width: 82%; padding: 14px; border-radius: 16px; font-size: 10px; line-height: 1.45; opacity: 0; transform: translateY(18px) scale(.98); transition: opacity .55s ease, transform .55s ease, box-shadow .35s ease; box-shadow: 0 10px 24px rgba(0,0,0,.16); }
.message.is-active, .message.is-past { opacity: 1; transform: translateY(0) scale(1); }
.message-bot { left: 13px; top: 60px; background: linear-gradient(180deg, #182438, #141f31); border-bottom-left-radius: 5px; box-shadow: 0 10px 30px rgba(0,0,0,.16); }
.message-bot strong { display: block; margin: 7px 0 5px; font-size: 13px; }
.message-bot p { margin: 0; color: #aeb9c9; }
.message-bot button { width: 100%; margin-top: 10px; padding: 9px; border: 0; border-radius: 9px; color: #dce9ff; background: rgba(83,124,255,.18); font-size: 9px; }
.message-user { right: 13px; top: 194px; background: linear-gradient(180deg, #25554c, #214b44); border-bottom-right-radius: 5px; }
.message time { display:block; margin-top:8px; color:#6f7d8f; font-size:8px; text-align:right; }
.task-card { top: 58px; width: 78%; }
.transcript-card { top: 266px; width: calc(100% - 26px); max-width: none; }
.transcript-card p { font-style: italic; }
.meta-row { display:flex; gap:10px; margin-top:10px; color:#8c9ab0; font-size:8px; }
.inline-actions { display:flex; gap:8px; margin-top:10px; flex-wrap:wrap; }
.inline-actions button { width:auto; margin-top:0; padding:8px 10px; border-radius:10px; background:rgba(84,125,255,.14); color:#d9e5ff; font-size:8px; }
.inline-actions .is-pressed { background:rgba(96,160,255,.3); box-shadow:0 0 0 1px rgba(126,169,255,.28), 0 8px 18px rgba(59,94,198,.22); }
.followup-card { top: 502px; width: 78%; }
.analysis-card { top: 390px; width: calc(100% - 26px); max-width: none; }
.score-row { display:flex; align-items:flex-end; justify-content:space-between; margin-top: 9px; color:#bac7d8; }
.score-row strong { color:#8ab0ff; font-size:22px; }
.meter { height:5px; border-radius:999px; background:rgba(255,255,255,.07); overflow:hidden; margin:6px 0 11px; }
.meter i { display:block; height:100%; width:var(--value); background:linear-gradient(90deg,#70a4ff,#536fff); border-radius:inherit; }
.analysis-card p + p { margin-top:7px; }
.voice-message { display: flex; align-items: center; gap: 8px; width: 76%; }
.play { flex: 0 0 auto; width: 28px; height: 28px; border: 0; border-radius: 50%; display: grid; place-items: center; background: #65d5bc; color: #14342e; font-size: 9px; }
.wave { flex: 1; display: flex; gap: 2px; align-items: center; height: 30px; }
.wave i, .live-wave i { width: 2px; border-radius: 5px; background: rgba(196,255,240,.74); height: calc(5px + (var(--h, 4) * 2px)); }
.wave i:nth-child(3n) { --h: 9; }.wave i:nth-child(4n) { --h: 6; }.wave i:nth-child(5n) { --h: 3; }.wave i:nth-child(7n) { --h: 10; }
.voice-message span { color: #a6d5c9; font-size: 8px; }
.voice-message time { margin-top:0; margin-left:auto; color:#9ecfc3; font-size:8px; }
.composer { height: 52px; margin: 0 10px 10px; padding: 0 9px 0 14px; border-radius: 18px; background: linear-gradient(180deg, #192538, #152133); color: #68768b; display: flex; align-items: center; font-size: 10px; border: 1px solid rgba(255,255,255,.05); }
.composer button { margin-left:auto; width:30px; height:30px; border-radius:50%; border:0; background:#658dff; color:white; font-size:7px; }
.progress-pill { position:absolute; right:-18px; bottom:86px; width:222px; padding:16px 16px; border-radius:20px; z-index:4; transform:rotate(-3deg); box-shadow: 0 24px 60px rgba(0,0,0,.26); }
.progress-pill span { color:#8290a5; font-size:9px; }
.progress-pill strong { display:block; margin:3px 0 12px; font-size:20px; }
.mini-chart { height:34px; display:flex; align-items:flex-end; gap:5px; }
.mini-chart i { flex:1; height:40%; border-radius:3px 3px 1px 1px; background:linear-gradient(#77a7ff,#4764d7); }
.mini-chart i:nth-child(2){height:55%}.mini-chart i:nth-child(3){height:42%}.mini-chart i:nth-child(4){height:71%}.mini-chart i:nth-child(5){height:63%}.mini-chart i:nth-child(6){height:82%}.mini-chart i:nth-child(7){height:100%}
.focus-pill { position:absolute; left: 28px; bottom: 38px; width: 250px; padding: 16px 16px 17px; border-radius: 20px; z-index: 4; transform: rotate(4deg); box-shadow: 0 24px 60px rgba(0,0,0,.26); }
.focus-pill span { color:#8290a5; font-size:9px; }
.focus-pill strong { display:block; margin:3px 0 10px; font-size:18px; line-height:1.12; }
.focus-pill p { margin:0; color:#aebad0; font-size:11px; line-height:1.45; }


.section-heading { max-width: 670px; }
.section-heading.centered { margin: 0 auto 70px; text-align: center; }
.section-label { margin: 0 0 20px; }
.section-label-topic {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
  color: #92b5ff;
  font-size: clamp(13px, 1.15vw, 15px);
  letter-spacing: .13em;
}
.section-label-topic::after {
  content: "";
  width: 54px;
  height: 1px;
  background: linear-gradient(90deg, rgba(130,169,255,.72), rgba(130,169,255,0));
}
.section-heading h2, .statement h2, .inside h2, .author h2, .final-cta h2 { margin: 0; font-size: clamp(44px, 5vw, 66px); line-height: 1.02; letter-spacing: -.052em; font-weight: 760; }
.section-heading > p:last-child, .inside-copy > p:nth-of-type(2), .author-copy > p { color: var(--muted); font-size: 18px; line-height: 1.68; }
.section-heading h2 + p { margin-top: 24px; }
.statement { text-align:center; padding-top:180px; padding-bottom:190px; }
.statement h2 { max-width:930px; margin:0 auto; }
.statement h2 span { color:#8997aa; }
.statement-note { max-width:690px; margin:28px auto 0; color:var(--muted); font-size:18px; line-height:1.65; }
.statement-quote h2 {
  max-width: 1050px;
  font-family: inherit;
  font-weight: 760;
}
.statement-author {
  margin: 30px auto 0;
  color: #8190a6;
  font-size: 14px;
  font-weight: 650;
  letter-spacing: .02em;
}

.system-grid { display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-top:70px; }
.system-card { min-height:720px; padding:50px; border:1px solid var(--line); border-radius:var(--radius-xl); background:linear-gradient(155deg,rgba(17,27,42,.88),rgba(9,14,23,.94)); overflow:hidden; position:relative; }
.system-card::before { content:""; position:absolute; width:280px; height:280px; border-radius:50%; filter:blur(80px); opacity:.18; }
.channel-card::before { right:-120px; bottom:20px; background:#8a55ff; }
.bot-card::before { right:-100px; bottom:30px; background:#3f7cff; }
.system-number { position:absolute; right:34px; top:28px; color:rgba(255,255,255,.12); font-size:70px; font-weight:800; letter-spacing:-.07em; }
.system-copy { position:relative; z-index:2; max-width:500px; }
.system-copy h3 { margin:14px 0 18px; font-size:36px; line-height:1.07; letter-spacing:-.035em; }
.system-copy p { margin:0; color:var(--muted); font-size:16px; line-height:1.65; }
.system-copy ul { list-style:none; margin:27px 0 0; padding:0; display:grid; gap:13px; color:#c4cedc; font-size:14px; }
.system-copy li { display:flex; align-items:flex-start; gap:10px; }
.system-copy li::before { content:""; width:5px; height:5px; margin-top:7px; flex:0 0 auto; border-radius:50%; background:var(--accent); box-shadow:0 0 12px rgba(109,150,255,.7); }
.editorial-stack { position:absolute; left:50px; right:50px; bottom:-10px; height:290px; }
.editorial-card { position:absolute; left:0; right:0; height:190px; padding:28px; border-radius:25px; border:1px solid rgba(255,255,255,.1); background:linear-gradient(150deg,#1b2032,#10141e); box-shadow:0 24px 50px rgba(0,0,0,.26); display:flex; flex-direction:column; justify-content:flex-end; }
.editorial-card span { color:#a38cff; font-size:10px; text-transform:uppercase; letter-spacing:.12em; font-weight:800; }
.editorial-card strong { max-width:390px; margin-top:10px; font-size:24px; line-height:1.15; }
.editorial-card small { margin-top:12px; color:#788499; }
.editorial-card.top { z-index:3; transform:translateY(0) rotate(-1deg); }
.editorial-card.middle { z-index:2; transform:translateY(52px) scale(.95) rotate(2deg); opacity:.66; }
.editorial-card.bottom { z-index:1; transform:translateY(98px) scale(.9) rotate(-2deg); opacity:.34; }
.bot-dashboard { position:absolute; right:34px; bottom:34px; width:340px; padding:22px 20px 18px; border-radius:24px; border:1px solid rgba(255,255,255,.08); background:linear-gradient(160deg,rgba(24,34,53,.95),rgba(12,18,30,.98)); box-shadow:0 28px 80px rgba(0,0,0,.34); }
.bot-dashboard-head { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; }
.bot-dashboard-head span { color:#8d9bb0; font-size:11px; }
.bot-dashboard-head strong { font-size:28px; line-height:1; letter-spacing:-.05em; }
.bot-dashboard-graph { height:56px; margin:18px 0; display:flex; align-items:flex-end; gap:8px; }
.bot-dashboard-graph i { flex:1; border-radius:5px 5px 2px 2px; background:linear-gradient(180deg,#82b1ff,#4765d8); box-shadow:0 0 0 1px rgba(255,255,255,.03) inset; }
.bot-dashboard-graph i:nth-child(1){height:34%}.bot-dashboard-graph i:nth-child(2){height:48%}.bot-dashboard-graph i:nth-child(3){height:62%}.bot-dashboard-graph i:nth-child(4){height:54%}.bot-dashboard-graph i:nth-child(5){height:74%}.bot-dashboard-graph i:nth-child(6){height:68%}.bot-dashboard-graph i:nth-child(7){height:88%}
.bot-dashboard-list { display:grid; gap:10px; }
.bot-dashboard-list div { display:flex; justify-content:space-between; gap:16px; padding-top:10px; border-top:1px solid rgba(255,255,255,.06); }
.bot-dashboard-list span { color:#8d9bb0; font-size:10px; }
.bot-dashboard-list b { color:#e9f1ff; font-size:12px; text-align:right; }

.demo-stage { margin-top:20px; }
.demo-tabs { width:max-content; max-width:100%; margin:0 auto 22px; padding:6px; display:flex; gap:5px; border:1px solid var(--line); border-radius:17px; background:rgba(255,255,255,.035); }
.demo-tabs button { border:0; background:transparent; color:#8e9bae; min-height:43px; padding:0 16px; border-radius:12px; cursor:pointer; transition:.25s ease; font-size:13px; }
.demo-tabs button span { display:inline-grid; place-items:center; width:22px; height:22px; margin-right:7px; border-radius:7px; background:rgba(255,255,255,.055); font-size:10px; }
.demo-tabs button.is-active { color:#fff; background:#18243a; box-shadow:inset 0 0 0 1px rgba(139,175,255,.13); }
.demo-window { border:1px solid var(--line); border-radius:30px; background:linear-gradient(150deg,rgba(16,25,39,.96),rgba(8,13,21,.96)); box-shadow:var(--shadow); overflow:hidden; }
.window-bar { height:52px; border-bottom:1px solid var(--line); display:flex; align-items:center; gap:7px; padding:0 20px; color:#6f7c91; font-size:11px; }
.window-bar i { width:8px; height:8px; border-radius:50%; background:#303c4e; }.window-bar i:first-child{background:#7f4450}.window-bar i:nth-child(2){background:#776b3d}.window-bar i:nth-child(3){background:#3c705c}.window-bar span{margin-left:auto}
.window-content { min-height:590px; display:grid; grid-template-columns:.82fr 1.18fr; }
.demo-copy-panel { padding:68px 58px; border-right:1px solid var(--line); display:flex; flex-direction:column; justify-content:center; }
.demo-counter { color:var(--accent); font-size:12px; letter-spacing:.12em; font-weight:800; }
.demo-copy-panel h3 { margin:20px 0 18px; font-size:42px; line-height:1.05; letter-spacing:-.04em; }
.demo-copy-panel > p { margin:0; color:var(--muted); font-size:17px; line-height:1.65; }
.demo-note { margin-top:35px; padding-top:25px; border-top:1px solid var(--line); display:flex; gap:13px; color:#9eacbf; font-size:13px; line-height:1.55; }
.demo-note span{color:var(--accent)}.demo-note p{margin:0}
.demo-product-panel { position:relative; display:grid; place-items:center; padding:50px; background:radial-gradient(circle at 50% 44%,rgba(60,103,206,.19),transparent 48%); overflow:hidden; }
.demo-product-panel::before { content:""; position:absolute; width:430px; height:430px; border:1px solid rgba(133,166,232,.08); border-radius:50%; box-shadow:0 0 0 70px rgba(133,166,232,.025),0 0 0 140px rgba(133,166,232,.018); }
.training-select,.record-screen,.result-screen { width:min(100%,420px); position:absolute; opacity:0; transform:translateY(20px) scale(.97); pointer-events:none; transition:opacity .45s ease,transform .45s ease; }
.training-select.is-visible,.record-screen.is-visible,.result-screen.is-visible { opacity:1; transform:translateY(0) scale(1); pointer-events:auto; }
.training-select { display:grid; gap:10px; }
.mini-header { display:flex; align-items:center; gap:12px; margin-bottom:8px; }
.training-select button { display:flex; align-items:center; gap:14px; width:100%; min-height:83px; padding:14px; border:1px solid var(--line); border-radius:17px; background:rgba(15,25,40,.92); text-align:left; color:#fff; }
.skill-icon { width:43px; height:43px; border-radius:14px; display:grid; place-items:center; background:rgba(103,147,255,.12); color:#8cb4ff; }
.training-select button span:nth-child(2){display:grid;gap:4px}.training-select button b{font-size:14px}.training-select button small{color:#7f8ba0;font-size:11px}.training-select button i{margin-left:auto;color:#668eff;font-style:normal}
.record-screen { text-align:center; display:grid; justify-items:center; }
.record-ring { width:180px; height:180px; border-radius:50%; display:grid; place-items:center; position:relative; background:radial-gradient(circle,rgba(92,132,255,.2),rgba(22,35,58,.72) 55%,rgba(7,12,20,.8)); border:1px solid rgba(121,160,255,.2); box-shadow:0 0 0 20px rgba(83,124,255,.03),0 0 0 44px rgba(83,124,255,.018); }
.record-ring span { font-size:34px; font-weight:750; letter-spacing:-.04em; }
.record-ring i { position:absolute; inset:-8px; border-radius:50%; border:1px solid rgba(114,155,255,.42); animation:pulseRing 1.7s ease-out infinite; }
@keyframes pulseRing { 0%{transform:scale(.94);opacity:.8}100%{transform:scale(1.15);opacity:0} }
.record-screen strong { margin-top:42px; font-size:25px; }
.record-screen p { max-width:330px; margin:10px 0 22px; color:var(--muted); line-height:1.55; }
.live-wave { height:52px; display:flex; align-items:center; gap:4px; }
.live-wave i { width:4px; height:20%; background:#79a5ff; animation:waveLive 1.1s ease-in-out infinite alternate; }
.live-wave i:nth-child(3n){animation-delay:.15s}.live-wave i:nth-child(4n){animation-delay:.3s}.live-wave i:nth-child(5n){animation-delay:.45s}
@keyframes waveLive { to { height:100%; } }
.result-screen { padding:26px; border:1px solid var(--line); border-radius:23px; background:rgba(15,24,38,.94); box-shadow:0 24px 60px rgba(0,0,0,.28); }
.result-head { display:flex; align-items:end; justify-content:space-between; padding-bottom:23px; border-bottom:1px solid var(--line); }
.result-head span{color:#96a4b8}.result-head strong{font-size:30px;color:#8eb5ff}
.result-line { display:grid; grid-template-columns:120px 1fr 28px; align-items:center; gap:12px; margin-top:20px; font-size:12px; color:#b5c0d0; }
.result-line > div { height:5px; background:rgba(255,255,255,.06); border-radius:99px; overflow:hidden; }.result-line i{display:block;width:var(--value);height:100%;background:linear-gradient(90deg,#6e9fff,#4d6ef1)}.result-line b{text-align:right;color:#e8efff}
.next-focus { margin-top:26px; padding:18px; border-radius:16px; background:rgba(83,124,255,.09); border:1px solid rgba(101,144,255,.13); }
.next-focus span{color:#7fa8ff;font-size:10px;text-transform:uppercase;letter-spacing:.12em;font-weight:800}.next-focus p{margin:9px 0 13px;color:#c5cede;font-size:13px;line-height:1.5}
.result-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; }
.result-actions button { min-height:31px; padding:7px 8px; border:1px solid rgba(126,163,255,.13); border-radius:9px; background:rgba(105,143,239,.07); color:#99baff; font-size:9.5px; cursor:default; }

.inside { display:grid; grid-template-columns:.72fr 1.28fr; gap:80px; align-items:start; }
.inside-copy .text-link { margin-top:22px; }
.practice-explorer {
  border: 1px solid rgba(155, 184, 235, .14);
  border-radius: 30px;
  padding: 18px;
  background:
    radial-gradient(circle at 100% 0, rgba(70, 111, 228, .12), transparent 36%),
    linear-gradient(160deg, rgba(15, 24, 39, .94), rgba(7, 12, 21, .98));
  box-shadow: 0 32px 100px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.035);
}
.practice-nav { display: grid; gap: 12px; margin-bottom: 18px; }
.practice-core-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); grid-auto-rows:68px; gap:10px; }
.practice-special-label { display:flex; align-items:center; gap:12px; color:#718198; font-size:10px; letter-spacing:.12em; text-transform:uppercase; }
.practice-special-label::after { content:""; height:1px; flex:1; background:rgba(174,198,235,.10); }
.practice-special-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
.practice-chip {
  min-width: 0;
  padding: 10px 12px;
  border-radius: 15px;
  border: 1px solid rgba(255,255,255,.075);
  background: rgba(255,255,255,.026);
  color: #d9e2f1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: -.018em;
  transition: transform .22s ease, background .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.practice-chip:hover {
  transform: translateY(-2px);
  border-color: rgba(124,166,255,.28);
  background: rgba(92,127,223,.08);
}
.practice-chip.is-active {
  background: linear-gradient(180deg, rgba(92,127,223,.24), rgba(47,71,122,.16));
  border-color: rgba(124,166,255,.38);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 10px 30px rgba(44,84,176,.15);
}
.practice-chip-special,
.practice-chip-duel {
  min-height: 96px;
  padding: 16px 16px 15px;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  text-align: left;
  overflow: hidden;
  position: relative;
  background: linear-gradient(150deg, rgba(49,70,125,.18), rgba(14,22,36,.92));
}
.practice-chip-copy {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 6px;
  width: 100%;
  margin-top: 0;
  align-content: start;
}
.practice-chip-special strong,
.practice-chip-duel strong {
  display:block;
  min-height: 33px;
  font-size:14px;
  line-height:1.18;
  position:relative;
  z-index:2;
}
.practice-chip-special small,
.practice-chip-duel small { display:block; margin-top:0; color:#8f9db2; font-size:10px; line-height:1.3; position:relative; z-index:2; }
.practice-chip-special {
  background: radial-gradient(circle at 88% 0, rgba(81,116,224,.14), transparent 42%), linear-gradient(150deg, rgba(49,70,125,.18), rgba(14,22,36,.92));
}
.practice-chip-special.is-active {
  background: radial-gradient(circle at 88% 0, rgba(91,132,255,.22), transparent 42%), linear-gradient(150deg, rgba(71,101,191,.32), rgba(17,26,42,.98));
}
.practice-chip-orbit {
  position: absolute;
  width: 88px;
  height: 88px;
  top: -42px;
  right: -24px;
  border-radius: 50%;
  border: 1px solid rgba(157,181,255,.12);
  box-shadow: 0 0 0 18px rgba(100,128,220,.035);
  pointer-events: none;
}
.practice-chip-icon {
  position: absolute;
  left: 16px;
  top: 15px;
  width: 30px;
  height: 30px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: rgba(99,132,230,.09);
  border: 1px solid rgba(150,180,255,.14);
  box-shadow: 0 8px 18px rgba(45,66,124,.18);
  z-index: 2;
  transition: transform .35s cubic-bezier(.2,.75,.2,1), box-shadow .35s ease, background .28s ease;
}
.practice-chip-icon svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: #a9c4ff;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.practice-chip-special .practice-chip-copy,
.practice-chip-duel .practice-chip-copy {
  padding-top: 40px;
}
.practice-chip-duel {
  background: radial-gradient(circle at 85% 10%,rgba(113,79,255,.22),transparent 38%),linear-gradient(150deg,rgba(55,77,147,.28),rgba(16,25,43,.92));
}
.practice-chip-duel::after { content:""; position:absolute; width:90px; height:90px; border-radius:50%; top:-44px; right:-28px; border:1px solid rgba(157,181,255,.13); box-shadow:0 0 0 20px rgba(100,128,220,.035); }
.practice-chip-duel .duel-icon { position:absolute; left:22px; top:20px; width:28px; height:28px; fill:none; stroke:#9ebcff; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; filter:drop-shadow(0 5px 16px rgba(95,126,255,.25)); }
.practice-chip-duel.is-active { background:radial-gradient(circle at 85% 10%,rgba(126,88,255,.30),transparent 40%),linear-gradient(150deg,rgba(70,99,189,.40),rgba(22,34,57,.96)); }
.practice-chip-special:hover .practice-chip-icon,
.practice-chip-special.is-active .practice-chip-icon,
.practice-chip-duel:hover .duel-icon,
.practice-chip-duel.is-active .duel-icon { transform: translateY(-2px) scale(1.04); }
.practice-chip-special:hover .practice-chip-orbit,
.practice-chip-special.is-active .practice-chip-orbit,
.practice-chip-duel:hover .practice-chip-orbit,
.practice-chip-duel.is-active .practice-chip-orbit { border-color: rgba(160,189,255,.18); }

.duel-signal {
  position: absolute;
  top: 25px;
  left: 52px;
  right: 16px;
  height: 16px;
  display: grid;
  grid-template-columns: 8px 1fr 8px;
  align-items: center;
  gap: 5px;
  opacity: .45;
  transition: opacity .35s ease, transform .45s cubic-bezier(.2,.75,.2,1);
}
.duel-signal i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #94b5ff;
  box-shadow: 0 0 0 4px rgba(125,158,255,.08), 0 0 18px rgba(125,158,255,.32);
  transition: transform .45s cubic-bezier(.2,.75,.2,1), box-shadow .35s ease;
}
.duel-signal b {
  height: 1px;
  background: linear-gradient(90deg, rgba(148,181,255,.12), rgba(148,181,255,.65), rgba(148,181,255,.12));
  transform: scaleX(.74);
  transition: transform .45s cubic-bezier(.2,.75,.2,1), opacity .35s ease;
}
.practice-chip-duel:hover .duel-signal,
.practice-chip-duel.is-active .duel-signal { opacity: .95; transform: translateY(-2px); }
.practice-chip-duel:hover .duel-signal i:first-child,
.practice-chip-duel.is-active .duel-signal i:first-child { transform: translateX(-4px); }
.practice-chip-duel:hover .duel-signal i:last-child,
.practice-chip-duel.is-active .duel-signal i:last-child { transform: translateX(4px); }
.practice-chip-duel:hover .duel-signal b,
.practice-chip-duel.is-active .duel-signal b { transform: scaleX(1); }
.practice-chip-duel:hover .duel-icon { transform: translateY(-2px) scale(1.04); }
.practice-chip-duel .duel-icon { transition: transform .35s cubic-bezier(.2,.75,.2,1); }
.practice-panels {
  position: relative;
  min-height: 405px;
  border-radius: 24px;
  border: 1px solid rgba(255,255,255,.06);
  background:
    radial-gradient(circle at 100% 0, rgba(67,116,255,.12), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,.028), rgba(255,255,255,.008));
  overflow: hidden;
}
.practice-panel { display: none; padding: 30px 30px 32px; }
.practice-panel.is-visible { display: block; animation: panelFade .42s cubic-bezier(.2,.72,.2,1); }
.practice-panel h3 { margin:0 0 13px; font-size:36px; letter-spacing:-.04em; line-height:1.03; }
.practice-panel > p { margin:0; max-width: 660px; color: var(--muted-strong); font-size: 16px; line-height: 1.62; }
.practice-points {
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 28px;
}
.practice-points li {
  min-width: 0;
  padding: 14px 0 15px;
  border-top: 1px solid rgba(174, 198, 235, .105);
}
.practice-points strong {
  display: block;
  color: #e7eefb;
  font-size: 14px;
  line-height: 1.3;
}
.practice-points span {
  display: block;
  margin-top: 5px;
  color: #8998ad;
  font-size: 12.5px;
  line-height: 1.48;
}
.practice-panel-duel {
  background: radial-gradient(circle at 100% 0, rgba(103, 74, 218, .08), transparent 44%);
}

.practice-panel.is-visible h3,
.practice-panel.is-visible > p,
.practice-panel.is-visible .practice-points li { animation: panelContentIn .46s both cubic-bezier(.2,.72,.2,1); }
.practice-panel.is-visible > p { animation-delay: .04s; }
.practice-panel.is-visible .practice-points li:nth-child(1) { animation-delay: .08s; }
.practice-panel.is-visible .practice-points li:nth-child(2) { animation-delay: .13s; }
.practice-panel.is-visible .practice-points li:nth-child(3) { animation-delay: .18s; }
.practice-panel.is-visible .practice-points li:nth-child(4) { animation-delay: .23s; }
@keyframes panelFade { from { opacity:0; transform: translateY(10px) scale(.992); } to { opacity:1; transform: translateY(0) scale(1); } }
@keyframes panelContentIn { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }


.author { display:grid; grid-template-columns:.83fr 1.17fr; gap:90px; align-items:center; }
.author-portrait {
  min-height: 650px;
  border: 1px solid rgba(152, 182, 232, .16);
  border-radius: var(--radius-xl);
  background: #07101b;
  position: relative;
  overflow: hidden;
  box-shadow: 0 38px 100px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.04);
}
.author-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 44%;
  filter: saturate(.94) contrast(1.03);
}
.author-portrait::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(3,7,13,.03) 38%, rgba(3,7,13,.78) 100%),
    linear-gradient(90deg, rgba(23,61,153,.08), rgba(105,45,164,.08));
  pointer-events: none;
}
.author-photo-caption {
  position: absolute;
  z-index: 2;
  left: 28px;
  right: 28px;
  bottom: 26px;
  display: grid;
  gap: 5px;
}
.author-photo-caption strong { font-size: 22px; letter-spacing: -.025em; }
.author-photo-caption span { color: #aab7ca; font-size: 12px; }
.author-lead { color:#d5deec !important; font-size:20px !important; }
.author-facts { margin-top:36px; display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.author-facts div { padding-top:18px; border-top:1px solid var(--line); }
.author-facts strong { display:block; font-size:21px; }
.author-facts span { display:block; margin-top:7px; color:#7e8ba0; font-size:11px; line-height:1.4; }
.quote { text-align:center; padding-top:180px; padding-bottom:180px; }
.quote blockquote { margin:0; font-size:clamp(32px,4.2vw,52px); line-height:1.18; letter-spacing:-.04em; font-weight:620; color:#e8edf7; }
.quote > span { display:block; margin-top:28px; color:#7f8ca0; font-size:13px; }


.free-trial { display:grid; grid-template-columns:.92fr 1.08fr; gap:72px; align-items:center; padding-top:105px; padding-bottom:105px; }
.free-trial::before { content:""; position:absolute; inset:36px 0; border:1px solid rgba(138,170,230,.12); border-radius:36px; background:radial-gradient(circle at 8% 10%,rgba(73,114,221,.16),transparent 32%),linear-gradient(155deg,rgba(15,24,39,.86),rgba(7,12,21,.94)); z-index:-1; }
.free-trial-copy { padding-left:52px; }
.free-trial-copy h2 { margin:0; font-size:clamp(42px,4.8vw,62px); line-height:1.02; letter-spacing:-.05em; }
.free-trial-copy > p:nth-of-type(2) { max-width:650px; margin:24px 0 0; color:var(--muted); font-size:17px; line-height:1.7; }
.free-trial-actions { display:flex; align-items:center; flex-wrap:wrap; gap:22px; margin-top:32px; }
.free-trial-card { margin-right:40px; padding:30px; border:1px solid rgba(145,177,238,.18); border-radius:28px; background:linear-gradient(155deg,rgba(20,31,49,.94),rgba(9,15,25,.98)); box-shadow:0 34px 90px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.04); }
.free-card-row { display:grid; grid-template-columns:auto 1fr auto; gap:16px; align-items:center; }
.free-card-icon { width:46px; height:46px; border-radius:15px; display:grid; place-items:center; background:rgba(103,143,244,.12); border:1px solid rgba(132,170,255,.16); color:#a8c4ff; font-size:11px; font-weight:800; letter-spacing:.06em; }
.free-card-row strong { display:block; font-size:18px; }
.free-card-row p { margin:5px 0 0; color:#8392a8; font-size:13px; line-height:1.5; }
.free-card-row > b { color:#8290a6; font-size:11px; white-space:nowrap; }
.free-card-row.is-available > b { color:#8eb5ff; }
.free-card-divider { height:1px; background:var(--line); margin:24px 0; }
.free-card-note { margin:26px 0 0; padding-top:20px; border-top:1px solid var(--line); color:#6f7e94; font-size:11px; line-height:1.55; }

.price { display:grid; grid-template-columns:.82fr 1.18fr; gap:82px; align-items:center; }
.price-card { padding:44px; border:1px solid rgba(125,164,255,.26); border-radius:var(--radius-xl); background:radial-gradient(circle at 95% 0,rgba(77,111,255,.21),transparent 38%),linear-gradient(155deg,#121c2c,#0b111c); box-shadow:0 38px 100px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.04); }
.price-top { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; padding-bottom:27px; border-bottom:1px solid var(--line); }
.price-top h3 { margin:8px 0 0; font-size:37px; letter-spacing:-.04em; }
.price-badge { display:flex; align-items:center; gap:10px; padding:10px 13px; border:1px solid rgba(135,169,238,.15); border-radius:15px; background:rgba(104,142,231,.07); }
.price-badge strong { font-size:27px; line-height:1; color:#a9c5ff; }
.price-badge span { color:#8291a7; font-size:9px; line-height:1.25; text-transform:uppercase; letter-spacing:.08em; }
.price-description { color:#91a0b5; line-height:1.6; margin:23px 0 18px; }
.plan-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(170px,100%),1fr)); gap:8px; margin-bottom:25px; }
.plan-option { min-width:0; padding:13px 10px; border:1px solid rgba(255,255,255,.07); border-radius:13px; background:rgba(255,255,255,.025); }
.plan-option strong { display:block; color:#e4ebf7; font-size:12px; line-height:1.25; }
.plan-option span { display:block; margin-top:5px; color:#78879d; font-size:9.5px; line-height:1.25; }
.plan-option.is-best { border-color:rgba(125,163,255,.24); background:rgba(78,112,203,.10); }
.plan-option.is-best span { color:#8eb5ff; }
.price-features { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:13px 24px; margin-bottom:28px; color:#c8d1df; font-size:13px; line-height:1.45; }
.price-features span::first-letter { color:var(--accent); }
.price-note { display:block; text-align:center; margin-top:14px; color:#6e7d93; font-size:10px; line-height:1.5; }

.faq { display:grid; grid-template-columns:.72fr 1.28fr; gap:90px; align-items:start; }
.faq-list { border-top:1px solid var(--line); }
details { border-bottom:1px solid var(--line); }
summary { list-style:none; cursor:pointer; min-height:84px; display:flex; align-items:center; justify-content:space-between; gap:20px; font-size:18px; font-weight:650; transition: color .25s ease; }
summary::-webkit-details-marker { display:none; }
summary:hover, details[open] summary { color:#fff; }
summary span { width:30px; height:30px; border-radius:10px; display:grid; place-items:center; background:rgba(255,255,255,.04); color:#8090a8; transition:transform .35s cubic-bezier(.2,.75,.2,1), background .25s ease, color .25s ease; }
details[open] summary span { transform:rotate(45deg); background:rgba(105,145,239,.12); color:#a9c3ff; }
.faq-answer { display:grid; grid-template-rows:0fr; opacity:0; transition:grid-template-rows .48s cubic-bezier(.2,.75,.2,1), opacity .32s ease; }
.faq-answer > div { overflow:hidden; }
details[open] .faq-answer { grid-template-rows:1fr; opacity:1; }
.faq-answer p { margin:-4px 55px 28px 0; color:#8f9db2; line-height:1.65; transform:translateY(-7px); transition:transform .4s cubic-bezier(.2,.75,.2,1); }
details[open] .faq-answer p { transform:translateY(0); }

.final-cta { min-height:620px; border:1px solid var(--line); border-radius:42px; background:linear-gradient(155deg,rgba(17,27,43,.9),rgba(7,11,18,.96)); overflow:hidden; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding-left:30px; padding-right:30px; }
.final-glow { position:absolute; width:500px; height:500px; border-radius:50%; background:rgba(66,105,255,.24); filter:blur(110px); top:-300px; left:50%; transform:translateX(-50%); }
.final-cta h2 { max-width:850px; position:relative; }
.final-cta > p:nth-of-type(2) { max-width:650px; margin:24px auto 33px; color:var(--muted); font-size:18px; line-height:1.65; position:relative; }
.final-cta .button { position:relative; }

footer { width:min(calc(100% - 96px),var(--container)); margin:0 auto; min-height:150px; padding:40px 0; display:flex; align-items:center; gap:30px; border-top:1px solid var(--line); color:#718096; font-size:12px; }
footer p { margin:0; } footer > span { margin-left:auto; }

.toast { position:fixed; left:50%; bottom:24px; transform:translate(-50%,30px); z-index:60; padding:14px 18px; border:1px solid var(--line-strong); border-radius:14px; background:#121c2a; color:#d7e0ed; box-shadow:var(--shadow); font-size:13px; opacity:0; pointer-events:none; transition:.3s ease; }
.toast.is-visible { opacity:1; transform:translate(-50%,0); }

/* Clean scroll choreography: no blur, one restrained motion language. */
.js .reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .62s ease, transform .76s cubic-bezier(.18,.75,.22,1);
  will-change: opacity, transform;
}
.js .reveal-card { transform: translateY(30px) scale(.985); }
.js .reveal-delay { transition-delay:.10s; }
.js .reveal.is-visible { opacity:1; transform:translateY(0) scale(1); }

/* Stagger the AI-trainer directions after the module enters the viewport. */
.js .practice-explorer .practice-chip { opacity:0; transform:translateY(10px) scale(.985); }
.js .practice-explorer.is-visible .practice-chip { opacity:1; transform:translateY(0) scale(1); transition:opacity .38s ease, transform .5s cubic-bezier(.18,.75,.22,1), background .22s ease, border-color .22s ease, box-shadow .22s ease; }
.js .practice-explorer.is-visible .practice-core-grid .practice-chip:nth-child(1) { transition-delay:.05s; }
.js .practice-explorer.is-visible .practice-core-grid .practice-chip:nth-child(2) { transition-delay:.08s; }
.js .practice-explorer.is-visible .practice-core-grid .practice-chip:nth-child(3) { transition-delay:.11s; }
.js .practice-explorer.is-visible .practice-core-grid .practice-chip:nth-child(4) { transition-delay:.14s; }
.js .practice-explorer.is-visible .practice-core-grid .practice-chip:nth-child(5) { transition-delay:.17s; }
.js .practice-explorer.is-visible .practice-core-grid .practice-chip:nth-child(6) { transition-delay:.20s; }
.js .practice-explorer.is-visible .practice-core-grid .practice-chip:nth-child(7) { transition-delay:.23s; }
.js .practice-explorer.is-visible .practice-core-grid .practice-chip:nth-child(8) { transition-delay:.26s; }
.js .practice-explorer.is-visible .practice-special-grid .practice-chip:nth-child(1) { transition-delay:.31s; }
.js .practice-explorer.is-visible .practice-special-grid .practice-chip:nth-child(2) { transition-delay:.34s; }
.js .practice-explorer.is-visible .practice-special-grid .practice-chip:nth-child(3) { transition-delay:.37s; }
.js .practice-explorer.is-visible .practice-special-grid .practice-chip:nth-child(4) { transition-delay:.40s; }
.js .practice-explorer .practice-panels { opacity:0; transform:translateY(12px); }
.js .practice-explorer.is-visible .practice-panels { opacity:1; transform:translateY(0); transition:opacity .46s ease .24s, transform .58s cubic-bezier(.18,.75,.22,1) .24s; }

@media (max-width: 1080px) {
  .section { width:min(calc(100% - 48px),var(--container)); }
  .hero { grid-template-columns:1fr; text-align:center; padding-top:170px; }
  .hero-copy { max-width:850px; margin:0 auto; }
  .hero-lead { margin-inline:auto; }
  .hero-actions,.trust-row { justify-content:center; }
  .hero-free-note { margin-inline:auto; }
  .hero-visual { margin-top:20px; }
  .system-card { padding:38px; }
  .system-copy h3 { font-size:31px; }
  .editorial-stack { left:38px; right:38px; }
  .window-content { grid-template-columns:1fr; }
  .demo-copy-panel { border-right:0; border-bottom:1px solid var(--line); padding:48px; }
  .demo-product-panel { min-height:560px; }
  .inside { grid-template-columns: 1fr; gap: 44px; }
  .inside-copy { max-width: 720px; }
  .author,.price,.faq { gap:48px; }
  .free-trial { gap:36px; }
  .free-trial-copy { padding-left:34px; }
  .free-trial-card { margin-right:26px; }
  .practice-panel h3 { font-size: 32px; }
  .practice-core-grid { grid-auto-rows:72px; }
}

@media (max-width: 820px) {
  .site-header { inset:12px 0 auto; padding:0 14px; }
  .nav-shell,.site-header.is-scrolled .nav-shell { height:58px; padding:0 8px 0 15px; border-radius:18px; }
  .nav-links,.nav-shell > .button { display:none; }
  .menu-toggle { display:block; }
  .mobile-menu { width:calc(100% - 28px); margin:8px auto 0; padding:12px; border:1px solid var(--line); border-radius:18px; background:rgba(8,13,21,.96); backdrop-filter:blur(20px); flex-direction:column; gap:4px; box-shadow:var(--shadow); }
  .mobile-menu.is-open { display:flex; }
  .mobile-menu > a:not(.button) { padding:13px 11px; color:#c1ccdc; font-size:14px; }
  .section { width:min(calc(100% - 40px),var(--container)); padding:var(--section-space-tablet) 0; }
  .hero { min-height:auto; padding-top:130px; padding-bottom:80px; gap:30px; }
  .hero h1 { font-size:clamp(47px,12vw,66px); }
  .hero-lead { font-size:17px; }
  .hero-actions { flex-direction:column; gap:12px; }
  .hero .button-primary,.hero .button-secondary { width:100%; max-width:360px; }
  .hero-free-note { text-align:center; }
  .trust-row { display:grid; justify-items:start; width:max-content; max-width:100%; margin-inline:auto; }
  .hero-visual { min-height:630px; transform:scale(.9); margin-inline:-40px; }
  .channel-preview { left:50%; margin-left:-270px; top:80px; }
  .progress-pill { right:50%; margin-right:-270px; }
  .statement { padding-top:130px; padding-bottom:130px; }
  .section-heading h2,.statement h2,.inside h2,.author h2,.final-cta h2 { font-size:clamp(37px,10vw,50px); }
  .system-grid,.inside,.author,.price,.faq,.free-trial { grid-template-columns:1fr; }
  .system-card { min-height:700px; }
  .inside,.author,.price,.faq { gap:46px; }
  .free-trial { gap:38px; padding:86px 0; }
  .free-trial::before { inset:18px 0; }
  .free-trial-copy { padding:0 28px; }
  .free-trial-card { margin:0 28px; }
  .practice-core-grid { grid-template-columns:repeat(2,minmax(0,1fr)); grid-auto-rows:62px; }
  .practice-special-grid { grid-template-columns:1fr; }
  .practice-chip { min-height:62px; }
  .practice-chip-special,.practice-chip-duel { min-height:88px; }
  .practice-panels { min-height:0; }
  .practice-panel { padding: 24px 20px 24px; }
  .practice-panel h3 { font-size: 29px; }
  .practice-panel > p { font-size: 16px; }
  .practice-points { grid-template-columns: 1fr; }
  .practice-points li { padding: 13px 0 14px; }
  .author-portrait { min-height:480px; order:2; }
  .author-copy { order:1; }
  .price-card { max-width:620px; }
  .demo-tabs { width:100%; min-width:0; overflow-x:auto; overflow-y:hidden; justify-content:flex-start; overscroll-behavior-inline:contain; scrollbar-width:none; }
  .demo-tabs::-webkit-scrollbar { display:none; }
  .demo-tabs button { white-space:nowrap; }
  .demo-copy-panel { padding:36px 28px; }
  .demo-copy-panel h3 { font-size:34px; }
  .demo-product-panel { min-height:520px; padding:32px 20px; }
  .author-facts { grid-template-columns:1fr; }
  footer { width:calc(100% - 40px); flex-direction:column; align-items:flex-start; gap:16px; }
  footer > span { margin-left:0; }
}

@media (max-width: 560px) {
  .section { width:calc(100% - 36px); padding:var(--section-space-mobile) 0; scroll-margin-top:82px; }
  .brand { font-size:12px; } .brand-mark { width:28px; height:31px; } .brand-mark svg { width:25px; height:25px; }
  .hero h1 { letter-spacing:-.055em; }
  .eyebrow { font-size:10px; }
  .hero-visual { min-height:600px; transform:scale(.76); margin-top:-20px; margin-bottom:-55px; }
  .focus-pill { left: 8px; bottom: 24px; width: 220px; }
  .progress-pill { right: 18px; bottom: 88px; margin-right: 0; }
  .phone { width:330px; }
  .channel-preview { margin-left:-245px; top:105px; }
  .progress-pill { margin-right:0; right:18px; bottom:82px; }
  .orbit-one { width:500px;height:500px }.orbit-two{width:390px;height:390px}
  .statement-note,.section-heading > p:last-child,.inside-copy > p:nth-of-type(2),.author-copy > p,.final-cta > p:nth-of-type(2) { font-size:16px; }
  .section-label-topic { font-size: 12px; gap: 9px; }
  .section-label-topic::after { width: 36px; }
  .statement-author { margin-top: 22px; font-size: 13px; }
  .system-card { padding:29px; min-height:650px; }
  .system-number { font-size:55px; right:24px; }
  .system-copy h3 { font-size:29px; max-width:280px; }
  .system-copy p { font-size:15px; }
  .editorial-stack { left:26px; right:26px; height:270px; }
  .editorial-card { padding:22px; }.editorial-card strong{font-size:21px}
  .bot-dashboard { width:290px; right:18px; bottom:24px; }
  .final-glow { width:100%; }
  .demo-tabs { border-radius:14px; }.demo-tabs button{padding:0 12px;font-size:12px}
  .window-content { min-height:auto; }
  .demo-product-panel { min-height:500px; }
  .training-select,.record-screen,.result-screen { width:calc(100% - 32px); }
  .result-screen { padding:20px; }.result-line{grid-template-columns:100px 1fr 24px;gap:8px}
  .practice-explorer { padding: 12px; border-radius: 24px; }
  .practice-nav { gap: 8px; margin-bottom: 12px; }
  .practice-chip { min-height: 58px; padding: 9px 8px; font-size: 12px; }
  .practice-chip-special,.practice-chip-duel { min-height:86px; }
  .free-trial-copy { padding:0 20px; }
  .free-trial-card { margin:0 18px; padding:24px 20px; }
  .free-card-row { grid-template-columns:auto 1fr; }
  .free-card-row > b { grid-column:2; white-space:normal; }
  .free-trial-actions .button { width:100%; }
  .free-trial-actions { gap:16px; }
  .author-portrait { min-height:520px; }
  .author-photo-caption { left:20px; right:20px; bottom:20px; }
  .price-card { padding:28px; }.price-top{flex-direction:column}.plan-grid{grid-template-columns:repeat(auto-fit,minmax(min(170px,100%),1fr))}.price-features{grid-template-columns:1fr}
  summary { min-height:74px; font-size:16px; }.faq-answer p{margin-right:0}
  .final-cta { min-height:560px; border-radius:28px; padding-left:22px; padding-right:22px; }
  .toast { width:calc(100% - 32px); text-align:center; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; transition-delay:0ms !important; }
  .js .site-header,
  .js .hero-intro > *,
  .js .hero-product-intro .visual-orbit,
  .js .hero-product-intro .phone,
  .js .hero-product-intro .channel-preview,
  .js .hero-product-intro .progress-pill,
  .js .hero-product-intro .focus-pill,
  .js .reveal,
  .js .practice-explorer .practice-chip,
  .js .practice-explorer .practice-panels { opacity:1 !important; transform:none !important; }
  .js .hero-product-intro .phone { transform:rotate(3deg) !important; }
  .js .hero-product-intro .channel-preview { transform:rotate(-7deg) !important; }
  .js .hero-product-intro .progress-pill { transform:rotate(-3deg) !important; opacity:.56 !important; }
  .js .hero-product-intro .focus-pill { transform:rotate(4deg) !important; }
}

.js .practice-explorer.is-visible .practice-chip:hover {
  transform: translateY(-2px) scale(1);
}
.js .practice-explorer.is-visible .practice-chip:active {
  transform: translateY(0) scale(.985);
}


/* Closed channel + interactive material browser. */
.channel-library { display:grid; grid-template-columns:.78fr 1.22fr; gap:74px; align-items:center; }
.channel-library-copy h2 { margin:0; font-size:clamp(44px,5vw,66px); line-height:1.02; letter-spacing:-.052em; font-weight:760; }
.channel-library-copy > p:nth-of-type(2) { margin:24px 0 0; color:var(--muted); font-size:18px; line-height:1.68; }
.channel-browser-nav { display:flex; flex-wrap:wrap; gap:10px; margin-top:28px; }
.channel-filter { min-height:46px; padding:0 16px; border-radius:999px; border:1px solid rgba(255,255,255,.09); background:rgba(255,255,255,.035); color:#cbd6e5; font-size:13px; font-weight:720; letter-spacing:-.01em; cursor:pointer; transition:transform .24s ease,border-color .24s ease,background .24s ease,box-shadow .24s ease,color .24s ease; }
.channel-filter:hover { transform:translateY(-2px); border-color:rgba(123,160,255,.26); background:rgba(255,255,255,.055); }
.channel-filter.is-active { color:#f5f9ff; background:linear-gradient(180deg,rgba(78,112,214,.34),rgba(41,63,126,.28)); border-color:rgba(112,149,255,.36); box-shadow:0 14px 28px rgba(44,74,166,.22); }
.channel-library-note { margin:24px 0 0 !important; padding-top:22px; border-top:1px solid var(--line); color:#8290a5 !important; font-size:14px !important; line-height:1.65 !important; }

.channel-browser { position:relative; border:1px solid rgba(121,150,205,.16); border-radius:38px; background:radial-gradient(circle at 78% 9%,rgba(122,82,255,.20),transparent 29%),radial-gradient(circle at 16% 82%,rgba(69,125,255,.14),transparent 28%),linear-gradient(155deg,rgba(17,27,42,.95),rgba(7,12,20,.99)); overflow:hidden; box-shadow:0 42px 120px rgba(0,0,0,.4); }
.channel-browser::before { content:""; position:absolute; inset:1px; border-radius:37px; border:1px solid rgba(255,255,255,.03); pointer-events:none; }
.channel-browser-stage { position:relative; min-height:780px; padding:34px 30px 22px; overflow:hidden; perspective:1200px; transition:min-height .35s ease; }
.channel-browser-stage[data-active-channel="1"] { min-height:900px; }
.channel-browser-stage[data-active-channel="2"] { min-height:720px; }
.channel-browser-stage[data-active-channel="3"] { min-height:780px; }
.channel-browser-stage::before { content:""; position:absolute; inset:0; opacity:.11; background-image:linear-gradient(rgba(124,153,205,.16) 1px,transparent 1px),linear-gradient(90deg,rgba(124,153,205,.16) 1px,transparent 1px); background-size:46px 46px; mask-image:linear-gradient(to bottom,black,transparent 86%); pointer-events:none; }
.channel-panel { position:absolute; inset:0; opacity:0; visibility:hidden; transition:opacity .42s ease,transform .42s ease,visibility .42s ease; transform:translateY(12px); }
.channel-panel.is-visible { opacity:1; visibility:visible; transform:translateY(0); }
.stack-card { --x:0%; --y:0px; --rot:0deg; --dx:0px; --dy:0px; position:absolute; left:var(--x); top:var(--y); width:228px; margin:0; border-radius:25px; overflow:hidden; border:1px solid rgba(255,255,255,.15); background:#0d131d; box-shadow:0 34px 80px rgba(0,0,0,.44); transform:translate3d(var(--dx),var(--dy),0) rotate(var(--rot)) scale(1); transition:transform .34s ease,box-shadow .34s ease,border-color .34s ease,z-index .01s linear,filter .34s ease; cursor:grab; user-select:none; touch-action:none; will-change:transform; }
.stack-card::after { content:""; position:absolute; inset:-1px; background:radial-gradient(circle at 50% 0,rgba(138,173,255,.20),transparent 44%),radial-gradient(circle at 50% 100%,rgba(113,72,255,.14),transparent 38%); opacity:0; transition:opacity .28s ease; pointer-events:none; }
.stack-card:hover { border-color:rgba(117,155,255,.32); }
.stack-card:active { cursor:grabbing; }
.stack-card.is-front { z-index:40 !important; transform:translate3d(var(--dx),calc(var(--dy) - 16px),0) rotate(var(--rot)) scale(1.06); box-shadow:0 52px 120px rgba(0,0,0,.56),0 0 0 1px rgba(134,169,255,.12); border-color:rgba(132,168,255,.38); filter:drop-shadow(0 0 24px rgba(104,138,255,.18)); }
.stack-card.is-front::after { opacity:1; }
.stack-card.is-dragging { transition:none; cursor:grabbing; z-index:60 !important; box-shadow:0 58px 130px rgba(0,0,0,.62); transform:translate3d(var(--dx),var(--dy),0) rotate(var(--rot)) scale(1.06) !important; }
.stack-card img { display:block; width:100%; height:auto; object-fit:contain; background:#070c13; }
.stack-card figcaption { min-height:38px; padding:10px 14px; display:flex; align-items:center; background:linear-gradient(180deg,#121a28,#0d131e); }
.stack-card figcaption span { color:#9bb7ff; font-size:10px; font-weight:800; letter-spacing:.11em; text-transform:uppercase; }
.stack-card-art { min-height:258px; padding:20px; display:grid; align-content:end; gap:12px; background:radial-gradient(circle at 80% 0,rgba(119,155,255,.14),transparent 28%),linear-gradient(155deg,#171f31,#101522); }
.stack-card-art span { color:#9dbcff; font-size:10px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.stack-card-art strong { display:block; font-size:28px; line-height:1.04; letter-spacing:-.04em; }
.stack-card-art small { color:#aab7ca; font-size:13px; line-height:1.48; }
.audio-card .stack-card-art { background:radial-gradient(circle at 90% 0,rgba(119,80,255,.22),transparent 30%),linear-gradient(160deg,#1a1f39,#101423); }
.channel-panel[data-channel-screen="1"] .lecture-image-card { width:190px; }
.channel-panel[data-channel-screen="1"] .lecture-image-card img { width:100%; height:auto; object-fit:contain; }
.channel-panel[data-channel-screen="2"] .audio-card { width:252px; }
.channel-panel[data-channel-screen="3"] .post-cover-card { width:176px; }
.waveform { display:flex; align-items:flex-end; gap:4px; height:32px; margin-top:2px; }
.waveform i { width:6px; border-radius:999px; background:linear-gradient(180deg,#8fb1ff,#4f73d8); }
.waveform i:nth-child(1){height:42%}.waveform i:nth-child(2){height:74%}.waveform i:nth-child(3){height:58%}.waveform i:nth-child(4){height:100%}.waveform i:nth-child(5){height:65%}.waveform i:nth-child(6){height:82%}.waveform i:nth-child(7){height:48%}

/* Centered layered composition used by every material type. */
.pos-1  { --x:7%;  --y:178px; --rot:-13deg; z-index:4; }
.pos-2  { --x:19%; --y:56px;  --rot:-8deg;  z-index:7; }
.pos-3  { --x:35%; --y:28px;  --rot:-3deg;  z-index:9; }
.pos-4  { --x:41%; --y:230px; --rot:4deg;   z-index:22; }
.pos-5  { --x:57%; --y:56px;  --rot:7deg;   z-index:10; }
.pos-6  { --x:70%; --y:166px; --rot:12deg;  z-index:6; }
.pos-7  { --x:57%; --y:360px; --rot:7deg;   z-index:5; }
.pos-8  { --x:24%; --y:368px; --rot:-6deg;  z-index:8; }
.pos-9  { --x:72%; --y:350px; --rot:4deg;   z-index:3; }
.pos-10 { --x:5%;  --y:350px; --rot:-11deg; z-index:2; }
.pos-11 { --x:11%; --y:86px;  --rot:-11deg; z-index:2; }
.pos-12 { --x:26%; --y:12px;  --rot:-6deg;  z-index:3; }
.pos-13 { --x:43%; --y:10px;  --rot:0deg;   z-index:5; }
.pos-14 { --x:60%; --y:22px;  --rot:6deg;   z-index:4; }
.pos-15 { --x:76%; --y:96px;  --rot:11deg;  z-index:2; }
.pos-16 { --x:78%; --y:254px; --rot:12deg;  z-index:2; }
.pos-17 { --x:66%; --y:430px; --rot:8deg;   z-index:2; }
.pos-18 { --x:49%; --y:458px; --rot:3deg;   z-index:4; }
.pos-19 { --x:31%; --y:446px; --rot:-3deg;  z-index:3; }
.pos-20 { --x:13%; --y:406px; --rot:-8deg;  z-index:2; }
.channel-browser-footer { position:relative; z-index:2; display:flex; justify-content:space-between; gap:24px; align-items:flex-end; padding:0 26px 24px; }
.channel-browser-copy { max-width:520px; display:grid; gap:8px; }
.channel-browser-copy strong { font-size:20px; letter-spacing:-.03em; }
.channel-browser-copy p { margin:0; color:#8e9cb0; font-size:14px; line-height:1.6; }
.channel-browser-hint { max-width:280px; color:#7d8da3; font-size:12px; line-height:1.45; text-align:right; }

/* Existing compact channel preview inside the two-part system card. */
.channel-mini-covers { position:absolute; left:50px; right:50px; bottom:28px; height:260px; perspective:900px; }
.mini-cover { position:absolute; width:190px; aspect-ratio:1/1.03; margin:0; border-radius:21px; overflow:hidden; border:1px solid rgba(255,255,255,.13); box-shadow:0 26px 60px rgba(0,0,0,.34); background:#0d121a; }
.mini-cover img { width:100%; height:100%; object-fit:cover; }
.mini-cover-one { left:4%; top:34px; transform:rotate(-8deg); opacity:.62; }
.mini-cover-two { left:31%; top:8px; z-index:2; transform:rotate(-1deg); }
.mini-cover-three { right:2%; top:36px; transform:rotate(8deg); opacity:.72; }
.mini-cover-count { position:absolute; left:50%; bottom:0; transform:translateX(-50%); white-space:nowrap; padding:9px 13px; border:1px solid rgba(255,255,255,.09); border-radius:999px; background:rgba(8,13,22,.86); color:#9ba9bd; font-size:10px; letter-spacing:.04em; }

@media (max-width:1080px) {
  .channel-library { grid-template-columns:1fr; gap:46px; }
  .channel-library-copy { max-width:760px; }
  .channel-browser-stage { min-height:740px; }
  .channel-browser-stage[data-active-channel="1"] { min-height:860px; }
  .channel-browser-stage[data-active-channel="2"] { min-height:700px; }
  .channel-browser-stage[data-active-channel="3"] { min-height:760px; }
}
@media (max-width:820px) {
  .channel-library-copy h2 { font-size:clamp(37px,10vw,50px); }
  .channel-browser-stage { min-height:700px; padding:28px 20px 18px; }
  .channel-browser-stage[data-active-channel="1"] { min-height:820px; }
  .channel-browser-stage[data-active-channel="2"] { min-height:660px; }
  .channel-browser-stage[data-active-channel="3"] { min-height:700px; }
  .stack-card { width:205px; }
  .channel-panel[data-channel-screen="1"] .lecture-image-card { width:178px; }
  .channel-panel[data-channel-screen="2"] .audio-card { width:220px; }
  .channel-panel[data-channel-screen="3"] .post-cover-card { width:152px; }
  .stack-card-art { min-height:230px; }
  .stack-card-art strong { font-size:24px; }
  .channel-browser-footer { padding:0 18px 18px; }
}
@media (max-width:640px) {
  .channel-browser-nav { gap:8px; }
  .channel-filter { min-height:42px; padding:0 14px; font-size:12px; }
  .channel-library-copy > p:nth-of-type(2) { font-size:16px; }
  .channel-browser-stage { min-height:600px; }
  .channel-browser-stage[data-active-channel="1"] { min-height:760px; }
  .channel-browser-stage[data-active-channel="2"] { min-height:580px; }
  .channel-browser-stage[data-active-channel="3"] { min-height:620px; }
  .stack-card { width:148px; border-radius:18px; }
  .channel-panel[data-channel-screen="1"] .lecture-image-card { width:132px; }
  .channel-panel[data-channel-screen="2"] .audio-card { width:170px; }
  .channel-panel[data-channel-screen="3"] .post-cover-card { width:118px; }
  .stack-card figcaption { min-height:32px; padding:8px 10px; }
  .stack-card figcaption span { font-size:8px; }
  .stack-card-art { min-height:172px; padding:13px; }
  .stack-card-art strong { font-size:17px; }
  .stack-card-art small { font-size:10px; }
  .waveform { height:22px; gap:3px; }
  .waveform i { width:4px; }
  .pos-1  { --x:2%;  --y:138px; }
  .pos-2  { --x:15%; --y:48px; }
  .pos-3  { --x:29%; --y:18px; }
  .pos-4  { --x:38%; --y:180px; }
  .pos-5  { --x:53%; --y:48px; }
  .pos-6  { --x:68%; --y:132px; }
  .pos-7  { --x:54%; --y:272px; }
  .pos-8  { --x:22%; --y:288px; }
  .pos-9  { --x:69%; --y:260px; }
  .pos-10 { --x:1%;  --y:264px; }
  .pos-11 { --x:8%;  --y:72px; }
  .pos-12 { --x:21%; --y:8px; }
  .pos-13 { --x:37%; --y:4px; }
  .pos-14 { --x:53%; --y:16px; }
  .pos-15 { --x:70%; --y:74px; }
  .pos-16 { --x:74%; --y:194px; }
  .pos-17 { --x:62%; --y:324px; }
  .pos-18 { --x:46%; --y:346px; }
  .pos-19 { --x:29%; --y:336px; }
  .pos-20 { --x:12%; --y:306px; }
  .channel-browser-footer { display:grid; gap:12px; align-items:start; }
  .channel-browser-copy strong { font-size:18px; }
  .channel-browser-hint { max-width:none; text-align:left; font-size:11px; }
  .channel-mini-covers { left:26px; right:26px; bottom:20px; height:245px; }
  .mini-cover { width:145px; }
  .mini-cover-one { left:0; top:48px; }.mini-cover-two{left:50%;top:22px;transform:translateX(-50%) rotate(-1deg)}.mini-cover-three{right:0;top:48px}
  .mini-cover-count { font-size:9px; }
}

/* v1.18: stable material canvas, product dashboard, realistic Telegram flow and author social links. */

/* Hero phone: messages live in a normal vertical chat flow. */
.hero-visual { min-height: 720px; }
.phone { margin-left: 72px; height: 690px; }
.chat { position:relative; flex:1; overflow:hidden; padding:0; background:radial-gradient(circle at 100% 0,rgba(58,91,157,.13),transparent 32%),linear-gradient(180deg,#0c1522 0%,#0b1320 100%); }
.chat-scroll { height:100%; overflow:hidden; padding:16px 12px 26px; display:flex; flex-direction:column; gap:10px; scroll-behavior:smooth; }
.chat-scroll::before { content:""; position:absolute; inset:0; opacity:.12; background-image:radial-gradient(circle,#55709b 1px,transparent 1px); background-size:28px 28px; pointer-events:none; }
.chat-scroll > * { position:relative; z-index:1; flex:0 0 auto; }
.day-label { margin:0 auto 4px; }
.tg-message { position:relative; align-self:flex-start; width:auto; max-width:86%; padding:12px 13px 10px; border-radius:15px; background:linear-gradient(180deg,#182438,#141f31); border-bottom-left-radius:5px; box-shadow:0 9px 24px rgba(0,0,0,.18); font-size:9.5px; line-height:1.45; opacity:0; transform:translateY(14px) scale(.985); transition:opacity .48s ease,transform .55s cubic-bezier(.2,.75,.2,1); }
.tg-message.is-visible { opacity:1; transform:translateY(0) scale(1); }
.tg-message strong { display:block; margin:6px 0 5px; font-size:12.5px; line-height:1.25; }
.tg-message p { margin:0; color:#acb8c9; }
.tg-message p + p { margin-top:6px; }
.tg-message time { display:block; margin-top:7px; color:#6f7d91; font-size:7.5px; text-align:right; }
.tg-message-user { align-self:flex-end; border-bottom-left-radius:15px; border-bottom-right-radius:5px; background:linear-gradient(180deg,#285b52,#224d46); }
.tg-voice { width:76%; display:grid; grid-template-columns:auto 1fr auto; gap:8px; align-items:center; }
.tg-voice .voice-meta { display:grid; justify-items:end; gap:2px; }
.tg-voice .voice-meta span,.tg-voice .voice-meta time { margin:0; color:#a8d8cc; font-size:7.5px; }
.tg-keyboard { display:grid; grid-template-columns:1fr; gap:6px; margin-top:9px; }
.tg-keyboard-two { grid-template-columns:repeat(2,minmax(0,1fr)); }
.tg-keyboard button { min-width:0; min-height:31px; padding:6px 8px; border:1px solid rgba(123,160,255,.14); border-radius:9px; background:rgba(80,123,240,.15); color:#dce8ff; font-size:8px; transition:background .22s ease,box-shadow .22s ease,transform .22s ease; }
.tg-keyboard button.is-pressed { background:rgba(74,121,238,.42); box-shadow:0 0 0 1px rgba(133,171,255,.34),0 8px 22px rgba(57,92,194,.25); transform:scale(.985); }
.transcript-text { font-style:italic; }
.analysis-message { max-width:92%; }
.meta-row { display:flex; gap:10px; margin-top:8px; color:#8796aa; font-size:7.5px; }
.score-row { margin-top:8px; }
.score-row strong { font-size:18px; }
.meter { margin:5px 0 9px; }
.focus-pill { left:-54px; bottom:20px; width:210px; transform:rotate(2deg); }
.progress-pill { right:-12px; bottom:82px; width:202px; }
.channel-preview { left:-24px; top:62px; width:288px; }

/* Cleaner weekly dashboard inside the Telegram-bot card. */
.bot-dashboard { position:absolute; right:34px; bottom:34px; width:360px; padding:20px; border-radius:24px; border:1px solid rgba(143,174,235,.15); background:linear-gradient(155deg,rgba(20,31,49,.96),rgba(9,15,25,.99)); box-shadow:0 30px 80px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.035); }
.bot-dashboard-head { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; }
.bot-dashboard-head > div { display:grid; gap:5px; }
.bot-dashboard-head span { color:#8594aa; font-size:10px; letter-spacing:.04em; }
.bot-dashboard-head strong { font-size:29px; line-height:1; letter-spacing:-.05em; }
.bot-dashboard-head strong small { color:#77869b; font-size:12px; font-weight:600; letter-spacing:0; }
.modes-badge { padding:9px 11px; border:1px solid rgba(121,161,255,.18); border-radius:13px; background:rgba(86,126,226,.09); color:#a9c4ff; font-size:10px; white-space:nowrap; }
.bot-dashboard-chart { position:relative; height:92px; margin:18px 0 14px; padding:8px 4px 20px; }
.chart-grid { position:absolute; inset:0 0 20px; background:repeating-linear-gradient(to bottom,rgba(160,182,224,.08) 0 1px,transparent 1px 22px); }
.chart-bars { position:relative; height:100%; display:grid; grid-template-columns:repeat(7,1fr); gap:9px; align-items:end; }
.chart-bars i { height:var(--h); border-radius:5px 5px 2px 2px; background:linear-gradient(180deg,#8db7ff,#4e6ed7); box-shadow:0 0 18px rgba(79,111,218,.13); }
.chart-days { position:absolute; left:0; right:0; bottom:0; display:grid; grid-template-columns:repeat(7,1fr); gap:9px; color:#6f7e93; font-size:8px; text-align:center; }
.bot-dashboard-list { display:grid; gap:0; border-top:1px solid rgba(255,255,255,.06); }
.bot-dashboard-list div { min-height:38px; display:flex; align-items:center; justify-content:space-between; gap:16px; border-bottom:1px solid rgba(255,255,255,.055); }
.bot-dashboard-list span { color:#8190a5; font-size:9.5px; }
.bot-dashboard-list b { color:#e1e9f6; font-size:10.5px; text-align:right; }

/* Stable, compact cover canvas. Description lives below the tabs, not on the canvas. */
.channel-library { grid-template-columns:.82fr 1.18fr; gap:62px; }
.channel-library-note { min-height:74px; margin-top:20px !important; padding-top:18px; transition:opacity .22s ease,transform .22s ease; }
.channel-library-note.is-changing { opacity:.35; transform:translateY(3px); }
.channel-browser { border-radius:32px; }
.channel-browser-stage,.channel-browser-stage[data-active-channel="0"],.channel-browser-stage[data-active-channel="1"],.channel-browser-stage[data-active-channel="2"],.channel-browser-stage[data-active-channel="3"] { min-height:620px; height:620px; padding:22px; transition:none; }
.stack-card { width:205px; }
.channel-panel[data-channel-screen="1"] .lecture-image-card { width:166px; }
.channel-panel[data-channel-screen="2"] .audio-card { width:218px; }
.channel-panel[data-channel-screen="3"] .post-cover-card { width:148px; }
.stack-card figcaption { min-height:36px; justify-content:space-between; gap:10px; }
.stack-card figcaption time { color:#7d8ba0; font-size:9px; white-space:nowrap; }
/* Compact centered pile for every content type. */
.pos-1  { --x:7%;  --y:170px; --rot:-12deg; }
.pos-2  { --x:18%; --y:70px;  --rot:-8deg; }
.pos-3  { --x:33%; --y:26px;  --rot:-3deg; }
.pos-4  { --x:42%; --y:178px; --rot:3deg; }
.pos-5  { --x:57%; --y:62px;  --rot:7deg; }
.pos-6  { --x:71%; --y:164px; --rot:11deg; }
.pos-7  { --x:56%; --y:302px; --rot:7deg; }
.pos-8  { --x:25%; --y:306px; --rot:-6deg; }
.pos-9  { --x:71%; --y:292px; --rot:4deg; }
.pos-10 { --x:5%;  --y:292px; --rot:-10deg; }
.pos-11 { --x:9%;  --y:92px;  --rot:-11deg; }
.pos-12 { --x:22%; --y:22px;  --rot:-7deg; }
.pos-13 { --x:38%; --y:12px;  --rot:-1deg; }
.pos-14 { --x:54%; --y:26px;  --rot:5deg; }
.pos-15 { --x:70%; --y:86px;  --rot:10deg; }
.pos-16 { --x:76%; --y:210px; --rot:12deg; }
.pos-17 { --x:64%; --y:320px; --rot:8deg; }
.pos-18 { --x:47%; --y:338px; --rot:3deg; }
.pos-19 { --x:30%; --y:330px; --rot:-3deg; }
.pos-20 { --x:13%; --y:306px; --rot:-8deg; }

/* Minimal public-channel links in the author section. */
.author-socials { display:flex; flex-wrap:wrap; gap:10px; margin-top:26px; }
.author-socials a { min-height:44px; display:inline-flex; align-items:center; gap:10px; padding:0 14px; border:1px solid rgba(143,174,235,.13); border-radius:13px; background:rgba(255,255,255,.025); color:#aebbd0; font-size:12px; font-weight:700; transition:transform .22s ease,border-color .22s ease,background .22s ease,color .22s ease; }
.author-socials a:hover { transform:translateY(-2px); border-color:rgba(128,164,255,.28); background:rgba(81,120,216,.08); color:#fff; }
.author-socials svg { width:19px; height:19px; fill:none; stroke:#8fb2ff; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.author-socials a:last-child svg path:first-child { fill:none; }

@media (max-width:1080px) {
  .channel-browser-stage,.channel-browser-stage[data-active-channel="0"],.channel-browser-stage[data-active-channel="1"],.channel-browser-stage[data-active-channel="2"],.channel-browser-stage[data-active-channel="3"] { min-height:600px; height:600px; }
  .phone { margin-left:38px; }
  .focus-pill { left:-20px; }
}
@media (max-width:820px) {
  .hero-visual { min-height:700px; }
  .phone { margin-left:0; }
  .focus-pill { left:50%; margin-left:-270px; bottom:18px; }
  .channel-browser-stage,.channel-browser-stage[data-active-channel="0"],.channel-browser-stage[data-active-channel="1"],.channel-browser-stage[data-active-channel="2"],.channel-browser-stage[data-active-channel="3"] { min-height:560px; height:560px; }
  .stack-card { width:180px; }
  .channel-panel[data-channel-screen="1"] .lecture-image-card { width:148px; }
  .channel-panel[data-channel-screen="2"] .audio-card { width:192px; }
  .channel-panel[data-channel-screen="3"] .post-cover-card { width:130px; }
  .bot-dashboard { width:320px; right:24px; }
}
@media (max-width:560px) {
  .hero-visual { min-height:650px; }
  .phone { height:690px; }
  .channel-preview { left:50%; margin-left:-250px; width:260px; }
  .focus-pill { display:none; }
  .progress-pill { right:4px; bottom:54px; width:184px; }
  .channel-browser-stage,.channel-browser-stage[data-active-channel="0"],.channel-browser-stage[data-active-channel="1"],.channel-browser-stage[data-active-channel="2"],.channel-browser-stage[data-active-channel="3"] { min-height:500px; height:500px; }
  .stack-card { width:138px; }
  .channel-panel[data-channel-screen="1"] .lecture-image-card { width:114px; }
  .channel-panel[data-channel-screen="2"] .audio-card { width:150px; }
  .channel-panel[data-channel-screen="3"] .post-cover-card { width:100px; }
  .pos-1{--x:2%;--y:125px}.pos-2{--x:14%;--y:44px}.pos-3{--x:28%;--y:16px}.pos-4{--x:39%;--y:148px}.pos-5{--x:53%;--y:46px}.pos-6{--x:68%;--y:120px}.pos-7{--x:54%;--y:232px}.pos-8{--x:22%;--y:238px}.pos-9{--x:69%;--y:226px}.pos-10{--x:1%;--y:220px}.pos-11{--x:8%;--y:66px}.pos-12{--x:20%;--y:8px}.pos-13{--x:36%;--y:4px}.pos-14{--x:52%;--y:14px}.pos-15{--x:69%;--y:66px}.pos-16{--x:74%;--y:164px}.pos-17{--x:62%;--y:258px}.pos-18{--x:46%;--y:276px}.pos-19{--x:29%;--y:266px}.pos-20{--x:12%;--y:244px}
  .bot-dashboard { width:calc(100% - 36px); right:18px; bottom:18px; padding:17px; }
  .bot-dashboard-head strong { font-size:25px; }
  .modes-badge { font-size:9px; }
  .author-socials a { flex:1 1 130px; justify-content:center; }
}

/* v1.18: stable material canvas, content modals, detailed bot showcase and compact access. */
.system-card {
  min-height: 720px;
  display: flex;
  flex-direction: column;
}
.system-copy { max-width: 520px; }
.system-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 24px;
  color: #9bb9ff;
  font-size: 13px;
  font-weight: 750;
  text-decoration: none;
  transition: color .22s ease, transform .22s ease;
}
.system-more:hover { color: #fff; transform: translateX(3px); }
.system-more span { font-size: 16px; }
.bot-card { gap: 26px; }
.bot-analysis-preview {
  position: relative;
  z-index: 2;
  width: 100%;
  margin-top: auto;
  padding: 22px;
  border: 1px solid rgba(142,174,235,.15);
  border-radius: 23px;
  background: linear-gradient(155deg,rgba(20,31,49,.96),rgba(9,15,25,.99));
  box-shadow: 0 28px 70px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.035);
}
.bot-analysis-top { display:flex; align-items:flex-end; justify-content:space-between; gap:18px; padding-bottom:16px; border-bottom:1px solid rgba(255,255,255,.07); }
.bot-analysis-top span { color:#8e9db2; font-size:11px; font-weight:700; letter-spacing:.04em; }
.bot-analysis-top b { color:#93b6ff; font-size:27px; line-height:1; letter-spacing:-.04em; }
.bot-analysis-top small { color:#718198; font-size:11px; }
.analysis-criteria { display:grid; gap:10px; margin-top:16px; }
.analysis-criteria > div { display:grid; grid-template-columns:138px 1fr 20px; gap:10px; align-items:center; }
.analysis-criteria span { color:#aeb9c9; font-size:10px; }
.analysis-criteria i { display:block; height:5px; border-radius:99px; overflow:hidden; background:rgba(255,255,255,.06); }
.analysis-criteria i b { display:block; width:var(--score); height:100%; border-radius:inherit; background:linear-gradient(90deg,#73a5ff,#516fea); }
.analysis-criteria strong { color:#e9effa; font-size:11px; text-align:right; }
.analysis-focus { margin-top:17px; padding:14px 15px; border:1px solid rgba(118,157,255,.12); border-radius:14px; background:rgba(78,112,206,.08); }
.analysis-focus span { color:#83aaff; font-size:9px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }
.analysis-focus p { margin:7px 0 0; color:#c0cad9; font-size:11px; line-height:1.45; }
.card-kicker { font-size:13px; }

/* The canvas remains strictly identical for every material category. */
.channel-browser-stage,
.channel-browser-stage[data-active-channel="0"],
.channel-browser-stage[data-active-channel="1"],
.channel-browser-stage[data-active-channel="2"],
.channel-browser-stage[data-active-channel="3"] {
  min-height: 600px !important;
  height: 600px !important;
  max-height: 600px !important;
  padding: 22px;
  overflow: hidden;
  transition: none !important;
}
.channel-panel { height: 100%; overflow: hidden; }
.channel-panel[data-channel-screen="2"] .audio-card-primary { left:50%; top:50%; transform:translate(-50%,-50%) rotate(-2deg); }
.channel-panel[data-channel-screen="2"] .audio-card-primary.is-front { transform:translate(-50%,calc(-50% - 14px)) rotate(-2deg) scale(1.05); }
.channel-library-note { min-height: 76px; }
.stack-card[data-material-key] { cursor: pointer; }
.stack-card[data-material-key].is-dragging { cursor: grabbing; }

/* Universal popup for guides, lectures and audio podcasts. */
.material-modal[hidden], .subscription-modal[hidden] { display:none; }
.material-modal, .subscription-modal {
  position:fixed;
  inset:0;
  z-index:200;
  display:grid;
  place-items:center;
  padding:24px;
}
.modal-backdrop {
  position:absolute;
  inset:0;
  border:0;
  background:rgba(2,7,14,.78);
  backdrop-filter: blur(10px);
  cursor:pointer;
}
.material-dialog {
  position:relative;
  z-index:1;
  width:min(1040px,100%);
  height:min(690px,88vh);
  display:grid;
  grid-template-columns:minmax(300px,.78fr) minmax(0,1.22fr);
  gap:0;
  overflow:hidden;
  border:1px solid rgba(137,170,237,.17);
  border-radius:30px;
  background:linear-gradient(155deg,rgba(17,27,42,.985),rgba(7,12,20,.995));
  box-shadow:0 54px 150px rgba(0,0,0,.58),inset 0 1px 0 rgba(255,255,255,.035);
}
.modal-close {
  position:absolute;
  right:18px;
  top:18px;
  z-index:4;
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.09);
  border-radius:50%;
  background:rgba(11,18,29,.82);
  color:#eef4ff;
  font-size:25px;
  cursor:pointer;
}
.material-preview {
  min-width:0;
  display:grid;
  place-items:center;
  padding:46px 34px;
  border-right:1px solid rgba(255,255,255,.07);
  background:radial-gradient(circle at 50% 30%,rgba(74,112,214,.16),transparent 48%),rgba(7,12,20,.62);
}
.material-preview img { display:block; max-width:100%; max-height:560px; object-fit:contain; border-radius:22px; box-shadow:0 35px 90px rgba(0,0,0,.44); }
.material-preview .modal-audio-art { width:min(100%,330px); min-height:390px; display:grid; align-content:end; gap:18px; padding:30px; border:1px solid rgba(140,170,235,.15); border-radius:25px; background:radial-gradient(circle at 85% 0,rgba(115,80,255,.24),transparent 32%),linear-gradient(155deg,#1a2238,#0d1422); box-shadow:0 35px 90px rgba(0,0,0,.42); }
.modal-audio-art span { color:#9dbcff; font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.11em; }
.modal-audio-art strong { font-size:32px; line-height:1.04; letter-spacing:-.04em; }
.modal-audio-wave { display:flex; align-items:flex-end; gap:6px; height:62px; }
.modal-audio-wave i { width:8px; border-radius:99px; background:linear-gradient(180deg,#91b5ff,#526fdb); }
.modal-audio-wave i:nth-child(1){height:32%}.modal-audio-wave i:nth-child(2){height:68%}.modal-audio-wave i:nth-child(3){height:46%}.modal-audio-wave i:nth-child(4){height:92%}.modal-audio-wave i:nth-child(5){height:58%}.modal-audio-wave i:nth-child(6){height:78%}.modal-audio-wave i:nth-child(7){height:40%}.modal-audio-wave i:nth-child(8){height:63%}
.material-content { min-width:0; display:flex; flex-direction:column; padding:48px 48px 34px; }
.material-meta { display:flex; align-items:center; gap:14px; padding-right:48px; color:#83aaff; font-size:10px; font-weight:800; letter-spacing:.11em; text-transform:uppercase; }
.material-meta time { color:#7f8da2; font-weight:700; letter-spacing:.04em; }
.material-content h3 { margin:15px 52px 22px 0; font-size:36px; line-height:1.08; letter-spacing:-.04em; }
.material-scroll { min-height:0; overflow:auto; padding-right:12px; color:#aeb9c9; font-size:15px; line-height:1.62; scrollbar-width:thin; scrollbar-color:#344560 transparent; }
.material-scroll p { margin:0 0 18px; }
.material-scroll h4 { margin:26px 0 12px; color:#f2f6ff; font-size:15px; }
.material-benefits, .material-timeline { list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.material-benefits li { padding:12px 14px; border:1px solid rgba(255,255,255,.06); border-radius:13px; background:rgba(255,255,255,.025); color:#c3ccda; }
.material-benefits li::before { content:"✓"; margin-right:9px; color:#84aaff; }
.material-timeline li { display:grid; grid-template-columns:58px 1fr; gap:13px; padding:10px 0; border-bottom:1px solid rgba(255,255,255,.06); }
.material-timeline time { color:#87adff; font-size:12px; font-weight:800; }
.material-timeline span { color:#bec7d5; }
.material-channel-note { margin-top:22px !important; padding:15px 16px; border-left:2px solid #719dff; border-radius:0 12px 12px 0; background:rgba(83,124,255,.07); color:#cbd4e1; }
body.is-modal-open { overflow:hidden; }

/* Detailed five-screen Telegram-bot showcase. */
.section-label-large { font-size:14px; }
.demo-stage { margin-top:34px; }
.demo-tabs { width:100%; justify-content:center; flex-wrap:wrap; }
.demo-tabs button { flex:0 1 auto; }
.demo-window-label { min-height:56px; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:18px; padding:0 24px; border-bottom:1px solid var(--line); }
.demo-window-label span { color:#8fb2ff; font-size:13px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.demo-window-label b { color:#738198; font-size:11px; font-weight:650; justify-self:end; }
.demo-platform-switch { justify-self:center; display:inline-flex; align-items:center; gap:6px; padding:4px; border:1px solid rgba(255,255,255,.08); border-radius:13px; background:rgba(255,255,255,.03); }
.demo-platform-switch button { min-height:34px; padding:0 16px; border:0; border-radius:10px; background:transparent; color:#8292a7; font-size:12px; font-weight:650; cursor:pointer; transition:.2s ease; }
.demo-platform-switch button.is-active { background:rgba(87,124,224,.18); color:#f3f7ff; box-shadow:inset 0 0 0 1px rgba(127,161,255,.18); }
.window-content { min-height:650px; }
.training-select,.record-screen,.result-screen,.game-screen,.recommend-screen,.telegram-screen {
  width:min(100%,460px);
  position:absolute;
  opacity:0;
  transform:translateY(20px) scale(.97);
  pointer-events:none;
  transition:opacity .45s ease,transform .45s ease;
}
.training-select.is-visible,.record-screen.is-visible,.result-screen.is-visible,.game-screen.is-visible,.recommend-screen.is-visible,.telegram-screen.is-visible { opacity:1; transform:translateY(0) scale(1); pointer-events:auto; }
.result-screen-detailed { padding:24px; }
.result-screen-detailed .result-line { grid-template-columns:138px 1fr 22px; margin-top:13px; }
.result-screen-detailed .next-focus { margin-top:17px; }
.game-screen,.recommend-screen { padding:25px; border:1px solid var(--line); border-radius:23px; background:rgba(15,24,38,.95); box-shadow:0 24px 60px rgba(0,0,0,.28); }
.game-level-head,.recommend-head { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; }
.game-level-head > div,.recommend-head > div { display:grid; gap:6px; }
.game-level-head span,.recommend-head span { color:#8292a8; font-size:10px; text-transform:uppercase; letter-spacing:.09em; }
.game-level-head strong,.recommend-head strong { font-size:18px; line-height:1.25; }
.game-level-head > b { color:#9fbdff; font-size:28px; }
.recommend-head > b { padding:7px 10px; border:1px solid rgba(121,161,255,.15); border-radius:11px; color:#a7c2ff; background:rgba(83,124,255,.08); font-size:11px; }
.xp-track { height:8px; margin:17px 0 20px; overflow:hidden; border-radius:99px; background:rgba(255,255,255,.06); }
.xp-track i { display:block; width:var(--xp); height:100%; background:linear-gradient(90deg,#7ea8ff,#516feb); }
.game-goal { padding:15px; border:1px solid rgba(113,151,255,.13); border-radius:15px; background:rgba(73,106,197,.08); }
.game-goal span,.month-dynamics > span,.recommend-summary span,.recommend-columns span,.recommend-next span { color:#86aaff; font-size:9px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }
.game-goal strong { display:block; margin-top:7px; font-size:15px; }
.game-goal p { margin:5px 0 0; color:#8d9bb0; font-size:11px; }
.game-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:12px; }
.game-grid > div { padding:13px; border:1px solid rgba(255,255,255,.06); border-radius:13px; background:rgba(255,255,255,.025); display:grid; gap:5px; }
.game-grid span { color:#8796aa; font-size:9px; }
.game-grid strong { font-size:16px; }
.game-grid small { color:#727f92; font-size:9px; line-height:1.35; }
.month-dynamics { margin-top:12px; padding-top:13px; border-top:1px solid rgba(255,255,255,.07); }
.month-bars { height:52px; display:flex; align-items:flex-end; gap:12px; margin:10px 0 7px; }
.month-bars i { flex:1; height:var(--h); border-radius:4px 4px 1px 1px; background:linear-gradient(180deg,#8ab2ff,#506fda); }
.month-dynamics small { color:#77869b; font-size:9px; }
.recommend-summary { margin-top:18px; padding:15px; border:1px solid rgba(255,255,255,.065); border-radius:15px; background:rgba(255,255,255,.025); }
.recommend-summary p { margin:8px 0 0; color:#c0cad8; font-size:12px; line-height:1.48; }
.recommend-columns { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:10px; }
.recommend-columns > div { display:grid; gap:7px; padding:13px; border:1px solid rgba(255,255,255,.06); border-radius:13px; background:rgba(255,255,255,.022); }
.recommend-columns b { color:#c6cfdd; font-size:10px; line-height:1.3; }
.recommend-next { margin-top:10px; padding:14px; border:1px solid rgba(113,151,255,.14); border-radius:14px; background:rgba(75,108,202,.08); }
.recommend-next strong { display:block; margin-top:7px; color:#a9c4ff; font-size:13px; }
.recommend-next p { margin:6px 0 0; color:#aab5c6; font-size:10.5px; line-height:1.42; }

.telegram-screen { display:grid; place-items:center; }
.telegram-shell {
  width:min(100%,390px);
  height:560px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:28px;
  overflow:hidden;
  background:
    radial-gradient(circle at 20% 20%, rgba(34,133,90,.10), transparent 25%),
    radial-gradient(circle at 80% 35%, rgba(92,79,180,.10), transparent 28%),
    linear-gradient(180deg,#0b0f17,#0b0f17 100%);
  box-shadow:0 28px 70px rgba(0,0,0,.34);
  display:grid;
  grid-template-rows:auto auto 1fr auto;
}
.telegram-topbar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:14px 16px 10px;
  background:linear-gradient(180deg, rgba(11,15,23,.96), rgba(11,15,23,.88));
}
.telegram-peer {
  display:flex;
  align-items:center;
  gap:10px;
  min-height:50px;
  padding:0 16px;
  border-radius:24px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.05);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
.telegram-avatar {
  width:34px;
  height:34px;
  border-radius:50%;
  overflow:hidden;
  display:grid;
  place-items:center;
  background:linear-gradient(180deg,#87acff,#5b76e1);
  flex:none;
  box-shadow:0 0 0 1px rgba(255,255,255,.08);
}
.telegram-avatar img {
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 35%;
  display:block;
}
.telegram-peer strong { display:block; font-size:13px; }
.telegram-peer small { display:block; margin-top:2px; color:#7f8fa4; font-size:10px; }
.telegram-topbar > span { color:#7f90a9; font-size:24px; line-height:1; transform:translateY(-2px); }
.telegram-pinned {
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:10px;
  margin:0 16px 10px;
  padding:10px 12px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.05);
}
.telegram-pinned-icon {
  width:34px;
  height:34px;
  border-radius:12px;
  display:grid;
  place-items:center;
  background:rgba(255,255,255,.06);
  font-size:18px;
}
.telegram-pinned strong { display:block; color:#f4f7fd; font-size:11px; }
.telegram-pinned small { display:block; margin-top:2px; color:#c8d0dd; font-size:10.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.telegram-pinned button {
  width:28px;
  height:28px;
  border:0;
  border-radius:50%;
  background:transparent;
  color:#d8dfe9;
  font-size:20px;
}
.telegram-chat {
  min-height:0;
  padding:10px 14px 14px;
  display:grid;
  align-content:start;
  gap:10px;
  overflow:auto;
  -ms-overflow-style:none;
  scrollbar-width:none;
  background:
    radial-gradient(circle at 12% 16%, rgba(103,72,182,.08), transparent 12%),
    radial-gradient(circle at 82% 68%, rgba(0,154,98,.08), transparent 16%),
    linear-gradient(180deg, rgba(255,255,255,.015), rgba(255,255,255,0));
}
.telegram-chat::-webkit-scrollbar {
  width:0;
  height:0;
  display:none;
}
.tg-bubble {
  max-width:92%;
  padding:12px 14px;
  border-radius:20px;
  border:1px solid rgba(255,255,255,.06);
  background:linear-gradient(135deg, rgba(27,39,35,.88), rgba(19,25,33,.96));
  color:#eaf0fb;
  box-shadow:0 12px 30px rgba(0,0,0,.18);
}
.tg-bubble p { margin:0; font-size:11.5px; line-height:1.46; color:#ced7e4; }
.tg-bubble p + p { margin-top:7px; }
.tg-bubble strong, .tg-bubble b { color:#f6f9ff; }
.tg-bubble code {
  display:inline-block;
  margin-top:4px;
  padding:2px 6px;
  border-radius:8px;
  background:rgba(255,255,255,.04);
  color:#b8ceff;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:10px;
}
.tg-bubble.tg-user {
  justify-self:end;
  background:linear-gradient(180deg, rgba(72,109,202,.86), rgba(46,79,171,.92));
  border-color:rgba(129,161,255,.16);
}
.tg-bubble.tg-user p, .tg-bubble.tg-user strong, .tg-bubble.tg-user small { color:#f7faff; }
.tg-bubble-secondary { background:rgba(255,255,255,.035); }
.tg-buttons-grid {
  display:grid;
  gap:7px;
  grid-template-columns:1fr 1fr;
}
.tg-buttons-grid button {
  min-height:38px;
  padding:8px 10px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:12px;
  background:rgba(255,255,255,.08);
  color:#f4f7fd;
  font-size:10.5px;
  line-height:1.25;
  text-align:center;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
}
.tg-buttons-grid-inline { margin-top:-1px; }
.tg-meta-hint {
  padding:10px 12px;
  border-radius:14px;
  background:rgba(255,255,255,.03);
  border:1px dashed rgba(255,255,255,.06);
  color:#8797ad;
  font-size:10.5px;
  line-height:1.45;
}
.tg-voice { display:flex; align-items:center; gap:10px; }
.tg-voice strong { display:block; font-size:11.5px; }
.tg-voice small { display:block; margin-top:3px; color:#d7e4ff; font-size:10px; }
.tg-voice-message {
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  background:linear-gradient(180deg, #9083f0, #7868e2);
  border-color:rgba(255,255,255,.14);
}
.tg-voice-play {
  width:42px;
  height:42px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:#f8fbff;
  color:#6b5fe1;
  font-size:17px;
  box-shadow:0 8px 18px rgba(0,0,0,.12);
}
.tg-voice-track { display:grid; gap:4px; min-width:0; }
.tg-voice-wave {
  width:100%;
  height:18px;
  display:flex;
  align-items:flex-end;
  gap:3px;
}
.tg-voice-wave i {
  flex:1;
  height:38%;
  border-radius:99px;
  background:rgba(241,243,255,.75);
}
.tg-voice-wave i:nth-child(2), .tg-voice-wave i:nth-child(9) { height:70%; }
.tg-voice-wave i:nth-child(3), .tg-voice-wave i:nth-child(8) { height:58%; }
.tg-voice-wave i:nth-child(4), .tg-voice-wave i:nth-child(7) { height:86%; }
.tg-voice-wave i:nth-child(5), .tg-voice-wave i:nth-child(6) { height:95%; }
.tg-voice-info { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.tg-voice-info span,
.tg-voice-info small {
  margin:0;
  color:#f4f6ff;
  font-size:9px;
}
.tg-voice-badge {
  width:28px;
  height:28px;
  border-radius:10px;
  overflow:hidden;
  display:grid;
  place-items:center;
  background:rgba(255,255,255,.18);
  box-shadow:0 0 0 1px rgba(255,255,255,.08);
}
.tg-voice-badge img {
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 35%;
  display:block;
}
.tg-voice-compact { max-width:72%; }
.tg-status {
  color:#90a2ba;
  font-size:10.5px;
  padding-left:8px;
}
.telegram-input {
  display:grid;
  grid-template-columns:auto auto 1fr auto auto;
  align-items:center;
  gap:8px;
  padding:10px 12px 12px;
  border-top:1px solid rgba(255,255,255,.06);
  background:rgba(8,13,23,.96);
}
.tg-menu-pill {
  min-width:70px;
  min-height:40px;
  padding:0 16px;
  border:1px solid rgba(154,158,255,.18);
  border-radius:999px;
  background:linear-gradient(180deg, #786ff0, #655bdb);
  color:#f7f9ff;
  font-size:12px;
  font-weight:650;
}
.telegram-input-field {
  min-height:42px;
  display:flex;
  align-items:center;
  padding:0 16px;
  border-radius:999px;
  background:rgba(255,255,255,.05);
  color:#7f8ca0;
  font-size:11px;
}
.tg-icon-btn {
  width:40px;
  height:40px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:50%;
  background:rgba(255,255,255,.04);
  color:#e8eefb;
  font-size:18px;
}
.tg-mic-btn {
  background:linear-gradient(180deg,#111723,#111723);
  color:#f7f9ff;
}
.tg-attach-btn,
.tg-emoji-btn { color:#dce3ef; }

/* Compact combined access section. */
.access {
  display:grid;
  grid-template-columns:.76fr .64fr 1.1fr;
  gap:22px;
  align-items:stretch;
}
.access-heading { align-self:center; padding-right:22px; }
.access-heading h2 { margin:0; font-size:clamp(44px,4.8vw,64px); line-height:1.01; letter-spacing:-.052em; }
.access-heading > p:nth-of-type(2) { margin:23px 0 0; color:var(--muted); font-size:16px; line-height:1.65; }
.access-card { min-width:0; padding:30px; border:1px solid rgba(140,171,231,.14); border-radius:27px; background:linear-gradient(155deg,rgba(18,28,44,.93),rgba(8,14,23,.98)); box-shadow:0 30px 80px rgba(0,0,0,.27); }
.access-card h3 { margin:10px 0 13px; font-size:25px; line-height:1.1; letter-spacing:-.035em; }
.access-card > p { margin:0; color:#8f9eb2; font-size:13px; line-height:1.58; }
.access-kicker { color:#82a8ff; font-size:10px; font-weight:800; letter-spacing:.11em; text-transform:uppercase; }
.access-card ul { list-style:none; margin:20px 0 24px; padding:0; display:grid; gap:10px; }
.access-card li { color:#bec8d7; font-size:12px; line-height:1.4; }
.access-card li::before { content:"✓"; margin-right:8px; color:#7fa7ff; }
.access-card li.is-muted { color:#758398; }
.access-card li.is-muted::before { content:"×"; color:#7e8797; }
.full-access { border-color:rgba(121,160,255,.27); background:radial-gradient(circle at 95% 0,rgba(75,108,240,.18),transparent 38%),linear-gradient(155deg,#132038,#0a111d); }
.access-features { display:grid; grid-template-columns:1fr 1fr; gap:11px 18px; margin:21px 0 24px; color:#c8d1df; font-size:11.5px; line-height:1.38; }
.full-access small { display:block; margin-top:12px; color:#718096; font-size:9.5px; line-height:1.45; text-align:center; }

.subscription-dialog {
  position:relative;
  z-index:1;
  width:min(680px,100%);
  padding:38px;
  border:1px solid rgba(132,166,236,.18);
  border-radius:29px;
  background:linear-gradient(155deg,rgba(18,29,47,.99),rgba(8,14,23,.995));
  box-shadow:0 50px 140px rgba(0,0,0,.58);
}
.subscription-dialog h3 { margin:10px 50px 10px 0; font-size:37px; letter-spacing:-.04em; }
.subscription-dialog > p:nth-of-type(2) { margin:0; color:#8e9db1; line-height:1.6; }
.subscription-options { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr)); gap:10px; margin:26px 0 18px; }
.subscription-options[data-plan-count="1"] { grid-template-columns:minmax(0,1fr); }
.subscription-options[data-plan-count="2"] { grid-template-columns:repeat(2,minmax(0,1fr)); }
.subscription-options[data-plan-count="3"] { grid-template-columns:repeat(3,minmax(0,1fr)); }
.subscription-options[data-plan-count="4"] { grid-template-columns:repeat(4,minmax(0,1fr)); }
.subscription-options a { padding:17px; border:1px solid rgba(255,255,255,.07); border-radius:15px; background:rgba(255,255,255,.025); text-decoration:none; transition:.22s ease; }
.subscription-options a:hover { transform:translateY(-2px); border-color:rgba(123,161,255,.27); background:rgba(81,119,218,.07); }
.subscription-options strong { display:block; color:#edf3ff; font-size:14px; }
.subscription-options span { display:block; margin-top:6px; color:#7e8da2; font-size:10px; }
.subscription-options a.is-best { border-color:rgba(124,163,255,.25); background:rgba(77,111,211,.1); }
.subscription-options a.is-best span { color:#8fb4ff; }
.subscription-dialog > small { color:#718096; font-size:10px; line-height:1.5; }

.system-heading-centered { max-width: 780px; }
.demo { overflow: visible; }
.demo-layout {
  display:grid;
  grid-template-columns:minmax(270px, 330px) minmax(0, 900px);
  align-items:start;
  justify-content:space-between;
  gap:54px;
}
.demo-heading-left {
  max-width:330px;
  margin:44px 0 0;
}
.demo-heading-left h2 {
  font-size:clamp(40px, 3.5vw, 52px);
}
.demo-heading-left > p:last-child {
  font-size:16px;
  line-height:1.65;
}
.demo-stage {
  width:100%;
  max-width:900px;
  margin:0;
}
.demo-tabs {
  width:100%;
  margin:0 0 18px;
  justify-content:space-between;
}
.demo-tabs button {
  min-width:0;
  padding:0 11px;
  font-size:12px;
}
.demo-window { border-radius:26px; }
.window-content {
  min-height:610px;
  grid-template-columns:minmax(260px,.76fr) minmax(420px,1.24fr);
}
.demo-copy-panel { padding:52px 36px; }
.demo-copy-panel h3 { font-size:36px; }
.demo-copy-panel > p { font-size:15px; }
.demo-note { margin-top:28px; padding-top:22px; }
.demo-product-panel { padding:34px 28px; }

@media (max-width:1180px) {
  .system-card { min-height:750px; padding:42px; }
  .access { grid-template-columns:1fr 1fr; }
  .access-heading { grid-column:1 / -1; max-width:720px; }
  .window-content { grid-template-columns:.78fr 1.22fr; }
  .demo-copy-panel { padding:52px 40px; }
}
@media (max-width:1180px) {
  .demo-layout {
    grid-template-columns:minmax(220px, 270px) minmax(0, 1fr);
    gap:34px;
  }
  .demo-heading-left { margin-top:34px; }
  .demo-tabs { overflow-x:auto; justify-content:flex-start; scrollbar-width:none; }
  .demo-tabs::-webkit-scrollbar { display:none; }
  .demo-tabs button { flex:0 0 auto; }
  .window-content { grid-template-columns:minmax(240px,.72fr) minmax(400px,1.28fr); }
}
@media (max-width:900px) {
  .demo-layout { grid-template-columns:1fr; gap:32px; }
  .demo-heading-left { max-width:620px; margin:0; }
  .demo-stage { max-width:none; }
  .system-grid { grid-template-columns:1fr; }
  .system-card { min-height:auto; }
  .channel-mini-covers { position:relative; left:auto; right:auto; bottom:auto; margin-top:28px; min-height:250px; }
  .bot-analysis-preview { margin-top:24px; }
  .material-dialog { grid-template-columns:1fr; height:min(88vh,820px); overflow:auto; }
  .material-preview { min-height:310px; border-right:0; border-bottom:1px solid rgba(255,255,255,.07); padding:34px; }
  .material-preview img { max-height:360px; }
  .material-content { min-height:420px; padding:32px; }
  .window-content { grid-template-columns:1fr; }
  .demo-copy-panel { border-right:0; border-bottom:1px solid var(--line); padding:38px; }
  .demo-product-panel { min-height:600px; }
  .access { grid-template-columns:1fr 1fr; }
}
@media (max-width:640px) {
  .channel-browser-stage,
  .channel-browser-stage[data-active-channel="0"],
  .channel-browser-stage[data-active-channel="1"],
  .channel-browser-stage[data-active-channel="2"],
  .channel-browser-stage[data-active-channel="3"] { min-height:540px !important; height:540px !important; max-height:540px !important; }
  .material-modal,.subscription-modal { padding:10px; }
  .material-dialog { border-radius:22px; }
  .material-preview { min-height:260px; padding:28px 20px; }
  .material-preview img { max-height:290px; }
  .material-content { padding:26px 20px; }
  .material-content h3 { margin-right:36px; font-size:28px; }
  .material-timeline li { grid-template-columns:52px 1fr; }
  .demo-tabs { justify-content:flex-start; flex-wrap:nowrap; overflow-x:auto; padding-bottom:8px; }
  .demo-tabs button { flex:0 0 auto; }
  .demo-window-label { grid-template-columns:1fr; justify-items:start; gap:10px; padding:14px 16px; }
  .demo-window-label b { justify-self:start; }
  .demo-platform-switch { justify-self:start; }
  .demo-copy-panel { padding:28px 22px; }
  .demo-copy-panel h3 { font-size:34px; }
  .demo-product-panel { min-height:590px; padding:24px 16px; }
  .training-select,.record-screen,.result-screen,.game-screen,.recommend-screen,.telegram-screen { width:calc(100% - 28px); }
  .result-screen-detailed .result-line { grid-template-columns:118px 1fr 18px; gap:7px; }
  .recommend-columns,.game-grid { grid-template-columns:1fr; }
  .access { grid-template-columns:1fr; }
  .access-heading { grid-column:auto; padding-right:0; }
  .access-features { grid-template-columns:1fr; }
  .subscription-dialog { padding:28px 20px; }
  .subscription-dialog h3 { font-size:30px; }
  .subscription-options, .subscription-options[data-plan-count] { grid-template-columns:1fr; }
}

/* v1.18.1 verification fixes: stable section geometry and responsive overflow. */
.channel-library-note {
  height: 92px;
  min-height: 92px;
  max-height: 92px;
  overflow: hidden;
}

@media (min-width: 1081px) {
  .hero-product-intro .channel-preview { left: -110px; }
  .hero-product-intro .progress-pill { right: -75px; }
}

@media (max-width: 1100px) {
  .channel-library-note {
    height: 116px;
    min-height: 116px;
    max-height: 116px;
  }
}

@media (max-width: 820px) {
  .hero-product-intro .channel-preview,
  .hero-product-intro .focus-pill,
  .hero-product-intro .progress-pill {
    display: none;
  }
}

@media (max-width: 640px) {
  .channel-library-note {
    height: 164px;
    min-height: 164px;
    max-height: 164px;
  }
  .demo-product-panel { min-height: 680px; }
  .telegram-shell { height: 600px; }
}

/* v1.19: portrait guides, stable card interaction and complete scrollable material popups. */
.stack-card {
  --spread-x: 0px;
  --spread-y: 0px;
  transform: translate3d(calc(var(--dx) + var(--spread-x)), calc(var(--dy) + var(--spread-y)), 0) rotate(var(--rot)) scale(1);
}
.stack-card.is-front {
  transform: translate3d(calc(var(--dx) + var(--spread-x)), calc(var(--dy) + var(--spread-y) - 10px), 0) rotate(var(--rot)) scale(1.045);
}
.stack-card.is-neighbor-left { --spread-x: -24px; --spread-y: 5px; }
.stack-card.is-neighbor-right { --spread-x: 24px; --spread-y: 5px; }
.stack-card.is-neighbor-far-left { --spread-x: -11px; --spread-y: 8px; }
.stack-card.is-neighbor-far-right { --spread-x: 11px; --spread-y: 8px; }
.stack-card.is-dragging {
  transform: translate3d(0,0,0) rotate(0deg) scale(1.035) !important;
  transition: none !important;
}

.channel-panel[data-channel-screen="0"] .guide-image-card { width: 172px; }
.channel-panel[data-channel-screen="0"] .guide-image-card img {
  width: 100%;
  height: auto;
  aspect-ratio: 1194 / 1685;
  object-fit: contain;
}
.channel-panel[data-channel-screen="2"] .audio-card { width: 218px; }
.channel-panel[data-channel-screen="2"] .stack-card-art { min-height: 245px; }
.channel-panel[data-channel-screen="2"] .stack-card-art strong { font-size: 24px; }

.material-dialog {
  height: min(720px, 90vh);
  grid-template-columns: minmax(340px, .88fr) minmax(0, 1.12fr);
}
.material-preview {
  min-height: 0;
  overflow: hidden;
  align-items: center;
  justify-items: center;
  padding: 30px 28px;
}
.material-preview .modal-cover-image {
  width: auto;
  height: auto;
  max-width: 90%;
  max-height: 640px;
  object-fit: contain;
  object-position: center;
  margin: auto;
}
.material-modal[data-material-kind="guide"] .material-preview .modal-cover-image {
  max-width: 84%;
  max-height: 650px;
}
.material-modal[data-material-kind="lecture"] .material-preview .modal-cover-image {
  max-width: 88%;
  max-height: 620px;
}
.material-preview .modal-audio-art {
  align-self: center;
  justify-self: center;
  margin: auto;
}
.material-content {
  min-height: 0;
  overflow: hidden;
}
.material-scroll {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  padding-right: 16px;
  padding-bottom: 26px;
  scrollbar-width: thin;
  scrollbar-color: #40577b rgba(255,255,255,.025);
}
.material-scroll::-webkit-scrollbar { width: 8px; }
.material-scroll::-webkit-scrollbar-track { background: rgba(255,255,255,.025); border-radius: 99px; }
.material-scroll::-webkit-scrollbar-thumb { background: #40577b; border-radius: 99px; }
.material-timeline li { grid-template-columns: 64px minmax(0,1fr); }

@media (max-width: 1080px) {
  .channel-panel[data-channel-screen="0"] .guide-image-card { width: 158px; }
}
@media (max-width: 820px) {
  .channel-panel[data-channel-screen="0"] .guide-image-card { width: 140px; }
  .material-dialog {
    height: min(90vh, 840px);
    grid-template-columns: 1fr;
    grid-template-rows: minmax(250px, 40vh) minmax(0, 1fr);
    overflow: hidden;
  }
  .material-preview { min-height: 0; padding: 24px; }
  .material-preview .modal-cover-image,
  .material-modal[data-material-kind="guide"] .material-preview .modal-cover-image,
  .material-modal[data-material-kind="lecture"] .material-preview .modal-cover-image {
    max-width: 88%;
    max-height: 100%;
  }
  .material-content { min-height: 0; padding: 28px 30px 24px; }
}
@media (max-width: 560px) {
  .channel-panel[data-channel-screen="0"] .guide-image-card { width: 108px; }
  .channel-panel[data-channel-screen="2"] .audio-card { width: 146px; }
  .channel-panel[data-channel-screen="2"] .stack-card-art { min-height: 165px; padding: 12px; }
  .channel-panel[data-channel-screen="2"] .stack-card-art strong { font-size: 16px; }
  .stack-card.is-neighbor-left { --spread-x: -12px; }
  .stack-card.is-neighbor-right { --spread-x: 12px; }
  .stack-card.is-neighbor-far-left { --spread-x: -6px; }
  .stack-card.is-neighbor-far-right { --spread-x: 6px; }
  .material-dialog { grid-template-rows: minmax(220px, 36vh) minmax(0,1fr); }
  .material-content { padding: 24px 18px 20px; }
  .material-content h3 { font-size: 26px; margin-bottom: 16px; }
  .material-scroll { padding-right: 9px; }
  .material-timeline li { grid-template-columns: 54px minmax(0,1fr); gap: 9px; }
}

/* Center the three verified audio entries without clipping the outer cards. */
.channel-panel[data-channel-screen="2"] .pos-2 { --x:10%; --y:88px; --rot:-8deg; }
.channel-panel[data-channel-screen="2"] .pos-4 { --x:34%; --y:160px; --rot:2deg; }
.channel-panel[data-channel-screen="2"] .pos-6 { --x:58%; --y:92px; --rot:8deg; }
@media (max-width:560px) {
  .channel-panel[data-channel-screen="2"] .pos-2 { --x:3%; --y:78px; }
  .channel-panel[data-channel-screen="2"] .pos-4 { --x:29%; --y:142px; }
  .channel-panel[data-channel-screen="2"] .pos-6 { --x:55%; --y:80px; }
}

/* Keep the material browser full-width once the copy and canvas stack vertically. */
@media (max-width:1080px) {
  .channel-library { grid-template-columns:minmax(0,1fr); gap:42px; }
  .channel-browser { width:100%; min-width:0; }
}
@media (max-width:560px) {
  .channel-panel[data-channel-screen="2"] .pos-6 { --x:53%; }
}

/* v1.20: continuous editorial post list inside the fixed material canvas. */
.posts-stream-panel {
  height: 100%;
  overflow: hidden;
}

.posts-stream-shell {
  position: absolute;
  inset: 18px 22px;
  overflow: hidden;
  border: 1px solid rgba(126, 158, 218, .13);
  border-radius: 28px;
  background:
    radial-gradient(circle at 84% 4%, rgba(94, 83, 221, .15), transparent 28%),
    linear-gradient(155deg, rgba(15, 24, 38, .93), rgba(8, 13, 22, .98));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025), 0 26px 70px rgba(0,0,0,.22);
}

.posts-stream-shell::before,
.posts-stream-shell::after {
  content: "";
  position: absolute;
  z-index: 3;
  left: 0;
  right: 0;
  height: 54px;
  pointer-events: none;
}

.posts-stream-shell::before {
  top: 0;
  background: linear-gradient(180deg, rgba(8,13,22,.98), rgba(8,13,22,0));
}

.posts-stream-shell::after {
  bottom: 0;
  background: linear-gradient(0deg, rgba(8,13,22,.98), rgba(8,13,22,0));
}

.posts-stream-scroll {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.posts-stream-scroll::-webkit-scrollbar { display: none; }

.posts-stream-track {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

.posts-stream-list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 22px 18px 12px;
  list-style: none;
}

.posts-stream-item {
  min-height: 82px;
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  padding: 8px 18px 8px 8px;
  border: 1px solid rgba(255,255,255,.065);
  border-radius: 17px;
  background: linear-gradient(145deg, rgba(25,35,53,.92), rgba(13,20,32,.96));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.02);
  transition: transform .24s ease, border-color .24s ease, background .24s ease, box-shadow .24s ease;
  cursor: pointer;
}

.posts-stream-item:hover,
.posts-stream-item:focus-visible {
  transform: translateX(5px);
  border-color: rgba(124,157,255,.24);
  background: linear-gradient(145deg, rgba(31,45,70,.96), rgba(15,24,39,.98));
  box-shadow: 0 12px 28px rgba(0,0,0,.19);
}

.posts-stream-item img {
  width: 88px;
  height: 50px;
  display: block;
  object-fit: cover;
  border-radius: 11px;
  border: 1px solid rgba(255,255,255,.08);
  background: #080d15;
  box-shadow: 0 8px 20px rgba(0,0,0,.26);
}

.posts-stream-item span {
  display:block;
  color: #e8eef8;
  font-size: 15px;
  font-weight: 680;
  line-height: 1.35;
  letter-spacing: -.018em;
}

@media (max-width: 820px) {
  .posts-stream-shell { inset: 16px 18px; border-radius: 24px; }
  .posts-stream-list { padding: 20px 14px 10px; gap: 9px; }
  .posts-stream-item {
    min-height: 78px;
    grid-template-columns: 76px minmax(0,1fr);
    gap: 13px;
    padding: 7px 14px 7px 7px;
  }
  .posts-stream-item img { width: 76px; height: 44px; border-radius: 10px; }
  .posts-stream-item span { font-size: 14px; }
}

@media (max-width: 560px) {
  .posts-stream-shell { inset: 12px; border-radius: 20px; }
  .posts-stream-shell::before,
  .posts-stream-shell::after { height: 38px; }
  .posts-stream-list { padding: 16px 10px 8px; gap: 8px; }
  .posts-stream-item {
    min-height: 70px;
    grid-template-columns: 62px minmax(0,1fr);
    gap: 11px;
    padding: 6px 11px 6px 6px;
    border-radius: 14px;
  }
  .posts-stream-item img { width: 62px; height: 36px; border-radius: 9px; }
  .posts-stream-item span { font-size: 12px; line-height: 1.32; }
}


/* v1.21: compact system comparison cards and six-criterion analysis grid. */
.system-grid {
  gap: 20px;
  margin-top: 54px;
}
.system-card {
  min-height: 638px;
  padding: 40px;
}
.system-number {
  right: 28px;
  top: 22px;
  font-size: 62px;
}
.system-copy {
  max-width: 100%;
}
.system-copy h3 {
  max-width: 500px;
  margin: 11px 0 14px;
  font-size: 32px;
  line-height: 1.06;
}
.system-copy p {
  font-size: 15px;
  line-height: 1.58;
}
.system-copy ul {
  margin-top: 20px;
  gap: 9px;
  font-size: 13px;
}
.system-more {
  margin-top: 17px;
}
.channel-mini-covers {
  left: 50px;
  right: 50px;
  bottom: 52px;
  height: 206px;
  overflow: visible;
}
.mini-cover {
  width: 176px;
  border-radius: 19px;
  box-shadow: 0 24px 56px rgba(0,0,0,.28);
}
.mini-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.mini-cover-one {
  left: 5%;
  top: 26px;
  transform: rotate(-9deg);
  z-index: 3;
}
.mini-cover-two {
  left: 50%;
  top: 0;
  transform: translateX(-50%) rotate(-1deg);
  z-index: 5;
}
.mini-cover-three {
  right: 4%;
  top: 28px;
  transform: rotate(8deg);
  z-index: 3;
}
.bot-card {
  gap: 18px;
}
.bot-analysis-preview {
  margin-top: 18px;
  padding: 18px;
  border-radius: 20px;
}
.bot-analysis-top {
  align-items: center;
  padding-bottom: 12px;
}
.bot-analysis-top b {
  font-size: 25px;
}
.analysis-criteria {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 18px;
  row-gap: 12px;
  margin-top: 14px;
}
.analysis-criteria > div {
  grid-template-columns: minmax(104px, 1fr) 72px 18px;
  gap: 8px;
}
.analysis-criteria span {
  font-size: 9.5px;
  line-height: 1.25;
}
.analysis-criteria i {
  height: 4px;
}
.analysis-focus {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  gap: 10px;
  margin-top: 14px;
  padding: 12px 13px;
}
.analysis-focus p {
  margin: 0;
  font-size: 10.5px;
  line-height: 1.4;
}

@media (max-width: 1180px) {
  .system-card {
    min-height: 650px;
    padding: 36px;
  }
  .analysis-criteria > div {
    grid-template-columns: minmax(96px, 1fr) 58px 18px;
  }
  .channel-mini-covers { bottom: 24px; height: 220px; }
  .mini-cover { width: 156px; }
  .mini-cover-back { width: 132px; }
  .mini-cover-two { left: 34%; }
}

@media (max-width: 900px) {
  .system-card {
    min-height: auto;
    padding: 36px;
  }
  .channel-mini-covers {
    margin-top: 12px;
    min-height: 220px;
    height: 220px;
    bottom: auto;
  }
  .mini-cover-one { left: 3%; top: 20px; }
  .mini-cover-two { left: 50%; top: 0; transform: translateX(-50%) rotate(-1deg); }
  .mini-cover-three { right: 3%; top: 24px; }
  .mini-cover-back-left { left: 4%; top: 2px; }
  .mini-cover-back-mid { left: 50%; top: 72px; transform: translateX(-50%) rotate(-5deg); }
  .mini-cover-back-right { right: 6%; top: 0; }
  .bot-analysis-preview {
    margin-top: 20px;
  }
}

@media (max-width: 640px) {
  .system-grid {
    margin-top: 42px;
  }
  .system-card {
    padding: 28px;
  }
  .system-copy h3 {
    font-size: 28px;
  }
  .channel-mini-covers { min-height: 198px; height: 198px; }
  .mini-cover { width: 126px; }
  .mini-cover-back { width: 104px; }
  .analysis-criteria {
    grid-template-columns: 1fr;
  }
  .analysis-criteria > div {
    grid-template-columns: 128px 1fr 18px;
  }
  .analysis-focus {
    grid-template-columns: 1fr;
    gap: 6px;
  }
}


/* v1.27: post modal follows a dedicated wide-cover layout. */
.material-modal[data-material-kind="post"] .material-dialog {
  width: min(1040px, 100%);
  min-height: min(640px, 88vh);
  grid-template-columns: minmax(300px, 360px) minmax(0, 1fr);
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: 22px 28px;
  align-items: start;
  padding: 36px 36px 30px;
}
.material-modal[data-material-kind="post"] .material-preview {
  grid-column: 1;
  grid-row: 1 / span 2;
  min-height: 0;
  aspect-ratio: 16 / 9;
  padding: 14px;
  border-right: 0;
  border-bottom: 0;
  border-radius: 24px;
  background:
    radial-gradient(circle at 82% 8%, rgba(90,88,225,.12), transparent 28%),
    linear-gradient(155deg, rgba(16,24,38,.94), rgba(8,13,22,.98));
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
}
.material-modal[data-material-kind="post"] .material-preview .modal-cover-image {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: contain;
  object-position: center;
  border-radius: 18px;
  background: #09111d;
}
.material-modal[data-material-kind="post"] .material-content {
  display: contents;
}
.material-modal[data-material-kind="post"] .material-meta {
  grid-column: 2;
  grid-row: 1;
  padding-right: 54px;
  align-self: end;
}
.material-modal[data-material-kind="post"] .material-content h3 {
  grid-column: 2;
  grid-row: 2;
  margin: -4px 52px 0 0;
  font-size: clamp(31px, 3vw, 42px);
}
.material-modal[data-material-kind="post"] .material-scroll {
  grid-column: 1 / -1;
  grid-row: 3;
  padding-right: 8px;
  font-size: 16px;
  line-height: 1.72;
  max-height: min(320px, 42vh);
}
.post-modal-copy {
  max-width: 100%;
}
.post-modal-lead {
  margin: 0 0 16px;
  color: #dfe7f6;
  font-size: 18px;
  line-height: 1.66;
}
.material-modal[data-material-kind="post"] .material-channel-note {
  margin-top: 20px !important;
}
.posts-stream-item:focus-visible { outline: none; }

@media (max-width: 900px) {
  .material-modal[data-material-kind="post"] .material-dialog {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    gap: 18px;
    padding: 28px 22px 22px;
  }
  .material-modal[data-material-kind="post"] .material-preview {
    grid-column: 1;
    grid-row: 1;
    aspect-ratio: auto;
    padding: 12px;
  }
  .material-modal[data-material-kind="post"] .material-preview .modal-cover-image {
    width: 100%;
    height: auto;
    max-height: 240px;
  }
  .material-modal[data-material-kind="post"] .material-content {
    display: flex;
    flex-direction: column;
    min-height: 0;
    grid-column: 1;
    grid-row: 2;
  }
  .material-modal[data-material-kind="post"] .material-meta {
    padding-right: 0;
    align-self: start;
  }
  .material-modal[data-material-kind="post"] .material-content h3 {
    margin: 10px 34px 0 0;
  }
  .material-modal[data-material-kind="post"] .material-scroll {
    max-height: min(320px, 38vh);
    margin-top: 18px;
    padding-right: 4px;
  }
}

@media (max-width: 560px) {
  .material-modal[data-material-kind="post"] .material-dialog {
    padding: 24px 16px 18px;
  }
  .material-modal[data-material-kind="post"] .material-preview {
    padding: 10px;
    border-radius: 20px;
  }
  .material-modal[data-material-kind="post"] .material-content h3 {
    font-size: 28px;
    margin-right: 28px;
  }
  .material-modal[data-material-kind="post"] .material-scroll {
    max-height: min(290px, 36vh);
  }
  .post-modal-lead { font-size: 16px; }
}


/* v1.25 follow-up overrides */
@media (max-width: 820px) {
  .channel-mini-covers { bottom: 34px; height: 196px; }
  .mini-cover { width: 150px; }
  .mini-cover-one { left: 2%; top: 26px; }
  .mini-cover-two { top: 0; }
  .mini-cover-three { right: 2%; top: 28px; }
}
@media (max-width: 640px) {
  .channel-mini-covers { left: 22px; right: 22px; bottom: 24px; height: 188px; }
  .mini-cover { width: 132px; }
  .mini-cover-one { left: 0; top: 36px; }
  .mini-cover-two { top: 8px; }
  .mini-cover-three { right: 0; top: 36px; }
}
.practice-chip-free .practice-chip-icon svg { stroke-width: 1.7; }
.practice-chip-special:hover .practice-chip-icon { background: rgba(103,136,231,.14); box-shadow: 0 10px 22px rgba(62,89,162,.28); }
.practice-chip-special:hover .practice-chip-copy strong,
.practice-chip-duel:hover .practice-chip-copy strong,
.practice-chip-special.is-active .practice-chip-copy strong,
.practice-chip-duel.is-active .practice-chip-copy strong { color: #f6f9ff; }
@media (max-width: 775px) {
  .practice-chip-special,
  .practice-chip-duel { min-height: 94px; padding: 14px 14px 13px; }
  .practice-chip-icon { left: 14px; top: 13px; width: 28px; height: 28px; }
  .practice-chip-duel .duel-icon { left: 20px; top: 18px; width: 25px; height: 25px; }
}

/* v1.34 stable rebuild: scoped access, FAQ, legal footer and Telegram refinements.
   This block intentionally does not touch channel-library canvas, stack cards or material modal geometry. */

/* Compact access comparison while preserving the stable v1.32 three-column composition. */
.access {
  grid-template-columns: .76fr minmax(0, 1fr) minmax(0, 1.1fr);
  grid-template-rows: auto minmax(0, 1fr);
  gap: 18px 20px;
  align-items: stretch;
}
.access-heading {
  grid-column: 1;
  grid-row: 1 / 3;
  align-self: center;
}
.access-common {
  grid-column: 2 / 4;
  grid-row: 1;
  min-width: 0;
  padding: 17px 20px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 18px;
  border: 1px solid rgba(140,171,231,.12);
  border-radius: 19px;
  background: rgba(255,255,255,.022);
}
.access-common-kicker {
  color: #82a8ff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .11em;
  text-transform: uppercase;
  white-space: nowrap;
}
.access-common ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px 18px;
}
.access-common li {
  color: #aebacc;
  font-size: 11px;
  line-height: 1.35;
}
.access-common li::before {
  content: "✓";
  margin-right: 7px;
  color: #7fa7ff;
}
.access-card {
  min-height: 390px;
  display: flex;
  flex-direction: column;
}
.trial-access { grid-column: 2; grid-row: 2; }
.full-access { grid-column: 3; grid-row: 2; }
.access-card > p { min-height: 62px; }
.access-compare {
  list-style: none;
  margin: 20px 0 22px;
  padding: 13px 0 0;
  display: grid;
  gap: 0;
  border-top: 1px solid rgba(255,255,255,.065);
}
.access-card .access-compare li {
  min-height: 38px;
  display: flex;
  align-items: center;
  color: #c7d0de;
  font-size: 11px;
  line-height: 1.35;
  border-bottom: 1px solid rgba(255,255,255,.045);
}
.access-card .access-compare li::before {
  width: 20px;
  margin-right: 6px;
  font-weight: 800;
  text-align: center;
}
.access-card .access-compare li.is-included::before { content: "✓"; color: #82adff; }
.access-card .access-compare li.is-excluded { color: #768397; }
.access-card .access-compare li.is-excluded::before { content: "×"; color: #6d798b; }
.access-card .button { margin-top: auto; }

/* Compact FAQ with the original economical two-column composition. */
.faq {
  grid-template-columns: minmax(250px, .68fr) minmax(0, 1.32fr);
  gap: 72px;
  align-items: start;
}
.faq .section-heading { max-width: 430px; }
.faq-heading-note {
  max-width: 390px;
  margin: 24px 0 0;
  color: #7f8da2;
  font-size: 13px;
  line-height: 1.65;
}
.faq-list { width: 100%; }
.faq-item summary {
  min-height: 58px;
  padding: 0 2px;
  font-size: 16px;
  line-height: 1.35;
}
.faq-item summary span {
  width: 27px;
  height: 27px;
  border-radius: 8px;
  font-size: 14px;
  flex: 0 0 auto;
}
.faq-answer p {
  max-width: 860px;
  margin: -1px 52px 18px 0;
  font-size: 14px;
  line-height: 1.67;
}
.faq-answer p + p { margin-top: -8px; }
.faq-answer a {
  color: #9cbaff;
  text-decoration: underline;
  text-decoration-color: rgba(156,186,255,.35);
  text-underline-offset: 3px;
}

/* Legal footer, isolated from the rest of the page. */
.site-footer {
  width: min(calc(100% - 96px), var(--container));
  min-height: 0;
  margin: 0 auto;
  padding: 40px 0 44px;
  display: grid;
  grid-template-columns: minmax(210px, .78fr) minmax(210px, .72fr) minmax(190px, .66fr) minmax(270px, 1.08fr);
  align-items: start;
  gap: 32px;
  border-top: 1px solid var(--line);
  color: #718096;
  font-size: 12px;
}
.site-footer p { margin: 0; }
.footer-brand-block { display: grid; gap: 13px; }
.footer-brand-block p { max-width: 280px; line-height: 1.55; }
.footer-legal-links { display: grid; gap: 10px; }
.footer-legal-links a,
.footer-operator a {
  color: #96a6bc;
  text-decoration: none;
  transition: color .2s ease;
}
.footer-legal-links a:hover,
.footer-operator a:hover { color: #fff; }

.footer-materials-block { display:grid; align-content:start; gap:9px; }
.footer-materials-block > span { color:#65758d; font-size:10px; font-weight:800; letter-spacing:.11em; text-transform:uppercase; }
.footer-materials-button {
  width:max-content; min-height:44px; display:inline-flex; align-items:center; gap:12px; padding:0 17px;
  border:1px solid rgba(118,153,239,.26); border-radius:12px;
  background:linear-gradient(180deg,rgba(74,108,196,.18),rgba(32,52,101,.15));
  color:#dbe7ff !important; font-size:13px; font-weight:800; letter-spacing:-.01em; text-decoration:none;
  box-shadow:0 12px 28px rgba(18,42,104,.14); transition:transform .2s ease,border-color .2s ease,background .2s ease;
}
.footer-materials-button:hover { transform:translateY(-2px); border-color:rgba(125,163,255,.42); background:linear-gradient(180deg,rgba(82,119,215,.25),rgba(36,58,111,.22)); }
.footer-materials-button b { color:#8eb1ff; font-size:16px; }
.footer-operator {
  display: grid;
  gap: 7px;
  justify-items: end;
  text-align: right;
}
.footer-operator p { line-height: 1.5; }
.footer-operator > span { margin-top: 7px; }

/* Telegram avatar: tighter face crop. */
.telegram-avatar {
  width: 40px;
  height: 40px;
}
.telegram-avatar img {
  object-position: center 24%;
}

/* Telegram-style voice message: thin waveform, no extra avatar in the bubble. */
.tg-voice-message {
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  padding: 9px 12px 8px;
  border-bottom-right-radius: 10px;
}
.tg-voice-play {
  width: 40px;
  height: 40px;
  position: relative;
  display: block;
  background: #fff;
  color: transparent;
}
.tg-voice-play::before {
  content: "";
  position: absolute;
  left: 15px;
  top: 12px;
  width: 0;
  height: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-left: 12px solid #7367e2;
}
.tg-voice-wave {
  height: 16px;
  gap: 2px;
}
.tg-voice-wave i {
  flex: 0 0 2px;
  width: 2px;
  min-width: 2px;
  height: 22%;
  border-radius: 999px;
  background: rgba(246,248,255,.86);
}
.tg-voice-wave i:nth-child(2), .tg-voice-wave i:nth-child(23) { height: 32%; }
.tg-voice-wave i:nth-child(3), .tg-voice-wave i:nth-child(22) { height: 48%; }
.tg-voice-wave i:nth-child(4), .tg-voice-wave i:nth-child(21) { height: 68%; }
.tg-voice-wave i:nth-child(5), .tg-voice-wave i:nth-child(20) { height: 42%; }
.tg-voice-wave i:nth-child(6), .tg-voice-wave i:nth-child(19) { height: 54%; }
.tg-voice-wave i:nth-child(7), .tg-voice-wave i:nth-child(18) { height: 76%; }
.tg-voice-wave i:nth-child(8), .tg-voice-wave i:nth-child(17) { height: 58%; }
.tg-voice-wave i:nth-child(9), .tg-voice-wave i:nth-child(16) { height: 80%; }
.tg-voice-wave i:nth-child(10), .tg-voice-wave i:nth-child(15) { height: 46%; }
.tg-voice-wave i:nth-child(11), .tg-voice-wave i:nth-child(14) { height: 64%; }
.tg-voice-wave i:nth-child(12), .tg-voice-wave i:nth-child(13) { height: 86%; }
.tg-voice-info span,
.tg-voice-info small {
  line-height: 1;
}
.tg-voice-badge { display: none !important; }
.tg-mic-btn {
  display: grid;
  place-items: center;
}
.tg-mic-svg {
  width: 18px;
  height: 18px;
  display: block;
}

@media (max-width: 1180px) {
  .access {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto auto minmax(0, 1fr);
  }
  .access-heading { grid-column: 1 / -1; grid-row: 1; max-width: 720px; }
  .access-common { grid-column: 1 / -1; grid-row: 2; }
  .trial-access { grid-column: 1; grid-row: 3; }
  .full-access { grid-column: 2; grid-row: 3; }
}
@media (max-width: 900px) {
  .site-footer { grid-template-columns: 1fr 1fr; }
  .footer-operator { grid-column: 1 / -1; justify-items: start; text-align: left; }
}
@media (max-width: 640px) {
  .access { grid-template-columns: 1fr; grid-template-rows: auto; }
  .access-heading,
  .access-common,
  .trial-access,
  .full-access { grid-column: 1; grid-row: auto; }
  .access-common { grid-template-columns: 1fr; padding: 18px; }
  .access-common ul { grid-template-columns: 1fr; }
  .access-card { min-height: 0; }
  .access-card > p { min-height: 0; }
  .faq { grid-template-columns: 1fr; gap: 34px; }
  .faq .section-heading { max-width: 100%; }
  .faq-heading-note { max-width: 620px; margin-top: 18px; }
  .faq-item summary { min-height: 52px; padding: 7px 0; font-size: 15px; }
  .faq-answer p { margin-right: 36px; }
  .site-footer { width: calc(100% - 40px); grid-template-columns: 1fr; gap: 24px; }
  .footer-operator { grid-column: auto; }
}


/* v1.36: clearer product chapters, paired bridge statements and access order. */
.section-label-topic {
  font-size: 15px;
  letter-spacing: .115em;
  font-weight: 850;
  color: #8eb1ff;
}
.section-label-topic::after {
  width: 62px;
  opacity: .85;
}
.statement-bridge {
  padding-top: 126px;
  padding-bottom: 132px;
}
.statement-bridge .section-label {
  margin-bottom: 26px;
  font-size: 13px;
}
.statement-bridge h2,
.statement-quote.statement-bridge h2 {
  max-width: 900px;
  font-size: clamp(30px, 3.45vw, 46px);
  line-height: 1.16;
  letter-spacing: -.038em;
  font-weight: 660;
}
.statement-bridge .statement-note {
  max-width: 760px;
  margin-top: 24px;
  font-size: 17px;
}

/* Cards first, shared capabilities underneath. */
.access {
  grid-template-rows: minmax(0, 1fr) auto;
}
.access-heading {
  grid-row: 1 / 3;
}
.trial-access {
  grid-column: 2;
  grid-row: 1;
}
.full-access {
  grid-column: 3;
  grid-row: 1;
}
.access-common {
  grid-column: 2 / 4;
  grid-row: 2;
}

@media (max-width: 1180px) {
  .access {
    grid-template-rows: auto minmax(0, 1fr) auto;
  }
  .access-heading { grid-column: 1 / -1; grid-row: 1; }
  .trial-access { grid-column: 1; grid-row: 2; }
  .full-access { grid-column: 2; grid-row: 2; }
  .access-common { grid-column: 1 / -1; grid-row: 3; }
}
@media (max-width: 640px) {
  .section-label-topic { font-size: 12px; }
  .statement-bridge {
    padding-top: 92px;
    padding-bottom: 98px;
  }
  .statement-bridge h2,
  .statement-quote.statement-bridge h2 {
    font-size: clamp(27px, 8.4vw, 38px);
  }
  .statement-bridge .statement-note { font-size: 15px; }
  .access-heading,
  .trial-access,
  .full-access,
  .access-common { grid-column: 1; grid-row: auto; }
}


/* v1.37 common updates: compact closing CTA. */
.final-cta {
  min-height: 0;
  padding: 96px 32px 92px;
}
.final-cta h2 { max-width: 760px; }
.final-cta > p:nth-of-type(2) {
  max-width: 700px;
  margin: 20px auto 24px;
}
.final-proof {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 9px;
  margin: 0 auto 28px;
}
.final-proof span {
  min-height: 34px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(134,168,235,.13);
  border-radius: 999px;
  background: rgba(255,255,255,.035);
  color: #aebbd0;
  font-size: 11px;
  font-weight: 650;
}
@media (max-width: 640px) {
  .final-cta { padding: 72px 20px 68px; }
  .final-proof { gap: 7px; margin-bottom: 24px; }
  .final-proof span { min-height: 32px; padding: 0 11px; font-size: 10px; }
}


/* v1.41: merge the AI-chat principle into the demo heading and keep the platform switch over the right panel. */
.demo-heading-left {
  align-self: stretch;
  display:flex;
  flex-direction:column;
}
.demo-principle {
  margin-top:auto;
  padding:28px 0 0;
  border-top:1px solid var(--line);
}
.demo-principle-label {
  margin:0 0 12px;
  color:#8fb2ff;
  font-size:12px;
  font-weight:800;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.demo-principle-lead {
  margin:0;
  color:#eef4ff;
  font-size:18px;
  font-weight:650;
  line-height:1.5;
  letter-spacing:-.018em;
}
.demo-principle-note {
  margin:15px 0 0;
  color:#8f9db1;
  font-size:14px;
  line-height:1.62;
}
.demo-window-label {
  grid-template-columns:minmax(260px,.76fr) minmax(420px,1.24fr);
  gap:0;
  padding:0;
}
.demo-window-label > span {
  padding:0 24px;
}
.demo-platform-area {
  min-width:0;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:14px;
  padding:0 20px;
  border-left:1px solid var(--line);
}
.demo-platform-switch {
  width:min(100%,390px);
  justify-self:center;
  display:grid;
  grid-template-columns:1fr 1fr;
}
.demo-platform-switch button {
  width:100%;
  min-height:38px;
  padding:0 20px;
  text-align:center;
  white-space:nowrap;
}
.demo-platform-area > b {
  justify-self:end;
  white-space:nowrap;
}
@media (max-width:1180px) {
  .demo-window-label {
    grid-template-columns:minmax(240px,.72fr) minmax(400px,1.28fr);
  }
  .demo-principle-lead { font-size:17px; }
}
@media (max-width:900px) {
  .demo-heading-left { display:block; }
  .demo-principle { margin-top:30px; }
  .demo-window-label {
    grid-template-columns:1fr;
  }
  .demo-window-label > span {
    min-height:48px;
    display:flex;
    align-items:center;
  }
  .demo-platform-area {
    min-height:62px;
    border-left:0;
    border-top:1px solid var(--line);
  }
}
@media (max-width:640px) {
  .demo-principle { padding-top:22px; }
  .demo-principle-lead { font-size:16px; }
  .demo-principle-note { font-size:13px; }
  .demo-platform-area {
    width:100%;
    grid-template-columns:1fr;
    gap:8px;
    padding:12px 16px;
  }
  .demo-platform-switch {
    width:100%;
    justify-self:stretch;
  }
  .demo-platform-switch button {
    min-height:40px;
    padding:0 10px;
    font-size:11px;
  }
  .demo-platform-area > b { display:none; }
}

/* v1.42: unified section rhythm, editorial quote, reviews carousel and complete demo principle. */
:root {
  --section-space-desktop: 132px;
  --section-space-tablet: 100px;
  --section-space-mobile: 84px;
}

/* The principle belongs near the demo heading, not at the very bottom of the left column. */
.demo-heading-left {
  justify-content: flex-start;
}
.demo-principle {
  margin-top: 38px;
}
.demo-principle-prep {
  margin: 18px 0 0;
  padding: 16px 17px;
  border: 1px solid rgba(124,166,255,.13);
  border-radius: 15px;
  background: rgba(78,115,214,.07);
  color: #aebbd0;
  font-size: 14px;
  line-height: 1.6;
}
.demo-principle-prep strong {
  display: block;
  margin-bottom: 4px;
  color: #eaf1ff;
  font-weight: 700;
}

/* Editorial treatment for the remaining standalone statement. */
.statement.statement-bridge {
  padding-top: var(--section-space-desktop);
  padding-bottom: var(--section-space-desktop);
}
.statement-bridge-card {
  position: relative;
  max-width: 1040px;
  margin: 0 auto;
  padding: 62px 76px 56px;
  overflow: hidden;
  border: 1px solid rgba(136,171,239,.15);
  border-radius: 30px;
  background:
    radial-gradient(circle at 92% 8%, rgba(71,112,221,.16), transparent 34%),
    linear-gradient(150deg, rgba(18,28,45,.94), rgba(8,14,24,.98));
  box-shadow: 0 28px 90px rgba(0,0,0,.28);
  text-align: left;
}
.statement-bridge-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 38px;
  bottom: 38px;
  width: 2px;
  background: linear-gradient(180deg, transparent, #78a4ff 25%, #78a4ff 75%, transparent);
}
.statement-quote-mark {
  position: absolute;
  right: 42px;
  top: -28px;
  color: rgba(119,157,241,.10);
  font-family: Georgia, serif;
  font-size: 210px;
  line-height: 1;
  pointer-events: none;
}
.statement-bridge-card .section-label {
  position: relative;
  z-index: 1;
  margin-bottom: 24px;
}
.statement-bridge-card h2,
.statement-quote.statement-bridge .statement-bridge-card h2 {
  position: relative;
  z-index: 1;
  max-width: 860px;
  margin: 0;
  font-size: clamp(29px, 3.25vw, 44px);
  line-height: 1.17;
  letter-spacing: -.036em;
  text-align: left;
}
.statement-bridge-card .statement-author {
  position: relative;
  z-index: 1;
  margin: 28px 0 0;
  color: #99a9be;
  text-align: left;
}

/* Reviews. */
.reviews {
  display: grid;
  grid-template-columns: minmax(260px,.62fr) minmax(0,1.38fr);
  align-items: center;
  gap: 64px;
}
.reviews-heading {
  max-width: 430px;
}
.reviews-heading h2 {
  margin: 0;
  font-size: clamp(42px,4.5vw,62px);
  line-height: 1.02;
  letter-spacing: -.05em;
}
.reviews-heading > p:last-child {
  margin: 24px 0 0;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.67;
}
.reviews-carousel {
  min-width: 0;
  padding: 18px 18px 16px;
  border: 1px solid rgba(137,170,235,.13);
  border-radius: 28px;
  background:
    radial-gradient(circle at 78% 5%, rgba(80,111,207,.12), transparent 32%),
    linear-gradient(150deg, rgba(15,24,39,.92), rgba(7,12,20,.97));
  box-shadow: 0 28px 80px rgba(0,0,0,.27);
}
.reviews-viewport {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  outline: none;
}
.reviews-viewport::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}
.reviews-track {
  display: flex;
  align-items: stretch;
  gap: 14px;
  width: max-content;
  padding: 2px;
}
.review-card {
  flex: 0 0 278px;
  width: 278px;
  padding: 10px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 20px;
  background: rgba(255,255,255,.025);
  color: var(--text);
  text-align: left;
  cursor: pointer;
  scroll-snap-align: center;
  transition: transform .24s ease, border-color .24s ease, background .24s ease, opacity .24s ease;
}
.review-card:hover,
.review-card:focus-visible,
.review-card.is-active {
  transform: translateY(-3px);
  border-color: rgba(126,164,255,.24);
  background: rgba(79,112,195,.075);
}
.review-card:not(.is-active) {
  opacity: .78;
}
.review-card-media {
  height: 238px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 14px;
  background: #0c1522;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.045);
}
.review-card-media img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}
.review-card-copy {
  display: grid;
  gap: 5px;
  min-height: 68px;
  padding: 13px 6px 4px;
}
.review-card-copy strong {
  color: #eff4ff;
  font-size: 14px;
}
.review-card-copy small {
  color: #8290a4;
  font-size: 10.5px;
  line-height: 1.4;
}
.reviews-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 17px;
  margin-top: 14px;
}
.reviews-arrow {
  width: 38px;
  height: 38px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 50%;
  background: rgba(255,255,255,.035);
  color: #e7eefc;
  font-size: 16px;
  cursor: pointer;
  transition: .2s ease;
}
.reviews-arrow:hover {
  border-color: rgba(126,165,255,.26);
  background: rgba(75,108,201,.12);
}
.reviews-dots {
  display: flex;
  align-items: center;
  gap: 8px;
}
.reviews-dots button {
  width: 7px;
  height: 7px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: #354255;
  cursor: pointer;
  transition: width .22s ease, background .22s ease;
}
.reviews-dots button.is-active {
  width: 24px;
  background: #7ca6ff;
}
.reviews-hint {
  margin: 12px 0 0;
  color: #6f7d91;
  font-size: 10.5px;
  line-height: 1.5;
  text-align: center;
}

/* One modal for the whole reviews collection. */
.reviews-modal {
  position: fixed;
  inset: 0;
  z-index: 220;
  display: grid;
  place-items: center;
  padding: 24px;
}
.reviews-modal[hidden] {
  display: none;
}
.reviews-modal .modal-backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: rgba(1,5,11,.82);
  backdrop-filter: blur(12px);
}
.reviews-dialog {
  position: relative;
  z-index: 1;
  width: min(760px,100%);
  padding: 24px 24px 18px;
  border: 1px solid rgba(137,171,238,.18);
  border-radius: 28px;
  background: linear-gradient(155deg, rgba(16,26,42,.995), rgba(7,12,20,.999));
  box-shadow: 0 50px 150px rgba(0,0,0,.64);
}
.reviews-modal-stage {
  display: grid;
  grid-template-columns: 46px minmax(0,1fr) 46px;
  align-items: center;
  gap: 15px;
}
.reviews-modal-stage figure {
  min-width: 0;
  margin: 0;
  display: grid;
  justify-items: center;
  gap: 15px;
}
.reviews-modal-stage img {
  max-width: 100%;
  width: auto;
  max-height: min(72vh,720px);
  display: block;
  object-fit: contain;
  border-radius: 18px;
  box-shadow: 0 22px 70px rgba(0,0,0,.36);
}
.reviews-modal-stage figcaption {
  width: 100%;
  display: grid;
  gap: 5px;
  text-align: center;
}
.reviews-modal-stage figcaption strong {
  color: #f1f5ff;
  font-size: 15px;
}
.reviews-modal-stage figcaption span {
  color: #7f8da1;
  font-size: 11px;
}
.reviews-modal-arrow {
  width: 46px;
  height: 46px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 50%;
  background: rgba(255,255,255,.04);
  color: #eef4ff;
  font-size: 18px;
  cursor: pointer;
}
.reviews-modal-footer {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  margin-top: 15px;
  color: #8090a6;
}
.reviews-modal-footer span {
  color: #a9c2ff;
  font-size: 12px;
  font-weight: 750;
}
.reviews-modal-footer small {
  font-size: 10px;
}

@media (max-width: 1080px) {
  .statement.statement-bridge {
    padding-top: var(--section-space-tablet);
    padding-bottom: var(--section-space-tablet);
  }
  .reviews {
    grid-template-columns: 1fr;
    gap: 42px;
  }
  .reviews-heading {
    max-width: 680px;
  }
}
@media (max-width: 640px) {
  .statement.statement-bridge {
    padding-top: var(--section-space-mobile);
    padding-bottom: var(--section-space-mobile);
  }
  .statement-bridge-card {
    padding: 44px 25px 40px;
    border-radius: 23px;
  }
  .statement-bridge-card::before {
    top: 24px;
    bottom: 24px;
  }
  .statement-quote-mark {
    right: 12px;
    top: -8px;
    font-size: 130px;
  }
  .statement-bridge-card h2,
  .statement-quote.statement-bridge .statement-bridge-card h2 {
    font-size: clamp(26px,8.2vw,35px);
  }
  .demo-principle {
    margin-top: 30px;
  }
  .demo-principle-prep {
    padding: 14px;
    font-size: 13px;
  }
  .reviews {
    gap: 30px;
  }
  .reviews-heading h2 {
    font-size: clamp(38px,11vw,48px);
  }
  .reviews-carousel {
    padding: 12px 10px 14px;
    border-radius: 23px;
  }
  .review-card {
    flex-basis: min(78vw,270px);
    width: min(78vw,270px);
  }
  .review-card-media {
    height: 225px;
  }
  .reviews-modal {
    padding: 10px;
  }
  .reviews-dialog {
    padding: 42px 10px 15px;
    border-radius: 22px;
  }
  .reviews-modal-stage {
    grid-template-columns: 36px minmax(0,1fr) 36px;
    gap: 7px;
  }
  .reviews-modal-arrow {
    width: 36px;
    height: 36px;
  }
  .reviews-modal-footer {
    align-items: flex-start;
    flex-direction: column;
    gap: 5px;
    padding: 0 42px;
  }
}

/* v1.43: alignment, mobile stability, compact review modal and free-start chooser. */
@media (min-width:1081px) {
  .hero {
    padding-top:148px;
    padding-bottom:96px;
  }
}

.demo-layout > *,
.demo-stage,
.demo-tabs,
.demo-window,
.demo-window-label,
.demo-platform-area,
.window-content,
.demo-copy-panel,
.demo-product-panel,
.telegram-screen,
.telegram-shell {
  min-width:0;
}
.demo-heading-left {
  margin:12px 0 0;
}
.demo-principle {
  margin-top:26px;
  padding-top:24px;
}
.demo-platform-area {
  grid-template-columns:minmax(0,1fr);
  justify-items:center;
}
.demo-platform-switch {
  width:min(100%,420px);
}
.demo-platform-area > b {
  display:none !important;
}
.telegram-shell {
  width:min(390px,100%);
  max-width:100%;
}

/* The review image is the content: no duplicate title/caption below it. */
.reviews-dialog {
  width:min(720px,100%);
  padding:20px 20px 14px;
}
.reviews-modal-stage figure {
  gap:0;
}
.reviews-modal-stage img {
  max-height:min(74vh,720px);
}
.reviews-modal-stage figcaption {
  display:none;
}
.reviews-modal-footer {
  margin-top:10px;
}

/* Free-start chooser. */
.trial-modal {
  position:fixed;
  inset:0;
  z-index:230;
  display:grid;
  place-items:center;
  padding:24px;
}
.trial-modal[hidden] { display:none; }
.trial-modal .modal-backdrop {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
  background:rgba(1,5,11,.84);
  backdrop-filter:blur(13px);
}
.trial-dialog {
  position:relative;
  z-index:1;
  width:min(980px,100%);
  padding:38px;
  border:1px solid rgba(137,171,238,.18);
  border-radius:30px;
  background:
    radial-gradient(circle at 15% 0,rgba(77,115,218,.16),transparent 34%),
    linear-gradient(155deg,rgba(16,26,42,.995),rgba(7,12,20,.999));
  box-shadow:0 50px 150px rgba(0,0,0,.64);
}
.trial-dialog h3 {
  max-width:720px;
  margin:10px 52px 10px 0;
  font-size:clamp(34px,4vw,48px);
  line-height:1.05;
  letter-spacing:-.045em;
}
.trial-dialog-intro {
  max-width:720px;
  margin:0;
  color:#8f9db1;
  font-size:15px;
  line-height:1.6;
}
.trial-choice-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
  margin-top:28px;
}
.trial-choice {
  min-width:0;
  min-height:440px;
  padding:18px;
  display:flex;
  flex-direction:column;
  border:1px solid rgba(255,255,255,.08);
  border-radius:24px;
  background:rgba(255,255,255,.028);
  color:inherit;
  text-decoration:none;
  transition:transform .24s ease,border-color .24s ease,background .24s ease,box-shadow .24s ease;
}
.trial-choice-telegram:hover,
.trial-choice-telegram:focus-visible {
  transform:translateY(-4px);
  border-color:rgba(126,166,255,.28);
  background:rgba(79,112,195,.075);
  box-shadow:0 22px 55px rgba(0,0,0,.22);
}
.trial-telegram-preview,
.trial-web-preview {
  position:relative;
  height:225px;
  overflow:hidden;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.065);
  background:#0b121e;
}
.trial-telegram-preview {
  padding:16px;
  background:
    radial-gradient(circle at 85% 0,rgba(73,105,203,.14),transparent 34%),
    linear-gradient(180deg,#0c1522,#0a111c);
}
.trial-telegram-head {
  display:flex;
  align-items:center;
  gap:10px;
  padding-bottom:13px;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.trial-telegram-head img {
  width:38px;
  height:38px;
  display:block;
  object-fit:cover;
  object-position:center 24%;
  border-radius:50%;
}
.trial-telegram-head span { display:grid; gap:2px; }
.trial-telegram-head strong { font-size:12px; }
.trial-telegram-head small { color:#708098; font-size:9px; }
.trial-telegram-message {
  margin-top:16px;
  padding:14px;
  display:grid;
  gap:7px;
  border-radius:15px 15px 15px 5px;
  background:linear-gradient(180deg,#182438,#141f31);
  box-shadow:0 12px 28px rgba(0,0,0,.18);
}
.trial-telegram-message b { font-size:11px; }
.trial-telegram-message span { color:#aab7c8; font-size:9.5px; line-height:1.45; }
.trial-telegram-actions {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin-top:9px;
}
.trial-telegram-actions i {
  min-height:32px;
  display:grid;
  place-items:center;
  border-radius:10px;
  background:rgba(82,121,225,.14);
  color:#cfe0ff;
  font-size:8.5px;
  font-style:normal;
}
.trial-choice-copy {
  display:grid;
  gap:6px;
  padding:18px 3px 16px;
}
.trial-choice-kicker {
  color:#80a8ff;
  font-size:10px;
  font-weight:800;
  letter-spacing:.11em;
  text-transform:uppercase;
}
.trial-choice-copy strong {
  color:#f1f5ff;
  font-size:21px;
  line-height:1.18;
  letter-spacing:-.025em;
}
.trial-choice-copy small {
  color:#7f8da1;
  font-size:11px;
  line-height:1.45;
}
.trial-choice-action,
.trial-choice-web > button {
  width:100%;
  min-height:48px;
  margin-top:auto;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  border:0;
  border-radius:14px;
  background:linear-gradient(135deg,#84adff,#4f76ff 68%,#3f5ce6);
  color:#fff;
  font-size:13px;
  font-weight:750;
}
.trial-choice-web {
  opacity:.82;
  cursor:not-allowed;
}
.trial-choice-web.is-available {
  opacity:1;
  cursor:default;
}
.trial-choice-web.is-available:hover,
.trial-choice-web.is-available:focus-within {
  transform:translateY(-4px);
  border-color:rgba(126,166,255,.28);
  background:rgba(79,112,195,.075);
  box-shadow:0 22px 55px rgba(0,0,0,.22);
}
.trial-web-preview {
  display:grid;
  grid-template-rows:38px 1fr;
  background:linear-gradient(150deg,#101a2a,#0a111c);
}
.trial-web-top {
  display:flex;
  align-items:center;
  gap:6px;
  padding:0 13px;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.trial-web-top i {
  width:7px;
  height:7px;
  border-radius:50%;
  background:#344158;
}
.trial-web-body {
  display:grid;
  grid-template-columns:72px 1fr;
  grid-template-rows:28px 28px 1fr;
  gap:10px;
  padding:16px;
}
.trial-web-body span,
.trial-web-body b {
  display:block;
  border-radius:9px;
  background:rgba(115,151,236,.08);
}
.trial-web-body span:first-child { grid-row:1 / 4; }
.trial-web-body b { min-height:80px; }
.trial-development-badge {
  position:absolute;
  left:50%;
  top:50%;
  width:min(82%,300px);
  transform:translate(-50%,-50%);
  padding:13px 15px;
  border:1px solid rgba(132,164,235,.20);
  border-radius:14px;
  background:rgba(7,13,22,.92);
  color:#dce7fb;
  font-size:11px;
  font-weight:750;
  line-height:1.4;
  text-align:center;
  box-shadow:0 18px 45px rgba(0,0,0,.36);
}
.trial-choice-web > button {
  border:1px solid rgba(255,255,255,.07);
  background:rgba(255,255,255,.045);
  color:#758298;
  cursor:not-allowed;
}
.trial-choice-web.is-available > button {
  border:0;
  background:linear-gradient(135deg,#84adff,#4f76ff 68%,#3f5ce6);
  color:#fff;
  cursor:pointer;
}
.trial-choice-web.is-available > button:hover,
.trial-choice-web.is-available > button:focus-visible {
  filter:brightness(1.08);
}

@media (max-width:900px) {
  .demo-layout {
    grid-template-columns:minmax(0,1fr);
  }
  .demo-heading-left {
    width:100%;
    max-width:620px;
    margin:0;
  }
  .demo-stage,
  .demo-window,
  .window-content,
  .demo-window-label,
  .demo-platform-area,
  .demo-copy-panel,
  .demo-product-panel {
    width:100%;
    max-width:100%;
  }
  .window-content {
    grid-template-columns:minmax(0,1fr) !important;
  }
  .demo-window-label {
    grid-template-columns:minmax(0,1fr) !important;
  }
  .demo-platform-area {
    border-left:0;
    border-top:1px solid var(--line);
  }
  .trial-choice-grid {
    grid-template-columns:1fr;
  }
  .trial-choice {
    min-height:400px;
  }
}

@media (max-width:640px) {
  .demo-tabs,
  .demo-window,
  .window-content,
  .demo-window-label,
  .demo-platform-area,
  .demo-product-panel,
  .telegram-screen,
  .telegram-shell {
    width:100%;
    max-width:100%;
  }
  .demo-window-label {
    padding:0;
  }
  .demo-window-label > span {
    padding:0 16px;
  }
  .demo-product-panel {
    padding:22px 12px;
    overflow:hidden;
  }
  .telegram-input {
    grid-template-columns:auto auto minmax(0,1fr) auto;
    gap:6px;
    padding-inline:9px;
  }
  .tg-emoji-btn { display:none; }
  .tg-menu-pill {
    min-width:58px;
    padding:0 12px;
    font-size:11px;
  }
  .tg-icon-btn {
    width:36px;
    height:36px;
  }
  .telegram-input-field {
    min-width:0;
    padding:0 11px;
  }
  .trial-modal { padding:10px; }
  .trial-dialog {
    max-height:calc(100svh - 20px);
    overflow:auto;
    padding:30px 16px 18px;
    border-radius:23px;
  }
  .trial-dialog h3 {
    margin-right:36px;
    font-size:32px;
  }
  .trial-choice-grid { margin-top:22px; }
  .trial-choice {
    min-height:360px;
    padding:12px;
    border-radius:20px;
  }
  .trial-telegram-preview,
  .trial-web-preview { height:190px; }
  .reviews-dialog {
    padding:40px 8px 12px;
  }
  .reviews-modal-stage img {
    max-height:min(72vh,650px);
  }
}

@media (max-width:360px) {
  .tg-attach-btn { display:none; }
  .telegram-input {
    grid-template-columns:auto minmax(0,1fr) auto;
  }
}


/* v1.44: editorial consistency and equal access-card comparison rhythm. */
.access-compare { align-content:start; }
.access-card .access-compare li { min-height:20px; }

/* v1.45 – live Account/Billing checkout inside the existing subscription popup. */
.subscription-checkout-dialog {
  width: min(820px, 100%);
  max-height: min(880px, calc(100svh - 48px));
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(126, 164, 255, .34) transparent;
}
.subscription-heading > p:last-child {
  max-width: 690px;
  margin: 0;
  color: #8e9db1;
  line-height: 1.6;
}
.subscription-status {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  margin: 22px 0 0;
  padding: 11px 13px;
  border: 1px solid rgba(125, 160, 230, .13);
  border-radius: 13px;
  background: rgba(255, 255, 255, .025);
  color: #aeb9c9;
  font-size: 12px;
  line-height: 1.45;
}
.subscription-status-dot {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #78a2ff;
  box-shadow: 0 0 0 5px rgba(90, 131, 236, .11);
}
.subscription-status.is-loading .subscription-status-dot { animation: subscriptionPulse 1.2s ease-in-out infinite; }
.subscription-status.is-ready { border-color: rgba(100, 199, 159, .16); color: #b9d9cb; }
.subscription-status.is-ready .subscription-status-dot { background: #69c89d; box-shadow: 0 0 0 5px rgba(105, 200, 157, .1); }
.subscription-status.is-warning { border-color: rgba(240, 183, 91, .2); color: #e3c797; }
.subscription-status.is-warning .subscription-status-dot { background: #e6ae56; box-shadow: 0 0 0 5px rgba(230, 174, 86, .1); }
.subscription-status.is-error { border-color: rgba(237, 104, 119, .2); color: #e4a4ad; }
.subscription-status.is-error .subscription-status-dot { background: #e36d7b; box-shadow: 0 0 0 5px rgba(227, 109, 123, .1); }
@keyframes subscriptionPulse { 50% { opacity: .45; transform: scale(.75); } }

.subscription-options-live {
  margin: 18px 0 20px;
}
.subscription-options-live button {
  min-width: 0;
  padding: 17px;
  border: 1px solid rgba(255, 255, 255, .075);
  border-radius: 16px;
  background: rgba(255, 255, 255, .025);
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform .2s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.subscription-options-live button:hover:not(:disabled) {
  transform: translateY(-2px);
  border-color: rgba(123, 161, 255, .3);
  background: rgba(81, 119, 218, .075);
}
.subscription-options-live button:focus-visible {
  outline: 2px solid rgba(127, 168, 255, .82);
  outline-offset: 2px;
}
.subscription-plan.is-selected {
  border-color: rgba(119, 161, 255, .7);
  background: linear-gradient(145deg, rgba(72, 111, 220, .18), rgba(51, 83, 168, .08));
  box-shadow: inset 0 0 0 1px rgba(129, 168, 255, .16), 0 14px 34px rgba(0, 0, 0, .18);
}
.subscription-plan.is-best::after {
  content: "Самая выгодная";
  display: inline-flex;
  margin-top: 11px;
  padding: 5px 8px;
  border-radius: 999px;
  background: rgba(102, 145, 255, .12);
  color: #9bbaff;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.subscription-options-live strong,
.subscription-options-live .subscription-plan-price,
.subscription-options-live small { display: block; }
.subscription-options-live strong { color: #edf3ff; font-size: 14px; }
.subscription-plan-price { margin-top: 8px; color: #ffffff; font-size: 21px; font-weight: 800; letter-spacing: -.025em; }
.subscription-options-live small { margin-top: 6px; color: #7f8fa5; font-size: 10px; line-height: 1.4; }
.subscription-plan-skeleton { cursor: default !important; overflow: hidden; }
.subscription-plan-skeleton span,
.subscription-plan-skeleton i {
  display: block;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255,255,255,.035), rgba(255,255,255,.085), rgba(255,255,255,.035));
  background-size: 220% 100%;
  animation: subscriptionShimmer 1.35s linear infinite;
}
.subscription-plan-skeleton span { width: 55%; height: 14px; }
.subscription-plan-skeleton i { width: 78%; height: 9px; margin-top: 13px; }
@keyframes subscriptionShimmer { to { background-position: -220% 0; } }
.subscription-options-empty { grid-column: 1 / -1; margin: 0; padding: 18px; border: 1px dashed rgba(255,255,255,.1); border-radius: 15px; color: #8e9db1; font-size: 12px; line-height: 1.55; }
.subscription-catalog-retry {
  grid-column: 1 / -1;
  text-align: center !important;
  color: #cbd8f2 !important;
}

.subscription-checkout-form { display: grid; gap: 15px; }
.subscription-checkout-form[hidden],
.subscription-recovery[hidden],
.subscription-selected[hidden],
.subscription-error[hidden] { display: none; }
.subscription-selected {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 5px 18px;
  padding: 14px 15px;
  border: 1px solid rgba(123, 161, 255, .15);
  border-radius: 14px;
  background: rgba(79, 116, 216, .065);
}
.subscription-selected > span { grid-column: 1 / -1; color: #7185a4; font-size: 9px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.subscription-selected strong { color: #e8effc; font-size: 13px; }
.subscription-selected small { color: #a9bbdc; font-size: 11px; }
.subscription-field { display: grid; gap: 8px; }
.subscription-field > span { color: #dce5f5; font-size: 12px; font-weight: 750; }
.subscription-field input {
  width: 100%;
  min-height: 50px;
  padding: 0 15px;
  border: 1px solid rgba(132, 164, 225, .18);
  border-radius: 14px;
  outline: none;
  background: rgba(4, 9, 16, .55);
  color: #f2f6ff;
  font: inherit;
  font-size: 14px;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.subscription-field input:focus { border-color: rgba(115, 158, 255, .7); box-shadow: 0 0 0 4px rgba(88, 132, 238, .11); }
.subscription-field input::placeholder { color: #596679; }
.subscription-field small { color: #718096; font-size: 10px; line-height: 1.45; }
.subscription-consent {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 10px;
  align-items: start;
  color: #8997aa;
  font-size: 10px;
  line-height: 1.55;
}
.subscription-consent input { width: 17px; height: 17px; margin: 1px 0 0; accent-color: #729dff; }
.subscription-consent a { color: #9ab9ff; text-underline-offset: 2px; }
.subscription-options.is-invalid,
.subscription-field.is-invalid input,
.subscription-consent.is-invalid {
  border-color: rgba(232, 105, 121, .72);
  box-shadow: 0 0 0 4px rgba(232, 105, 121, .1);
}
.subscription-options.is-invalid { border-radius: 16px; }
.subscription-consent.is-invalid {
  padding: 10px;
  margin: -10px;
  border: 1px solid rgba(232, 105, 121, .72);
  border-radius: 12px;
  background: rgba(164, 53, 70, .08);
  color: #e9a5ae;
}
.subscription-error {
  margin: 0;
  padding: 11px 13px;
  border: 1px solid rgba(232, 105, 121, .2);
  border-radius: 12px;
  background: rgba(164, 53, 70, .08);
  color: #e9a5ae;
  font-size: 11px;
  line-height: 1.5;
}
.subscription-submit { width: 100%; min-height: 52px; }
.subscription-submit:disabled { cursor: not-allowed; opacity: .45; transform: none; }

.subscription-recovery {
  display: grid;
  gap: 11px;
  margin-top: 18px;
  padding: 19px;
  border: 1px solid rgba(121, 161, 255, .18);
  border-radius: 17px;
  background: linear-gradient(145deg, rgba(67, 101, 194, .1), rgba(255, 255, 255, .02));
}
.subscription-recovery > strong { color: #edf3ff; font-size: 16px; }
.subscription-recovery > p { margin: 0; color: #8f9db1; font-size: 11px; line-height: 1.55; }
.subscription-recovery-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 3px; }
.subscription-recovery-actions .button { min-height: 44px; padding: 0 16px; }
.subscription-reset {
  flex: 1 1 100%;
  border: 0;
  background: transparent;
  color: #7f95ba;
  font: inherit;
  font-size: 10px;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.subscription-reset:hover { color: #aac0e9; }
.subscription-footnote {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  margin-top: 18px;
  padding-top: 15px;
  border-top: 1px solid rgba(255,255,255,.065);
  color: #68768a;
  font-size: 9.5px;
  line-height: 1.45;
}
.subscription-footnote a { color: #8da9dc; text-decoration: none; }
.subscription-footnote a:hover { color: #b5c9ed; }

@media (max-width: 700px) {
  .subscription-modal { padding: 10px; }
  .subscription-checkout-dialog {
    max-height: calc(100svh - 20px);
    padding: 30px 18px 20px;
    border-radius: 23px;
  }
  .subscription-checkout-dialog h3 { margin-right: 38px; font-size: 30px; }
  .subscription-options-live, .subscription-options-live[data-plan-count] { grid-template-columns: 1fr; }
  .subscription-selected { grid-template-columns: 1fr; }
  .subscription-selected small { margin-top: 2px; }
  .subscription-footnote { flex-direction: column; gap: 6px; }
  .subscription-recovery-actions { display: grid; }
}

@media (prefers-reduced-motion: reduce) {
  .subscription-status.is-loading .subscription-status-dot,
  .subscription-plan-skeleton span,
  .subscription-plan-skeleton i { animation: none; }
}

/* v1.46 / R17: protected Telegram trial entry without email. */
.trial-choice-telegram{cursor:default}
.trial-choice-telegram:hover,.trial-choice-telegram:focus-within{transform:translateY(-4px);border-color:rgba(126,166,255,.28);background:rgba(79,112,195,.075);box-shadow:0 22px 55px rgba(0,0,0,.22)}
.trial-consent{margin:0 3px 14px;display:grid;grid-template-columns:18px 1fr;gap:10px;align-items:start;color:#9aa8bb;font-size:11px;line-height:1.5;cursor:pointer}
.trial-consent input{width:16px;height:16px;margin:1px 0 0;accent-color:#6e95ff}
.trial-consent a{color:#b8ccff;text-decoration:underline;text-decoration-color:rgba(184,204,255,.35);text-underline-offset:2px}
.trial-choice-action{border:0;cursor:pointer}
.trial-choice-action:disabled{background:rgba(255,255,255,.055);color:#748197;cursor:not-allowed;box-shadow:none}
.trial-start-status{min-height:34px;margin:10px 3px 0;color:#7f8da1;font-size:10.5px;line-height:1.45}
.trial-start-status.is-error{color:#ff9d9d}.trial-start-status.is-ready{color:#9ac4ff}.trial-start-status.is-loading{color:#b9c6d9}


/* v1.47 / R18: production Cloudflare Turnstile for the Telegram trial. */
.trial-turnstile{min-height:65px;margin:0 3px 14px;display:flex;align-items:center;justify-content:center;overflow:hidden;border-radius:12px}
.trial-turnstile[hidden]{display:none}
.trial-turnstile iframe{max-width:100%}
@media (max-width:420px){.trial-turnstile{margin-left:0;margin-right:0}}

/* R23 account navigation / checkout identity UX */
.nav-account-login{color:var(--muted);font-size:.9rem;font-weight:700;text-decoration:none;white-space:nowrap;transition:color .2s ease}
.nav-account-login:hover,.nav-account-login:focus-visible{color:var(--text)}
.subscription-account-links{display:flex;gap:14px;align-items:center;justify-content:flex-end;flex-wrap:wrap}
.subscription-account-links a{white-space:nowrap}
@media (max-width:760px){.nav-account-login{display:none}.subscription-account-links{justify-content:flex-start}}

/* R23.2 compact desktop header: preserve every nav item before the mobile switch. */
@media (max-width: 1120px) and (min-width: 961px) {
  .site-header { padding: 0 12px; }
  .nav-shell,
  .site-header.is-scrolled .nav-shell { padding-left: 14px; padding-right: 8px; gap: 8px; }
  .brand { gap: 7px; font-size: 13px; letter-spacing: .12em; flex: 0 0 auto; }
  .brand-mark { width: 27px; }
  .brand-mark svg { width: 24px; height: 24px; }
  .nav-links { gap: clamp(12px, 1.45vw, 18px); font-size: 13px; min-width: 0; }
  .nav-links a { white-space: nowrap; }
  .nav-account-login { font-size: 13px; flex: 0 0 auto; }
  .nav-shell > .button-small { min-height: 40px; padding: 0 12px; border-radius: 12px; font-size: 13px; gap: 7px; white-space: nowrap; flex: 0 0 auto; }
}

/* R23 responsive stability patch: switch before desktop navigation/cards start colliding. */
@media (max-width: 960px) and (min-width: 821px) {
  .site-header { inset: 14px 0 auto; padding: 0 16px; }
  .nav-shell,
  .site-header.is-scrolled .nav-shell { height: 62px; padding: 0 10px 0 17px; border-radius: 19px; gap: 10px; }
  .nav-links,
  .nav-shell > .button { display: none; }
  .nav-account-login { margin-left: auto; margin-right: 4px; }
  .menu-toggle { display: block; flex: 0 0 auto; }
  .mobile-menu {
    width: calc(100% - 32px);
    margin: 8px auto 0;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: rgba(8,13,21,.96);
    backdrop-filter: blur(20px);
    flex-direction: column;
    gap: 4px;
    box-shadow: var(--shadow);
  }
  .mobile-menu.is-open { display: flex; }
  .mobile-menu > a:not(.button) { padding: 13px 11px; color: #c1ccdc; font-size: 14px; }

  .system-grid { grid-template-columns: 1fr; max-width: 760px; margin-left: auto; margin-right: auto; }
  .system-card { min-height: 690px; }
  .system-copy h3 { max-width: 590px; }
}


/* R23.3 checkout recovery clarity + progressive header disclosure. */
.subscription-options[hidden] { display: none !important; }
.subscription-recovery {
  gap: 9px;
  padding: 22px;
  border-color: rgba(121,161,255,.24);
  background:
    radial-gradient(circle at 100% 0, rgba(83,124,236,.13), transparent 44%),
    linear-gradient(145deg, rgba(67,101,194,.105), rgba(255,255,255,.018));
}
.subscription-recovery-kicker {
  color: #82a8ff;
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.subscription-recovery > strong { font-size: 18px; line-height: 1.25; }
.subscription-recovery-details {
  margin: 1px 0 2px !important;
  color: #c7d5ef !important;
  font-size: 13px !important;
  font-weight: 750;
}
.subscription-recovery-actions {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  align-items: center;
  gap: 10px;
  margin-top: 7px;
}
.subscription-recovery-actions .button {
  width: 100%;
  min-height: 46px;
  padding: 0 15px;
  justify-content: center;
}
.subscription-reset {
  flex: initial;
  border: 1px solid rgba(132,164,225,.2);
  background: rgba(255,255,255,.035);
  color: #d9e4f7;
  font-size: 12px;
  font-weight: 750;
  text-decoration: none;
}
.subscription-reset:hover {
  border-color: rgba(132,164,225,.38);
  background: rgba(255,255,255,.06);
  color: #fff;
}
.subscription-cabinet-link {
  grid-column: 1 / -1;
  justify-self: center;
  padding: 4px 8px;
  color: #8198bf;
  font-size: 10px;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.subscription-cabinet-link:hover { color: #adc2e6; }

/* 821–960px: keep the two highest-priority navigation links visible. */
@media (max-width: 960px) and (min-width: 821px) {
  .nav-shell,
  .site-header.is-scrolled .nav-shell { gap: 9px; }
  .nav-links {
    display: flex;
    gap: 14px;
    margin-left: auto;
    font-size: 12px;
  }
  .nav-links a:nth-child(n+3) { display: none; }
  .nav-shell > .button {
    display: inline-flex;
    min-height: 38px;
    padding: 0 10px;
    border-radius: 11px;
    font-size: 11px;
    white-space: nowrap;
    flex: 0 0 auto;
  }
  .nav-account-login {
    display: inline-flex;
    margin-left: 4px;
    margin-right: 2px;
    font-size: 12px;
  }
  .menu-toggle { display: block; flex: 0 0 auto; }
}

/* 761–820px: retain one navigation landmark plus login before full mobile collapse. */
@media (max-width: 820px) and (min-width: 761px) {
  .nav-links {
    display: flex;
    margin-left: auto;
    gap: 10px;
    font-size: 12px;
  }
  .nav-links a { display: none; }
  .nav-links a:first-child { display: inline; white-space: nowrap; }
  .nav-account-login {
    display: inline-flex;
    margin-left: 4px;
    margin-right: 2px;
    font-size: 12px;
  }
  .nav-shell > .button {
    display: inline-flex;
    min-height: 38px;
    padding: 0 9px;
    border-radius: 11px;
    font-size: 11px;
    white-space: nowrap;
    flex: 0 0 auto;
  }
  .menu-toggle { display: block; }
}

.mobile-account-login {
  border-top: 1px solid rgba(255,255,255,.065);
  margin-top: 4px;
  padding: 13px 11px !important;
  color: #dce6f7 !important;
  font-weight: 750;
}

@media (max-width: 700px) {
  .subscription-recovery-actions { grid-template-columns: 1fr; }
  .subscription-cabinet-link { grid-column: 1; }
}


/* R23 V7: clearer existing-invoice recovery actions. */
.subscription-recovery-actions {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: stretch;
}
.subscription-recovery-secondary-stack {
  display: grid;
  gap: 10px;
  min-width: 0;
}
.subscription-recovery-secondary-stack .button {
  width: 100%;
  min-height: 46px;
  margin: 0;
}
.subscription-cabinet-link {
  grid-column: auto;
  justify-self: stretch;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 15px;
  color: #d9e4f7;
  font-size: 12px;
  font-weight: 750;
  text-decoration: none;
  border: 1px solid rgba(132,164,225,.2);
  background: rgba(255,255,255,.035);
}
.subscription-cabinet-link:hover {
  border-color: rgba(132,164,225,.38);
  background: rgba(255,255,255,.06);
  color: #fff;
}
.subscription-reset {
  border: 1px solid rgba(132,164,225,.2);
  background: rgba(255,255,255,.035);
  color: #d9e4f7;
  font-size: 12px;
  font-weight: 750;
  text-decoration: none;
}
@media (max-width: 700px) {
  .subscription-recovery-actions { grid-template-columns: 1fr; }
}

.subscription-recovery-secondary-stack .subscription-reset.button-primary {
  border-color: transparent;
  background: linear-gradient(135deg, #77a2ff, #4665f5);
  color: #fff;
}


/* v1.59 – compact bridge to the free Open Materials library. */
.open-materials-strip {
  width:min(calc(100% - 96px),var(--container));
  min-height:92px; margin:-28px auto 72px; padding:18px 20px 18px 24px;
  display:flex; align-items:center; justify-content:space-between; gap:28px;
  border:1px solid rgba(115,146,210,.15); border-radius:20px;
  background:
    radial-gradient(circle at 14% 0%,rgba(92,128,222,.11),transparent 34%),
    linear-gradient(100deg,rgba(15,24,38,.88),rgba(9,15,25,.94));
  box-shadow:0 22px 54px rgba(0,0,0,.16);
}
.open-materials-strip-copy { min-width:0; display:grid; grid-template-columns:auto auto; align-items:baseline; column-gap:14px; row-gap:4px; }
.open-materials-strip-copy > span { grid-column:1; color:#7f9fe7; font-size:10px; font-weight:850; letter-spacing:.11em; text-transform:uppercase; }
.open-materials-strip-copy > strong { grid-column:1; color:#edf3ff; font-size:20px; line-height:1.1; letter-spacing:-.025em; }
.open-materials-strip-copy > small { grid-column:2; grid-row:1 / span 2; align-self:center; max-width:430px; color:#7f8da1; font-size:12px; line-height:1.45; }
.open-materials-strip-button {
  min-height:42px; flex:0 0 auto; display:inline-flex; align-items:center; gap:11px; padding:0 16px;
  border:1px solid rgba(118,155,247,.28); border-radius:11px;
  background:rgba(75,111,207,.14); color:#dce7ff; text-decoration:none; font-size:12px; font-weight:800;
  transition:transform .2s ease,border-color .2s ease,background .2s ease;
}
.open-materials-strip-button:hover { transform:translateY(-2px); border-color:rgba(129,168,255,.46); background:rgba(77,115,217,.22); }
.open-materials-strip-button span { color:#8fb2ff; font-size:15px; }
@media (max-width:900px) {
  .open-materials-strip { width:calc(100% - 40px); margin:-8px auto 58px; }
  .open-materials-strip-copy { grid-template-columns:1fr; }
  .open-materials-strip-copy > span,.open-materials-strip-copy > strong,.open-materials-strip-copy > small { grid-column:1; grid-row:auto; }
}
@media (max-width:640px) {
  .open-materials-strip { min-height:0; padding:17px; align-items:flex-start; gap:16px; border-radius:17px; }
  .open-materials-strip-copy > small { display:none; }
  .open-materials-strip-copy > strong { font-size:17px; }
  .open-materials-strip-button { min-height:40px; padding:0 13px; white-space:nowrap; }
  .footer-materials-button { min-height:42px; }
}

/* V28 – owner landing bridge + material popup cross-link polish. */
.material-open-library-cta{
  margin-top:12px;
  padding:11px 13px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  border:1px solid rgba(123,157,230,.10);
  border-radius:12px;
  background:rgba(74,108,184,.045);
  color:#8f9db1;
}
.material-open-library-cta span{font-size:12px;line-height:1.45}
.material-open-library-cta a{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  gap:7px;
  min-height:34px;
  padding:0 11px;
  border:1px solid rgba(117,155,242,.22);
  border-radius:9px;
  background:rgba(78,113,207,.10);
  color:#b9ccfb;
  text-decoration:none;
  font-size:11px;
  font-weight:800;
  white-space:nowrap;
}
.material-open-library-cta a:hover{border-color:rgba(125,165,255,.42);background:rgba(78,113,207,.18);color:#e3ebff}
.material-open-library-cta b{font-size:13px;color:#8fb2ff}
.open-materials-strip{
  min-height:100px;
  padding:20px 22px 20px 26px;
  display:grid;
  grid-template-columns:minmax(220px,.78fr) minmax(300px,1fr) auto;
  align-items:center;
  gap:26px;
}
.open-materials-strip-copy{display:block;min-width:0}
.open-materials-strip-copy > span{
  display:block;
  color:#88aaff;
  font-size:13px;
  font-weight:850;
  letter-spacing:.12em;
  line-height:1.2;
  text-transform:uppercase;
}
.open-materials-strip-copy > strong{
  display:block;
  margin-top:6px;
  color:#f0f4ff;
  font-size:27px;
  line-height:1.03;
  letter-spacing:-.035em;
}
.open-materials-strip-note{
  margin:0;
  justify-self:center;
  max-width:520px;
  color:#9aa8bb;
  font-size:14px;
  line-height:1.5;
  text-align:center;
}
.open-materials-strip-button{
  min-height:48px;
  padding:0 19px;
  border-radius:12px;
  font-size:14px;
  font-weight:820;
}
.open-materials-strip-button span{font-size:17px}
@media(max-width:900px){
  .open-materials-strip{grid-template-columns:1fr auto;gap:15px 20px}
  .open-materials-strip-note{grid-column:1 / -1;grid-row:2;justify-self:start;text-align:left;max-width:none}
}
@media(max-width:640px){
  .material-open-library-cta{align-items:flex-start;flex-direction:column}
  .material-open-library-cta a{width:100%;justify-content:center}
  .open-materials-strip{display:grid;grid-template-columns:1fr;gap:12px;padding:18px}
  .open-materials-strip-copy > span{font-size:11px}
  .open-materials-strip-copy > strong{font-size:22px}
  .open-materials-strip-note{grid-column:auto;grid-row:auto;font-size:13px;text-align:left}
  .open-materials-strip-button{width:100%;justify-content:center;min-height:46px;font-size:13px}
}


/*
  ORATOR landing concept B — current information architecture, current product mechanics,
  visually remapped to the authoritative ORATOR design system v1.42.
  Review-only stylesheet. No production rollout is implied.
*/

:root,
html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #030914;
  --bg-soft: #05101C;
  --panel: rgba(14, 24, 43, .92);
  --panel-strong: #0E182B;
  --line: rgba(37, 60, 90, .86);
  --line-strong: #304B69;
  --text: #F4F7FB;
  --muted: #8EA0B8;
  --muted-strong: #C5CFDC;
  --accent: #F5A04F;
  --accent-strong: #DE8130;
  --accent-soft: rgba(245, 160, 79, .12);
  --cyan: #A9BED5;
  --green: #55D29A;
  --danger: #CB3345;
  --shadow: 0 28px 90px rgba(0, 0, 0, .42);
  --surface: #0E182B;
  --surface-raised: #0E1A2E;
  --surface-focal: #12223C;
  --canvas: #030914;
  --shell: #05101C;
  --focus: #76A7E8;
  --accent-text: #FFD4A8;
  --sand: #FFD4A8;
  --sand-soft: rgba(255, 212, 168, .12);
  --cta-text: #25180D;
  --nav-muted: #8EA0B8;
  --satin: linear-gradient(130deg, #15253E 0%, #102038 45%, #0E192D 100%);
  --satin-border: #304B69;
}

html[data-theme="light"] {
  color-scheme: light;
  --bg: #F6F4EF;
  --bg-soft: #F0EEE9;
  --panel: rgba(255, 253, 249, .92);
  --panel-strong: #FFFDF9;
  --line: #D7DEE8;
  --line-strong: #BAC7D5;
  --text: #182230;
  --muted: #687587;
  --muted-strong: #445164;
  --accent: #E99043;
  --accent-strong: #C96D22;
  --accent-soft: rgba(233, 144, 67, .12);
  --cyan: #607086;
  --green: #2F9A72;
  --danger: #B13345;
  --shadow: 0 24px 70px rgba(46, 54, 65, .12);
  --surface: #FFFDF9;
  --surface-raised: #F9F8F5;
  --surface-focal: #F1F0ED;
  --canvas: #F6F4EF;
  --shell: #F0EEE9;
  --focus: #466F9F;
  --accent-text: #985111;
  --sand: #A8662D;
  --sand-soft: rgba(168, 102, 45, .10);
  --cta-text: #25180D;
  --nav-muted: #607086;
  /* R15 owner direction: A / softer light. Long stops remove the visible seam. */
  --satin: linear-gradient(128deg,
    #FEFAF4 0%,
    #FBF7F1 18%,
    #F7F3EE 34%,
    #F4F0EB 50%,
    #EEEAE6 67%,
    #E8E5E2 82%,
    #E2E1DF 100%);
  --satin-border: #D0CECA;
}

html:not([data-theme]) { color-scheme: light; }
html:not([data-theme]) body { --bg: #F6F4EF; }

body {
  font-family: "Open Sans", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  color: var(--text);
  background:
    radial-gradient(900px 620px at 92% -6%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 66%),
    radial-gradient(880px 650px at -5% 27%, color-mix(in srgb, #7C9ABC 8%, transparent), transparent 70%),
    linear-gradient(180deg, var(--canvas), var(--bg));
  background-attachment: fixed;
}
body::before {
  background:
    radial-gradient(780px 560px at 78% 50%, color-mix(in srgb, var(--accent) 5%, transparent), transparent 76%),
    radial-gradient(760px 560px at 10% 88%, color-mix(in srgb, #577493 5%, transparent), transparent 76%);
}
body::selection { background: color-mix(in srgb, var(--accent) 26%, transparent); }

/* Typography / editorial rhythm */
.eyebrow, .section-label, .card-kicker, .message-label, .post-kicker,
.demo-counter, .system-number, .trial-choice-kicker, .subscription-status,
.material-meta, .footer-materials-block > span {
  font-family: "PT Sans", "Open Sans", ui-sans-serif, system-ui, sans-serif;
}
.section-label, .card-kicker, .message-label, .post-kicker, .demo-counter {
  color: var(--accent-text);
}
.section-label-topic { color: var(--accent-text); }
.section-label-topic::after {
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 72%, transparent), transparent);
}
.section-heading > p:last-child,
.inside-copy > p:nth-of-type(2),
.author-copy > p,
.statement-note,
.demo-copy-panel > p,
.access-card > p,
.faq-answer p { color: var(--muted); }

/* Header */
.site-header { inset: 16px 0 auto; }
.nav-shell {
  border-color: var(--line);
  background: color-mix(in srgb, var(--shell) 88%, transparent);
  box-shadow: 0 14px 44px rgba(0, 0, 0, .12), inset 0 1px 0 color-mix(in srgb, #fff 6%, transparent);
}
html[data-theme="light"] .nav-shell {
  background: rgba(255, 253, 249, .86);
  box-shadow: 0 13px 36px rgba(56, 62, 72, .09), inset 0 1px 0 rgba(255,255,255,.88);
}
.site-header.is-scrolled .nav-shell { background: color-mix(in srgb, var(--shell) 94%, transparent); }
html[data-theme="light"] .site-header.is-scrolled .nav-shell { background: rgba(255,253,249,.96); }
.brand { color: var(--text); }
.brand-mark { color: var(--accent); }
.brand-mark svg { filter: drop-shadow(0 5px 14px color-mix(in srgb, var(--accent) 24%, transparent)); }
.nav-links, .nav-account-login { color: var(--muted-strong); }
.nav-links a:hover, .nav-account-login:hover { color: var(--text); }
.menu-toggle { background: color-mix(in srgb, var(--surface-raised) 90%, transparent); border: 1px solid var(--line); }
.menu-toggle span { background: var(--text); }
.mobile-menu { background: var(--surface); border-color: var(--line); box-shadow: var(--shadow); }

/* Buttons */
.button {
  border-color: var(--line-strong);
  background: var(--surface-raised);
  color: var(--text);
  transition: transform 550ms cubic-bezier(.22,.8,.2,1), background .28s ease, border-color .28s ease, box-shadow .28s ease;
}
.button:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--line-strong) 70%, var(--accent)); background: color-mix(in srgb, var(--surface-raised) 94%, var(--accent) 6%); }
.button-primary,
.button-small,
.subscription-submit,
.trial-choice-action:not(:disabled) {
  border-color: color-mix(in srgb, var(--accent) 72%, #6E441E);
  background: linear-gradient(135deg, #F7B36F 0%, var(--accent) 52%, #E18736 100%);
  color: var(--cta-text);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.38), 0 14px 34px color-mix(in srgb, var(--accent) 25%, transparent);
}
.button-primary:hover, .button-small:hover,
.subscription-submit:hover,
.trial-choice-action:not(:disabled):hover {
  background: linear-gradient(135deg, #FFC484 0%, #F5A04F 55%, #E68A38 100%);
  color: var(--cta-text);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.44), 0 19px 42px color-mix(in srgb, var(--accent) 31%, transparent);
}
.button-secondary { color: var(--muted-strong); background: var(--surface-raised); border-color: var(--line); }
.button-secondary:hover { color: var(--text); background: color-mix(in srgb, var(--surface-raised) 92%, var(--accent) 8%); border-color: color-mix(in srgb, var(--line-strong) 72%, var(--accent)); }
.text-link { color: var(--muted-strong); }
.text-link span, .system-more span { color: var(--accent); }
.text-link:hover, .system-more:hover { color: var(--text); }
:where(a, button, summary, input):focus-visible { outline: 2px solid color-mix(in srgb, var(--focus) 76%, transparent); outline-offset: 3px; }

/* Hero */
.hero { padding-top: 154px; }
.eyebrow {
  color: var(--muted-strong);
  border-color: var(--line);
  background: color-mix(in srgb, var(--surface-raised) 84%, transparent);
}
.status-dot { background: var(--green); box-shadow: 0 0 0 5px color-mix(in srgb, var(--green) 9%, transparent), 0 0 18px color-mix(in srgb, var(--green) 44%, transparent); }
.hero h1 { color: var(--text); }
.hero h1 span {
  background: linear-gradient(92deg, #FFD2A5 0%, var(--accent) 44%, #D8792D 100%);
  -webkit-background-clip: text; background-clip: text;
}
html[data-theme="light"] .hero h1 span {
  background: linear-gradient(92deg, #B65D19 0%, #E99043 47%, #C66A22 100%);
  -webkit-background-clip: text; background-clip: text;
}
.hero-lead { color: var(--muted-strong); }
.hero-free-note, .trust-row { color: var(--muted); }
.trust-row span::before { background: var(--accent); }
.hero-visual::before { background: radial-gradient(circle, color-mix(in srgb, var(--accent) 13%, transparent), transparent 67%); }
.visual-orbit { border-color: color-mix(in srgb, var(--line-strong) 55%, transparent); }
.glass-card {
  border-color: var(--line);
  background: color-mix(in srgb, var(--surface) 86%, transparent);
  box-shadow: var(--shadow);
}
html[data-theme="light"] .glass-card {
  background: rgba(255,253,249,.92);
  box-shadow: 0 18px 52px rgba(53,61,72,.12), inset 0 1px 0 rgba(255,255,255,.86);
}
.channel-preview { border-color: var(--line); }
.post-cover { background: linear-gradient(150deg, color-mix(in srgb, var(--surface-focal) 92%, #000), color-mix(in srgb, var(--surface) 96%, #000)); }
html[data-theme="light"] .post-cover { background: linear-gradient(145deg, #252D39, #121923); color: #F4F7FB; }
.telegram-badge, .post-kicker { color: var(--accent); }
.progress-pill strong, .focus-pill strong { color: var(--text); }
html[data-theme="light"] .phone { box-shadow: 0 35px 90px rgba(42,48,58,.18); }

/* Section geometry stays the same; materials become ORATOR. */
.system-card {
  border-color: var(--line);
  background: linear-gradient(150deg, color-mix(in srgb, var(--surface-focal) 88%, transparent), var(--surface));
  box-shadow: 0 22px 64px rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.035);
}
.channel-card::before { background: var(--accent); opacity: .11; }
.bot-card::before { background: #6987A9; opacity: .10; }
.system-number { color: color-mix(in srgb, var(--text) 11%, transparent); }
.system-copy p { color: var(--muted); }
.system-copy ul { color: var(--muted-strong); }
.system-copy li::before { background: var(--accent); box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 44%, transparent); }
.system-more { color: var(--muted-strong); }
.bot-analysis-preview, .channel-mini-covers figure {
  border-color: var(--line);
  background: var(--surface-raised);
}
.analysis-criteria i { background: color-mix(in srgb, var(--line) 64%, transparent); }
.analysis-criteria i b { background: linear-gradient(90deg, #D67C32, var(--accent)); }
.analysis-focus { border-color: color-mix(in srgb, var(--accent) 24%, var(--line)); background: var(--accent-soft); }
.analysis-focus span { color: var(--accent-text); }

html[data-theme="light"] .system-card {
  background: var(--satin);
  border-color: var(--satin-border);
  box-shadow: 0 20px 50px rgba(59,65,74,.12), inset 0 1px 0 rgba(255,255,255,.8);
}
html[data-theme="light"] .system-card::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: radial-gradient(120% 95% at 10% -8%, rgba(255,255,255,.58), transparent 54%);
  opacity: .60;
}
html[data-theme="light"] .system-copy,
html[data-theme="light"] .channel-mini-covers,
html[data-theme="light"] .bot-analysis-preview { position: relative; z-index: 2; }

/* Channel library remains a deliberate embedded showcase, but loses the purple SaaS wash. */
.channel-library-browser .section-heading h2 { color: var(--text); }
.channel-browser {
  border-color: var(--line-strong);
  background:
    radial-gradient(circle at 84% 4%, rgba(245,160,79,.10), transparent 31%),
    radial-gradient(circle at 10% 88%, rgba(93,124,159,.12), transparent 31%),
    linear-gradient(155deg, #0E182B, #06101D 72%, #030914);
  box-shadow: 0 35px 100px rgba(0,0,0,.30);
}
.channel-browser::before { border-color: rgba(255,255,255,.04); }
.channel-browser-stage::before {
  opacity: .08;
  background-image: linear-gradient(rgba(155,176,199,.15) 1px,transparent 1px),linear-gradient(90deg,rgba(155,176,199,.15) 1px,transparent 1px);
}
.channel-browser-nav button, .channel-browser-nav .channel-tab {
  border-color: #2B405B;
  background: #0E1A2E;
  color: #AAB8C8;
}
.channel-browser-nav button.is-active, .channel-browser-nav .channel-tab.is-active {
  color: #FFD0A1;
  border-color: #A9682E;
  background: rgba(245,160,79,.12);
  box-shadow: inset 0 -2px 0 rgba(245,160,79,.55);
}
.channel-browser-copy strong { color: #F4F7FB; }
.channel-browser-copy p, .channel-browser-hint { color: #91A1B5; }
.open-materials-strip {
  border-color: var(--line);
  background: var(--surface);
  box-shadow: 0 18px 54px rgba(0,0,0,.10);
}
html[data-theme="light"] .open-materials-strip { background: #FFFDF9; box-shadow: 0 15px 38px rgba(55,61,70,.08); }
.open-materials-strip-button { border-color: var(--line-strong); color: var(--text); background: var(--surface-raised); }
.open-materials-strip-button:hover { border-color: color-mix(in srgb, var(--accent) 58%, var(--line)); background: var(--accent-soft); }

/* Quote bridge */
.statement-bridge-card {
  border-color: var(--line);
  background: linear-gradient(150deg, color-mix(in srgb, var(--surface-focal) 82%, transparent), var(--surface));
  box-shadow: 0 24px 65px rgba(0,0,0,.13);
}
html[data-theme="light"] .statement-bridge-card { background: var(--satin); border-color: var(--satin-border); }
.statement-quote-mark { color: color-mix(in srgb, var(--accent) 44%, transparent); }
.statement-author { color: var(--muted); }

/* Practice explorer */
.practice-explorer {
  border-color: var(--line);
  background: var(--surface);
  box-shadow: 0 25px 72px rgba(0,0,0,.14);
}
html[data-theme="light"] .practice-explorer { background: #FFFDF9; box-shadow: 0 19px 52px rgba(51,58,68,.09); }
.practice-chip {
  border-color: var(--line);
  background: var(--surface-raised);
  color: var(--muted-strong);
}
.practice-chip:hover { border-color: color-mix(in srgb, var(--line-strong) 74%, var(--accent)); background: color-mix(in srgb, var(--surface-raised) 94%, var(--accent) 6%); color: var(--text); }
.practice-chip.is-active {
  color: var(--text);
  border-color: color-mix(in srgb, var(--accent) 62%, var(--line));
  background: var(--accent-soft);
  box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--accent) 76%, transparent);
}
.practice-chip-special { background: var(--surface-raised); }
.practice-chip-icon, .duel-icon { color: var(--accent); }
.practice-chip-copy small, .practice-special-label { color: var(--muted); }
.practice-panels { border-color: var(--line); background: color-mix(in srgb, var(--surface-raised) 90%, transparent); }
.practice-panel p, .practice-points span { color: var(--muted); }
.practice-points li { border-color: var(--line); }
.practice-points strong { color: var(--muted-strong); }

/* Demo */
.demo-tabs {
  border-color: var(--line);
  background: var(--surface-raised);
}
.demo-tabs button { color: var(--muted); }
.demo-tabs button span { background: color-mix(in srgb, var(--surface-focal) 92%, transparent); }
.demo-tabs button.is-active {
  color: var(--text);
  background: var(--surface-focal);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--line-strong) 80%, transparent), inset 0 -2px 0 var(--accent);
}
.demo-window {
  border-color: var(--line);
  background: var(--surface);
  box-shadow: var(--shadow);
}
.window-bar, .demo-copy-panel { border-color: var(--line); }
.window-bar { color: var(--muted); }
.demo-note { border-color: var(--line); color: var(--muted); }
.demo-note span { color: var(--accent); }
.demo-product-panel {
  background: radial-gradient(circle at 50% 44%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 51%), var(--surface-raised);
}
.demo-product-panel::before { border-color: color-mix(in srgb, var(--line-strong) 36%, transparent); box-shadow: 0 0 0 70px color-mix(in srgb, var(--line) 12%, transparent),0 0 0 140px color-mix(in srgb, var(--line) 8%, transparent); }
.training-select button, .result-screen {
  border-color: var(--line);
  background: var(--surface);
  color: var(--text);
}
.skill-icon { background: var(--accent-soft); color: var(--accent); }
.training-select button small, .record-screen p, .result-screen p { color: var(--muted); }
.training-select button i, .live-wave i { color: var(--accent); background-color: var(--accent); }
.record-ring { background: radial-gradient(circle,var(--accent-soft),var(--surface-focal) 55%,var(--surface)); border-color: color-mix(in srgb, var(--accent) 27%, var(--line)); box-shadow: 0 0 0 20px color-mix(in srgb,var(--accent) 4%,transparent),0 0 0 44px color-mix(in srgb,var(--accent) 2%,transparent); }
.record-ring i { border-color: color-mix(in srgb, var(--accent) 44%, transparent); }
.demo-platform-switch { border-color: var(--line); background: var(--surface-raised); }
.demo-platform-switch button { color: var(--muted); }
.demo-platform-switch button.is-active { color: var(--text); background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 44%, var(--line)); }
/* Keep Telegram/Web product mockups dark in both themes: they are product evidence, not page chrome. */
.telegram-shell, .web-shell, .webapp-shell { color-scheme: dark; }

/* Author */
.author-portrait { border-color: var(--line); box-shadow: 0 30px 86px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.04); }
html[data-theme="light"] .author-portrait { box-shadow: 0 26px 70px rgba(46,53,62,.16); }
.author-portrait::before {
  background: linear-gradient(180deg,rgba(3,7,13,.02) 37%,rgba(3,7,13,.78) 100%), linear-gradient(90deg,rgba(245,160,79,.05),rgba(71,100,135,.05));
}
.author-photo-caption { color: #F4F7FB; }
.author-photo-caption span { color: #B8C4D1; }
.author-lead { color: var(--muted-strong) !important; }
.author-facts div { border-color: var(--line); }
.author-facts span { color: var(--muted); }
.author-socials a { border-color: var(--line); background: var(--surface-raised); color: var(--muted-strong); }
.author-socials a:hover { border-color: color-mix(in srgb,var(--accent) 44%, var(--line)); background: var(--accent-soft); color: var(--text); }
.author-socials svg { stroke: var(--accent); }

/* Reviews */
.reviews-carousel { border-color: var(--line); }
.review-card {
  border-color: var(--line);
  background: var(--surface);
  box-shadow: 0 15px 44px rgba(0,0,0,.10);
  transition: transform 550ms cubic-bezier(.22,.8,.2,1), border-color .28s ease, box-shadow .28s ease;
}
.review-card:hover, .review-card:focus-visible, .review-card.is-active {
  border-color: color-mix(in srgb, var(--accent) 48%, var(--line));
  box-shadow: 0 20px 50px rgba(0,0,0,.14);
}
html[data-theme="light"] .review-card { background: var(--satin); border-color: var(--satin-border); box-shadow: 0 15px 36px rgba(56,62,71,.10), inset 0 1px 0 rgba(255,255,255,.82); }
.review-card-copy strong { color: var(--text); }
.review-card-copy small, .reviews-hint { color: var(--muted); }
.reviews-arrow { border-color: var(--line); background: var(--surface-raised); color: var(--text); }
.reviews-arrow:hover { border-color: color-mix(in srgb,var(--accent) 46%,var(--line)); background: var(--accent-soft); }
.reviews-dots button { background: color-mix(in srgb, var(--muted) 40%, transparent); }
.reviews-dots button.is-active { background: var(--accent); }

/* Access / pricing */
.access-card {
  border-color: var(--line);
  background: var(--surface);
  box-shadow: 0 24px 64px rgba(0,0,0,.13);
}
.access-card.is-featured, .access-card.access-paid, .access-card:last-child {
  border-color: color-mix(in srgb, var(--accent) 42%, var(--line));
  background: linear-gradient(145deg, color-mix(in srgb, var(--surface-focal) 90%, var(--accent) 10%), var(--surface));
}
html[data-theme="light"] .access-card:last-child {
  background: var(--satin);
  border-color: #C8B59F;
  box-shadow: 0 20px 48px rgba(64,61,57,.11), inset 0 1px 0 rgba(255,255,255,.83);
}
.access-card h3 { color: var(--text); }
.access-card > p, .access-card li { color: var(--muted); }
.access-card li::before, .access-card .access-compare li.is-included::before { color: var(--green); }
.access-card li.is-muted, .access-card .access-compare li.is-excluded { color: color-mix(in srgb, var(--muted) 78%, transparent); }
.access-card li.is-muted::before, .access-card .access-compare li.is-excluded::before { color: var(--muted); }
.access-badge, .price-badge { border-color: color-mix(in srgb, var(--accent) 34%, var(--line)); background: var(--accent-soft); color: var(--accent-text); }

/* FAQ */
.faq-list, details, .faq-item { border-color: var(--line); }
summary { color: var(--text); }
summary:hover, details[open] summary { color: var(--text); }
summary span { background: var(--surface-raised); color: var(--muted); }
details[open] summary span { background: var(--accent-soft); color: var(--accent); }
.faq-heading-note { color: var(--muted); }

/* Final CTA + footer */
.final-cta {
  border-color: var(--line);
  background: linear-gradient(145deg, color-mix(in srgb, var(--surface-focal) 88%, transparent), var(--surface));
  box-shadow: 0 24px 70px rgba(0,0,0,.13);
}
html[data-theme="light"] .final-cta { background: var(--satin); border-color: var(--satin-border); box-shadow: 0 22px 55px rgba(60,64,69,.10), inset 0 1px 0 rgba(255,255,255,.82); }
.final-glow { background: color-mix(in srgb, var(--accent) 19%, transparent); }
.final-cta > p:nth-of-type(2) { color: var(--muted); }
.site-footer, footer { border-color: var(--line); color: var(--muted); }
.footer-materials-button, .footer-legal-links a { color: var(--muted-strong); }
.footer-materials-button:hover, .footer-legal-links a:hover { color: var(--text); }

/* Modals and operational surfaces */
.reviews-dialog, .trial-dialog, .material-dialog, .subscription-dialog {
  border-color: var(--line-strong);
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 34px 110px rgba(0,0,0,.36);
}
html[data-theme="light"] :is(.reviews-dialog,.trial-dialog,.material-dialog,.subscription-dialog) { box-shadow: 0 30px 90px rgba(45,52,61,.19); }
.modal-close { border-color: var(--line); background: var(--surface-raised); color: var(--text); }
.modal-close:hover { border-color: color-mix(in srgb,var(--accent) 45%,var(--line)); background: var(--accent-soft); }
.trial-choice, .subscription-plan, .subscription-selected, .subscription-recovery,
.subscription-field input, .trial-consent, .subscription-consent {
  border-color: var(--line);
  background: var(--surface-raised);
  color: var(--text);
}
.subscription-heading p, .trial-dialog-intro, .trial-choice-copy small,
.subscription-field small, .subscription-consent, .subscription-footnote,
.subscription-recovery p { color: var(--muted); }
.subscription-plan:hover { border-color: color-mix(in srgb,var(--accent) 48%,var(--line)); background: color-mix(in srgb,var(--surface-raised) 94%,var(--accent) 6%); }
.subscription-plan.is-selected, .subscription-plan[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); }
.subscription-plan.is-best::before { background: var(--accent); color: var(--cta-text); }
.subscription-status-dot { background: var(--accent); box-shadow: 0 0 16px color-mix(in srgb,var(--accent) 50%,transparent); }
.trial-choice-kicker { color: var(--accent-text); }
.trial-choice-action:disabled { border-color: var(--line); background: var(--surface-raised); color: var(--muted); }
.toast { border-color: var(--line-strong); background: var(--surface); color: var(--text); }
.material-channel-note { border-color: color-mix(in srgb,var(--accent) 28%,var(--line)); background: var(--accent-soft); color: var(--muted-strong); }
.material-open-library-cta { border-color: var(--line); background: var(--surface-raised); }
.material-open-library-cta a { color: var(--accent-text); }

/* Light-specific cleanup of hardcoded dark text / blue residues on page chrome. */
html[data-theme="light"] :is(
  .system-copy ul,
  .system-copy p,
  .inside-copy > p,
  .practice-panel p,
  .practice-points span,
  .author-copy > p,
  .reviews-heading p,
  .access-heading p,
  .access-card > p,
  .access-card li,
  .faq-heading-note,
  .faq-answer p,
  .final-cta > p,
  .footer-operator,
  .footer-brand-block p
) { color: #687587 !important; }
html[data-theme="light"] :is(
  .system-copy h3,
  .inside h2,
  .practice-panel h3,
  .author h2,
  .reviews h2,
  .access h2,
  .access-card h3,
  .faq h2,
  .final-cta h2
) { color: #182230 !important; }
html[data-theme="light"] .system-copy li::before { box-shadow: none; }
html[data-theme="light"] .statement-bridge-card h2 { color: #182230; }
html[data-theme="light"] .statement-author { color: #687587; }
html[data-theme="light"] .practice-points strong { color: #344154; }
html[data-theme="light"] .practice-chip.is-active { color: #182230; }
html[data-theme="light"] .demo-copy-panel h3 { color: #182230; }
html[data-theme="light"] .demo-window { background: #FFFDF9; box-shadow: 0 22px 60px rgba(51,57,66,.11); }
html[data-theme="light"] .demo-tabs { background: #F0EEE9; }
html[data-theme="light"] .demo-tabs button.is-active { background: #FFFDF9; }
html[data-theme="light"] .demo-product-panel { background: radial-gradient(circle at 50% 44%, rgba(233,144,67,.10), transparent 51%), #F0EEE9; }
html[data-theme="light"] .training-select button,
html[data-theme="light"] .result-screen { background: #FFFDF9; color: #182230; }
html[data-theme="light"] .record-ring { background: radial-gradient(circle,rgba(233,144,67,.12),#F1F0ED 55%,#FFFDF9); color:#182230; }
html[data-theme="light"] .open-materials-strip-copy { color: #182230; }
html[data-theme="light"] .open-materials-strip-note { color: #687587; }

/* Canonical quiet scrollbars. */
* { scrollbar-width: thin; scrollbar-color: #52657A #07111D; }
html[data-theme="light"] * { scrollbar-color: #9AA8B7 #F0EEE9; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: #07111D; }
*::-webkit-scrollbar-thumb { background: #52657A; border-radius: 999px; border: 2px solid #07111D; }
*::-webkit-scrollbar-thumb:hover { background: #6D8198; }
html[data-theme="light"] *::-webkit-scrollbar-track { background: #F0EEE9; }
html[data-theme="light"] *::-webkit-scrollbar-thumb { background: #9AA8B7; border-color: #F0EEE9; }
html[data-theme="light"] *::-webkit-scrollbar-thumb:hover { background: #7F8FA0; }

@media (prefers-reduced-motion: reduce) {
  .button, .review-card:not(.review-card-coverflow) { transition: none !important; transform: none !important; }
}




/* -------------------------------------------------------------------------
   FINAL B OWNER POLISH PASS — 2026-09-06
   - warm-gold replaces remaining cool blue labels
   - demo platform switch aligned with practice-chip language
   - reviews section upgraded to coverflow-style spotlight
   - legacy reviews markup retained disabled in #reviews-legacy-template
   ------------------------------------------------------------------------- */

.section-label,
.card-kicker,
.message-label,
.post-kicker,
.demo-counter,
.section-label-topic,
.open-materials-strip-copy span,
.open-materials-strip-copy strong,
.footer-materials-block > span,
.footer-materials-button {
  color: var(--accent);
}

.section-label-topic::after,
.statement-bridge .section-label::after,
.footer-materials-button b {
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 78%, transparent), transparent);
}

.open-materials-strip-copy strong,
.footer-materials-button {
  color: var(--accent);
}

.open-materials-strip-button:hover {
  border-color: color-mix(in srgb, var(--accent) 62%, var(--line));
  box-shadow: 0 14px 32px color-mix(in srgb, var(--accent) 12%, transparent);
}

.demo-platform-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px;
  border-radius: 16px;
  border-color: color-mix(in srgb, var(--line-strong) 86%, transparent);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface-focal) 88%, transparent), color-mix(in srgb, var(--surface-raised) 95%, transparent));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    0 10px 26px rgba(0,0,0,.12);
}

.demo-platform-switch button {
  position: relative;
  min-height: 36px;
  padding: 0 16px 2px;
  border: 1px solid transparent;
  border-radius: 12px;
  font-weight: 700;
  letter-spacing: .01em;
  transition: color .24s ease, background .24s ease, border-color .24s ease, box-shadow .24s ease, transform .24s ease;
}

.demo-platform-switch button::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 6px;
  height: 3px;
  border-radius: 999px;
  opacity: 0;
  transform: scaleX(.42);
  transform-origin: center;
  background: linear-gradient(90deg, #FFDAB6 0%, var(--accent) 52%, #E18736 100%);
  transition: opacity .24s ease, transform .24s ease;
}

.demo-platform-switch button:hover {
  color: var(--text);
  background: color-mix(in srgb, var(--surface-focal) 72%, transparent);
}

.demo-platform-switch button.is-active {
  color: var(--text);
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 65%, var(--accent) 35%), color-mix(in srgb, var(--accent-soft) 90%, transparent));
  border-color: color-mix(in srgb, var(--accent) 58%, var(--line));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    0 10px 24px color-mix(in srgb, var(--accent) 18%, transparent);
}

.demo-platform-switch button.is-active::after {
  opacity: 1;
  transform: scaleX(1);
}

.demo-platform-switch button:focus-visible {
  outline: 0;
  border-color: color-mix(in srgb, var(--accent) 76%, white 8%);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent);
}

html[data-theme="light"] .demo-platform-switch {
  background: linear-gradient(180deg, #F8F3EB 0%, #EEE6DA 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 12px 30px rgba(70, 60, 42, .10);
}

html[data-theme="light"] .demo-platform-switch button { color: #6E6457; }
html[data-theme="light"] .demo-platform-switch button:hover { color: #241C14; background: rgba(255,255,255,.72); }
html[data-theme="light"] .demo-platform-switch button.is-active {
  color: #221A13;
  background: linear-gradient(180deg, #FFF4E6 0%, #F7E6CF 100%);
  border-color: #D3A270;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.92), 0 12px 28px rgba(188,127,62,.16);
}


@media (prefers-reduced-motion: reduce) {
  .review-card-coverflow,
  .review-card-coverflow .review-card-copy,
  .demo-platform-switch button,
  .demo-platform-switch button::after {
    transition: none !important;
  }
}

/* ========================================================================
   FINAL LANDING B · OWNER POLISH R2 · 2026-09-06
   Canonical theme toggle, stable header geometry, true JS-driven coverflow,
   and Light-theme residue cleanup.
   ======================================================================== */

.orator-icon-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
}

.nav-brand-tools {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  flex: 0 0 auto;
}

/* Canonical sun/moon control: same geometry and glyph language as Buddy Rooms. */
.theme-toggle {
  width: 34px;
  min-width: 34px;
  height: 34px;
  min-height: 34px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--muted-strong);
  background: color-mix(in srgb, var(--surface-raised) 82%, transparent);
  cursor: pointer;
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 7%, transparent);
  transition: transform .2s ease, color .2s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.theme-toggle:hover:not(:disabled) {
  color: #F3CB73;
  border-color: color-mix(in srgb, var(--accent) 46%, var(--line));
  background: color-mix(in srgb, var(--accent-soft) 72%, var(--surface-raised));
  transform: translateY(-1px);
  box-shadow: 0 8px 22px color-mix(in srgb, var(--accent) 10%, transparent), inset 0 1px 0 rgba(255,255,255,.08);
}
.theme-toggle:focus-visible {
  outline: 0;
  border-color: color-mix(in srgb, var(--accent) 78%, var(--line));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent);
}
.theme-toggle svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
html[data-theme="light"] .theme-toggle {
  color: #435064;
  background: rgba(255,253,249,.88);
  border-color: #C8D0DA;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.92), 0 4px 12px rgba(54,60,69,.06);
}
html[data-theme="light"] .theme-toggle:hover:not(:disabled) {
  color: #B96924;
  border-color: #D2A16F;
  background: #FFF2E3;
  box-shadow: 0 8px 20px rgba(181,111,44,.10), inset 0 1px 0 rgba(255,255,255,.95);
}

/* Scroll may strengthen the material, but must not squeeze the desktop shell. */
@media (min-width: 961px) {
  .nav-shell,
  .site-header.is-scrolled .nav-shell {
    width: min(100%, 1110px);
    height: 72px;
    border-radius: 24px;
  }
  .site-header.is-scrolled .nav-shell {
    background: color-mix(in srgb, var(--shell) 94%, transparent);
    box-shadow: 0 16px 48px rgba(0,0,0,.18), inset 0 1px 0 color-mix(in srgb,#fff 7%,transparent);
  }
  html[data-theme="light"] .site-header.is-scrolled .nav-shell {
    background: rgba(255,253,249,.95);
    box-shadow: 0 14px 38px rgba(56,62,72,.10), inset 0 1px 0 rgba(255,255,255,.9);
  }
}

@media (max-width: 1120px) and (min-width: 961px) {
  .nav-brand-tools { gap: 6px; }
  .theme-toggle { width: 32px; min-width: 32px; height: 32px; min-height: 32px; }
  .theme-toggle svg { width: 16px; height: 16px; }
}

/* ------------------------------------------------------------------------
   REVIEWS COVERFLOW CORRECTIVE v1.69
   Full-bleed on the page background, three real testimonials only, adaptive
   natural screenshot proportions, gentle 3D rake, readable popup.
   ------------------------------------------------------------------------ */
.reviews.section {
  width: 100%;
  max-width: none;
  display: block;
  overflow: visible;
}
.reviews-heading {
  width: min(calc(100% - 96px), 760px);
  max-width: none;
  margin: 0 auto clamp(34px,4.2vw,54px);
  text-align: center;
}
.reviews-heading .section-label { margin-bottom: 16px; }
.reviews-heading h2 {
  margin: 0;
  font-size: clamp(40px,4.6vw,62px);
  line-height: 1.02;
  letter-spacing: -.047em;
}
.reviews-heading > p:last-child {
  max-width: 660px;
  margin: 20px auto 0;
  font-size: clamp(15px,1.35vw,17px);
  line-height: 1.62;
}
.reviews-carousel-coverflow {
  position: relative;
  width: 100%;
  min-width: 0;
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.reviews-coverflow-stage {
  position: relative;
  width: 100%;
  display: grid;
  grid-template-columns: 54px minmax(0,1fr) 54px;
  align-items: center;
  gap: 0;
}
.reviews-viewport-coverflow {
  position: relative;
  width: 100%;
  height: clamp(360px,38vw,470px);
  min-height: 0;
  overflow: visible;
  outline: none;
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  perspective: 1100px;
  perspective-origin: 50% 47%;
}
.reviews-viewport-coverflow:active { cursor: grabbing; }
.reviews-viewport-coverflow:focus-visible::after {
  content: "";
  position: absolute;
  inset: 4px 1.5vw;
  border-radius: 24px;
  pointer-events: none;
  box-shadow: inset 0 0 0 2px color-mix(in srgb,var(--accent) 42%,transparent);
}
.reviews-track-coverflow {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  padding: 0;
  transform-style: preserve-3d;
}
.review-card-coverflow {
  --review-width: clamp(250px,22vw,310px);
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--review-width);
  height: auto;
  min-height: 0;
  padding: 0;
  margin: 0;
  overflow: visible;
  border: 0;
  border-radius: 20px;
  background: transparent;
  box-shadow: none;
  color: var(--text);
  cursor: pointer;
  transform-origin: center center;
  transform-style: preserve-3d;
  will-change: transform, opacity, filter;
  transition: filter .2s ease, opacity .2s ease;
}
.review-card-coverflow[data-review-format="wide"] {
  --review-width: clamp(330px,34vw,500px);
}
.review-card-coverflow:hover,
.review-card-coverflow:focus-visible,
.review-card-coverflow.is-active {
  border: 0;
  background: transparent;
  box-shadow: none;
}
.review-card-coverflow:focus-visible { outline: 0; }
.review-card-coverflow .review-card-media {
  width: 100%;
  height: auto;
  min-height: 0;
  display: block;
  overflow: hidden;
  border: 1px solid color-mix(in srgb,var(--line-strong) 54%,transparent);
  border-radius: 20px;
  background: transparent;
  box-shadow: 0 22px 58px rgba(0,0,0,.24);
  transition: border-color .22s ease, box-shadow .22s ease;
}
.review-card-coverflow .review-card-media img {
  width: 100%;
  height: auto;
  max-height: none;
  display: block;
  object-fit: contain;
  background: transparent;
  pointer-events: none;
  -webkit-user-drag: none;
}
.review-card-coverflow.is-active .review-card-media {
  border-color: color-mix(in srgb,var(--accent) 22%,var(--line));
  box-shadow:
    0 30px 76px rgba(0,0,0,.29),
    0 0 52px color-mix(in srgb,var(--accent) 7%,transparent);
}
.review-card-coverflow .review-card-copy { display: none; }
.reviews-arrow-side {
  position: relative;
  z-index: 130;
  width: 38px;
  height: 38px;
  margin: 0 auto;
  border: 1px solid transparent;
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  opacity: .62;
  box-shadow: none;
  backdrop-filter: none;
  transition: color .2s ease, opacity .2s ease, background .2s ease, transform .2s ease;
}
.reviews-arrow-side:hover,
.reviews-arrow-side:focus-visible {
  color: var(--accent);
  opacity: 1;
  border-color: color-mix(in srgb,var(--accent) 20%,transparent);
  background: color-mix(in srgb,var(--accent-soft) 68%,transparent);
  box-shadow: none;
  transform: scale(1.04);
}
.reviews-coverflow-caption {
  min-height: 52px;
  margin: -4px auto 0;
  padding: 0 24px;
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 5px;
  text-align: center;
}
.reviews-coverflow-caption strong {
  color: var(--text);
  font-size: 15px;
  font-weight: 760;
  letter-spacing: -.01em;
}
.reviews-coverflow-caption span {
  max-width: 580px;
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.45;
}
.reviews-controls-coverflow {
  margin-top: 8px;
  display: grid;
  justify-items: center;
  gap: 10px;
}
.reviews-controls-coverflow .reviews-dots button {
  width: 7px;
  height: 7px;
  background: color-mix(in srgb,var(--muted) 42%,transparent);
}
.reviews-controls-coverflow .reviews-dots button.is-active {
  width: 22px;
  background: var(--accent);
}
.reviews-controls-coverflow .reviews-hint {
  margin: 0;
  color: var(--muted);
  font-size: 10.5px;
}

/* Readable lightbox: image is the content, panel chrome stays quiet. */
.reviews-modal .modal-backdrop {
  background: rgba(3,6,10,.78);
  backdrop-filter: blur(14px) saturate(90%);
}
.reviews-dialog {
  width: min(1080px, calc(100vw - 36px));
  max-height: calc(100vh - 36px);
  padding: 50px 54px 18px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb,var(--line-strong) 55%,transparent);
  border-radius: 26px;
  background: color-mix(in srgb,var(--surface) 94%,transparent);
  box-shadow: 0 46px 140px rgba(0,0,0,.52);
  backdrop-filter: blur(24px) saturate(120%);
}
.reviews-modal-stage {
  grid-template-columns: 44px minmax(0,1fr) 44px;
  gap: 14px;
  min-height: 0;
}
.reviews-modal-stage figure {
  min-width: 0;
  max-height: calc(100vh - 140px);
  overflow: auto;
  scrollbar-width: thin;
}
.reviews-modal-image-button {
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: 18px;
  background: transparent;
  cursor: zoom-in;
}
.reviews-modal-image-button:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 3px color-mix(in srgb,var(--accent) 24%,transparent);
}
.reviews-modal-stage img {
  width: auto;
  max-width: 100%;
  height: min(78vh,780px);
  max-height: min(78vh,780px);
  margin: 0 auto;
  object-fit: contain;
  border-radius: 16px;
  box-shadow: 0 22px 72px rgba(0,0,0,.30);
  transition: max-width .24s ease, width .24s ease, transform .24s ease;
}
.reviews-modal.is-zoomed .reviews-modal-image-button {
  width: max-content;
  min-width: 100%;
  cursor: zoom-out;
}
.reviews-modal.is-zoomed .reviews-modal-stage img {
  width: min(1120px, 145vw);
  max-width: none;
  height: auto;
  max-height: none;
}
.reviews-modal-arrow {
  border-color: color-mix(in srgb,var(--line-strong) 48%,transparent);
  background: color-mix(in srgb,var(--surface-raised) 72%,transparent);
  color: var(--text);
}
.reviews-modal-arrow:hover,
.reviews-modal-arrow:focus-visible {
  border-color: color-mix(in srgb,var(--accent) 42%,var(--line));
  background: var(--accent-soft);
  color: var(--accent);
}
.reviews-modal-footer { color: var(--muted); }
.reviews-modal-footer span { color: var(--accent-text); }

html[data-theme="light"] .review-card-coverflow .review-card-media {
  border-color: #D6CEC3;
  box-shadow: 0 20px 52px rgba(55,49,42,.13);
}
html[data-theme="light"] .review-card-coverflow.is-active .review-card-media {
  border-color: #D2A674;
  box-shadow: 0 27px 62px rgba(60,52,43,.16), 0 0 46px rgba(233,144,67,.065);
}
html[data-theme="light"] .reviews-dialog {
  border-color: #D4CCC1;
  background: rgba(255,253,249,.97);
  box-shadow: 0 42px 120px rgba(48,43,38,.24);
}

@media (max-width: 900px) {
  .reviews-heading { width: min(calc(100% - 48px), 700px); }
  .reviews-coverflow-stage { grid-template-columns: 42px minmax(0,1fr) 42px; }
  .review-card-coverflow { --review-width: clamp(230px,31vw,285px); }
  .review-card-coverflow[data-review-format="wide"] { --review-width: clamp(310px,48vw,440px); }
}
@media (max-width: 620px) {
  .reviews-heading {
    width: calc(100% - 32px);
    margin-bottom: 26px;
  }
  .reviews-heading h2 { font-size: clamp(34px,10.4vw,44px); }
  .reviews-heading > p:last-child { margin-top: 16px; font-size: 14px; }
  .reviews-coverflow-stage { grid-template-columns: minmax(0,1fr); }
  .reviews-arrow-side { display: none; }
  .reviews-viewport-coverflow {
    height: 382px;
    overflow: hidden;
    perspective: 900px;
  }
  .review-card-coverflow,
  .review-card-coverflow[data-review-format="wide"] {
    --review-width: min(82vw,330px);
  }
  .reviews-coverflow-caption { min-height: 58px; margin-top: 0; padding: 0 18px; }
  .reviews-controls-coverflow .reviews-hint { display: none; }
  .reviews-dialog {
    width: calc(100vw - 16px);
    max-height: calc(100vh - 16px);
    padding: 44px 8px 12px;
    border-radius: 20px;
  }
  .reviews-modal-stage {
    grid-template-columns: 34px minmax(0,1fr) 34px;
    gap: 4px;
  }
  .reviews-modal-arrow { width: 34px; height: 34px; }
  .reviews-modal-stage figure { max-height: calc(100vh - 104px); }
  .reviews-modal-stage img { max-height: calc(100vh - 132px); }
  .reviews-modal-footer small { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .review-card-coverflow,
  .review-card-coverflow .review-card-media,
  .reviews-modal-stage img { transition: none !important; }
}

/* ------------------------------------------------------------------------
   Light-theme sanitation. Product mockups remain dark by design; all page
   chrome, controls, labels, outlines and icons use semantic warm-neutral
   roles instead of stale blue literals.
   ------------------------------------------------------------------------ */
html[data-theme="light"] body.landing-variant-b {
  color: var(--text);
}
html[data-theme="light"] body.landing-variant-b :is(
  .eyebrow,
  .trust-row,
  .hero-free-note,
  .system-copy p,
  .system-copy li,
  .inside-copy p,
  .practice-panel p,
  .practice-points span,
  .demo-heading-left > p,
  .author-copy > p,
  .reviews-heading > p,
  .access-heading > p,
  .faq-heading-note,
  .final-cta > p,
  .footer-brand-block p,
  .footer-operator
) { color: var(--muted) !important; }

html[data-theme="light"] body.landing-variant-b :is(
  .section-label,
  .section-label-topic,
  .card-kicker,
  .message-label,
  .post-kicker,
  .demo-counter,
  .open-materials-strip-copy span,
  .open-materials-strip-copy strong,
  .footer-materials-block > span,
  .footer-materials-button,
  .practice-chip-icon,
  .duel-icon,
  .skill-icon,
  .text-link span,
  .system-more span
) { color: var(--accent) !important; }

html[data-theme="light"] body.landing-variant-b :is(
  .button-secondary,
  .open-materials-strip-button,
  .practice-chip,
  .author-socials a,
  .reviews-arrow:not(.reviews-arrow-side),
  .subscription-plan,
  .subscription-reset,
  .trial-choice-action,
  .menu-toggle
) {
  color: var(--text);
  border-color: var(--line-strong);
  background: var(--surface-raised);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.82);
}

html[data-theme="light"] body.landing-variant-b :is(
  .button-secondary,
  .open-materials-strip-button,
  .practice-chip,
  .author-socials a,
  .reviews-arrow:not(.reviews-arrow-side),
  .subscription-plan,
  .subscription-reset,
  .trial-choice-action,
  .menu-toggle
):hover {
  color: var(--text);
  border-color: color-mix(in srgb,var(--accent) 48%,var(--line-strong));
  background: color-mix(in srgb,var(--surface-raised) 92%,var(--accent) 8%);
  box-shadow: 0 10px 24px rgba(59,54,47,.08), inset 0 1px 0 rgba(255,255,255,.88);
}

html[data-theme="light"] body.landing-variant-b :is(
  .practice-chip.is-active,
  .demo-tabs button.is-active,
  .demo-platform-switch button.is-active,
  .subscription-plan.is-selected,
  .subscription-plan[aria-pressed="true"]
) {
  color: #241A12 !important;
  border-color: #D5A36F !important;
  background: linear-gradient(180deg,#FFF5E9 0%,#F6E4CF 100%) !important;
  box-shadow: inset 0 -3px 0 var(--accent), inset 0 1px 0 rgba(255,255,255,.96), 0 10px 24px rgba(177,111,46,.10) !important;
}

html[data-theme="light"] body.landing-variant-b .demo-tabs button span {
  color: #71573E;
  background: #ECE6DE;
}
html[data-theme="light"] body.landing-variant-b .demo-tabs button.is-active span {
  color: #7C4214;
  background: #F7D9B9;
}
html[data-theme="light"] body.landing-variant-b .menu-toggle span { background: #263445; }
html[data-theme="light"] body.landing-variant-b .author-socials svg { stroke: var(--accent); }
html[data-theme="light"] body.landing-variant-b .status-dot,
html[data-theme="light"] body.landing-variant-b .subscription-status-dot { background: var(--accent); }

/* No blue focus rings in Light page chrome. */
html[data-theme="light"] body.landing-variant-b :is(
  a,
  button,
  [tabindex]:not([tabindex="-1"]),
  input,
  select,
  textarea
):focus-visible {
  outline-color: var(--accent);
}
html[data-theme="light"] body.landing-variant-b :is(
  .button,
  .practice-chip,
  .demo-tabs button,
  .demo-platform-switch button,
  .open-materials-strip-button,
  .author-socials a,
  .theme-toggle,
  .menu-toggle
):focus-visible {
  outline: 0;
  box-shadow: 0 0 0 3px color-mix(in srgb,var(--accent) 20%,transparent);
}

/* The hero/channel/product evidence may retain native product colors. Everything
   below is page chrome and should never fall back to historical blue accent. */
html[data-theme="light"] body.landing-variant-b :is(
  .access-badge,
  .price-badge,
  .trial-choice-kicker,
  .subscription-recovery-kicker,
  .trial-start-status.is-ready,
  .material-open-library-cta a
) { color: var(--accent-text) !important; }

@media (prefers-reduced-motion: reduce) {
  .theme-toggle,
  .review-card-coverflow,
  .review-card-coverflow .review-card-media { transition: none !important; }
}

/* Secondary Light audit: remove the remaining historical blue literals from
   landing chrome that have more specific legacy selectors. */
html[data-theme="light"] body.landing-variant-b .practice-chip-duel .duel-icon {
  stroke: var(--accent) !important;
  filter: drop-shadow(0 5px 14px color-mix(in srgb,var(--accent) 20%,transparent)) !important;
}
html[data-theme="light"] body.landing-variant-b :is(
  .free-card-icon,
  .free-card-row.is-available > b,
  .price-badge strong,
  .plan-option.is-best span,
  .access-kicker,
  .access-card li::before,
  .access-card .access-compare li.is-included::before,
  .bot-analysis-top b,
  .demo-window-label > span,
  .material-meta,
  .material-benefits li::before,
  .material-timeline time,
  .material-open-library-cta b,
  .open-materials-strip-button > span
) { color: var(--accent) !important; }
html[data-theme="light"] body.landing-variant-b .free-card-icon {
  border-color: color-mix(in srgb,var(--accent) 28%,var(--line));
  background: var(--accent-soft);
}
html[data-theme="light"] body.landing-variant-b .analysis-criteria strong { color: var(--text) !important; }
html[data-theme="light"] body.landing-variant-b .system-more:hover { color: var(--accent-strong) !important; }
html[data-theme="light"] body.landing-variant-b :is(.subscription-consent input,.trial-consent input) { accent-color: var(--accent); }
html[data-theme="light"] body.landing-variant-b :is(.subscription-consent a,.trial-consent a) {
  color: var(--accent-text);
  text-decoration-color: color-mix(in srgb,var(--accent) 38%,transparent);
}
html[data-theme="light"] body.landing-variant-b .subscription-field input:focus {
  border-color: color-mix(in srgb,var(--accent) 72%,var(--line-strong));
  box-shadow: 0 0 0 4px color-mix(in srgb,var(--accent) 13%,transparent);
}
html[data-theme="light"] body.landing-variant-b .trial-choice-telegram:hover,
html[data-theme="light"] body.landing-variant-b .trial-choice-telegram:focus-within {
  border-color: color-mix(in srgb,var(--accent) 44%,var(--line));
  background: color-mix(in srgb,var(--surface-raised) 92%,var(--accent) 8%);
  box-shadow: 0 20px 46px rgba(70,60,48,.10);
}
html[data-theme="light"] body.landing-variant-b .trial-start-status.is-ready { color: var(--green); }


/* ========================================================================
   LANDING CORRECTIVE v1.73 · OWNER VISUAL PASS · 2026-09-06
   Scoped to the landing page so open-materials/services keep their own chrome.
   Restores Sand editorial labels, project-native deep gradients and Soft Float
   cards; removes selected-platform underline; normalizes review geometry and
   mobile author media; makes access cards whole-surface actions.
   ======================================================================== */

/* Sand is the editorial accent. Ember stays reserved for action/selection. */
body.landing-variant-b :is(
  .section-label,
  .section-label-topic,
  .card-kicker,
  .message-label,
  .post-kicker,
  .demo-counter,
  .demo-principle-label,
  .demo-window-label > span,
  .access-kicker,
  .access-common-kicker,
  .stack-card figcaption span,
  .stack-card-art > span,
  .material-meta,
  .footer-materials-block > span
) { color: var(--sand) !important; }

body.landing-variant-b .open-materials-strip-copy span { color: var(--sand) !important; }
body.landing-variant-b .open-materials-strip-copy strong { color: var(--text) !important; }
body.landing-variant-b .footer-materials-button { color: var(--text) !important; }
body.landing-variant-b .footer-materials-button b { color: var(--accent); background: none !important; }

/* Header: quiet at rest, action-ember on hover/focus. */
body.landing-variant-b .nav-links a:hover,
body.landing-variant-b .nav-links a:focus-visible,
body.landing-variant-b .nav-account-login:hover,
body.landing-variant-b .nav-account-login:focus-visible,
body.landing-variant-b .mobile-menu > a:not(.button):hover,
body.landing-variant-b .mobile-menu > a:not(.button):focus-visible {
  color: var(--accent);
}

/* Project-native deep material: gradient, not faux bevel. */
body.landing-variant-b .system-card {
  background:
    radial-gradient(ellipse at 12% -6%, rgba(245,160,79,.075), transparent 48%),
    linear-gradient(145deg,#18304e 0%,#10223a 49%,#091524 100%);
  border-color: color-mix(in srgb,var(--line-strong) 82%,transparent);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035), 0 22px 58px rgba(0,0,0,.18);
}
body.landing-variant-b .statement-bridge-card {
  background:
    radial-gradient(ellipse at 12% 0%, rgba(245,160,79,.085), transparent 48%),
    linear-gradient(145deg,#172c48 0%,#0f2037 50%,#091523 100%);
  border-color: color-mix(in srgb,var(--line-strong) 78%,transparent);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035), 0 20px 54px rgba(0,0,0,.16);
}
body.landing-variant-b .practice-explorer {
  background:
    radial-gradient(ellipse at 90% 0%, rgba(245,160,79,.055), transparent 46%),
    linear-gradient(145deg,#142944 0%,#0e1e34 52%,#081422 100%);
  border-color: color-mix(in srgb,var(--line-strong) 76%,transparent);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03), 0 22px 58px rgba(0,0,0,.16);
}
body.landing-variant-b .practice-panels {
  background: linear-gradient(150deg, rgba(20,39,64,.82), rgba(8,20,34,.90));
}
body.landing-variant-b .access-common {
  background: linear-gradient(145deg,rgba(20,39,64,.68),rgba(8,20,34,.82));
  border-color: color-mix(in srgb,var(--line-strong) 64%,transparent);
}
body.landing-variant-b .access-card {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 15% -8%, rgba(238,244,255,.065), transparent 62%),
    linear-gradient(145deg,#18304e 0%,#102139 49%,#091524 100%);
  border-color: var(--line-strong);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035), 0 18px 46px rgba(0,0,0,.18);
}
body.landing-variant-b .full-access {
  background:
    radial-gradient(ellipse at 85% -8%, rgba(245,160,79,.105), transparent 56%),
    linear-gradient(145deg,#1a304b 0%,#112139 50%,#0a1524 100%);
}

html[data-theme="light"] body.landing-variant-b :is(.system-card,.statement-bridge-card,.practice-explorer,.access-card,.access-common) {
  background: linear-gradient(145deg,#FEFAF4 0%,#F4F0EB 48%,#E2E1DF 100%);
  border-color: #CCD1D6;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.90), 0 16px 36px rgba(51,58,67,.085);
}
html[data-theme="light"] body.landing-variant-b .practice-panels {
  background: linear-gradient(145deg,#FFFDF9,#F4F0EB 72%,#E8E5E2);
}

/* Telegram/Web selector: selected surface only; no decorative underline. */
body.landing-variant-b .demo-platform-switch button::after { display: none !important; }
body.landing-variant-b .demo-platform-switch button.is-active {
  padding-bottom: 0;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 9px 22px color-mix(in srgb,var(--accent) 14%,transparent);
}
html[data-theme="light"] body.landing-variant-b .demo-platform-switch button.is-active {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.94), 0 9px 22px rgba(177,111,46,.10) !important;
}

/* Whole-card Soft Float action, matched to the established ORATOR launcher. */
body.landing-variant-b .access-card-action {
  cursor: pointer;
  transition: transform 550ms cubic-bezier(.22,.8,.2,1), border-color 550ms cubic-bezier(.22,.8,.2,1), box-shadow 550ms cubic-bezier(.22,.8,.2,1);
}
body.landing-variant-b .access-card-action::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at 20% 0%,rgba(238,244,255,.085),transparent 70%);
  opacity: .35;
  transition: opacity 550ms cubic-bezier(.22,.8,.2,1);
}
body.landing-variant-b .access-card-action > :not(.cursor-glow-layer,.access-card-hit) { position: relative; z-index: 1; }
body.landing-variant-b .access-card-action:focus-visible {
  outline: 0;
  transform: translateY(-4px);
  border-color: color-mix(in srgb,var(--accent) 34%,var(--line-strong));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 20px 48px rgba(0,0,0,.26), 0 0 0 3px color-mix(in srgb,var(--accent) 15%,transparent);
}
@media (hover:hover) and (pointer:fine) {
  body.landing-variant-b .access-card-action:hover {
    transform: translateY(-4px);
    border-color: color-mix(in srgb,var(--accent) 34%,var(--line-strong));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 20px 48px rgba(0,0,0,.26);
  }
  body.landing-variant-b .access-card-action:hover::before { opacity: .95; }
  body.landing-variant-b .access-card-action:hover .access-card-cta { color: var(--text); }
  body.landing-variant-b .access-card-action:hover .access-card-cta > span { color: var(--accent); transform: translateX(4px); }
}
body.landing-variant-b .access-card-action:active { transform: translateY(-1px); }
body.landing-variant-b .access-card-cta {
  margin-top: auto;
  padding-top: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border-top: 1px solid color-mix(in srgb,var(--line) 72%,transparent);
  color: var(--muted-strong);
  font-size: 13px;
  font-weight: 760;
  transition: color .24s ease;
}
body.landing-variant-b .access-card-cta > span {
  color: var(--muted);
  font-size: 18px;
  transition: color .24s ease, transform .24s ease;
}
html[data-theme="light"] body.landing-variant-b .access-card-action:is(:hover,:focus-visible) {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.92), 0 18px 38px rgba(51,58,67,.12), 0 0 0 3px color-mix(in srgb,var(--accent) 12%,transparent);
}
html[data-theme="light"] body.landing-variant-b .access-card-cta { border-top-color: #D6D1CA; }

/* Footer uses the shared secondary button vocabulary, compacted for footer scale. */
body.landing-variant-b .footer-materials-button.button {
  width: fit-content;
  min-height: 42px;
  padding: 9px 14px;
  border-radius: 12px;
  gap: 10px;
  font-size: 12px;
}

/* Reviews: equal rectangular frames, sufficient pitch, no card collision. */
body.landing-variant-b .reviews.section { overflow: clip; }
body.landing-variant-b .reviews-viewport-coverflow {
  height: clamp(300px,29vw,360px);
  overflow: hidden;
  perspective: 1500px;
}
body.landing-variant-b .review-card-coverflow,
body.landing-variant-b .review-card-coverflow[data-review-format="wide"] {
  --review-width: clamp(278px,25vw,350px);
  width: var(--review-width);
}
body.landing-variant-b .review-card-coverflow .review-card-media {
  width: 100%;
  aspect-ratio: 4 / 3;
  height: auto;
  display: grid;
  place-items: center;
  border-radius: 18px;
  background: #080E17;
  border-color: color-mix(in srgb,var(--line-strong) 62%,transparent);
}
body.landing-variant-b .review-card-coverflow .review-card-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  background: #080E17;
}
body.landing-variant-b .review-card-coverflow.is-active .review-card-media {
  border-color: color-mix(in srgb,var(--sand) 26%,var(--line));
  box-shadow: 0 24px 62px rgba(0,0,0,.26), 0 0 44px color-mix(in srgb,var(--accent) 6%,transparent);
}
html[data-theme="light"] body.landing-variant-b .review-card-coverflow .review-card-media,
html[data-theme="light"] body.landing-variant-b .review-card-coverflow .review-card-media img {
  background: #111821;
}

@media (max-width: 900px) {
  body.landing-variant-b .review-card-coverflow,
  body.landing-variant-b .review-card-coverflow[data-review-format="wide"] {
    --review-width: clamp(250px,37vw,310px);
  }
  body.landing-variant-b .reviews-viewport-coverflow { height: clamp(275px,40vw,330px); }
}
@media (max-width: 620px) {
  body.landing-variant-b .reviews.section { padding-left: 0; padding-right: 0; }
  body.landing-variant-b .reviews-heading { width: calc(100% - 36px); }
  body.landing-variant-b .reviews-viewport-coverflow { height: 270px; }
  body.landing-variant-b .review-card-coverflow,
  body.landing-variant-b .review-card-coverflow[data-review-format="wide"] {
    --review-width: min(80vw,310px);
  }
  body.landing-variant-b .reviews-coverflow-caption { padding-inline: 22px; }
}

/* Mobile author media: preserve the face/composition instead of landscape crop. */
@media (max-width: 760px) {
  body.landing-variant-b .author { gap: 34px; }
  body.landing-variant-b .author-portrait {
    width: 100%;
    min-height: 0 !important;
    aspect-ratio: 4 / 5;
    border-radius: 24px;
  }
  body.landing-variant-b .author-photo {
    object-position: 50% 27%;
  }
  body.landing-variant-b .author-photo-caption {
    left: 20px;
    right: 20px;
    bottom: 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.landing-variant-b .access-card-action { transition: none !important; transform: none !important; }
}


/* v1.74 follow-up: native full-card action hit area + stable review pitch. */
body.landing-variant-b .access-card-hit {
  position: absolute;
  inset: 0;
  z-index: 5;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  border-radius: inherit;
  background: transparent;
  color: transparent;
  cursor: pointer;
}
body.landing-variant-b .access-card-hit:focus-visible { outline: 0; box-shadow: none; }
body.landing-variant-b .access-card-action:focus-within {
  transform: translateY(-4px);
  border-color: color-mix(in srgb,var(--accent) 34%,var(--line-strong));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 20px 48px rgba(0,0,0,.26), 0 0 0 3px color-mix(in srgb,var(--accent) 15%,transparent);
}
body.landing-variant-b .access-card-action:focus-within .access-card-cta { color: var(--text); }
body.landing-variant-b .access-card-action:focus-within .access-card-cta > span { color: var(--accent); transform: translateX(4px); }

/* Match the more-specific Light sanitation rules with Sand, not Ember. */
html[data-theme="light"] body.landing-variant-b :is(
  .section-label,
  .section-label-topic,
  .card-kicker,
  .message-label,
  .post-kicker,
  .demo-counter,
  .demo-principle-label,
  .demo-window-label > span,
  .access-kicker,
  .access-common-kicker,
  .stack-card figcaption span,
  .stack-card-art > span,
  .material-meta,
  .open-materials-strip-copy span,
  .footer-materials-block > span
) { color: var(--sand) !important; }
html[data-theme="light"] body.landing-variant-b .open-materials-strip-copy strong { color: var(--text) !important; }
html[data-theme="light"] body.landing-variant-b .footer-materials-button { color: var(--text) !important; }

/* v1.76 follow-up: remove the last legacy blue footer-button halo and keep action arrows ember. */
body.landing-variant-b .footer-materials-button.button {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
body.landing-variant-b .footer-materials-button.button:hover,
body.landing-variant-b .footer-materials-button.button:focus-visible {
  box-shadow: 0 12px 28px rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.06);
}
html[data-theme="light"] body.landing-variant-b .footer-materials-button.button {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.88), 0 7px 18px rgba(51,58,67,.06);
}
html[data-theme="light"] body.landing-variant-b .footer-materials-button.button:hover,
html[data-theme="light"] body.landing-variant-b .footer-materials-button.button:focus-visible {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.92), 0 12px 24px rgba(51,58,67,.09);
}
body.landing-variant-b .open-materials-strip-button > span,
body.landing-variant-b .footer-materials-button b { color: var(--accent) !important; }

/* v1.78 — owner-approved compact FAQ cards + restrained cursor light.
   Scoped to this landing: legal / library pages retain their original styles. */
body.landing-variant-b .faq-compact {
  grid-template-columns: minmax(250px, .68fr) minmax(0, 1.32fr);
  gap: 72px;
}
body.landing-variant-b .faq-compact .faq-list {
  width: 100%;
  max-width: none;
  display: grid;
  gap: 8px;
  border: 0;
}
body.landing-variant-b .faq-compact .faq-item {
  position: relative;
  isolation: isolate;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  background: linear-gradient(145deg, var(--surface-focal), var(--surface));
  transition: border-color .24s ease, background-color .24s ease;
}
body.landing-variant-b .faq-compact .faq-item:hover,
body.landing-variant-b .faq-compact .faq-item[open] { border-color: var(--line-strong); }
body.landing-variant-b .faq-compact summary {
  position: relative;
  z-index: 1;
  min-height: 58px;
  padding: 14px 16px;
  gap: 14px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--muted-strong);
}
body.landing-variant-b .faq-compact summary .faq-question {
  display: block;
  width: auto;
  height: auto;
  min-width: 0;
  flex: 1 1 auto;
  border-radius: 0;
  background: none;
  color: inherit;
  font-size: inherit;
  transform: none;
  transition: none;
}
body.landing-variant-b .faq-compact summary .faq-toggle-icon {
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--surface-raised);
  color: var(--muted-strong);
  font-size: 16px;
  font-weight: 400;
}
body.landing-variant-b .faq-compact .faq-item[open] summary { color: var(--text); }
body.landing-variant-b .faq-compact .faq-item[open] .faq-toggle-icon {
  background: var(--accent-soft);
  color: var(--accent);
  transform: rotate(45deg);
}
body.landing-variant-b .faq-compact summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -4px;
  border-radius: 14px;
}
body.landing-variant-b .faq-compact .faq-answer { position: relative; z-index: 1; }
body.landing-variant-b .faq-compact .faq-answer > div { padding: 0 16px; }
body.landing-variant-b .faq-compact .faq-answer p {
  max-width: none;
  margin: 0 0 16px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.67;
}
body.landing-variant-b .faq-compact .faq-answer p + p { margin-top: -4px; }
body.landing-variant-b .faq-compact .faq-answer a { color: var(--sand); text-decoration-color: currentColor; }
html[data-theme="light"] body.landing-variant-b .faq-compact .faq-item {
  background: linear-gradient(135deg, #FFFDF9 0%, #F0F2F4 100%);
  border-color: var(--line);
}
html[data-theme="light"] body.landing-variant-b .faq-compact .faq-item[open] { border-color: var(--line-strong); }

/* Height belongs to the content. The decorative light is never a flex item. */
body.landing-variant-b .final-cta {
  width: min(calc(100% - 48px), 980px);
  min-height: 0;
  height: auto;
  padding: 48px 36px 50px;
  margin-bottom: 36px;
  border-radius: 32px;
  isolation: isolate;
}
body.landing-variant-b .final-cta > :not(.final-glow) { position: relative; z-index: 2; }
body.landing-variant-b .final-cta > .final-glow {
  position: absolute;
  pointer-events: none;
  z-index: 0;
  opacity: .3;
}
body.landing-variant-b .final-cta h2 { max-width: 760px; font-size: clamp(36px, 4.9vw, 58px); }
body.landing-variant-b .final-cta > p:nth-of-type(2) { max-width: 700px; font-size: 16px; margin: 22px auto 28px; }
body.landing-variant-b .site-footer { border-top: 0; }

/* Blue belongs to the soft light only. Sand labels and ember actions stay put. */
[data-cursor-glow] { --cursor-x: 50%; --cursor-y: 50%; --cursor-opacity: 0; }
body.landing-variant-b .final-cta::after,
body.landing-variant-b .faq-compact .faq-item::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  border-radius: inherit;
  opacity: var(--cursor-opacity);
  background: radial-gradient(300px circle at var(--cursor-x) var(--cursor-y), rgba(99, 148, 211, .065) 0%, rgba(80, 125, 184, .034) 35%, rgba(64, 104, 155, .012) 58%, transparent 78%);
  transition: opacity .22s ease;
}
body.landing-variant-b .faq-compact .faq-item::before {
  background: radial-gradient(230px circle at var(--cursor-x) var(--cursor-y), rgba(99, 148, 211, .065) 0%, rgba(80, 125, 184, .030) 35%, rgba(64, 104, 155, .010) 58%, transparent 78%);
}
html[data-theme="light"] body.landing-variant-b .final-cta::after,
html[data-theme="light"] body.landing-variant-b .faq-compact .faq-item::before {
  background: radial-gradient(260px circle at var(--cursor-x) var(--cursor-y), rgba(71, 111, 165, .052) 0%, rgba(79, 124, 178, .024) 38%, transparent 78%);
}

/* The transparent track must not intercept clicks on receding 3D cards. */
body.landing-variant-b .reviews-track-coverflow { pointer-events: none; }
body.landing-variant-b .review-card-coverflow { pointer-events: auto; }
body.landing-variant-b .reviews-modal-image-button {
  display: block;
  line-height: 0;
}
body.landing-variant-b .reviews-modal-stage img {
  display: block;
  object-fit: contain;
}
@media (max-width: 1000px) {
  body.landing-variant-b .faq-compact { grid-template-columns: minmax(0,1fr); gap: 32px; }
  body.landing-variant-b .faq-compact .section-heading { max-width: 650px; }
  body.landing-variant-b .faq-compact .faq-heading-note { max-width: 600px; }
}
@media (max-width: 640px) {
  body.landing-variant-b .faq-compact summary { padding: 13px 14px; gap: 12px; }
  body.landing-variant-b .faq-compact .faq-answer > div { padding-inline: 14px; }
  body.landing-variant-b .final-cta { width: calc(100% - 32px); padding: 36px 20px 38px; border-radius: 26px; margin-bottom: 28px; }
  body.landing-variant-b .final-cta h2 { font-size: clamp(32px, 8.5vw, 44px); }
  body.landing-variant-b .final-cta > p:nth-of-type(2) { font-size: 15px; margin-block: 18px 22px; }
}
@media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) {
  body.landing-variant-b .final-cta::after,
  body.landing-variant-b .faq-compact .faq-item::before { display: none; }
}

/* v1.79: scoped Buddy demo + centered, wider access comparison.
   Preserve v1.78 FAQ/reviews/theme/motion and never restyle the AI mockups. */
body.landing-variant-b .buddy-layout { align-items: start; }
body.landing-variant-b .buddy-heading h2 { font-size: clamp(36px, 3.25vw, 49px); line-height: 1.06; }
body.landing-variant-b .buddy-heading > p:not(.section-label) { max-width: 40ch; }
body.landing-variant-b .buddy-principle { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--line); }
body.landing-variant-b .buddy-principle .section-label { margin: 0 0 12px; font-size: 11px; }
body.landing-variant-b .buddy-principle > p:not(.section-label) { color: var(--muted-strong); font-size: 15px; line-height: 1.65; }
body.landing-variant-b .buddy-principle .buddy-inclusion { color: var(--accent-text); font-size: 12px; margin-top: 22px; }
body.landing-variant-b .buddy-stage { min-width: 0; }
body.landing-variant-b .buddy-steps { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 5px; padding: 6px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface-raised); margin-bottom: 18px; }
body.landing-variant-b .buddy-steps button { display: flex; align-items: center; justify-content: center; gap: 9px; padding: 12px 8px; min-height: 46px; border: 1px solid transparent; border-radius: 12px; background: transparent; color: var(--muted); font: inherit; font-size: 12px; line-height: 1.3; cursor: pointer; transition: background .28s, color .28s, border-color .28s; }
body.landing-variant-b .buddy-steps button > span { display: grid; place-items: center; flex: 0 0 23px; height: 23px; border-radius: 7px; background: var(--surface-focal); font-size: 10px; }
body.landing-variant-b .buddy-steps button:hover { color: var(--text); background: var(--surface-focal); }
body.landing-variant-b .buddy-steps button.is-active { color: var(--text); border-color: var(--line-strong); background: var(--surface-focal); box-shadow: inset 0 -2px 0 var(--accent); }
body.landing-variant-b .buddy-window { overflow: hidden; border: 1px solid var(--line-strong); border-radius: 28px; background: linear-gradient(145deg, #152941, #0c1829 75%); box-shadow: var(--shadow); }
body.landing-variant-b .buddy-window-label { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 65px; padding: 10px 18px 10px 26px; border-bottom: 1px solid var(--line); }
body.landing-variant-b .buddy-window-label > span { color: var(--accent-text); font-size: 12px; font-weight: 800; letter-spacing: .065em; white-space: nowrap; }
body.landing-variant-b .buddy-platforms { flex: 0 1 auto; min-width: 0; }
body.landing-variant-b .buddy-platforms button { min-height: 38px; padding-inline: 18px; white-space: nowrap; }
body.landing-variant-b .buddy-window-content { display: grid; grid-template-columns: minmax(0,.86fr) minmax(0,1.14fr); min-height: 490px; }
body.landing-variant-b .buddy-copy { min-width: 0; padding: 34px 26px; align-content: center; border-right: 1px solid var(--line); }
body.landing-variant-b .buddy-copy h3 { margin: 18px 0; font-size: clamp(24px,2.2vw,33px); line-height: 1.13; letter-spacing: -.035em; color: var(--text); }
body.landing-variant-b .buddy-copy p { color: var(--muted-strong); font-size: 14px; line-height: 1.7; }
body.landing-variant-b .buddy-copy .buddy-step-note { border-top: 1px solid var(--line); padding-top: 18px; margin-top: 24px; font-size: 12px; color: var(--muted); }
body.landing-variant-b .buddy-preview { min-width: 0; display: grid; align-items: center; padding: 28px; background: radial-gradient(ellipse at 78% 12%,rgba(88,125,164,.08),transparent 70%); }
body.landing-variant-b .buddy-shot { margin: 0; width: 100%; min-width: 0; }
body.landing-variant-b .buddy-shot-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 15px; min-height: 335px; padding: 24px 16px; border: 1px dashed var(--line-strong); border-radius: 21px; background: color-mix(in srgb,var(--surface) 60%,transparent); text-align: center; }
body.landing-variant-b .buddy-shot-placeholder svg { width: 42px; height: 42px; color: var(--muted); margin-bottom: 8px; }
body.landing-variant-b .buddy-shot-kicker { color: var(--accent-text); font-size: 10px; letter-spacing: .09em; text-transform: uppercase; }
body.landing-variant-b .buddy-shot-placeholder strong { color: var(--text); font-size: 18px; line-height: 1.3; }
body.landing-variant-b .buddy-shot-placeholder p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.6; }
body.landing-variant-b .buddy-shot figcaption { max-width: 34ch; margin: 14px auto 0; color: var(--muted); text-align: center; font-size: 10px; line-height: 1.55; }
body.landing-variant-b .buddy-shot img { width: 100%; max-height: 360px; object-fit: contain; display: block; border-radius: 16px; }
body.landing-variant-b .buddy-stage-hint { margin: 14px auto 0; color: var(--muted); text-align: center; font-size: 11px; line-height: 1.6; }
body.landing-variant-b .buddy-demo [hidden] { display: none !important; }
body.landing-variant-b .buddy-demo :is(button,[role="tabpanel"]):focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }
html[data-theme="light"] body.landing-variant-b .buddy-window { background: linear-gradient(145deg,#FEFAF4,#F0ECE7 70%,#E4E4E1); box-shadow: 0 20px 50px rgba(55,62,71,.09); }
html[data-theme="light"] body.landing-variant-b .buddy-preview { background: radial-gradient(ellipse at 75% 10%,rgba(102,132,159,.06),transparent 70%); }

/* The heading takes one full row. Paid has more space than free on desktop. */
body.landing-variant-b #access { grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr); grid-template-rows: auto auto auto; gap: 24px; align-items: stretch; }
body.landing-variant-b #access .access-heading { grid-column: 1 / -1; grid-row: 1; max-width: none; width: 100%; padding: 0; margin: 0 0 12px; text-align: center; }
body.landing-variant-b #access .access-heading h2 { font-size: clamp(36px,4.5vw,60px); line-height: 1.08; }
body.landing-variant-b #access .access-heading > p:last-child { max-width: 650px; margin: 18px auto 0; }
body.landing-variant-b #access .trial-access { grid-column: 1; grid-row: 2; }
body.landing-variant-b #access .full-access { grid-column: 2; grid-row: 2; }
body.landing-variant-b #access .access-card { min-width: 0; padding: clamp(24px,3vw,38px); }
body.landing-variant-b #access .access-card h3 { font-size: clamp(25px,2.5vw,34px); line-height: 1.14; }
body.landing-variant-b #access .access-common { grid-column: 1 / -1; grid-row: 3; }
body.landing-variant-b #access .access-card-action { border-color: var(--line-strong); }
body.landing-variant-b #access .access-card-action:is(:hover,:focus-within) { border-color: var(--line-strong); box-shadow: inset 0 1px 0 rgba(255,255,255,.04),0 24px 55px rgba(0,0,0,.22); }
body.landing-variant-b #access .access-card-action:is(:hover,:focus-within) .access-card-cta,
body.landing-variant-b #access .access-card-action:is(:hover,:focus-within) .access-card-cta > span { color: var(--accent); }
body.landing-variant-b #access .access-card-hit:focus-visible { outline: 2px solid var(--accent); outline-offset: -5px; }
html[data-theme="light"] body.landing-variant-b #access .access-card-action,
html[data-theme="light"] body.landing-variant-b #access .access-card-action:is(:hover,:focus-within) { border-color: #CCD1D6; box-shadow: inset 0 1px 0 rgba(255,255,255,.9),0 18px 38px rgba(51,58,67,.11); }
body.landing-variant-b #access .access-price { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 9px; min-height: 132px; margin-top: auto; padding: 23px 0 21px; }
body.landing-variant-b #access .access-price-label { color: var(--accent-text); font-size: 11px; letter-spacing: .065em; font-weight: 700; }
body.landing-variant-b #access .access-price-value { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 12px; }
body.landing-variant-b #access .access-price strong { color: var(--text); font-size: clamp(23px,2.5vw,34px); letter-spacing: -.035em; line-height: 1.15; font-weight: 750; }
body.landing-variant-b #access .access-price[data-state="ready"] strong { font-size: clamp(34px,3.7vw,48px); font-variant-numeric: tabular-nums; }
body.landing-variant-b #access .access-price-value > span { color: var(--muted-strong); font-size: 14px; }
body.landing-variant-b #access .access-price-note { display: block; max-width: 54ch; color: var(--muted); font-size: 12px; line-height: 1.55; }
body.landing-variant-b #access .access-card-cta { margin-top: 0; }
@media (max-width: 1180px) {
  body.landing-variant-b .buddy-layout { grid-template-columns: 1fr; }
  body.landing-variant-b .buddy-heading { max-width: 760px; }
  body.landing-variant-b .buddy-heading > p:not(.section-label) { max-width: 65ch; }
  body.landing-variant-b .buddy-principle { margin-top: 20px; }
  body.landing-variant-b .buddy-window-content { min-height: 430px; }
}
@media (max-width: 700px) {
  body.landing-variant-b #access { grid-template-columns: minmax(0,1fr); grid-template-rows: auto auto auto auto; gap: 16px; }
  body.landing-variant-b #access .trial-access { grid-column: 1; grid-row: 2; }
  body.landing-variant-b #access .full-access { grid-column: 1; grid-row: 3; }
  body.landing-variant-b #access .access-common { grid-column: 1; grid-row: 4; }
  body.landing-variant-b #access .access-heading { margin-bottom: 8px; }
  body.landing-variant-b #access .access-price { min-height: 0; padding-block: 20px; }
  body.landing-variant-b .buddy-heading h2 { font-size: clamp(32px,7.7vw,42px); }
  body.landing-variant-b .buddy-steps { grid-template-columns: repeat(2,minmax(0,1fr)); }
  body.landing-variant-b .buddy-steps button { justify-content: flex-start; padding: 10px; }
  body.landing-variant-b .buddy-window-label { flex-direction: column; align-items: stretch; gap: 12px; padding: 18px 16px; }
  body.landing-variant-b .buddy-window-label > span { text-align: center; }
  body.landing-variant-b .buddy-platforms { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); width: 100%; }
  body.landing-variant-b .buddy-platforms button { font-size: 11px; padding-inline: 5px; }
  body.landing-variant-b .buddy-window-content { grid-template-columns: 1fr; min-height: 0; }
  body.landing-variant-b .buddy-copy { padding: 25px 20px; border-right: 0; border-bottom: 1px solid var(--line); }
  body.landing-variant-b .buddy-copy h3 { font-size: 29px; }
  body.landing-variant-b .buddy-preview { padding: 20px; }
  body.landing-variant-b .buddy-shot-placeholder { min-height: 265px; }
}
@media (prefers-reduced-motion: reduce) {
  body.landing-variant-b .buddy-steps button { transition: none; }
  body.landing-variant-b #access .access-card-action { transform: none !important; }
}

/* v1.80: reproduced inherited AI-demo overflow at 901..1023 px.
   Its nested 240+400 px columns cannot fit beside the 270 px heading.
   Stack only the outer layout in this gap; do not clip controls or shrink text. */
@media (min-width: 901px) and (max-width: 1023px) {
  body.landing-variant-b #demo .demo-layout { grid-template-columns: minmax(0,1fr); gap: 32px; }
  body.landing-variant-b #demo .demo-heading-left { width: 100%; max-width: 620px; margin: 0; }
  body.landing-variant-b #demo .demo-stage { max-width: none; }
}

/* v1.81: a second inherited overflow was masked by the AI-demo failure.
   Footer minima total 976 px before the outer 96 px gutters. Use the existing
   two-column tablet layout until all four columns genuinely fit (1072 px). */
@media (min-width: 901px) and (max-width: 1071px) {
  body.landing-variant-b .site-footer { grid-template-columns: repeat(2,minmax(0,1fr)); }
  body.landing-variant-b .footer-operator { grid-column: 1 / -1; justify-items: start; text-align: left; }
}


/* ========================================================================
   LANDING v1.82 · light corrective + shared glow system · 2026-09-06
   Applies the cursor glow to all key cards and sanitizes warm-light surfaces.
   ======================================================================== */

[data-cursor-glow] {
  --cursor-x: 50%;
  --cursor-y: 50%;
  --cursor-opacity: 0;
}
/* Glow never changes the layout/position of its host or its children. */
[data-cursor-glow].faq-item > summary,
[data-cursor-glow].faq-item > .faq-answer { position: relative; z-index: 1; }
[data-cursor-glow] .access-card-hit { z-index: 3; }
/* One decorative layer; independent of flex/grid/3D geometry. */
.cursor-glow-host-static { position: relative; }
[data-cursor-glow] > .cursor-glow-layer {
  position: absolute !important;
  inset: 0 !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  display: block;
  z-index: 6;
  pointer-events: none;
  border-radius: inherit;
  opacity: var(--cursor-opacity, 0);
  background: radial-gradient(280px circle at var(--cursor-x, 50%) var(--cursor-y, 50%), rgba(99,148,211,.065) 0%, rgba(80,125,184,.030) 36%, transparent 78%);
  transition: opacity .22s ease;
}
html[data-theme="light"] [data-cursor-glow] > .cursor-glow-layer {
  background: radial-gradient(260px circle at var(--cursor-x, 50%) var(--cursor-y, 50%), rgba(87,106,126,.05) 0%, rgba(132,127,119,.025) 40%, transparent 80%);
}
@media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) {
  [data-cursor-glow] > .cursor-glow-layer { display: none; transition: none; }
}
body.landing-variant-b .final-cta::after,
body.landing-variant-b .faq-compact .faq-item::before { content: none; }
body.landing-variant-b :is(.system-card,.channel-browser,.open-materials-strip,.statement-bridge-card,.practice-explorer,.practice-chip,.demo-tabs button,.demo-platform-switch button,.buddy-steps button,.buddy-window,.buddy-platforms button,.access-card,.access-common,.review-card) { overflow: hidden; }
body.landing-variant-b .statement-bridge-card { padding: clamp(30px, 4vw, 46px) clamp(28px, 4vw, 42px); }
body.landing-variant-b .statement-quote.statement-bridge .statement-bridge-card h2 { max-width: 28em; font-size: clamp(26px, 2.65vw, 36px); line-height: 1.22; }
body.landing-variant-b .statement-author { margin-top: 18px; }
body.landing-variant-b .practice-special-grid { align-items: stretch; }
body.landing-variant-b .practice-chip-special,
body.landing-variant-b .practice-chip-duel { min-height: 110px; }
body.landing-variant-b .practice-chip-special .practice-chip-copy,
body.landing-variant-b .practice-chip-duel .practice-chip-copy { gap: 7px; padding-top: 42px; }
body.landing-variant-b .practice-chip-special small,
body.landing-variant-b .practice-chip-duel small { font-size: 10.5px; line-height: 1.36; }
body.landing-variant-b .practice-chip:hover,
body.landing-variant-b .practice-chip:focus-visible,
body.landing-variant-b .access-card:hover,
body.landing-variant-b .access-card:focus-within,
body.landing-variant-b .buddy-steps button:hover,
body.landing-variant-b .buddy-platforms button:hover,
body.landing-variant-b .demo-tabs button:hover,
body.landing-variant-b .demo-platform-switch button:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 18px 42px rgba(0,0,0,.16); }

html[data-theme="light"] body.landing-variant-b .channel-browser {
  border-color: #C9D1DA;
  box-shadow: 0 24px 58px rgba(53, 57, 63, .11);
  background:
    radial-gradient(circle at 84% 4%, rgba(233,144,67,.08), transparent 30%),
    radial-gradient(circle at 12% 88%, rgba(84,101,122,.10), transparent 32%),
    linear-gradient(155deg, #111B2E, #081220 72%, #040A13);
}
html[data-theme="light"] body.landing-variant-b .channel-browser-stage::before { opacity: .065; }
html[data-theme="light"] body.landing-variant-b .channel-filter {
  color: #344254;
  border-color: #D5D2CD;
  background: #F7F4EF;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.92);
}
html[data-theme="light"] body.landing-variant-b .channel-filter:hover {
  border-color: #D1A46B;
  background: #FBF6EE;
  box-shadow: 0 12px 26px rgba(82, 71, 57, .09), inset 0 1px 0 rgba(255,255,255,.96);
}
html[data-theme="light"] body.landing-variant-b .channel-filter.is-active {
  color: #5D3613;
  border-color: #D29A63;
  background: linear-gradient(180deg, #FFF4E5 0%, #F3E4D1 100%);
  box-shadow: inset 0 -2px 0 rgba(233,144,67,.52), 0 12px 26px rgba(125, 89, 51, .10);
}
html[data-theme="light"] body.landing-variant-b .open-materials-strip {
  background: linear-gradient(135deg, #FFFDF9 0%, #F7F4EE 58%, #EFEAE1 100%);
  border-color: #D1CEC8;
  box-shadow: 0 16px 38px rgba(55, 61, 70, .08), inset 0 1px 0 rgba(255,255,255,.90);
}
html[data-theme="light"] body.landing-variant-b .open-materials-strip-button {
  background: #F8F5F0;
  border-color: #C9D0DA;
}
html[data-theme="light"] body.landing-variant-b .open-materials-strip-button:hover,
html[data-theme="light"] body.landing-variant-b .open-materials-strip-button:focus-visible {
  border-color: #D1A46B;
  background: #FFF8EE;
  box-shadow: 0 12px 24px rgba(78,71,59,.08), inset 0 1px 0 rgba(255,255,255,.95);
}
html[data-theme="light"] body.landing-variant-b .statement-bridge-card {
  box-shadow: 0 20px 46px rgba(57, 62, 70, .09), inset 0 1px 0 rgba(255,255,255,.92);
}
html[data-theme="light"] body.landing-variant-b .practice-explorer {
  border-color: #CFCBC5;
  background: linear-gradient(148deg, #FFFCF6 0%, #F5F1EA 62%, #ECE7E1 100%);
  box-shadow: 0 22px 52px rgba(51,58,68,.09), inset 0 1px 0 rgba(255,255,255,.88);
}
html[data-theme="light"] body.landing-variant-b .practice-panels {
  background: linear-gradient(155deg, rgba(251,248,242,.92), rgba(241,238,232,.98));
  border-color: #D6D1CA;
}
html[data-theme="light"] body.landing-variant-b .practice-chip {
  color: #293343;
  border-color: #D6D1CA;
  background: linear-gradient(180deg, #FAF8F3 0%, #F1EEE9 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.92);
}
html[data-theme="light"] body.landing-variant-b .practice-chip:hover {
  color: #1E2836;
  border-color: #D1A46B;
  background: linear-gradient(180deg, #FFF7EC 0%, #F4EBDF 100%);
  box-shadow: 0 14px 30px rgba(82, 71, 57, .10), inset 0 1px 0 rgba(255,255,255,.96);
}
html[data-theme="light"] body.landing-variant-b .practice-chip-special,
html[data-theme="light"] body.landing-variant-b .practice-chip-duel {
  background: linear-gradient(150deg, #FBF8F2 0%, #F0ECE5 100%);
  border-color: #D6D1CA;
}
html[data-theme="light"] body.landing-variant-b .practice-chip-special .practice-chip-icon {
  background: rgba(233, 144, 67, .08);
  border-color: rgba(209, 164, 107, .30);
  box-shadow: 0 10px 18px rgba(125, 88, 54, .10);
}
html[data-theme="light"] body.landing-variant-b .practice-chip-special .practice-chip-icon svg,
html[data-theme="light"] body.landing-variant-b .practice-chip-duel .duel-icon { stroke: #C67C35; color: #C67C35; }
html[data-theme="light"] body.landing-variant-b .practice-chip-special .practice-chip-orbit,
html[data-theme="light"] body.landing-variant-b .practice-chip-duel::after { border-color: rgba(204, 181, 156, .58); box-shadow: 0 0 0 18px rgba(219, 198, 172, .14); }
html[data-theme="light"] body.landing-variant-b .practice-chip-special strong,
html[data-theme="light"] body.landing-variant-b .practice-chip-duel strong { color: #182230; }
html[data-theme="light"] body.landing-variant-b .practice-chip-special small,
html[data-theme="light"] body.landing-variant-b .practice-chip-duel small { color: #5E6B7C; }
html[data-theme="light"] body.landing-variant-b .buddy-window {
  border-color: #D4D0CA;
  box-shadow: 0 22px 52px rgba(55, 62, 71, .09), inset 0 1px 0 rgba(255,255,255,.88);
}
html[data-theme="light"] body.landing-variant-b .buddy-steps button,
html[data-theme="light"] body.landing-variant-b .buddy-platforms button {
  color: #344154;
  background: #F7F4EF;
  border-color: #D6D1CA;
}
html[data-theme="light"] body.landing-variant-b .buddy-steps button.is-active,
html[data-theme="light"] body.landing-variant-b .buddy-platforms button.is-active {
  color: #5D3613;
  border-color: #D29A63;
  background: linear-gradient(180deg, #FFF4E5 0%, #F3E4D1 100%);
  box-shadow: inset 0 -2px 0 rgba(233,144,67,.52), 0 10px 22px rgba(125, 89, 51, .10);
}
html[data-theme="light"] body.landing-variant-b #access .access-card {
  border-color: #CCD1D6;
  box-shadow: 0 18px 42px rgba(51,58,68,.09), inset 0 1px 0 rgba(255,255,255,.88);
}
html[data-theme="light"] body.landing-variant-b .access-common {
  border-color: #D3CEC7;
  box-shadow: 0 18px 38px rgba(54, 59, 66, .07), inset 0 1px 0 rgba(255,255,255,.88);
}
@media (max-width: 900px) {
  body.landing-variant-b .practice-chip-special,
  body.landing-variant-b .practice-chip-duel { min-height: 102px; }
}
@media (max-width: 640px) {
  body.landing-variant-b .statement-quote.statement-bridge .statement-bridge-card h2 { font-size: clamp(24px, 6.4vw, 29px); }
}

/* v1.83 layout repair. Content/panels/routes are unchanged. Mobile recomposition
   belongs to the separate owner-review B, not these production rules. */
body.landing-variant-b .hero { min-height: 0; }
body.landing-variant-b .system-card { min-height: 0; }
body.landing-variant-b .practice-panels { min-height: 0; }
body.landing-variant-b .statement-bridge-card::before {
  background: linear-gradient(180deg,transparent,var(--sand) 28%,var(--sand) 72%,transparent);
  opacity: .32;
}
body.landing-variant-b .channel-library-copy h2 { text-wrap: balance; }
@media (min-width: 1001px) {
  body.landing-variant-b { --section-space-desktop: 80px; }
  body.landing-variant-b .hero { padding-top: 136px; padding-bottom: 64px; }
  body.landing-variant-b .hero h1 { font-size: clamp(54px,5.3vw,76px); line-height: 1.01; }
  body.landing-variant-b .hero-lead { font-size: 18px; }
  body.landing-variant-b .system-heading-centered { max-width: 1080px; }
  body.landing-variant-b .system-heading-centered h2 { font-size: clamp(36px,3.7vw,52px); }
  body.landing-variant-b .system-grid { margin-top: 38px; }
  body.landing-variant-b .system-card { padding: 32px; }
  body.landing-variant-b .system-copy h3 { font-size: clamp(27px,2.35vw,32px); }
  body.landing-variant-b .system-copy ul { margin-top: 20px; gap: 10px; }
}
/* Dark product evidence remains self-contained on a light page. */
html[data-theme="light"] body.landing-variant-b .telegram-shell,
html[data-theme="light"] body.landing-variant-b .phone-frame { color: #F4F7FB; }
html[data-theme="light"] body.landing-variant-b :is(.game-screen,.recommend-screen) {
  background: var(--surface); color: var(--text); border-color: var(--line);
}
html[data-theme="light"] body.landing-variant-b :is(.game-screen,.recommend-screen) :is(strong,b) { color: var(--text); }
html[data-theme="light"] body.landing-variant-b :is(.game-screen,.recommend-screen) :is(p,small,span) { color: var(--muted-strong); }

/* v1.84: independent render exposed legacy hero spill into copy. Only the
   desktop product scene is contained; no mobile recomposition is promoted. */
@media (min-width: 1081px) {
  body.landing-variant-b .hero-product-intro .channel-preview { left: 16px; top: 56px; width: 246px; }
  body.landing-variant-b .hero-product-intro .focus-pill { left: 16px; bottom: 24px; }
  body.landing-variant-b .hero-product-intro .progress-pill { right: 12px; bottom: 84px; }
  body.landing-variant-b .hero-copy { align-self: center; }
}
body.landing-variant-b .channel-library-note { height: auto; min-height: 0; max-height: none; overflow: visible; }
body.landing-variant-b .channel-library-copy h2 { font-size: clamp(36px,4.25vw,58px); }
body.landing-variant-b .practice-chip-duel .duel-signal { color: var(--sand); }
body.landing-variant-b .practice-chip-duel .duel-signal i { background: var(--sand); box-shadow: none; }
@media (min-width: 1001px) {
  body.landing-variant-b .inside h2 { font-size: clamp(36px,3.65vw,50px); line-height: 1.07; }
}

/* v1.86: rendered-image follow-up. Covers reserve their own space below copy,
   rather than retaining a legacy bottom offset on a relative Light container. */
body.landing-variant-b .system-card .channel-mini-covers {
  position: relative; inset: auto; width: 100%;
  height: 220px; min-height: 220px; flex-shrink: 0; margin: 24px 0 0;
}
html[data-theme="light"] body.landing-variant-b :is(.focus-pill p,.focus-pill > span,.progress-pill > span,.channel-head > div > span,.analysis-criteria span,.bot-analysis-top > span) {
  color: var(--muted-strong);
}
html[data-theme="light"] body.landing-variant-b :is(.phone-frame,.post-cover) { --sand: #F1CDA7; }
html[data-theme="light"].js.page-ready body.landing-variant-b .hero-product-intro .progress-pill { opacity: 1 !important; }
@media (max-width: 640px) {
  body.landing-variant-b .system-card .channel-mini-covers { height: 198px; min-height: 198px; }
}

/* LANDING-20260907-COMPACT-001: attached, expandable navigation, all page sizes.
   Full-width opaque surface: no floating gap, rounded island or text behind it. */
:root { --landing-header-height: 72px; }
html { scroll-padding-top: calc(var(--landing-header-height) + 8px); }
.site-header,
.js .site-header,
.js.page-ready .site-header {
  inset: 0 0 auto;
  padding: env(safe-area-inset-top, 0px) 0 0;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  opacity: 1;
  transform: none;
  transition: none;
}
.site-header .nav-shell,
.site-header.is-scrolled .nav-shell {
  width: 100%; max-width: none; height: 72px; margin: 0;
  padding: 0 max(20px, calc((100vw - 1200px) / 2));
  border: 0; border-radius: 0; background: transparent;
  box-shadow: none; backdrop-filter: none; transition: none;
}
html[data-theme="light"] .site-header .nav-shell,
html[data-theme="light"] .site-header.is-scrolled .nav-shell { background: transparent; box-shadow: none; }
.site-header .mobile-menu {
  width: 100%; max-width: none; margin: 0; border: 0; border-radius: 0;
  padding: 12px max(16px, env(safe-area-inset-left, 0px)) max(16px, env(safe-area-inset-bottom, 0px));
  background: var(--bg); box-shadow: none; backdrop-filter: none;
  max-height: calc(100vh - var(--landing-header-height));
  max-height: calc(100dvh - var(--landing-header-height));
  overflow-y: auto; overscroll-behavior: contain;
}
.site-header .mobile-menu > a:not(.button) { color: var(--text); }
.site-header .mobile-menu > * { flex-shrink: 0; }
.mobile-theme-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 11px 0; border-top: 1px solid var(--line); color: var(--muted); font-size: 14px; }
.mobile-theme-row[hidden] { display: none; }
.mobile-theme-row .theme-toggle { width: 44px; height: 44px; min-width: 44px; min-height: 44px; }
main > .section[id] { scroll-margin-top: 8px; }
@media (max-width: 1120px) and (min-width: 961px) {
  .site-header .nav-shell, .site-header.is-scrolled .nav-shell { padding-inline: 14px; }
}
@media (max-width: 960px) {
  .site-header .nav-shell, .site-header.is-scrolled .nav-shell { height: 62px; padding-inline: 16px; }
}
@media (max-width: 760px) {
  :root { --landing-header-height: 60px; }
  .site-header .nav-shell, .site-header.is-scrolled .nav-shell { height: 60px; padding-inline: 16px; }
  .site-header .nav-brand-tools > .theme-toggle { display: none; }
  .site-header .menu-toggle { width: 44px; height: 44px; }
}

/* C002: intrinsic equal-height directions, compact step rails and grouped FAQ.
   All practice panels share one grid cell and contribute to its intrinsic size.
   Inactive panels are invisible/inert, not removed from layout. No height guess,
   clipping, or per-switch ResizeObserver writes can move the following section. */
body.landing-variant-b #inside .practice-panels { display: grid; grid-template-columns: minmax(0,1fr); min-height: 0; }
body.landing-variant-b #inside .practice-panel {
  display: block; grid-area: 1 / 1; min-width: 0; padding: 24px 28px;
  visibility: hidden; pointer-events: none; animation: none;
}
body.landing-variant-b #inside .practice-panel.is-visible { visibility: visible; pointer-events: auto; }
body.landing-variant-b #inside .practice-panel h3 { font-size: clamp(26px,2.5vw,32px); line-height: 1.12; margin: 0 0 12px; }
body.landing-variant-b #inside .practice-panel > p { font-size: 15px; line-height: 1.55; }
body.landing-variant-b #inside .practice-points { margin-top: 16px; column-gap: 24px; }
body.landing-variant-b #inside .practice-points li { padding-block: 10px; }
body.landing-variant-b #inside :is(.practice-chip-special,.practice-chip-duel) { height: auto; min-height: 124px; padding: 14px; }
body.landing-variant-b #inside .practice-chip-copy { padding-top: 38px; gap: 6px; }
body.landing-variant-b #inside .practice-chip-copy strong { min-height: 32px; }
body.landing-variant-b #inside .practice-chip-copy small { line-height: 1.35; }
body.landing-variant-b :is(#demo,#buddy) .demo-layout {
  grid-template-columns: minmax(260px,380px) minmax(0,700px); gap: clamp(28px,4vw,56px); align-items: start;
}
body.landing-variant-b :is(#demo,#buddy) .section-heading { margin: 8px 0 0; max-width: 380px; text-align: left; }
body.landing-variant-b :is(#demo,#buddy) .section-heading h2 { font-size: clamp(32px,3.15vw,46px); line-height: 1.08; text-wrap: balance; margin-block: 18px 22px; }
body.landing-variant-b :is(#demo,#buddy) .section-heading > p:not(.section-label) {
  font-size: 16px; line-height: 1.6; color: var(--muted-strong); max-width: 42ch; margin: 0 0 16px;
}
body.landing-variant-b #buddy .section-heading > .buddy-inclusion { font-size: 12px; color: var(--accent-text); margin-top: 20px; }
body.landing-variant-b :is(#demo,#buddy) :is(.demo-stage,.buddy-stage) {
  display: grid; grid-template-columns: minmax(145px,190px) minmax(0,1fr); gap: 18px; margin: 0; max-width: 700px; min-width: 0;
}
body.landing-variant-b .product-step-rail { min-width: 0; }
body.landing-variant-b .product-step-rail :is(.demo-tabs,.buddy-steps) {
  display: flex; flex-direction: column; width: 100%; margin: 0; padding: 5px; gap: 5px;
  border: 1px solid var(--line); border-radius: 16px; background: var(--surface); overflow: visible;
}
body.landing-variant-b .product-step-rail :is(.demo-tabs,.buddy-steps) button {
  display: flex; align-items: center; gap: 9px; width: 100%; min-width: 0; min-height: 44px;
  padding: 10px 8px; font-size: 12px; line-height: 1.35; text-align: left; white-space: normal;
}
body.landing-variant-b .product-step-rail :is(.demo-tabs,.buddy-steps) button > span {
  display: inline-grid; place-items: center; flex: 0 0 22px; width: 22px; height: 22px; margin: 0;
}
body.landing-variant-b .product-step-rail :is(.demo-copy-panel,.buddy-copy) {
  display: block; border: 0; margin-top: 20px; padding: 0 6px; min-width: 0;
}
body.landing-variant-b .product-step-rail :is(.demo-copy-panel,.buddy-copy) h3 { font-size: 21px; line-height: 1.2; margin: 10px 0; letter-spacing: -.02em; }
body.landing-variant-b .product-step-rail :is(.demo-copy-panel,.buddy-copy) p { font-size: 13px; line-height: 1.6; margin: 0; color: var(--muted-strong); }
body.landing-variant-b .product-step-rail .demo-counter { font-size: 10px; }
body.landing-variant-b :is(#demo,#buddy) :is(.demo-window,.buddy-window) { min-width: 0; border-radius: 22px; }
body.landing-variant-b #demo .window-content,
body.landing-variant-b #buddy .buddy-window-content { display: block; min-height: 0; }
body.landing-variant-b :is(#demo,#buddy) :is(.demo-window-label,.buddy-window-label) {
  display: flex; flex-direction: column; align-items: stretch; justify-content: center; gap: 10px;
  min-height: 0; padding: 14px 16px;
}
body.landing-variant-b :is(#demo,#buddy) :is(.demo-window-label,.buddy-window-label) > span { font-size: 11px; text-align: center; }
body.landing-variant-b :is(#demo,#buddy) .demo-platform-area { width: 100%; min-width: 0; }
body.landing-variant-b :is(#demo,#buddy) .demo-platform-switch { display: flex; width: 100%; min-width: 0; padding: 4px; }
body.landing-variant-b :is(#demo,#buddy) .demo-platform-switch button { flex: 1; min-width: 0; min-height: 36px; padding: 8px; font-size: 11px; }
body.landing-variant-b #demo .demo-product-panel { min-height: 476px; height: 476px; padding: 14px; }
body.landing-variant-b #demo .telegram-shell { height: 444px; }
body.landing-variant-b #demo [data-demo-screen] { width: calc(100% - 28px); max-width: 420px; }
body.landing-variant-b #demo [data-demo-screen][aria-hidden="true"] { visibility: hidden; }
body.landing-variant-b #buddy .buddy-preview { min-height: 432px; padding: 20px; }
body.landing-variant-b #buddy .buddy-shot img { max-height: 350px; }
body.landing-variant-b #buddy .buddy-shot-placeholder { min-height: 330px; }
body.landing-variant-b #buddy .buddy-stage > noscript { grid-column: 1/-1; }
body.landing-variant-b #demo [role="tab"]:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }
/* Preserve all price copy, dynamic BFF amounts and hit targets. Only reduce gaps. */
body.landing-variant-b #access .access-card > p { min-height: 0; margin-bottom: 0; }
body.landing-variant-b #access .access-compare { margin-block: 22px 12px; }
body.landing-variant-b #access .access-price { min-height: 0; padding-block: 16px 18px; }
body.landing-variant-b .faq-compact .faq-list { display: grid; gap: 24px; }
body.landing-variant-b .faq-compact .faq-group { display: grid; gap: 10px; min-width: 0; }
body.landing-variant-b .faq-compact .faq-group-title { font-size: 12px; color: var(--accent-text); letter-spacing: .045em; margin: 0 0 2px; line-height: 1.4; }
@media (min-width: 761px) and (max-width: 1000px) {
  body.landing-variant-b :is(#demo,#buddy) .demo-layout { grid-template-columns: 1fr; gap: 26px; }
  body.landing-variant-b :is(#demo,#buddy) .section-heading { max-width: 760px; }
  body.landing-variant-b :is(#demo,#buddy) .section-heading > p:not(.section-label) { max-width: 65ch; }
  body.landing-variant-b :is(#demo,#buddy) :is(.demo-stage,.buddy-stage) { width: 100%; max-width: 700px; justify-self: center; }
}
/* Reset legacy two-column header padding after moving copy out of the window. */
body.landing-variant-b :is(#demo,#buddy) :is(.demo-window-label,.buddy-window-label) > span { display: block; min-height: 0; padding: 0; border: 0; }
body.landing-variant-b #demo .demo-platform-area { display: block; min-height: 0; padding: 0; border: 0; }
body.landing-variant-b #buddy .section-heading > p.buddy-inclusion { font-size: 12px; color: var(--accent-text); margin-top: 20px; }
/* The embedded phone is a viewport; its grid track may shrink below min-content.
   Long mock messages remain readable via their existing internal scroll area. */
body.landing-variant-b #demo .telegram-shell { grid-template-columns: minmax(0,1fr); }
body.landing-variant-b #demo .telegram-shell > * { min-width: 0; max-width: 100%; }
body.landing-variant-b #demo .telegram-peer { min-width: 0; }
body.landing-variant-b #demo .tg-bubble { min-width: 0; overflow-wrap: anywhere; }
body.landing-variant-b #demo :is(.game-screen,.recommend-screen,.result-screen) { max-height: calc(100% - 28px); overflow-y: auto; }
/* Narrow preview tracks may shrink without clipping their meaningful content. */
#demo .telegram-pinned { grid-template-columns:34px minmax(0,1fr) 28px; }
#demo .telegram-pinned > div { min-width:0; }
#demo .telegram-pinned strong { white-space:normal; overflow-wrap:anywhere; }
#demo .telegram-pinned small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
@media (max-width:760px) {
  #demo .record-ring { width:160px; height:160px; margin-bottom:22px; }
  #demo .record-screen p { font-size:14px; line-height:1.55; }
  #demo .record-screen { max-height:calc(100% - 28px); overflow-y:auto; }
}

/* C003: one aligned, narrower step rail; no residual space-between gap. */
@media (min-width: 761px) {
  body.landing-variant-b :is(#demo,#buddy) .demo-layout {
    max-width: 1140px; margin-inline: auto;
    grid-template-columns: minmax(260px,400px) minmax(0,1fr);
    gap: clamp(28px,3.3vw,44px); justify-content: normal;
  }
  body.landing-variant-b :is(#demo,#buddy) .section-heading { max-width: 400px; }
  body.landing-variant-b :is(#demo,#buddy) :is(.demo-stage,.buddy-stage) {
    width: 100%; max-width: none; grid-template-columns: 168px minmax(0,1fr); gap: 18px;
  }
}
body.landing-variant-b .product-step-rail :is(.demo-tabs,.buddy-steps) button {
  justify-content: flex-start; transform: none; box-sizing: border-box;
}
body.landing-variant-b .product-step-rail :is(.demo-copy-panel,.buddy-copy) h3 { font-size: 20px; }
body.landing-variant-b .product-step-rail .step-hint {
  display: grid; grid-template-columns: 10px minmax(0,1fr); gap: 7px;
  border-top: 1px solid var(--line); padding-top: 14px; margin-top: 16px;
}
body.landing-variant-b .product-step-rail .step-hint > span { color: var(--accent-text); font-size: 12px; line-height: 1.6; }
body.landing-variant-b .product-step-rail .step-hint > p { margin: 0; font-size: 12px; line-height: 1.6; color: var(--muted); }
/* A group name occupies a side track, never an extra heading row on desktop. */
body.landing-variant-b #faq.faq-compact { grid-template-columns: minmax(220px,280px) minmax(0,1fr); gap: 44px; }
body.landing-variant-b #faq .section-heading h2 { font-size: clamp(28px,3.15vw,44px); line-height: 1.12; letter-spacing: -.035em; }
body.landing-variant-b #faq .faq-group { grid-template-columns: 112px minmax(0,1fr); column-gap: 16px; align-items: start; }
body.landing-variant-b #faq .faq-group-title { margin: 0; padding-top: 18px; font-size: 12px; line-height: 1.5; letter-spacing: .015em; }
body.landing-variant-b #faq .faq-group-items { display: grid; gap: 10px; min-width: 0; }
body.landing-variant-b #faq .faq-list { gap: 22px; }
/* Height interpolation is owned by one repeatable native-details controller.
   Old 0fr/1fr and one-time reveal transforms must not compete with it. */
[data-disclosure-enhanced] { box-sizing: border-box; }
[data-disclosure-enhanced][data-disclosure-motion] { overflow: hidden; }
[data-disclosure-enhanced] > .faq-answer { display: block; opacity: 1; transition: none; }
[data-disclosure-enhanced] > .faq-answer p { transform: none; transition: none; }
@media (min-width: 761px) and (max-width: 1000px) {
  body.landing-variant-b :is(#demo,#buddy) .demo-layout { grid-template-columns: minmax(0,1fr); gap: 26px; }
  body.landing-variant-b :is(#demo,#buddy) .section-heading { max-width: 760px; }
  body.landing-variant-b :is(#demo,#buddy) :is(.demo-stage,.buddy-stage) { max-width: 700px; justify-self: center; }
  body.landing-variant-b #faq.faq-compact { grid-template-columns: minmax(0,1fr); gap: 26px; }
}
@media (max-width: 760px) {
  body.landing-variant-b #faq.faq-compact { grid-template-columns: minmax(0,1fr); gap: 22px; }
  body.landing-variant-b #faq .section-heading h2 { font-size: clamp(27px,7.6vw,31px); }
  body.landing-variant-b #faq .faq-group { grid-template-columns: minmax(0,1fr); gap: 8px; }
  body.landing-variant-b #faq .faq-group-title { padding-top: 0; }
}

/* C004: the category copy stays anchored. No fixed text height or clipping. */
body.landing-variant-b .channel-library-note[data-channel-description] {
  display: grid; grid-template-columns: minmax(0,1fr); height: auto; min-height: 0;
  max-height: none; overflow: visible; transform: none; transition: none;
}
.channel-library-note > .channel-summary {
  grid-area: 1 / 1; visibility: hidden; opacity: 0; pointer-events: none;
  transform: none; transition: opacity .2s ease;
}
.channel-library-note > .channel-summary.is-current { visibility: visible; opacity: 1; pointer-events: auto; }
.reviews-mobile-title, .reviews-mobile-hint, .mobile-theme-state { display: none; }

/* C004: a compact mobile navigation sheet, one shared theme toggle at the top. */
@media (max-width: 760px) {
  .site-header .mobile-menu.is-open {
    display: grid; grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 8px; align-content: start;
    padding: 8px max(16px,env(safe-area-inset-right,0px)) max(16px,env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));
    border-bottom: 1px solid var(--line); animation: landing-menu-in .22s ease both;
  }
  .site-header .mobile-menu > a:not(.button):not(.mobile-account-login) {
    display: flex; align-items: center; min-width: 0; min-height: 46px;
    margin: 0; padding: 10px 12px; border: 1px solid var(--line);
    border-radius: 10px; background: var(--surface); font-size: 13px; line-height: 1.35;
  }
  .site-header .mobile-menu > .mobile-account-login,
  .site-header .mobile-menu > .button {
    display: flex; align-items: center; justify-content: center; min-width: 0;
    min-height: 46px; margin: 6px 0 0; padding: 10px 8px;
    border: 1px solid var(--line-strong); border-radius: 11px; font-size: 13px;
    line-height: 1.35; text-align: center; white-space: normal;
  }
  .site-header .mobile-menu > .button { background: var(--accent-soft); color: var(--text); box-shadow: none; }
  /* Decorative CTA rules must not draw a trailing line outside this sheet. */
  .site-header .mobile-menu > .button::before,
  .site-header .mobile-menu > .button::after,
  .site-header .mobile-menu > .mobile-account-login::after { content: none; }
  .site-header .mobile-theme-row {
    grid-column: 1 / -1; min-width: 0; padding: 0 0 10px; margin: 0 0 2px;
    border-top: 0; border-bottom: 1px solid var(--line); font-size: 13px;
  }
  .site-header .mobile-theme-row .theme-toggle {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    width: auto; height: 44px; min-height: 44px; padding: 8px 12px; border-radius: 12px;
  }
  .mobile-theme-row .mobile-theme-state { display: inline; font-size: 12px; color: var(--text); }
  .site-header .mobile-menu a:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }
  @keyframes landing-menu-in { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: none; } }

  /* A moved preview is a flow child, not width:100% plus horizontal margins. */
  body.mobile-compact-b .system-card > .mobile-compact-details > .bot-analysis-preview {
    position: relative; inset: auto; width: auto; max-width: none; min-width: 0;
    margin: 12px; padding: 16px 14px; align-self: stretch;
  }
  body.mobile-compact-b .system-card > .mobile-compact-details > ul {
    margin: 8px 14px 14px; padding: 0 0 0 18px; display: grid; gap: 6px;
    color: var(--muted-strong); font-size: 13px; line-height: 1.5; min-width: 0;
  }
  body.mobile-compact-b .system-card .bot-analysis-top { gap: 12px; min-width: 0; }
  body.mobile-compact-b .system-card .bot-analysis-top > span { min-width: 0; }
  body.mobile-compact-b .system-card .analysis-criteria { grid-template-columns: minmax(0,1fr); gap: 12px; }
  body.mobile-compact-b .system-card .analysis-criteria > div { grid-template-columns: minmax(0,1fr) minmax(48px,1.1fr) 16px; gap: 9px; min-width: 0; }
  body.mobile-compact-b .system-card .analysis-criteria span { font-size: 11px; line-height: 1.35; overflow-wrap: anywhere; }
  body.mobile-compact-b .system-card .analysis-focus { grid-template-columns: minmax(0,1fr); gap: 5px; padding: 12px; }
  body.mobile-compact-b .system-card .analysis-focus p { font-size: 12px; line-height: 1.5; }
  body.mobile-compact-b .system-card .system-number { font-size: 36px; right: 18px; top: 16px; }

  /* Read the actual testimonial at full phone width. Controls no longer consume
     the image's horizontal space, nor does a desktop vh height create a void. */
  body.landing-variant-b .reviews-modal { padding: max(12px,env(safe-area-inset-top,0px)) max(12px,env(safe-area-inset-right,0px)) max(12px,env(safe-area-inset-bottom,0px)) max(12px,env(safe-area-inset-left,0px)); }
  body.landing-variant-b .reviews-dialog {
    display: grid; grid-template-columns: 44px minmax(0,1fr) 44px;
    grid-template-rows: auto minmax(0,auto) auto; gap: 12px;
    width: 100%; max-width: 520px; height: auto;
    max-height: calc(100dvh - max(12px,env(safe-area-inset-top,0px)) - max(12px,env(safe-area-inset-bottom,0px)));
    padding: 14px; border-radius: 20px; min-height: 0; overflow: hidden;
  }
  .reviews-dialog > .reviews-mobile-title { display: block; grid-column: 1 / 3; grid-row: 1; align-self: center; font-size: 14px; }
  body.landing-variant-b .reviews-dialog > .modal-close { grid-column: 3; grid-row: 1; position: static; width: 44px; height: 44px; margin: 0; }
  body.landing-variant-b .reviews-modal-stage { display: contents; }
  body.landing-variant-b .reviews-modal-stage > figure {
    grid-column: 1 / -1; grid-row: 2; min-width: 0; min-height: 0; margin: 0;
    max-height: calc(100dvh - 178px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));
    overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; border-radius: 12px;
  }
  body.landing-variant-b .reviews-modal-image-button { display: block; width: 100%; min-width: 0; max-width: 100%; height: auto; border-radius: 12px; }
  body.landing-variant-b .reviews-modal-stage img { display: block; width: 100%; max-width: 100%; height: auto; max-height: none; margin: 0; border-radius: 12px; box-shadow: none; }
  body.landing-variant-b .reviews-modal.is-zoomed .reviews-modal-image-button { width: 170%; min-width: 170%; max-width: none; cursor: zoom-out; }
  body.landing-variant-b .reviews-modal.is-zoomed .reviews-modal-stage img { width: 100%; max-width: 100%; height: auto; max-height: none; }
  body.landing-variant-b .reviews-modal-arrow { position: static; grid-row: 3; width: 44px; height: 44px; margin: 0; transform: none; }
  body.landing-variant-b .reviews-modal-prev { grid-column: 1; }
  body.landing-variant-b .reviews-modal-next { grid-column: 3; }
  body.landing-variant-b .reviews-modal-footer { display: grid; grid-column: 2; grid-row: 3; gap: 4px; align-content: center; justify-items: center; margin: 0; padding: 0; min-width: 0; text-align: center; }
  body.landing-variant-b .reviews-modal-footer > small:not(.reviews-mobile-hint) { display: none; }
  body.landing-variant-b .reviews-modal-footer > .reviews-mobile-hint { display: block; font-size: 10px; line-height: 1.3; color: var(--muted); }
}
@media (prefers-reduced-motion: reduce) {
  .channel-library-note > .channel-summary { transition: none; }
  .site-header .mobile-menu.is-open { animation: none; }
}

/* C005: stable steps. Every complete copy contributes to the same grid track.
   No per-step heights, no truncated notes, no resize-on-switch measurement. */
body.landing-variant-b .product-step-rail :is(.demo-copy-panel,.buddy-copy) {
  display: grid; grid-template-columns: minmax(0,1fr); align-items: start;
}
.demo-copy-panel > .demo-copy-item,
.buddy-copy > [data-buddy-copy],
.buddy-preview > [data-buddy-shot] {
  grid-area: 1 / 1; min-width: 0; visibility: hidden; pointer-events: none;
}
.demo-copy-panel > .demo-copy-item.is-current,
.buddy-copy > [data-buddy-copy].is-current,
.buddy-preview > [data-buddy-shot].is-current { visibility: visible; pointer-events: auto; }
body.landing-variant-b #buddy .buddy-preview { display: grid; grid-template-columns: minmax(0,1fr); align-items: start; }
body.landing-variant-b :is(#demo,#buddy) :is(.demo-stage,.buddy-stage) { align-items: start; }
/* RAF owns transform/opacity/filter: CSS interpolation must not lag behind it. */
body.landing-variant-b .review-card-coverflow { transition: none; }
body.landing-variant-b .reviews-viewport-coverflow { touch-action: pan-y pinch-zoom; }
/* C005: owner-selected compact A is native, not a review override. */
html { --library-compact-canvas: 520px; }

@media (min-width: 761px) {
  body.landing-variant-b #channel-library {
    grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); gap: 42px; align-items: start;
    padding-block: 56px 48px;
  }
  body.landing-variant-b #channel-library .channel-library-copy h2 {
    font-size: clamp(32px,3.3vw,46px); line-height: 1.07; letter-spacing: -.035em;
  }
  body.landing-variant-b #channel-library .channel-library-copy > .section-label { margin-bottom: 18px; }
  body.landing-variant-b #channel-library .channel-library-copy > p:not(.section-label) {
    font-size: 15px; line-height: 1.6; margin-top: 18px;
  }
  #channel-library .channel-browser-nav { margin-top: 20px; gap: 7px; }
  #channel-library .channel-filter { padding: 10px 12px; min-height: 44px; font-size: 12px; }
  body.landing-variant-b #channel-library .channel-library-note { margin-top: 16px !important; padding-top: 14px; font-size: 13px !important; line-height: 1.55 !important; }
  #channel-library .channel-browser-stage {
    height: var(--library-compact-canvas) !important; min-height: var(--library-compact-canvas) !important; max-height: var(--library-compact-canvas) !important;
  }
}

body.landing-variant-b #channel-library .open-materials-card {
  --card-signal: #f4c96c;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 75%; max-width: none; min-width: 0; min-height: 74px;
  margin: 20px 0 0; padding: 14px 16px; box-sizing: border-box;
  border: 1px solid var(--line); border-radius: 15px;
  background: var(--surface); box-shadow: none; color: var(--muted-strong);
  text-decoration: none; overflow: hidden; opacity: 1;
  transition: transform .22s ease, border-color .22s ease, background-color .22s ease;
}
body.landing-variant-b #channel-library .open-materials-card::before,
body.landing-variant-b #channel-library .open-materials-card::after { content: none; }
.open-materials-card > strong { font-size: 15px; line-height: 1.35; }
.open-materials-card-action { display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.open-materials-card-arrow { font-size: 22px; line-height: 1; color: var(--muted); transition: color .2s ease, transform .2s ease; }
.open-materials-card-verb { font-size: 12px; color: var(--card-signal); opacity: 0; transition: opacity .2s ease; }
.open-materials-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.open-materials-card:focus-visible .open-materials-card-arrow { color: var(--card-signal); }
.open-materials-card:focus-visible .open-materials-card-verb { opacity: 1; }
html[data-theme="light"] body.landing-variant-b #channel-library .open-materials-card { --card-signal: #966600; background: var(--surface); }
@media (hover:hover) and (pointer:fine) {
  body.landing-variant-b #channel-library .open-materials-card:hover { transform: translateY(-3px); border-color: var(--line-strong); }
  .open-materials-card:hover .open-materials-card-arrow { color: var(--card-signal); transform: translateX(3px); }
  .open-materials-card:hover .open-materials-card-verb { opacity: 1; }
}
@media (min-width:761px) and (max-width:1080px) {
  body.landing-variant-b #channel-library { gap: 26px; }
  #channel-library .channel-browser-nav { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
  .open-materials-card-verb { display: none; }
}
@media (max-width:760px) {
  body.landing-variant-b.mobile-compact-b #channel-library .mobile-compact-flow > .open-materials-card {
    display: flex; flex-direction: row; align-items: center; gap: 10px;
    width: calc(100% - 24px); max-width: 320px; margin: 12px; padding: 12px 14px; min-height: 66px;
  }
  .open-materials-card-verb { opacity: 1; }
  .open-materials-card > strong { font-size: 14px; }
  .open-materials-card-arrow { color: var(--card-signal); }
}
@media (prefers-reduced-motion:reduce) {
  body.landing-variant-b #channel-library .open-materials-card,
  .open-materials-card-arrow, .open-materials-card-verb { transition: none; }
  body.landing-variant-b #channel-library .open-materials-card:hover,
  .open-materials-card:hover .open-materials-card-arrow { transform: none; }
}