/* Controlled accessibility / responsive pass. Uses the existing brand tokens. */
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.menu-toggle{display:none}.language-control{position:relative}.language-select{max-width:135px;min-height:44px;border:1px solid var(--line);border-radius:9px;background:var(--bg);color:var(--white);font:14px var(--font);padding:8px}
.header nav{font-size:14px;gap:18px}.header nav a,.footer nav a{min-height:44px;display:inline-flex;align-items:center}.footer nav{font-size:14px;gap:8px 22px}.footer-identity p{font-size:14px}
.primary,.text-link,.watch,.header-cta{min-height:44px}.watch{font-size:14px}.skip-story{display:inline-flex;align-items:center;min-height:44px;font-size:12px}.chapter-nav button{min-height:44px;font-size:12px}.example-label{font-size:11px}.scene-caption{color:var(--muted)}
select:focus-visible,button:focus-visible,a:focus-visible,summary:focus-visible{outline:2px solid var(--gold);outline-offset:4px}
.plan-features li{font-size:15px}.plan-bottom>p,.small-note,.manual-note,.connection-label,.connection-visual figcaption,.story-photo figcaption{font-size:14px}.connection-action .copy-status{font-size:13px}.connection-columns>li>p,.faq details p{font-size:16px}.faq summary{min-height:56px}
.pricing-page .billing-controls{flex-direction:column;align-items:center;gap:10px}.billing-note,.price-note{font-size:14px;line-height:1.6;text-align:center;color:var(--muted);margin:0;max-width:650px}.price-note{font-size:13px}
.pricing-page[data-billing="monthly"] .free-detail{display:block}.pricing-page [data-plan="pro"] .annual-detail[hidden]{display:block!important;visibility:hidden}
.pricing-page table{min-width:0;table-layout:fixed}.pricing-page table th:first-child{width:43%}.pricing-page .comparison th,.pricing-page .comparison td{padding:14px 12px}.pricing-page .comparison caption{font-size:14px}.pricing-page .comparison-level{font-size:14px}.pricing-page .comparison-legend{font-size:12px}
.mcp-intro-copy>.actions{align-items:flex-start;flex-wrap:wrap;gap:20px}.telegram-option{max-width:245px}.telegram-connect{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:12px 18px;background:transparent;border:1px solid #e8b87240;border-radius:30px;font-size:14px;color:var(--white)}.telegram-connect:hover{border-color:var(--gold)}.telegram-connect:focus-visible{outline:2px solid var(--gold);outline-offset:3px}.telegram-connect svg{fill:none;stroke:currentColor;stroke-width:1.3;stroke-linejoin:round}.telegram-option p{font-size:14px;line-height:1.6;color:var(--muted);margin:12px 0 0}.telegram-option #telegram-status{font-size:12px}
.story h1,.support-section h1{font-size:clamp(30px,3.2vw,45px);line-height:1.2;font-weight:450;letter-spacing:-.04em;margin:0}.story h1 span{color:var(--gold);display:inline}.faq-section .faq>h1{font-size:28px;line-height:1.3;letter-spacing:-.025em;margin:0 0 24px}.support-section h1{max-width:530px}
html[lang="zh-CN"] h1,html[lang="zh-CN"] h2,html[lang="zh-CN"] h3{letter-spacing:0;line-height:1.35;word-break:normal}html[lang="zh-CN"] .eyebrow{letter-spacing:.08em}html[lang="zh-CN"] .plan-title{min-height:72px}
@media(max-width:1100px){.header{height:auto;min-height:88px;flex-wrap:wrap;position:relative;padding-block:16px;gap:12px}.menu-toggle{display:inline-flex;align-items:center;justify-content:center;margin-left:auto;min-height:44px;padding:9px 16px;border:1px solid var(--line);border-radius:9px;background:transparent;font-size:15px}.header nav{display:none;width:100%;max-width:none;flex-direction:column;align-items:stretch;gap:2px;padding-top:12px;border-top:1px solid var(--line);font-size:16px}.header nav.is-open{display:flex}.header nav .about-link{display:flex;font-size:16px}.header nav a{padding:10px 12px}.header nav .header-cta{margin:8px 0;justify-content:center;font-size:15px}.language-select{width:100%;max-width:none}.language-control{display:block}.header nav .header-cta span{display:inline}.header nav .about-link{min-height:44px}}
@media(max-width:800px){.steps,.mcp-flow,.boundaries{grid-template-columns:1fr;gap:28px}.steps li{padding-left:40px;position:relative}.step-number{position:absolute;left:0;top:3px}.plans .plan-features{columns:1}.practical dl{grid-template-columns:1fr}.mcp-intro-copy>.actions{flex-direction:column;align-items:stretch}.mcp-intro-copy>.actions>.primary{justify-content:center}.telegram-option{max-width:none}.telegram-connect{width:100%}.story-copy{font-size:16px}.support,.explanation{font-size:16px}.hero-copy .actions{flex-wrap:wrap;gap:12px 22px}.hero-copy h1{font-size:clamp(40px,7vw,58px)}
 /* Keep the introduction and illustration in normal flow; pin the illustration after the copy scrolls out. */
 .scroll-story.is-enhanced:not(.motion-static){height:calc(var(--hero-height,1100px) + 260svh)}
 .is-enhanced>.hero{display:block;height:auto;min-height:100svh;overflow:visible;top:var(--hero-sticky-top,0px);padding-top:26px;padding-bottom:20px}
 .is-enhanced .hero-copy{position:relative;inset:auto;pointer-events:auto;max-width:600px;transform:none!important;opacity:1!important}
 .is-enhanced .scroll-visual{position:relative;inset:auto;width:100%;margin:36px auto 0;transform:none!important;max-width:600px}
 .app-viewport{height:min(550px,64svh)}.scroll-footer p{font-size:13px}.scroll-footer>span{font-size:10px}.scroll-visual .scene-caption{font-size:10px}.example-label{font-size:11px}.chapter-nav button{font-size:12px}
 .motion-static.scroll-story{height:auto}.motion-static>.hero{top:auto;position:relative}.motion-static .app-viewport{height:min(550px,64svh)}
}
@media(max-width:600px){.pricing-page table th:first-child{width:40%}.pricing-page .comparison th,.pricing-page .comparison td{padding:13px 5px;font-size:12px;overflow-wrap:anywhere}.pricing-page .comparison .comparison-level{font-size:12px}.pricing-page .comparison thead th:not(:first-child){white-space:normal}.pricing-page .comparison td{white-space:normal}.billing-toggle label>span{font-size:14px}.billing-toggle small{font-size:11px}.pricing-page .price-amount{font-size:38px}.footer nav{display:grid;grid-template-columns:1fr 1fr;width:100%;gap:4px 14px}.header .brand .logo-art{width:145px}.wrap{padding-inline:22px}.header nav .about-link{font-size:16px}.hero-copy .primary{font-size:14px}.hero-copy .watch{font-size:14px}.page-intro h1,.mcp-visual-intro h1{font-size:clamp(34px,8.8vw,42px)}.section-intro{font-size:16px}.story h1,.support-section h1{font-size:32px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.scroll-story.is-enhanced{height:auto!important}.is-enhanced>.hero{top:auto;position:relative}.is-enhanced .hero-copy,.is-enhanced .scroll-visual{will-change:auto}}
.practical>h2{font-size:21px;max-width:none;margin-bottom:30px;line-height:1.5;letter-spacing:-.02em}
@media(max-width:800px){.scroll-footer p{min-height:42px;display:flex;align-items:center}}
/* Mobile composition: the same product story, framed for a portrait viewport. */
.menu-close{display:none}.mobile-reveal[hidden]{display:none}
@media(max-width:1100px){
 :root{--mobile-header:calc(68px + env(safe-area-inset-top,0px))}
 html{scroll-padding-top:calc(var(--mobile-header) + 16px)}
 body{padding-top:var(--mobile-header)}
 .header.wrap{position:fixed;inset:0 0 auto;z-index:100;width:100%;max-width:none;height:var(--mobile-header);min-height:0;flex-wrap:nowrap;padding:env(safe-area-inset-top,0px) max(22px,env(safe-area-inset-right,0px)) 0 max(22px,env(safe-area-inset-left,0px));background:#0b0f17;border-bottom:1px solid var(--line)}
 .header .brand{min-height:44px}.header .logo-art{width:145px}
 .menu-toggle{width:44px;height:44px;padding:10px;color:var(--white)}
 .hamburger{width:18px;height:12px;border-top:1px solid currentColor;border-bottom:1px solid currentColor;position:relative}
 .hamburger:after{content:"";position:absolute;left:0;right:0;top:5px;border-top:1px solid currentColor}
 .header nav{position:fixed;inset:var(--mobile-header) 0 0;width:100%;padding:18px max(22px,env(safe-area-inset-right,0px)) max(24px,env(safe-area-inset-bottom,0px)) max(22px,env(safe-area-inset-left,0px));background:var(--bg);overflow-y:auto;justify-content:flex-start;flex-wrap:nowrap;border:0}
 .menu-close{display:flex;align-items:center;justify-content:space-between;min-height:44px;border:0;border-bottom:1px solid var(--line);background:transparent;color:var(--muted);font:14px var(--font);padding:10px 12px;margin-bottom:12px}
 .menu-close span{font-size:24px}
}
@media(max-width:800px){
 .scroll-story.is-enhanced:not(.motion-static){height:calc(100svh - var(--mobile-header) + 230svh)}
 .scroll-story.is-enhanced:not(.motion-static)>.hero{height:calc(100svh - var(--mobile-header));min-height:0;top:var(--mobile-header);padding:0;overflow:hidden}
 .scroll-story.is-enhanced:not(.motion-static) .hero-copy{position:absolute;inset:14px 22px auto;max-width:none;padding:0;text-align:center;z-index:3}
 .scroll-story.is-enhanced .hero-copy .eyebrow,.scroll-story.is-enhanced .hero-copy .support,.scroll-story.is-enhanced .hero-copy .explanation,.scroll-story.is-enhanced .hero-copy .watch{display:none}
 .scroll-story.is-enhanced .hero-copy h1{font-size:clamp(26px,6.5vw,36px);line-height:1.12;letter-spacing:-.035em;max-width:360px;margin:0 auto 12px}
 .scroll-story.is-enhanced .hero-copy h1 span{display:inline}
 .scroll-story.is-enhanced .hero-copy h1 span:not(:last-child):after{content:" "}
 .scroll-story.is-enhanced .hero-copy .actions{justify-content:center;margin:0}
 .scroll-story.is-enhanced:not(.motion-static) .scroll-visual{position:absolute;inset:148px 16px 62px;width:auto;max-width:none;margin:0;padding:0}
 .scroll-story.is-enhanced:not(.motion-static) .app-viewport{height:100%;max-width:500px;margin:auto}
 .scroll-story.is-enhanced:not(.motion-static) .scene-caption{position:fixed;bottom:max(4px,env(safe-area-inset-bottom,0px));right:22px;margin:0;z-index:4}
 .scroll-story.is-enhanced .scene-caption>#chapter-label,.scroll-story.is-enhanced .caption-line,.scroll-story.is-enhanced .scroll-footer p,.scroll-story.is-enhanced .chapter-nav,.scroll-story.is-enhanced .example-label{display:none}
 .scroll-story.is-enhanced:not(.motion-static) .scene-caption{position:absolute;bottom:-56px;right:0}
 .scroll-story.is-enhanced .scroll-footer{position:absolute;left:6px;bottom:-50px;margin:0;min-height:44px;display:flex;align-items:center}
 .scroll-story.is-enhanced .scroll-footer>span{font-size:9px}
 .scroll-story[data-mobile-phase="story"]:not(.motion-static) .hero-copy,.scroll-story[data-mobile-phase="reveal"]:not(.motion-static) .hero-copy{visibility:hidden}
 .scroll-story[data-mobile-phase="story"]:not(.motion-static) .scroll-visual{top:18px}
 .scroll-story[data-mobile-phase="reveal"]:not(.motion-static) .scroll-visual{top:18px;bottom:160px}
 .scroll-story[data-mobile-phase="reveal"]:not(.motion-static) .scroll-footer{display:none}
 .scroll-story[data-mobile-phase="reveal"]:not(.motion-static) .scene-caption{bottom:-150px}
 .mobile-reveal{position:absolute;bottom:54px;left:22px;right:22px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px}
 .mobile-reveal p{margin:0;font-size:18px;line-height:1.3}
 .mobile-reveal .primary{font-size:14px}
 .motion-static .hero-copy{text-align:center;padding:0}.motion-static .scroll-visual{margin-top:24px}
 .motion-static .scene-caption{justify-content:flex-end}.motion-static .scroll-footer{display:none!important}
 .motion-static .chapter-nav{display:flex!important}
}
@media(max-width:800px){
 .scroll-story.is-enhanced:not(.motion-static) .scroll-visual{top:var(--mobile-visual-top,148px);bottom:var(--mobile-visual-bottom,62px)}
 .scroll-story.is-enhanced:not(.motion-static) .hero-copy{opacity:var(--mobile-copy-opacity,1)!important}
}
@media(max-width:800px){.app-screen{transform-origin:center center}}

/* Keep both approved hero actions available on compact screens. */
@media(max-width:800px){.scroll-story.is-enhanced .hero-copy .watch{display:inline-flex;font-size:13px;gap:6px}.scroll-story.is-enhanced .hero-copy .actions{gap:8px 16px}.scroll-story.is-enhanced .hero-copy .watch svg{width:16px;height:16px}}
/* Keep plan names visible while reading the full comparison on a phone. */
@media(max-width:800px){
 .pricing-page .table-scroll{overflow:visible}
 .pricing-page .comparison thead th{position:sticky;top:var(--mobile-header);z-index:4;background:#10151f;box-shadow:0 1px 0 var(--line)}
 .pricing-page .comparison thead th:last-child{background:#221e1b;color:var(--gold)}
}